As always, first things first, we've got to clone and set up the Skeleton Project. 1
The skeleton project you can find at github.com/appbrewery/Xylophone-IOS13 2
and you'll also find this link in the course resources page as well. 3
You can just click on it there or just type in the URL. And once you're here, you should really be pretty 4
familiar to you. 5
We have to copy the GitHub link, and then we go over to our Xccode and either clicking on Clone an existing 6
project or going to Source Control and clone. We paste in our URL and click Clone, and then it's gonna 7
ask us where do we want to save our project. 8
And again, in my case, I'm putting it inside my development folder on my desktop, and then I'm just going 9
to change the name maybe to Xylophone, and click Clone. 10
All right, so here's our cloned project. 11
And the first thing I want you to do is to take a look at the Main.storyboard because we've already 12
created the user interface for you. 13
Now, it might be worth taking a look at some of the constraints that we've set up and in order to see how 14
they work. So you can see that we've got seven buttons of decreasing size, so their width keeps on going 15
down. And we've created that by setting the constraint to be slightly smaller each time. 16
So this one has a constraint of 40, whereas this one only has a constraint of 15. And this is how we're 17
able to create this cascading effect, which if you look at it in the landscape, you can see it looks a 18
bit like a real xylophone. 19
Now, each of these buttons don't do anything yet. 20
So we have to link them up if we want them to do something. 21
So let's go ahead and open up the assistant view so that we can see our design and our code side by 22
side. 23
And now we're going to link our red C button with this one to the ViewController.swift file 24
which you can see up here, 25
ViewControl.swift. And then we're simply going to hold down the control key, click and drag somewhere 26
around here, and we're going to create a Action, and this Action we're going to call keyPressed using 27
camel casing. 28
So the first letter is lowercase and every subsequent word has the first letter capitalized. 29
And finally, we're gonna change the type from any to be more specific. 30
We're going to say that this is actually a UIButton that we're linking up, and then we're going to click 31
Connect. 32
So now whenever we tap within the boundary of this button, it will trigger this IBAction and it will 33
trigger any code that goes in between this block. 34
So here's a challenge. 35
Go ahead and test this link by printing the message 36
"I got pressed" into the debug console down here 37
whenever the red C button is pressed. 38
And remember, you'll have to run the app to test this. 39
All right, 40
so that's pretty easy. 41
We have to use the print statement, and then inside I'm going to put in the string "I got pressed." And 42
now if we run our app because our IBAction key pressed is linked to our red C button. When I press on the 43
top button, you can see that the words "I got pressed" will get printed down here. 44
But when I press on any of the other buttons, then nothing happens, because we've only linked up the first 45
one which is exactly the way we want it to be. 46
So that's it. 47
We've set up our scales and project. We've taken a look at how the design is built and we're now ready 48
to proceed to the next lesson where we figure out how to actually play the sound that we've included 49
in here in the Skeleton Project. 50
You can see that there's a sound file for each button and you can play it or preview it in Xcode if 51
you want to just by clicking down here when you've got it selected. 52
But we, essentially, want the sound to play whenever we press that red button instead of printing 53
"I got pressed." And we're going to explore how to do that in the next lesson. 54
So for all of that and more, I'll see you there.