서버개발자의 프론트엔드 맛보기

BeatsBucket Music Player (youtube + melon + jquery)

삼성전자 프린팅솔루션 Creative Lab 임종윤(seedengine@gmail.com)

저는..• 초보 아빠

• 최근엔..

• Cloud Printing(AWS)

• C-Lab(Netty + UDT)

• 예전엔..

• Robotics(2005, 2006 1st)

• Embedded(PDA, PSP)

• 그 외

• 게임 크랙(jquery based android app)

오늘은..

• 가볍게, 너무 기술적인 이야기보다..

• 아주 간단한 Toy Application을 개발한 경험 공유

• 살짝 구글 API

• SPA

• 재미있을 만한 것들

BeatsBucket? free music player.

already, lots of things

Free but Recent, Rank

Free: YouTube, soundCloud Ranking: Melon

Only for me. Cloud Service + PC browser

+ easy to develop = Cloud Platform, Javascript

No cost = Minimum server processing

Minimum page load = Single Page Application

(Jquery+backbone+LAB+underscore)

http://addyosmani.com/blog/building-spas-jquerys-

best-friends/

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.

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.

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

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

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

http://addyosmani.com/resources/backbonegallery/

index.php

구조도

App Engine

Player

Youtube

Melon

User

Google App Engine

• https://cloud.google.com/appengine/docs?hl=ko

Melon API

• https://developers.skplanetx.com/apidoc/kor/melon/

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를 사용하여 웹페이지나 앱에서 바로 플레이어를 제어

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

연산• 대기열 관련 함수

• 영상에 대한 대기열

• 목록에 대한 대기열

• 재생 컨트롤

• 플레이어 설정

• 재생 상태

• 재생 품질

• 이벤트

Demo

계획• 기본기능

• 검색 결과 향상 (더 좋은 매핑 업데이트, 공유)

• UI, UX

• Plug-in for collector

• 음원 챠트

• 라디오 방송 선곡 리스트

• YouTube 채널

• 가사지원

• Sharing playlist

• Endless music stream (Analytics API)

• 최종적으로 클라이언트 기능을 서버로 이전하고 beatsbucket.com 서비스 open (free, open source)

올해에는..

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

감사합니다