0
1
00:00:00,240 --> 00:00:05,340
As always, first things first, we've got to clone and set up the Skeleton Project.
1

2
00:00:05,340 --> 00:00:10,590
The skeleton project you can find at github.com/appbrewery/Xylophone-IOS13
2

3
00:00:10,680 --> 00:00:16,320
and you'll also find this link in the course resources page as well.
3

4
00:00:16,320 --> 00:00:21,960
You can just click on it there or just type in the URL. And once you're here, you should really be pretty
4

5
00:00:21,960 --> 00:00:23,030
familiar to you.
5

6
00:00:23,040 --> 00:00:32,100
We have to copy the GitHub link, and then we go over to our Xccode and either clicking on Clone an existing
6

7
00:00:32,100 --> 00:00:40,830
project or going to Source Control and clone. We paste in our URL and click Clone, and then it's gonna
7

8
00:00:40,860 --> 00:00:44,910
ask us where do we want to save our project.
8

9
00:00:45,330 --> 00:00:52,110
And again, in my case, I'm putting it inside my development folder on my desktop, and then I'm just going
9

10
00:00:52,110 --> 00:01:02,010
to change the name maybe to Xylophone, and click Clone.
10

11
00:01:02,310 --> 00:01:04,660
All right, so here's our cloned project.
11

12
00:01:05,200 --> 00:01:11,440
And the first thing I want you to do is to take a look at the Main.storyboard because we've already
12

13
00:01:11,440 --> 00:01:17,720
created the user interface for you.
13

14
00:01:17,750 --> 00:01:24,320
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

15
00:01:24,320 --> 00:01:32,570
they work. So you can see that we've got seven buttons of decreasing size, so their width keeps on going
15

16
00:01:32,570 --> 00:01:39,770
down. And we've created that by setting the constraint to be slightly smaller each time.
16

17
00:01:40,760 --> 00:01:50,090
So this one has a constraint of 40, whereas this one only has a constraint of 15. And this is how we're
17

18
00:01:50,090 --> 00:01:56,870
able to create this cascading effect, which if you look at it in the landscape, you can see it looks a
18

19
00:01:56,870 --> 00:01:59,590
bit like a real xylophone.
19

20
00:01:59,860 --> 00:02:03,450
Now, each of these buttons don't do anything yet.
20

21
00:02:03,490 --> 00:02:06,940
So we have to link them up if we want them to do something.
21

22
00:02:07,030 --> 00:02:14,470
So let's go ahead and open up the assistant view so that we can see our design and our code side by
22

23
00:02:14,470 --> 00:02:16,090
side.
23

24
00:02:16,090 --> 00:02:23,800
And now we're going to link our red C button with this one to the ViewController.swift file
24

25
00:02:23,920 --> 00:02:25,470
which you can see up here,
25

26
00:02:25,480 --> 00:02:33,340
ViewControl.swift. And then we're simply going to hold down the control key, click and drag somewhere
26

27
00:02:33,340 --> 00:02:43,150
around here, and we're going to create a Action, and this Action we're going to call keyPressed using
27

28
00:02:43,150 --> 00:02:44,170
camel casing.
28

29
00:02:44,170 --> 00:02:49,730
So the first letter is lowercase and every subsequent word has the first letter capitalized.
29

30
00:02:49,780 --> 00:02:54,040
And finally, we're gonna change the type from any to be more specific.
30

31
00:02:54,040 --> 00:02:59,320
We're going to say that this is actually a UIButton that we're linking up, and then we're going to click
31

32
00:02:59,320 --> 00:03:00,100
Connect.
32

33
00:03:00,100 --> 00:03:07,900
So now whenever we tap within the boundary of this button, it will trigger this IBAction and it will
33

34
00:03:07,900 --> 00:03:13,180
trigger any code that goes in between this block.
34

35
00:03:13,180 --> 00:03:14,530
So here's a challenge.
35

36
00:03:14,530 --> 00:03:17,960
Go ahead and test this link by printing the message
36

37
00:03:18,100 --> 00:03:22,530
"I got pressed" into the debug console down here
37

38
00:03:22,570 --> 00:03:26,180
whenever the red C button is pressed.
38

39
00:03:26,320 --> 00:03:29,350
And remember, you'll have to run the app to test this.
39

40
00:03:32,210 --> 00:03:32,490
All right,
40

41
00:03:32,490 --> 00:03:34,080
so that's pretty easy.
41

42
00:03:34,080 --> 00:03:41,100
We have to use the print statement, and then inside I'm going to put in the string "I got pressed." And
42

43
00:03:41,160 --> 00:03:53,040
now if we run our app because our IBAction key pressed is linked to our red C button. When I press on the
43

44
00:03:53,310 --> 00:03:58,200
top button, you can see that the words "I got pressed" will get printed down here.
44

45
00:03:58,680 --> 00:04:04,770
But when I press on any of the other buttons, then nothing happens, because we've only linked up the first
45

46
00:04:04,770 --> 00:04:07,890
one which is exactly the way we want it to be.
46

47
00:04:07,950 --> 00:04:08,820
So that's it.
47

48
00:04:08,820 --> 00:04:14,160
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

49
00:04:14,160 --> 00:04:21,150
to proceed to the next lesson where we figure out how to actually play the sound that we've included
49

50
00:04:21,150 --> 00:04:23,300
in here in the Skeleton Project.
50

51
00:04:23,340 --> 00:04:29,850
You can see that there's a sound file for each button and you can play it or preview it in Xcode if
51

52
00:04:29,850 --> 00:04:33,800
you want to just by clicking down here when you've got it selected.
52

53
00:04:33,930 --> 00:04:39,710
But we, essentially, want the sound to play whenever we press that red button instead of printing
53

54
00:04:39,720 --> 00:04:43,830
"I got pressed." And we're going to explore how to do that in the next lesson.
54

55
00:04:43,950 --> 00:04:46,160
So for all of that and more, I'll see you there.