|
| 1 | +--- |
| 2 | + |
| 3 | +title: iOS Clicker Worksheet |
| 4 | +--- |
| 5 | + |
| 6 | +This tutorial is an intro to the world of iOS development, and will help you build your first iOS app. |
| 7 | + |
| 8 | +We'll be building a counter app, where the user will press a button and increment the number on the screen. |
| 9 | + |
| 10 | +## Pre-requisites |
| 11 | + |
| 12 | +In order to do iOS development, you will need a Mac. |
| 13 | + |
| 14 | +Download and install Xcode from the App Store. This may take a while — its a big program. |
| 15 | + |
| 16 | +## Creating a Project |
| 17 | + |
| 18 | +### 1. Open Xcode and click Create a new Xcode project |
| 19 | + |
| 20 | +  |
| 21 | + |
| 22 | +### 2. Select Single View Application from the **iOS > Application list**, and click **Next** |
| 23 | + |
| 24 | +  |
| 25 | + |
| 26 | +### 3. Fill in the project details: |
| 27 | + |
| 28 | + * Product Name: Clicker |
| 29 | + * Team: None |
| 30 | + * Organization Name: Whatever you want — your name is always a good fill-in |
| 31 | + * Organization Identifier: com.(OrganizationName) |
| 32 | + |
| 33 | + Make sure Swift is selected as the language, and Devices is set to Universal. |
| 34 | + |
| 35 | + Untick the 3 boxes at the bottom. |
| 36 | + |
| 37 | + Click Next |
| 38 | + |
| 39 | +  |
| 40 | + |
| 41 | +### 4. Select a sensible place to save your project, then hit **Create**. |
| 42 | + |
| 43 | + Take some time to look around the project that's been created with your coach. What files are there? How do you run your app? |
| 44 | + |
| 45 | +## Build a Button |
| 46 | + |
| 47 | +### 1. Open up the **Navigation Area** in Xcode, and open up the `Main.storyboard` file. |
| 48 | + |
| 49 | + > A storyboard is a visual representation of the user interface of an iOS application. It's one of the ways we can create our user interface (the visual bit of an app). |
| 50 | +
|
| 51 | +  |
| 52 | + |
| 53 | +### 2. Now, click on the **Object Library** next to the **Standard Editor**. In the search box, find a button, and drag it to the bottom of the view shown in the storyboard. |
| 54 | + |
| 55 | +  |
| 56 | + |
| 57 | +### 3. Run your app on the iPhone 7 Plus Simulator. See your button, there in all its glory at the bottom of the screen. Go ahead - press it! |
| 58 | + |
| 59 | + Celebrate appropriately. |
| 60 | + |
| 61 | +### 4. However, it would be even more awesome if our button actually did something. |
| 62 | + |
| 63 | + To do this we're going to need more than just our storyboard - we'll need a **View Controller**. |
| 64 | + |
| 65 | + > View controllers are the foundation of your app’s internal structure. Every app has at least one view controller, and most apps have several. Each view controller manages a portion of your app’s user interface as well as the interactions between that interface and the underlying data. |
| 66 | +
|
| 67 | + Think of the view as the puppet, and the view controller as the puppet master. Without something pulling the strings, the view is just a lifeless doll. And without the puppet, the puppet master is just someone doing silly voices to empty air. |
| 68 | + |
| 69 | +### 5. Open the `ViewController.swift` file in the **Assistant Editor**. If it's not automatically there when you open the **Assistant Editor**, select it from the automatic or manual routes in the file navigator. |
| 70 | + |
| 71 | +  |
| 72 | + |
| 73 | +### 6. Let's take a quick look at the code in `ViewController.swift` |
| 74 | + |
| 75 | + At the top there's some general information on the file and copyright. This is added in every new file you create in Xcode, and you can ignore it. |
| 76 | + |
| 77 | + Next we import UIKit into this file. UIKit is a framework provided by Apple to help you build iOS apps. It defines the core components - such as `UIButton` (like the one we've added to our storyboard) and `UIViewControllers`, which we're about to use. |
| 78 | + |
| 79 | + Now onto the interesting bit. This code is creating a new **View Controller** - imaginatively called `ViewController`, and declared it as a type of `UIViewController` - which means it inherits all the useful things a view controller can do. |
| 80 | + |
| 81 | + There's also 2 functions inside the `ViewController` - `viewDidLoad()` and `didReceiveMemoryWarning()`. We don't actually need these right now, so go ahead and delete them. |
| 82 | + |
| 83 | + Now our `ViewController` should look like this: |
| 84 | + |
| 85 | + |
| 86 | + ```swift |
| 87 | + import UIKit |
| 88 | + |
| 89 | + class ViewController: UIViewController { |
| 90 | + |
| 91 | + |
| 92 | + } |
| 93 | + ``` |
| 94 | + |
| 95 | +### 7. Hold down the **ctrl** button on your keyboard, then click and drag from the button in your storyboard into the `ViewController` code - on an empty line between the `{ ... }` |
| 96 | + |
| 97 | + In the pop-up that appears: |
| 98 | + * Set the **Connection Type** to be `Action` |
| 99 | + * Type the **Name** of the function as `buttonTapped` |
| 100 | + |
| 101 | + Hit **Connect** |
| 102 | + |
| 103 | +  |
| 104 | + |
| 105 | + This has created an `IBAction` - which is a function in your code that is triggered by an action in your storyboard. |
| 106 | + |
| 107 | +### 8. Let's see if our button works! |
| 108 | + |
| 109 | + First, in the body of the `buttonTapped` function let's add a print statement: |
| 110 | + |
| 111 | + ```swift |
| 112 | + @IBAction func buttonTapped(_ sender: Any) { |
| 113 | + print("Hello, world") |
| 114 | + } |
| 115 | + ``` |
| 116 | + |
| 117 | +### 9. Run your app in the iPhone 7 Plus simulator again, and tap on the button. |
| 118 | + |
| 119 | +  |
| 120 | + |
| 121 | + You should see your message appear in the console! |
| 122 | + |
| 123 | + /giphy Celebrate |
| 124 | + |
| 125 | +## Count the Clicker |
| 126 | + |
| 127 | +### 10. Time to build our clicker. |
| 128 | + |
| 129 | + As you did with the button, find a `Label` from the `Object Library` and drag it onto the storyboard, in the middle of the view. (Please note the location of the Object library has changed for Xcode 10!) |
| 130 | + |
| 131 | + (If you need to check back to Step 2 of this tutorial for a reminder of how to do this) |
| 132 | + |
| 133 | +### 11. The text of the label is a little small. Head over to **Attributes Inspector** in the **Utility Area** (right hand pane). |
| 134 | + |
| 135 | +  |
| 136 | + |
| 137 | + Increase the font size to 100pt. The original size of the label is now laughably small for our epic font size, so now drag the corners to make it big enough. |
| 138 | + |
| 139 | +  |
| 140 | + |
| 141 | +### 12. Set the text alignment of your label to be `Centered` - it's in the same place as you set the font size. |
| 142 | + |
| 143 | +### 13. Now, let's create a link between our label and the `ViewController`. |
| 144 | + |
| 145 | + We do this using an `IBOutlet`, and it's created the same way as the `IBAction` we used to link our button to the `ViewController`. |
| 146 | + |
| 147 | + Give it a try - look back at Step 7 if you need to. |
| 148 | + |
| 149 | + When the popup appears: |
| 150 | + * Set the **Connection Type** to `Outlet` |
| 151 | + * Give it the name `counterLabel` |
| 152 | + |
| 153 | + Your `ViewController` should now look like this: |
| 154 | + |
| 155 | + ```swift |
| 156 | + import UIKit |
| 157 | + |
| 158 | + class ViewController: UIViewController { |
| 159 | + |
| 160 | + @IBOutlet weak var counterLabel: UILabel! |
| 161 | + |
| 162 | + @IBAction func buttonTapped(_ sender: Any) { |
| 163 | + print("Hello, world") |
| 164 | + } |
| 165 | + |
| 166 | + } |
| 167 | + ``` |
| 168 | + |
| 169 | +### 14. Next we want to get actions on our button changing the appearance of our label. |
| 170 | + |
| 171 | + Inside of your `buttonTapped` function add the following line: |
| 172 | + |
| 173 | + `counterLabel.text = "🙌"` |
| 174 | + |
| 175 | + (Hint: To bring up the emoji keyboard, hit **ctrl** + **cmd** + **space**) |
| 176 | + |
| 177 | + Run your app, and hit that button, and (fingers crossed) see your emoji appear. |
| 178 | + |
| 179 | +## 3 ... 2 ... 1 ... 🚀 |
| 180 | + |
| 181 | +### 15. Finally, let's make the counter increment (goodbye emojis, for now). |
| 182 | + |
| 183 | + For this, our ViewController is going to need a local variable. Add this line to the top of your `ViewController`: |
| 184 | + |
| 185 | + `var counter = 0` |
| 186 | + |
| 187 | + This will keep count of the taps on our button. |
| 188 | + |
| 189 | +### 16. Now, let's hook up our button and our counter. |
| 190 | + |
| 191 | + Inside the `buttonTapped` method, increment the counter: |
| 192 | + |
| 193 | + `counter += 1` |
| 194 | + |
| 195 | +### 17. The final step is to make the label show the latest value of the counter. |
| 196 | + |
| 197 | + First, delete the placeholder text "Label" from your label in the storyboard, and replace it with `0`. |
| 198 | + |
| 199 | + Then in the `buttonTapped` method replace the emoji inside the `"..."` with: |
| 200 | + |
| 201 | + `"\(counter)"` |
| 202 | + |
| 203 | + And ... run your app! |
| 204 | + |
| 205 | +  |
| 206 | + |
| 207 | +## Bonus : Run your app on your Apple device |
| 208 | + |
| 209 | +Running your app in the simulator is cool, but you know what's even cooler? Running your app in your Apple devices! Couple years back, you need to have a developer account to run your app in a physical device, but luckily know Apple allows us to run our app using your everyday Apple account. |
| 210 | + |
| 211 | +### Pre-requisites |
| 212 | + |
| 213 | +- 📱 Apple device (the more recent device the better) + cable |
| 214 | +- An Apple account |
| 215 | + |
| 216 | +### A. Add your account in Xcode |
| 217 | + |
| 218 | +- From the menubar, go to `Xcode > Preferences...` |
| 219 | +- Click the `Accounts` tab (the second tab) |
| 220 | +- On bottom left, press the + icon |
| 221 | +- Select `Add Apple ID...` |
| 222 | +- Insert your Apple ID's credentials |
| 223 | + |
| 224 | + |
| 225 | + |
| 226 | +### B. Configure your project's signing |
| 227 | + |
| 228 | +- Go to `Navigator` area, select `Project navigator` tab, select your project name |
| 229 | +- Select your app target in the `Targets` tab |
| 230 | +- In the `Signing` area, select your account as the team name |
| 231 | + |
| 232 | + |
| 233 | + |
| 234 | +### C. Configure your device 📱 |
| 235 | + |
| 236 | +- Plug your Apple device to your development machine (this will trigger Xcode to [processes symbol files from your devices](http://stackoverflow.com/a/19706886/851515), which will take a sometime) |
| 237 | +- Instead of running on simulator, select your device instead |
| 238 | + |
| 239 | +- Press the play button to run the app! |
| 240 | +- Errm... not so fast. We need to allow codesign to access our keychain, press `Always Allow` |
| 241 | + |
| 242 | +- Almost there, you will be prompted to verify your account in your device |
| 243 | + |
| 244 | +- Now on your iOS device, go to `Settings` > `General` > `Profiles & Device Management`, tap your account under `Developer App`, tap `Trust '<your apple account email>'`, and confirm by tapping `Trust` again |
| 245 | + |
| 246 | +- Back at Xcode, press play button to build and run again |
| 247 | +- 🎉 |
| 248 | + |
| 249 | +It's great to see that Apple makes it easy for us to try our app in our actual hands. Happy testing! |
| 250 | + |
| 251 | +------ |
| 252 | + |
| 253 | +## Extension Tasks |
| 254 | + |
| 255 | +If you've finished all of the above why not think about some of the following ideas: |
| 256 | + |
| 257 | +* make a new button that decreases the button. Can you turn it into a two player game? |
| 258 | + |
| 259 | +* make the background change after a set amount of clicks? How about creating an array of colours to change every set interval e.g. after 5 taps. |
| 260 | + |
| 261 | +* change your button into a picture button, you could make a cookie clicker? Make the picture change after a set amount of clicks. |
| 262 | + |
| 263 | +* check out Auto Layout with your coach. How would you go about fitting this onto an iPad versus a smallest iPhone? |
0 commit comments