Javascript in Xcode

October 20, 2023

(Part 3 of 5)

This is the third part of our tvOS tutorial. Please check out the previous Article to know more about this series.

In the client-server tvOS application, your JavaScript code is typically maintained in the server your app connects to. For the purposes of this tutorial, we’ll set up a local server from our Mac.

Note: From now on, we’ll be working with JavaScript code. Personally, I do not recommend using Xcode because of the indentation behaviours associated with working on blank Xcode files. Use an IDE of your choice. I would personally recommend using Visual Studio Code (or) Notepad++.

Client Code

To save the javascript code, select a directory of your choice and create a new folder and name it client. Within the client directory, create another folder and name it js. This folder will serve as the container for your javascript code.

With the IDE of your choice, create a new JavaScript file, name it application.js and save it to your js directory.

Add the following code to application.js:

App.onLaunch = function(options) {
// 1
var alert = createAlert(“Hello World”, “”); //leaving 2nd parameter with an empty string
navigationDocument.presentModal(alert);
}
// 2
var createAlert = function(title, description) {
var alertString = `<?xml version=”1.0″ encoding=”UTF-8″ ?>
<document>
<alertTemplate>
<title>${title}</title>
<description>${description}</description>
</alertTemplate>
</document>`
var parser = new DOMParser();
var alertDoc = parser.parseFromString(alertString, “application/xml”);
return alertDoc
}

App.onLaunch — Method that handles the entry point of the JavaScript.

TVApplicationController — The TVApplicationController that was initialised in AppDelegate.swift will pass on its TVApplicationControllerContext here.

Later, we’ll make use of context’s contents, but for now, we’re just going to create a simple alert to display on screen, to ensure that your app is running without any errors.

Explanation of the code:

Using createAlert defined, we get a TVML document for us to present. The navigationDocument is similar to UINavigationController in iOS. It serves as the stack that can push, pop and present TVML documents.
createAlert is a function that returns a TVML document. It is similar to UIAlertController in iOS.

The createAlert used here is one of the 18 pre-defined templates of Apple’s TVML. Click here to check the remaining templates of TVML. Hurray! Finally, you’re almost ready for your first build and run!

Setting up the Server

Open the terminal tab from your client directory and run the following code:

python3 -m http.server 8000

This starts up a simple Python-based web server in your client directory. Now you’re ready for takeoff!

Go back to your Xcode project and build and run. You should be greeted with your first tvOS TVML app!