You have learnt the fundamentals of swift coding, but now let's put all this together to build our very own app from scratch. We will be building an app based on a classic kid's toy, the Magic 8-ball. Magic 8-ball is used to ask a yes/no question and upon shaking it, it gives out an answer.

You will be making the app version of this. In particular, the following is how we would like someone to interact with the app:

1. They hold the phone and say aloud the question they would like to ask the Magic 8-ball. For example, someone might say "Does she have a crush on me?", or "Will I pass the test?", or "Will my favorite team win the world cup?"
2. Then, they press a button on the app to get the response from the Magic 8-ball
3. The app displays a response such as "Definitely", "Highly Unlikely", etc.

Creating a new project

To start off, you need to create a new project in Xcode. Follow the steps below:

Launch Xcode > Create a new Xcode project.

Click on iOS on the top menu bar > Single View App.

Give a name to the project such as "Magic8ball". In the Identifier enter "com.example" for now if you don't own a website. If you do you can use it in the same manner. This identifier is used to identify your app when you publish to the App Store. It can always be changed later.

This is how your screen should look right now. Don't get overwhelmed by seeing lots of files and options, we shall be covering all of them in our tutorials.

In the Team section above you must see None as the default selection. Click over it and click on "Add An Account". Over here you will be asked to sign in via you Apple ID. This will help you create a developer account and it'll help you sideload your apps onto your iPhones and iPads.

Apple requires a $99 Apple developer membership to publish an app to the App Store. However, there are methods to build apps, load them on your phone, etc without having to buy the developer membership.

Xcode IDE for building apps

Now let us get familiar with the Xcode IDE for building apps.

On the left hand side, you will see the Navigation Pane. This pane displays the list of files which are part of the app. The folders apart from Magic8ball won't be used in this tutorial, so you can minimise them to reduce clutter. The two files in our current folder that end with .swift is where the logic of our app will be (AppDelegate.swift and ViewController.swift). The file Main.Storyboard is where you will be designing your app. Click on Main.Storyboard.

You should be well aware with the sections of the IDE labelled above as we will be using this terminology from henceforth. Make sure you can spot all of these - Navigation Pane, Document Outline, Interface Builder, Debug Area, Utilities Pane and Object Library.

Since most of you will be using a 11 or 13 inch MacBook, the screen can look quite congested. Use the 3 buttons on the top right to toggle off the Navigation Pane, Debug Area, Utilities Pane and Object library (marked in black circle in image above). To toggle off the Document Outline, use the small button just above the Debug Area (also marked in black circle).

When you keep your cursor on the Interface builder and zoom out (by pinching your fingers on the trackpad), you'll be able to see the entire screen of the iPhone where we will be building our apps interface.

App interface

Now we are going to start building our app's interface. The app has to perform two basic functions:

• Press a button
• Display the random message after the button is pressed

We are now going to use objects from the object library to build our app.

Label (text)

First what we need is a Label to print our message when the button is pressed. In the Object Library section, click on the circle with square (see image below).

You can use the filter area to search for the things you need. To display the text, you will need to use a Label. A Label can display a text, and moreover the text can change with users interaction with the app. So type label in the filter area, and drag the item onto the screen. Place it towards the top in the middle and increase the size by stretching it from the points around it.

You will see blue lines popping when you're moving the label around, these reference lines are used to centre and align the objects perfectly.

Over in the Utilities Pane, on the top select the attribute inspector. It looks like a shield kind of symbol, the third symbol from right (see image above). Here you will be able to change the basic properties of the text inside the label like the size, font, color, background color. Align the text in the centre and increase its size accordingly. Change the initial text by typing in the second field in the text section where by default "Label" is written.

Button

Now, search for a Button in the Object Library and drag it onto the interface builder. Place it under the label and increase its size appropriately. Again going to its attribute inspector, change the text within the button to something more appropriate such as "Press Me".

Yay! You just completed building a basic interface for your app.

Connecting the logic

Let's toggle off the navigation pane and the utilities pane so it gives us more space on the screen. You've just build the interface of the app but the app still doesn't do anything yet. To make it do something, you need to build its logic. This logic will be coded in the swift files.

In particular, open up the ViewController.swift file. We shall be using the interface and the swift file side by side. To do this you have to click the assistant editor option on the top right. It's the symbol of two circles intervening. You'll see the screen gets split up into two with swift file on the right.

We have two functions here already, but we won't be needing them for this tutorial.

Connecting the Label

Now we have to connect our button and label to the code file here. Click on the Label and hold ctrl button down and drag the blue line to the code file to connect the label.

When you release it, it'll prompt to give it a name. You should name it something appropriate such as display and make sure connection field has Outlet selected and click connect. A line of code will be written in the file:

@IBOutlet weak var display: UILabel!

You can see a variable named display of type UILabel. Hurray! You just connected the label to the code.

Connecting the Button

We will be doing the same for the button as well. Connection field over should be Action as upon pressing it, it should perform something. Name it button and its type is should be UIButton. Once you've selected these, click connect. This creates a function that will be executed when the button is pressed.

@IBAction func button(_ sender: UIButton) {
    // Things to do when the button is pressed
}

Now you need to

1. Declare an array with the possible answers we want to print every time a question is asked. The array will be declared outside the button function.
2. Choose one of the possible answers at random when the button is clicked.

Here's how you can do the above.

var resultArray = ["Yes", "No", "Maybe", "Definitely", "Highly unlikely", "Try again later"]
@IBAction func button(_ sender: UIButton) {        
    let randomIndex = Int(arc4random_uniform(6))
    display.text = resultArray[randomIndex]
}

In line 1, we declare an Array with the possible answers. Line 3 is the start of the function, which was generated when we connected the button.

Line 4 uses a predefined random function in the Swift library arc4random_uniform() to generate a random number. Since our array contains 6 elements, we want an index in the range 0-5. To generate a random number between 0-5, we have to give the upper limit for the random function as a parameter, which is 6.

Lastly, in line 5, we change the text of the display Label. This can be done by setting the .text attribute of the Label.

So now, when the button is pressed, a random number is is generated, and based on that, we change the text of the display Label.

If you use var instead of let in line 4 above, you will see a yellow warning saying that you should change the variable randomvar from var to let. let is used in Swift to define a constant, i.e. a variable whose value will not never be changed. You can press the fix button when you click on the warning or manually change it if you wish to. This change does not have any effect on the code, it's just a recommended practice in Swift.

Alright! Let's give it a run!

Running the app

To run the app, click on the play button on the top left corner to launch the simulator. When you launch for the first time it may take some time. Once launched click the button a few times to see the answer change.

Yippee! You just made full functioning app!

Finishing touches

But this doesn't give the feel of the Magic 8-ball. To make the app look more appealing we are going to give it a black background and make the Label text white.

Click on the label and go the attribute inspector and the field color, click on it and select white (don't be afraid if your text disappears, they are both white!). Click on the place apart from the button and the label to get access to background properties. On the attribute inspector you'll see background color white, click on it and change it to black. Now your app looks nice and classy.

Congratulations

Good job! Show this to your family and friends and let them ask questions so your Magic 8-ball can answer it.

Appendix: Complete ViewController.swift file

The code for the swift file:

import UIKit
 
class ViewController: UIViewController {
 
    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.
    }
    
    @IBOutlet weak var display: UILabel!
    
    var resultArray = ["Yes", "No", "Maybe", "Definitely", "Highly unlikely", "Try again later"]
    
    @IBAction func button(_ sender: UIButton) {        
        let randomvar = Int(arc4random_uniform(6))
        display.text = resultArray[randomvar]
    }    
}