eCommerce on the Apple TV

Jamie Holdroyd profile picture Written by: Jamie Holdroyd - Published on: 02 Nov 2015
The fourth generation of the Apple TV is here and we’ve been playing with the development kit over the past few weeks to create quick and easy JavaScript eCommerce applications with our own lightweight SDK. With this new release comes a host of great new features, like Siri integration and for the first time on the device, apps.

While we already have SDKs for Swift and Objective-C, Apple expanded from their usual languages and added a new JavaScript/HTML implementation to tvOS, called TVJS and TVML. These new tools allow us to run client-server applications with TVJS files running sandboxed on a server and the Apple TV consuming them with TVML taking care of the display and markup to Apple’s interface standards.

To get started with Apple TV client-server applications we recommend reading over this post from the Apple developer resources. It will show you how to start a project and set it up for TVJS usage.

Updating the SDK

This combination of tools gives us a very easy way to take the existing Moltin JavaScript tooling and port it over to the Apple TV and get eCommerce apps up and running quickly. The move from native JavaScript to TVJS requires only a few changes to the SDK:

  • There is no window so events are no longer usable
  • Cookies are also unavailable and instead, we make use of the native sessionStorage class

We have now included build targets in the moltin/js-sdk repository which can be used by setting the target flag in a grunt watch task:

  grunt-watch --target tvjs

To include the SDK in your project add it to your client js directory and include it the array to be loaded by the <code>resourceLoader</code> and it will be ready to use:

  var javascriptFiles = [
    "${options.BASEURL}js/ResourceLoader.js",
    "${options.BASEURL}js/Presenter.js",
    "${options.BASEURL}js/moltin.min.js"
];

Authentication

Before starting your main application files you’ll need to authenticate with the API to ensure all calls will be fulfilled correctly. Within your App.onLaunch function, after resources have been loaded add the following:

  moltin.Authenticate({publicId: ‘YOUR_PUBLIC_ID’}, function() {
    // Your app code here
});

Within the authentication method, you should start your initial page display either by an external JS file to output TVML or a class to manipulate the DOM.

Making your first request

Once you have an authenticated the Moltin instance calls and methods are exactly as they are in the regular JS-SDK. To get a list of products you would do the following:

  moltin.Product.List({‘status’: 1, ‘category.slug’: ‘featured’}, function(products) {
    // Do your thing...

At this point, you’re then able to add your output to the TVML to be rendered or append it to the DOM and update your page as requests are fulfilled.

Initial thoughts

After playing around with the SDK for a few weeks now, the new app structure employed on the Apple TV works well, but is not without its issues. Firstly appending and working within the DOM for a TVJS app is a little cumbersome and despite the documentation's claims of implementing the standard DOM structure they have omitted and renamed various methods.

Actually, documentation, in general, is still a little sparse and while this will improve over time there are still gaps to be addressed to help people get up and running quickly.

Over the coming weeks, we’ll be documenting our progress of developing and deploying an application to the Apple TV, as well as hosting options. Once these guides have been published we’ll be open sourcing our example application for you to check out, customize and deploy.

Let's build something amazing with Moltin