[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