Upload
kenu-heo
View
1.198
Download
10
Embed Size (px)
Citation preview
소셜 네트워크 앱 개발서버-DB설계 등
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 소셜 메시징을 통한 앱 연결
소셜 네트워크 서비스 개요
• 소셜 네트워크 서비스
• 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 인코딩이 필요 없음
• 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. 자바스크립트 소셜 지원 기능 소개
• 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 소셜 메시징을 통한 앱 연결
자바스크립트 소셜 지원 기능 소개
• 1.1 정말 쉬운 자바스크립트 소셜 기능
• 1.2 자바스크립트 API 연습
정말 쉬운 자바스크립트 소셜 기능
자바스크립트 API 연습
페이스북 OpenAPI 개요
• 2.1 페이스북 OpenAPI 개요
• 2.2 페이스북 OAuth 인증
페이스북 OpenAPI 개요
iOS Android Web Games
https://developers.facebook.com/docs/
페이스북 Login
http://developers.facebook.com/docs/concepts/login/login-architecture/
페이스북 계정 연결
• 3.1 페이스북 개발자 계정 생성
• 3.2 OpenAPI로 글쓰고, 삭제하기
페이스북 개발자 계정 생성
https://developers.facebook.com/settings?tab=developer§ion=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.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
• 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%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
감사합니다