What you’ll learn in this chapter:
- Get to know Apple’s in-house development Software
- Basic structure, layout, and functionality of Xcode
- How to create app projects using Xcode
Before we are getting started with creating our first SwiftUI projects, let’s take a quick tour through Xcode.
If you already know or have worked with Xcode before, feel free to skip this chapter. However, if you are unfamiliar with iOS development, make sure you read this chapter carefully, as it is crucial for learning iOS development.
What is Xcode used for? 🤔
Xcode is Apple’s in-house IDE (Integrated Development Environment). For developing iOS apps, Xcode is the software you will work most often with. Therefore, it is very important to have a profound knowledge of Xcode and to master the basics from scratch.
In Xcode, you compose the user interface of your app, organize and write the code that makes your app run. Xcode also offers you the possibility to run and test your app on a virtual simulator on your Mac (and of course on a physical device such as an iPhone).
Creating a new Xcode project
To get in touch with the IDE, just open Xcode and click on “Create a new Xcode Project”.
Next, click on “App” under the “Multiplatform” tab, then on “Next” and give your app any name you want, e.g. “Demo”. Go ahead creating your project at the specified location.
What you see after your project is initialized may feel a bit overwhelming. Don’t worry this feeling is perfectly fine and will pass when you understand the basics of how Xcode is constructed.
Fortunately, the interface of Xcode is designed pretty straightforward. The interface of Xcode basically consists of five main sections.
These are the Toolbar (1), the Navigator Area (2), the Editor Area (3), the Utility Area (4), and the Debug Area (5). Don’t worry if you don’t see all the sections just yet. We’ll learn how to toggle the different sections if we go through each of them one by one.
The Toolbar 🛠
By using the Toolbar, we can control the essential functions and preferences of Xcode.
Using the box in the center of the Toolbar, we can select on which simulator or physical device we want to run our app.
We run our app using the play button on the left side of the Toolbar. The box in the center also lets us know when Xcode is working on something. Finally, we can toggle the Navigator and Utility Area using the leftmost and rightmost buttons.
The Navigator Area 🔍
The Navigator Area helps us finding our way around our project and organizing our code and assets.
By default, the “Project Navigator” mode is selected (represented by the highlighted “folder” icon). It’s probably the most important mode of the Navigator Area. This is where the different parts of your app’s code are listed. The more complex your app becomes, the more files your project will contain. To keep track of them, you can create “groups” (Xcode’s name for folders) and move the files around as you like. Note that where you are placing files within the Project Navigator does not affect the logic of your code or the behavior of the app.
When you click on a file, it will open in the Editor Area where you can edit it. If not already done, click on “ContentView.swift” to display this file in the Editor Area. Swift files are the heart of every iOS App. In these, you write the code that makes your app run.
Good to know💡
Since Xcode 12 and SwiftUI, Apple is encouraging developers even more to develop apps that run cross-platform on iOS, iPadOS and macOS.
This can be noticed by the fact that Xcode 12 automatically generates so-called multiplatform app templates for us. In the Navigator Area, you can see a group “Shared”, which contains, for instance, the view files that are used by all platforms (iOS, iPadOS and macOS). There are also other folders where platform-specific adjustments can be made. For example, the iOS group only contains files that are relevant for running the app on iOS devices.
However, this course focuses on developing iOS apps using SwiftUI. Therefore, we will not deal with multiplatform templates in the coming chapters. Anyway, you can still create multiplatform apps if you want and store all files within the “Shared” group.
The Editor Area ✍️
Inside the Editor Area, we write the code and compose the interface of our apps. The appearance of the Editor Area depends on which file type is opened.
The Utility Area 🧰
Similar to the Editor Area, the appearance of the Utility Area depends on what file type you have selected. Just as the Navigator Area, the Utility Area also offers various modes, e.g. the Identity Inspector represented by the highlighted “file” icon. Here you can access meta-information, references, etc. of files or/and their components.
The Utility Area often confuses beginners because the use of this area depends on the particular situation. But the more you work with Xcode, the more you will get the hang of it. You’ll see, it’s much easier than it looks.
The Debug Area 👷♀️
This area opens once you run your app by clicking the run symbol in the Xcode toolbar. You can toggle it manually by going to the Toolbar area and clicking on View – Debug Area- Show Debug Area.
If you run your app you will find all relevant information like runtime error messages and executed print statements in this area. This area becomes very important when it comes to finding and fixing errors and bugs inside your app.
Congratulations! You are now familiar with the basics of Xcode.
Don’t worry if you ever feel overwhelmed. You’ll see that the more you deal with it, the more comprehensible everything becomes.
If you ever have problems with understanding something discussed, do not hesitate to write a message.
Now, let’s get our hands dirty and start building some awesome SwiftUI apps!