0
1
00:00:00,620 --> 00:00:01,180
All right, guys.
1

2
00:00:01,180 --> 00:00:08,170
So now that we've built our app, we're finally ready to actually run the app. And running our app is the
2

3
00:00:08,170 --> 00:00:12,950
process where we turn our code into the actual app.
3

4
00:00:13,030 --> 00:00:16,210
And this is done using Xcode, of course.
4

5
00:00:16,210 --> 00:00:18,450
So there's two ways of running our app,
5

6
00:00:18,460 --> 00:00:26,920
either we could run it onto a physical iPhone or iPad device or we could use the Xcode Simulator which
6

7
00:00:26,920 --> 00:00:31,040
creates a simulated iOS device on our Mac.
7

8
00:00:31,090 --> 00:00:39,180
Let's first look at how to run on the simulator because it's really, really easy. All you have to do is
8

9
00:00:39,240 --> 00:00:47,430
to go up into this top left corner, click on the app name, and then in the dropdown list, you can select
9

10
00:00:47,520 --> 00:00:49,380
the simulator that you want to use,
10

11
00:00:49,380 --> 00:00:53,000
so the simulator device that you want to run your app on.
11

12
00:00:53,040 --> 00:00:59,880
Now, in my case, I'm going to choose the iPhone XR,
and then all you have to do is just hit the play button.
12

13
00:00:59,910 --> 00:01:07,050
So just like iTunes, you can run by hitting the play button and hit the stop button to stop running the
13

14
00:01:07,050 --> 00:01:12,330
app. And you can watch as the progress happens up here.
14

15
00:01:12,330 --> 00:01:21,960
And once it's done, it should automatically open up the simulated device by itself.
15

16
00:01:22,020 --> 00:01:27,770
Now, the first time you run your app it might take a while for the simulator to load up.
16

17
00:01:27,870 --> 00:01:30,460
It's just like called starting your iPhone.
17

18
00:01:30,570 --> 00:01:36,840
But after the first time this happens, then using the same simulated device should take a couple of seconds
18

19
00:01:37,080 --> 00:01:43,430
for it to load up your app. So I fast forward the process a little bit, but it should take anywhere between
19

20
00:01:43,430 --> 00:01:49,430
one to five minutes for it to load up for the first time. And then once, it's done you should see a blank
20

21
00:01:49,430 --> 00:01:56,510
screen for a couple of seconds or more, and then it should display your actual app. And you can move the
21

22
00:01:56,510 --> 00:01:59,770
simulator around just by dragging on its name.
22

23
00:01:59,870 --> 00:02:05,600
And then if you hover around the edge, you can actually resize it to the size that you prefer. And you
23

24
00:02:05,600 --> 00:02:13,040
can even go to the Hardware menu here and click on various things, such as the Home button or to rotate
24

25
00:02:13,100 --> 00:02:20,570
the app left and right. Now at the moment because we've designed our app on a iPhone 11 or an iPhone XR
25

26
00:02:20,630 --> 00:02:28,340
canvas, the diamond and the text is only going to look centered on devices with the same aspect
26

27
00:02:28,340 --> 00:02:28,790
ratio,
27

28
00:02:28,820 --> 00:02:35,540
so the XR, the 11, or the X. Now, in coming modules, we're going to learn how to make this right and
28

29
00:02:35,540 --> 00:02:37,730
set rules for our display.
29

30
00:02:37,820 --> 00:02:44,660
But for now, if you have a physical device that has a different aspect ratio, so you had one of the plus
30

31
00:02:44,660 --> 00:02:48,640
sizes, then you can actually just simply change the canvas
31

32
00:02:48,680 --> 00:02:52,660
right here in the size Inspector, update the design.
32

33
00:02:52,730 --> 00:02:56,720
And then when you run it, it should look exactly as you see in the canvas.
33

34
00:02:57,860 --> 00:03:04,010
So now that we've seen how easy it is to run the app on the Xcode Simulator, the next step is to run
34

35
00:03:04,010 --> 00:03:06,410
it on a physical iPhone.
35

36
00:03:06,410 --> 00:03:13,040
Now if you don't have a physical iOS device, an iPhone, or an iPad, then feel free to skip the rest of
36

37
00:03:13,040 --> 00:03:15,970
this lesson and continue on to the next module.
37

38
00:03:16,160 --> 00:03:22,820
But if you do have a physical device and you want to be able to see your app running on it, then continue
38

39
00:03:22,820 --> 00:03:29,510
ahead with me. Now running on a physical device because it has all of your sensitive pieces of data and
39

40
00:03:29,900 --> 00:03:31,880
a lot of personal information,
40

41
00:03:32,030 --> 00:03:35,450
it's a little bit harder than running it on the simulator.
41

