4주차
|
5. 30 토
|
개발 #5 – 페이스북, 카카오톡과 내 서비스를 묶어보기
|
외부 서비스 연동과 모바일 환경 알아보기
API, OAuth 등 외부와 연결하기 위해 필요한 개념 소개
모바일 환경과 데스크톱 환경의 차이, 반응형 웹
|
김태곤
|
linking with external services and understanding mobile environment [Taegon Kim@Fancy.com, software engineer]
lesson:
social log-in implementation
-
-
<?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';
OAuth: c.f. OAuth 1.0 (RFC 5849), OAuth 2.0 (RFC 6749)
authorization
authentication
consider how much permission PM wants to grant and ???
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>
include PHP code to double-check log-in info through JavaScript
when log-in, client side needs to send token and service name (e.g. Kakao)
SDK (software development kit): a form of library (code collection to be used occasionally)
mobile app: web app (independant impression: e.g. Gmail), native app (operating system dependant), hybrid app (Webview, implementing JavaScript; PhoneGap or Apache Cordova)
negative aspect
for web app: saving or using files on device, vibration API, lower processing speed, mostly online only
for hybrid app: lower processing speed
mobile native app framework example for hybrid app by overcoming negativities (e.g. speed)
Titanium Mobile: native app like performance via JavaScript (#2 recommendation by taegon@)
-
-
-
desktop hybrid app framework example by putting Chrome outside and HTML, CSS, JavaScript inside
-
-
-
-
app development tool
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>
fragmentation
symptom: increased cost and development time
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)
solution
responsive Web: no additional page creation by screen size ratio (e.g. Bootstrap)
resource: one web address to display a content (c.f. site.com/hello vs. m.site.com/hello)
flexible grid: width changing grid due to screen size by using media query
negative: usage of unnecessary data (e.g. 100x100px for regular vs. 200x200 px for retina; increased CPU and memory traffic)
place: mainly client side activity
adaptive Web:
place: server side activity as well
positive: optimized screen display per device
negative: not optimally supporting new device
RESS: responsive design and server side components (link)
useful query combination for development
new technology discovery:
for all possible examples: add [kitchen sink] next to the technology term e.g. [HTML5 kitchen sink]
for beginner’s code: add [boilerplate] next to the technology term e.g. [HTML5 boilerplate]
placeholder filler:
add [lorem ipsum] next to media type: e.g. [lorem ipsum image], [lorem ipsum text]
testing for web accessibility
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()”)
logical tap movement
-
alt text for image
subtitle for media content (e.g. video)
-
benefit: finding patterned text (e.g. ZIP code, phone number, email address)
example: for js file, [\/\w+,js]; for space plus “var,” [^var]
SQL command example
SELECT: selecting field
e.g. SELECT user_id, content;
FROM: data field
e.g. SELECT user_id, content FROM posts;
WHERE: restrictive condition
e.g. SELECT user_id, content FROM posts WHERE like_count > 10;
e.g. SELECT user_id, content FROM posts WHERE content = ‘2222’
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>
e.g. SELECT user_id, content FROM posts WHERE like_count > 10 LIKE ‘%2%’
others
%: selecting all
e.g. ‘%2%’: any number including 2
e.g. ‘2%’: any number starting with 2
personal takeaway:
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>
-
test low bandwidth with Chrome Developer Tools
