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

주제

하루 안에

페이스북 웹 앱 만들기

이용희

발표자 소개

2009.12

페이스북 가입 2

발표자 소개

2011.9

페이스북 시작 5

발표자 소개

2011.12

페이스북 개발 시작 6

발표자 소개

2012.1~3
2012.7~9

페이스북 큐레이션 서비스 개발 / 월간 마이크로소프트웨어 7

발표자 소개

2012.3

2012 페이스북 모바일 핵, 서울 8

발표자 소개

2012.4~7

페이스북 큐레이션 서비스 개발 2 9

꿀 같은 휴식...

10

발표자 소개

13

발표자 소개

2012.7
2013.1~3

페이스북 웹 앱 개발 / 월간 마이크로소프트웨어 14

발표자 소개

이용희 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

강의 소개

Generating...

21

강의 소개

캔버스 앱 & 페이지 탭 앱
• 좋아요
• 내 정보
• 친구 리스트
• 사진
• 사진 게시
• 태그

23

강의 소개

어때요, 참 쉽죠?

24

강의 소개

하루

27

강의 소개

근로기준법 제 50조 (근로시간), 2항 일을 하다 보면 조금 더 할 것 같아서 남게 될 때가 있죠?

1일의 근로시간은 휴게시간을 제외하고 8시간을 초과할 수 없다. 회사에서 주는 밥과 함께 야근을 할 시간입니다.

8시간 12시간
하루
24시간 ??시간 (24시간▲)

얼마나 걸릴지 모르면 일찍 퇴근하는 것이 답입니다. 웹에 대한 기본이 없으면 하루 안에는 안돼요….

다음날 열심히 하면 되겠죠? 안되면? 또 다음날…. 안되면? 야근……… 들어만 봤다면 이젠 찾아보고 공부해야 할 때입니다.
28

강의 소개

근로기준법 제 50조 (근로시간), 2항 일을 하다 보면 조금 더 할 것 같아서 남게 될 때가 있죠?

1일의 근로시간은 휴게시간을 제외하고 8시간을 초과할 수 없다. 회사에서 주는 밥과 함께 야근을 할 시간입니다.

90▲ 70▲
8시간 12시간
하루
24시간 ??시간 (24시간▲)

50▲
얼마나 걸릴지 모르면 일찍 퇴근하는 것이 답입니다.
50▼
웹에 대한 기본이 없으면 하루 안에는 안돼요….

다음날 열심히 하면 되겠죠? 안되면? 또 다음날…. 안되면? 야근……… 들어만 봤다면 이젠 찾아보고 공부해야 할 때입니다.
29

강의 소개

레벨 테스트

Open Java
HTML PHP
API Script

스스로 평가 해보세요!

30

강의 소개

30점

10점

31

강의 소개

100점

80점

32

초롱초롱한 눈빛으로!!

33

강의 소개

• 페이스북의 가능성

• 페이스북 오픈 플랫폼

• 페이스북 개발 & TIP

34

페이스북 소개 – 왜 페이스북인가?

Billion users

36

페이스북의 가능성

70억 24억

37


페이스북 (Facebook)

하루
한달 6천만명
1억명

38



39



40



41


42


플랫폼 (Platform)

43

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

46


하나의 구조를 활용하여,

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

50

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

51


52


53


페이스북 앱 (Facebook App)

Facebook

55



App

56



App

57



App

58



App

App

App

59


무한의 가능성!!!

62

페이스북 오픈 플랫폼

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


65


소셜 플러그인 (Social Plugins)

https://developers.facebook.com/docs/plugins/ 66


• Like Button

67


• Like Button

68


• Comments

69


창 (Dialog)

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


71


오픈 그래프 (Open Graph )

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



73



74


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

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


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

76


77


결제 (Payments)

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


79


Open API

Login

GraphAPI / FQL

GraphAPI

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


81

페이스북 앱

페이스북 앱 형태

