How to Build a tvOS Application for Apple TV Tutorial

What is tvOS?

What is TVML, TVJS, and TVMLKit?

TVML

  • alertTemplate — Display important information, such as a message telling the user to perform an action before continuing.
  • catalogTemplate — Display information about groups of like products.
  • compilationTemplate — Display information about one product that is made up of several distinct pieces.
  • descriptiveAlertTemplate — Display a significant amount of important information, such as a Terms of Service page
  • divTemplate — Use this template to create pages that do not conform to a layout defined by another template.
  • formTemplate — Use this template to gather information from the user.
  • listTemplate — Display a list of items; for example, a list of the user’s favorite movies.
  • loadingTemplate — Display a spinner and description of why the spinner is being displayed
  • mainTemplate — Display options to the user; for example, the main page for a movie with options to play the movie, see extra content, and jump to specific scenes.
  • menuBarTemplate — Display a list of selectable items across the top of the screen.
  • oneupTemplate — Display a single, full-screen image. Users can navigate left or right on the remote to select another image. Activating an up action on the remote will shrink the image and allow a description to be displayed.
  • paradeTemplate — Display a list of automatically scrolling, static images on the left that are associated with a selected image category on the right.
  • productBundleTemplate — Display detailed information about a product bundle; for example, a page that describes a television series, including information about the actors, ratings, and series episodes.
  • productTemplate — Display detailed information about a product; for example, a page that describes a movie, including information about the actors, ratings, and like movies.
  • ratingTemplate — Display a rating for an item.
  • searchTemplate — Display a text field that takes user input in order to search for a specific item.
  • showcaseTemplate — Display a row of images with descriptions associated with each image; for example, displaying a set of screenshots to promote a movie.
  • stackTemplate — Display groups of products; for example, displaying different genres of movies.
  • Download the file and unzip it.
  • Open the Xcode Project file in Xcode 7.1 or later.
  • Open your Terminal application and change your directory to downloaded app. Then change directory into the folder called “client”.
  • Run the command ‘python -m SimpleHTTPServer 9001’, without single quotes. This will start up a mini server so that your app can call the JS files. Note: 9001 is defined as the localhost port in the `TVBaseURL` variable.
  • Build the application and voala!

TVJS

TVMLKit

How the tvOS app infrastructure works

Getting Started, Let’s Start Building!

  • Import TVMLKit to your app.
  • Add `TVApplicationControllerDelegate` to the end of the class declaration “AppDelegate”
  • Delete all of the methods in the AppDelgate class
  • A method begins with “func” then the name of the method and parameters after that. The code is within the curly braces.

Javascript to the rescue!

  • Open your Terminal application and change into your app directory and the “client” folder. Here is a gist of the commands you need to run if your directory is on the desktop and the folder is called `hello world`.
  • Run the command ‘python -m SimpleHTTPServer 9001’, without single quotes. This will start up a mini server so that your app can call the JS files. Note: 9001 is defined as the localhost port in the `TVBaseURL` variable.

Quick Recap

Next Steps

--

--

josecasanova.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store