By Kevin McNeish on Sat, 11/21/2015
This is part three of the From Inception to App Store series that teaches you how to take an app from the idea phase to final release in the App Store. In my previous post, I discussed how to test your app idea to see if it's viable, using the Robot Tic-Tac-Toe app I created for this series as an example. You can download the app for free from this link.
Three Parts of an App
When laying out your app's architecture, it's important to understand that an app has three main parts. Let's use the main screen of the Robot Tic-Tac-Toe app (Figure 1) to understand what these three parts are.
Figure 1 - The main Robot Tic-Tac-Toe screen
- User Interface - The part of the app that the user sees and interacts with. In Figure 1, it includes the game board, star field background, X's and O's, as well as the player names, pictures, and scores at the bottom of the screen.
- Core Logic - The code that performs actions when a user-interface object is touched or any other process that takes place automatically. For example, when a user taps a square on the game board, the core logic executes to determine if the square is already occupied, and if not, determines the correct mark (X or O) to display in the square. Afterwards, the core logic calculates the next move for the Robot.
- Data - The information and preferences that are maintained by the app. The Robot Tic-Tac-Toe's app data includes the current color and sound themes, the current scores, player names, level of difficulty (and other settings) as well as Game Center leader board and acheivement information.
As I discussed in a previous article on App Architecture, when these three parts are too tightly bound together, you create a situation where you can't change one part of the app without changing another. It also prevents you from running your app on multiple platforms where the user interface and data access must vary.
Where you put your code has everything to do with how easy it is to write, extend, maintain, and port your app to another platform.
Designing with the End in Mind
To illustrate this point, several years ago I was on a flight to Miami, Florida where I was to speak at a software development conference. When my seatmate discovered what I did for a living, he asked if I could help him out. He owned a company that developed medical software and was in a bind.
He told his developers at the outset of the project that he needed the software they were going to create to run on local workstations as well as on the web. Once the desktop version of the app was completed, he asked how they were going to get it to run on the web, and they simply shrugged. They hadn't planned in advance, and had created a monolithic app where the core logic and data access were embedded in teh user interface. It took many months to pull the code apart and create a flexible architecture that allowed the app to run on multiple platforms.
As shown in Figure 2, we want to build a universal app that runs on the following platforms:
- Apple Watch
- Apple TV
Figure 2 - A universal app runs on a variety of Apple's platforms
Now it's time to get down to business and begin creating the app. In this article, we'll create the skeleton for the app and in future articles, we'll fill in the missing pieces as we create an app that can run on all the platforms shown in Figure 2. We'll begin by creating the projects that will contain the various user interfaces for the app.
Creating the iOS Project
Let's start by creating the iPhone/iPad project, which will contain the user interface files for your iOS app.
- Launch Xcode (I'm using Xcode 7 in this series).
- Select File > New > Project... from the Xcode menu.
- On the left side of the dialog under iOS, select Application. On the right side of the dialog, select Single View Application (Figure 3).
Figure 3 - Create a new iOS project
4. Click Next, and in the next step of the dialog (Figure 4), set the following values:
- Product Name - TicTacToe
- Organization Name - The name of your company
- Organization Identifier - A unique identifier, usually your company's url in reverse
- Language - Swift
- Devices - Universal
- Uncheck all check boxes at the bottom of the screen (we'll get to Core Data and Unit Tests later)
Figure 4 - Create a new iOS project, step 2
5. Click Next, and in the Save File dialog, chose a location where you want to store your project and then click Create. You will see the files, products, and targets shown in Figure 5.
Figure 5 - The new iOS project
Creating the Apple Watch Project
Follow these steps to create the Apple Watch Project which will contain the user interface files for your watchOS app.
1. Select File > New > Target... from the Xcode menu. This option adds a new target to your existing project.
2. On the left side of the New Target dialog, under watchOS, select Application (Figure 6). On the right side of the dialog, select WatchKit App for watchOS 1. I'll explain why we chose this option later in this series, but for now, just know that it provides more functionality for our watchOS app.
Figure 6 - Select the WatchKit App for watchOS 1 template
2. Click Next, and in the next step of the dialog, notice the Product Name and other settings at the top of the dialog have already been set for you. Make sure the Language is set to Swift, and the Include Notification Scene and Include Glance Scene checkboxes are both selected. Notice the Embed in Comparison Application at the bottom of the dialog is set to TicTacToe, which is exactly what we want. This associates the watchOS app with the iOS app.
Figure 7 - Creating the WatchKit app, step 2
3. Click Finish, and you will see the Activate dialog shown in Figure 8. Click the Activate button to activate the watchOS app for debugging and testing in the Simulator.
Figure 8 - Activate the watchOS scheme
When you're finished, you will see the new group folders and products on the left, and the new targets on the right (Figure 9).
Figure 9 - The new watchOS products and targets
Creating the Apple TV Project
Follow these steps to create the Apple TV project which will contain the user interface files for your Apple TV app.
1. Select File > New > Target from the Xcode menu.
2. On the left side of the New Target dialog, under tvOS select Application. On the right side of the dialog, select Single View Application.
Figure 10 - Create a new tvOS project
2. Click Next, and in the next step of the dialog, set the Product Name to TicTacToeTV. Make sure Language is set to Swift, and all three checkboxes are unselected.
Figure 11 - Creating the Apple TV project, step 2
3. Click Finish, and you will see the new groups and products on the left and new target on the right (Figure 12).
Figure 12 - The new tvOS project
Kicking the Tires
Although we haven't customized any user interface files, you can run each of the three projects in the Simulator to see how they look. Here are the three options you can select in the Scheme control at the top-left corner of the Xcode window:
- TicTacToe > iPhone 6 Plus (or one of the other iPhone or iPad Simulators)
- TicTacToe WatchKit 1 App > iPhone 6s + Apple Watch 38mm (or 42mm)
- TicTacToeTV > Apple TV 1080p
Just click Xcode's Run button to run each scheme in its associated Simulator. Note that when switching between different Simulators, you may get an error in Xcode. To get around the error, just close the Simulator and click Xcode's Run button again. Also, when running the Apple TV app, you can select Hardware > Show Apple TV Remote to play around with the remote control.
Now that you have a basic UI skeleton for the app, in the next article we will look at iOS, watchOS and tvOS frameworks to see how we can share core logic code between apps.