소셜 네트워크 앱 개발

소셜 네트워크 앱 개발서버-DB설계 등

허광남[email protected]

Part-1• 1. 소셜 네트워크 서비스 개요

• 1.1 소셜 서비스의 특징

• 1.2 소셜 네트워크 효과

• 1.3 SNS 대표 서비스 리뷰

• 2. OAuth 인증의 이해

• 2.1 회원 인증 정보의 공유

• 2.2 사이트 정보의 공유

• 2.3 인증 메커니즘

• 3. 트위터 OpenAPI 개요

• 3.1 트위터 개발자 사이트

• 3.2 인증키 생성과 활용 방법

• 3.3 OpenAPI 개요

• 4. 계정 연결과 타임라인 활용

• 4.1 개발자 등록

• 4.2 웹을 이용한 인증

• 4.3 타임라인 가져오기

• 4.4 타임라인 쓰기

• 5. 소셜 댓글 메커니즘

• 5.1 소셜 댓글의 효과

• 5.2 소셜 네트워크 댓글 서비스

• 5.3 소셜 댓글 관리

• 6. DB 설계와 적용

• 6.1 소셜 댓글의 DB 활용

• 6.2 소셜 댓글 CRUD

Part-II

• 1. 자바스크립트 소셜 지원 기능 소개

• 1.1 정말 쉬운 자바스크립트 소셜 기능

• 1.2 자바스크립트 API 연습

• 2. 페이스북 OpenAPI 개요

• 2.1 페이스북 OpenAPI 개요

• 2.2 페이스북 OAuth 인증

• 3. 페이스북 계정 연결

• 3.1 페이스북 개발자 계정 생성

• 3.2 OpenAPI로 글쓰고, 삭제하기

• 4. 페이스북과 트위터를 이용한 댓글 구현

• 4.1 소셜 댓글 구현하기

• 5. 서버를 이용한 소셜 앱 설계

• 5.1 서버를 활용한 서비스 설계

• 5.2 서버 활용 소셜 앱 구현

• 6. 카카오톡 OpenAPI

• 6.1 하트, 날개 날리기

• 6.2 소셜 메시징을 통한 앱 연결

소셜 네트워크 서비스 개요

• 소셜 네트워크 서비스

• 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://infographiclabs.com/news/facebook-2012/

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

결과적으로

• 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 인코딩이 필요 없음

• Access Token 갱신

• OAuth 1.0에서 Access Token을 받으면 그것을 계속 사용 가능.트위터의 경우에는 Access Token을 만료시키지 않음. OAuth 2.0에서는 보안 강화를 위해 Access Token의 Life-time 지정 가능.

http://helloworld.naver.com/helloworld/24942

Services with OAuth 237signals (draft 5)

•Box•Facebook's Graph

API (see sociallipstick.com/?p=239)

•Foursquare•Geoloqi•GitHub•Google

•Meetup•Salesforce•SoundCloud•Do.com (draft 22)•Windows Live

http://oauth.net/2/

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

• Tweets

• Search

• Streaming

• Direct messages

• Friends & Followers

• Users

• Suggested Users

• Favorites

• Lists

• Saved Searches

• Places & Geo

• Trends

• Spam Reporting

• OAuth

• Help

statuses/user_timeline

curl --get 'https://api.twitter.com/1.1/statuses/user_timeline.json' --data 'count=2&screen_name=twitterapi' --header 'Authorization: OAuth oauth_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

statuses/update

curl --request 'POST' 'https://api.twitter.com/1.1/statuses/update.json' --data 'status=Maybe+he%27ll+finally+find+his+keys.+%23peterfalk' --header 'Authorization: OAuth oauth_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

/statuses/destroy/300903768550170624curl --request 'POST' 'https://api.twitter.com/1.1/statuses/destroy/300903768550170624.json' --header 'Authorization: OAuth oauth_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

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' --data 'count=2&screen_name=twitterapi' --header 'Authorization: OAuth oauth_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

curlcurl --get 'https://api.twitter.com/1.1/statuses/user_timeline.json' --data 'count=2&screen_name=twitterapi' --header 'Authorization: OAuth oauth_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

타임라인 가져오기

statuses/user_timeline

curl --get 'https://api.twitter.com/1.1/statuses/user_timeline.json' --data 'count=2&screen_name=twitterapi' --header 'Authorization: OAuth oauth_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

twitter.com/twitterapi

타임라인 쓰기

statuses/update

curl --request 'POST' 'https://api.twitter.com/1.1/statuses/update.json' --data 'status=Maybe+he%27ll+finally+find+his+keys.+%23peterfalk' --header 'Authorization: OAuth oauth_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

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. 자바스크립트 소셜 지원 기능 소개



• 2. 페이스북 OpenAPI 개요



• 3. 페이스북 계정 연결



• 4. 페이스북과 트위터를 이용한 댓글 구현


• 5. 서버를 이용한 소셜 앱 설계



• 6. 카카오톡 OpenAPI



자바스크립트 소셜 지원 기능 소개



정말 쉬운 자바스크립트 소셜 기능

자바스크립트 API 연습

페이스북 OpenAPI 개요



페이스북 OpenAPI 개요

iOS Android Web Games

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

페이스북 Login

http://developers.facebook.com/docs/concepts/login/login-architecture/

페이스북 계정 연결



페이스북 개발자 계정 생성

https://developers.facebook.com/settings?tab=developer&section=devprofile&view

OpenAPI로 글쓰고, 삭제

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

페이스북과 트위터를 이용한 댓글 구현


소셜 댓글 구현하기

서버를 이용한 소셜 앱 설계



서버를 활용한 서비스 설계

서버 활용 소셜 앱 구현

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>

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

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');! }! });

Javascript SDK

function 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 + '.'); }); }

카카오톡 OpenAPI



하트, 날개 날리기"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"

소셜 메시징을 통한 앱 연결

Facebook dev

감사합니다

소셜 네트워크 앱 개발

Documents