하루 안에 페이스북 웹 앱 만들기

22,362 views

Published on

4 Comments
118 Likes
Statistics
Notes
No Downloads
Views
Total views
22,362
On SlideShare
0
From Embeds
0
Number of Embeds
1,679
Actions
Shares
0
Downloads
336
Comments
4
Likes
118
Embeds 0
No embeds

No notes for slide

하루 안에 페이스북 웹 앱 만들기

  1. 1. 주제하루 안에페이스북 웹 앱 만들기 이용희
  2. 2. 발표자 소개2009.12페이스북 가입 2
  3. 3. 3
  4. 4. 4
  5. 5. 발표자 소개 2011.9페이스북 시작 5
  6. 6. 발표자 소개 2011.12페이스북 개발 시작 6
  7. 7. 발표자 소개 2012.1~3 2012.7~9페이스북 큐레이션 서비스 개발 / 월간 마이크로소프트웨어 7
  8. 8. 발표자 소개 2012.32012 페이스북 모바일 핵, 서울 8
  9. 9. 발표자 소개 2012.4~7페이스북 큐레이션 서비스 개발 2 9
  10. 10. 꿀 같은 휴식... 10
  11. 11. 놀 자 !! 11
  12. 12. HACKATHON 12
  13. 13. 발표자 소개 13
  14. 14. 발표자 소개 2012.7 2013.1~3페이스북 웹 앱 개발 / 월간 마이크로소프트웨어 14
  15. 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
  16. 16. 강의 소개강의 목표 16
  17. 17. 17
  18. 18. 18
  19. 19. 강의 소개 19
  20. 20. 강의 소개 20
  21. 21. 강의 소개Generating... 21
  22. 22. 강의 소개 22
  23. 23. 강의 소개캔버스 앱 & 페이지 탭 앱 • 좋아요 • 내 정보 • 친구 리스트 • 사진 • 사진 게시 • 태그 23
  24. 24. 강의 소개어때요, 참 쉽죠? 24
  25. 25. 강의 소개 25
  26. 26. 강의 소개 26
  27. 27. 강의 소개 하루 27
  28. 28. 강의 소개 근로기준법 제 50조 (근로시간), 2항 일을 하다 보면 조금 더 할 것 같아서 남게 될 때가 있죠? 1일의 근로시간은 휴게시간을 제외하고 8시간을 초과할 수 없다. 회사에서 주는 밥과 함께 야근을 할 시간입니다. 8시간 12시간 하루 24시간 ??시간 (24시간▲) 얼마나 걸릴지 모르면 일찍 퇴근하는 것이 답입니다. 웹에 대한 기본이 없으면 하루 안에는 안돼요….다음날 열심히 하면 되겠죠? 안되면? 또 다음날…. 안되면? 야근……… 들어만 봤다면 이젠 찾아보고 공부해야 할 때입니다. 28
  29. 29. 강의 소개 근로기준법 제 50조 (근로시간), 2항 일을 하다 보면 조금 더 할 것 같아서 남게 될 때가 있죠? 1일의 근로시간은 휴게시간을 제외하고 8시간을 초과할 수 없다. 회사에서 주는 밥과 함께 야근을 할 시간입니다. 90▲ 70▲ 8시간 12시간 하루 24시간 ??시간 (24시간▲) 50▲ 얼마나 걸릴지 모르면 일찍 퇴근하는 것이 답입니다. 50▼ 웹에 대한 기본이 없으면 하루 안에는 안돼요….다음날 열심히 하면 되겠죠? 안되면? 또 다음날…. 안되면? 야근……… 들어만 봤다면 이젠 찾아보고 공부해야 할 때입니다. 29
  30. 30. 강의 소개레벨 테스트Open Java HTML PHP API Script 스스로 평가 해보세요! 30
  31. 31. 강의 소개 30점10점 31
  32. 32. 강의 소개 100점80점 32
  33. 33. 초롱초롱한 눈빛으로!! 33
  34. 34. 강의 소개• 페이스북의 가능성• 페이스북 오픈 플랫폼• 페이스북 개발 & TIP 34
  35. 35. 가능성
  36. 36. 페이스북 소개 – 왜 페이스북인가? Billion users 36
  37. 37. 페이스북의 가능성70억 24억 37
  38. 38. 페이스북의 가능성페이스북 (Facebook) 하루 한달 6천만명 1억명 38
  39. 39. 페이스북의 가능성페이스북 (Facebook) 39
  40. 40. 페이스북의 가능성페이스북 (Facebook) 40
  41. 41. 페이스북의 가능성페이스북 (Facebook) 41
  42. 42. 페이스북의 가능성 42
  43. 43. 페이스북의 가능성플랫폼 (Platform) 43
  44. 44. 강의 소개 44
  45. 45. 45
  46. 46. 페이스북 소개 – 플랫폼 정의 46
  47. 47. 47
  48. 48. 48
  49. 49. 49
  50. 50. 페이스북의 가능성하나의 구조를 활용하여,다양한 것이 만들어 질 수 있는 것 50
  51. 51. 서비스를 구성하는 기반요소 51
  52. 52. 페이스북의 가능성 52
  53. 53. 페이스북의 가능성 53
  54. 54. 1billion users
  55. 55. 페이스북의 가능성페이스북 앱 (Facebook App) Facebook 55
  56. 56. 페이스북의 가능성페이스북 앱 (Facebook App) App 56
  57. 57. 페이스북의 가능성페이스북 앱 (Facebook App) App 57
  58. 58. 페이스북의 가능성페이스북 앱 (Facebook App) App 58
  59. 59. 페이스북의 가능성페이스북 앱 (Facebook App) App App App 59
  60. 60. 페이스북의 가능성페이스북 (Facebook)
  61. 61. 페이스북의 가능성페이스북 (Facebook)
  62. 62. 페이스북의 가능성무한의 가능성!!! 62
  63. 63. 오픈 플랫폼
  64. 64. 페이스북 오픈 플랫폼http://developers.facebook.com/docs/coreconcepts/ 64
  65. 65. 페이스북 오픈 플랫폼 65
  66. 66. 페이스북 오픈 플랫폼 소셜 플러그인 (Social Plugins)https://developers.facebook.com/docs/plugins/ 66
  67. 67. 페이스북 오픈 플랫폼소셜 플러그인 (Social Plugins)• Like Button 67
  68. 68. 페이스북 오픈 플랫폼소셜 플러그인 (Social Plugins)• Like Button 68
  69. 69. 페이스북 오픈 플랫폼소셜 플러그인 (Social Plugins)• Comments 69
  70. 70. 페이스북 오픈 플랫폼 창 (Dialog)https://developers.facebook.com/docs/reference/dialogs/ 70
  71. 71. 페이스북 오픈 플랫폼 71
  72. 72. 페이스북 오픈 플랫폼 오픈 그래프 (Open Graph )https://developers.facebook.com/docs/opengraph/overview/ 72
  73. 73. 페이스북 오픈 플랫폼오픈 그래프 (Open Graph ) 73
  74. 74. 페이스북 오픈 플랫폼오픈 그래프 (Open Graph ) 74
  75. 75. 페이스북 오픈 플랫폼 오픈 그래프 프로토콜 (Open Graph Protocol)http://developers.facebook.com/docs/opengraphprotocol/ 75
  76. 76. 페이스북 오픈 플랫폼오픈 그래프 프로토콜 (Open Graph Protocol)• Article 76
  77. 77. 페이스북 오픈 플랫폼 77
  78. 78. 페이스북 오픈 플랫폼 결제 (Payments)https://developers.facebook.com/docs/payments/ 78
  79. 79. 페이스북 오픈 플랫폼 79
  80. 80. 페이스북 오픈 플랫폼 Open API Login GraphAPI / FQL GraphAPIhttps://developers.facebook.com/docs/reference/login/ 80
  81. 81. 페이스북 오픈 플랫폼 81
  82. 82.
  83. 83. 페이스북 앱페이스북 앱 형태• 웹 사이트 with 페이스북• Inside 페이스북 – 페이스북 캔버스 앱 – 페이스북 페이지 탭 앱• 페이스북 앱 with 모바일 앱 – 페이스북 앱 (Android / iOS) 84
  84. 84. 페이스북 앱Pinterest – 로그인 (Login) 85
  85. 85. 페이스북 앱Shopping Mall – 웹 앱 (Web App) 86
  86. 86. 페이스북 앱Tetris Battle – 캔버스 앱(Canvas App) 87
  87. 87. 페이스북 앱나의 친구들 – 페이지 탭 앱 (Page Tab App) 88
  88. 88. 페이스북 앱Example – 모바일 웹 앱 (Mobile Web App) 89
  89. 89. 페이스북 앱Insagram & Foursquare– 모바일 앱 (Mobile App) 90
  90. 90. 페이스북 앱Curing – 모바일 앱 (Mobile App) 91
  91. 91. 페이스북 앱Curing – 모바일 앱 (Mobile App) 어떤 것들이 가능할지. 데모영상을 통해 알아보자. http://youtu.be/9ci1yOvWXeg 92
  92. 92. 웹 앱 개발
  93. 93. 페이스북 웹 앱 개발왜, 웹 앱인가요?? 기본 높은 쉬움 접근성 94
  94. 94. 페이스북 웹 앱 개발어떤 웹 앱을 만들건가요? 캔버스 페이지 앱 탭앱 95
  95. 95. 페이스북 웹 앱 개발어떤 웹 앱을 만들건가요?> 캔버스 앱 96
  96. 96. 페이스북 웹 앱 개발어떤 웹 앱을 만들건가요?> 캔버스 앱 97
  97. 97. 페이스북 웹 앱 개발어떤 웹 앱을 만들건가요?> 페이지 탭 앱 98
  98. 98. 페이스북 웹 앱 개발어떤 웹 앱을 만들건가요?> 페이지 탭 앱 99
  99. 99. 페이스북 웹 앱 개발어떤 웹 앱을 만들건가요? 캔버스 페이지 탭 앱 앱 100
  100. 100. 페이스북 웹 앱 개발어떤 웹 앱을 만들건가요? 노출을 좋아요를 위해 위해 101
  101. 101. 페이스북 웹 앱 개발 어떤 웹 앱을 만들건가요?많은 사람에게 노출 하기 위해 102
  102. 102. 페이스북 웹 앱 개발무엇을 만들건가요?? 103
  103. 103. 페이스북 웹 앱 개발무엇을 만들건가요?? 104
  104. 104. 105
  105. 105. 강의 소개 106
  106. 106. 강의 소개 107
  107. 107. 페이스북 웹 앱 개발 다시 정리하고 가자• 페이스북 웹 앱 • 좋아요 –캔버스 앱 • 내 정보 –페이지 탭 앱 • 친구 리스트 • 사진 합성 • 사진 게시 • 태그 108
  108. 108. 페이스북 웹 앱 개발개발자 등록하기 109
  109. 109. 페이스북 웹 앱 개발개발자 등록하기 110
  110. 110. 페이스북 웹 앱 개발새 앱 만들기 111
  111. 111. 페이스북 웹 앱 개발새 앱 만들기 112
  112. 112. 페이스북 웹 앱 개발새 앱 만들기 113
  113. 113. 페이스북 웹 앱 개발새 앱 만들기 114
  114. 114. 페이스북 웹 앱 개발웹 앱 설정하기 115
  115. 115. 페이스북 웹 앱 개발웹 앱 설정하기 117
  116. 116. 118
  117. 117. 페이지 필요 119
  118. 118. 페이스북 웹 앱 개발웹 앱 설정하기 120
  119. 119. 페이스북 웹 앱 개발웹 앱 설정하기 121
  120. 120. 페이스북 웹 앱 개발웹 앱 설정하기 122
  121. 121. 페이스북 오픈 플랫폼 – 페이스북 앱 소개웹 앱 설정하기 원하는 걸로 123
  122. 122. 페이스북 오픈 플랫폼 – 페이스북 앱 소개웹 앱 설정하기 124
  123. 123. 페이스북 오픈 플랫폼 – 페이스북 앱 소개웹 앱 설정하기 125
  124. 124. 페이스북 웹 앱 개발웹 앱 설정하기http://www.facebook.com/dialog/pagetab ?app_id=YOUR_APP_ID&next=YOUR_URL 126
  125. 125. 127
  126. 126. 어떻게 개발하지?
  127. 127. 페이스북 웹 앱 개발그래프(Graph) API FQL (Facebook Query Language) 129
  128. 128. 페이스북 웹 앱 개발그래프(Graph) API Explorer• http://developers.facebook.com/tools/explorer 130
  129. 129. 페이스북 웹 앱 개발그래프(Graph) API – GRAPH API CODE/100000525744525?fields=id,name{ "id": "100000525744525", "name": "YongHui Lee“ } 131
  130. 130. 페이스북 웹 앱 개발그래프(Graph) API 132
  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. 132. 페이스북 웹 앱 개발FQL (Facebook Query Language)SELECT uid, name FROM user WHEREuid = me(){ "data": [ { "uid": 100000525744525, "name": "YongHui Lee“ }]} 134
  133. 133. 페이스북 웹 앱 개발FQL (Facebook Query Language) 135
  134. 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. 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. 136. 페이스북 웹 앱 개발Facebook PHP SDK• https://github.com/facebook/facebook-php-sdk 138
  137. 137. 페이스북 웹 앱 개발Facebook Javascript SDK• http://developers.facebook.com/docs/reference/javascript/ 139
  138. 138. 페이스북 웹 앱 개발 PHP vs JavaScript Server side Client side …• API 제한 이슈• 사용 과정이 깔끔하게• 개발하기 쉽게 140
  139. 139. 페이스북 웹 앱 개발 페이스북 API 제한 • 하나의 앱에서 하나의 IP 600초 동안 600번 이상의 호출 금지 • 500만 MAU(한 달간 사용하는 유저의 수), 하루 100만 API 호출, 하루 50만 노출페이스북 정책 https://developers.facebook.com/policy/Korean/ 141
  140. 140. 페이스북 웹 앱 개발페이스북 API 제한• 좋아요 확인(1회)• 사용자 정보 받아오기(1회)• 친구 리스트 받아오기(1회)• 친구 이미지 받아오기(N회) * 0• 사진 올리기 + 태그하기(1회) 142
  141. 141. 페이스북 웹 앱 개발페이스북 API 제한600초당 150명 하루 21600명 한달 648000명 143
  142. 142. 페이스북 웹 앱 개발사용 과정이 깔끔하게• 좋아요 체크를 한다고 하면… 144
  143. 143. 페이스북 웹 앱 개발사용 과정이 깔끔하게• PHP –페이지 로딩 전에 확인 후 –좋아요 유도 화면 보여줌 145
  144. 144. 강의 소개Loading…& Like Check 146
  145. 145. 147
  146. 146. 페이스북 웹 앱 개발사용 과정이 깔끔하게• JavaScript –페이지 로딩 후 –좋아요 화면을 보여줘야 하는 경우 –페이지를 다시 로딩해야 함 148
  147. 147. 강의 소개Loading… 149
  148. 148. 강의 소개Like Check 150
  149. 149. 151
  150. 150. 페이스북 웹 앱 개발SDK 활용 범위• PHP • Javascript –Server side –Client side –대부분의 API –로그인 • PHP에선 번거 로운 작업 152
  151. 151. 페이스북 웹 앱 개발 – SDK / API 사용 개발, Right now!페이스북 웹 앱 개발ㆍ 이제 진짜로 개발하자!!!!
  152. 152. 페이스북 웹 앱 개발 캔버스 앱 페이지 탭 앱페이지 앱 허가 확 좋아요 메인화면이동 인 확인 프로필 컨텐츠 친구 내 정보사진 다운 처리 리스트이미지 사진으로 사진게시생성 이동 154
  153. 153. 페이스북 웹 앱 개발 캔버스 앱 페이지 탭 앱페이지 앱 허가 확 좋아요 메인화면이동 인 확인 프로필 컨텐츠 친구 내 정보사진 다운 처리 리스트이미지 사진으로 사진게시생성 이동 155
  154. 154. 페이스북 웹 앱 개발Redirect• 캔버스 앱 / 페이지 탭 앱은 iframe• Javascript – top.window.location = ‘페이지 탭 앱 주소’ 156
  155. 155. 페이스북 웹 앱 개발 캔버스 앱 페이지 탭 앱페이지 앱 허가 확 좋아요 메인화면이동 인 확인 프로필 컨텐츠 친구 내 정보사진 다운 처리 리스트이미지 사진으로 사진게시생성 이동 157
  156. 156. 페이스북 웹 앱 개발Facebook Login 진행 로그인 상태 Y 체크 N 로그인 유도 http://developers.facebook.com/docs/howtos/login/getting-started/ 158
  157. 157. 페이스북 웹 앱 개발Facebook Javascript SDK• http://developers.facebook.com/docs/reference/javascript/ 159
  158. 158. 160
  159. 159. 페이스북 웹 앱 개발Facebook Javascript SDKWith Javascript SDK http://developers.facebook.com/docs/howtos/login/getting-started/ 161
  160. 160. 페이스북 웹 앱 개발Facebook Javascript SDK http://developers.facebook.com/docs/howtos/login/getting-started/ 162
  161. 161. 페이스북 웹 앱 개발Facebook Javascript SDKFB.api(‘GRAPH_API_CODE , function(response){ // additional code}); 163
  162. 162. 페이스북 웹 앱 개발 캔버스 앱 페이지 탭 앱페이지 앱 허가 확 좋아요 메인화면이동 인 확인 프로필 컨텐츠 친구 내 정보사진 다운 처리 리스트이미지 사진으로 사진게시생성 이동 164
  163. 163. 페이스북 웹 앱 개발Facebook PHP SDKrequire_once(‘facebook.php); 165
  164. 164. 페이스북 웹 앱 개발Facebook PHP SDK$facebook = new Facebook(array( appId => YOUR_APP_ID, secret => YOUR_APP_SECRET, sharedSession => true, fileUpload => true)); 166
  165. 165. 페이스북 웹 앱 개발Facebook Login$Id =$facebook->getUser()0 : not log inElse : user’s id 167
  166. 166. 페이스북 웹 앱 개발Facebook PHP SDK$facebook->api(‘GRAPH_API_CODE‘) 168
  167. 167. 페이스북 웹 앱 개발Facebook PHP SDKGraph API로는 FQL로는 좋아요 페이지 리스트  좋아요 페이지 리스트 타겟 페이지가 확인 중에서 타겟 리스트가 있는지 확인  주고 받는 데이터 양이 줄어듬 169
  168. 168. 페이스북 웹 앱 개발Facebook PHP SDKGraph 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. 169. 페이스북 웹 앱 개발Facebook PHP SDK Graph API로는 $facebook->api(‘GRAPH_API_CODE‘) 즉, $facebook->api(‘me/likes’); 171
  170. 170. 페이스북 웹 앱 개발Facebook PHP SDK FQL로는 $facebook->api(array( ‘method’=>’fql.query’, ‘query’ => ‘FQL ‘)); 172
  171. 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. 172. 페이스북 웹 앱 개발Facebook PHP SDK SELECT page_id FROM page_fan WHERE uid=$user_id and page_id=245971252189546; 174
  173. 173. 페이스북 웹 앱 개발 캔버스 앱 페이지 탭 앱페이지 앱 허가 확 좋아요 메인화면이동 인 확인 프로필 컨텐츠 친구 내 정보사진 다운 처리 리스트이미지 사진으로 사진게시생성 이동 175
  174. 174. 176
  175. 175. 강의 소개 177
  176. 176. 강의 소개Generating… 178
  177. 177. 페이스북 웹 앱 개발 캔버스 앱 페이지 탭 앱페이지 앱 허가 확 좋아요 메인화면이동 인 확인 프로필 컨텐츠 친구 내 정보사진 다운 처리 리스트이미지 사진으로 사진게시생성 이동 179
  178. 178. 페이스북 웹 앱 개발내 정보 /me { "id": "100000525744525", "name": "YongHui Lee", "first_name": "YongHui", "last_name": "Lee", …. 180
  179. 179. 페이스북 웹 앱 개발Facebook PHP SDK$facebook->api(‘GRAPH_API_CODE‘)$data = $facebook->api(„/me„) 181
  180. 180. 페이스북 웹 앱 개발Facebook PHP SDK$name = data[„name‟];{ "id": "100000525744525", "name": "YongHui Lee", "first_name": "YongHui", "last_name": "Lee", …. 182
  181. 181. 페이스북 웹 앱 개발 캔버스 앱 페이지 탭 앱페이지 앱 허가 확 좋아요 메인화면이동 인 확인 프로필 컨텐츠 친구 내 정보사진 다운 처리 리스트이미지 사진으로 사진게시생성 이동 183
  182. 182. 페이스북 웹 앱 개발친구 리스트 /me/friends { "data": [ { "name": “friends1", "id": “00000000" }, { "name": “friends2", "id": “00000000" }, …. 184
  183. 183. 페이스북 웹 앱 개발Facebook PHP SDK$facebook->api(‘GRAPH_API_CODE‘)$data = $facebook->api(„/me/friends„) 185
  184. 184. 페이스북 웹 앱 개발Facebook PHP SDK$friend1name = data[0][„name‟];{ "data": [ { "name": “friends1", "id": “00000000" }, …. 186
  185. 185. 페이스북 웹 앱 개발 캔버스 앱 페이지 탭 앱페이지 앱 허가 확 좋아요 메인화면이동 인 확인 프로필 컨텐츠 친구 내 정보사진 다운 처리 리스트이미지 사진으로 사진게시생성 이동 187
  186. 186. 페이스북 웹 앱 개발• 각자 자유로운 알고리즘… 188
  187. 187. 페이스북 웹 앱 개발 캔버스 앱 페이지 탭 앱페이지 앱 허가 확 좋아요 메인화면이동 인 확인 프로필 컨텐츠 친구 내 정보사진 다운 처리 리스트이미지 사진으로 사진게시생성 이동 189
  188. 188. 페이스북 웹 앱 개발사진 /ID/picture { "data": { "url": “http://~", "is_silhouette": false } } 190
  189. 189. 페이스북 웹 앱 개발Facebook PHP SDK$facebook->api(‘GRAPH_API_CODE‘)$data = $facebook->api(„ID/picture„) 191
  190. 190. 페이스북 웹 앱 개발Facebook PHP SDK$photoUrl = $data[„url‟];{ "data": { "url": “http://~", "is_silhouette": false }} 192
  191. 191. 페이스북 웹 앱 개발 https://graph.facebook.com/ID/pictureRedirect되는 URL이 존재실제 URL을 통해서 사진 다운PHP에서 접근하긴 어려움 193
  192. 192. 페이스북 웹 앱 개발 Open Source! http://stackoverflow.com/a/3347453 194
  193. 193. 페이스북 웹 앱 개발 캔버스 앱 페이지 탭 앱페이지 앱 허가 확 좋아요 메인화면이동 인 확인 프로필 컨텐츠 친구 내 정보사진 다운 처리 리스트이미지 사진으로 사진게시생성 이동 195
  194. 194. 페이스북 웹 앱 개발사진 합성사진을 합성할 수 있는 다양한 라이브러리- gd- imagick- exif 196
  195. 195. 페이스북 웹 앱 개발사진 합성사진을 합성할 수 있는 다양한 라이브러리- gd- imagick- exif 197
  196. 196. 페이스북 웹 앱 개발Imagick – 사진 불러오기$imgTemplate = new Imagick;$imgTemplate ->readImage("./배경.png"); 198
  197. 197. 199
  198. 198. 페이스북 웹 앱 개발Imagick – 사진 합성하기$imgFriend->readImage(‘./친구사진.png’);$imgTemplate ->compositeImage($imgFriend, Imagick::COMPOSITE_OVER, X, Y); 200
  199. 199. 페이스북 웹 앱 개발Imagick – 사진 리사이징$imgFriend ->resizeImage(X-Scale, Y-Scale, Imagick::FILTER_TRIANGLE, 1); 201
  200. 200. 202
  201. 201. 페이스북 웹 앱 개발Imagick – 글쓰기$fontType = ./폰트.ttf;$font = new ImagickDraw();$font->setFont($fontType); 203
  202. 202. 페이스북 웹 앱 개발Imagick – 글쓰기$font->setTextEncoding(utf-8);$font->setFontSize(22);$font->setFillColor("#000000");$font->setTextAntialias(true); 204
  203. 203. 페이스북 웹 앱 개발Imagick – 글쓰기$font->setGravity(Imagick::GRAVITY_NORTHEAST);$imgTemplate ->annotateImage($font, X, Y, angle, “내용”); 205
  204. 204. 페이스북 웹 앱 개발Imagick – 사진 저장$imgTemplate ->setImageFormat("jpeg");$imgTemplate ->writeImage("./결과.jpeg"); 206
  205. 205. 페이스북 웹 앱 개발Imagick – 최종 이미지 207
  206. 206. 페이스북 웹 앱 개발 캔버스 앱 페이지 탭 앱페이지 앱 허가 확 좋아요 메인화면이동 인 확인 프로필 컨텐츠 친구 내 정보사진 다운 처리 리스트이미지 사진으로 사진게시생성 이동 208
  207. 207. 페이스북 웹 앱 개발사진 게시 /me/photos POST$photoId = $facebook->api(‘/me/photos’, ‘POST’, array( ‘source’ => ‘@’.이미지 주소, ‘message’ => 글 )); 209
  208. 208. 페이스북 웹 앱 개발사진 게시 /me/photos POST$photoId = $facebook->api(‘/me/photos’, ‘POST’, array( ‘source’ => ‘@’.이미지 주소, ‘message’ => 글, „tags‟ => 태그 리스트, )); 210
  209. 209. 페이스북 웹 앱 개발사진에 태그$tags[] = array(‘tag_uid’ => 사용자 ID, ‘x’ => 상대 비율 X 좌표, ‘y’ => 상대 비율 Y 좌표); 211
  210. 210. 페이스북 웹 앱 개발 캔버스 앱 페이지 탭 앱페이지 앱 허가 확 좋아요 메인화면이동 인 확인 프로필 컨텐츠 친구 내 정보사진 다운 처리 리스트이미지 사진으로 사진게시생성 이동 212
  211. 211. 페이스북 오픈 플랫폼 – 기능 소개$photoId = $facebook->api(‘/me/photos’, ‘POST’, array( ‘source’ => ‘@’.이미지 주소, ‘message’ => 글, ‘tags’ => 태그 리스트, )); 213
  212. 212. 페이스북 웹 앱 개발 올린 글 주소!!https://www.facebook.com /$photoId 214
  213. 213. 강의 소개 215
  214. 214. 앱 개발 TIP
  215. 215. 앱 정보
  216. 216. 페이스북 앱 개발 TIP앱 정보 218
  217. 217. 페이스북 앱 개발 TIP 219
  218. 218. 페이스북 앱 개발 TIP앱 정보 메뉴 220
  219. 219. 페이스북 앱 개발 TIP 앱에 대한 설명 221
  220. 220. 페이스북 앱 개발 TIP 다양한 언어 제공 가능 222
  221. 221. 페이스북 앱 개발 TIP 오픈 그래프 사용 223
  222. 222. 페이스북 앱 개발 TIP 개발자 메시지 224
  223. 223. 페이스북 앱 개발 TIP Analytics 정보 225
  224. 224. 페이스북 앱 개발 TIP 다양한 정보들… 226
  225. 225. Heroku
  226. 226. 페이스북 앱 개발 TIP 헤로쿠? • 클라우드 웹 호스팅 • Git 시스템 기반 • 페이스북 앱과 바로 연동 • 매우 좋은 예제 제공http://www.heroku.com/ 228
  227. 227. 페이스북 앱 개발 TIP헤로쿠 사용시 기본 페이지 Page tab AppWebsite Canvas App 229
  228. 228. 페이스북 앱 개발 TIP페이스북 + 헤로쿠? SSL 설정 기본 제공 230
  229. 229. 페이스북 앱 개발 TIP페이스북 + 헤로쿠? https, 보안 소켓 레이어(Hypertext Transfer Protocol over Secure Socket Layer) 231
  230. 230. 페이스북 앱 개발 TIPSSL• 일반 호스팅 업체: 비싸다• 자체 서버에 설치: 힘들다 232
  231. 231. 페이스북 앱 개발 TIPSSL 233
  232. 232. 페이스북 앱 개발 TIP헤로쿠를 사용하다보면….PHP GD Library jpeg 포맷 지원 X Freetype 폰트 지원 X 234
  233. 233. 페이스북 앱 개발 TIP여기 해결 책이 있소!https://github.com/nekian/heroku-php-extension-imagick 235
  234. 234. 광고
  235. 235. 페이스북 앱 개발 TIP • 페이스북 내부 광고는, –캔버스 앱 –페이지 탭 앱 • 업체 목록 중에서 사용해야 함.https://developers.facebook.com/adproviders/
  236. 236. 페이스북 앱 개발 TIP구글 애드센스 안됨
  237. 237. 페이스북 앱 개발 TIP• 가장 무난한 송금 방법 – Wire transper (전자송금)• 은행 정보 – ABA or SWIFT 코드 – 은행에 문의하면 됨
  238. 238. nekians@gmail.com 240
  239. 239. 주제THANK YOU2013. 3. 23. 소마인사이드하루 안에 페이스북 웹 앱 만들기 이용희

×