Creating a Web App

From webOS TV 4.0 SDK, CLI does not provide Moonstone templates of Enyo. 

  • For creating an Enyo-based app, refer to Enyo site.
  • For creating an Enact-based app, refer to Enact site.

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

  • Basic web app template: A template of general web applications that display "Hello World" message on a screen.

  • Hosted web app template: A template of hosted web applications.

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 the essential file for webOS TV application which specifies metadata of web application such as an application ID, application name, and related resources.

Use the ares-generate command to create a web application 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 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 your web application.

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 application template.

Creating a Web App

Basic web template provides a "Hello World" web application with the minimum essential files for webOS TV application. 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 application that template provides: 

Directory / File

Description

webOSjs-0.1.0

The webOS library directory.

The TV specific library to call LS API.

appinfo.json

The 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

The web application 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 application that contains a redirect URL with the minimum essential files for webOS TV application.

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 application that template provides: 

Directory / File

Description

appinfo.json

The 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 the 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

The web application main page that contains the redirect URL.

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 a service request.

Execute the following command to create a JS Service from the 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

The simple JS service code which subscribes helloworld_webos_service.sj 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 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.domain.app",
    "version": "0.0.1",
    "vendor": "My Company",
    "type": "web",
    "main": "index.html",
    "title": "new app",
    "icon": "icon.png",
    "largeIcon": "largeIcon.png",
}

 

Navigation