Most of this tutorial will be devoted towards learning about Xcode. In this section, we'll have our first introduction to Xcode and go through the process of creating a new Xcode project for our app.

What is Xcode?

Xcode is an Integrated Development Environment (IDE) for developing apps in the Apple ecosystem. We'll be focusing on iOS apps, but you can also make apps for macOS, watchOS, and tvOS apps. IDEs (like Xcode) contain and integrate many powerful tools that make software development easier for programmers.

As you learn to build apps in Xcode, you'll use many of these tools. Tools that you'll use commonly on a daily basis might include:

  • Source Code Editor: write and edit code
  • Interface Builder: build and visualize user interfaces (UI) without code
  • Debugger: test, catch and debug problems in your code
  • Compiler: helps you find mistakes in your code and offers "Fix-its" suggestions
  • Assistant Editor: edit multiple files in Xcode side-by-side
  • Simulator: test and run your app on a simulated iPhone on your computer

We'll go through each of these tools more in-depth as we build our Magic 8-Ball.

Remember, Xcode contains many more tools that the ones listed above. In this tutorial, we limit our focus to learn about only the most important Xcode tools for building simple iOS apps.

Your First Xcode Project

Firsts are always special. Now that we know a little more about Xcode, we'll begin by creating our first Xcode project.

Get familiar with this process! You'll repeat it over and over whenever you start a new app.

Create a new Xcode project:

  1. Open Xcode on your computer. You should see the following launch window after you open Xcode Launch Window
  2. Next, from the launch window's quick options click Create a new Xcode project Create New Project
  3. You should see the following prompt to select a template for your new project. Under iOS, select Single View App Select Template
  4. With your selected template, click Next. You should see a new prompt for your project details Set Project Details

In this new prompt, we'll set some basic info and details that Xcode needs to create a new project.

In the project details prompt, enter the following information:

Filled Project Details

If you need a step-by-step breakdown:

  1. In the Product Name field, enter MagicEightBall. This is what Xcode will name your project in your file directory. To prevent potential name-related problems, it's best to stick with alphanumeric characters (letters and numbers) and avoid special characters.
  2. In the Team dropdown menu, set it as None. If you already have an Apple Developer Team, you can select that instead.
  3. In the Organization Name, you can enter one of the following: your name, your fake company name, or Make School.
  4. In the Organization Identifier, set it as com.makeschool. If you own a domain name, you can set this field as your reverse domain name. For example, if you own the domain name, you would put com.happycarrot as your identifier.
  5. The Bundle Identifier will be automatically generated from your Organization Identifier and Product Name. Apple uses the bundle identifier to uniquely identify each app in the App Store.
  6. In the Language dropdown menu, make sure it's set to Swift.
  7. Finally, leave all three checkboxes unchecked. We won't use Core Data or testing in this tutorial. Those are more advanced topics we'll cover at another time.

To finish up and create our new project:

  1. After filling out your project details above, click Next. Project Details Next
  2. Xcode will now prompt you to select where you'd like to store your project. Using the file navigator, choose to a place on your computer to store your project. If you don't have a place in mind, you can use your Documents folder. Select Project Location
  3. Make sure you keep the Source Control checkbox selected for Create Git repository on my Mac. Enabled Source Control
  4. After you've selected a project location and verified that the Source Control checkbox is selected, click the Create button. Create Project

Congrats! Meet your first new project. You should see the following:

Newly Created Project

Can you feel the sparks? I think this is the start of something special.

Getting To Know Xcode

As we build our Magic 8-Ball app, we'll learn about Xcode and how to harness it's power. Before moving onto the next section, we'll go over a brief overview for each of the main areas of Xcode and how to run our newly created app in the simulator.

Picking up where we left off, you should see something similar to the following:

Newly Created Project

Woah! At first glance, you'll notice there's a lot going on. Tabs, buttons, panels and text fields everywhere!

If you feel overwhelmed, take a deep breath. We'll walk through this together.

Xcode Main Areas

Xcode is broken down 4 main areas + a toolbar:

Xcode Areas

Here's a quick breakdown of each of the areas above:

  1. Toolbar (Green): displays key information about project, expand/collapse other areas, run project
  2. Navigator (Orange): find files, search in your project, manage source control, navigate errors
  3. Editor Area (Red): write code, build UI with storyboard, change project settings
  4. Utilities (Purple): gives info about files, set properties of items in Interface Builder
  5. Debug Area (Blue): test and debug your code at runtime

