Creating a Web App

The first step to create a web app is copying fundamental files from a template. The webOS TV SDK provides Bootplate (web application template) as below:

  • Moonstone bootplate: A template for Moonstone UI applied web application.
  • Basic web template: A template general web applications that display "Hello World" message on a screen.

The webOS TV SDK provides JS Service template and config file template (appinfo.json). JS Service template is a general service template which is running as a background service on webOS TV. Config file template provides essential file for webOS TV application which specifies meta data of web application such as an application ID, application name, and related resources.

Use the ares-generate script to create a web application or a JS Service. With the use of ares-generate script, you can list available templates of web application, JS Service, and appinfo.json file. You can also create a web app, JS Service, an appinfo.json file, and icon images from the templates with ares-generate script.

For more detailed information on ares-generate script usage, see Command Line Interface.

Listing Templates

The webOS TV SDK provides several templates. Execute the following command to check the usable template for web application.

ares-generate --list

 

basic           Web App          -                     basic web app for webOS TV

moonstone-2014  Web App          2.3.0-rc              moonstone app for webOS TV 1.0 (2014)

moonstone-2015  Web App          release-2.5.4-pre.16  moonstone app for webOS TV 2.0 (2015)

moonstone-2016  Web App          release-2.6.3-rc.8    moonstone app for webOS TV 3.0 (2016)

moonstone-2017  Web App          release-2.6.4-rc.13   (default) moonstone app for webOS TV 3.5 (2017)

webappinfo      Web App Info     -                     appinfo.json for web app

js_service      JS Service       -                     js service for webOS TV

jsserviceinfo   JS Service Info  -                     services.json, package.json for JS service

enyoicon        Icon             -                     enyo app icon files [80x80, 130x130]

webicon         Icon             -                     web app icon files [80x80, 130x130]

Using a Template

The following sections describe how to get each type of web application template.

Creating a Moonstone Web App

Moonstone is a default template. It provides a sample Moonstone UI web application. Moonstone is based on Enyo Framework. Moonstone added TV specific UI/UX style on Enyo framework.

 

Execute the following command to create a Moonstone web app from the default template (moonstone-2017) to ./sampleApp directory.

ares-generate sampleApp

 

The webOS TV SDK provides several Moonstone web application templates by the supported webOS TV version (model year). You may also specify other moonstone template with the following command.

ares-generate -t moonstone-2015 ./sampleApp

 

The following table is a basic description of the directory structure and files of the Moonstone web app template:

Directory / File

Description

assets

Directory for related resources such as image files

lib

Directory for Libraries

The TV specific libraries and layout libraries are provided by default.

src

Directory for source code

.enyoconfig The .enyoconfig file holds the repository, target version, and library location information of Enyo libraries used in your Enyo app. This file is used for the --init option of ares-generate script. For more information about .enyoconfig file, visit Enyo Developer Tools.

appinfo.json

Web application configuration file

The appinfo.json file includes metadata of web application. This file must exist when packaging web application. See appinfo.json for the detailed description of appinfo.json file.

icon.png

The icon image file

This icon image will be shown on the app tile of launcher UI.

largeicon.png

The large icon image file

This icon image will be shown on the Active Application Information UI.

index.html

Web application main page

This file loads a web applications in build directory which is created by the deployment script. If the build directory does not exist, the debug.html file will be loaded.

package.json

Configuration file of NPM. For more information, see https://docs.npmjs.com/getting-started/using-a-package.json

README.md

Description file of Moonstone bootplate
Before you specify the Enyo framework version, make sure which version of Enyo framework is built in your webOS TV SDK Emulator or webOS TV.

If you want to deploy your app to all webOS TV version, use moonstone-2014 template as below:

ares-generate -t moonstone-2014 ./sampleApp

Creating a Web App 

Basic web bootplate provides a "Hello World" web application with the minimum essential files for webOS TV application. This template is useful when creating a hosted application or using other UI frameworks.

For more detailed information on hosted application. See Creating a Hosted Web Application.

 

Execute the following command to create a web app from template (basic) to ./sampleApp directory.

ares-generate -t basic sampleApp

 

The following table describes the file of Web application that template provides: 

Directory / File

Description

webOSjs-0.1.0

webOS library directory
The TV specific library to call LS API.

appinfo.json

Web application configuration file

appinfo.json file includes metadata of web application. This file must exist when packaging web application. See appinfo.json for the detailed description of appinfo.json file.

 icon.png

The icon image file

This icon image will be shown on the app tile of launcher UI.

largeicon.png

The large icon image file

This icon image will be shown on the Active Application Information UI.

index.html

Web application main page

This page only shows "Hello World" text on a screen.

Creating a JS Service

JS Service template provides a sample JS Service which is running as a background service on webOS TV. Sample JS Service responses simple messages for service request.

Execute the following command to create a JS Service from template (js_service).

ares-generate -t js_service sampleService

 

The following table is a basic description of the files of the sample JS Service:

File

Description

helloclient.js

Simple JS Service which subscribes helloworld_webos_service.JS Service. This sample shows how to communicate between services.

helloworld_webos_service.js

Sample JS Service which provides several simple commands. These commands are specified in the services.json file to use them.

package.json

Configuration file of NPM. For more information, see https://docs.npmjs.com/getting-started/using-a-package.json

services.json

Configuration file defines what commands the service provides on the webOS bus. For more information, See Creating & Using JavaScript Services.

Creating an appinfo.json file from Template

The webappinfo template provides an appinfo.json file with a sample value. If you are building a new web application without templates or using the existing web application which was not made from templates, you should add the appinfo.json file into your application. An appinfo.json file holds the application's name, ID, application type, icon image, and the main page information to the file.

Execute the following command to create the appinfo.json file template (webappinfo).

ares-generate -t webappinfo webApp

 

The webOS TV SDK provides appinfo.json file template as below.

{
    "id": "com.yourdomain.app",
    "version": "0.0.1",
    "vendor": "My Company",
    "type": "web",
    "main": "index.html",
    "title": "singlepane",
    "icon": "icon.png",
    "largeIcon": "largeIcon.png",
}

 

Navigation