HOTH 5 - iOS Workshop README

Slides: https://docs.google.com/presentation/d/1jdLz1cU41l7fj3WQTB8BHoS2whf8-1vAX3s8D_2MoaQ/edit?usp=sharing

Image: https://imgur.com/a/u1fm6

Getting Started
Interface Builder
Coding in Swift

Getting Started

Begin by creating a new project in Xcode.
Select "Create a new Xcode project" near the bottom left of the window.

Ensure that the "iOS" tab at the top of the page is selected.
Double-click on "Single View App".

Name your project "BruinTap".
Pick whatever Team, Organization Name and Organization Identifier that you want.
Ensure that the Language field is set to "Swift".
Ensure that "Use Core Data" is unchecked.
Click "Next".
On the following window, select where you'd like your project's folder to be create (default location is ~/Desktop) and click "Create".

Interface Builder (IB)

In the Project Navigator on the left, you should see all of the files associated with our project. The only group (folder) we're interested in for the purposes of this tutorial is the BruinTap group. The BruinTapTests, BruinTapUITests, and Products groups aren't important for now.
Inside the BruinTap group you should see a file named Main.storyboard. Click it and you'll be taken to the Interface Builder.

Setting Up the UI (User Interface)

Locate the button that has a circle with a square in it on the top right of the screen and click it.
The Object Menu will appear and contain UI elements we can drag into our storyboard.

Scroll down in the menu until you see the "Label" and "Button" elements.

