1 OpenWebOS Development Environment May, 2016 Dept. of software Dankook University http://embedded.dankook.ac.kr/~baeksj
1. webos 개발환경구축 webos TV App 개발프로세스 webos TV SDK webos TV SDK 설치
webos 개발환경구축 webos TV App 개발프로세스 Discover the Technology - webos TV Specification Design App Online webos TV Developer support - UI Controls, Styles Download and Install webos TV SDK Registering Implement and Build App Implement and Build App - Web Application - 2 nd Screen Application Listing on LG Content Store - JS Services Test the App -Emulator, TV
webos TV SDK webos 개발환경구축 정의 web 개발을위해 package, test debugging 을위한개발tool 과 API 구성 문서 : SDK Tool guide, sample app CLI / IDE : webos TV App 개발환경, project 생성, App package, 설치 Emulator : webos TV 환경에서 App 구동을위한 virtual machine Open API : webos TV App 을위한TV Interface, TV 제어, App 관련 다운로드 https://developer.lge.com/webostv/sdk/web-sdk/
webos TV SDK 설치 System requirements Operating System webos 개발환경구축 Microsoft Windows 7 (32-bit and 64-bit) Mac OS X 10.8 Mountain Lion, 10.9 Mavericks and 10.10 Yosemite (64-bit) Ubuntu 10.04, 12.04 / Ubuntu Mint 13 (Maya) (32-bit and 64-bit) Processor: Intel Pentium 4 2.0 GHz or faster Memory: 3 GB or more of RAM Display: 1280 x 1024 or higher of screen resolution Graphic Card: 256 MB or more of video memory Additional Software Oracle VirtualBox 4.2.x or higher (4.2.x is recommended) Oracle JDK 1.7.0_45 or later
webos TV SDK 설치 webos 개발환경구축 Installer / SDK download http://developer.lge.com/webostv/sdk/web-sdk/ Network Install - Installer Package Install - Installer - SDK Package
webos TV SDK 설치 SDK Install webos 개발환경구축 webos_tv_sdk_installer_(platform) 실행 Windows platform 일경우, 관리자권한으로실행 1. License agreement 동의 2. 설치경로설정 3. Package 선택 (Package Install 의경우 download 한 package 를지정 )
webos TV SDK 설치 SDK Install webos 개발환경구축 4. Install 화면 5. Install 완료
2. webos TV App Development Tool webos CLI webos IDE webos Emulator WebOS API
webos TV Development tool webos TV Integrated Development Environment webos TV Command Line Interface webos TV Emulator
webos TV Development tool Command Line Interface(CLI) Command line environment 에서 app 생성, 패키징, 설치, 구동을위한 script 들의모음 특정 IDE 없이 app 개발및 test 환경제공 HTML bootplate 제공 Enyo app 이아닌경우 필수파일만제공 appinfo.json, index.html, icon.png, largeicon.png Enyo Moonstone Bootplate 제공 Moonstone 앱을위한 bootplate(enyo 라이브러리사용 ) 7개의 moonstone template 제공 ( 각 template 마다다른 layout) appinfo.json 파일, Enyo 라이브러리, assets 등제공 기타 Bootplate JS Service bootplate
webos TV Development tool Command Line Interface(CLI) App 의설치, 패키징, 실행, 디버깅을위한명령어제공 Script ares-generate ares-package ares-setup-device ares-install ares-launch ares-inspect ares-server ares-novacom Description template 을통해web App 생성 App package file 생성 launch 가능한 device 목록보여줌 device 에 App 생성 web App 의생성및종료 App 의 debugging 을수행 local App file 을 test 하기위한 server 실행 webos TV 로부터 private key 받음
webos TV Development tool Integrated Development Environment(IDE) Eclipse 기반 주요기능 project 생성 app debugging app packaging app launch 지원 template basic_web moonstone-2.3 moonstone-2.5 moonstone-2.6 moonstone_ap-2.6 moonstone_apv-2.6 moonstone_avp-2.6 moonstone_avpv-2.6 moonstone_mb-2.6 moonstone_wz-2.6
webos TV Development tool Sublime Text Editor Plugin 주요기능 project 생성 app debugging app packaging app install app launch
webos TV Development tool webos TV Emulator main window 1920 x 1080 full HD emulator menu App Manager Skin Take Screenshot
webos TV API webos TV Development tool 표준 API 및 TV specific API 등다양한 API 를지원 web API HTML5 / CSS3 specifications supported by webostv Luna Service API Luna Service API specifications supported by webos TV Enyo API Enyo API specifications on enyojs.com Connect SDK API Connect SDK API specifications on connectsdk.com
표준 web API 지원 webos TV Development tool HTML5 Audio & Video - web 에서의추가적 Plugin 없이 media file 의실행 Static CSS - background, borders, box, columns, text, fond, media queries CSS3 Dynamic CSS - transforms, transactions, animations Communication - program 들간 Message Event 라는 data 공유 SVG - XML format 의 vectorbased graphic Web Storage - client side DB 로 client 의 disk 에소량의 data 저장 Canvas - JavaScript 를활용한 graphic WebGL - Open GL 2.0 API 와호환되는 3 차원 graphic Indexed DB - client side DB 로 key value 쌍을통해다량의객체저장 Workers - web browser 에서의 multi tasking 지원항 History -browser 의 history 접근 Web Application - 작동중인 Web App 에대한 cache 지원
webos TV Development tool 표준 Apache Cordova API 지원 TV 를위한고유표준 API CSS3 Accelerometer - 소자의 motion sensor 확인 Connection - network 유무선 monitoring 및연결 Devices - 장치의특정정보를수집 File System - JavaScript 를통해기본 file system 에연결 Media - 녹음한 Audio file 을재생 Globalization - locale 에특정개체표현 InAppBrowser - 다른응용프로그램에서 browser 객체의 url 시작 Battery - battery 상태모니터링 Splashscreen - 응용프로그램시작화면숨김
webos TV Development tool Luna Service API 지원 표준을 cover 하기위한 LG 의고유API TV 기능에필요한동작에특화, Luna Bus 기반 CSS3 Activity Manager - 종료된작업및실행될 schedule 된작업등 system 에서의 task 들을조절 Application Manager - application 의암시적구동을위한 method 들제공 Audio - volume control 을위한 method 제공 Camera - camera 와 microphone 의상태정보를얻는함수제공 Connection Manager - 가능한 internet connection 상태제공 Database - App 들의 persistent data 를저장 Device Unique ID - device 식별을위한 method 제공 DRM - DRM client 와 DRM message, error 에대한정보제공 Key Manager - 보안 key 를통해 App 에게보안기능을제공 Magic Remote - sencor, parsing 등의 remote 관련 method 제공 TV Device Information -TV 의 system information 제공 System Service - system time 에대한 method 제공
3. webos TV App 개발 CLI 를통한 App 개발 IDE 를통한 App 개발
webos TV App 개발 CLI 를통한 App 개발 지원가능한 bootplate 확인 CSS3 다양한 boot plate 예시 moonstone-2.6 moonstone-wz-2.6 moonstone-mb-2.6 moonstone-avpv-2.6 moonstone-apv-2.6 moonstone-avp-2.6
CLI 를통한 App 개발 App 생성과정 webos TV App 개발 Package Web App Install Web App Launch / Debug Web App ares-generate JS Service, moonstone, web 등의 template 을활용하여, app 을생성하는 script ares-package app 과 JS Service 로 packaging file(.ipk) 을생성 2가지과정을통해 package 수행 source code 를간소화하여 source code size 와 load time 축소 불필요한 code 제거및합병 package file 생성 ares-setup-device target device 관리 ares-install app package file(.ipk) 를 target device 에설치 ares-launch target device 에설치된 app을실행및종료 target device 에실행중인 app 의관리 ares-inspect web browser 의 web inspector 와 node inspector 를통해app 과 JS Service 의상태관리 ares-server app 의 local life 를 test
webos TV App 개발 CLI 를통한 App 개발 App create Moonstone web App 생성 Enyo App -> ares-generate [App 이름 ] CSS3 Moonstone - default template - Enyo Framework 에 TV specific UI/UX 를추가 특정 template 지정 -> ares-generate t [ template 이름 ] [App 이름 ] appinfo.json 의속성으로 App 생성시명시해주어야한다. id : App 의 unique id ( 최초설정후 publishing 되면변경불가 ) 소문자, 숫자, -,. 가 id 로사용가능 title : App launcher, window 에보이는 title 로써,unique 한값id 와같은속성 main : App 의구동을위한첫 file 의 pointer 로써, 처음실행될 file 명시 version : App 의 version number
webos TV App 개발 CLI 를통한 App 개발 App create moonstone web App directory structure CSS3 Directory / File assets lib src applinfo.json largeicon.png icon.png index.html package.json README.md Description Image file 등의 resources directory Library directory, TC specific library 들은 default로제공 Source code directory Web app 의 metadata file, packaging 시필수요소 Active Application Information UI 에보일icon image file Launcher UI 에 app title 로보일icon image file Web application 의 main page NPM 의설정file Moonstone bootplate 의설명file
CLI 를통한 App 개발 App create web App 생성 webos TV App 개발 web app directory structure 기존 moonstone 에 webosjs-0.1.0 directory 추가 webosjs-0.1.0 : LS API 를호출하기위한 library directory appinfo.json, icon.png, index.html, largeicon.png : moonstone 과동일
CLI 를통한 App 개발 App create JS Service Application 이구동중이지않을때에도특정일을수행할수있도록하여, webos application 이할수없는일들을수행하는 Node.js module 일반 web application 에서불가능한몇가지 platform 특징을가진다. JavaScript 로작성및 Node.js 를사용하여생성 webos 에서동작하며, background 에서동작 Networking 및 file system 의 low-level 에접근하여, binary data 처리가가능하다. 여러 app 을함께처리할수있다. JS Service 의사용예시 JS Service create webos TV App 개발 Email 에서첨부된 file 들을 download, 공유 website 에 image upload 등 JS Service 의이름은 service 를호출하는 app 의이름으로시작해야한다. App name : com.example.app Service name : com.example.app.service app project 에서 JS Service 를호출하는구조
CLI 를통한 App 개발 App create JS Service directory structure webos TV App 개발 Directory / File helloclient.js helloworld_webos_service.js package.json service.json Description helloworld_webos_service.js Service 를 subscribe 하는 JS Service service.js 에명시된, service 를위한 command 들 Service 의 metadata 및 main service file 의 pointer, packaging 시필요 webos bus 에서 service 가제공하는 command 기록, JS Service 를 Luna bus 에등록시필요
CLI 를통한 App 개발 App create appinfo.json file 생성 webos TV App 개발 Template 없이또는, template 으로부터만들어지지않은기존의 web application 을사용할시, appinfo.json 의추가를위해생성 enyoicon 생성 webicon 생성
webos TV App 개발 CLI 를통한 App 개발 App package App packaging ares-package [app 이름 ] package file(.ipk) 의생성및code size 축소 CSS3 package 전주의사항 appinfo.json appinfo.json 이존재하며, file 의내용에서 icon image file, main page file 가정확한경로에설정되어있어야한다. App packaging with JS Service ares-package [App 의이름 ] [JS Service 이름 ]
webos TV App 개발 CLI 를통한 App 개발 App package App packaging with JS Service package 전주의사항 App 의 directory 의 appinfo.json CSS3 json file name 설정 - app 과함께 packaging 할 JS Service 의 package.json 의속성중 name 은 app 의 appinfo.json 의속성인 id 값과같은이름을가진뒤 Service name 을적어야한다. JS Service 의 directory 의 package.json
CLI 를통한 App 개발 App install Listing target device webos TV App 개발 ares-setup-device --list, ares-setup-device --listfull device 이름, platform type, ssh access address 등의정보표시 CSS3 remote 환경에서 emulator 를구동시 -default ip 는 loopback address 로설정되어있으므로, webos TV emulator 의 host address 를변경한다. - 변경방법 ares-setup-device modify emulator info host= 변경할 ip ares-setup-device
webos TV App 개발 CLI 를통한 App 개발 App install App install ares-install --device [device 이름 ] [package file(.ipk) 이름 ] 생성한 package file(.ipk) 을 target device 에설치 emulator 의 name 과 package file 을 parameter 로하여설치 CSS3 App Remove ares-install --device emulator --list 로설치된 App 확인및 ID 확인 ares-install --device emulator --remove [App ID]
webos TV App 개발 IDE 를통한 App 개발 Eclipse 기반상단의 webos menu 를통해CLI 와같은기능제공 App create type 과 template 선택및프로젝트생성 CSS3 2 1 3 webos project create 1 webos Menu -> New webos Project 2 file -> New webos Project 3 icon -> New webos Project
IDE 를통한 App 개발 webos TV App 개발 App create appinfo.json 파일작성 - appinfo.json 작성, 2가지방법으로작성가능 Overview tab을통한작성 UI 를통하여작성가능, appinfo.json 의필수기재사항외에는추가불가능 appinfo.json source Tab을통한작성 필수사항외추가선택 option 까지작성가능
webos TV App 개발 IDE 를통한 App 개발 App create Enyo source file 작성 -project 에 Enyo source file 추가 CSS3 webos project create webos Menu -> New -> New Source File file -> New -> New Source File icon -> New Source File
IDE 를통한 App 개발 webos TV App 개발 Configuring target App 의실행을위해 target device 와연결 우측하단의 target device 에서연결하려는 device 를 connect CSS3 Connect Package & Install app 의실행시자동수행 package는 2 가지 mode 로수행가능 Run -> Run Configurations 에서변경 minify mode package 생성시 source code 크기축소후 package file 생성 non-minify mode 축소하지않고 package file 생성
4. webos TV App 실행 CLI 를통한App 실행 IDE 를통한App 실행 App Manager 를통한App 실행
webos TV App 실행 CLI 를통한 App 실행 App launch App launch target device 에 App 을실행 ares-launch device [device 이름 ] [App ID] CSS3 Emulator 실행화면 App close 현재구동중인 App 을종료 ares-launch --device [device 이름 ] [package file(.ipk) 이름 ]
webos TV App 실행 IDE 를통한 App 실행 App launch App launch CSS3 실행화면
webos TV App 실행 App Manager 를통한 App 실행 App launch emulator menu App Manager Skin Take Screenshot CSS3 window 에서 package file 의설치, 구동, 삭제등수행