Getting Started With Xcode

Xcode is an IDE (Integrated Development Environment) available on macOS. It provides powerful tools in an easy to use interface for developing great applications for all of Apple’s platforms. iOS, watchOS, tvOS, and macOS applications can all be easily developed with incredible support from Apple in the form of libraries and frameworks, making even game development simpler than you imagined.

Getting started in Xcode is easy. Simply launch the application from Launchpad, or by using Spotlight.

When you launch Xcode, it will display the “Welcome to Xcode” screen, with options to open previous projects, or create something new.

You can select “Get started with a playground” to quickly jump into coding and whip up an idea in a lightweight, versatile, and yet still very powerful environment.

The other option is to create a new Xcode project, so let’s jump into that. When you select this option, Xcode will ask you what type of Xcode project you want to create. There are several options ranging across Apple’s platforms. For this tutorial, we’re going to select a “Single View Application” because it is very simple.

Okay, so our project has been created and now we’re in the IDE. Let’s explore a bit of the UI first and get comfortable. We can break down the UI into 3 sections for now. In the left we have the navigation pane. We can use this pane to navigate our projcet’s files and class hierarchy.

In the middle is the content viewer. This window will display whatever file we currently have selected. For example, we currently have the entire Xcode project selected “XcodeTutorial”, so it displays a number of options/configurations for this entire project.

If we selected one of the Swift files instead, for example if we select the ViewController, you can see that the content viewer now displays this file.

Next is the right pane, the utilities pane. This is a dynamic section that responds to whatever we have selected in the content pane. For example, with the ViewController swift file selected, the utilities pane looks like this.

And when we select a different file, say the Main.storyboard (our main view in this application), the utilities pane displays relevant utilities.

So, what exactly is “Main.storyboard”? If you’re familiar with Java, you can think of this as Xcode’s GUI builder, kind of like SceneBuilder. Only this GUI builder is 100x more powerful, elegant, and easy to use! Right now you can see that it shows the main page of this single page application.

Oh no! It’s blank! How can we add components to this UI view? Let me direct you over to the right pane again (the utilities pane). If you look near the bottom of this pane, you can see what is referred to as the object library. There is even a little search bar at the bottom to let us find exactly what we’re looking for.

For example, if we type in the word button, we can quickly find the button component, and simply drag it somewhere into our UI view.

That’s great! But how can we get this button to perform some sort of action? This is where one of Xcode’s very cool features comes in to play, and it’s going to make this task very simple! We won’t need to edit the properties of this button to give it some sort of ID that we can reference from one of our Swift files. We can simply drag and drop it into any Swift file that we want to use it in, by holding control when dragging! How cool is that?

To allow this action, we need to change our view. In the top right, in the toolbar, we can select “Show Assistant Editor” (the button with two circles). This will allow us to select to files to view in the content view at the same time.

We can either connect this UI component as anattribute, or by creating a function for it. In this case, I am creating a function called “buttonAction” that will be invoked when the user taps our button.

So, if I simply add a print statement to this method, I think we’re ready to start testing our application!

To start your application, use the start/stop button in the top left, in the toolbar.

Here we have the option of selecting what kind of device we want to run this application on. When creating this project, I chose to create an iPhone app, but you can choose to create an iPad app, or even a universal app! The iPhone 7 selection as you see here will run the app using the Simulator application. This application runs on your Mac and acts as if it were an iPhone or an iPad. You also have the option of plugging in your own device for testing via USB. Okay, let’s run our app!

As you can see, it’s beautiful. Let’s ensure that our button action is working. If we go back to Xcode, you can see the 4th pane that has been automatically shown at the bottom. This is the debug pane that contains our output. When we tap the button, it should print “yo” into this output area.

Look at that! It works! Perfect.

To the right of the output area, you’ll notice the second part of the debug pane. This is the step-through section, which allows you to step through your application and hit various breakpoints within your code when testing and debugging.

Now that you know the basics of Xcode, let me teach you some more advanced tricks that Xcode has to offer. These will really come in handy when testing, debugging, and optimizing your application.

Going back to our navigator pane, you can see that it automatically changes to the debug view when running an application. This will show details on CPU, Memory, Disk Usage, etc. And you can even view processes by thread (as seen below the CPU, Memory, etc.)

When you click on one of these monitors. CPU, Memory, etc. It will show even more detail in the content pane. For example, if we select CPU:

Each of these views provide rich visualization of data being collected on the performance of your application. This will allow you to easily optimize and debug your application. See below for each of the other views:

Lastly, I want to close with Xcode Preferences. There are many settings to configure within the preferences, but most notably, Xcode gives you full control of the look and feel of your editor, and allows for a full remap of shortcuts.

Happy Xcoding! (ノ◕ヮ◕)ノ*:・゚✧