42
00:03:35,450 --> 00:03:40,220
So there's a six step process that we're going to go through and I'm going to run through it with you
42

43
00:03:40,310 --> 00:03:41,570
step by step.
43

44
00:03:41,570 --> 00:03:47,870
So the first step is to check that your Xcode and iOs versions match.
44

45
00:03:47,900 --> 00:03:50,050
Now what do I mean by matching?
45

46
00:03:50,060 --> 00:03:56,240
Well, if you head over to Xcode and go to About Xcode, you should see the version of your Xcode.
46

47
00:03:56,270 --> 00:04:03,080
And currently, I'm running 11.0.  So for Xcode version 11.0, you will know about
47

48
00:04:03,180 --> 00:04:06,860
iOS versions 13.0 and below.
48

49
00:04:07,010 --> 00:04:13,850
If you have a physical device that's running iOS 13.0, you're perfectly aligned with
49

50
00:04:13,850 --> 00:04:15,530
the Xcode version.
50

51
00:04:15,530 --> 00:04:18,610
Now how can you find this information out?
51

52
00:04:18,620 --> 00:04:25,040
Well, it's easy as going to the Settings and then General and About, and somewhere in this list, you should
52

53
00:04:25,040 --> 00:04:26,740
see your software version.
53

54
00:04:26,780 --> 00:04:31,730
Now I know I'm showing this to you on the simulator, but if you do the same on your iPhone, on your iPad,
54

55
00:04:32,000 --> 00:04:34,310
it should be exactly the same process.
55

56
00:04:34,340 --> 00:04:42,080
So the easiest way is to update your Xcode and update your iPhone or iPad both to the latest versions,
56

57
00:04:42,650 --> 00:04:50,900
and then check that the number after the decimal place actually matches. And notice how Xcode 11 is
57

58
00:04:50,900 --> 00:04:54,040
the matching version for iOS 13.
58

59
00:04:54,080 --> 00:04:58,980
So if you had Xcode 10, then it won't know about iOS 13.
59

60
00:04:59,150 --> 00:05:00,940
So you'll have to update Xcode.
60

61
00:05:01,190 --> 00:05:06,470
But the easiest way of making sure that everything runs perfectly smoothly is checking that you have
61

62
00:05:06,530 --> 00:05:14,750
Xcode 11 and you have iOS 13, and that the number after the decimal place matches between your
62

63
00:05:14,750 --> 00:05:18,800
Xcode and your iOS. So that's step one.
63

64
00:05:18,830 --> 00:05:23,010
Step two is you have to add a Apple developer account.
64

65
00:05:23,060 --> 00:05:23,530
Don't worry.
65

66
00:05:23,530 --> 00:05:24,880
You don't have to pay for this.
66

67
00:05:24,890 --> 00:05:33,130
You can simply just use your free Apple ID that you use to download apps on the App Store. Now in order
67

68
00:05:33,130 --> 00:05:33,870
to do this,
68

69
00:05:33,880 --> 00:05:41,440
you can go into Xcode and click on preferences. And then here, you should be able to add a Apple ID
69

70
00:05:41,470 --> 00:05:44,880
by clicking on the Add button, select Apple ID,
70

71
00:05:45,070 --> 00:05:51,370
and then, here, enter your Apple ID which is usually an e-mail and then your password.
71

72
00:05:51,370 --> 00:05:57,190
And once you've successfully logged in, you should be able to see your app ID show up right here inside
72

73
00:05:57,190 --> 00:05:58,970
the accounts tab.
73

74
00:05:58,990 --> 00:06:04,840
So now that we've added our Apple developer account, it's time to sign our app.
74

75
00:06:04,840 --> 00:06:06,230
So back inside Xcode.
75

76
00:06:06,250 --> 00:06:08,100
Make sure that you've got your project
76

77
00:06:08,130 --> 00:06:10,500
I Am Rich selected and your I Am Rich
77

78
00:06:10,510 --> 00:06:16,720
Target selected, and then head over to Signing & Capabilities tab and make sure that the Automatically
78

79
00:06:16,720 --> 00:06:19,150
managed signing checkbox is checked.
79

80
00:06:19,180 --> 00:06:24,270
Now click on the Team dropdown list and then select the account that you've added just now
80

81
00:06:24,310 --> 00:06:30,070
or if you have a developer account like I do, then you'll see your team's name or your company name in
81

82
00:06:30,070 --> 00:06:30,800
there.
82

83
00:06:30,820 --> 00:06:34,030
Now if you don't see anything in here, you only see none,
83

84
00:06:34,060 --> 00:06:39,670
then make sure that you've actually added your account successfully and that you see it underneath here
84

