iOS 15 Application Development for Beginners: Learn Swift Programming and Build iPhone Apps with SwiftUI and Xcode 13

CHAPTER 1

Getting Started with Xcode

Introduction

After a big success in Mac computers, Apple shifted their focus to consumer electronic products such as iPod, iPhone, iPad etc. Apple introduced their new products with the success and advancements of iOS (Apple's OS for their consumer electronic products). With the iPhone achieving an even bigger success, in 2008, Apple introduced the App Store for third party apps, which began a new era of app developments. As the consumers started moving from the Mac machines to mobiles, the application development opened a new platform for the business to acquire more consumers that can use apps on the go while they are walking, traveling etc. Apple already had an IDE Xcode which was used by the developers for Mac application development. They have now made upgrades to it and accommodated the iOS app development in the same Xcode. In this chapter, we will start our application development with Xcode and build our first simple sample application which will look like a blank app in a simulator while testing.

Structure

In this chapter, we will cover the following topics:

Xcode IDE

Download and Install Xcode

Xcode User Interface

Configuring Xcode Project

Run and Build Xcode iOS Project

Code with Xcode Playground

Xcode Organizer

Objectives

After studying this chapter, you will be able to use Xcode IDE for app development, use a simulator to test the developed applications, and create an iOS Project in Xcode IDE.

Xcode IDE

Xcode is an Integrated Development Environment (IDE) which contains the software development tools developed by the Apple Company for developing the applications and software for MacOS, iPhone, iPad, iPod Touch, iWatch, and Apple TV.

Xcode includes the Xcode IDE, Swift, SwiftUI and C/ C++/ Objective-C compilers, Instruments analysis tool, simulators, the latest SDKs, and other hundreds of powerful features. Swift is a programming language that is fast, safe, and modern. SwiftUI is a declarative UI language used for the interactive app user interface.

Technical requirements

To fulfil the learning requirements and coding goals of this book, we will require the following:

An Apple system such as Mac mini, Macbook, iMac, etc, with MacOS 10.16Big Sur OS version.

An Apple ID (if you don't have one, this chapter will help you to create an Apple ID).

Apple iOS device (optional) (if you have one, you can run the apps on the device; otherwise Xcode Simulator will be enough to check how your apps work).

We will start downloading the Xcode IDE for developing iOS applications from the Mac App Store.

Download and install Xcode

Before starting the development of the iOS apps, we need to download and install Xcode; the following are the steps to perform the Xcode installation:

Open the Mac App Store.

Search for the keyword Xcode and press the return key.

In Search Results, Xcode version 13.0 will appear, click on Get and Install.

Now, a box will appear which will ask for an Apple ID; if you already have an Apple ID, fill in the mentioned field and it will ask for a password for your Apple account. Refer to figure 1.1 as follows:

1.1: Account information

If you don't have Apple ID, you must create a new Apple ID with the help of the following Apple support article:

https://support.apple.com/en-in/HT204316

The latest version of Xcode is 13 which includes Swift 5.5, SDKs for iOS 15, iPadOS 15, tvOS 15, watchOS 8, and MacOS Big Sur.

Open the Xcode from the App Store. This will install some supported SDK software for some time and will open the Xcode Welcome page, shown in figure 1.2 as follows:

Figure 1.2: Xcode Welcome Window

No recent projects will be seen if you are launching it for the first time. Click on Create a new Xcode project to set up a new project for iOS apps development.

Now, you will see a set of new options to choose from, shown in figure 1.3 as follows:

Figure 1.3: Select Application Platform

To make an app for iPhone and iPad, select the option as iOS. Similarly, select watchOS, tvOS MacOS, and multi-platform for iWatch, Apple TV, Mac apps, and hybrid apps respectively. Then select App and click on Next.

The next screen will have some fields to fill up regarding the setting up of the project, such as product name, team, organization name, organization identifier, language, and user interface. Let's understand what possible values these fields could have and how it would impact the project, which is going to be created, as follows:

Product Name: This will be the name of your App which will be entered in the text field of the project name.

Team: Apple Developer account of Team for the project. We will discuss this in detail in Chapter 15: Publish Apps on the App Store.

Organization Name: The name of your company that owns the development of this project. You can just put your name for now while you learn.

Organization Identifier: This identifier is created with the conjunction of company name. For now, enter com.organizationname.

Bundle Identifier: This field is not allowed for you to edit. It's automatically created by combining an organization name with an organization identifier. This identifier is used to identify the apps uniquely on the Apple App Store. Refer to figure 1.4 as follows:

Figure 1.4: New iOS Project

Language: This specifies the programming language to be used in app development. Select Swift from the drop box field.

User Interface: For now, set this to Storyboard. We will discuss another type of user interface selection, SwiftUI.

Life Cycle: When you create a new SwiftUI Application in an Xcode, you'd be given an option to choose between SwiftUI App Lifecycle and UIKit App Delegate. If the user interface is selected as Storyboard, it would be UIKit App Delegate by default.

Checkboxes: These checkboxes are used to include the core data for the purpose of local database, unit test, and the UI unit test cases in the project. Keep them unchecked for now.

Choose the location where you want to save this project code in your Mac machine.

Xcode user interface

Before moving further towards app development, we first need to understand the navigation of Xcode, tools, and the options used during the development of the iOS applications. Let's discuss the different sections of Xcode Interface to understand clearly how we will use this IDE during app development, as follows:

ToolBar: This toolbar on the top left side of Xcode is used to build, run the app, and view the execution progress of your app.

Windows pan bar: This will help you configure the Xcode development environment.

Object Library: Addition or plus button will be used to add UI or object components to the project.

Version Editor: This will be used to check for differences of codes between two versions.

Open and close buttons for Navigator, Debug, and Editor Area in Complete windows pan.

Navigator area: This provides quick access to all the parts of the project. The Navigation area is shown by default in the Xcode window.

Editor area: The Editor area allows you to edit your code, user interface components, and resource files, if required in the project.

Inspector area: This area will allow you to edit the information related to the items in the Navigator area and Editor area.

Debug area: This area contains two portions – one for the view of variables and their values and another one for the console.

Here, we are trying to get familiar with the different parts of Xcode, so don't be overwhelmed by such information on the parts and their relation. We will study all these in detail and use each portion many times in the upcoming chapters.

Xcode search navigator

In the Project Navigator Area, when you click on the Search icon, it will open a search navigation bar form where you can search for any text and in the results. Xcode Editor Navigation area will show all the results of that project containing the text which is searched in the Xcode search navigation bar.

To use it via a shortcut, you can use the command cmd + shift + F, which will open the search navigation bar. These command operations would be helpful when you need to search multiple times and be quick. Refer to figure 1.5 as follows:

Figure 1.5: Application Development window

Xcode issue navigator

When there are some issues in the project while compiling and executing the app, the project navigation area shows warnings in the yellow symbolic icon and errors in red. A project can be built and run with warnings but not with errors. All errors need to be resolved to run a successful app.

Warnings could be potential issues in further development of the apps, so we should not ignore the warnings which are listed down in the issue navigation. Similarly, not only in coding but in the development of user interface, warnings and errors could occur in the same issue navigation.

Configuring Xcode project

The main or root node of the project navigator is the actual project configuration file, which is indicated by a blue icon. In this section, all the fields are already filled with optional content, and you can also edit those fields if required to change any such configurations of the project. Let's look at what we can change here, as follows:

You can set or change the name of the project.

Bundle Identifier related information can be edited.

You can allow and disallow for multiple orientations of the screen for your app.

Set the minimum required iOS version below which your app can't be installed.

If required, add additional Apple libraries and frameworks.

App icon and launch image linkage options can be edited.

Default project setup

When you create an Xcode project, it's created with some default components from which you can start the development of your app. We will discuss the default files and components created by Xcode automatically in the project, as follows:

AppDelegate: AppDelegate requires very minimal or no change usually while development. This component initializes the app container and controls the lifecycle of the app which we will discuss and use in detail in the later chapters.

SceneDelegate: SceneDelegate is responsible for what needs to be displayed on the app screen in terms of user interface and data. The app transfers some of the app handling responsibilities to the SceneDelegate. This will handle some of the app states which were handled in AppDelegate earlier to iOS 13, shown in figure 1.6 as follows:

Figure 1.6: Application File Menu Window

ViewController: This is a default view controller created by Xcode. We can create a new controller if required and can use the default one too. The View Controller class is mainly responsible for the lifecycle and functions of that view.

Main.storyboard: The main storyboard is used for the development of the user interface of the app which we will discuss in detail in the User Interface section of this book.

Assets: This component handles the images of different dimensions, such as 1x, 2x, and 3x. As we know, the same app will be run in different resolution Apple devices like iPhone 13 mini, iPhone 13, iPhone 13 Pro, etc.; therefore, we must give the respective resolution images in 2x and 3x forms, so that in any condition, the images and icons of the app do not get blurred.

1x is the size (in terms of height and width) of the image component on the interface; so to get the 2x and 3x size information, we need to multiply it by 2 for 2x resolution and 3 for 3x resolution. Every item of a single image in the Assets component has three placeholders for the respective resolutions.

Info.plist: A common property list which contains information about your project is Info.plist. Plist extension is used by Apple for file formats like XML type. We will discuss plist in Chapter 8, File Handling in iOS. Sometimes you need to add more information to this property list. For example, if your app wants to access a photo library, the app plist needs to contain a key which explains the reason for accessing the photo library.

Creating and adding new file

In the Project Navigator Area, when you right-click, a few options will be shown to you. To create the new code file in the project, you need to select the Create New File option, then a new option Pan will ask to choose the file type – as you know, we selected the Project language Swift, so you need to select Swift File type. Next, this will ask you to name the file and after naming it, this swift extension file will be added to your project.

If you want to add any existing file to your project, right-click on the project name and select the option of adding a New File. This will open a window for the selection of files from your Mac system. After the selection of a file, don't forget to select the copy option, because without the copy option, it will only create the reference of the file in your project, and when you change the location of the project in your Mac or any other Mac machines, that file will show as missing from the project as it never became a part of your project while adding.

Build Storyboard UI

After we created the new project, earlier in this chapter, and then selected the option of storyboard for the user interface, due to this, Xcode included the main.storyboard file. The main storyboard contains the UI screen for ViewController on which the user interface components such as labels, buttons, etc., will be placed to inspect or to change their properties as per requirements.

Assistant editor

To open Assistant editor, go to the Editor menu and choose Assistant. The Assistant editor view shows two pane views in the Xcode window in such a way that its storyboard screen and its relative view controller file can be seen together to edit or work on UI and its code efficiently. This editor will help connect the user interface elements from the storyboard view to the view controller code file, so that those elements can be manipulated via code at the time of execution as per the logic of code.

Utility area

File Inspector is located in the first tab of the Utility area which shows the details about the current highlighted file in the project navigation area. This contains information such as type of file and the physical location of file on the Mac machine, so that you can locate the path of the file.

Quick Help Inspector is located in the second tab of the Utility area, which shows you the documentation about the method, class, and the keyword that your typing cursor is currently on in the code file.

Attribute Inspector and Size Inspector will only show as tabs in the Utility area when you select the user interface file's elements in the Storyboard. Using these two inspectors, you can change the properties and size of that selected element. We will further discuss these topics in detail in the Chapter 5: TabBar, TableView and Collection View.

Run and build Xcode iOS project

We already discussed some of the buttons in the beginning of this chapter. Now, we will see how these can be used to run and build your app or simulator. Before moving further, let's discuss simulators.

Simulator

In general, we can define a simulator as a machine designed to provide a realistic imitation of the controls and operations of complex systems. In our case, we are developing the apps which will run on iPhone, iPad, and the other Apple devices. It's good to have an Apple device to test, but it is not required to have these, instead the Xcode toolset provides Simulators of all the Apple devices with Xcode which we can choose while running your app, and test the app in almost a similar way as on the real device. Refer to figure 1.7 as follows:

Figure 1.7: iOS App in Simulator

There is a limitation of the simulator, that it won't support the features which can be supported by the mobiles, such as network calling, network messages, Bluetooth communication, etc.

To run your app in the simulator, you need to complete the following steps:

Click on the Scheme menu in the upper toolbar of Xcode and you will see the list of simulators. Choose iPhone 13 from the list of simulators.

Click on the Run button in the same toolbar to run your app in the currently selected simulator. You can also use the command + R shortcut on the keyboard for this same function.

In case your Developer Tool Access dialog box appears, then you need to enter the username and password of the Mac machine admin account.

The simulator application will launch in some time which will replicate the iPhone 13 and then your app will launch in that iPhone simulator.

To stop the running of the app again, switch back to Xcode and click on the Stop button in the toolbar to stop your currently running app.

Rather than just running a simple app, you can simulate some other action in the simulator to check the impact of these actions on the real devices. These actions are given as follows:

Device Rotation: If you are developing your app for both the Portrait and the Landscape mode, then you need to check your app by switching to these two modes with the help of the device rotation feature on the simulator.

Simulating GPS: From the menu in the Debug option, select Location; by choosing a custom location, you can set the latitude and the longitude of any location to test the GPS features with the Simulator.

Device Shake: If you add an action which will happen only if the user of the app will shake the device, then you can test it by selecting the device shake option in the simulator and your code will trigger those actions which are attached to the shaking of the phone.

Run app on device

If you have an Apple device such as iPhone, iPad etc., you can run the developed app from Xcode directly. The step-by-step guide is given as follows:

First plug the Apple device into the Mac machine via USB.

When you try to run the app after selecting a device in the menu, it will give you an Error: Signing for requires a development team.

A valid Apple digital certificate is required to run the app on the Apple devices. You can use either the Apple ID or the Apple developer account to add a team in the section Signing and Certificates which will generate the digital certificates.

Login with your Apple ID which you used for the Xcode download as well.

You will see a dialog box asking to trust this computer on the phone; to continue, click on Yes.

Xcode will ask you to confirm if you want to use this device for development purposes; to continue, click on Yes.

Now, you will be able to see your device in the list of devices, above the simulator list.

Almost all the instructions in this book won't require you to have an Apple device to learn and practice on the iOS 15 app development with Swift. Not setting up a device with Xcode will not affect your learning path. If you are not able to set up your device with Xcode (which could have many reasons, such as old device, not active Apple account etc., discussing all these cases here is out of the scope of this book), then please refer to the following Apple support link:

https://developer.apple.com/documentation/Xcode/running_your_app_in_the_simulator_or_on_a_device

Code with Xcode Playground

Playground in Xcode can be used to quickly write the Swift code and experiment on that code to see the results quickly without creating any new Xcode project. It's not a full-fledged project and is not intended for a complete app development; rather it is to practice or experience the Swift code on it. Playgrounds are a great learning, teaching, and practice tool for beginners. Refer to figure 1.8 as follows:

Figure 1.8: Choose Playground Template

To create a new playground setup, go to the menu File, New, then select Playground. This will open the setup of a playground for Swift coding. If you just started the Xcode, then on the Xcode welcome page, you will find the option to start Get start with a Playground. Let's do a quick tour of the Playground functions in Xcode, as follows:

Editor: At the top left of the Playground window, you can write the Swift code in the editor. This is an area where you will