5. February 2019

Beginner iOS & Swift Tutorial: How to develop your first iPhone app

This tutorial will show you how to:

Install Xcode and create a new iOS project
Add assets to the project
Edit views in the Storyboard
Create simple Layout Constraints to center views
Create an Action to connect Storyboards with code
Use the Xcode completion to write UIViewController code
Run an app in the Simulator and on your iPhone

Tested with Xcode 10.1

Requirements

To develop iOS apps for the iPhone/iPad using Xcode 10, you’ll need a Mac running at least macOS 10.13 High Sierra.

Install Xcode and create a new iOS project

Open the App Store app and install the latest Xcode:
Run Xcode and create a new project with File » New » Project ⌘⇧N. Select iOS » Application » Single View Application:
Name the app “Beep”.
Company Identifier should be a domain name (written the other way round). I’m going to use com.example, feel free to use your own domain name.
Choose Swift as Language.
Uncheck Use Core Data (Core Data is a persistence/database framework, we don’t need it for this tutorial):

Add assets

Download assets.zip and uncompress the archive.
Open Images.xcassets in the Xcode project and drag in the images into the project:

Add a Button to the View Controller in the Storyboard

Open Main.storyboard. You’ll see the Initial View Controller of the app with an empty View:
Open the Object Library (you might have to long/hard press the button to select the Object Library and not the Media Library), search for Button and double-click it or drag it to the center of the View:
In the Attributes Inspector edit the properties for the Button: choose System as type to make the button tappable/tinted blue, remove the title and select the Trumpet image:

Create Layout Constraints to center the Button

Create Layout Constraints to center the button horizontally and vertically using the Align button:

Create an Action connection to handle tapping the Button

Select the View Controller object and open the Identity Inspector. The Class specified here contains the code responsible for the managing the Views of this controller:
Click with ⌥ on the arrow:

This opens the Swift code for the View Controller class in the Assistant Editor besides the Storyboard editor:
Drag with Ctrl pressed down / with the right mouse key from the Button into the body of the class to create a new Action method that is called when the Button is tapped:
Choose Action and name the method beep:

Writing code to play a sound

Drag the file trumpet.mp3 from the assets.zip download into the Xcode project:
Make sure to select Copy items if needed to copy the file to the Xcode project folder:
On the top of the ViewController.swift file, add an import to AVFoundation - this framework contains classes for audio and video handling:
```
import UIKit
import AVFoundation
```
In the beep method, type avpl and press ⌘Space to show the Xcode code completion:
Press Enter to confirm the AVPlayer selection.
Click with ⌥ on AVPlayer to show the Quick Help, scroll down and select Class Reference to look up the documentation for the AVPlayer class:
Make yourself familiar with the methods to create an AVPlayer and to play a sound:

Use the Xcode code completion to write code to load the trumpet sound from the app bundle into an AVPlayer, store it in the View Controller class and call its play-method when the button is tapped:

import UIKit
import AVFoundation

class ViewController: UIViewController {

    let player = AVPlayer(url: Bundle.main.url(forResource: "trumpet", withExtension: "mp3")!)

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func beep(_ sender: Any) {
        player.play()
    }

}

Running the app in the Simulator

Select an iPhone Simulator for the Scheme and hit Run ⌘R:
The app starts up in the Simulator: