ChartSNS Final BlackHole 한규학 이경찬 최규연 김보경 전승현. 왜이런 거죠 ? 리비아 사 태로 차질 이 생겼어 요. 그러므로 이러한 압축 된 차트를 가지고 토론 을 하기 위 해선 / 명확한 의견 을 표현하는 것이 필요합 니다. 그러므로 이러한 압축.

Presentation on theme: "ChartSNS Final BlackHole 한규학 이경찬 최규연 김보경 전승현. 왜이런 거죠 ? 리비아 사 태로 차질 이 생겼어 요. 그러므로 이러한 압축 된 차트를 가지고 토론 을 하기 위 해선 / 명확한 의견 을 표현하는 것이 필요합 니다. 그러므로 이러한 압축."— Presentation transcript:

1 ChartSNS Final BlackHole 한규학 이경찬 최규연 김보경 전승현

2 왜이런 거죠 ? 리비아 사 태로 차질 이 생겼어 요. 그러므로 이러한 압축 된 차트를 가지고 토론 을 하기 위 해선 / 명확한 의견 을 표현하는 것이 필요합 니다. 그러므로 이러한 압축 된 차트를 가지고 토론 을 하기 위 해선 / 명확한 의견 을 표현하는 것이 필요합 니다. 왜이런거 죠 왜이 런거죠 차트에 마커 찍고 의견공유 하는 그런 앱 ? 여. 기. 있. 다.

3 ChartSNS 목표 ChartSNS 목표

4 Chart 의 데이터베이스 구축 차트 서비스 1. 차트 서비스 제공

5 왜 이런거죠 ? 구제역과 관련 된 것 같아요. 구제역과 관련 된 것 같아요. 환율상승도 한몫 했죠. 환율상승도 한몫 했죠. 2. “ 마커 & 의견 ” 기능 제공 쉽게 토론 가능

6 기존 SNS 생태계와 연동 토론의 장 확대 댓글 차트 의견 마커 차트 의견 마커 공유 추적 ChartSNS Social Network Services 왜 이런거 죠 ? 구제역과 관련 된 것 같아요. 구제역과 관련 된 것 같아요. 환율상승도 한몫 했죠. 환율상승도 한몫 했죠. 3. 의견 공유 및 추적기능 제공

7 ChartSNS 시스템 구현 정도 ChartSNS 시스템 구현 정도

8 ChartSNS 제안 내용 ① 어플리케이션 로그인 ② 차트 메인 Page ③ 각 카테고리 리스트 보여주기 ④ ( 차트리스트에서 ) 차트선택 시, 해당 차트 보여주기 ⑤ 차트즐겨찾기 / 차트검색 / 이웃추가 ⑥차트에 의견쓰기 ⑦차트에 의견을 달고 마커표시 ⑧차트에 마커 선택 시, 마커에 대한 의견 보여주기 ⑨차트 의견 선택 시, 해당 의견에 대한 마커 표시하기 ⑩의견에 대한 댓글 보여주기 ① Restful Service 를 통한 Client 의 요청 감지 ② Google Data API 를 사용해 사용자 인증 ③ Google Chart library 를 사용한 구글 차트 요청 URL 생성 ④ Google Chart Service 에 의해 생성된 차트 이미지를 Client 로 전송 ⑤ Client 와 주고 받을 차트 XML 정의 ⑥ Google Chart library 를 사용해 점이 찍힌 모양의 구글 차트 요청 URL 생 성 ⑦ Facebook API 를 이용한 차트 지식 정보를 SNS 로 공유 Client (Application) Server

9 시스템은 구현은 어느 정도까지 ? 이웃추가 부분을 제외하고 모든 부분을 구현하였다. + 차트 수정 ① 어플리케이션 로그인 ② 차트 메인 Page ③ 각 카테고리 리스트 보여주기 ④ ( 차트리스트에서 ) 차트선택 시, 해당 차트 보여주기 ⑤ 차트즐겨찾기 / 차트검색 / 이웃추가 ⑥차트에 의견쓰기 ⑦차트에 의견을 달고 마커표시 ⑧차트에 마커 선택 시, 마커에 대한 의견 보여주기 ⑨차트 의견 선택 시, 해당 의견에 대한 마커 표시하기 ⑩의견에 대한 댓글 보여주기 Client (Application)

