0
소셜 네트워크 앱 개발 서버-DB설계 등       허광남   kenu@okjsp.pe.kr
Part-1•   1. 소셜 네트워크 서비스 개요       •   4. 계정 연결과 타임라인 활용•   1.1 소셜 서비스의 특징          •   4.1 개발자 등록•   1.2 소셜 네트워크 효과       ...
Part-II•   1. 자바스크립트 소셜 지원 기능    •   3.2 OpenAPI로 글쓰고, 삭제하기    소개                          •   4. 페이스북과 트위터를 이용한•   1.1 정말...
소셜 네트워크 서비스      개요• 소셜 네트워크 서비스• Facebook• Twitter• me2day(korea)
특징• 쌍방향• 바이럴 전파
주요 기능• 타임라인 (로그인 후 메인페이지)• http://www.facebook.com/home.php• https://twitter.com
효과• 구전 효과: viral effect• 락인 효과: lock in effect• 수많은 날들의 기록• 개인, event, news 로그• 유유상종, 끼리끼리 네트워크
대표서비스 리뷰• 트위터• 페이스북• 카카오톡
http://pelfusion.com/twitter-2012-latest-statistics-infographic/
http://pelfusion.com/twitter-2012-latest-statistics-infographic/
http://pelfusion.com/twitter-2012-latest-statistics-infographic/
http://pelfusion.com/twitter-2012-latest-statistics-infographic/
http://infographiclabs.com/news/facebook-2012/
http://infographiclabs.com/news/facebook-2012/
http://infographiclabs.com/news/facebook-2012/
http://infographiclabs.com/news/facebook-2012/
http://infographiclabs.com/news/facebook-2012/
http://infographiclabs.com/news/facebook-2012/
http://infographiclabs.com/news/facebook-2012/
http://www.techinasia.com/kakaotalk-1000-infographic/
http://www.techinasia.com/kakaotalk-1000-infographic/
세계 최초• 직지심경: 세계 최초 금속 활자• 새한 MpMan: 세계 최초 MP3 플레이어• cyworld: 세계 최초 소셜 서비스
OAuth 인증의 이해• 2.1 회원 인증 정보의 공유• 2.2 사이트 정보의 공유• 2.3 인증 메커니즘
회원 인증 정보의 공유• A 사진 사이트• B 프린트 서비스 사이트• B 사이트에서 A 사이트의 사진 직접 이용?
Actor• A 사진 사이트• B 프린트 사이트• 사진을 인쇄하려는 A사이트 회원
사이트 정보의 공유• B에서 A에 있는 회원의 사진을 가져오는 방법
인증 메커니즘• B사이트에서 A사이트 로그인 팝업• A사이트 회원로그인• A사이트의 이용 정보 항목 확인• B사이트에 access_token 발급• access_token으로 A사이트 정보 획득
http://wiki.developerforce.com/page/Digging_Deeper_into_OAuth_2.0_on_Force.com
http://wiki.developerforce.com/page/Digging_Deeper_into_OAuth_2.0_on_Force.com
결과적으로• A 사이트에서 다운받아서 업로드할 필요 없음• B 사이트 회원가입하지 않아도 가능• B 사이트는 A사이트에서 제공하는 정보 저장
OAuth v1.0a   http://oauth.net/core/1.0/
http://dna.daum.net/apis/oauth/tutorial/basic_java_signpost
OAuth 2.0•   웹 애플리케이션이 아닌 애플리케이션 지원 강화•   암호화가 필요 없음•   HTTPS를 사용하고, HMAC을 사용하지 않음•   Signature 단순화•   정렬과 URL 인코딩이 필요 없음•...
Services with OAuth 2  37signals (draft 5)                         • Meetup• Box                                         •...
3. 트위터 OpenAPI 개요• 3.1 트위터 개발자 사이트• 3.2 인증키 생성과 활용 방법• 3.3 OpenAPI 개요
트위터 개발자 사이트• https://dev.twitter.com• My Applications
dev.twitter.com
인증키 생성과 활용 방법• Create Application• Consumer Key• Consumer Secret• Access Token• Access Token Secret
트위터 OpenAPI 개요•   Timelines             •   Favorites•   Tweets                •   Lists•   Search                •   Save...
statuses/user_timelinecurl --get https://api.twitter.com/1.1/statuses/user_timeline.json --datacount=2&screen_name=twitter...
statuses/updatecurl --request POST https://api.twitter.com/1.1/statuses/update.json --data status=Maybe+he%27ll+finally+fi...
/statuses/destroy/300903768550170624curl --request POST https://api.twitter.com/1.1/statuses/destroy/300903768550170624.js...
4. 계정 연결과 타임라인       활용• 4.1 개발자 등록• 4.2 웹을 이용한 인증• 4.3 타임라인 가져오기• 4.4 타임라인 쓰기
개발자 등록• https://dev.twitter.com/
개발 도구• curl• windows curl in git bash• jsbeautifier.org
git-scm.com
jsbeatifier.org
웹을 이용한 인증curl --get https://api.twitter.com/1.1/statuses/user_timeline.json --datacount=2&screen_name=twitterapi --headerA...
curlcurl--get https://api.twitter.com/1.1/statuses/user_timeline.json--data count=2&screen_name=twitterapi--header Authori...
타임라인 가져오기
statuses/user_timelinecurl --get https://api.twitter.com/1.1/statuses/user_timeline.json --datacount=2&screen_name=twitter...
twitter.com/twitterapi
타임라인 쓰기
statuses/updatecurl --request POST https://api.twitter.com/1.1/statuses/update.json --data status=Maybe+he%27ll+finally+fi...
twitter.com/okgwt
5. 소셜 댓글 메커니즘• 5.1 소셜 댓글의 효과• 5.2 소셜 네트워크 댓글 서비스• 5.3 소셜 댓글 관리
소셜 댓글의 효과• 댓글 시스템• 실명제를 통한 악플 -> 효과 없음• SNS 소셜 댓글
소셜 네트워크 댓글 서비스
소셜 댓글 관리
DB 설계와 적용• 6.1 소셜 댓글의 DB 활용• 6.2 소셜 댓글 CRUD
소셜 댓글의 DB 활용• 백업• 캐싱
소셜 댓글 CRUD• add > insert into• get > select from• update > update• delete > delete from
Part-II
Part-II•   1. 자바스크립트 소셜 지원 기능    •   3.2 OpenAPI로 글쓰고, 삭제하기    소개                          •   4. 페이스북과 트위터를 이용한•   1.1 정말...
자바스크립트 소셜 지원   기능 소개• 1.1 정말 쉬운 자바스크립트 소셜 기능• 1.2 자바스크립트 API 연습
정말 쉬운 자바스크립트    소셜 기능
자바스크립트 API 연습
페이스북 OpenAPI 개요• 2.1 페이스북 OpenAPI 개요• 2.2 페이스북 OAuth 인증
페이스북 OpenAPI 개요iOS   Android                      Web          Games        https://developers.facebook.com/docs/
페이스북 Loginhttp://developers.facebook.com/docs/concepts/login/login-architecture/
페이스북 계정 연결• 3.1 페이스북 개발자 계정 생성• 3.2 OpenAPI로 글쓰고, 삭제하기
페이스북 개발자 계정 생성 https://developers.facebook.com/settings?tab=developer&section=devprofile&view
OpenAPI로 글쓰고, 삭제    https://developers.facebook.com/docs/reference/api/
페이스북과 트위터를 이  용한 댓글 구현• 4.1 소셜 댓글 구현하기
소셜 댓글 구현하기
서버를 이용한 소셜 앱     설계• 5.1 서버를 활용한 서비스 설계• 5.2 서버 활용 소셜 앱 구현
서버를 활용한 서비스 설계
서버 활용 소셜 앱 구현
Javascript SDK<div id="fb-root"></div><script>  // Additional JS functions here  window.fbAsyncInit = function() {    FB.i...
Javascript SDK// Load the SDK Asynchronously(function(d){  var js, id = facebook-jssdk, ref = d.getElementsByTagName(scrip...
Javascript SDK    FB.getLoginStatus(function(response) {!     if (response.status === connected) {!       // connected!   ...
Javascript SDKfunction login() {  FB.login(function(response) {      if (response.authResponse) {          // connected   ...
카카오톡 OpenAPI• 6.1 하트, 날개 날리기• 6.2 소셜 메시징을 통한 앱 연결
하트, 날개 날리기"kakaolink://sendurl?msg=%EC%B9%B4%EC%B9%B4%EC%98%A4%EB%A7%81%ED%81%AC%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EC...
소셜 메시징을 통한 앱 연결
Facebook dev
감사합니다
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
소셜 네트워크 앱 개발
Upcoming SlideShare
Loading in...5
×

소셜 네트워크 앱 개발

1,226

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,226
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "소셜 네트워크 앱 개발"

  1. 1. 소셜 네트워크 앱 개발 서버-DB설계 등 허광남 kenu@okjsp.pe.kr
  2. 2. Part-1• 1. 소셜 네트워크 서비스 개요 • 4. 계정 연결과 타임라인 활용• 1.1 소셜 서비스의 특징 • 4.1 개발자 등록• 1.2 소셜 네트워크 효과 • 4.2 웹을 이용한 인증• 1.3 SNS 대표 서비스 리뷰 • 4.3 타임라인 가져오기• 2. OAuth 인증의 이해 • 4.4 타임라인 쓰기• 2.1 회원 인증 정보의 공유 • 5. 소셜 댓글 메커니즘• 2.2 사이트 정보의 공유 • 5.1 소셜 댓글의 효과• 2.3 인증 메커니즘 • 5.2 소셜 네트워크 댓글 서비스• 3. 트위터 OpenAPI 개요 • 5.3 소셜 댓글 관리• 3.1 트위터 개발자 사이트 • 6. DB 설계와 적용• 3.2 인증키 생성과 활용 방법 • 6.1 소셜 댓글의 DB 활용• 3.3 OpenAPI 개요 • 6.2 소셜 댓글 CRUD
  3. 3. Part-II• 1. 자바스크립트 소셜 지원 기능 • 3.2 OpenAPI로 글쓰고, 삭제하기 소개 • 4. 페이스북과 트위터를 이용한• 1.1 정말 쉬운 자바스크립트 소셜 댓글 구현 기능 • 4.1 소셜 댓글 구현하기• 1.2 자바스크립트 API 연습 • 5. 서버를 이용한 소셜 앱 설계• 2. 페이스북 OpenAPI 개요 • 5.1 서버를 활용한 서비스 설계• 2.1 페이스북 OpenAPI 개요 • 5.2 서버 활용 소셜 앱 구현• 2.2 페이스북 OAuth 인증 • 6. 카카오톡 OpenAPI• 3. 페이스북 계정 연결 • 6.1 하트, 날개 날리기• 3.1 페이스북 개발자 계정 생성 • 6.2 소셜 메시징을 통한 앱 연결
  4. 4. 소셜 네트워크 서비스 개요• 소셜 네트워크 서비스• Facebook• Twitter• me2day(korea)
  5. 5. 특징• 쌍방향• 바이럴 전파
  6. 6. 주요 기능• 타임라인 (로그인 후 메인페이지)• http://www.facebook.com/home.php• https://twitter.com
  7. 7. 효과• 구전 효과: viral effect• 락인 효과: lock in effect• 수많은 날들의 기록• 개인, event, news 로그• 유유상종, 끼리끼리 네트워크
  8. 8. 대표서비스 리뷰• 트위터• 페이스북• 카카오톡
  9. 9. http://pelfusion.com/twitter-2012-latest-statistics-infographic/
  10. 10. http://pelfusion.com/twitter-2012-latest-statistics-infographic/
  11. 11. http://pelfusion.com/twitter-2012-latest-statistics-infographic/
  12. 12. http://pelfusion.com/twitter-2012-latest-statistics-infographic/
  13. 13. http://infographiclabs.com/news/facebook-2012/
  14. 14. http://infographiclabs.com/news/facebook-2012/
  15. 15. http://infographiclabs.com/news/facebook-2012/
  16. 16. http://infographiclabs.com/news/facebook-2012/
  17. 17. http://infographiclabs.com/news/facebook-2012/
  18. 18. http://infographiclabs.com/news/facebook-2012/
  19. 19. http://infographiclabs.com/news/facebook-2012/
  20. 20. http://www.techinasia.com/kakaotalk-1000-infographic/
  21. 21. http://www.techinasia.com/kakaotalk-1000-infographic/
  22. 22. 세계 최초• 직지심경: 세계 최초 금속 활자• 새한 MpMan: 세계 최초 MP3 플레이어• cyworld: 세계 최초 소셜 서비스
  23. 23. OAuth 인증의 이해• 2.1 회원 인증 정보의 공유• 2.2 사이트 정보의 공유• 2.3 인증 메커니즘
  24. 24. 회원 인증 정보의 공유• A 사진 사이트• B 프린트 서비스 사이트• B 사이트에서 A 사이트의 사진 직접 이용?
  25. 25. Actor• A 사진 사이트• B 프린트 사이트• 사진을 인쇄하려는 A사이트 회원
  26. 26. 사이트 정보의 공유• B에서 A에 있는 회원의 사진을 가져오는 방법
  27. 27. 인증 메커니즘• B사이트에서 A사이트 로그인 팝업• A사이트 회원로그인• A사이트의 이용 정보 항목 확인• B사이트에 access_token 발급• access_token으로 A사이트 정보 획득
  28. 28. http://wiki.developerforce.com/page/Digging_Deeper_into_OAuth_2.0_on_Force.com
  29. 29. http://wiki.developerforce.com/page/Digging_Deeper_into_OAuth_2.0_on_Force.com
  30. 30. 결과적으로• A 사이트에서 다운받아서 업로드할 필요 없음• B 사이트 회원가입하지 않아도 가능• B 사이트는 A사이트에서 제공하는 정보 저장
  31. 31. OAuth v1.0a http://oauth.net/core/1.0/
  32. 32. http://dna.daum.net/apis/oauth/tutorial/basic_java_signpost
  33. 33. OAuth 2.0• 웹 애플리케이션이 아닌 애플리케이션 지원 강화• 암호화가 필요 없음• HTTPS를 사용하고, HMAC을 사용하지 않음• Signature 단순화• 정렬과 URL 인코딩이 필요 없음• Access Token 갱신• OAuth 1.0에서 Access Token을 받으면 그것을 계속 사용 가능. 트위터의 경우에는 Access Token을 만료시키지 않음. OAuth 2.0에서는 보안 강화를 위해 Access Token의 Life-time 지정 가능. http://helloworld.naver.com/helloworld/24942
  34. 34. Services with OAuth 2 37signals (draft 5) • Meetup• Box • Salesforce• Facebooks Graph • SoundCloud API (see sociallipstick.com/?p=239) • Do.com (draft 22)• Foursquare • Windows Live• Geoloqi• GitHub• Google http://oauth.net/2/
  35. 35. 3. 트위터 OpenAPI 개요• 3.1 트위터 개발자 사이트• 3.2 인증키 생성과 활용 방법• 3.3 OpenAPI 개요
  36. 36. 트위터 개발자 사이트• https://dev.twitter.com• My Applications
  37. 37. dev.twitter.com
  38. 38. 인증키 생성과 활용 방법• Create Application• Consumer Key• Consumer Secret• Access Token• Access Token Secret
  39. 39. 트위터 OpenAPI 개요• Timelines • Favorites• Tweets • Lists• Search • Saved Searches• Streaming • Places & Geo• Direct messages • Trends• Friends & Followers • Spam Reporting• Users • OAuth• Suggested Users • Help
  40. 40. statuses/user_timelinecurl --get https://api.twitter.com/1.1/statuses/user_timeline.json --datacount=2&screen_name=twitterapi --headerAuthorization: OAuthoauth_consumer_key="Pfez4jbyKgO4j9cOhjgfhw",oauth_nonce="1475676e4940625a66e873cfca908b2a",oauth_signature="cdP8NK%2F6bM8ir8kzpU8Rt8wKEgw%3D", oauth_signature_method="HMAC-SHA1",oauth_timestamp="1360570565",oauth_token="1168169378-vPSrQFBB89hjKLdBKdTauTwpBrtwRQhlX1CPUd9",oauth_version="1.0" --verbose
  41. 41. statuses/updatecurl --request POST https://api.twitter.com/1.1/statuses/update.json --data status=Maybe+he%27ll+finally+find+his+keys.+%23peterfalk--header Authorization: OAuthoauth_consumer_key="Pfez4jbyKgO4j9cOhjgfhw",oauth_nonce="ee5a9bece9395afe0c9e583a1716b288",oauth_signature="T0ndBmF8fYkf6ZxnKP7Xq22%2Bw20%3D", oauth_signature_method="HMAC-SHA1",oauth_timestamp="1360575909",oauth_token="1168169378-TuOqLdaQZV9G2Zb57pXQeu8A6zAGV5jSrV6E0Wt",oauth_version="1.0" --verbose
  42. 42. /statuses/destroy/300903768550170624curl --request POST https://api.twitter.com/1.1/statuses/destroy/300903768550170624.json--header Authorization: OAuthoauth_consumer_key="Pfez4jbyKgO4j9cOhjgfhw",oauth_nonce="27228c7d49f9d35e0610a4a88911df64",oauth_signature="ssVCgmDjZzynFIwe7IfySvjYBO8%3D", oauth_signature_method="HMAC-SHA1",oauth_timestamp="1360608274",oauth_token="1168169378-TuOqLdaQZV9G2Zb57pXQeu8A6zAGV5jSrV6E0Wt",oauth_version="1.0" --verbose
  43. 43. 4. 계정 연결과 타임라인 활용• 4.1 개발자 등록• 4.2 웹을 이용한 인증• 4.3 타임라인 가져오기• 4.4 타임라인 쓰기
  44. 44. 개발자 등록• https://dev.twitter.com/
  45. 45. 개발 도구• curl• windows curl in git bash• jsbeautifier.org
  46. 46. git-scm.com
  47. 47. jsbeatifier.org
  48. 48. 웹을 이용한 인증curl --get https://api.twitter.com/1.1/statuses/user_timeline.json --datacount=2&screen_name=twitterapi --headerAuthorization: OAuthoauth_consumer_key="Pfez4jbyKgO4j9cOhjgfhw",oauth_nonce="1475676e4940625a66e873cfca908b2a",oauth_signature="cdP8NK%2F6bM8ir8kzpU8Rt8wKEgw%3D", oauth_signature_method="HMAC-SHA1",oauth_timestamp="1360570565",oauth_token="1168169378-vPSrQFBB89hjKLdBKdTauTwpBrtwRQhlX1CPUd9",oauth_version="1.0" --verbose
  49. 49. curlcurl--get https://api.twitter.com/1.1/statuses/user_timeline.json--data count=2&screen_name=twitterapi--header Authorization: OAuthoauth_consumer_key="Pfez4jbyKgO4j9cOhjgfhw",oauth_nonce="1475676e4940625a66e873cfca908b2a",oauth_signature="cdP8NK%2F6bM8ir8kzpU8Rt8wKEgw%3D",oauth_signature_method="HMAC-SHA1",oauth_timestamp="1360570565",oauth_token="1168169378-vPSrQFBB89hjKLdBKdTauTwpBrtwRQhlX1CPUd9",oauth_version="1.0" --verbose
  50. 50. 타임라인 가져오기
  51. 51. statuses/user_timelinecurl --get https://api.twitter.com/1.1/statuses/user_timeline.json --datacount=2&screen_name=twitterapi --headerAuthorization: OAuthoauth_consumer_key="Pfez4jbyKgO4j9cOhjgfhw",oauth_nonce="1475676e4940625a66e873cfca908b2a",oauth_signature="cdP8NK%2F6bM8ir8kzpU8Rt8wKEgw%3D", oauth_signature_method="HMAC-SHA1",oauth_timestamp="1360570565",oauth_token="1168169378-vPSrQFBB89hjKLdBKdTauTwpBrtwRQhlX1CPUd9",oauth_version="1.0" --verbose
  52. 52. twitter.com/twitterapi
  53. 53. 타임라인 쓰기
  54. 54. statuses/updatecurl --request POST https://api.twitter.com/1.1/statuses/update.json --data status=Maybe+he%27ll+finally+find+his+keys.+%23peterfalk--header Authorization: OAuthoauth_consumer_key="Pfez4jbyKgO4j9cOhjgfhw",oauth_nonce="ee5a9bece9395afe0c9e583a1716b288",oauth_signature="T0ndBmF8fYkf6ZxnKP7Xq22%2Bw20%3D", oauth_signature_method="HMAC-SHA1",oauth_timestamp="1360575909",oauth_token="1168169378-TuOqLdaQZV9G2Zb57pXQeu8A6zAGV5jSrV6E0Wt",oauth_version="1.0" --verbose
  55. 55. twitter.com/okgwt
  56. 56. 5. 소셜 댓글 메커니즘• 5.1 소셜 댓글의 효과• 5.2 소셜 네트워크 댓글 서비스• 5.3 소셜 댓글 관리
  57. 57. 소셜 댓글의 효과• 댓글 시스템• 실명제를 통한 악플 -> 효과 없음• SNS 소셜 댓글
  58. 58. 소셜 네트워크 댓글 서비스
  59. 59. 소셜 댓글 관리
  60. 60. DB 설계와 적용• 6.1 소셜 댓글의 DB 활용• 6.2 소셜 댓글 CRUD
  61. 61. 소셜 댓글의 DB 활용• 백업• 캐싱
  62. 62. 소셜 댓글 CRUD• add > insert into• get > select from• update > update• delete > delete from
  63. 63. Part-II
  64. 64. Part-II• 1. 자바스크립트 소셜 지원 기능 • 3.2 OpenAPI로 글쓰고, 삭제하기 소개 • 4. 페이스북과 트위터를 이용한• 1.1 정말 쉬운 자바스크립트 소셜 댓글 구현 기능 • 4.1 소셜 댓글 구현하기• 1.2 자바스크립트 API 연습 • 5. 서버를 이용한 소셜 앱 설계• 2. 페이스북 OpenAPI 개요 • 5.1 서버를 활용한 서비스 설계• 2.1 페이스북 OpenAPI 개요 • 5.2 서버 활용 소셜 앱 구현• 2.2 페이스북 OAuth 인증 • 6. 카카오톡 OpenAPI• 3. 페이스북 계정 연결 • 6.1 하트, 날개 날리기• 3.1 페이스북 개발자 계정 생성 • 6.2 소셜 메시징을 통한 앱 연결
  65. 65. 자바스크립트 소셜 지원 기능 소개• 1.1 정말 쉬운 자바스크립트 소셜 기능• 1.2 자바스크립트 API 연습
  66. 66. 정말 쉬운 자바스크립트 소셜 기능
  67. 67. 자바스크립트 API 연습
  68. 68. 페이스북 OpenAPI 개요• 2.1 페이스북 OpenAPI 개요• 2.2 페이스북 OAuth 인증
  69. 69. 페이스북 OpenAPI 개요iOS Android Web Games https://developers.facebook.com/docs/
  70. 70. 페이스북 Loginhttp://developers.facebook.com/docs/concepts/login/login-architecture/
  71. 71. 페이스북 계정 연결• 3.1 페이스북 개발자 계정 생성• 3.2 OpenAPI로 글쓰고, 삭제하기
  72. 72. 페이스북 개발자 계정 생성 https://developers.facebook.com/settings?tab=developer&section=devprofile&view
  73. 73. OpenAPI로 글쓰고, 삭제 https://developers.facebook.com/docs/reference/api/
  74. 74. 페이스북과 트위터를 이 용한 댓글 구현• 4.1 소셜 댓글 구현하기
  75. 75. 소셜 댓글 구현하기
  76. 76. 서버를 이용한 소셜 앱 설계• 5.1 서버를 활용한 서비스 설계• 5.2 서버 활용 소셜 앱 구현
  77. 77. 서버를 활용한 서비스 설계
  78. 78. 서버 활용 소셜 앱 구현
  79. 79. Javascript SDK<div id="fb-root"></div><script> // Additional JS functions here window.fbAsyncInit = function() { FB.init({ appId : 500542936664035, // App ID channelUrl : //stark-tundra-9561.herokuapp.com/channel.html, status : true, // check login status cookie : true, // enable cookies to allow server session xfbml : true // parse XFBML }); FB.getLoginStatus(function(response) {! if (response.status === connected) {! // connected! } else if (response.status === not_authorized) {! // not_authorized! } else {! // not_logged_in! }! }); };</script>
  80. 80. Javascript SDK// Load the SDK Asynchronously(function(d){ var js, id = facebook-jssdk, ref = d.getElementsByTagName(script)[0]; if (d.getElementById(id)) {return;} js = d.createElement(script); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref);}(document));
  81. 81. Javascript SDK FB.getLoginStatus(function(response) {! if (response.status === connected) {! // connected! testAPI();! console.log(connected);! } else if (response.status === not_authorized) {! // not_authorized! login();! console.log(not_authorized);! } else {! // not_logged_in! login();! console.log(not_logged_in);! }! });
  82. 82. Javascript SDKfunction login() { FB.login(function(response) { if (response.authResponse) { // connected } else { // cancelled } });}function testAPI() { console.log(Welcome! Fetching your information.... ); FB.api(/me, function(response) { console.log(Good to see you, + response.name + .); });}
  83. 83. 카카오톡 OpenAPI• 6.1 하트, 날개 날리기• 6.2 소셜 메시징을 통한 앱 연결
  84. 84. 하트, 날개 날리기"kakaolink://sendurl?msg=%EC%B9%B4%EC%B9%B4%EC%98%A4%EB%A7%81%ED%81%AC%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC%20%EB%A9%94%EC%84%B8%EC%A7%80%EB%A5%BC%20%EC%A0%84%EB%8B%AC%ED%95%B4%EB%B3%B4%EC%84%B8%EC%9A%94.%3B&url=http%3A%2F%2Flink.kakao.com&appid=m.kakao.com&appver=2.0&appname=%EC%B9%B4%EC%B9%B4%EC%98%A4&type=link&apiver=2.0.1"
  85. 85. 소셜 메시징을 통한 앱 연결
  86. 86. Facebook dev
  87. 87. 감사합니다
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×