Here we are! You will finally create your first application! Get ready to take off!
Project introduction
The application
We are going to create an iPhone application called Acty. It's a variation of a well-known game called Act & React.
An app will task participants with an action that will consist of an emotion (happy, sad, excited, angry, etc.) and an activity (riding a horse, swimming with dolphins, etc.), i.e. "You are happy riding a horse" or "You are excited swimming with dolphins". A participant would have to act out a given combination.
The app will look like this:
By clicking on "ACT NeXT", the app will generate an acting task!
Learning methodology
This course will make you dive right into app development. It will allow you to create your very first application very quickly from scratch while understanding precisely what you are doing and why. Just like following a cooking recipe!
Of course, it takes time to become an expert. You are not expected to crunch out an app a minute from now on. But, hey, we have to start somewhere!
Creating the project
First things first: let's open our main tool, which is Xcode. You can find it in your Applications folder.
1. Opening Xcode
On a welcome screen, Xcode offers three options:
Select 'Create a new project'.
2. Choosing a template
Xcode then offers several basic templates for your project:
Keep the default options: 'iOS' tab, 'Single View Application' and click 'Next'.
Xcode offers several templates for all operating systems. Here are the iOS options:
Single View App: serves as a backbone of any application and contains the absolute minimum of an app: a single view, nothing else is predefined.
Game: provides preset game components.
Augmented Reality App: incorporates a starting composition for apps that intend to use augmented reality.
Document Based App: intended for apps that work with documents.
Master-Detail App: provides a preset master-detail component, i.e., a split view with a list on a side and details of a selected list item beside the list.
Page-Based App: includes pages as a preset primary navigation.
Tabbed App: includes tab navigation as a preset primary navigation.
Sticker Pack App: a complete static template to create a sticker pack for iMessage without having to code anything - just drag and drop images!
iMessage App: serves as a backbone for iMessage applications, including enhanced Sticker Pack apps.
Cordova-based Application: includes the Cordova framework providing an option to incorporate web technologies in iOS applications.
Curious for more? You are welcome to check out options for other operating systems on respective tabs: watchOS, tvOS, macOS & Cross-platform*.
*Cross-platform in this context refers to software across four Apple's operating systems and not other operating systems
.
3. Configuring the app
Next, Xcode presents us with the app configuration screen:
Let's review the parameters:
Product Name: This is the name of our application. Acty!
Team: This allows you to specify which team the application belongs to. To be able to select a team, you need an Apple developer account. Leave it as it is for the moment since you will not need it.
Organization Name: This is the name of your organization. You can put the name of your company or your personal name. Xcode adds it at the top of each file as a copyright message to credit the author. This is also helpful when working with a team of developers to figure who originally authored the code or to look up a developer of a code sample you found on the internet that looks particularly interesting to you.
Organization Identifier: This is a unique identifier that defines your organization. A recommended naming convention to create this identifier is to use the associated domain name backwards, i.e. for OpenClassrooms it becomes com.openclassrooms. You can use a composition of your name - com.firstnamelastname - if you don't own a domain name.
Bundle Identifier: This is the unique identifier of your application. This is what keeps your app uniquely identifiable in the App Store. By default, it's automatically generated as a composition of your organization identifier and product name. In our case - com.openclassrooms.Acty
Language: This parameter allows you to specify a programming language for your app. You can choose either Swift or Objective-C. We are choosing Swift of course!
Some extra parameters:
Use Core Data: integrates a local database into the app.
Include Unit Tests & Include UI Tests: includes additional sections into the app project for testing purposes.
Let's leave all the above unchecked for this project.
Click 'Next'.
4. Saving the project
We now need to provide a location of our hard drive in which to store our app project:
Similar to any file you save on your computer (a .doc file or an image), your Mac asks you to chose a location. I chose Desktop/OpenClassrooms iOS. Chose a location that suits you and click 'Create'.
You've just created an Xcode project of your application!
Xcode overview
Once you've created the project, Xcode opens it in the main window:
Here, we will cover the essentials. The main window consists of 4 panels:
Navigator
Editor
Utilities
Debug area
Let's review each of them individually.
1. Navigator
Navigator is the panel on the left. As the name suggests, it allows us to navigate our project. The browser contains several tabs at the top:
Each tab represents a different way of navigating specific components of your application: files, source control, symbols, search results, issues, testing, debugging, breakpoints and reports.
At this time, we will use the first tab only to organize and access files of our ptoject.
2. Editor
The editor is located in the middle of the window and takes up most of the real estate. This is where the magic happens. The editor displays the contents of the file you selected in the file navigator.
The first file that opens up after you save the project is the project configuration. Let's review some particular settings in addition to those we already set at the time of project creation:
Display Name: The name of the application displayed on the App Store and users' devices when installed. If not provided, a Project name is used as Display Name.
Version: A version of the application visible on the app store (1.0 at the moment)
Build: A build number (let's set it to 1.0.1)
Where do the Version and Build numbers come from? I recommend following formats:
Version format: two sets of numbers separated by a dot, like X.X. Let's start with1.0. Improvements and fixes result in the second number increasing -1.1, 1.2, etc. Major modifications result in the first number increasing - 2.0, 3,0, etc.
Build format: sets of numbers separated by dots likeX.X.X. The first two will always match the corresponding version, and the last one will increase when a build is made (typically for test purposes, whether it's a QA department, user testing, etc.). Now you see where 1.0.1comes from. This will continue to 1.0.2, 1.0.3etc.
This helps to quickly identify the range of a development timespan by just glancing at numbers, both versions and builds.
Devices: This option specifies the mobile device you are targeting: iPhone or iPad individually or both (Universal). Let's choose iPhone.*
*It's a requirement for the apps targeting iPhones to be usable on iPads. iOS auto-scales the app proportions to accommodate your original appearance the best way possible.
What about an option for iPod Touch? Remember, we established that it's very similar to iPhone. All the apps targeting iPhone will be perfectly suitable for iPod Touch devices as long as they have a compatible version of iOS installed!
Device Orientation: The orientations supported by the app are Portrait, Landscape right, and Landscape left. We may as well also include Upside down just for fun!
3. Utilities
Utilities is the panel on the right. It displays contextual details based on what's selected in the editor area like file info, UI components properties, code attributes etc.
Wait, didn't you say there were four panels?
The 4th one is hidden. To reveal it, toggle the middle button located at the top right:
These three buttons are used to hide/reveal the three panels that surround the editor.
4. Debug area
The Debug area can be revealed at the bottom of the window:
It's empty right now but not for long! This is how Xcode communicates with you about the state of your code. Shortly, you will experience the importance of this component.
Let's recap!
The Xcode interface consists of four panels: Navigator, Editor, Utilities and the Debug area.
That's all for this chapter. In the next chapter, you will launch your application for the first time!
