Xcode is the tool you will use during every phase of your app development. On first glance, Xcode might appear overwhelming with its many features and functions. But don’t worry, you will become familiar with it quickly with this tour of Xcode.
Xcode is a feature rich Integrated Programming Environment (IDE) to create, test, and debug iOS, macOS, tvOS, and watchOS applications. You use its Interface Builder to design your app’s user interface to look good and work optimally on all screen sizes. You use its Code Editor to write the lines of code that makes your app do the things it does. And you use its Simulator and Debugger to test your apps and take care of errors efficiently.
Let’s Begin our Tour of Xcode:
1. Start Xcode
After you launch Xcode, you will be greeted by a welcome screen that looks like this:
If you are launching Xcode for the first time, it will show no recent projects in the right panel. Over time, this section fills up with your ten most recent projects for quick access. If you don’t want to see the welcome screen every time Xcode launches, you can deselect the checkmark at the bottom before continuing.
Your options are to start a new playground, which allows you to work on code outside of a project. As the name indicates, this is the place to just play around with code to learn and test new concepts. You can also create or clone a project from this screen.
If the above screen does not appear when you start Xcode, start a new project by selecting File > New > Project… from the menu bar or by pressing Shift-Cmd-N.
2. Choose a Template
The next step is to let Xcode know, what kind of project you are creating.
Xcode supports all Apple platforms, i.e. iOS, watchOS, tvOS, and macOS. Depending on the platform you choose, you will see different templates in the Application and Framework & Library section. Each of these templates will create a starting point which already includes relevant code to get you started quickly. For example, the Tabbed App template for iOS will include a tab bar at the bottom of your iOS app with the necessary code segments ready for you to fill in.
While these templates are useful, many developers start each project with the most basic Single View App template and then add functionality (like a tab bar) as needed.
3. Choose Project Options
The next screen lets you choose the options for your project. This is where you enter a name for your app, as well as some app-specific details.
Each option briefly explained:
- Product Name: The name of your app. This name will be shown below your app icon on the device.
- Team: If you are already a member of Apple’s Developer Program, you can choose your profile here. Otherwise ignore the Team for now, as it is only required to test your application on a real device instead of a simulator and to add your finished project to the App Store.
- Organization Name: Enter your name or your organization’s name. This field can be left blank.
- Organization Identifier: This value will be used to create a unique identifier for your app, which is displayed under Bundle Identifier. Convention is to use your website, if you have one, in reverse notation (i.e. com.websitename) or any other value that uniquely identifies you.
- Language: Xcode supports two programming languages for iOS development: Swift and Objective-C. This tour of Xcode and all of the projects on this site are in Swift, so this is the language you should choose here.
- Use Core Data: This will set up boilerplate code to save data on a device. While you might use this later, leave this field unchecked for this Xcode tour.
- Use Unit Tests: This will include boilerplate code to perform unit testing. For now, leave this unchecked.
- Use UI Tests: This will include boilerplate code to perform UI testing. Leave this unchecked for this tour of Xcode.
Looks all pretty straightforward, right? So let’s continue.
After you fill in all relevant fields, you need to choose a location in the save dialog before getting to the Xcode Workspace. You will spend much time in this workspace, so the rest of this tour of Xcode is dedicated to exploring its elements. Let’s have a closer look.
4. Explore the Xcode Workspace
The Xcode User Interface can be divided into five sections:
The toolbar is divided into three distinct areas.
The left side is used to build and run your app on either a simulator, or a connected device. Clicking on the device name lets you select a different target on which to run your app.
The center area of the toolbar shows status messages while Xcode builds and runs your app. It will also indicate warnings (yellow) and errors (red). Clicking on the error indicator will give you further explanations of the issue Xcode encountered.
The right side contains the editor selector and the workspace configuration area. The available options of editors are the Standard Editor (five lines) which displays one document in the editor, the Assistant Editor (two circles) to work with two different files at once, and the Version Editor (two arrows) to compare two files. The workspace configuration area lets you hide and show the navigation, debug, and utilities areas to increase the available space of the editor area.
② Navigator Area
There are nine navigators that let you view various aspects of your project.
By default, and the one you will use the most, is the Project Navigator. It is the first item in the navigator bar and can be accessed via the shortcut Cmd-1.
Each navigator shows different info about your project:
- Project Navigator: This displays all the files that make up your project. Clicking on a file will open it in the Editor Area and impact the functionality of the Utility Area. You can rearrange your files and organize them in folders.
- Source Control Navigator: Apple added a tight integration of GitHub in Swift 9. This navigator lets those using source control work on your branches, tags and remotes.
- Symbol Navigator: Here you will see all the classes, members, and methods in your project. Using the Symbol Navigator is a great way to quickly access a function or property.
- Find Navigator: Allows you to search your project files using various criteria.
- Issue Navigator: Displays any warnings (yellow) and errors (red) with further information that helps to resolve the issue.
- Test Navigator: A list of unit and UI tests, showing if the project currently passes or fails them.
- Debug Navigator: Shows current memory and CPU usage as well as storage and network access whenever you run an application from Xcode on a simulator or device.
- Breakpoint Navigator: Displays all your breakpoints and lets you create exception and symbolic breakpoints.
- Report Navigator: Whenever you build and run your app, a log entry is made and can be viewed in this navigator.
Tip: each of these navigators can also be accessed via a shortcut. Hold down the command key and press the corresponding number of the navigator. For example, Cmd-5 opens the Issue Navigator.
③ Editor Area
This is the main area of Xcode. Depending on the file, it lets you work on your app’s code, user interface, and project settings. You can change the editor by clicking on the Editor Selector in the Toolbar:
The Standard Editor is a powerful code editor with syntax highlighting, auto-completion, code-folding, and even auto-fixing of common errors. Contextual help can be evoked by holding the option key while clicking on an object. Holding the Cmd key will let you jump to the definition of an object.
The Assistant Editor simultaneously shows files that are related to each other. For example, when you work on your app’s user interface, there are moments when you want to see the corresponding code next to it. The Assistant Editor is the place to do this.
The Version Editor lets you compare two files with the changes visually highlighted.
When you click on a .storyboard file in the File Navigator, the Editor and Utility Areas turn into Xcode’s Interface Builder, which lets you design the user interface of your application.
And no tour of Xcode would be complete without pointing out the Project Settings, which can be accessed by clicking on the top level in the Project Navigator. In this section, you can change your app’s bundle identifier, version number, and target. You can also add capabilities like iCloud and Push Notifications and change your project’s build settings, phases, and rules.
Don’t worry if you see a red icon with the text “Signing for <AppName> requires a development team”. This just means that you won’t be able to run your app on a device just yet. For that you’ll need to sign in with an Apple ID by clicking on Team and then Add Account… You still can run your applications on a Simulator even without an Apple ID or Developer Program membership.
④ Utility Area
The top bar of this area is context aware. It either contains only the first two items for source code files or six items for Interface Builder files (.storyboard).
- File Inspector: Displays information like name, type, and path about the currently active file.
- Quick Help Inspector: Shows the documentation for the object selected.
- Identity Inspector: Lists information about the identity of the selected object. The most frequent use of this inspector is to assign specific classes to user interface objects.
- Attributes Inspector: This inspector lets you select the attributes (font, color, alignment, visibility, etc.) of user interface elements.
- Size Inspector: Change the size and constraints of selected objects.
- Connections Inspector: Displays the connections created between UI elements and your source code.
Tip: each of these inspectors can also be accessed via a shortcut. Hold down the command and option keys and press the corresponding number of the navigator, i.e. Cmd-Opt-3 for the Identity Inspector.
At the bottom of the Utility Area, you’ll find the Objects Library. Its top bar contains four selectors:
- File Template Library: Contains the same files as the selection you see when you create a new file or project.
- Code Snippet Library: Boiler plate code of commonly used code segments that can be dragged into your project.
- Object Library: The entire range of user interface elements. Drag elements onto a view and then set its attributes in the Attributes and Size Inspectors.
- Media Library: Contains all the sounds, images, and videos available in the current project.
Tip: each of these inspectors can also be accessed via a shortcut. Hold down the control-command-option keys and then press the corresponding number of the library, i.e. Ctrl-Cmd-Opt-3 for the Object Library.
⑤ Debug Area
The debug area contains tools that you will use when debugging your apps.
- Toolbar: provides the controls to manage program execution.
- Variables Inspector: lets you examine all variables currently in memory.
- Console: displays logging information from your app or the system.
This gets us to the end of this Tour of Xcode. You should now feel sufficiently confident with this powerful development tool to tackle your first iOS app: Happy or Sad. This app lets users select how they currently feel – and then visually displays this value back to the user with an Emoji.
If you enjoyed this quick tour of Xcode, please feel free to share it.