Xcode 11 Tutorial For Beginners

Share on facebook
Share on twitter
Share on pinterest

In this series, you will learn everything you need to know to get started with Xcode, quickly & easily.

The whole article was updated for Xcode 11, including the new main feature, SwiftUI.

What you will learn in this part of the series:

  • What Xcode is and what you need it for
  • How Xcode is structured and what you need for running it
  • Tips for an efficient usage of Xcode

What is Xcode used for and what do I need for running it?

Xcode is Apple’s in-house IDE (integrated development environment). When you develop iOS apps, it is the software you work with most often. Therefore, it is very important to have a profound knowledge of Xcode and to master the basics from scratch.

In Xcode you set up 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 real iOS device).

Fortunately, Xcode is available completely free of charge in the Mac App Store. On Windows PC’s Xcode is not available. Although it may be possible to run OSX on a virtual machine (“Hackintosh”), i strongly recommend you to buy a Mac if you don’t have one yet. This is more than useful in the long run if you want to develop iOS apps.

Xcode is Apple’s in-house IDE for the development of iOS apps. It is free, but only available for Mac.

Creating a Xcode Project and choosing the User Interface

To get in touch with the IDE, just open Xcode and click on “Create a new Xcode Project” (btw: “Playgrounds”, the option below creating a new project, is an option to test new concepts and ideas quickly and easily). Next, click on “Single View App” and then on “Next” and give your app any name you want.

At this point, you can choose which User Interface mode you want to work with. You can either use SwiftUI or Storyboards.

  • Storyboards: Until now, the most common way to build iOS apps was to use storyboards. Simplified, you created the UI by dragging and dropping, arranging and constraining elements and by connecting them to your code.
By working with storyboards you create the UI by dragging and dropping, arranging and constraining elements and by connecting them to your code.
  • SwiftUI: SwiftUI is THE new feature that got shipped with Xcode 11. It’s a completely new way to build iOS apps and follows a declarative approach, meaning that with SwiftUI you describe how your interface should look like and what it should do. To get started with SwiftUI, check out this quick introduction to this new framework and make sure you read our free tutorials!
SwiftUI follows a declarative syntax approach, meaning that we describe in code how our interface should look

Should I choose Storyboards or SwiftUI?

When you are new into iOS development, you are probably struggling whether you should work with SwiftUI or stay with Storyboards. To give you some advice, we wrote a an article for, that might be helpful.

Unterstanding the Interface 💡

To understand the basic layout of Xcode, create a new Single View app by using SwiftUI, as we described above. Don’t worry understanding the basics of Xcode is not depended on the User Interface mode you choose, so even if you want to work with Storyboards, starting with this example is fine.

What you see now may feels 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 is designed pretty straight forward. The interface you see now basically consists of 5 sections:

The five main sections: Toolbar(1), Navigator Area(2), Editor Area(3), Utility Area(4), Debug Area(5)

The Toolbar 🛠

Xcodes toolbar
The right three buttons of the toolbar allows you to show/hide the different areas

The right three buttons of the toolbar allows you to show/hide the different areas

The toolbar allows you to access the basic Xcode settings (don’t mix this up with your app projects settings) and perform several operations. On the left side of the toolbar you can select the device on which you want to run your app, for instance on any simulator. The field in the middle tells you when Xcode is working on something. The area on the right is responsible for the Xcode view modes, more on that later.

The Navigator Area 🔍

The Navigator Area helps you finding your way around your project and organize your code and resources. By default the “Project Navigator” is selected, probably the most important mode of the navigator. Here are the different parts of your app’s code listed. The more complex your app becomes, the more files your project will contain. To keep track, you can create „groups“ (Xcodes name for folders) and move the files as you like. Where you are placing files within your project usually has no effect on the logic of your code or the behavior of the app.

The Navigation Area helps you to organize your app project and to find your way around it

When you click on a file, it will open in the Editor Area where you can, you guessed it, 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.

The Editor Area ✍️

Here you write the code and compose the interface of your app. The appearance of the Editor Area depends on which file type is opened, especially and on whether you are working with SwiftUI or storyboards.

The Utility Area 🧰

Similar to the Editor Area, the appearance of the Utility Area depends on what file type you have just selected. Here you can access, for instance meta data, references, etc. of files or/and their components. This area is especially important when editing storyboards.

Especially the Utilty 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 get a feeling for it. You’ll see, it’s much easier than it looks at first sight, I promise!

The Debug Area 👷‍♀️

When you run your app, you will find all relevant information about errors etc. that Xcode provides you. This area becomes very important when it comes to finding and fixing errors and bugs of your app.

Often the output is very long, so you can use the filter to easily find certain output.

Basic Shortcuts

If you begin working with Xcode more often, you will notice that different things like frequently showing and hiding different areas can inferiore your workflow. In order to save time you should remember and use at least the most important shortcuts. Soon you will be memorizing them and save a lot of time. Here are some first, important ones to start with:

  • ⌘+0: Show/Hide Navigator Area
  • ⌘+⌥+0: Show/Hide Utility Area
  • ⌘+SHIFT+Y: Show/Hide Debug Area

Shortcuts are enormously helpful to optimize your workflow and save time

Conclusion 🎊

Congratulations! You now know the basics of Xcode.

Don’t feel insecure if you are a little overwhelmed. You’ll see, the more you deal with it, the more comprehensible everything becomes.

“The secret of getting ahead is getting started.”

Mark Twain

Do not hesitate to ask in the comments if anything is unclear. We will reply as soon as possible (:

Leave a Reply

Your email address will not be published. Required fields are marked *

small_c_popup.png

Are you ready for a new era of iOS development?

Start learning swiftUI today - download our free e-book