Hello World Service (Enyo App)

About Code Sample

In this sample we will create a simple HelloWorld app that will demonstrate how to create a webOS TV service. This sample will also demonstrate how to call the service from an Enyo 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 emulator.

Creating a Project

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

ares-generate -t bootplate-moonstone app

 

Using the -t option we specified to use the bootplate-moonstone 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 will call the service. Using your favorite editor open source/views/views.js and replace the code with the code below.

The enyo.LunaService kind is provided by the enyo-webos library (which is included in the bootplate-moonstone template) and is what you use to call webOS services. By default, the enyo-webos library is commented out of the source/package.js. You should modify the package.js file to use the enyo-webos library.

enyo.kind({
	name: "MyApp.MainView",
	kind: "moon.Panel",
	title: "Hello World",
	classes: "moon main-view",
	components: [
		{name: "service", kind: "enyo.LunaService", service: "luna://com.yourdomain.helloworldservice.service", method: "hello", onComplete: "onComplete"},
		{kind: "moon.Scroller", fit: true, components: [
			{classes: "moon-button-sample-wrapper", components: [
				{kind: "moon.Button", content: "Call Service", ontap: "callService"},
				{name: "nameInput", kind: "moon.Input", placeholder: "Enter your name"},
				{name: "result", kind: "moon.BodyText", content: "Button not pressed yet."}
			]}
		]}
	],
	callService: function(inSender, inEvent) {
		// make sure a name is sent to the service
		var name = this.$.nameInput.get("value") || "Mysterious Stranger";

		this.$.result.set("content", "Calling service with: " + name);
		this.$.service.send({name: name});
	},
	onComplete: function(inSender, inResponse) {
		if (inResponse.returnValue) {
			this.set("title", inResponse.data);
			this.$.result.set("content", "Service responded.");
		} else {
			this.$.result.set("content", "Oooops!  There is a problem with this service.");
		}
	}
});

Writing a Service

Now create a service to an application at a separate directory. Create a new folder called service. You can use any name for 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 we will create the JavaScript file to execute out service. Create a new file called HelloWorldService.js and insert the following JavaScript code. This creates the method that will be called from the app.

var Service = require('webos-service');
var service = new Service("com.yourdomain.helloworldservice.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 emulator or device. Again using the SDK command line tools create the package using the command

ares-package app service

Installing and Launching the App

You can test the JS service app on emulator only. If you test the JS service app with USB on webOS TV using App Test, the JS service does not work properly.

 

Install the package on emulator using

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

 

Once the app has been installed the app can be launched by selecting the app icon on the Launcher bar or it can be launched using the command.

ares-launch com.yourdomain.helloworldservice

 

Once 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. 

 

Service.png

Sample App Source Code

To download the source code for this sample app and service, click here.

Do's and Don'ts

  • DO match the base app ID with the service ID as in this example (com.yourdomain.helloworldservice).
  • DO handle onComplete at least.
  • DON'T expect this to work in a browser.

 

Navigation