Using Lightning to Develop for Smart TVs part 1 - An in-depth App Tech post

September’s RDK Summit in Amsterdam was an exciting time for anyone who has worked with LightningJS as the team behind the framework unveiled their roadmap. In this blog post, I’ll give my fellow developers the benefit of my experience of doing some testing where I ported Lightning apps to non-RDK devices. 

Before we get started, this blog assumes you’ve already built an app in Lightning that you want to port to one of these big screen devices. If you’re not already that familiar with Lightning, you might want to take a look at my previous blog posts on my personal blog, including “introduction to Lightning” and “getting started with Lightning.” 

This blog will cover the following topics: 

• Generating a build of your Lightning app
• Deploying to Samsung Tizen
• Deploying to LG WebOS
• Deploying to AndroidTV and FireTV
• Next Steps
• Conclusion

Generating a build of your Lightning app

The Lightning CLI comes with several executable commands that you can use to generate builds. While for the Metrological Appstore you would normally execute lng build and lng upload to create and upload the build, for other devices I used a different command (or rather, commands).

In the image above you’ll see two different commands that I needed to execute. These commands both execute the exact same thing, but there’s a slight difference. The ‘es5’ flag transpiles the code to an older version of javascript, which is needed to run on some ‘older’ televisions. Next to that, I also created a ‘regular’ ES6 build that can be used on modern televisions.

The output of these commands is a dist folder, as shown below, that contains all of the files needed to run on a television. These files comprise the actual Lightning application, and come with an index.html that will be the entry-point of the application — similar to how normal websites are built.

So now we have a deployable build of the app, let’s look at how we deploy it to the different device platforms. 

Deploying to Samsung Tizen

There are several ways of deploying an application to Samsung Tizen. In both cases you’ll need to download tooling from Samsung, and obviously have access to a physical television. While it is also possible to run your application in an emulator for Samsung, LG or AndroidTV, not all functionality of your app (mainly video playback) is likely to work, so it’s not a great way to test your application. 

Before you go any further, I recommend you also download and install Tizen Studio. This software comes bundled with the Samsung TV SDK, that also comes with an Emulator and debugging tooling.

There are a few main ways to include your application code into the Samsung-scaffolded project:
1. All application files included
2. A website redirect
3. A hybrid setup

Let’s look at these options in turn: 

1. Application files included - The first option is of course the easiest to execute. All you’ll have to do is copy the files in the dist folder as generated by our earlier command, and place them into the scaffolded project. That’s all it takes. You’re now ready to either package the application for production, or deploy it to a TV or emulator for testing purposes. For instructions on installing the app on a physical television or emulator, please refer to the official Samsung documentation.

The benefit of this approach is that all your code is already downloaded to the device when the app is installed. However, the downside is that you have no means of updating the application other than submitting a new version to Samsung.

2. Website redirect - Making your app available as a redirect requires your app code to be hosted on a publicly accessible domain (e.g. mylightningapp.mydomain.com). You can then instruct the Tizen package to immediately browse to the domain for loading the app. So in order to do that you’ll have to execute the following steps:

• Remove all of the unused app-files from your scaffolded project (index.html has to stay)
• Implement a redirect in the index.html file (see image below). Of course, there are other ways to redirect in javascript. For example you could also use meta tags. 

There is one important point to note with this approach. Samsung Tizen has its own APIs that allow you to interact with the television itself (often available via the tizen and webapis objects in code). However, these are NOT available for hosted applications unless you specifically ask Samsung Tizen for that permission. And they’ll only give that permission to Samsung-registered partners.

The benefit of using the redirect approach is that you won’t have to submit applications to Samsung’s Appstore for each minor bugfix. I would still advise you to submit major updates, however. One downside is that the application code is not downloaded to the device when the app is downloaded, rather it loads the website each time. As mentioned above, you’ll also need a Samsung partnership to access the full set of Tizen APIs

3. Hybrid setup - Last but not least, the hybrid setup gives you a bit of a ‘best of both worlds’ setup. The difference between a redirect and a hybrid setup, is that you’ll instruct the index.html in the Tizen project to load the actual javascript files. By using this approach, you actually load the application from the device (rather than redirecting to the website). This means you’ll have access to the Tizen APIs without needing the partner permission.

It’s fairly easy to implement this functionality, and follows steps similar to the website redirect  - as shown in the image below:

• Remove all of the unused app-files from your scaffolded project (index.html has to stay)
• Copy the index.html from your dist folder into the Tizen project
• Adjust the javascript files to be retrieved from your website, rather than relative to the application path

As you might expect from the text above, the benefits of this hybrid approach are that you won’t have to submit applications to Samsung’s Appstore for each minor bugfix and you won’t need Samsung partnership status. However, with the hybrid approach the majority of the application code is still not downloaded to the device when the app is downloaded, rather it loads the javascript each time. 