10 ① Restful Service 를 통한 Client 의 요청 감지 ② Google Data API 를 사용해 사용자 인증 ③ Google Chart library 를 사용한 구글 차트 요청 URL 생성 ④ Google Chart Service 에 의해 생성된 차트 이미지를 Client 로 전송 ⑤ Client 와 주고 받을 차트 XML 정의 ⑥ Google Chart library 를 사용해 점이 찍힌 모양의 구글 차트 요청 URL 생 성 ⑦ Facebook API 를 이용한 차트 지식 정보를 SNS 로 공유 Server - 수정사항 - 마커가 표시된 구글차트이미지를 서버에서 보내지 않고 어플리케이션에서 보 내도록 함.

11 ChartSNS 시스템 구조 ChartSNS 시스템 구조

12 시스템 구조도

13 Server Tab External Service Chart Account Data Store 구글 앱 엔진을 기반으로 구성된 서버가 클라이언트의 요청에 받아 External Service 및 Data Store 를 활용하여 다양한 서비스를 제공합니다.

14 차트는 어떤 RSS2.0 명세를 따르나 ? Elements of Element DescriptionExample title The title of the item. “ 주가차트 ” link The URL of the item. Chart 의 웹 페이지 URL description The item synopsis. “ 주가를 나타낸 차트입니다 ” author Email address of the author of the item. han704@gmail.com category Includes the item in one or more categoriesMyChart | MyFavorite | HotIssue comments URL of a page for comments relating to the item. Chart 의 웹 페이지 URL#Comment enclosure Describes a media object that is attached to the item.Attributeurl="chart image url" length="image 크기 " type="image/jpeg or image/png"/ guidA string that uniquely identifies the item. urn:ChartSNS:Chart 의 ID pubDateIndicates when the item was published.2007.3.29 sourceThe RSS channel that the item came from. Attribute url="(ListMyChart 에 대한 URL > ListFavorite 에 대한 URL > ) 현재 URL“ contents channel 의 title chart:view Click count of chart Attribute count= "8" chart:comment Count of comments for chart Attribute count="80” chart:thumbnail URL of a page for google chart(small size) Attributeurl =“chart image url” *xmlns:chart="http://pplab.cs.kookmin.ac.kr/trac/blackhole/wiki/xml"

15 DATA SENDING BETWEEN SERVER AND APP

16 http://chart.apis.google.com/chart?chxl=1:| %EB%B9%88%EB%8F%84%EC%88%98& chxp=1,50&chxt=y,y&chs=380x300&cht=lc& chd=s:ithankYouGodformostthisamazingday forthel&chls=1&chma=10,10,10,10

17 Google App Engine

18 구글 앱 엔진은 ? 웹 어플리케이션을 쉽게 개발 / 배포 / 관리 할수 있는 클라우드 컴퓨팅을 지원하는 플랫폼이다 ! Google App Engine

19 왜 구글 앱 엔진 서비스로 서버를 구동하는가 ?  서버를 구동하는데 공간, 시간에 국한 X  즉, 서비스의 안전성과 지속성의 측면에서 로컬에서 서버를 구동하는 것보다 효율적 Google App Engine

20 실제 서버의 PATH http://chartsns.appspot.com

21 검색 시, 서버와 앱의 동작

22 Google App Engine

23 ChartSNS 주요 기능 ChartSNS 주요 기능 Login List of Chart Data Sending Comments

24 Server External Services Client Id/Password 계정인증 요청 계정확인 및 응답 Account Data Store - success - failure - insufficient ID blackhole @naver.com Passwo rd ******* Login

25 Server External Services Client 차트 리스트 요청 차트이미지 요청 차트의 url 반환 Data Store 차트이미지 & 차트정보 반환 IDblackhole @naver.com Chart 차트정보 가져오기 List of Chart

26 ServerClient (App) 1. 차트 리스트 요청 Data Store 4. 차트이미지 & 차트정보 반환 (RSS2.0 xml) IDblackhole @gmail.com 2. 차트정보 가져오기 External Services 5. 차트이미지 URL 로 요청 6. 구글차트 반환 Chart 차트 Url Google Chart Library Google Chart Library 차트명 작성자 작성일 3. URL convert Data Sending

