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

하루 안에

페이스북 웹 앱 만들기

이용희

주제

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



41



42



43


44

플랫폼 (Platform)


45

강의 소개

46

47

페이스북 소개 – 플랫폼 정의

48

49

50

51

하나의 구조를 활용하여 ,

다양한 것이 만들어 질 수 있는 것


52

서비스를 구성하는 기반요소

53


54


1billion users

56

페이스북 앱 (Facebook App)

Face-book


57

App



58

App



59

App



60

App


App

App






63

무한의 가능성 !!!


오픈 플랫폼

65

Plugins Dialog GraphPayments

LoginGraph

FQL

Social Open

Api

http://developers.facebook.com/docs/coreconcepts/

페이스북 오픈 플랫폼

66


LoginGraph

FQL

Social Open

Api


67

소셜 플러그인 (Social Plugins)


https://developers.facebook.com/docs/plug-ins/

68


• Like Button


69


• Like Button


70

• Comments



71

창 (Dialog)


https://developers.facebook.com/docs/reference/dialogs/

72


LoginGraph

FQL

Social Open

Api


73

오픈 그래프 (Open Graph )

https://developers.facebook.com/docs/opengraph/overview/


74



75



76

오픈 그래프 프로토콜 (Open Graph Protocol)

http://developers.facebook.com/docs/opengraphprotocol/


77

• Article

오픈 그래프 프로토콜 (Open Graph Protocol)


78


LoginGraph

FQL

Social Open

Api


79

결제 (Payments)

https://developers.facebook.com/docs/payments/


80


LoginGraph

FQL

Social Open

Api


81

Open API

Login

GraphAPI / FQL

GraphAPI

https://developers.facebook.com/docs/reference/login/


82


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“} ]

}



136



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 회 )



144

600 초당 150 명하루 21600 명

한달 648000 명



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/



161

162

With Javascript SDK




163




164

FB.api(‘GRAPH_API_CODE ', function(response) {

// additional code});



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


https://graph.facebook.com/245971252189546



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);



209

$font->setGravity(Imagick::GRAVITY_NORTHEAST);$imgTemplate

->annotateImage($font, X, Y, an-gle, “ 내용” );



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

사진 태그



주소 ,‘message’ => 글 ,‘tags’ => 태그 리스트 ,));


215

사진 태그

$tags[] = array(‘tag_uid’ => 사용자 ID,

‘x’ => 상대 비율 X 좌표 ,‘y’ => 상대 비율 Y 좌표 );


216

페이지이동

앱 허가 확인



컨텐츠처리



이동



217

페이스북 오픈 플랫폼 – 기능 소개



주소 ,‘message’ => 글 ,‘tags’ => 태그 리스트 ,));

218

올린 글 주소 !!

https://www.facebook.com

/$photoId


219

강의 소개

앱 개발 TIP

앱 정보

222

페이스북 앱 개발 TIP

앱 정보

223


224


앱 정보 메뉴

225


앱에 대한 설명

226


다양한 언어 제공 가능

227

오픈 그래프 사용


228


개발자 메시지

229


Analytics 정보

230


다양한 정보들…

Heroku

232

• 클라우드 웹 호스팅

• Git 시스템 기반

• 페이스북 앱과 바로 연동

• 매우 좋은 예제 제공


헤로쿠 ?

http://www.heroku.com/

233


헤로쿠 사용시 기본 페이지

Website

Canvas App

Page tab App

234

SSL 설정 기본 제공


페이스북 + 헤로쿠 ?

235

https, 보안 소켓 레이어

(Hypertext Transfer Proto-

col over Secure Socket

Layer)


페이스북 + 헤로쿠 ?

236

• 일반 호스팅 업체 : 비싸다

• 자체 서버에 설치 : 힘들다


SSL

237


SSL

238

• 데이터베이스 5MB 무료

• 1 dyno( 헤로쿠에서 사용하는 웹 프로세스 단위 ) 무료

• 무료로 요청에 대한 처리 속도 100ms 까지 지원

• 무료로 분당 600 번 이하 요청까지 지원

• 100MB 의 디스크 + Slug ( 헤로쿠에서 자체적으로

구축해놓는 환경 ) 용량 무료


헤로쿠 과금

239

PHP GD Libraryjpeg 포맷 지원 X

Freetype 폰트 지원 X


헤로쿠를 사용하다보면… .

240


여기 해결 책이 있소 !https://github.com/nekian/heroku-php-extension-imagick

광고


• 페이스북 내부 광고는 ,–캔버스 앱–페이지 탭 앱

• 업체 목록 중에서 사용해야 함 .

https://developers.facebook.com/ad-providers/


구글 애드센스 안됨


• 가장 무난한 송금 방법–Wire transper ( 전자송금 )

• 은행 정보– ABA or SWIFT 코드–은행에 문의하면 됨

[email protected]

THANK YOU

2013. 3. 23. 소마인사이드 하루 안에 페이스북 웹 앱 만들기

이용희

주제