85
00:06:39,820 --> 00:06:42,010
as an Apple ID.
85

86
00:06:42,410 --> 00:06:46,600
So once you've selected your team, all the errors on this page should go away.
86

87
00:06:46,730 --> 00:06:52,370
But if it doesn't and you see an error that looks like this, something about failed to create provisioning
87

88
00:06:52,370 --> 00:06:58,760
profile, then it might be because you haven't got your device connected using a USB cable.
88

89
00:06:59,000 --> 00:07:05,240
So just continue on and watch the next step of the video and then you'll be able to click on this try again
89

90
00:07:05,240 --> 00:07:06,080
button here,
90

91
00:07:06,080 --> 00:07:07,650
and the errors should go away.
91

92
00:07:07,970 --> 00:07:14,390
Now just remember that we've also created that Sideloading Troubleshooting PDF Guide which you can
92

93
00:07:14,390 --> 00:07:21,200
download from the previous lesson, so that if you encounter any issues with sideloading your app onto
93

94
00:07:21,200 --> 00:07:26,420
your physical device, then you'll be able to refer to that and resolve any problems there.
94

95
00:07:26,420 --> 00:07:30,740
And we should now be ready to actually connect our device.
95

96
00:07:30,860 --> 00:07:33,370
So we'll do steps four and five together.
96

97
00:07:33,410 --> 00:07:40,040
Grab your USB cable and connect your physical device, your iPhone or your iPad to your Mac.
97

98
00:07:40,070 --> 00:07:46,700
Now at this point, you might see a pop up show up on your phone which asked you whether if you trust
98

99
00:07:46,730 --> 00:07:54,080
this computer. So go ahead and tap on the Trust button and it might also require you to type in the phone
99

100
00:07:54,080 --> 00:08:01,760
device passkey and follow the on-screen instructions to complete that process. Now that you've successfully
100

101
00:08:01,760 --> 00:08:04,880
connected your device and trusted your own computer,
101

102
00:08:04,880 --> 00:08:06,810
it's time to run your app.
102

103
00:08:06,890 --> 00:08:15,110
So go ahead and click on the top bar here and select your physical phone as the device that you want
103

104
00:08:15,110 --> 00:08:16,610
to run your app onto.
104

105
00:08:17,030 --> 00:08:24,650
Now you might get a warning here saying something like device iOS version lower than deployment target,
105

106
00:08:25,010 --> 00:08:26,410
something along those lines,
106

107
00:08:26,480 --> 00:08:33,410
and that's just because you need to update your iPhone or your iPad to the latest version of iOS that's
107

108
00:08:33,410 --> 00:08:35,950
compatible with Xcode which we talked about earlier on.
108

109
00:08:36,500 --> 00:08:42,190
But once you've got your device selected, then go ahead and hit the play button to run your app.
109

110
00:08:42,470 --> 00:08:49,280
And at this point, you might see a message like this, "iPhone is busy preparing debugger support."
110

111
00:08:49,280 --> 00:08:52,290
You'll probably see this the very first time you connect your phone
111

112
00:08:52,340 --> 00:08:58,070
and after every major iOS update. What's happening is that your phone has to tell your computer all
112

113
00:08:58,070 --> 00:08:58,900
about itself,
113

114
00:08:58,910 --> 00:09:03,080
like what kind of hardware it's running and its crash logs amongst other things.
114

115
00:09:03,140 --> 00:09:07,490
I've seen this take anywhere between 2 and 15 minutes, so you might just have to be a little bit patient.
115

116
00:09:08,450 --> 00:09:09,230
At some point,
116

117
00:09:09,270 --> 00:09:11,590
it'll all be done and the window will disappear.
117

118
00:09:11,600 --> 00:09:14,950
You should then see the app open up automatically on your phone
118

119
00:09:14,960 --> 00:09:20,900
and it's really important that you let Xcode always automatically open the app even if you see the
119

120
00:09:20,900 --> 00:09:22,840
icon as I do right here.
120

121
00:09:23,240 --> 00:09:28,940
If you tap on it, it usually means that you're actually opening a slightly older version.
121

122
00:09:28,970 --> 00:09:33,320
It's always best to wait for Xcode to do its thing.
122

123
00:09:33,330 --> 00:09:38,810
Now if when you run your app and the end result looks a little bit crooked like this, then it might be
123

124
00:09:38,810 --> 00:09:43,670
because you've got a different screen size compared to the one on your canvas.
124

125
00:09:44,000 --> 00:09:51,740
So here, my design is created on an iPhone 11 canvas, but I'm running it on an iPhone SE. So, say, if you
125

126
00:09:51,740 --> 00:09:57,770
had a physical iPhone SE or an iPhone 4 or something that basically has a different aspect ratio to
126

