하하 하하 하하하하 하 하 하하하 하하하 하하
하루 안에
페이스북 웹 앱 만들기
이용희
주제
2
발표자료 안내
발표자료http://slidesha.re/Y5h-
P0X
강의 예시 웹 앱http://on.fb.me/WUJl1o
3
2009.12
페이스북 가입
발표자 소개
4
5
6페이스북 시작
2011.9
발표자 소개
7페이스북 개발 시작
2011.12
발표자 소개
8
2012.1~32012.7~9
페이스북 큐레이션 서비스 개발 / 월간 마이크로소프트웨어
발표자 소개
9
2012.3
2012 페이스북 모바일 핵 , 서울
발표자 소개
10페이스북 큐레이션 서비스 개발 2
2012.4~7
발표자 소개
11
꿀 같은 휴식 ...
12
놀 자 !!
13
HACKATHON
14
발표자 소개
15페이스북 웹 앱 개발 / 월간 마이크로소프트웨어
2012.72013.1~3
발표자 소개
16
㈜ 아울네스트 대표이사http://owlnest.kr
Best of Best ,Best of Social2012 Facebook Mobile Hack – Seoul
페이스북 웹 앱 개발2013.01~03 월간 마이크로소프트웨어
소셜 큐레이션 서비스 개발2012.07~09 월간 마이크로소프트웨어
이용희 nekians@g-
mail.com
발표자 소개
17
강의 목표
강의 소개
http://on.fb.me/WUJl1o
18
19
20
강의 소개
21
강의 소개
22
강의 소개
Generat-ing...
23
강의 소개
24
• 좋아요• 내 정보• 친구 리스트• 사진• 사진 게시• 태그
캔버스 앱 & 페이지 탭 앱
강의 소개
25
어때요 , 참 쉽죠 ?
강의 소개
26
강의 소개
27
강의 소개
28
강의 소개
하루
29
24 시간
얼마나 걸릴지 모르면 일찍 퇴근하는 것이 답입니다 .
다음날 열심히 하면 되겠죠 ? 안되면 ? 또 다음날… . 안되면 ? 야근………
근로기준법 제 50 조 ( 근로시간 ), 2 항
1 일의 근로시간은 휴게시간을 제외하고 8 시간을 초과할 수 없다 .
8 시간
일을 하다 보면 조금 더 할 것 같아서 남게 될 때가 있죠 ?
회사에서 주는 밥과 함께 야근을 할 시간입니다 .
12 시간
?? 시간 (24
시간▲ )
웹에 대한 기본이 없으면 하루 안에는 안돼요… .
들어만 봤다면 이젠 찾아보고 공부해야 할 때입니다 .
강의 소개
하루
30
강의 소개
90▲ 70▲
50▲ 50▼
하루
근로기준법 제 50 조 ( 근로시간 ), 2 항
1 일의 근로시간은 휴게시간을 제외하고 8 시간을 초과할 수 없다 .
8 시간
일을 하다 보면 조금 더 할 것 같아서 남게 될 때가 있죠 ?
회사에서 주는 밥과 함께 야근을 할 시간입니다 .
12 시간
24 시간
얼마나 걸릴지 모르면 일찍 퇴근하는 것이 답입니다 .
다음날 열심히 하면 되겠죠 ? 안되면 ? 또 다음날… . 안되면 ? 야근………
?? 시간 (24
시간▲ )
웹에 대한 기본이 없으면 하루 안에는 안돼요… .
들어만 봤다면 이젠 찾아보고 공부해야 할 때입니다 .
31
강의 소개
OpenAPI
HTML
JavaScrip
tPHP
레벨 테스트
스스로 평가 해보세요 !
32
강의 소개
10 점
30 점
33
강의 소개
100 점
80 점
34
초롱초롱한 눈빛으로 !!
35
강의 소개
•페이스북의 가능성
•페이스북 오픈 플랫폼
•페이스북 개발 & TIP
가능성
37
1Billion users
페이스북 소개 – 왜 페이스북인가 ?
38
페이스북의 가능성
70 억 24 억
39
페이스북 (Facebook)
한달1 억명
하루6 천만명
페이스북의 가능성
40
페이스북 (Facebook)
페이스북의 가능성
41
페이스북 (Facebook)
페이스북의 가능성
42
페이스북 (Facebook)
페이스북의 가능성
43
페이스북의 가능성
44
플랫폼 (Platform)
페이스북의 가능성
45
강의 소개
46
47
페이스북 소개 – 플랫폼 정의
48
49
50
51
하나의 구조를 활용하여 ,
다양한 것이 만들어 질 수 있는 것
페이스북의 가능성
52
서비스를 구성하는 기반요소
53
페이스북의 가능성
54
페이스북의 가능성
1billion users
56
페이스북 앱 (Facebook App)
Face-book
페이스북의 가능성
57
App
페이스북 앱 (Facebook App)
페이스북의 가능성
58
App
페이스북 앱 (Facebook App)
페이스북의 가능성
59
App
페이스북 앱 (Facebook App)
페이스북의 가능성
60
App
페이스북 앱 (Facebook App)
App
App
페이스북의 가능성
페이스북 (Facebook)
페이스북의 가능성
페이스북 (Facebook)
페이스북의 가능성
63
무한의 가능성 !!!
페이스북의 가능성
오픈 플랫폼
65
Plugins Dialog GraphPayments
LoginGraph
FQL
Social Open
Api
http://developers.facebook.com/docs/coreconcepts/
페이스북 오픈 플랫폼
66
Plugins Dialog GraphPayments
LoginGraph
FQL
Social Open
Api
페이스북 오픈 플랫폼
67
소셜 플러그인 (Social Plugins)
페이스북 오픈 플랫폼
https://developers.facebook.com/docs/plug-ins/
68
소셜 플러그인 (Social Plugins)
• Like Button
페이스북 오픈 플랫폼
69
소셜 플러그인 (Social Plugins)
• Like Button
페이스북 오픈 플랫폼
70
• Comments
소셜 플러그인 (Social Plugins)
페이스북 오픈 플랫폼
71
창 (Dialog)
페이스북 오픈 플랫폼
https://developers.facebook.com/docs/reference/dialogs/
72
Plugins Dialog GraphPayments
LoginGraph
FQL
Social Open
Api
페이스북 오픈 플랫폼
73
오픈 그래프 (Open Graph )
https://developers.facebook.com/docs/opengraph/overview/
페이스북 오픈 플랫폼
74
오픈 그래프 (Open Graph )
페이스북 오픈 플랫폼
75
오픈 그래프 (Open Graph )
페이스북 오픈 플랫폼
76
오픈 그래프 프로토콜 (Open Graph Protocol)
http://developers.facebook.com/docs/opengraphprotocol/
페이스북 오픈 플랫폼
77
• Article
오픈 그래프 프로토콜 (Open Graph Protocol)
페이스북 오픈 플랫폼
78
Plugins Dialog GraphPayments
LoginGraph
FQL
Social Open
Api
페이스북 오픈 플랫폼
79
결제 (Payments)
https://developers.facebook.com/docs/payments/
페이스북 오픈 플랫폼
80
Plugins Dialog GraphPayments
LoginGraph
FQL
Social Open
Api
페이스북 오픈 플랫폼
81
Open API
Login
GraphAPI / FQL
GraphAPI
https://developers.facebook.com/docs/reference/login/
페이스북 오픈 플랫폼
82
Plugins Dialog GraphPayments
LoginGraph
FQL
Social Open
Api
페이스북 오픈 플랫폼
앱
85
• 웹 사이트 with 페이스북
• Inside 페이스북–페이스북 캔버스 앱–페이스북 페이지 탭 앱
• 페이스북 앱 with 모바일 앱–페이스북 앱 (Android / iOS)
페이스북 앱
페이스북 앱 형태
86
Pinterest – 로그인 (Login)
페이스북 앱
87
Shopping Mall – 웹 앱 (Web App)
페이스북 앱
88
Tetris Battle – 캔버스 앱 (Canvas App)
페이스북 앱
89
나의 친구들 – 페이지 탭 앱 (Page Tab App)
페이스북 앱
90
Example – 모바일 웹 앱 (Mobile Web App)
페이스북 앱
91
Insagram & Foursquare– 모바일 앱 (Mobile App)
페이스북 앱
92
Curing – 모바일 앱 (Mobile App)
페이스북 앱
93
Curing – 모바일 앱 (Mobile App)
어떤 것들이 가능할지 .데모영상을 통해 알아보자 .
http://youtu.be/9ci1yOvWXeg
페이스북 앱
웹 앱 개발
95
페이스북 웹 앱 개발
왜 , 웹 앱인가요 ??
기본 높은접근성 쉬움
96
어떤 웹 앱을 만들건가요 ?
캔버스 앱
페이지탭 앱
페이스북 웹 앱 개발
97
어떤 웹 앱을 만들건가요 ?> 캔버스 앱
페이스북 웹 앱 개발
98
어떤 웹 앱을 만들건가요 ?> 캔버스 앱
페이스북 웹 앱 개발
99
어떤 웹 앱을 만들건가요 ?> 페이지 탭 앱
페이스북 웹 앱 개발
100
어떤 웹 앱을 만들건가요 ?> 페이지 탭 앱
페이스북 웹 앱 개발
101
어떤 웹 앱을 만들건가요 ?
캔버스 앱 페이지 탭 앱
페이스북 웹 앱 개발
102
어떤 웹 앱을 만들건가요 ?
노출을 위해
좋아요를위해
페이스북 웹 앱 개발
103
어떤 웹 앱을 만들건가요 ?
많은 사람에게 노출 하기 위해
페이스북 웹 앱 개발
104
무엇을 만들건가요 ??
페이스북 웹 앱 개발
105
무엇을 만들건가요 ??
페이스북 웹 앱 개발
106
107
강의 소개
108
강의 소개
109
다시 정리하고 가자• 페이스북 웹 앱–캔버스 앱–페이지 탭 앱
• 좋아요• 내 정보• 친구 리스트• 사진 합성• 사진 게시• 태그
페이스북 웹 앱 개발
110
개발자 등록하기
페이스북 웹 앱 개발
111
개발자 등록하기
페이스북 웹 앱 개발
112
새 앱 만들기
페이스북 웹 앱 개발
113
새 앱 만들기
페이스북 웹 앱 개발
114
새 앱 만들기
페이스북 웹 앱 개발
115
새 앱 만들기
페이스북 웹 앱 개발
116
웹 앱 설정하기
페이스북 웹 앱 개발
118
웹 앱 설정하기
페이스북 웹 앱 개발
119
120
페이지 필요
121
웹 앱 설정하기
페이스북 웹 앱 개발
122
웹 앱 설정하기
페이스북 웹 앱 개발
123
웹 앱 설정하기
페이스북 웹 앱 개발
124
페이스북 오픈 플랫폼 – 페이스북 앱 소개
웹 앱 설정하기
원하는 걸로
125
페이스북 오픈 플랫폼 – 페이스북 앱 소개
웹 앱 설정하기
126
페이스북 오픈 플랫폼 – 페이스북 앱 소개
웹 앱 설정하기
127
웹 앱 설정하기http://www.facebook.com/dialog/pagetab
?app_id=YOUR_APP_ID&next=YOUR_URL
페이스북 웹 앱 개발
128
어떻게 개발하지 ?
130
그래프 (Graph) API
FQL (Facebook Query Language)
페이스북 웹 앱 개발
131
• http://developers.facebook.com/tools/ex-plorer
그래프 (Graph) API Explorer
페이스북 웹 앱 개발
132
/100000525744525?fields=id,name
{ "id": "100000525744525","name": "YongHui Lee“}
그래프 (Graph) API – GRAPH API CODE
페이스북 웹 앱 개발
133
그래프 (Graph) API
페이스북 웹 앱 개발
134
• Achievement(Instance)• Album• Application• Checkin• Comment• Domain• Errors• Event• FriendList• Group• Insights• Link• Message• Note• Offer
• Order• Page• Photo• Pictures• Post• Privacy Parameter• Publishing• Question• QuestionOption• Realtime Updates• Review• Status message• Thread• User• Video
그래프 (Graph) API - Objects
페이스북 웹 앱 개발
135
SELECT uid, name FROM user WHERE uid = me()
{ "data": [ { "uid": 100000525744525,
"name": "YongHui Lee“} ]
}
FQL (Facebook Query Language)
페이스북 웹 앱 개발
136
FQL (Facebook Query Language)
페이스북 웹 앱 개발
137
• album• app_role• application• apprequest• checkin• comment• comments_info• connection• cookies• developer• domain• domain_admin• event• event_member• family• friend• friend_request• friendlist• friendlist_member• group• group_member• insights• like• link• link_image_src• link_stat
• location_post• mailbox_folder• message• note• notification• object_url• offer• page• page_admin• page_blocked_user• page_fan• page_global_brand_child• page_milestone• permissions• permissions_info• photo• photo_src• photo_tag• place• privacy• privacy_setting• profile• profile_pic• profile_tab• profile_view• question
FQL (Facebook Query Language)• question_option• question_option_votes• review• score• square_profile_pic• square_profile_pic_size• standard_friend_info• standard_user_info• status• stream• stream_filter• stream_tag• subscription• thread• translation• unified_message• unified_message_count• unified_message_sync• unified_thread• unified_thread_action• unified_thread_count• unified_thread_sync• url_like• user• video• video_tag
페이스북 웹 앱 개발
138
•PHP• Javascript
• iOS• Android
• Third party SDKs– .NET (C#)– Flash (Action-
Script)– Python– Java (Spring)– Java (BlackBerry)– Ruby– Node.js
http://developers.facebook.com/docs/sdks/
페이스북 웹 앱 개발
139
• https://github.com/facebook/facebook-php-sdk
Facebook PHP SDK
페이스북 웹 앱 개발
140
• http://developers.facebook.com/docs/reference/javascript/
Facebook Javascript SDK
페이스북 웹 앱 개발
141
PHP vs JavaScript
Server side Client side …
• API 제한 이슈• 사용 과정이 깔끔하게• 개발하기 쉽게
페이스북 웹 앱 개발
142
• 하나의 앱에서 하나의 IP600 초 동안 600 번 이상의 호출 금지
• 500 만 MAU( 한 달간 사용하는 유저의 수 ), 하루 100 만 API 호출 , 하루 50 만 노출
페이스북 API 제한
페이스북 정책 https://developers.facebook.com/policy/Korean/
페이스북 웹 앱 개발
143
• 좋아요 확인 (1 회 )• 사용자 정보 받아오기 (1 회 )• 친구 리스트 받아오기 (1 회 )• 친구 이미지 받아오기 (N 회 ) * 0• 사진 올리기 + 태그하기 (1 회 )
페이스북 API 제한
페이스북 웹 앱 개발
144
600 초당 150 명하루 21600 명
한달 648000 명
페이스북 API 제한
페이스북 웹 앱 개발
145
• 좋아요 체크를 한다고 하면…
사용 과정이 깔끔하게
페이스북 웹 앱 개발
146
• PHP–페이지 로딩 전에 확인 후–좋아요 유도 화면 보여줌
사용 과정이 깔끔하게
페이스북 웹 앱 개발
147
강의 소개
Loading…& Like Check
148
149
• JavaScript–페이지 로딩 후–좋아요 화면을 보여줘야 하는 경우–페이지를 다시 로딩해야 함
사용 과정이 깔끔하게
페이스북 웹 앱 개발
150
강의 소개
Loading…
151
강의 소개
Like Check
152
153
• PHP–Server side–대부분의 API
• Javascript –Client side–로그인• PHP 에선
번거로운 작업
SDK 활용 범위
페이스북 웹 앱 개발
페이스북 웹 앱 개발 ㆍ 이제 진짜로 개발하자 !!!!
페이스북 웹 앱 개발 – SDK / API 사용
개발 , Right now!
155
페이지이동
앱 허가 확인
좋아요 확인 메인화면
내 정보친구리스트
컨텐츠처리
프로필사진 다운
이미지생성 사진게시 사진으로
이동
캔버스 앱 페이지 탭 앱
페이스북 웹 앱 개발
156
페이지이동
앱 허가 확인
좋아요 확인 메인화면
내 정보친구리스트
컨텐츠처리
프로필사진 다운
이미지생성 사진게시 사진으로
이동
캔버스 앱 페이지 탭 앱
페이스북 웹 앱 개발
157
• 캔버스 앱 / 페이지 탭 앱은 iframe
• Javascript– top.window.location = ‘ 페이지 탭 앱 주소’
Redirect
페이스북 웹 앱 개발
158
페이지이동
앱 허가 확인
좋아요 확인 메인화면
내 정보친구리스트
컨텐츠처리
프로필사진 다운
이미지생성 사진게시 사진으로
이동
캔버스 앱 페이지 탭 앱
페이스북 웹 앱 개발
159
Facebook Login
로그인 상태 체크
진행
로그인 유도
Y
N
페이스북 웹 앱 개발
http://developers.facebook.com/docs/howtos/login/getting-started/
160
• http://developers.facebook.com/docs/reference/javascript/
Facebook Javascript SDK
페이스북 웹 앱 개발
161
162
With Javascript SDK
Facebook Javascript SDK
페이스북 웹 앱 개발
http://developers.facebook.com/docs/howtos/login/getting-started/
163
Facebook Javascript SDK
페이스북 웹 앱 개발
http://developers.facebook.com/docs/howtos/login/getting-started/
164
FB.api(‘GRAPH_API_CODE ', function(response) {
// additional code});
Facebook Javascript SDK
페이스북 웹 앱 개발
165
페이지이동
앱 허가 확인
좋아요 확인 메인화면
내 정보친구리스트
컨텐츠처리
프로필사진 다운
이미지생성 사진게시 사진으로
이동
캔버스 앱 페이지 탭 앱
페이스북 웹 앱 개발
166
require_once(‘facebook.php');
Facebook PHP SDK
페이스북 웹 앱 개발
167
$facebook = new Facebook(array( 'appId' => YOUR_APP_ID, 'secret' => YOUR_APP_SECRET, 'sharedSession' => true, 'fileUpload' => true));
Facebook PHP SDK
페이스북 웹 앱 개발
168
$Id =$facebook->getUser()
0 : not log inElse : user’s id
Facebook Login
페이스북 웹 앱 개발
169
$facebook->api(‘GRAPH_API_CODE‘)
Facebook PHP SDK
페이스북 웹 앱 개발
170
Graph API 로는 좋아요 페이지 리스트 타겟 페이지가 확인
FQL 로는 좋아요 페이지 리스트
중에서 타겟 리스트가 있는지 확인
주고 받는 데이터 양이 줄어듬
Facebook PHP SDK
페이스북 웹 앱 개발
171
Graph API{ "data": [ { "category": "Software", "name": "AppStory", "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" }, {……
FQL
True or false
Facebook PHP SDK
페이스북 웹 앱 개발
172
Graph API 로는$facebook->api(‘GRAPH_API_CODE‘)즉 , $facebook->api(‘me/likes’);
Facebook PHP SDK
페이스북 웹 앱 개발
173
FQL 로는$facebook->api(array(
‘method’=>’fql.query’, ‘query’ => ‘FQL ‘));
Facebook PHP SDK
페이스북 웹 앱 개발
174
즉 ,
$facebook->api(array( 'method' => 'fql.query', 'query' => "SELECT page_id
FROM page_fan WHERE uid=$user_id and page_id=245971252189546;"
));
Facebook PHP SDK
페이스북 웹 앱 개발
175
SELECT page_idFROM page_fanWHERE uid=$user_id
and page_id=245971252189546;
Facebook PHP SDK
페이스북 웹 앱 개발
176
페이지이동
앱 허가 확인
좋아요 확인 메인화면
내 정보친구리스트
컨텐츠처리
프로필사진 다운
이미지생성 사진게시 사진으로
이동
캔버스 앱 페이지 탭 앱
페이스북 웹 앱 개발
177
178
강의 소개
179
강의 소개
Generat-ing…
180
페이지이동
앱 허가 확인
좋아요 확인 메인화면
내 정보친구리스트
컨텐츠처리
프로필사진 다운
이미지생성 사진게시 사진으로
이동
캔버스 앱 페이지 탭 앱
페이스북 웹 앱 개발
181
/me{ "id": "100000525744525", "name": "YongHui Lee", "first_name": "YongHui", "last_name": "Lee", ….
내 정보
페이스북 웹 앱 개발
182
$facebook->api(‘GRAPH_API_CODE‘)$data = $facebook->api(‘/me‘)
Facebook PHP SDK
페이스북 웹 앱 개발
183
$name = $data[‘name’];
{ "id": "100000525744525",
"name": "YongHui Lee",
"first_name": "YongHui",
"last_name": "Lee",
….
Facebook PHP SDK
페이스북 웹 앱 개발
184
페이지이동
앱 허가 확인
좋아요 확인 메인화면
내 정보친구리스트
컨텐츠처리
프로필사진 다운
이미지생성 사진게시 사진으로
이동
캔버스 앱 페이지 탭 앱
페이스북 웹 앱 개발
185
/me/friends{ "data": [ { "name": “friends1", "id": “00000000" }, { "name": “friends2", "id": “00000000" }, ….
친구 리스트
페이스북 웹 앱 개발
186
$facebook->api(‘GRAPH_API_CODE‘)$data = $facebook->api(‘/me/friends‘)
Facebook PHP SDK
페이스북 웹 앱 개발
187
$friend1name = $data[0][‘name’];{ "data": [ { "name": “friends1", "id": “00000000" }, ….
Facebook PHP SDK
페이스북 웹 앱 개발
188
페이지이동
앱 허가 확인
좋아요 확인 메인화면
내 정보친구리스트
컨텐츠처리
프로필사진 다운
이미지생성 사진게시 사진으로
이동
캔버스 앱 페이지 탭 앱
페이스북 웹 앱 개발
189
• 각자 자유로운 알고리즘…
페이스북 웹 앱 개발
190
페이지이동
앱 허가 확인
좋아요 확인 메인화면
내 정보친구리스트
컨텐츠처리
프로필사진 다운
이미지생성 사진게시 사진으로
이동
캔버스 앱 페이지 탭 앱
페이스북 웹 앱 개발
191
/ID/picture{ "data": { "url": “http://~", "is_silhouette": false }}
사진
페이스북 웹 앱 개발
192
$facebook->api(‘GRAPH_API_CODE‘)$data = $facebook->api(‘ID/picture‘)
Facebook PHP SDK
페이스북 웹 앱 개발
193
$photoUrl = $data[‘url’];{ "data": { "url": “http://~", "is_silhouette": false }}
Facebook PHP SDK
페이스북 웹 앱 개발
194
https://graph.facebook.com/ID/pic-ture
Redirect 되는 URL 이 존재
실제 URL 을 통해서 사진 다운
PHP 에서 접근하긴 어려움
페이스북 웹 앱 개발
195
Open Source!http://stackoverflow.com/a/3347453
페이스북 웹 앱 개발
196
$photoUrl=“https://graph.facebook.com/ID/picture”;
$downloader = new sfFacebookPhoto;
$photoRealUrl = $downloader-
>getReadUrl($phptoUrl);
$downloader->download($photoRealUrl);
페이스북 웹 앱 개발
sfFacebookPhoto
197
다운받는 파일 경로 설정 부분에서
$return 에 원하는 경로를 넣으면 된다 .
페이스북 웹 앱 개발
sfFacebookPhoto
198
public function download($fileName) {…
// 기존 소스에서 경로 설정하는 부분
$return = sfConfig::get('sf_upload_dir') .
'/tmp/' . uniqid('fbphoto') . '.' . $ext;…
}
페이스북 웹 앱 개발
sfFacebookPhoto
199
페이지이동
앱 허가 확인
좋아요 확인 메인화면
내 정보친구리스트
컨텐츠처리
프로필사진 다운
이미지생성 사진게시 사진으로
이동
캔버스 앱 페이지 탭 앱
페이스북 웹 앱 개발
200
사진을 합성할 수 있는 다양한 라이브러리- gd- imagick- exif
사진 합성
페이스북 웹 앱 개발
201
사진을 합성할 수 있는 다양한 라이브러리- gd- imagick- exif
사진 합성
페이스북 웹 앱 개발
http://php.net/manual/en/book.imagick.php
202
$imgTemplate = new Imagick;$imgTemplate
->readImage("./ 배경 .png");
Imagick – 사진 불러오기
페이스북 웹 앱 개발
http://www.php.net/manual/en/imagick.readimage.php
203
204
$imgFriend->readImage(‘./ 친구사진 .png’);$imgTemplate
->compositeImage($imgFriend, Imagick::COMPOSITE_OVER, X, Y);
Imagick – 사진 합성하기
페이스북 웹 앱 개발
http://www.php.net/manual/en/imagick.compositeimage.php
205
$imgFriend->resizeImage(X-Scale, Y-Scale, Imagick::FILTER_TRIANGLE, 1);
Imagick – 사진 리사이징
페이스북 웹 앱 개발
http://www.php.net/manual/en/imagick.resizeimage.php
206
207
$fontType = './ 폰트 .ttf';
$font = new ImagickDraw();$font->setFont($fontType);
Imagick – 글쓰기
페이스북 웹 앱 개발
http://www.php.net/manual/en/class.imagickdraw.php
208
$font->setTextEncoding('utf-8');$font->setFontSize(22);$font->setFillColor("#000000");$font->setTextAntialias(true);
Imagick – 글쓰기
페이스북 웹 앱 개발
209
$font->setGravity(Imagick::GRAVITY_NORTHEAST);$imgTemplate
->annotateImage($font, X, Y, an-gle, “ 내용” );
Imagick – 글쓰기
페이스북 웹 앱 개발
http://www.php.net/manual/en/imagick.constants.php#imagick.constants.gravity
http://www.php.net/manual/en/imagickdraw.setgravity.php
210
$imgTemplate->setImageFormat("jpeg");
$imgTemplate->writeImage("./ 결
과 .jpeg");
Imagick – 사진 저장
페이스북 웹 앱 개발
http://www.php.net/manual/en/imagick.writeimage.php
http://www.php.net/manual/en/imagick.setimageformat.php
211
Imagick – 최종 이미지
페이스북 웹 앱 개발
212
페이지이동
앱 허가 확인
좋아요 확인 메인화면
내 정보친구리스트
컨텐츠처리
프로필사진 다운
이미지생성 사진게시 사진으로
이동
캔버스 앱 페이지 탭 앱
페이스북 웹 앱 개발
213
/me/photosPOST
사진 게시
$photoId =$facebook->api(‘/me/photos’,
‘POST’,array( ‘source’ => ‘@’. 이미지
주소 ,‘message’ => 글));
페이스북 웹 앱 개발
214
/me/photosPOST
사진 태그
$photoId =$facebook->api(‘/me/photos’,
‘POST’,array( ‘source’ => ‘@’. 이미지
주소 ,‘message’ => 글 ,‘tags’ => 태그 리스트 ,));
페이스북 웹 앱 개발
215
사진 태그
$tags[] = array(‘tag_uid’ => 사용자 ID,
‘x’ => 상대 비율 X 좌표 ,‘y’ => 상대 비율 Y 좌표 );
페이스북 웹 앱 개발
216
페이지이동
앱 허가 확인
좋아요 확인 메인화면
내 정보친구리스트
컨텐츠처리
프로필사진 다운
이미지생성 사진게시 사진으로
이동
캔버스 앱 페이지 탭 앱
페이스북 웹 앱 개발
217
페이스북 오픈 플랫폼 – 기능 소개
$photoId =$facebook->api(‘/me/photos’,
‘POST’,array( ‘source’ => ‘@’. 이미지
주소 ,‘message’ => 글 ,‘tags’ => 태그 리스트 ,));
218
올린 글 주소 !!
https://www.facebook.com
/$photoId
페이스북 웹 앱 개발
219
강의 소개
앱 개발 TIP
앱 정보
222
페이스북 앱 개발 TIP
앱 정보
223
페이스북 앱 개발 TIP
224
페이스북 앱 개발 TIP
앱 정보 메뉴
225
페이스북 앱 개발 TIP
앱에 대한 설명
226
페이스북 앱 개발 TIP
다양한 언어 제공 가능
227
오픈 그래프 사용
페이스북 앱 개발 TIP
228
페이스북 앱 개발 TIP
개발자 메시지
229
페이스북 앱 개발 TIP
Analytics 정보
230
페이스북 앱 개발 TIP
다양한 정보들…
Heroku
232
• 클라우드 웹 호스팅
• Git 시스템 기반
• 페이스북 앱과 바로 연동
• 매우 좋은 예제 제공
페이스북 앱 개발 TIP
헤로쿠 ?
http://www.heroku.com/
233
페이스북 앱 개발 TIP
헤로쿠 사용시 기본 페이지
Website
Canvas App
Page tab App
234
SSL 설정 기본 제공
페이스북 앱 개발 TIP
페이스북 + 헤로쿠 ?
235
https, 보안 소켓 레이어
(Hypertext Transfer Proto-
col over Secure Socket
Layer)
페이스북 앱 개발 TIP
페이스북 + 헤로쿠 ?
236
• 일반 호스팅 업체 : 비싸다
• 자체 서버에 설치 : 힘들다
페이스북 앱 개발 TIP
SSL
237
페이스북 앱 개발 TIP
SSL
238
• 데이터베이스 5MB 무료
• 1 dyno( 헤로쿠에서 사용하는 웹 프로세스 단위 ) 무료
• 무료로 요청에 대한 처리 속도 100ms 까지 지원
• 무료로 분당 600 번 이하 요청까지 지원
• 100MB 의 디스크 + Slug ( 헤로쿠에서 자체적으로
구축해놓는 환경 ) 용량 무료
페이스북 앱 개발 TIP
헤로쿠 과금
239
PHP GD Libraryjpeg 포맷 지원 X
Freetype 폰트 지원 X
페이스북 앱 개발 TIP
헤로쿠를 사용하다보면… .
240
페이스북 앱 개발 TIP
여기 해결 책이 있소 !https://github.com/nekian/heroku-php-extension-imagick
광고
페이스북 앱 개발 TIP
• 페이스북 내부 광고는 ,–캔버스 앱–페이지 탭 앱
• 업체 목록 중에서 사용해야 함 .
https://developers.facebook.com/ad-providers/
페이스북 앱 개발 TIP
구글 애드센스 안됨
페이스북 앱 개발 TIP
• 가장 무난한 송금 방법–Wire transper ( 전자송금 )
• 은행 정보– ABA or SWIFT 코드–은행에 문의하면 됨
THANK YOU
2013. 3. 23. 소마인사이드 하루 안에 페이스북 웹 앱 만들기
이용희
주제