• 웹 사이트 with 페이스북

• Inside 페이스북
– 페이스북 캔버스 앱
– 페이스북 페이지 탭 앱

• 페이스북 앱 with 모바일 앱
– 페이스북 앱 (Android / iOS)

84

페이스북 앱

Pinterest – 로그인 (Login)

85

페이스북 앱

Shopping Mall – 웹 앱 (Web App)

86

페이스북 앱

Tetris Battle – 캔버스 앱(Canvas App)

87

페이스북 앱

나의 친구들 – 페이지 탭 앱 (Page Tab App)

88

페이스북 앱

Example – 모바일 웹 앱 (Mobile Web App)

89

페이스북 앱

Insagram & Foursquare– 모바일 앱 (Mobile App)

90

페이스북 앱

Curing – 모바일 앱 (Mobile App)

91

페이스북 앱

Curing – 모바일 앱 (Mobile App)

어떤 것들이 가능할지.
데모영상을 통해 알아보자.

http://youtu.be/9ci1yOvWXeg

92


왜, 웹 앱인가요??

기본 높은
쉬움
접근성

94


어떤 웹 앱을 만들건가요?

캔버스 페이지
앱 탭앱

95


> 캔버스 앱

96


> 캔버스 앱

97


> 페이지 탭 앱

98


> 페이지 탭 앱

99



캔버스
페이지 탭 앱
앱

100



노출을 좋아요를
위해 위해

101



많은 사람에게
노출 하기 위해

102


무엇을 만들건가요??

103


무엇을 만들건가요??

104


다시 정리하고 가자
• 페이스북 웹 앱 • 좋아요
–캔버스 앱 • 내 정보
–페이지 탭 앱 • 친구 리스트
• 사진 합성
• 사진 게시
• 태그
108


개발자 등록하기

109


개발자 등록하기

110


새 앱 만들기

111


새 앱 만들기

112


새 앱 만들기

113


새 앱 만들기

114


웹 앱 설정하기

115



117

페이지 필요

119



120



121



122

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


원하는 걸로

123



124



125


http://www.facebook.com/dialog/pagetab
?app_id=YOUR_APP_ID&next=YOUR_URL

126


그래프(Graph) API
FQL (Facebook Query Language)

129


그래프(Graph) API Explorer
• http://developers.facebook.com/tools/explorer

130


그래프(Graph) API – GRAPH API CODE
/100000525744525?fields=id,name