127
00:09:57,770 --> 00:10:03,110
your canvas, then the end result of your design will look a little bit weird like this.
127

128
00:10:03,110 --> 00:10:08,390
So in later lessons, we're going to be learning about something called Auto layout and setting constraints
128

129
00:10:08,690 --> 00:10:13,250
where we're going to fix this so that our designs always look the way we want
129

130
00:10:13,310 --> 00:10:15,860
no matter which screen size it's being run on.
130

131
00:10:15,950 --> 00:10:21,410
But meanwhile, if you want to fix this and you wanted to look good on your physical device, then you can
131

132
00:10:21,410 --> 00:10:27,170
simply go and change the device to match the device that you actually own.
132

133
00:10:27,170 --> 00:10:31,300
So for example, if you wanted to run this on an iPhone SE, then we could change that
133

134
00:10:31,370 --> 00:10:38,030
and then we can update the locations of our label and our image view so that when we run it on our device
134

135
00:10:38,030 --> 00:10:42,380
again, it ends up looking the same as the canvas like this.
135

136
00:10:42,380 --> 00:10:48,980
So now that you've set up your device and Xcode for running your apps onto your physical device, the
136

137
00:10:48,980 --> 00:10:54,320
next time you need to run it, you don't have to repeat this process. All you have to do is to plug it in
137

138
00:10:54,650 --> 00:10:56,840
select it, and then hit run.
138

139
00:10:56,840 --> 00:10:59,170
And it's much much easier from now on.
139

140
00:10:59,990 --> 00:11:04,130
Now so far I've shown you how to run your app from your computer
140

141
00:11:04,130 --> 00:11:08,860
if you have a wired connection, but you can also run it wirelessly.
141

142
00:11:08,940 --> 00:11:14,300
So I'm going to quickly show you how to do this. To start off, you need your phone to be connected to
142

143
00:11:14,300 --> 00:11:16,010
your Mac with a wire.
143

144
00:11:16,010 --> 00:11:22,170
We first have to use a USB cable and get the wireless side loading setup first.
144

145
00:11:22,430 --> 00:11:29,690
Once you've got it plugged in and you can see it as a device right here, then go ahead and go to Window
145

146
00:11:30,050 --> 00:11:37,310
and Devices and Simulators and you should see your connected device right here.
146

147
00:11:37,310 --> 00:11:37,840
If you don't,
147

148
00:11:37,850 --> 00:11:42,080
make sure that you repeat the previous process that we've gone through in order to make sure that it
148

149
00:11:42,080 --> 00:11:50,670
shows up here. And then we're gonna go ahead and click the Connect via network checkbox.
149

150
00:11:50,690 --> 00:11:57,380
Now it's really important that for this to work, your phone and your Mac has to be connected to the same
150

151
00:11:57,710 --> 00:11:59,180
Wi-Fi connection.
151

152
00:11:59,210 --> 00:12:05,180
So not only does your Wi-Fi have to be on both on your Mac and your phone, but you have to be using
152

153
00:12:05,180 --> 00:12:13,030
the same Wi-Fi. But now, once that's done, you can unplug your phone and you'll see that you can still
153

154
00:12:13,030 --> 00:12:15,570
find your phone up here in the devices.
154

155
00:12:15,610 --> 00:12:22,660
And now if you hit run, you will be able to run it wirelessly across the Internet and show up on your
155

156
00:12:22,660 --> 00:12:23,080
phone.
156

157
00:12:24,010 --> 00:12:29,920
Now I'm not sure what your experience will be, but for me, I find that the wireless connection tends to
157

158
00:12:29,920 --> 00:12:31,600
be a little bit unreliable.
158

159
00:12:31,600 --> 00:12:37,360
So when I've got a cable with me, I'll always run my phone via the cable. And that way, I have a much smoother
159

160
00:12:37,360 --> 00:12:39,390
experience when I'm testing my apps.
160

161
00:12:39,430 --> 00:12:40,540
So that's it.
161

162
00:12:40,570 --> 00:12:47,300
That's how you can run your app on a simulator, on a physical device, and even wirelessly.
162

163
00:12:47,350 --> 00:12:48,820
I hope you had fun doing that.
163

164
00:12:48,820 --> 00:12:53,320
And if you had any issues, be sure to rewatch the video because there were quite a few hoops that you
164

165
00:12:53,320 --> 00:12:58,480
need to jump through before Apple is going to let you through the gates and allow you to get side loading
165

166
00:12:58,480 --> 00:12:59,740
set up properly.
166

167
00:12:59,800 --> 00:13:03,820
Now, once you're done, head over to the next lesson and I've got a challenge for you.