Iteration 1: Configuration & Alerts

Iteration Goals

By the end of this iteration, your app should:

• respond with a generic alert when an emoji button is tapped

Configuration

Inside the ViewController.swift file, we will just add one action/function (now) and a couple of properties (later).

This function is going to seem a little different from what you are used to. It will be an @IBAction func ... , however, you will not create the action like you normally do. This is because we have to set it up differently to get that alert box to show up. Type out the skeleton of your function:

@IBAction func showMessage(sender: UIButton) {

}

Now, let’s add some pseudo-code so you can think through what needs to happen in this function as well as keep organized.

@IBAction func showMessage(sender: UIButton) {

  // in as much detail as possible
  // pseudo-code the things that need to happen
  // when a user clicks an emoji button

}

Now, let’s set up the alert. Inside the action/function, write a new constant called alertController that is assigned to UIAlertController(). When you start typing, it will auto-populate. Select the option with the title, message, and preferredStyle arguments. Provide the title and message arguments with strings of your choice, and preferredStyle with UIAlertController.Style.alert.

We have an alert, but we need to give it an action so that the user can tap a button on it to make it go away when they are done reading! On the next line, add:

 alertController.addAction(UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler: nil))

The code above adds an action to this alertController. This action provides an “ok” button on the alert, has default styling, and doesn’t have a handler.

Lastly, let’s use the present function to show our alert. It takes three arguments: the thing you want to present (in this case, alertController), animated which is a boolean true/false, and completion which we will provide with nil. This line of code should look like:

present(alertController, animated: true, completion: nil)

Re-build the project in the simulator to make sure you aren’t getting an errors. Nothing should be behaving differently than earlier; we haven’t connected the UI to code.

Get the StoryBoard and Code Talking

Since we didn’t establish traditional actions between the StoryBoard and code, we need to manually connect them.

While you hold the control button down, click and drag from an emoji button up to the little yellow circle at the top of your StoryBoard scene. When you release, you’ll see a black box with options. Select showMessageWithSender:. Repeat that for every emoji button on your UI. This will connect each button with the showMessage action/function.

Re-build in the simulator - are you getting an alert on each button tap? If so, reflect on these questions to make sure you understand how these pieces all came together:

• When the user taps a button, what function is triggered? How did you as a developer connect that button to that function?
• What is the title/bold text at the top of the alert box? Where did that come from? Try to change that text.
• What text is on your alert box? Where did that come from? Try to change that text.
• What is the text on the button of the alert box that allows the user to “dismiss” the alert? Where did that come from? Try to change that text.

If this all works, commit your changes.

Commit Your Changes

In your terminal, make sure you are still in the emojional directory. Add and commit your changes. Your commit message should be something like “Complete Iteration 1”.

Now, you’re ready to move on to Iteration 2!