Each area has many more tools and features built-in, so don't think of the summary above as a comprehensive list. We've just highlighted the key functions of each part of Xcode.

The Toolbar

The Xcode toolbar provides easy access to information and buttons that you'll use often. You can see it at the very top of your Xcode IDE: Xcode Toolbar

Let's go over some of the most important parts of the toolbar and figure out how to run our app.

Xcode Status Bar

In the center of the toolbar, you'll see the Xcode status bar:

Status Bar

The status bar provides helpful information about your project. It'll change and update as you use Xcode.

For example, if Xcode finds warnings or errors when it builds (more on this soon) your project, it'll display it in the status bar. You can see this below:

Status Bar Errors

Notice the yellow warning icon and the red error icon on the right side of the status bar.

Showing / Hiding Xcode Areas

You can also hide and display the Navigator, Debugger and Utilities based on which tools you're using at the moment. This can be done by toggling the buttons of the far right side of the toolbar:

Display Xcode Areas

If your computer doesn't have a large screen, it's often helpful to hide these areas when you're not using them so you can focus on the areas you are using. We'll see this in action later in the tutorial.

Running Our App

Let's go through the process of running our app on the simulator.

We're specifically using the iPhone 7 simulator for convenience right now. In the future, you can use any simulator of your choice or even your own device.

Take a look at the group of buttons on the left-hand side. You should see:

Toolbar Run Group

These buttons and controls allow you to build and run your app on either a simulator or your iPhone.

What is the build process?

The build process, also referred to as building, is the series of tasks that must be completed in order to turn your code into an app that can be run on a device (or simulator.)

One of these tasks is compiling your code. This means that the compiler turns your Swift code into machine-code (instructions that your computers can read.) During this process, the compiler may find errors with your code. If it does, the build process will fail and Xcode will display the errors in the status bar as shown previously.

Scheme Dropdown

Scheme Dropdown

The Scheme dropdown menu will allow you to edit and manage multiple schemes. A scheme tells Xcode what to build and run when you press the Run button. As a beginner, you don't need to worry about dealing with multiple schemes.

The second half of the scheme dropdown allows you to specific a simulator or device that you want your selected scheme to run on. For us, we want to run our app on an iPhone 7 simulator.

Click on the right-side of the Scheme dropdown to see a full list of options. If you connect your iPhone to your computer, you'll see your device show up as an option as well.

Scheme Dropdown

Let's change the device our scheme will run on.

Change your scheme to build and run on the iPhone 7 simulator. Click on the second half of the scheme dropdown menu and select iPhone 7 simulator.

Select iPhone 7 Scheme

With our simulator set, we can move on to build and run our project.

Run Button

Run Button

If you haven't guessed already, the Run button will build and run your active scheme on the selected device. Since we selected the iPhone 7 simulator in the previous step, our app will run on the iPhone 7 simulator.

Click the Run button now and watch Xcode build and run your empty project. In the future, you can also use the keyboard shortcut command-r (⌘R) to run your project.

The first time you run your app, you may see a dialog that asks for your password: Debug Permission

Enter and click Continue. This permission is necessary to run your app using the debugger (more on this later.)

If all goes well, you'll see a simulator with your app launch:

Empty Simulator

If you're wondering why there's just a blank white screen, it's because we haven't added anything to our app yet. As we develop our app, we'll see the changes and functionality appear when we run our app.

Stop Button

Stop Button

The Stop button (looks like a square) will stop the instance of your app if it's currently running.

Click the Stop button to terminate the running instance of your app on the simulator. For future reference, the keyboard shortcut command-. ⌘. will stop your app.

You'll see that the simulator will stop running your app.

Progress So Far

At this point, you've created your first Xcode project and run the empty new project in the simulator. As we move forward, we'll keep running our app on the simulator to check that our project is working as expected.

Next, let's we'll learn about the Project Navigator, the different type of files in Xcode and how to add an app icon to our project!


If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more

Cookies on Make School's website

We have placed cookies on your device to ensure that we give you the best experience on our website.

This site uses cookies to deliver our services. By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Your use of Make School’s Products and Services is subject to these policies and terms.

Please note that Make School no longer supports Internet Explorer

We recommend upgrading to a modern web browser. Learn more