• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
소셜 네트워크 앱 개발
 

소셜 네트워크 앱 개발

on

  • 1,362 views

 

Statistics

Views

Total Views
1,362
Views on SlideShare
1,362
Embed Views
0

Actions

Likes
1
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    소셜 네트워크 앱 개발 소셜 네트워크 앱 개발 Presentation Transcript

    • 소셜 네트워크 앱 개발 서버-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://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 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/
    • 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 • Saved Searches• Streaming • Places & Geo• Direct messages • Trends• Friends & Followers • Spam Reporting• Users • OAuth• Suggested Users • Help
    • 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
    • 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
    • /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
    • 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 --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
    • 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
    • 타임라인 가져오기
    • 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
    • twitter.com/twitterapi
    • 타임라인 쓰기
    • 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
    • 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 정말 쉬운 자바스크립트 소셜 댓글 구현 기능 • 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 소셜 메시징을 통한 앱 연결
    • 자바스크립트 소셜 지원 기능 소개• 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.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 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 + .); });}
    • 카카오톡 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
    • 감사합니다