{ "id": "100000525744525",
"name": "YongHui Lee“ }

131


그래프(Graph) API

132


그래프(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


SELECT uid, name FROM user WHERE
uid = me()

{ "data":
[ { "uid": 100000525744525,
"name": "YongHui Lee“
}]
}
134



135


• 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


• 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


Facebook PHP SDK
• https://github.com/facebook/facebook-php-sdk

138


Facebook Javascript SDK
• http://developers.facebook.com/docs/reference/javascript/

139


PHP vs JavaScript
Server side Client side …

• API 제한 이슈
• 사용 과정이 깔끔하게
• 개발하기 쉽게

140


페이스북 API 제한
• 하나의 앱에서 하나의 IP
600초 동안 600번 이상의 호출 금지
• 500만 MAU(한 달간 사용하는 유저의 수),
하루 100만 API 호출, 하루 50만 노출

페이스북 정책 https://developers.facebook.com/policy/Korean/ 141


• 좋아요 확인(1회)
• 사용자 정보 받아오기(1회)
• 친구 리스트 받아오기(1회)
• 친구 이미지 받아오기(N회) * 0
• 사진 올리기 + 태그하기(1회)

142



600초당 150명
하루 21600명
한달 648000명

143


사용 과정이 깔끔하게

• 좋아요 체크를 한다고 하면…

144



• PHP
–페이지 로딩 전에 확인 후
–좋아요 유도 화면 보여줌

145

강의 소개

Loading…
& Like Check

146



• JavaScript
–페이지 로딩 후
–좋아요 화면을 보여줘야 하는 경우
–페이지를 다시 로딩해야 함

148

강의 소개

Loading…

149

강의 소개

Like Check

150


SDK 활용 범위

• PHP • Javascript
–Server side –Client side
–대부분의 API –로그인
• PHP에선 번거
로운 작업

152

페이스북 웹 앱 개발 – SDK / API 사용

개발, Right now!
ㆍ 이제 진짜로 개발하자!!!!


캔버스 앱 페이지 탭 앱

페이지 앱 허가 확 좋아요
메인화면
이동 인 확인

프로필 컨텐츠 친구
내 정보
사진 다운 처리 리스트

이미지 사진으로
사진게시
생성 이동

154



메인화면
이동 인 확인

내 정보

사진게시
생성 이동

155


Redirect
• 캔버스 앱 / 페이지 탭 앱은 iframe

• Javascript
– top.window.location = ‘페이지 탭 앱 주소’

156



메인화면
이동 인 확인

내 정보

사진게시
생성 이동

157


Facebook Login

진행
로그인 상태
Y

체크 N
로그인 유도

http://developers.facebook.com/docs/howtos/login/getting-started/ 158


• http://developers.facebook.com/docs/reference/javascript/

159


With Javascript SDK



FB.api(‘GRAPH_API_CODE ', function(response)
{
// additional code
});

163



메인화면
이동 인 확인

내 정보

사진게시
생성 이동

164


Facebook PHP SDK
require_once(‘facebook.php');

165


Facebook PHP SDK
$facebook = new Facebook(array(
'appId' => YOUR_APP_ID,
'secret' => YOUR_APP_SECRET,
'sharedSession' => true,
'fileUpload' => true
));

166


Facebook Login
$Id =$facebook->getUser()

0 : not log in
Else : user’s id

167


Facebook PHP SDK
$facebook->api(‘GRAPH_API_CODE‘)

168


Facebook PHP SDK
Graph API로는 FQL로는
 좋아요 페이지 리스트  좋아요 페이지 리스트
 타겟 페이지가 확인 중에서 타겟 리스트가
있는지 확인
 주고 받는 데이터 양이
줄어듬

169


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


Facebook PHP SDK

Graph API로는
즉, $facebook->api(‘me/likes’);

171


Facebook PHP SDK
FQL로는
$facebook->api(array(
‘method’=>’fql.query’,
‘query’ => ‘FQL ‘));

172


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


Facebook PHP SDK

SELECT page_id
FROM page_fan
WHERE uid=$user_id
and page_id=245971252189546;

174



메인화면
이동 인 확인

내 정보

사진게시
생성 이동

175

강의 소개

Generating…

178



메인화면
이동 인 확인

내 정보

사진게시
생성 이동

179


내 정보

/me
{
"id": "100000525744525",
"name": "YongHui Lee",
"first_name": "YongHui",
"last_name": "Lee",
….

180


Facebook PHP SDK
$data = $facebook->api(„/me„)

181


Facebook PHP SDK

$name = data[„name‟];
{ "id": "100000525744525",
"name": "YongHui Lee",
"first_name": "YongHui",
"last_name": "Lee",
….
182



메인화면
이동 인 확인

내 정보

사진게시
생성 이동

183


친구 리스트

/me/friends
{
"data": [
{
"name": “friends1",
"id": “00000000"
},
{
"id": “00000000"
},
….

184


Facebook PHP SDK
$data = $facebook->api(„/me/friends„)

185


Facebook PHP SDK
$friend1name = data[0][„name‟];
{
"data": [
{
"id": “00000000"
},
….
186



메인화면
이동 인 확인

내 정보

사진게시
생성 이동

187


• 각자 자유로운 알고리즘…

188



메인화면
이동 인 확인

내 정보

사진게시
생성 이동

189


사진

/ID/picture
{
"data": {
"url": “http://~",
"is_silhouette": false
}
}

190


Facebook PHP SDK
$data = $facebook->api(„ID/picture„)

191


Facebook PHP SDK
$photoUrl = $data[„url‟];
{
"data": {
"url": “http://~",
"is_silhouette": false
}
}

192


https://graph.facebook.com/ID/picture

Redirect되는 URL이 존재

실제 URL을 통해서 사진 다운

PHP에서 접근하긴 어려움

193


Open Source!
 http://stackoverflow.com/a/3347453

194



메인화면
이동 인 확인

내 정보

사진게시
생성 이동

195


사진 합성
사진을 합성할 수 있는 다양한 라이브러리
- gd
- imagick
- exif

196


사진 합성
사진을 합성할 수 있는 다양한 라이브러리
- gd
- imagick
- exif

197


Imagick – 사진 불러오기

$imgTemplate = new Imagick;
$imgTemplate
->readImage("./배경.png");

198


Imagick – 사진 합성하기
$imgFriend->readImage(‘./친구사진.png’);
$imgTemplate
->compositeImage($imgFriend,
Imagick::COMPOSITE_OVER, X, Y);

200


Imagick – 사진 리사이징
$imgFriend
->resizeImage(X-Scale, Y-Scale,
Imagick::FILTER_TRIANGLE, 1);

201


Imagick – 글쓰기

$fontType = './폰트.ttf';

$font = new ImagickDraw();
$font->setFont($fontType);

203



$font->setTextEncoding('utf-8');
$font->setFontSize(22);
$font->setFillColor("#000000");
$font->setTextAntialias(true);

204


$font->setGravity(Imagick::GRAVITY_NORTHEAST);
$imgTemplate
->annotateImage($font, X, Y, angle,
“내용”);

205


Imagick – 사진 저장

$imgTemplate
->setImageFormat("jpeg");
$imgTemplate
->writeImage("./결과.jpeg");

206


Imagick – 최종 이미지

207



메인화면
이동 인 확인

내 정보

사진게시
생성 이동

208


사진 게시 /me/photos
POST

$photoId =
$facebook->api(‘/me/photos’, ‘POST’,
array( ‘source’ => ‘@’.이미지 주소,
‘message’ => 글
));

209


사진 게시 /me/photos
POST

$photoId =
‘message’ => 글,
„tags‟ => 태그 리스트,
));

210


사진에 태그

$tags[] = array(‘tag_uid’ => 사용자 ID,
‘x’ => 상대 비율 X 좌표,
‘y’ => 상대 비율 Y 좌표);

211



메인화면
이동 인 확인

내 정보

사진게시
생성 이동

212

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

$photoId =
‘message’ => 글,
‘tags’ => 태그 리스트,
));

213


올린 글 주소!!

https://www.facebook.com
/$photoId

214

페이스북 앱 개발 TIP

앱 정보

218


219


앱 정보 메뉴

220


앱에 대한 설명

221


다양한 언어 제공 가능

222


오픈 그래프 사용

223


개발자 메시지

224


Analytics 정보

225


다양한 정보들…

226


헤로쿠?

• 클라우드 웹 호스팅

• Git 시스템 기반

• 페이스북 앱과 바로 연동

• 매우 좋은 예제 제공
http://www.heroku.com/ 228


헤로쿠 사용시 기본 페이지

Page tab App
Website

Canvas App 229


페이스북 + 헤로쿠?

SSL 설정 기본 제공

230


페이스북 + 헤로쿠?

https, 보안 소켓 레이어
(Hypertext Transfer Protocol
over Secure Socket Layer)

231


SSL

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

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

232


SSL

233


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

PHP GD Library
jpeg 포맷 지원 X
Freetype 폰트 지원 X

234


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

235


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

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

https://developers.facebook.com/adproviders/


구글 애드센스 안됨


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

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

주제

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

이용희

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

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

More Related Content

What's hot

Viewers also liked

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

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