Free Music Video Player BeatsBucket!

1. 서버개발자의 프론트엔드
맛보기
BeatsBucket Music Player
(youtube + melon + jquery)
삼성전자 프린팅솔루션 Creative Lab
임종윤(seedengine@gmail.com)

2. 저는..
• 초보 아빠
• 최근엔..
• Cloud Printing(AWS)
• C-Lab(Netty + UDT)
• 예전엔..
• Robotics(2005, 2006 1st)
• Embedded(PDA, PSP)
• 그 외
• 게임 크랙(jquery based android app)

3. 오늘은..
• 가볍게, 너무 기술적인 이야기보다..
• 아주 간단한 Toy Application을 개발한 경험 공유
• 살짝 구글 API
• SPA
• 재미있을 만한 것들

4. BeatsBucket?
free music player.

5. already,
lots of things

6. Free but Recent, Rank

7. Free: YouTube, soundCloud
Ranking: Melon

8. Only for me.
Cloud Service
+ PC browser
+ easy to develop
= Cloud Platform, Javascript

9. No cost =
Minimum server processing

10. Minimum page load =
Single Page Application
(Jquery+backbone+LAB+underscore)

11. http://addyosmani.com/
blog/building-spas-jquerys-
best-friends/

12. What’s A Single-Page
Application (SPA)?
• SPAs are web applications or websites which persistently
run in the same page without requiring a reload for further
navigation. All of the code needed for your initial load in
these applications is driven by either local data or data
retrieved from a web server on demand, such as any
additional data required from your app that might be
driven by user actions.
• The basic idea behind an SPA is that regardless of what
interactions your users might have with the application, the
page doesn’t get reloaded or have it’s control handled by
another page outside of the current one.

13. Why Might SPAs Can Be Better
Than Multi-Page Applications?
• There’s an obvious transition from one page to the
next which requires you to wait until entire new pages
have loaded.
• This often means requesting the same content again
and again (eg. the sidebars, header, navigation etc).
• With an SPA on the other hand, changes of application
‘state’ are handled using approaches such as XHR calls,
making the user experience a lot more fluid.

14. Backbone.js
• Backbone is an open-source component of
DocumentCloud.
• a small open-source library that helps bring a
variation of the MVC (Model-View-Controller)
architecture pattern to your applications
• http://backbonejs.org

15. Underscore.js
• Underscore is an open-source component of
DocumentCloud
• a JavaScript library that provides a whole mess of
useful functional programming helpers without
extending any built-in objects.
• http://underscorejs.org

16. LABjs
• LABjs (Loading And Blocking JavaScript) is an open-
source (MIT license) project supported by Getify
Solutions.
• The core purpose of LABjs is to be an all-purpose,
on-demand JavaScript loader, capable of loading any
JavaScript resource, from any location, into any
page, at any time.
• http://labjs.com

17. http://addyosmani.com/
resources/backbonegallery/
index.php

18. 구조도
App Engine
Player
Youtube
Melon
User

19. Google App Engine
• https://cloud.google.com/appengine/docs?hl=ko

20. Melon API
• https://developers.skplanetx.com/apidoc/kor/melon/

21. Youtube API
• https://www.youtube.com/yt/dev/ko/api-resources.html
• API 구성
• Data API - 이 API를 사용하여 콘텐츠 검색, 동영상 업로드, 재생목록 만들기,
구독정보 관리 등의 작업을 수행(검색, 삽입, 업데이트, 삭제)
• Analytics API - YouTube 동영상과 채널의 조회 통계, 인기도 측정항목, 시청
자 인구통계를 검색
• Live Streaming API - YouTube에서 실시간 이벤트를 만들어 업데이트하고
관리할 수 있습니다. API를 사용하여 이벤트(방송)를 예약하고 실제 방송 콘텐
츠를 표시하는 동영상 스트림과 연결
• Player API - Player API를 사용하여 웹페이지나 앱에서 바로 플레이어를 제어

22. 예시
https://developers.google.com/
youtube/iframe_api_reference

23. 연산
• 대기열 관련 함수
• 영상에 대한 대기열
• 목록에 대한 대기열
• 재생 컨트롤
• 플레이어 설정
• 재생 상태
• 재생 품질
• 이벤트

24. Demo

25. 계획
• 기본기능
• 검색 결과 향상 (더 좋은 매핑 업데이트, 공유)
• UI, UX
• Plug-in for collector
• 음원 챠트
• 라디오 방송 선곡 리스트
• YouTube 채널
• 가사지원
• Sharing playlist
• Endless music stream (Analytics API)
• 최종적으로 클라이언트 기능을 서버로 이전하고 beatsbucket.com 서비스 open (free, open source)

26. 올해에는..
• 분유를 타주는 머신 (아두이노 + 안드로이드 + 앱엔진)

27. 감사합니다