Sep 15, 2021
Build iOS apps in 10 days | Understanding XCode IDE
In this article, we’ll get familiar with Xcode IDE. Things like where you can download it, how to start a new project in XCode, major parts of the Xcode interface, and your project file system.
Where do I find XCode ?
Let’s start by finding the xcode. Just launch mac appstore on your computer and search for Xcode, you should find it on the first result (if you’re lazy like me, just click here).
As I already installed the latest version it shows Open, but you should see a get if it’s your first time installing XCode.
It’s completely free to use, you don’t need to pay for installing it.
If rating of this app grabbed your attention just ignore it. Most of the reviews don’t even make sense.
All you need to check for now, is that you have enough space left in your hard drive for downloading XCode. In my experience, it uses quite a lot of storage space when you start using it.
If you can’t access Mac AppStore for some reason, you can also download it from the official apple developer site — Apple Developer (XCode) — NOT RECOMMENDED
Now, once you have finished downloading and opened the app for the first time, it should ask you for an admin password to download additional requirements.
Starting a new project
On successful installation, once you open the XCode for the first time, you should see something like this.
Start by selecting the first option called “Create a new Xcode project”.
From here, you’ll choose a template for your app, and set a few settings for your project.
For now, choose App template and click on next.
Here, you need to provide some information about your app. Like the name of the app, your team (if you have a developer account), org-identifier (basically reverse domain name of your website), and choose some project settings.
As we’re going to use SwiftUI in this series, you should select SwiftUI as interface and SwiftUI App as lifecycle.
Also, uncheck all the check-boxes below for now. Once, you’ve completed this, click on create the project and choose a place to save it.
Exploring project
Welcome to your brand new project, at first it might seem a bit complex to have so many panels and a lot of files which might be intimidating at first. Don’t worry, most of the time we only use only a few panels in them and in this article we’ll focus on that.
- Navigator Panel
At the very very left, you should see a navigator panel with a file listing of your project. All of the different files belonging to your project are listed here in this area.
The navigator panel also has different tabs in it, you should see small icons on the top of the panel. For now, set to the first tab and ignore the rest of them as you’re not going to use them if you’re just getting started.
- Editor/Main Area
When you select a file in the navigator panel, it opens up in the main area which allows you to easily edit the files that we choose in the navigator.
And the editor area adapts to the file type and shows you the relevant editor for the file type.
For example, if it’s a swift file, then it shows the code editor in the main area and if it’s an assets file, it shows an asset picker in the editor area.
- Inspector area
The last tab is on the very right hand side of the IDE, it’s called the Inspector area. It either shows you the configuration properties of the component you select on the code editor or the additional supplementary information like documentation about the component that you select in the editor.
- Toolbar
Across the top, you can see a toolbar and it has a few important functions that you need to know.
The icon is like a Play button, which is used to build and run your project and the square icon next to it is used to stop the running project.
The icon on the very left is to toggle the navigator panel and the picker over the editor section is used to select the simulator you want to use.
The bar in between these icons, shows the status of your project. It shows you if your project is in the building process, succeeded, or failed.
The plus (+) icon next to the status bar is to quickly and graphically add components to the UI of your app (we’ll get deeper into it in future articles).
Files in your project
Now let’s quickly understand the file system of a XCode project.
The first file you see on the top is the root folder of your project. When you select it, the editor area shows you a metadata editor where you can edit the name, bundle identifier, compatibility, signing, and other metadata of your app.
Going forward, the very next folder contains all your code files and the “Products” folder contains the output app of your project which is generated when you build and compile your project.
You don’t really have to do too much with that folder, but that’s where your deployable bundle is stored.
- {NAME}App.swift
The first swift file is named after your app and this is the starting point of your app.
The “@main” tag means that is the entry point of your application. You’re required to start processes in your app through this main struct.
For now, all it does is to create that ContentView() that you sees when you launch the app in the simulator.
And you can observe that the name of that calling function maps to another swift file in our project “ContentView.swift”
- ContentView.swift
Here lies the UI code of the app, where you can write UI code in swift.
In swiftUI, you can make UI code files by declaring the struct with View protocol which tells XCode that it’s a view (UI) code.
- Assets.xcassets
This is the folder where all your assets like images, audio files etc lie. All you need to do is just drag and drop the desired assets into the asset manager opened when you select the assets folder.
If you think this article helped you, feel free to drop a clap and you can also get access to in-depth concepts in the apple developer program feel free to become a Patreon.
If you find any grammar or bad use of punctuations, feel free to highlight it. I’ll learn and improve it. Thanks for reading 😇
