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

하루 안에

페이스북 웹 앱 만들기

이용희

주제

발표자료 안내

발표자료http://slidesha.re/Y5h-

강의 예시 웹 앱http://on.fb.me/WUJl1o

2009.12

페이스북 가입

발표자 소개

6페이스북 시작

2011.9

발표자 소개

7페이스북 개발 시작

2011.12

발표자 소개

2012.1~32012.7~9

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

발표자 소개

2012.3

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

발표자 소개

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

2012.4~7

발표자 소개

꿀 같은 휴식 ...

놀 자 !!

HACKATHON

발표자 소개

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

2012.72013.1~3

발표자 소개

㈜ 아울네스트 대표이사http://owlnest.kr

Best of Best ,Best of Social2012 Facebook Mobile Hack – Seoul

페이스북 웹 앱 개발2013.01~03 월간 마이크로소프트웨어

소셜 큐레이션 서비스 개발2012.07~09 월간 마이크로소프트웨어

이용희 nekians@g-

mail.com

발표자 소개

강의 목표

강의 소개

http://on.fb.me/WUJl1o

강의 소개

Generat-ing...

강의 소개

• 좋아요• 내 정보• 친구 리스트• 사진• 사진 게시• 태그

캔버스 앱 & 페이지 탭 앱

강의 소개

어때요 , 참 쉽죠 ?

강의 소개

하루

24 시간

얼마나 걸릴지 모르면 일찍 퇴근하는 것이 답입니다 .

다음날 열심히 하면 되겠죠 ? 안되면 ? 또 다음날… . 안되면 ? 야근………

근로기준법 제 50 조 ( 근로시간 ), 2 항

1 일의 근로시간은 휴게시간을 제외하고 8 시간을 초과할 수 없다 .

8 시간

일을 하다 보면 조금 더 할 것 같아서 남게 될 때가 있죠 ?

회사에서 주는 밥과 함께 야근을 할 시간입니다 .

12 시간

?? 시간 (24

시간▲ )

웹에 대한 기본이 없으면 하루 안에는 안돼요… .

들어만 봤다면 이젠 찾아보고 공부해야 할 때입니다 .

강의 소개

하루

강의 소개

90▲ 70▲

50▲ 50▼

하루

근로기준법 제 50 조 ( 근로시간 ), 2 항

1 일의 근로시간은 휴게시간을 제외하고 8 시간을 초과할 수 없다 .

8 시간

일을 하다 보면 조금 더 할 것 같아서 남게 될 때가 있죠 ?

회사에서 주는 밥과 함께 야근을 할 시간입니다 .

12 시간

24 시간

얼마나 걸릴지 모르면 일찍 퇴근하는 것이 답입니다 .

다음날 열심히 하면 되겠죠 ? 안되면 ? 또 다음날… . 안되면 ? 야근………

?? 시간 (24

시간▲ )

웹에 대한 기본이 없으면 하루 안에는 안돼요… .

들어만 봤다면 이젠 찾아보고 공부해야 할 때입니다 .

강의 소개

OpenAPI

JavaScrip

레벨 테스트

스스로 평가 해보세요 !

강의 소개

10 점

30 점

강의 소개

100 점

80 점

초롱초롱한 눈빛으로 !!

강의 소개

•페이스북의 가능성

•페이스북 오픈 플랫폼

•페이스북 개발 & TIP

가능성

1Billion users

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

페이스북의 가능성

70 억 24 억

페이스북 (Facebook)

한달1 억명

하루6 천만명

플랫폼 (Platform)

강의 소개

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

하나의 구조를 활용하여 ,

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

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

1billion users

페이스북 앱 (Facebook App)

Face-book

무한의 가능성 !!!

오픈 플랫폼

Plugins Dialog GraphPayments

LoginGraph

Social Open

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

페이스북 오픈 플랫폼

LoginGraph

Social Open

소셜 플러그인 (Social Plugins)

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

• Like Button

• Comments

창 (Dialog)

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

LoginGraph

Social Open

오픈 그래프 (Open Graph )

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

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

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

• Article

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

LoginGraph

Social Open

결제 (Payments)

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

LoginGraph

Social Open

Open API

GraphAPI / FQL

GraphAPI

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

LoginGraph

Social Open

• 웹 사이트 with 페이스북

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

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

페이스북 앱

페이스북 앱 형태

Pinterest – 로그인 (Login)

페이스북 앱

Shopping Mall – 웹 앱 (Web App)

페이스북 앱

Tetris Battle – 캔버스 앱 (Canvas App)

페이스북 앱

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

페이스북 앱

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

페이스북 앱

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

페이스북 앱

Curing – 모바일 앱 (Mobile App)

페이스북 앱

Curing – 모바일 앱 (Mobile App)

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

http://youtu.be/9ci1yOvWXeg

페이스북 앱

웹 앱 개발

페이스북 웹 앱 개발

왜 , 웹 앱인가요 ??

