WarsawJS Slides: First app on Samsung Smart TV

We talk about JavaScript. Each month in Warsaw, Poland.

Speaker

Piotr Kowalski

"First app on Samsung Smart TV platform"

2014-09-16

@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>
                </widget>

~/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>
                </html>

~/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');
                 }
                };

~/projects/first_app/images/thumb.png

~/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>
                 </list>
                </rsp>

~/projects/widget/first_app.zip

Synchronize warnings

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

Opportunities

Samples applications

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?

Links

See you next month at WarsawJS

Fork me on Github

Fullscreen