Embed Size (px)
DESCRIPTION
First steps how create first application on Samsung Smart TV platform. Presentation preparing fo my first speech at WarsawJS - new organization about JavaScript.
Citation preview
WarsawJS: Firstapp on SamsungSmart TVplatformPiotr Kowalski @piecioshka
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)
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
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
~/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.
~/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.
~/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.
~/projects/first_app/images/thumb.png
• Small image with dimensions 95x78px
• Available (tested) format: png, bmp, jpg, gif
~/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.
~/projects/widget/first_app.zip
• Remember ignore node_modules directory
• Warning! Packing files, not parent directory!
• The smaller size of file is better
Synchronize warnings
• Permission of files. Be readable for `others`!
• Disable firewall
• Application name
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!
Ideas
• Video player: VOD, DRM, LIVE STREAMING
• Communicator using audio, video
• Voice control application
• Gesture. Use your hand to control device!
• Convergence with mobile
Opportunities
• WebWorkers, WebSocket, WebGL, Canvas
• Connection with social media
• HTML5: tags, localStorage, <video> tag (only VOD)
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?
Resources
• Samsung Development Guide
• Browser Specifications
• Tizen SDK
• Gulp
• Weinre - Web Inspector Remote
• Slides: http://git.io/s8pouQ
See you next
month atWarsawJS
![App Development Guide for Samsung Smart TV[V1.20][1] 3](https://img.pdfslide.net/doc/110x75/545f337cb1af9feb588b4b39/app-development-guide-for-samsung-smart-tvv1201-3.jpg)
![App Development Guide for Samsung Smart TV[V1.20]](https://img.pdfslide.net/doc/110x75/577d20981a28ab4e1e93420d/app-development-guide-for-samsung-smart-tvv120.jpg)
