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.
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.
The ares-generate command requires Git and internet connection. So, before you use the command,
-
Check if Git is installed on your system, and set up Git if it is not already installed.
-
Make sure the system is connected to the internet.
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.
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).
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).
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",
}