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

소셜 네트워크 앱 개발
서버-DB설계 등
허광남
kenu@okjsp.pe.kr

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

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 소셜 메시징을 통한 앱 연결

소셜 네트워크 서비스
개요
• 소셜 네트워크 서비스
• 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 2
37signals (draft 5) • Meetup
• Box • Salesforce
• Facebook's Graph • SoundCloud
API (see sociallipstick.com/?p=239) • Do.com (draft 22)
• Foursquare • Windows Live
• Geoloqi
• GitHub
• Google

http://oauth.net/2/

3. 트위터 OpenAPI 개요

• 3.1 트위터 개발자 사이트
• 3.2 인증키 생성과 활용 방법
• 3.3 OpenAPI 개요

트위터 개발자 사이트

• https://dev.twitter.com
• My Applications

인증키 생성과 활용 방법

• Create Application
• Consumer Key
• Consumer Secret
• Access Token
• Access Token Secret

트위터 OpenAPI 개요
• Timelines • Favorites
• Tweets • Lists
• Search • Saved Searches
• Streaming • Places & Geo
• Direct messages • Trends
• Friends & Followers • Spam Reporting
• Users • OAuth
• Suggested Users • 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_nonce="ee5a9bece9395afe0c9e583a1716b288",
oauth_signature="T0ndBmF8fYkf6ZxnKP7Xq22%2Bw20%
3D", oauth_signature_method="HMAC-SHA1",
TuOqLdaQZV9G2Zb57pXQeu8A6zAGV5jSrV6E0Wt",

/statuses/destroy/
300903768550170624
curl --request 'POST' 'https://api.twitter.com/
1.1/statuses/destroy/300903768550170624.json'
oauth_nonce="27228c7d49f9d35e0610a4a88911df64",
oauth_signature="ssVCgmDjZzynFIwe7IfySvjYBO8%3D
", oauth_signature_method="HMAC-SHA1",
TuOqLdaQZV9G2Zb57pXQeu8A6zAGV5jSrV6E0Wt",

4. 계정 연결과 타임라인
활용
• 4.1 개발자 등록
• 4.2 웹을 이용한 인증
• 4.3 타임라인 가져오기
• 4.4 타임라인 쓰기

개발자 등록
• https://dev.twitter.com/

개발 도구

• curl
• windows curl in git bash
• jsbeautiﬁer.org

웹을 이용한 인증
curl --get 'https://api.twitter.com/1.1/
statuses/user_timeline.json' --data
'count=2&screen_name=twitterapi' --header
'Authorization: OAuth
oauth_signature="cdP8NK%2F6bM8ir8kzpU8Rt8wKEgw
%3D", oauth_signature_method="HMAC-SHA1",
vPSrQFBB89hjKLdBKdTauTwpBrtwRQhlX1CPUd9",

curl
curl
--get 'https://api.twitter.com/1.1/
statuses/user_timeline.json'
--data 'count=2&screen_name=twitterapi'
oauth_signature="cdP8NK%2F6bM8ir8kzpU8Rt8wKEgw%3D",
oauth_signature_method="HMAC-SHA1",
oauth_token="1168169378-vPSrQFBB89hjKLdBKdTauTwpBrtwRQhlX1CPUd9",
oauth_version="1.0" '
--verbose

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

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

• 1.1 정말 쉬운 자바스크립트 소셜 기능
• 1.2 자바스크립트 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&section=devproﬁle&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&ap
pver=2.0&appname=%EC%B9%B4%EC%B9%B4%EC
%98%A4&type=link&apiver=2.0.1"

소셜 메시징을 통한 앱 연결

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

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

Similar to 소셜 네트워크 앱 개발 (20)

More from Kenu, GwangNam Heo

More from Kenu, GwangNam Heo (20)

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