Deploying your application to an Emulator or Samsung TV

Now that you have your application ready to use, you’ll need to see if it works on an actual device (or emulator). For that I would really recommend following the official documentation once more, since this step largely depends on whether you want to use the CLI or Tizen Studio; as well as deploying to an emulator or real device.

• Deploying to a real device
• Deploying to an emulator

Deploying to LG WebOS

Luckily, LG actually follows a similar approach to Samsung, so the three options I’ve just outlined (App files included, redirect and hybrid) are all available for LG, too. The only difference is in the tooling used to scaffold the application, and in the way it’s deployed to the device.

LG previously made use of their ‘WebOS IDE’, but since the start of 2022 this has been deprecated in favour of using a VS Code extension. For that extension to work, you’ll also need to install the WebOS CLI separately from the extension. Once again, I’m going to refer you to the official documentation for installing these two: CLI and VS Code extension.

Scaffolding and applying our application method of choice‍

First, you’ll need to scaffold your application using the instructions here. What you’ll find after scaffolding is a similar setup to a Samsung-scaffolded application shown above. There is an index.html which is the entry point of your application, and some other files explaining how the app behaves on TV (appinfo.json, certain logo images).

When you’ve scaffolded the app, the next step is exactly the same as I explained above for Samsung. You need to choose the “application files included,” “website redirect,” or “hybrid setup” option and make the appropriate changes to your code. The pros and cons of these approaches are the same as with Samsung, although you do not require any specific permissions for LG WebOS to use the website redirect method. 

Deploying your application to an Emulator or LG TV

Once you’ve made your application files ready for use, you can start deploying your Lightning application to a TV or emulator - again, as mentioned above, you may find important functions don’t work on an emulator. LG’s instructions for deployment can be found here.

Deploying to AndroidTV and FireTV

While LG and Samsung both offer ‘native’ support for running web-based applications, it’s not that easy for AndroidTV (and FireTV). Before you get started, you’ll need to install ‘AndroidTV Studio’. This is the IDE of choice for Android development, and comes with all the tools you’ll need to scaffold, build and deploy our application.

Scaffold your application

There are many steps required for scaffolding an application for Android TV. I always prefer to signpost the official documentation where possible, as that’s more likely to stay up to date. So here is the documentation for scaffolding an Android TV app.

Implementing a Webview

You might have heard of tools like Apache Cordova or Capacitor before. These are tools that allow you to run a website inside a mobile application, often leveraging native APIs to access the camera and native components. In this case we’ll be implementing our WebView, since we have a fairly simple request for the device: just load the url.

First you’ll need to add a WebView to your application. You can either choose to add it to your so-called app layout, or programatically add it when the application is created (you’ll find all code in the image below). Then all you need to do is to instruct that WebView to load the website where we’ve hosted our URL, and you’re almost there. But, before you do, make sure that the WebView has the option to run Javascript. This functionality is disabled by default. In the end you’ll get the following code:

Deploying to emulator or physical Android (/Fire)TV device

Now that you have your webview implemented, you can test out the application. At the risk of sounding like a guitar with just one string here, I’ll refer you to the official documentation on deploying your application. It’s the easiest and most well-documented way to get you going. 

There are other, and in my eyes, better ways to specifically work with Android TV devices. We’ll get into some of those in my next blog post. 

Next steps

With all the above information, you should have been able to run your Lightning application on various TV brands from LG, Samsung, and any running Android TV or Fire TV. There are of course still some steps to take in order to make this a production-ready application, to name a few:

• Correct tv-remote key-mapping - You’ll probably have noticed that not all keys will work on all devices. This is because Lightning comes with a default mapping of keys that doesn’t match with the keys on the TV remote. For example, the ‘back’ button is key code ‘8’ by default in Lightning, while it is key code ‘10009’ on Samsung.
• App-package logos and other metadata - There is a world of options available in the various app files for the various brands. You’ll need to update the logo images that are referenced, but also look at language support, device-orientation support, and a whole lot more.
• Implementing device-specific behaviour - While your application may run well now, there are things you’ll need to handle that are specific to the device in question. Samsung and LG have different ways of exiting out the application, for example, and you’ll need to handle both of them. This might apply to network-loss, video playback and others.

Conclusion

As you can see, it’s definitely possible (and even fairly easy) to implement and run a Lightning application on a subset of SmartTVs. More importantly, my testing showed Lightning applications perform incredibly well on SmartTV devices, even low-end ones. And that’s something you definitely cannot say from most other web-based solutions.

So that’s the technical bit - demonstrating that you CAN run Lightning apps on Smart TVs. Now comes the big question: SHOULD you run Lightning apps on Smart TVs? That’s the topic of my next blog. 

By Matthijs Langedijk, App Tech Strategy Lead at 24i

If you’d like to talk to our experts about your Smart TV development project, book a meeting here: