Creating a Web App

From webOS TV 4.0 SDK, CLI does not provide Moonstone templates, which include the Moonstone library. To use the Moonstone library, refer to Enyo/Enact Guides

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

  • Basic web app template: A template of a general web app that displays the "Hello World" message on a screen

  • Hosted web app template: A template of hosted web apps

The webOS TV SDK provides the JS service template and config file template (appinfo.json). JS service template is a general service template that is running as a background service on webOS TV. Config file template provides the necessary file for the webOS TV app that specifies metadata of the web app, such as an app ID, app name, and related resources.

Use the ares-generate command to create a web app or a JS service. You can also create a web app, JS Service, an appinfo.json file, and icon images from the templates with the ares-generate command.

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

Listing Templates

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

ares-generate --list

 

basic          Web App          -  (default) basic web app for webOS TV
hosted_webapp  Hosted Web App   -  hosted web app for webOS TV
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
webicon        Icon             -  web app icon files [80x80, 130x130]

Using a Template

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

Creating a Web App

The basic web template provides a "Hello World" web app with the minimum essential files for webOS TV. This template is useful when using other UI frameworks.

Execute the following command to create a web app to ./sampleApp directory.

ares-generate -t basic sampleApp

The following table describes the files of a web app that templates provide: 

Directory / File

Description

webOSTVjs-1.1.1

The webOS TV library directory.

The webOS TV specific library to call LS API.

appinfo.json

The web app configuration file.

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

 icon.png

The icon image file.

See Key App Assets for the detailed description of the icon.png file.

largeicon.png

The large icon image file.

See Key App Assets for the detailed description of the largeicon.png file.

index.html

The web app's main page.

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

Creating a Hosted Web App

The hosted web app template provides a hosted web app that contains a redirect URL with the minimum essential files for webOS TV.

Execute the following command to create a web app to ./sampleApp directory.

ares-generate -t hosted_webapp hostedSampleApp

The following table describes the files of a hosted web app that the template provides: 

Directory / File

Description

appinfo.json

The web app configuration file.

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

 icon.png

The icon image file.

See Key App Assets for the detailed description of the icon.png file.

largeicon.png

The large icon image file.

See Key App Assets for the detailed description of the largeicon.png file.

index.html

The web app's main page that contains the redirect URL.

Creating a JS Service

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

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

ares-generate -t js_service sample service

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

File

Description

helloclient.js

The simple JS service code which subscribes helloworld_webos_service.js service.

This sample shows how to communicate between services.

helloworld_webos_service.js

The sample JS service code which provides several simple commands.

These commands are specified in the services.json file to use them.

package.json

The configuration file of NPM.

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

services.json

The 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 sample value. If you are building a new web app without templates or using the existing web app which was not made from templates, you should add the appinfo.json file into your app. The appinfo.json file holds the app's name, ID, app 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 the appinfo.json file template as below.

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

 

Navigation