기본 높은접근성 쉬움

어떤 웹 앱을 만들건가요 ?

캔버스 앱

페이지탭 앱

어떤 웹 앱을 만들건가요 ?> 캔버스 앱

어떤 웹 앱을 만들건가요 ?> 페이지 탭 앱

캔버스 앱 페이지 탭 앱

노출을 위해

좋아요를위해

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

무엇을 만들건가요 ??

강의 소개

다시 정리하고 가자• 페이스북 웹 앱–캔버스 앱–페이지 탭 앱

• 좋아요• 내 정보• 친구 리스트• 사진 합성• 사진 게시• 태그

개발자 등록하기

새 앱 만들기

웹 앱 설정하기

페이지 필요

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

원하는 걸로

웹 앱 설정하기http://www.facebook.com/dialog/pagetab

?app_id=YOUR_APP_ID&next=YOUR_URL

어떻게 개발하지 ?

그래프 (Graph) API

FQL (Facebook Query Language)

• http://developers.facebook.com/tools/ex-plorer

그래프 (Graph) API Explorer

/100000525744525?fields=id,name

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

그래프 (Graph) API – GRAPH API CODE

그래프 (Graph) API

• 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

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

{ "data": [ { "uid": 100000525744525,

"name": "YongHui Lee“} ]

• 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

•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/

• https://github.com/facebook/facebook-php-sdk

Facebook PHP SDK

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

Facebook Javascript SDK

PHP vs JavaScript

Server side Client side …

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

• 하나의 앱에서 하나의 IP600 초 동안 600 번 이상의 호출 금지

• 500 만 MAU( 한 달간 사용하는 유저의 수 ), 하루 100 만 API 호출 , 하루 50 만 노출

페이스북 API 제한

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

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

600 초당 150 명하루 21600 명

한달 648000 명

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

사용 과정이 깔끔하게

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

강의 소개

Loading…& Like Check

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

강의 소개

Loading…

강의 소개

Like Check

• PHP–Server side–대부분의 API

• Javascript –Client side–로그인• PHP 에선

번거로운 작업

SDK 활용 범위

페이스북 웹 앱 개발 ㆍ 이제 진짜로 개발하자 !!!!

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

개발 , Right now!

페이지이동

앱 허가 확인

좋아요 확인 메인화면

내 정보친구리스트

컨텐츠처리

프로필사진 다운

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

이동

페이지이동

앱 허가 확인

컨텐츠처리

이동

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

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

Redirect

페이지이동

앱 허가 확인

컨텐츠처리

이동

Facebook Login

로그인 상태 체크

진행

로그인 유도

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

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

With Javascript SDK

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

// additional code});

페이지이동

앱 허가 확인

컨텐츠처리

이동

require_once(‘facebook.php');

Facebook PHP SDK

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

Facebook PHP SDK

$Id =$facebook->getUser()

0 : not log inElse : user’s id

Facebook Login

$facebook->api(‘GRAPH_API_CODE‘)

Facebook PHP SDK

Graph API 로는 좋아요 페이지 리스트 타겟 페이지가 확인

FQL 로는 좋아요 페이지 리스트

중에서 타겟 리스트가 있는지 확인

주고 받는 데이터 양이 줄어듬

Facebook PHP SDK

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" }, {……

True or false

Facebook PHP SDK

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

Facebook PHP SDK

FQL 로는$facebook->api(array(

‘method’=>’fql.query’, ‘query’ => ‘FQL ‘));

Facebook PHP SDK

$facebook->api(array( 'method' => 'fql.query', 'query' => "SELECT page_id

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

Facebook PHP SDK

SELECT page_idFROM page_fanWHERE uid=$user_id

and page_id=245971252189546;

Facebook PHP SDK

페이지이동

앱 허가 확인

컨텐츠처리

이동

강의 소개

Generat-ing…

페이지이동

앱 허가 확인

컨텐츠처리

이동

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

내 정보

$facebook->api(‘GRAPH_API_CODE‘)$data = $facebook->api(‘/me‘)

Facebook PHP SDK

$name = $data[‘name’];

{ "id": "100000525744525",

"name": "YongHui Lee",

"first_name": "YongHui",

"last_name": "Lee",

Facebook PHP SDK

페이지이동

앱 허가 확인

컨텐츠처리

이동

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

친구 리스트

$facebook->api(‘GRAPH_API_CODE‘)$data = $facebook->api(‘/me/friends‘)

Facebook PHP SDK

$friend1name = $data[0][‘name’];{ "data": [ { "name": “friends1", "id": “00000000" }, ….

Facebook PHP SDK

페이지이동

앱 허가 확인

컨텐츠처리

이동

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

페이지이동

앱 허가 확인

컨텐츠처리

이동

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

사진

$facebook->api(‘GRAPH_API_CODE‘)$data = $facebook->api(‘ID/picture‘)

Facebook PHP SDK

$photoUrl = $data[‘url’];{ "data": { "url": “http://~", "is_silhouette": false }}

Facebook PHP SDK

https://graph.facebook.com/ID/pic-ture

Redirect 되는 URL 이 존재

실제 URL 을 통해서 사진 다운

PHP 에서 접근하긴 어려움

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

$photoUrl=“https://graph.facebook.com/ID/picture”;

$downloader = new sfFacebookPhoto;

$photoRealUrl = $downloader-

>getReadUrl($phptoUrl);

$downloader->download($photoRealUrl);

sfFacebookPhoto

다운받는 파일 경로 설정 부분에서

$return 에 원하는 경로를 넣으면 된다 .

sfFacebookPhoto

public function download($fileName) {…

// 기존 소스에서 경로 설정하는 부분

$return = sfConfig::get('sf_upload_dir') .

'/tmp/' . uniqid('fbphoto') . '.' . $ext;…

sfFacebookPhoto

페이지이동

앱 허가 확인

컨텐츠처리

이동

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

사진 합성

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

사진 합성

http://php.net/manual/en/book.imagick.php

$imgTemplate = new Imagick;$imgTemplate

->readImage("./ 배경 .png");

Imagick – 사진 불러오기

http://www.php.net/manual/en/imagick.readimage.php

$imgFriend->readImage(‘./ 친구사진 .png’);$imgTemplate

->compositeImage($imgFriend, Imagick::COMPOSITE_OVER, X, Y);

Imagick – 사진 합성하기

http://www.php.net/manual/en/imagick.compositeimage.php

$imgFriend->resizeImage(X-Scale, Y-Scale, Imagick::FILTER_TRIANGLE, 1);

Imagick – 사진 리사이징

http://www.php.net/manual/en/imagick.resizeimage.php

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

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

Imagick – 글쓰기

http://www.php.net/manual/en/class.imagickdraw.php

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

$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

$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

Imagick – 최종 이미지

페이지이동

앱 허가 확인

컨텐츠처리

이동

/me/photosPOST

사진 게시

$photoId =$facebook->api(‘/me/photos’,

‘POST’,array( ‘source’ => ‘@’. 이미지

주소 ,‘message’ => 글));

/me/photosPOST

사진 태그

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

사진 태그

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

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

페이지이동

앱 허가 확인

컨텐츠처리

이동

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

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

올린 글 주소 !!

https://www.facebook.com

/$photoId

강의 소개

앱 개발 TIP

앱 정보

페이스북 앱 개발 TIP

앱 정보

앱 정보 메뉴

앱에 대한 설명

다양한 언어 제공 가능

오픈 그래프 사용

개발자 메시지

Analytics 정보

다양한 정보들…

Heroku

• 클라우드 웹 호스팅

• Git 시스템 기반

• 페이스북 앱과 바로 연동

• 매우 좋은 예제 제공

헤로쿠 ?

http://www.heroku.com/

헤로쿠 사용시 기본 페이지

Website

Canvas App

Page tab App

SSL 설정 기본 제공

페이스북 + 헤로쿠 ?

https, 보안 소켓 레이어

(Hypertext Transfer Proto-

col over Secure Socket

Layer)

페이스북 + 헤로쿠 ?

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

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

• 데이터베이스 5MB 무료

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

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

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

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

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

헤로쿠 과금

PHP GD Libraryjpeg 포맷 지원 X

Freetype 폰트 지원 X

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

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

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

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

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

구글 애드센스 안됨

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

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

245nekians@gmail.com

THANK YOU

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

이용희

주제

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

Documents

[언론]페이스북 마케팅2

페이스북 앱탭 만들기

2010 하루 하나

페이스북,트위터기능 (1)

[발표] 플랫폼으로서의 페이스북

라이브리 소셜리포트...1월호 라이브리 소셜리포트 페이스북 페이지 전성기 페이스북, 가장 중요한 브랜드 채널 : 페이스북 페이지는 기업이

페이스북 타임라인_적용_가이드_공유

㈜로그 페이스북 광고114.108.136.212/download/snslog_service_info.pdf · ㈜로그 페이스북 광고는 모두 가능합니다! (주)로그 페이스북 광고의 차별화

페이스북 알아두면 편리한 기능

“나는 하루 수고하면 되지만 이들은 새로운 삶을 위한 …...“나는 하루 수고하면 되지만 이들은 새로운 삶을 위한 절박한 시간입니다”

페이스북 타임라인 적용하기

구미 하루 140516

손 안에 담기는 건축미학

개실마을에서의 하루 - Visit Koreatong.visitkorea.or.kr/upload/hanok/data/travel_15.pdf · 개실마을에서의 하루 소중한 문화유산이 많은 개실마을은 민속자료

[발표] 페이스북, 기업마케팅 활용비법

페이스북 API 사용방법

페이스북 SDK 사용방법

페이스북 캐리비안베이

1508 페이스북 강의1이용원

페이스북 소통 Tip & 유틸리티