By Kevin McNeish on Thu, 11/05/2015
It takes a lot of work to get an app from the idea phase (inception) to actual release in the App Store. It's far more work than you ever imagined it might be, but when you see the final product available in the store, it's all worth it!
There are many questions surrounding the process. For example:
- How do you best design an app so it runs on a variety of platforms, including iOS, Apple Watch, and tvOS?
- How can you design your app so it easily adapts to constant changes in Apple technologies, and allows you to easily add new features?
- What factors should you consider when deciding how to earn money from your app?
- When and how do you integrate with social media such as Facebook and Twitter?
- What are best practices for integrating with Apple's Game Center?
- How do you incorporate In-App Purchases?
- What's the best way to get feedback from your users?
- How can you minimize your risk of rejection as you prepare your app for the App Store?
- What are the steps for submitting your app to the App Store?
This is the first in a series of articles that answers these questions and provides technical details broken down in terms that even beginner developers can understand. Throughout the series, I'll even provide code libraries you can use in your own apps that make the whole process much easier!
Using a Real App: Robot Tic-Tac-Toe
I have created a real app for this purpose, Robot Tic-Tac-Toe that is currently in the App Store, and has therefore gone through the whole process of being tested and accepted by Apple. The app was written in Swift 2.1 with Xcode 7.1 and runs on the iPhone, iPad, Apple Watch, and (soon) Apple TV. You can download it free of charge from the App Store at this link.
My intention was to create a simple game most people are familiar with, so the series doesn't get bogged down in the details of the game. It is integrated with Game Center (optional) and also contains In-App purchases, so you can see how those technologies work.
To start, let's get an overview of the app so you can familiarize yourself with its features before we dive into the technologies.
Figure 1 shows the app's main screen. The top of the screen displays an animation of the Robot floating in space, waiting to play the game (along with some futuristic background sounds). The bottom half of the screen lists the game options.
Figure 1 - The main scene
Here is a description of each option:
- Play the Robot - Play Tic-Tac-Toe against the Robot
- Speed Match - Play a timed speed match against the Robot
- Two Local Players - Play someone else on your local device
- Online Match - Play a friend or someone new in an online game through Apple's Game Center
- Stats - View the game's leaderboards and your own personal achievements in Game Center
In upcoming articles, I will describe how I separated the game's core logic from the user interface, App Store, and Game Center logic to make the game as flexible as possible for multiple platforms.
Figure 2 shows the actual Tic-Tac-Toe game board. At the bottom of the scene, you can see the player names along with the number of games won and tied. If the player has a picture on Game Center, that picture is displayed here.
Figure 2 - The Tic-Tac-Toe board
Later in this series, I will show you how I designed and coded the main Tic-Tac-Toe engine (the TicTacToe class) and wrote unit tests to make sure it worked well.
After a game is finished, one of many different animations play depending on whether you win, lose, or tie. For example, in Figure 3, the Robot mimic's Luke Skywalker's Jedi training by levitating a rock. It was quite a bit of work getting these animations from planning to production, and I'll have an article detailing the tools and techniques I used.
Figure 3 - One of many animations included in the game
At the bottom of the screen you can:
- Play a new game
- Post your score to Twitter
- Post your score to Facebook
- Check your Game Center standings
- Bring up the Settings Scene
If you tap the Settings icon, you are taken to the Setting scene shown in Figure 4.
Figure 4 - The Settings scene
In the Settings scene, you can:
- Change the game's color theme (including colors that match Apple Watch bands)
- Restore In-App purchases
- Change the game's sound theme (different sounds for game play, and different music for win, lose, and tie)
- Turn Game Sounds on/off
- Turn Game Center on/off (not everyone is a Game Center fan)
- Set the game level (Easy, Medium, Hard)
- Specify your mark (X, O)
- Specify the first move (X, O, or alternate)
- Send game feedback
In future articles, I will provide classes with code you can use in your own projects that make it easier to integrate in-app purchases, and show you how to create assets for your apps from start to finish, that you can host locally or on Apple's servers.
The Apple Watch Version
Figure 5 shows some screen shots from the Apple Watch version of the app.
Figure 5 - The Apple Watch version of the app
Although the user interface for the app is a bit different on the Apple Watch, the core logic behind the scenes is exactly the same as the iOS app. Later in the series, I'll show you the architecture of the Apple Watch app so you can see how to design a flexible, reusable, architecture.
As I describe the design and construction of this app throughout the series, you will also learn best practices and coding techniques for Apple's awesome new language, Swift. There are many lessons to learn, and I'm looking forward to sharing these with you!