27 Data Store 2. 좌표, 차트 키값 전송 3. 차트 키값을 이용하여 해당 차트의 마커 좌표 저장 4. 저장 성공 (Success) 5. XML 을 통해 저장 결과 전송 (Success) 1. 화면에 마커 찍을 위치를 터치 Marker

28 Data Store 10. XML 을 통해 저장 결과 전송 (Success) 3.Text / Access Token 전송 1. 계정인증 요청 2. 계정확인 및 응답 7. 담벼락 & 사진첩 키 값 전송 6. 의견, 차트 이미지 전송 4. Text 저장 9. 저장 성공 (Success) 5. 저장 성공 (Success) 8. 페이스북 키 값 저장 Comments

29 ChartSNS User Interface on Android ChartSNS User Interface on Android

30 ChartSNS 에 입문 ! 구글 계정을 가진 사용자가 로그인 후, 다음과 같은 ChartSNS 이용약관을 동의했을 시, ChartSNS App 을 사용할 수 있다.

31 간편하게 내 정보를 설정

32 관심있는 차트를 한눈에.

33 더 많은 차트를

34 자세한 차트정보 있어요.

35 깨끗한 차트 관리를

36 기억하고 싶은 차트라면 Touch 사용자는 차트에 북마크를 설정 & 해제 할 수 있다.

37 궁금증 참지마세요.

38 간편한 차트편집 OK!

39

40 중요한 지점에 마커를 마커를 통해서 다른 유저들과 토론이 가능하다. 사용자가 차트에 마커를 찍을 수 있고, 페이스북 의견도 동시에 남길 수 있다.

41 차트에 대한 나의 思는 ? 페이스북에 남긴 의견에 대한 댓글들이 앱에서 해당 의견에 대한 댓글로 나타난다.

42 이 마커에 대한 의견이 보고 싶으면 ? 선택한 지점에 속하는 마커 표시 마커를 선택하면 해당 마커에 대한 의견을 보여준다

43 이 의견은 어느 마커를 말하는 걸까 ? 의견에 해당하는 마커 표시

44 ChartSNS 문제점 해결사항 ChartSNS 문제점 해결사항

45 Server & Client : 변경사항변경이유 서버 시스템 변환 ( TomCat --> GoogleAppEngine) Hosting 문제를 해결하기 위해 ( 원래는 서버를 컴퓨터 켜서 유지해야하는데 Google App En gine 을 쓰면 Host 하는데 유리하다.) DB 접근 방식 변환 (MySQL --> JDOQL) GoogleAppEngine 에서 따로 사용하는 DataStore 에 접근하기 위해서는 Google 에서 제공해주는 JDOQL 문을 사용해야한다. Framework 의 변환 (Spring 2.5 --> 3.0 ) Facebook 연동 때문 FacebookAPI ( Rest API --> GraphAPI) Session key 를 이용한 REST API 의 지원을 더 이상 하지 않기 때문에 새로 배포된 Graph API 로 교체 FlashChart --> GoogleChart 안드로이드상에서 Flash 구동시 문제 발생 요소 존재

46 ChartSNS 기대효과 ChartSNS 기대효과

47 스마트폰 사용 증가 SNS 서비스 확산 어떤걸 기대할 수 있을까 ? 토론의 활성화

48 Smart Phone 사용 증가로 실생활 활용 가능성 ↑ 날씨, 주식, 환율차트 등을 환경, 경제분야에 활용 물리적 위치의 한계를 넘은 SNS 의 기능을 활용한 Communication 활성화 내 덕분이군

49 ChartSNS 현실적 제한요소 ChartSNS 현실적 제한요소

50 타겟 디바이스 – 화면 Size 에 따른 디자인 구성 제한 타겟 디바이스를 갤럭시 탭으로 하기 때문에 화면 (7 인치 ) Size 에 따른 디자인 구성에 제한이 생긴다. 에뮬레이터의 속도가 느림  테스트하는데 시간이 많이 투자가 필요함.

51 Thank you