Hello World Service (Web App)

About Code Sample

In this sample, we will create a simple HelloWorld app that demonstrates how to create a webOS TV service. This sample will also demonstrate how to call the service from any web app and display the response. We will be using the webOS TV SDK command line tools to create the app and service, as well as packaging and installing the app on the target device.

Creating a Project

To start, we will create a new app project using the following command.

ares-generate -t basic app

Using the -t option, we specified to use the bootplate-web template. Also, we used "app" for app directory name for which any name can be used.

See Using webOS TV CLI for information on CLI commands used in this guide such as ares-generate, ares-package, ares-install, and ares-launch.

Writing an App

We now have a skeleton project on which to build the HelloWorld app and service from. Before you start writing an app, open appinfo.json and specify the app name at "id:" field. In this code sample, I set it to com.yourdomain.helloworldservice.

First, we will create the app that calls the service. Using your favorite editor, open index.html and replace the code with the code below.

<script type="text/javascript" src="webOSTVjs-1.1.0/webOSTV.js"></script>

<head>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="lib/webOS.js"></script>
</head>
<body>
	<div><h1>JS SERVICE SAMPLE</h1>
	<input type="button" value="CALL SERVICE" onclick="displayReponse()" class="btn">
	<input type="text" id="input" class="btn">
	<p id="result1"></p>
	<p id="result2"></p>
	</div>
</body>

In the application source file, js/script.js, insert the following code which uses webOS.service.request to call service. Also, add the functions for displaying the response from the service.

function displayReponse()
{
	var tmp = document.getElementById("input").value;
	var request = webOS.service.request("luna://com.yourdomain.helloworldservice.service/", {
		method:"hello",
		parameters: {name: tmp},	
		onFailure: showFailure,
		onComplete: showResponse,
	//	subscribe = false,
	//	resubscribe = false
	});
}

function showResponse(inResponse)	{
	if(inResponse.returnValue) {
		document.getElementById("result1").innerHTML = inResponse.data;		
		document.getElementById("result2").innerHTML = "Service Responded";		
	}
	else {
		document.getElementById("result1").innerHTML = "Failed!";
	}
	return true;
}

function showFailure(inError){
	document.getElementById("result1").innerHTML = "Failed!";
}

Writing a Service

Now create a service to an app in a separate directory. Create a new folder called service. You can use any name for the service folder. A service is made up of three files, which we will add in order. 

First, create a new file called services.json and insert the following code. This file defines our service and the methods available to be called on it.

{
	"id": "com.yourdomain.helloworldservice.service",
	"description" : "Hello World Service Example Service",
	"services" : [
		{
			"name": "com.yourdomain.helloworldservice.service",
			"description": "Hello World Service Example Service",
			"commands": [
				{
					"name": "hello",
					"description": "Responds with the parameter given; echo service",
					"public": true
				}
			]
		}
	]
}

Next, create a new file called package.json and insert the following code.

{
	"name": "com.yourdomain.helloworldservice.service",
	"main": "HelloWorldService.js"
}

Finally, create a new file called HelloWorldService.js and insert the following JavaScript code to execute the service. This creates the method that is called from the app.

var Service = require('webos-service');
var service = new Service("com.yourdomain.test.service");

service.register("hello", function(message) {
	message.respond({
		data: "Hello, " + message.payload.name + "!"
	});
});

Packaging the App

We are now ready to package our app and test it on the target device. Create the package using the following command.

ares-package app service

Installing and Launching the App

Install the package on the target device using the ares-install command.

ares-install com.yourdomain.helloworldservice_0.0.1_all.ipk

After you install the app, you can launch the app by selecting the app icon on the Launcher bar or executing the following command.

ares-launch com.yourdomain.helloworldservice

After the app is running, enter your name in the text box, then click CALL SERVICE button. The app will call the service with the name entered as a parameter and return the "Hello" response. 

servicesample.png

Sample App Source Code

To download the source code for this sample app and service, click webOS-service-HelloWorld_Non_Enyo.zip.

Do's and Don'ts

  • DO match the base app ID with the service ID as in this example (com.yourdomain.helloworldservice).

  • DO handle the onComplete event at least.

  • DON'T expect this to work in a browser.

Navigation