Introduction to tvOS: Getting Started

10-aTVSim1

On September 9th  2015,  Apple announced its 4th generation Apple TV, which featured the first major updates to the device since the Apple TV 2 launched in 2010. Physically, the Apple TV 4 is a bit taller than its predecessors. It sports a USB-C port and a new Siri-enabled remote, complete with a gyroscope, an accelerometer, and a glass touchpad for navigation. The new Apple TV model also uses Apple’s A8 chip, which debuted in the iPhone 6 and 6 Plus in 2014. However, of all of its enhanced features, the most novel innovation on Apple TV 4 is its software: tvOS.

TvOS is 95% the iOS 9 software that is used on the iPhone, with necessary adjustments that account for larger screen sizes and different input devices. Without a doubt, the introduction of tvOS has revolutionized the Apple TV by greatly expanding its use and the way users engage with it. As Apple CEO Tim Cook put it, “The future of TV is apps.”

This 3-part tutorial will walk you through the creation of a basic tvOS application: a simple, multiple-choice quiz game, using Swift.

Note: To complete this tutorial, you will need some iOS development experience and must be running Xcode 7.1 or later.

Project Setup

First let’s set up the project.

Start by opening up Xcode and creating a new tvOS project. tvOS>Single View Application

1.singleViewApp

Click Next, and set up the project using the image below as a guide.

2-nameApp

I have named my project tvOSStarter (feel free to use a different name if you would like).

Note: Users running Xcode 7.1 will not have the check box for “UI Tests.” It is important to check the box for “Use Core Data,” which will factor into Part 2 of this tutorial.

For this tutorial, we will be using Swift. TvOS applications can also be written in Objective C.

3-menuFin

Once you have set up your project, you should take a quick peek at the left side bar (The Navigator). If you are familiar with iOS development using Xcode,  you should notice that the application structure is similar to an iOS application.

User Interface

Now that the project is set up, turn to the storyboard.

4-storyboard

If you don’t see a screen like the one above, you will first need to hit Command – to zoom out. The new Apple TV runs applications at a resolution of 1920×1080 (running at 1x scale). This is different and distinct from the iPhone 6/6s, which run applications at a 2x scale, and the iPhone 6/6s Plus, which run applications at a 3x scale. Conceptually, this is an important detail to understand before importing assets to use in the interface. Now let’s get started building our quiz game’s user interface (UI). The goal is to build all components of the UI and then customize the content.

First, add a Button to your storyboard. Then, set the width to 930 and the height to 284. This will be one of the buttons for our multiple choice (4 choices) quiz game.

5.buttonAdd

Now copy the button and paste it 3 times.

6-buttonSize

You should now have four buttons to be placed symmetrically on the storyboard. I placed the buttons 20 pixels from the edge of the storyboard with a 20-pixel buffer between one another. The dimensions of the buttons can vary based on your preference but they should be organized in a logical manner and appropriately spaced. Check the zoomed out screenshot below for guidance.

Note: It is important not to place the buttons too close together since tvOS automatically magnifies the size of a button when it is selected.

7-zoomOutbutton

Once the buttons have been created, we will customize the answer choices. This quiz question will focus on dessert so, the button labels, which represent the answer choices, will have to be changed accordingly. For this tutorial, I have chosen to use four pie flavors (Sweet Potato, Apple, Blueberry, and Strawberry Rhubarb). Feel free to choose your favorite pies or else, use these same choices I’ve indicated above.

To test to make sure that everything works, hit Command – r or the play button to run your application. Once your simulator is running, hit Command-Shift-R to reveal the simulated Siri Remote. Hold the option key and swipe your mouse over the remote (to simulate swiping across the glass surface) to move between your buttons.

Congratulations, you have now built an Apple TV application!

Although we have not yet written a line of code, the remote knows how to move between your buttons. This is a great feature of tvOS. Apple refers to moving from button to button (or between any 2 UI elements) as “changing the current focus item.” In tvOS, there is no need to write code to make your UI elements ‘focusable’ as long as they are in a logical order.

Now that the user has these 4 choices, we must create the question. To do this, add a label to the storyboard, just above your buttons. I decided to ask my user about Ernest Hemingway’s pie habit (feel free to use your own question), specifically asking, “What was Hemingway’s favorite flavor of pie?”

8.label...

Be sure to increase the size of your label and your font to ensure that it is legible from a distance. Since the user will be viewing the app on a television screen, these details are important.

Note: We did not use any autoLayout for this simple project due to the screen resolution factors mentioned earlier. As a reminder, tvOS is designed around a 1x resolution so, what you see in your Xcode storyboard is what you will get in the simulator.

Now let’s get coding!

Building Functionality

Open up your view controller. Replace the viewcontroller class with the following code:


class ViewController: UIViewController {

    @IBAction func button0Pressed(sender: AnyObject) {
        showAlert("Wrong!", title: "Bummer, you got it wrong!")
    }
    
    @IBAction func button1Pressed(sender: AnyObject) {
        showAlert("Wrong!", title: "Bummer, you got it wrong!")
    }
    
    @IBAction func button2Pressed(sender: AnyObject) {
        showAlert("Wrong!", title: "Bummer, you got it wrong!")
    }
    
    @IBAction func button3Pressed(sender: AnyObject) {
        showAlert("Correct!", title: "Whoo! That is the correct response")
    }
    
    func showAlert(status: String, title:String) {
        let alertController = UIAlertController(title: status, message: title, preferredStyle: .Alert)
        let cancelAction = UIAlertAction(title: "Cancel", style: .Cancel) { (action) in  
        }
        alertController.addAction(cancelAction)
        
        let ok = UIAlertAction(title: "OK", style: .Default) { (action) in
        }
        alertController.addAction(ok)
        self.presentViewController(alertController, animated: true) {
        }
    }

    //MARK: System Methods
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

Now, let’s wire the buttons to our @IBAction functions. In iOS we would typically wire up the ‘Touch up inside’ property, but in tvOS that will not work. This is because TouchUpInside is triggered by actual touches. Instead, we will wire up PrimaryActionTriggered to register the click from our Siri remote.

9-wireUp

Once all four buttons are wired up accordingly, run the application again.

10-aTVSim1

I have decided that Ernest Hemingway’s favorite flavor of pie is Strawberry Rhubarb* (the fourth button).
* This is not a historical fact, just a decision I made to illustrate the quiz functionality.

11-aTVSimAlert

When you click on a button, the UIAlert should appear and tell you if the answer is correct or not.

Congratulations on creating your very own quiz game for tvOS!

Conclusion

The Apple TV 4 is a new device that contains new user input methods, which means we must create new design paradigms. Hopefully you now have a strong understanding of the basics of tvOS and how it differs from iOS. The price point of applications on the tvOS store averages $2.99. That coupled with the small number of applications currently for sale in the Apple store (relative to iOS) make the TV is a great place to release your first application.

This concludes part 1 of the tutorial. In part 2 of this tutorial we will use core data to store a range of questions and we will introduce some game logic.

-Miles