[class: PM Camp@Fast Campus#7] 개발 #5 – 페이스북, 카카오톡과 내 서비스를 묶어보기 (my note is WIP)

4주차

5. 30 토

개발 #5 – 페이스북, 카카오톡과 내 서비스를 묶어보기

외부 서비스 연동과 모바일 환경 알아보기 API, OAuth 등 외부와 연결하기 위해 필요한 개념 소개 모바일 환경과 데스크톱 환경의 차이, 반응형 웹

김태곤

1. linking with external services and understanding mobile environment [Taegon Kim@Fancy.com, software engineer]
1. lesson:
1. social log-in implementation
1. Kakao
2. Facebook

<?php

   #!/bin/sh

   #  config.php

   

   $db_host = '128.199.101.11';

   $db_user = 'pmcamp';

   $db_password = 'pmcamp!';

   $db_name = 'pmcamp';

   // facebook 로그인정보

   $fb_app_id = ‘type id key'

   $fb_app_secret = ‘type secret key’

   $fb_redirect_url = 'http://localhost:8000/login.php?fblogin=true';

2. OAuth: c.f. OAuth 1.0 (RFC 5849), OAuth 2.0 (RFC 6749)
1. authorization
2. authentication
3. consider how much permission PM wants to grant and ???
4. c.f. RFC (request for comment): a series of notes about the Internet, started in 1969 (when the Internet was the ARPANET). An Internet Document can be submitted to the IETF by anyone, but the IETF decides if the document becomes an RFC. Eventually, if it gains enough interest, it may evolve into an Internet standard. <source: Webopedia>
3. include PHP code to double-check log-in info through JavaScript
1. when log-in, client side needs to send token and service name (e.g. Kakao)
4. SDK (software development kit): a form of library (code collection to be used occasionally)
5. mobile app: web app (independant impression: e.g. Gmail), native app (operating system dependant), hybrid app (Webview, implementing JavaScript; PhoneGap or Apache Cordova)
1. negative aspect
1. for web app: saving or using files on device, vibration API, lower processing speed, mostly online only
2. for hybrid app: lower processing speed
2. mobile native app framework example for hybrid app by overcoming negativities (e.g. speed)
1. Titanium Mobile: native app like performance via JavaScript (#2 recommendation by taegon@)
2. React Native by Facebook (#1 recommendation by taegon@)
3. Native Script (#4 recommendation by taegon@)
4. Tabris.js (#3 recommendation by taegon@)
6. desktop hybrid app framework example by putting Chrome outside and HTML, CSS, JavaScript inside
1. nw.js (previously node-webkit) (e.g. Popcorn)
2. Brackets Shell
3. atom/electron
4. c.f. offline viewer project
7. app development tool
1. ionic: HTML5 native app development framework that helps you build native-feeling mobile apps all with web technologies like HTML, CSS, and Javascript. <source: Iconicframework>
8. fragmentation
1. symptom: increased cost and development time
2. reason: varied hardware (e.g. process function, memory capacity, screen size, hardware function), software (e.g. OS example, version), user (e.g. language, font size, accessibility)
3. solution
1. responsive Web: no additional page creation by screen size ratio (e.g. Bootstrap)
1. resource: one web address to display a content (c.f. site.com/hello vs. m.site.com/hello)
2. flexible grid: width changing grid due to screen size  by using media query
3. negative: usage of unnecessary data (e.g. 100x100px for regular vs. 200x200 px for retina; increased CPU and memory traffic)
4. place: mainly client side activity
2. adaptive Web:
1. place: server side activity as well
2. positive: optimized screen display per device
3. negative: not optimally supporting new device
3. RESS: responsive design and server side components (link)
9. useful query combination for development
1. new technology discovery:
1. for all possible examples: add [kitchen sink] next to the technology term e.g. [HTML5 kitchen sink]
2. for beginner’s code: add [boilerplate] next to the technology term e.g. [HTML5 boilerplate]
2. placeholder filler:
1. add [lorem ipsum] next to media type: e.g. [lorem ipsum image], [lorem ipsum text]
10. testing for web accessibility
1. mouse and keyboard support: e.g. hover with mouse = focus with keyboard; mouse out with mouse = blur with keyboard (e.g. <a href=”... “ onclick=”return false;” … onfocus=”this.blur()”)
2. logical tap movement
3. skip navigation link: e.g. “skip to main content”
4. alt text for image
5. subtitle for media content (e.g. video)
11. regular expression (or regex): useful site
1. benefit: finding patterned text (e.g. ZIP code, phone number, email address)
2. example: for js file, [\/\w+,js]; for space plus “var,” [^var]
12. SQL command example
1. SELECT: selecting field
1. e.g. SELECT user_id, content;
2. FROM: data field
1. e.g. SELECT user_id, content FROM posts;
3. WHERE: restrictive condition
1. e.g. SELECT user_id, content FROM posts WHERE like_count > 10;
2. e.g. SELECT user_id, content FROM posts WHERE content = ‘2222’
4. LIKE: search for a specified pattern in a column. The SQL LIKE Operator The LIKE operator is used to search for a specified pattern in a column (<-WHERE column). <source: w3schools.com>
1. e.g. SELECT user_id, content FROM posts WHERE like_count > 10 LIKE ‘%2%’
5. others
1. %: selecting all
1. e.g. ‘%2%’: any number including 2
2. e.g. ‘2%’: any number starting with 2

2. personal takeaway:
1. New Semantic Elements in HTML5 Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer. HTML5 offers new semantic elements to define different parts of a web page: <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time> <source: w3schools.com>
2. expression: “everything but the kitchen sink <source: The Free Dictionary>
3. test low bandwidth with Chrome Developer Tools

[class: PM Camp@Fast Campus#6] 개발 #4 – 아랍어는 어떻게 처리하나요? (my note is WIP)

5. 27 수

개발 #4 – 아랍어는 어떻게 처리하나요?

다국어 환경과 웹 접근성 다국어 환경에서 고려해야 할 점, 실습 – 다국어 환경을 고려한 웹 사이트 제작(기존 사이트 수정) 웹 접근성을 고려한 웹 사이트 제작 원칙

김태곤

1. Multi-language environment and web accessibility [Taegon Kim@Fancy.com, software engineer]
1. lesson:
1. areas of SWE’s interest: 1. repetitive and nonrepetitive 2. diff and non-diff
2. multi-language support:
1. translation services
1. free service: pootle.locamotion.org/en and weblate.org/ko (c.f. both written in Python)
2. paid service: c.f. crowdin.com, upwork.com
2. file format
1. on iOS, file format is .strings
2. on JavaScript, check out moment.js
3. content: text, currency (e.g. 10,000.123 for Korea, 10 000,123 for France), weather (e.g. dd-mm-yyyy for UK, mm-dd-yyyy for US)
4. process: i18n to English first, then move to other languages
5. button design: give some space for texts within buttons
6. RTL: e.g. Arabic, Hebrew
7. process: provide context (e.g. for Fancy, subscribe can be translated

2. personal takeaway:
1. learn how to use Git’s Pull feature

[class: PM Camp@Fast Campus#5] 개발 #3 – 직접 개발해 볼까? (my note is WIP)

3주차

5. 23 토

개발 #3 – 직접 개발해 볼까?

간단한 웹 서비스를 개발하면서 개발 개념 이해하기 PHP, HTML, CSS, JavaScript, MySQL의 기초 익히기 Bootstrap을 사용한 간단한 웹 서비스를 GitHub에 저장하기. 주의! 개발 과정을 이해하기 위한 간단한 예제를 만듭니다. 실제  서비스 개발과 거리가 있습니다.

1. Understanding development concept via developing a simple web service [Taegon Kim@Fancy.com, software engineer]
1. lesson
1. Permission: e.g. d (directory) r (read) w (write) x (execute) r- (<-group) xr (<-others other than owner and group) -x
1. c.f. 4 (read), 2 (write), 1 (execute)): e.g. chmod 644 file_name
2. Process
1. usage check: for Windows, use taskmgr on Prompt; for Mac, monitor on Spotlight
2. description: “In computing, a process is an instance of a computer program that is being executed. It contains the program code and its current activity. Depending on the operating system (OS), a process may be made up of multiple threads of execution that execute instructions concurrently.” <source: Wikipedia>
3. Thread
1. description: “In computer science, a thread of execution is the smallest sequence of programmed instructions that can be managed independently by a scheduler, which is typically a part of the operating system. The implementation of threads and processes differs between operating systems, but in most cases a thread is a component of a process. Multiple threads can exist within the same process and share resources such as memory, while different processes do not share these resources. In particular, the threads of a process share its instructions (executable code) and its context (the values of its variables at any given moment)” <source: Wikipedia>
2. c.f. in installing PHP, try thread safe for safer processing (?) instead of non thread safe
4. PHP
1. description: PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. <source: PHP.net>
2. installing PHP
1. on Windows
1. flow: unzip downloaded PHP installation file -> change the folder name to php -> move the folder on C: -> property information? -> select PATH -> add “;C:\php” -> on cmd, type php
2. check: on cmd, type %appdata% -> see if npm folder exists, otherwise create one
2. on Mac
1. no need to install
2. c.f. type php -v for version info
5. Bracket
1. powerful usecase: using extract feature (e.g. example)
6. Git
1. need to update both server (i.e. web) and client program (i.e. GitHub)
1. server: Pull Request -> Merge -> etc.
2. client program: select Sync
2. c.f. GitBook to create a story on Git environment by using powerful history management system
7. package manager: npm and bower under JavaScript environment
1. install bower: type sudo npm install bower -g -> install bower
2. c.g. programming language containing package manager (e.g. Go)
8. Bootstrap: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web <source: Bootstrap>
1. Bootstrap component: link
2. Bootstrap theme: e.g. {wrap}bootstrap, Bootstrap Watch
9. PHP server setup: php -S (<-server) 127.0.0.1:8000 . (<- folder)
1. port number (c.f. link)
1. my computer: 8000
2. http: 80
3. https: 443
4. ssh: 22
2. c.f. port forwarding concept: e.g. 8000 -> 8000, 8001
10. webpage execution order: server side (e.g. PHP, .net, Java) -> client side (e.g. JavaScript)
11. progressive enhancement: add JavaScript codes after building basic features (e.g. add JavaScript’s accordion UI after filling in detail information on each row e.g. link)
12. graceful degradation: e.g. in 60 fps game, provide 10 fps at minimum
1. c.f. 16 fps for human eyes to see continuous movement on screen (c.f. 30 fps for animation)
13. language support
1. utf-8: unicode
1. 4 bytes per each character (e.g. English uses 1 byte, Korean uses 3 bytes)
2. c.f. Korean
1. 조합형 (~11,500 ea) vs. 완성형 (~5,000 ea)
2. 완성형 (cp (code page) 949, euc-kr)
14. minification:
1. .min file: removed space file (<- suggest at your company to implement this method)
15. grid: e.g. dividing page by 12 columns (c.f. 24 columns)
16. RDBMS (relational database management system): e.g. SQL
1. method: get (e.g. search query), post (e.g. signup info)
2. SQL: “SQL (Structured Query Language) is a special-purpose programming language designed for managing data held in a relational database management system (RDBMS), or for stream processing in a relational data stream management system (RDSMS).” <source: Wikipedia> enabling CRUD (create, read, update, delete)
3. password: use sha1 method instead of md5
17. issue: don’t trust clients because they can be manipulated
1. recommendation: consider implementing server verification process not to be manipulated by client (e.g. browser): e.g. for promotional event, implement server verification process
18. hacking via SQL injection method: e.g. type ‘’ OR true OR ‘’ on ID entry box

2. personal takeaway
1. Q. How to know whether a web service has plaintext for password (aka no password encryption)?
2. A: check whether you could retrieve password via finding password feature