More Related Content Similar to 하루 안에 페이스북 웹 앱 만들기 Similar to 하루 안에 페이스북 웹 앱 만들기 (20) 하루 안에 페이스북 웹 앱 만들기6. 발표자 소개
2011.12
페이스북 개발 시작 6
7. 발표자 소개
2012.1~3
2012.7~9
페이스북 큐레이션 서비스 개발 / 월간 마이크로소프트웨어 7
8. 발표자 소개
2012.3
2012 페이스북 모바일 핵, 서울 8
9. 발표자 소개
2012.4~7
페이스북 큐레이션 서비스 개발 2 9
14. 발표자 소개
2012.7
2013.1~3
페이스북 웹 앱 개발 / 월간 마이크로소프트웨어 14
15. 발표자 소개
이용희 nekians@gmail.com
㈜ 아울네스트 대표이사
http://owlnest.kr
Best of Best ,Best of Social
2012 Facebook Mobile Hack – Seoul
페이스북 웹 앱 개발
2013.01~03 월간 마이크로소프트웨어
소셜 큐레이션 서비스 개발
2012.07~09 월간 마이크로소프트웨어
15
23. 강의 소개
캔버스 앱 & 페이지 탭 앱
• 좋아요
• 내 정보
• 친구 리스트
• 사진
• 사진 게시
• 태그
23
28. 강의 소개
근로기준법 제 50조 (근로시간), 2항 일을 하다 보면 조금 더 할 것 같아서 남게 될 때가 있죠?
1일의 근로시간은 휴게시간을 제외하고 8시간을 초과할 수 없다. 회사에서 주는 밥과 함께 야근을 할 시간입니다.
8시간 12시간
하루
24시간 ??시간 (24시간▲)
얼마나 걸릴지 모르면 일찍 퇴근하는 것이 답입니다. 웹에 대한 기본이 없으면 하루 안에는 안돼요….
다음날 열심히 하면 되겠죠? 안되면? 또 다음날…. 안되면? 야근……… 들어만 봤다면 이젠 찾아보고 공부해야 할 때입니다.
28
29. 강의 소개
근로기준법 제 50조 (근로시간), 2항 일을 하다 보면 조금 더 할 것 같아서 남게 될 때가 있죠?
1일의 근로시간은 휴게시간을 제외하고 8시간을 초과할 수 없다. 회사에서 주는 밥과 함께 야근을 할 시간입니다.
90▲ 70▲
8시간 12시간
하루
24시간 ??시간 (24시간▲)
50▲
얼마나 걸릴지 모르면 일찍 퇴근하는 것이 답입니다.
50▼
웹에 대한 기본이 없으면 하루 안에는 안돼요….
다음날 열심히 하면 되겠죠? 안되면? 또 다음날…. 안되면? 야근……… 들어만 봤다면 이젠 찾아보고 공부해야 할 때입니다.
29
66. 페이스북 오픈 플랫폼
소셜 플러그인 (Social Plugins)
https://developers.facebook.com/docs/plugins/ 66
70. 페이스북 오픈 플랫폼
창 (Dialog)
https://developers.facebook.com/docs/reference/dialogs/ 70
72. 페이스북 오픈 플랫폼
오픈 그래프 (Open Graph )
https://developers.facebook.com/docs/opengraph/overview/ 72
75. 페이스북 오픈 플랫폼
오픈 그래프 프로토콜 (Open Graph Protocol)
http://developers.facebook.com/docs/opengraphprotocol/ 75
78. 페이스북 오픈 플랫폼
결제 (Payments)
https://developers.facebook.com/docs/payments/ 78
80. 페이스북 오픈 플랫폼
Open API
Login
GraphAPI / FQL
GraphAPI
https://developers.facebook.com/docs/reference/login/ 80
83. 페이스북 앱
페이스북 앱 형태
• 웹 사이트 with 페이스북
• Inside 페이스북
– 페이스북 캔버스 앱
– 페이스북 페이지 탭 앱
• 페이스북 앱 with 모바일 앱
– 페이스북 앱 (Android / iOS)
84
91. 페이스북 앱
Curing – 모바일 앱 (Mobile App)
어떤 것들이 가능할지.
데모영상을 통해 알아보자.
http://youtu.be/9ci1yOvWXeg
92
93. 페이스북 웹 앱 개발
왜, 웹 앱인가요??
기본 높은
쉬움
접근성
94
94. 페이스북 웹 앱 개발
어떤 웹 앱을 만들건가요?
캔버스 페이지
앱 탭앱
95
95. 페이스북 웹 앱 개발
어떤 웹 앱을 만들건가요?
> 캔버스 앱
96
96. 페이스북 웹 앱 개발
어떤 웹 앱을 만들건가요?
> 캔버스 앱
97
97. 페이스북 웹 앱 개발
어떤 웹 앱을 만들건가요?
> 페이지 탭 앱
98
98. 페이스북 웹 앱 개발
어떤 웹 앱을 만들건가요?
> 페이지 탭 앱
99
99. 페이스북 웹 앱 개발
어떤 웹 앱을 만들건가요?
캔버스
페이지 탭 앱
앱
100
100. 페이스북 웹 앱 개발
어떤 웹 앱을 만들건가요?
노출을 좋아요를
위해 위해
101
101. 페이스북 웹 앱 개발
어떤 웹 앱을 만들건가요?
많은 사람에게
노출 하기 위해
102
107. 페이스북 웹 앱 개발
다시 정리하고 가자
• 페이스북 웹 앱 • 좋아요
–캔버스 앱 • 내 정보
–페이지 탭 앱 • 친구 리스트
• 사진 합성
• 사진 게시
• 태그
108
124. 페이스북 웹 앱 개발
웹 앱 설정하기
http://www.facebook.com/dialog/pagetab
?app_id=YOUR_APP_ID&next=YOUR_URL
126
127. 페이스북 웹 앱 개발
그래프(Graph) API
FQL (Facebook Query Language)
129
128. 페이스북 웹 앱 개발
그래프(Graph) API Explorer
• http://developers.facebook.com/tools/explorer
130
129. 페이스북 웹 앱 개발
그래프(Graph) API – GRAPH API CODE
/100000525744525?fields=id,name
{ "id": "100000525744525",
"name": "YongHui Lee“ }
131
131. 페이스북 웹 앱 개발
그래프(Graph) API - Objects
• Achievement(Instance) • Order
• Album • Page
• Application • Photo
• Checkin • Pictures
• Comment • Post
• Domain • Privacy Parameter
• Errors • Publishing
• Event • Question
• FriendList • QuestionOption
• Group • Realtime Updates
• Insights • Review
• Link • Status message
• Message • Thread
• Note • User
• Offer • Video
133
132. 페이스북 웹 앱 개발
FQL (Facebook Query Language)
SELECT uid, name FROM user WHERE
uid = me()
{ "data":
[ { "uid": 100000525744525,
"name": "YongHui Lee“
}]
}
134
133. 페이스북 웹 앱 개발
FQL (Facebook Query Language)
135
134. 페이스북 웹 앱 개발
FQL (Facebook Query Language)
• album • location_post • question_option
• app_role • mailbox_folder • question_option_votes
• application • message • review
• apprequest • note • score
• checkin • notification • square_profile_pic
• comment • object_url • square_profile_pic_size
• comments_info • offer • standard_friend_info
• connection • page • standard_user_info
• cookies • page_admin • status
• developer • page_blocked_user • stream
• domain • page_fan • stream_filter
• domain_admin • page_global_brand_child • stream_tag
• event • page_milestone • subscription
• event_member • permissions • thread
• family • permissions_info • translation
• friend • photo • unified_message
• friend_request • photo_src • unified_message_count
• friendlist • photo_tag • unified_message_sync
• friendlist_member • place • unified_thread
• group • privacy • unified_thread_action
• group_member • privacy_setting • unified_thread_count
• insights • profile • unified_thread_sync
• like • profile_pic • url_like
• link • profile_tab • user
• link_image_src • profile_view • video
• link_stat • question • video_tag
136
135. 페이스북 웹 앱 개발
• Third party SDKs
• PHP – .NET (C#)
• Javascript – Flash (ActionScript)
– Python
• iOS – Java (Spring)
• Android – Java (BlackBerry)
– Ruby
– Node.js
http://developers.facebook.com/docs/sdks/
137
136. 페이스북 웹 앱 개발
Facebook PHP SDK
• https://github.com/facebook/facebook-php-sdk
138
137. 페이스북 웹 앱 개발
Facebook Javascript SDK
• http://developers.facebook.com/docs/reference/javascript/
139
138. 페이스북 웹 앱 개발
PHP vs JavaScript
Server side Client side …
• API 제한 이슈
• 사용 과정이 깔끔하게
• 개발하기 쉽게
140
139. 페이스북 웹 앱 개발
페이스북 API 제한
• 하나의 앱에서 하나의 IP
600초 동안 600번 이상의 호출 금지
• 500만 MAU(한 달간 사용하는 유저의 수),
하루 100만 API 호출, 하루 50만 노출
페이스북 정책 https://developers.facebook.com/policy/Korean/ 141
140. 페이스북 웹 앱 개발
페이스북 API 제한
• 좋아요 확인(1회)
• 사용자 정보 받아오기(1회)
• 친구 리스트 받아오기(1회)
• 친구 이미지 받아오기(N회) * 0
• 사진 올리기 + 태그하기(1회)
142
141. 페이스북 웹 앱 개발
페이스북 API 제한
600초당 150명
하루 21600명
한달 648000명
143
142. 페이스북 웹 앱 개발
사용 과정이 깔끔하게
• 좋아요 체크를 한다고 하면…
144
143. 페이스북 웹 앱 개발
사용 과정이 깔끔하게
• PHP
–페이지 로딩 전에 확인 후
–좋아요 유도 화면 보여줌
145
146. 페이스북 웹 앱 개발
사용 과정이 깔끔하게
• JavaScript
–페이지 로딩 후
–좋아요 화면을 보여줘야 하는 경우
–페이지를 다시 로딩해야 함
148
150. 페이스북 웹 앱 개발
SDK 활용 범위
• PHP • Javascript
–Server side –Client side
–대부분의 API –로그인
• PHP에선 번거
로운 작업
152
151. 페이스북 웹 앱 개발 – SDK / API 사용
개발, Right now!
페이스북 웹 앱 개발
ㆍ 이제 진짜로 개발하자!!!!
152. 페이스북 웹 앱 개발
캔버스 앱 페이지 탭 앱
페이지 앱 허가 확 좋아요
메인화면
이동 인 확인
프로필 컨텐츠 친구
내 정보
사진 다운 처리 리스트
이미지 사진으로
사진게시
생성 이동
154
153. 페이스북 웹 앱 개발
캔버스 앱 페이지 탭 앱
페이지 앱 허가 확 좋아요
메인화면
이동 인 확인
프로필 컨텐츠 친구
내 정보
사진 다운 처리 리스트
이미지 사진으로
사진게시
생성 이동
155
154. 페이스북 웹 앱 개발
Redirect
• 캔버스 앱 / 페이지 탭 앱은 iframe
• Javascript
– top.window.location = ‘페이지 탭 앱 주소’
156
155. 페이스북 웹 앱 개발
캔버스 앱 페이지 탭 앱
페이지 앱 허가 확 좋아요
메인화면
이동 인 확인
프로필 컨텐츠 친구
내 정보
사진 다운 처리 리스트
이미지 사진으로
사진게시
생성 이동
157
156. 페이스북 웹 앱 개발
Facebook Login
진행
로그인 상태
Y
체크 N
로그인 유도
http://developers.facebook.com/docs/howtos/login/getting-started/ 158
157. 페이스북 웹 앱 개발
Facebook Javascript SDK
• http://developers.facebook.com/docs/reference/javascript/
159
159. 페이스북 웹 앱 개발
Facebook Javascript SDK
With Javascript SDK
http://developers.facebook.com/docs/howtos/login/getting-started/ 161
160. 페이스북 웹 앱 개발
Facebook Javascript SDK
http://developers.facebook.com/docs/howtos/login/getting-started/ 162
161. 페이스북 웹 앱 개발
Facebook Javascript SDK
FB.api(‘GRAPH_API_CODE ', function(response)
{
// additional code
});
163
162. 페이스북 웹 앱 개발
캔버스 앱 페이지 탭 앱
페이지 앱 허가 확 좋아요
메인화면
이동 인 확인
프로필 컨텐츠 친구
내 정보
사진 다운 처리 리스트
이미지 사진으로
사진게시
생성 이동
164
163. 페이스북 웹 앱 개발
Facebook PHP SDK
require_once(‘facebook.php');
165
164. 페이스북 웹 앱 개발
Facebook PHP SDK
$facebook = new Facebook(array(
'appId' => YOUR_APP_ID,
'secret' => YOUR_APP_SECRET,
'sharedSession' => true,
'fileUpload' => true
));
166
165. 페이스북 웹 앱 개발
Facebook Login
$Id =$facebook->getUser()
0 : not log in
Else : user’s id
167
166. 페이스북 웹 앱 개발
Facebook PHP SDK
$facebook->api(‘GRAPH_API_CODE‘)
168
167. 페이스북 웹 앱 개발
Facebook PHP SDK
Graph API로는 FQL로는
좋아요 페이지 리스트 좋아요 페이지 리스트
타겟 페이지가 확인 중에서 타겟 리스트가
있는지 확인
주고 받는 데이터 양이
줄어듬
169
168. 페이스북 웹 앱 개발
Facebook PHP SDK
Graph API FQL
{
"data": [
{
"category": "Software",
"name": "AppStory",
True or false
"id": "245971252189546",
"created_time": "2013-03-16T23:15:30+0000"
},
{
"category": "Internet/software",
"name": "미래웹기술연구소",
"id": "183662161679121",
"created_time": "2013-03-16T08:20:14+0000"
},
{
"category": "Musician/band",
"name": "Against The Current",
"id": "247236941963772",
"created_time": "2013-03-03T19:50:47+0000"
},
{……
170
169. 페이스북 웹 앱 개발
Facebook PHP SDK
Graph API로는
$facebook->api(‘GRAPH_API_CODE‘)
즉, $facebook->api(‘me/likes’);
171
170. 페이스북 웹 앱 개발
Facebook PHP SDK
FQL로는
$facebook->api(array(
‘method’=>’fql.query’,
‘query’ => ‘FQL ‘));
172
171. 페이스북 웹 앱 개발
Facebook PHP SDK
즉,
$facebook->api(array(
'method' => 'fql.query',
'query' => "SELECT page_id FROM
page_fan WHERE uid=$user_id and
page_id=245971252189546;"
));
173
172. 페이스북 웹 앱 개발
Facebook PHP SDK
SELECT page_id
FROM page_fan
WHERE uid=$user_id
and page_id=245971252189546;
174
173. 페이스북 웹 앱 개발
캔버스 앱 페이지 탭 앱
페이지 앱 허가 확 좋아요
메인화면
이동 인 확인
프로필 컨텐츠 친구
내 정보
사진 다운 처리 리스트
이미지 사진으로
사진게시
생성 이동
175
177. 페이스북 웹 앱 개발
캔버스 앱 페이지 탭 앱
페이지 앱 허가 확 좋아요
메인화면
이동 인 확인
프로필 컨텐츠 친구
내 정보
사진 다운 처리 리스트
이미지 사진으로
사진게시
생성 이동
179
178. 페이스북 웹 앱 개발
내 정보
/me
{
"id": "100000525744525",
"name": "YongHui Lee",
"first_name": "YongHui",
"last_name": "Lee",
….
180
179. 페이스북 웹 앱 개발
Facebook PHP SDK
$facebook->api(‘GRAPH_API_CODE‘)
$data = $facebook->api(„/me„)
181
180. 페이스북 웹 앱 개발
Facebook PHP SDK
$name = data[„name‟];
{ "id": "100000525744525",
"name": "YongHui Lee",
"first_name": "YongHui",
"last_name": "Lee",
….
182
181. 페이스북 웹 앱 개발
캔버스 앱 페이지 탭 앱
페이지 앱 허가 확 좋아요
메인화면
이동 인 확인
프로필 컨텐츠 친구
내 정보
사진 다운 처리 리스트
이미지 사진으로
사진게시
생성 이동
183
182. 페이스북 웹 앱 개발
친구 리스트
/me/friends
{
"data": [
{
"name": “friends1",
"id": “00000000"
},
{
"name": “friends2",
"id": “00000000"
},
….
184
183. 페이스북 웹 앱 개발
Facebook PHP SDK
$facebook->api(‘GRAPH_API_CODE‘)
$data = $facebook->api(„/me/friends„)
185
184. 페이스북 웹 앱 개발
Facebook PHP SDK
$friend1name = data[0][„name‟];
{
"data": [
{
"name": “friends1",
"id": “00000000"
},
….
186
185. 페이스북 웹 앱 개발
캔버스 앱 페이지 탭 앱
페이지 앱 허가 확 좋아요
메인화면
이동 인 확인
프로필 컨텐츠 친구
내 정보
사진 다운 처리 리스트
이미지 사진으로
사진게시
생성 이동
187
187. 페이스북 웹 앱 개발
캔버스 앱 페이지 탭 앱
페이지 앱 허가 확 좋아요
메인화면
이동 인 확인
프로필 컨텐츠 친구
내 정보
사진 다운 처리 리스트
이미지 사진으로
사진게시
생성 이동
189
188. 페이스북 웹 앱 개발
사진
/ID/picture
{
"data": {
"url": “http://~",
"is_silhouette": false
}
}
190
189. 페이스북 웹 앱 개발
Facebook PHP SDK
$facebook->api(‘GRAPH_API_CODE‘)
$data = $facebook->api(„ID/picture„)
191
190. 페이스북 웹 앱 개발
Facebook PHP SDK
$photoUrl = $data[„url‟];
{
"data": {
"url": “http://~",
"is_silhouette": false
}
}
192
191. 페이스북 웹 앱 개발
https://graph.facebook.com/ID/picture
Redirect되는 URL이 존재
실제 URL을 통해서 사진 다운
PHP에서 접근하긴 어려움
193
192. 페이스북 웹 앱 개발
Open Source!
http://stackoverflow.com/a/3347453
194
193. 페이스북 웹 앱 개발
캔버스 앱 페이지 탭 앱
페이지 앱 허가 확 좋아요
메인화면
이동 인 확인
프로필 컨텐츠 친구
내 정보
사진 다운 처리 리스트
이미지 사진으로
사진게시
생성 이동
195
194. 페이스북 웹 앱 개발
사진 합성
사진을 합성할 수 있는 다양한 라이브러리
- gd
- imagick
- exif
196
195. 페이스북 웹 앱 개발
사진 합성
사진을 합성할 수 있는 다양한 라이브러리
- gd
- imagick
- exif
197
196. 페이스북 웹 앱 개발
Imagick – 사진 불러오기
$imgTemplate = new Imagick;
$imgTemplate
->readImage("./배경.png");
198
198. 페이스북 웹 앱 개발
Imagick – 사진 합성하기
$imgFriend->readImage(‘./친구사진.png’);
$imgTemplate
->compositeImage($imgFriend,
Imagick::COMPOSITE_OVER, X, Y);
200
199. 페이스북 웹 앱 개발
Imagick – 사진 리사이징
$imgFriend
->resizeImage(X-Scale, Y-Scale,
Imagick::FILTER_TRIANGLE, 1);
201
201. 페이스북 웹 앱 개발
Imagick – 글쓰기
$fontType = './폰트.ttf';
$font = new ImagickDraw();
$font->setFont($fontType);
203
202. 페이스북 웹 앱 개발
Imagick – 글쓰기
$font->setTextEncoding('utf-8');
$font->setFontSize(22);
$font->setFillColor("#000000");
$font->setTextAntialias(true);
204
203. 페이스북 웹 앱 개발
Imagick – 글쓰기
$font->setGravity(Imagick::GRAVITY_NORTHEAST);
$imgTemplate
->annotateImage($font, X, Y, angle,
“내용”);
205
204. 페이스북 웹 앱 개발
Imagick – 사진 저장
$imgTemplate
->setImageFormat("jpeg");
$imgTemplate
->writeImage("./결과.jpeg");
206
206. 페이스북 웹 앱 개발
캔버스 앱 페이지 탭 앱
페이지 앱 허가 확 좋아요
메인화면
이동 인 확인
프로필 컨텐츠 친구
내 정보
사진 다운 처리 리스트
이미지 사진으로
사진게시
생성 이동
208
207. 페이스북 웹 앱 개발
사진 게시 /me/photos
POST
$photoId =
$facebook->api(‘/me/photos’, ‘POST’,
array( ‘source’ => ‘@’.이미지 주소,
‘message’ => 글
));
209
208. 페이스북 웹 앱 개발
사진 게시 /me/photos
POST
$photoId =
$facebook->api(‘/me/photos’, ‘POST’,
array( ‘source’ => ‘@’.이미지 주소,
‘message’ => 글,
„tags‟ => 태그 리스트,
));
210
209. 페이스북 웹 앱 개발
사진에 태그
$tags[] = array(‘tag_uid’ => 사용자 ID,
‘x’ => 상대 비율 X 좌표,
‘y’ => 상대 비율 Y 좌표);
211
210. 페이스북 웹 앱 개발
캔버스 앱 페이지 탭 앱
페이지 앱 허가 확 좋아요
메인화면
이동 인 확인
프로필 컨텐츠 친구
내 정보
사진 다운 처리 리스트
이미지 사진으로
사진게시
생성 이동
212
211. 페이스북 오픈 플랫폼 – 기능 소개
$photoId =
$facebook->api(‘/me/photos’, ‘POST’,
array( ‘source’ => ‘@’.이미지 주소,
‘message’ => 글,
‘tags’ => 태그 리스트,
));
213
212. 페이스북 웹 앱 개발
올린 글 주소!!
https://www.facebook.com
/$photoId
214
226. 페이스북 앱 개발 TIP
헤로쿠?
• 클라우드 웹 호스팅
• Git 시스템 기반
• 페이스북 앱과 바로 연동
• 매우 좋은 예제 제공
http://www.heroku.com/ 228
227. 페이스북 앱 개발 TIP
헤로쿠 사용시 기본 페이지
Page tab App
Website
Canvas App 229
228. 페이스북 앱 개발 TIP
페이스북 + 헤로쿠?
SSL 설정 기본 제공
230
229. 페이스북 앱 개발 TIP
페이스북 + 헤로쿠?
https, 보안 소켓 레이어
(Hypertext Transfer Protocol
over Secure Socket Layer)
231
230. 페이스북 앱 개발 TIP
SSL
• 일반 호스팅 업체: 비싸다
• 자체 서버에 설치: 힘들다
232
232. 페이스북 앱 개발 TIP
헤로쿠를 사용하다보면….
PHP GD Library
jpeg 포맷 지원 X
Freetype 폰트 지원 X
234
233. 페이스북 앱 개발 TIP
여기 해결 책이 있소!
https://github.com/nekian/heroku-php-extension-imagick
235
235. 페이스북 앱 개발 TIP
• 페이스북 내부 광고는,
–캔버스 앱
–페이지 탭 앱
• 업체 목록 중에서 사용해야 함.
https://developers.facebook.com/adproviders/
237. 페이스북 앱 개발 TIP
• 가장 무난한 송금 방법
– Wire transper (전자송금)
• 은행 정보
– ABA or SWIFT 코드
– 은행에 문의하면 됨