configurations helloworld IMEShell language Login scenes SSO

Hello Samsung Smart TV world (installation, creation and deploy of an app)!

Hello everyone!

What you’ll find in this blog are just quick tips for implementing applications that run on Samsung televisions. So get ready to find short but detailed posts, not too many words.

Installation

The first time you will approach to develop an app developed on Internet@TV platform, you need to download and install SDK:

  1. Create a Samsung account or signin to http://www.samsungdforum.com/Devtools/Sdkdownload
  2. Actually there are 2 SDK: 3.0 alpha and 2.5.1. I’m going to use 2.5.1 because it’s stable, the 3.0 alpha doesn’t still have all the features activated
  3. Within the SDK you get four tools: a visual designer, a development environment, an emulator and Apache Web Server
  4. If you already have Apache installed you can skip to reinstall it. You can choose another Web server too, like IIS, but it’s important that you set it to port 80 in order to be able to deploy your app on the TV. Yep, TV must be connected to internet, ping your server and upload the app from the server to the TV

Create your first app

You can choose between 3 type s of projects: Basic, Flash and JS (JavaScript). Even if you want to deploy a JS project I suggest a Basic one because with JS projects you cannot create scenes in a simple manner. A scene is an HTML file with its CSS and JS associated files.

New Project window

You will be prompted to modify project settings. You can modify them later in config.xml (a file in your project). See App development guide on SamsungDforum.com for a full list of config parameters.

Let’s check your main project files:

  • index.html is the main page that will acts as a background scene. Everything you put on it will be shown on all the scenes:
    <html>
        <head>
            <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
            <title>Hello World</title>
            <!– samsung libs that you have to import –>
            <script type=’text/javascript’ language=’javascript’ src=’$MANAGER_WIDGET/Common/jquery.js’></script>
            <script type=’text/javascript’ language=’javascript’ src=’$MANAGER_WIDGET/Common/core.js’></script>
            <script type=”text/javascript” language=”javascript” src=”$MANAGER_WIDGET/Common/API/Widget.js”></script>
            <!– custom files –>
            <script type=”text/javascript” language=”javascript” src=”yourcustomjs.js”></script>
            <link rel=”stylesheet” href=”yourcustomcss.css” type=”text/css”>
        </head>
        <body>
            <h1>This is my first app</h1>    
        </body>
    </html>
  • init.js a js file called whe the app start (onStart() method). Here you can put $.sfScene.show(‘Scene1′); to show Scene1.html “phisically” above index.htm
    alert(“init.js loaded”);
    function onStart () {
        // TODO : Add your Initilize code here
        // NOTE : In order to start your app, call “sf.start()” at the end of this function!!
        $.sfScene.show(‘Scene1′);
        $.sfScene.focus(‘Scene1′);
    }
  • Scenes1.html  is a scene create by default, with a CSS file (Scenes1.css) and a JS one (Scenes1.js). If you rename it all 3 files will be renamed. It is only the <body> HTML page, it doens’t have <header>
  • config.xml where you can set the author name, icons and app name:
    <widget>
    <ThumbIcon itemtype=”string”>icon/ICO4.png</ThumbIcon>
    <BigThumbIcon itemtype=”string”>icon/ICO3.png</BigThumbIcon>
    <ListIcon itemtype=”string”>icon/ICO5.png</ListIcon>
    <BigListIcon itemtype=”string”>icon/ICO6.png</BigListIcon><previewjs itemtype=”string”></previewjs>
    <preicon itemtype=”string”></preicon>
    <cpname itemtype=”string”>App Name</cpname>
    <cplogo itemtype=”string”></cplogo>
    <cpauthjs itemtype=”string”></cpauthjs>
    <ver itemtype=”string”></ver>
    <mgrver itemtype=”string”></mgrver>
    <fullwidget itemtype=”boolean”>y</fullwidget>
    <srcctl itemtype=”boolean”>y</srcctl>
    <ticker itemtype=”boolean”>n</ticker>
    <childlock itemtype=”boolean”>n</childlock>
    <audiomute itemtype=”boolean”>n</audiomute>
    <videomute itemtype=”boolean”>n</videomute>
    <dcont itemtype=”boolean”>y</dcont><type itemtype=”string”>user</type>
    <category>information</category><widgetname itemtype=”string”>App Nsme</widgetname>
    <description itemtype=”string”>App desc</description>
    <width itemtype=”number”>960</width>
    <height itemtype=”number”>540</height>
    <author itemtype=”group”>
    <name itemtype=”string”>Lorenzo Radice</name>
    <email itemtype=”string”></email>
    <link itemtype=”string”>http://smarttvnotes.wordpress.com/</link&gt;
    <organization itemtype=”string”>smarttvnotes</organization>
    </author>
    </widget>

Deploy Deploy Deploy!

  • Menu > Tools > Preferences > Server: If you use the Apache Server installed within the SDK just select the first option (“Use Apache isntallation folder”), otherwise just fill the virtual directory folder with the server path where you’ll deploy the app, e.g. C:\Program Files\Apache Software Foundation\Apache2.2\htdocs
server settings image

Server settings

  • Menu > project > packaging: fill with “package name – version number – region – date”, check “Update the packaged files on the server” and insert a title (HelloWorld). Click on Packaging
  • Go to web server folder: a new Widget folder has been created and populated with the package that has to be deployed on the TV
  • Turn on your TV >internet@tv > login > develop (first time you have to create the developer account: app manager > settings and create new user develop. User MUST be named develop!)
  • To upload your package:  app manager > settings > Development:  set server ip and then click on User application syncronization

TV screen of settings

Done ! If User application sync is not working turn off firewall + cancel widgetlist.xml on web server deploy dir and redo the package from the development environment

Useful links

[HelloWorld] http://www.greenhughes.com/content/quothello-worldquot-app-samsung-internettv

[SDK, docs] http://www.samsungdforum.com/

About these ads

9 Comments on “Hello Samsung Smart TV world (installation, creation and deploy of an app)!”

  1. rifa says:

    It is not working at all.
    isn’t there some good and detail tutorial for the beginners.
    and I don’t know, how do you link between the scenes , htmls, and stylesheets.
    My app doesnot even go to init. even though I start the app nothing happens
    Just a black screen appears.
    and there is no good debugur where you can debug.

  2. rifa says:

    a scene app is giving me an error on the code:

    23 var arrPathToIncluded = new Array();
    24 arrPathToIncluded.push(‘app/Controller.js’);
    25
    26 sf.core.loadJS(arrPathToIncluded, function(){
    27
    28 Controller.initialize();
    29
    30 Controller.start();
    31
    32 });

    and the error is:

    File : file:/localhost/C:/Program Files/SAMSUNG/Samsung TV SDK(3.0.a)/Apps/Saudi Football News/app/init.js
    Line No : 26
    Error Detail : ReferenceError: sf is not defined

    help please

  3. famemaster says:

    well it is well-explained in http://jungligeek.blogspot.com/
    the xml parser is in ajax and is pretty friendly in use and well explained.
    But you can use it without much knowledge of javascript and ajax

    http://jungligeek.blogspot.com/2012/04/xml-parser-in-javascript-html-and.html

  4. afraz says:

    I have started javascript project and was facing some problems but this guy helps a lot. http://zageek.hubpages.com/hub/A-HelloWorld-App-for-Samsung-Smart-Tv. But still one cannot start fully and understand it through samsung guide.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.