warsawjs - first app on samsung smart tv
DESCRIPTION
First steps how create first application on Samsung Smart TV platform. Presentation preparing fo my first speech at WarsawJS - new organization about JavaScript.TRANSCRIPT
![Page 1: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/1.jpg)
WarsawJS: Firstapp on SamsungSmart TVplatformPiotr Kowalski @piecioshka
![Page 2: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/2.jpg)
Problems & Restrictions
1. Remote controller (without mouse and keyboard)
2. Limited space for all view port of application (not infinity longest page)
3. Not everywhere WebKit (in old platforms Maple4)
4. Low internet connection (application should always waiting for long
request)
5. Lazy user? (with beer and remote controller in hand on sofa)
![Page 3: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/3.jpg)
![Page 4: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/4.jpg)
How to start?
1. TV: Price: +600pln or Blu-Ray: Price: +300pln
2. Register account: develop
3. Installation on workstation Samsung Smart TV SDK?
4. Pair device with workstation by set IP Address
5. Synchronize
![Page 5: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/5.jpg)
![Page 6: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/6.jpg)
Necessary (minimum) files
1. ~/projects/first_app/config.xml
2. ~/projects/first_app/index.html
3. ~/projects/first_app/scripts/boot.js
4. ~/projects/first_app/images/thumb.png
5. ~/projects/widgetlist.xml
6. ~/projects/widget/first_app.zip
![Page 7: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/7.jpg)
~/projects/first_app/config.xml
<?xml version="1.0" encoding="utf-8"?>
<widget>
<BigListIcon>images/thumb.jpg</BigListIcon>
<type>user</type>
<widgetname>Project Name</widgetname>
<width>960</width>
<height>540</height>
<dcont>y</dcont>
01.
02.
03.
04.
05.
06.
07.
08.
![Page 8: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/8.jpg)
~/projects/first_app/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="scripts/boot.js"></script>
</head>
<body style="margin: 0px;">
<img src="http://lorempixel.com/960/540/sports/" />
</body>
01.
02.
03.
04.
05.
06.
07.
08.
![Page 9: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/9.jpg)
~/projects/first_app/scripts/boot.js
// Alias to launched widget. ̀||̀ for browser protection.
var launchWidget = window.curWidget || {};
// Smart Hub call method ̀onload̀ on launch widget.
window.onload = function () {
// Inform Smart Hub, that app is ready.
if (typeof launchWidget.setPreference === 'function') {
launchWidget.setPreference('ready', 'true');
}
01.
02.
03.
04.
05.
06.
07.
08.
![Page 10: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/10.jpg)
~/projects/first_app/images/thumb.png
• Small image with dimensions 95x78px
• Available (tested) format: png, bmp, jpg, gif
![Page 11: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/11.jpg)
~/projects/widgetlist.xml
<?xml version="1.0" encoding="UTF-8"?>
<rsp stat="ok">
<list>
<widget id="first_app">
<title>first_app</title>
<compression size="10000000" type="zip"/>
<download>http://[PC IP]/widget/first_app.zip</download>
</widget>
01.
02.
03.
04.
05.
06.
07.
08.
![Page 12: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/12.jpg)
~/projects/widget/first_app.zip
• Remember ignore node_modules directory
• Warning! Packing files, not parent directory!
• The smaller size of file is better
![Page 13: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/13.jpg)
Synchronize warnings
• Permission of files. Be readable for `others`!
• Disable firewall
• Application name
![Page 14: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/14.jpg)
Synchronize process
1. Device requesting for file widgetlist.xml
2. Next, device read that file, and download defined inside packages
3. After completion shows popup with success message
Now, we could launch new smart tv app!
![Page 15: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/15.jpg)
![Page 16: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/16.jpg)
Ideas
• Video player: VOD, DRM, LIVE STREAMING
• Communicator using audio, video
• Voice control application
• Gesture. Use your hand to control device!
• Convergence with mobile
![Page 17: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/17.jpg)
![Page 18: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/18.jpg)
Opportunities
• WebWorkers, WebSocket, WebGL, Canvas
• Connection with social media
• HTML5: tags, localStorage, <video> tag (only VOD)
![Page 20: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/20.jpg)
![Page 21: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/21.jpg)
Helpful tools
1. Browser - Develop app for TV, but try keep running on browser
2. Gulp - Tasking, ex. create zip package with command: $ gulp zip
3. Weinre - Web Inspector Remote
4. Network Link Conditioner - Manage your down / up net limits
5. Emulator?
![Page 22: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/22.jpg)
Resources
• Samsung Development Guide
• Browser Specifications
• Tizen SDK
• Gulp
• Weinre - Web Inspector Remote
• Slides: http://git.io/s8pouQ
![Page 23: WarsawJS - First app on Samsung Smart TV](https://reader033.vdocument.in/reader033/viewer/2022042607/557978dad8b42a5f438b4759/html5/thumbnails/23.jpg)
See you next
month atWarsawJS