Site Logo

Build Your First App for webOS TV

Web apps for webOS TV are basically very similar to standard web apps. Further, they are given access to hardware and OS features typically available for native apps. So if you have an experience in building web apps, you can start developing web apps for webOS TV easily, with your knowledge in standards-based web technologies, such as HTML, CSS, and JavaScript. For information about using standard web API in developing a web app for webOS TV, see Supported web API.

Here’s how you build your first app for webOS TV. You can do it with webOS CLI or webOS Studio depending upon your preference.

Tip
In each step with webOS CLI, you will be guided to enter your app or device information. If you enter this information, the following command syntax will be customized for you. It is optional, but we recommend you give the information. It will help understand the syntax a lot more than when it is with the default values.

Create an app

  1. Download and install webOS CLI.
  2. Create a new app with the ares-generate command. With this example, you will use a template named basic to generate a new app.
    ares-generate -t basic ./sampleApp
  3. Type in app id, title, and version.
    ? app id com.domain.app
? title new app
? version 0.0.1
    If the app is successfully generated, you will see Success.
    Generating basic in ./sampleApp Success
  4. Check if the sampleApp directory is created.
  1. Install webOS Studio.
  2. Click the + button in the APPS IN WORKSPACE view.
    Creating apps or services on webOS StudioOr Execute webOS: Create ProjectWizard in the Command Palette.
    The Project Wizard window will be displayed on the right side.
  3. On the Project Wizard window, select TV at webOS Product and Default at API Version and click Generate Project.
  4. Select Basic Web App template and click Next.
  5. Enter your project information, such as Project Location, Project Name, and App or Service ID, and click Finish.
  6. Check if your app is added to the app list in the APPS IN WORKSPACE view.

Now you have your first web app created! You can try running the app on the simulator, or if you have a real TV device and want to test the app on it, you can run it on the device after packaging and installing the app.

Launch the app on the simulator

  1. Download and install the webOS TV Simulator.
  2. Launch your app on the simulator with the area-launch command.
    ares-launch -s 24 ./sampleApp
  1. Download and install the >webOS TV Simulator.
  2. Run your app on the Simulator by doing one of the following:
    • Right-click your app in the APPS IN WORKSPACE view and select webOS TV: Run on Simulator,
    • Right-click the simulator to use in the Simulator Manager view and select Run App, or
    • Select webOS TV: Run on Simulator from the Command Palette (Ctrl+Shift+P).
    For details, see webOS Studio Developer Guide.

If the app is successfully launched, you will see Hello, World! on the simulator.

Package, install, and launch the app on a TV device

To test the app on a TV device, you first need to install Developer Mode app and connect your PC with the TV device. For how, see Developer Mode App.

  1. Package the app in the sampleApp directory with the ares-package command.
    You can specify a directory where the package file is to be created using the -o option.
    ares-package ./sampleApp
    If packaging is successful, you can see the created package (.ipk) file in the current working directory.
  2. Install the package file to the TV device with the ares-install command. Be sure to type correctly the file name of your package correctly.
    If you have specified the directory to save the package file using the -o option in the previous step, you need to specify the path as well.
    ares-install -d myTV com.domain.app_0.0.1_all.ipk
  3. Launch the app on the TV device with the area-launch command.
    ares-launch -d myTV com.domain.app

  1. In the APPS IN WORKSPACE view, click the Run App button on the right of your app. This will trigger packaging, installing, and launching of your app in sequence.Run app on webOS StudioOr you can do these separately by right-clicking the app and selecting the operation you want, or electing the operation from the Command Palette (Ctrl+Shift+P) and selecting the app. For details, see webOS Studio Developer Guide.
  2. Enter the information about the app. If you use the default information, just press the Enter key.

If the app is successfully launched, you will see Hello, World! on the TV device.

See also

Here's the list of recommended activities you can do next.
  • To create a hosted web app, go to Hosted web app. If you are planning on an app that requires continuous update, a hosted web app is a good choice.
  • To learn about the lifecycle of an app, go to App Lifecycle. Understanding the app lifecycle will help you have a rough sketch on how your app will work.
  • To learn about JS services on webOS, go to JS Service Basics. JS services allow your app to do some work, even when it is not running.
No Headings