Drag two Labels and two Buttons into the View Controller, and arrange them as they are in the following photo (it doesn't have to be exact, just more or less):

Setting Constraints Using Auto Layout

Select the Button we placed in the top left corner.
On the right side of the screen, open the Attributes Inspector by clicking the tab to the left of the ruler icon:

Under the "Title" field (third from the top), change the text from "Button" to "Start" and press Enter.

With the Start button still selected, click the "Add New Constraints" button near the bottom right of the page.

Set both the top and left margins to 30. The red lines should now be solid rather than dashed.
Click "Add 2 Constraints".

Now select the Button in the middle of the page.
Click the "Add New Constaints" button near the bottom right of the page.
Set the Width and Height to 150. The boxes next to Width and Height should now be checked.
Click "Add 2 Constraints".

With the Button in the middle of the View Controller still selected, click the "Align" button directly to the left of the "Add New Constraints" button near the bottom right of the page.
Check both the "Horizontally in Container" and "Vertically in Container" boxes.
Click "Add 2 Constraints".

Select the Label above the Button in the middle of the page.
In the Attributes Inspector on the right side of the screen (the tab to the left of the ruler icon), change the Text field to 0 (then press Enter) and change the Alignment to centered.

With the top label still selected, click the "Add New Constaints" button near the bottom right of the page.
Set the bottom margin to 75. The red line should now be solid rather than dashed.
Click "Add 1 Constraint".

With the top label still selected, click the "Align" button directly to the left of the "Add New Constraints" button near the bottom right of the page.
Only check the "Horizontally in Container" box.
Click "Add 1 Constraint".

Now select the Label below the Button in the middle of the page.
In the Attributes Inspector on the right side of the screen (the tab to the left of the ruler icon), change the Text field to 10.00 (then press Enter) and change the Alignment to centered.

With the bottom label still selected, click the "Add New Constaints" button near the bottom right of the page.
Set the top margin to 75. The red line should now be solid rather than dashed.
Click "Add 1 Constraint".

With the bottom label still selected, click the "Align" button directly to the left of the "Add New Constraints" button near the bottom right of the page.
Only check the "Horizontally in Container" box.
Click "Add 1 Constraint".

All set, verify that your View Controller now looks like this:

Adding Images Using XCAssets

In the Project Navigator on the left, select the folder icon named Assets.xcassets.
In the left pane (the one containing the "AppIcon" entry), right click and select "New Image Set".

Single click our newly created Image and rename it to ButtonBG.

Click here and download the image.
From Finder/your Downloads, drag the downloaded image into the slot in ButtonBG labeled 1x.

Return via the Project Navigator to Main.storyboard.
Select the Button in the center of the View Controller and set its Title field to nothing/empty via the Attributes Inspector.

Five fields down from the "Title", use the drop-down menu to change the "Background" to ButtonBG.

Linking your IB Objects to your Code

Click on the two overlapping circles near the top right of Xcode to open the Assistant Editor.
If it is difficult to see our View Controller, close the left pane if necessary by clicking on the button (square with black rectangle on the left side) to the left of "View as iPhone..." in the bottom left of the window.

While holding down control (not to be confused with cmd(⌘)), click on the "Start" button and drag to the space directly above the viewDidLoad() function.
In the window that appears, ensure that the "Type" field says UIButton, else press "Cancel" and try again.
Set the "Name" field to startButton.
Click "Connect".

While holding down control, click on the button in the middle of the View Controller and drag to the space directly below the startButton line we just made.
In the window that appears, ensure that the "Type" field says UIButton, else press "Cancel" and try again.
Set the "Name" field to tapButton.
Click "Connect".
While holding down control, click on the "0" label and drag to the space directly below the tapButton line we just made. (Note: You may have to zoom in via pinch-drag on your touchpad to be able to select the label itself).
In the window that appears, ensure that the "Type" field says UILabel, else press "Cancel" and try again.
Set the "Name" field to scoreLabel.
Click "Connect".
While holding down control, click on the "10.00" label and drag to the space directly below the scoreLabel line we just made. (Note: You may have to zoom in via pinch-drag on your touchpad to be able to select the label itself).
In the window that appears, ensure that the "Type" field says UILabel, else press "Cancel" and try again.
Set the "Name" field to timeLabel.
Click "Connect".
Add a new line under the "timeLabel" declaration we just made if necessary (for neatness).
You should see the following:

Linking IB Actions (Button Taps) to your Code

While holding down control, click on the "Start" button and drag to the space directly above the viewDidLoad() function.
In the window that appears, ensure that the "Type" field says UIButton, else press "Cancel" and try again.
Use the drop-down menu to change the "Connection" field from Outlet to Action.
Set the "Name" field to tappedStartButton.
Use the drop-down menu to change the "Type" field from Any to UIButton.
Ensure that the "Event" field is set to Touch Up Inside and that the "Arguments" field is set to sender.
Click "Connect".

While holding down control, click on the Button in the middle of the View Controller and drag to the space below the function we just made, but still above the viewDidLoad() function.
In the window that appears, ensure that the "Type" field says UIButton, else press "Cancel" and try again.
Use the drop-down menu to change the "Connection" field from Outlet to Action.
Set the "Name" field to tappedTapButton.
Use the drop-down menu to change the "Type" field from Any to UIButton.
Ensure that the "Event" field is set to Touch Up Inside and that the "Arguments" field is set to sender.
Click "Connect".
Add newlines as necessary for neatness.
You should see the following:

Coding in Swift

Declaring the Properties we Need

Close the Assistant Editor by clicking on the "X" on the top right of the pane with our code in it.

In the Project Navigator on the left side of the screen, select the "ViewController.swift" file.

Above all of the IBOutlet statements, but still within the (class ViewController block), add the following code:

var score = 0
    
var timer: Timer!
var time: Double = 10

Incrementing Score when we Tap the Button

Inside the tappedTapButton() function, add the following code:
```
score += 1
scoreLabel.text = String(score)
```

Use the "Play" button in the top left of Xcode to build and test our app out. Selecting a smaller phone like the iPhone 5S or 6 will make it easier to see everything.
Try pressing the button. The score should go up each time we tap it!

Implementing a Timer

Inside ViewController.swift, declare a function exposed to Objective-C between tappedTapButton() and viewDidLoad() named timerAction() and fill it with the following code:

@objc func timerAction() {
        
        time -= 0.01
        timerLabel.text = String(format: "%.2f", time)
        
        if time <= 0 {
            
            timer.invalidate()
            timerLabel.text = "0.00"
            
            startButton.isEnabled = true
            
        }
        
}

Inside the tappedStartButton() function, add the following code:

time = 10
timeLabel.text = String(format: "%.2f", time)
        
timer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(timerAction), userInfo: nil, repeats: true)
        
startButton.isEnabled = false

Build and run our app again. Tap the "Start" button and you should see the timer counting down!

Disabling and Enabling the Tap Button

Inside the viewDidLoad() function, add the following code:
```
tapButton.isEnabled = false
```

Change the timerAction() function to the following:

func timerAction() {
        
        time -= 0.01
        timerLabel.text = String(format: "%.2f", time)
        
        if time <= 0 {
            
            timer.invalidate()
            timerLabel.text = "0.00"
            
            startButton.isEnabled = true
            tapButton.isEnabled = false
            
        }
        
}

Change the startTap() function to the following:

@IBAction func startTap(_ sender: UIButton) {
        
        score = 0
        time = 10
        
        scoreLabel.text = String(score)
        timerLabel.text = String(format: "%.2f", time)
        
        timer = Timer.scheduledTimer(timeInterval: 0.01, 
                                     target: self, 
                                     selector: #selector(timerAction), 
                                     userInfo: nil, 
                                     repeats: true)
        
        startButton.isEnabled = false
        tapButton.isEnabled = true
        
}

Build and run the app again. Congratulations! You have finished your first app!

ktan17/hoth-v-ios-workshop