1.1. Project structure overview

The Xcode screen has three panes.

The left pane

In the left pane, you see the file structure of the codes and resources. If you right-click on the project directory, you can see that you can show the project directory in Finder:

It will show you the project directory:

Now we can see that the structure of the files and directories in your project directory match how you see the project structure in Xcode.

You will see three Swift files: AppDelegate, SceneDelegate, and ViewController.

AppDelegate is used to manage the application's lifecycle, like what happens after the app is launched, while populating the screens, when a screen is changing, and so on.

SceneDelegate is used to manage the lifecycle of the scenes you see while the app is running, like what happens when a window is populated, when the user sends the scene into the background, when it comes back from the background, and so on.

ViewController is the most important file where you define the Models, Views, and Controllers of the 'empty' screen you see. For each screen, you need to write a ViewController. This is the file where we will spend 90% of our time.

You'll also see two 'Storyboard' files as well. These are the design boards like prototype builders. You should not touch the 'LaunchScreen' file if you do not have to (in fact, we do not need to touch this file in this course).

The Main storyboard is where you can create the front end of your app by dragging and dropping UI elements on the screen, just like a prototyping tool. Storyboards are XML files defining the screen's UI elements, positional constraints, and user interactions.

Even though it feels easier to design our app with storyboards, it comes with a significant caveat. It is very painful to work with when more than one developer works on the same project. So the industry shifted from using storyboards. Instead, we usually write code in the ViewController to design the screen programmatically and keep the storyboards empty. For the first few practice exercises, we will design it in Storyboard and then switch to the design by coding.

The middle pane

The middle pane is the work pane. Here we write code, design, change settings and preferences, debug, etc. For example, If we click on ViewController from the left pane, we will see the code in the middle pane:

The right pane

The right pane is the configuration and attributes explorer pane. For example, if you click on the Main Storyboard and click the screen preview, the right pane will display the attribute of the screen view:

Once we start building apps, we will eventually get used to Xcode more.