Swift UIKit Style, iPhone App Development: 02 Creating a Hello World App and Perfectly Adapting to Xcode

Hello! In this course, we will learn how to develop iPhone apps using the UIKit framework with the Swift language. Specifically, our goal is to create a simple ‘Hello World’ app as our first project to fully adapt to the Xcode environment. Through this course, you will familiarize yourself with various features of Xcode and understand the basic app structure.

1. Setting Up the Development Environment

To start developing iPhone apps, you need to set up the development environment first. Please follow the steps below.

1.1. Installing Required Programs

The following programs are necessary for iPhone app development:

  • Xcode: Apple’s official integrated development environment (IDE), essential for designing and developing apps.
  • macOS: Xcode runs only on macOS. It is recommended to use the latest version.

Xcode can be downloaded for free from the Mac App Store. Once the installation is complete, let’s launch Xcode and set up the environment.

1.2. First Launch of Xcode

When you launch Xcode, the following screen will appear:

  1. Select Create a new Xcode project at the top left.
  2. In the template selection screen, choose App and click Next.
  3. Enter the project name and select the Swift language and UIKit interface.
  4. Choose a location to save the project and click Create.

2. Understanding the Structure of the ‘Hello World’ App

Now, let’s take a look at the basic structure of the app. The template generated by Xcode contains the following files and folders:

  • AppDelegate.swift: An important file that manages the app’s lifecycle. It defines the tasks to be performed when the app starts or terminates.
  • SceneDelegate.swift: Manages various UI scenes of the app. It is useful for apps that support multiple windows.
  • Main.storyboard: A storyboard that allows visual design of the app’s user interface.
  • ViewController.swift: The view controller that constitutes the main screen of the app.

2.1. Main.storyboard

Clicking on the Main.storyboard file opens Interface Builder. Here, you can configure the app’s UI. By default, a ViewController is included, and we will add a label that says ‘Hello World’ to this screen.

3. Creating the ‘Hello World’ App

Now let’s actually create the ‘Hello World’ app. Follow along!

3.1. Adding a Label

  1. Open the Main.storyboard file and select the View Controller.
  2. Click the library button (+) at the top right to search for a Label object.
  3. Drag the label into the View Controller.
  4. Change the label’s text to ‘Hello World’.
  5. Adjust the label’s size and position it in the center.

3.2. Writing Swift Code

Now, let’s go to the ViewController.swift file and write some code. Refer to the sample code below:

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Create label
        let helloLabel = UILabel()
        helloLabel.text = "Hello World"
        helloLabel.textColor = .black
        helloLabel.font = UIFont.systemFont(ofSize: 32, weight: .bold)
        helloLabel.textAlignment = .center
        helloLabel.translatesAutoresizingMaskIntoConstraints = false
        
        // Add label to view
        view.addSubview(helloLabel)
        
        // Set auto layout constraints
        NSLayoutConstraint.activate([
            helloLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            helloLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

3.3. Running the App

After writing the code, click the play button (▶️) at the top to run the app. The simulator will open, and you will see a label that says ‘Hello World’ in the center.

4. Getting Familiar with Xcode’s Key Features

Now that we have created a basic app, let’s familiarize ourselves with various features of Xcode.

4.1. Using Interface Builder

Interface Builder is a tool that allows you to design your app’s UI visually. Let’s learn how to add and arrange various UI elements here. You can create custom UI elements or utilize existing ones to design your own unique interface.

4.2. Using the Code Editor

You also need to learn how to use Xcode’s code editor. It offers various features such as syntax highlighting, code autocompletion, and code error detection. Particularly, effectively utilizing the code autocompletion feature can greatly enhance your development speed.

4.3. Version Control Features

Xcode has built-in Git support, making version control easy. You can collaborate with team members smoothly or easily restore previous versions of the project using Git.

5. App Distribution Process

After developing the application, the distribution process is also important. After joining the Apple Developer Program, you can distribute your app on the App Store, making it available to users worldwide.

5.1. Joining the Apple Developer Program

By joining the Apple Developer Program, you can distribute your app on the App Store. There is an annual fee, and you can access various tools and resources.

5.2. App Submission Process

To submit the app, you need to go through the archiving process in Xcode. Select Product > Archive from the project menu to create an archive, and the Organizer window will open. Follow the instructions for the distribution and submission steps here.

6. Conclusion

In this course, we learned the basics of using Xcode by creating a ‘Hello World’ app with the Swift language. We have solidified our foundation for developing real apps using the UIKit framework. Moving forward, I hope to learn about various features and frameworks and develop more complex and interesting apps.

Thank you!