1 00:00:05,560 --> 00:00:06,890 What's a bigger one. 2 00:00:06,900 --> 00:00:09,090 Mark syster with slopes dot com. 3 00:00:09,100 --> 00:00:15,400 And in this video we are going to learn how to download x code so we can actually start building apps. 4 00:00:15,400 --> 00:00:16,570 This is the very first step. 5 00:00:16,570 --> 00:00:19,000 And you can't really build apps unless you have the tools to do that. 6 00:00:19,000 --> 00:00:24,380 So I'm going to go ahead and open up Safari Now you can do this with Google Chrome as well. 7 00:00:24,470 --> 00:00:25,790 We're going to go with Safari. 8 00:00:25,840 --> 00:00:30,880 Keep it the Apple way and one thing I will let you know is some of the apple tools and Web sites that 9 00:00:30,880 --> 00:00:36,700 they have don't work unless you use Safari so whenever working with Apple dotcom you want to use Safari 10 00:00:36,820 --> 00:00:40,660 and you've just done is gone to developer dot apple dot com. 11 00:00:41,020 --> 00:00:45,240 If you don't have an account as a registered Apple developer you need to sign up first. 12 00:00:45,250 --> 00:00:50,560 It's absolutely free and you can do that by clicking account and then you can register your account 13 00:00:50,560 --> 00:00:56,440 like so go through those steps after you do have an account already from developer dot apple dot com. 14 00:00:56,440 --> 00:01:02,340 All you need to do is click develop and you're going to see a few things here. 15 00:01:02,380 --> 00:01:07,210 Ex-coach with documentation's videos downloads and they've done a really nice job in making development 16 00:01:07,210 --> 00:01:09,660 really easy this did not used to be like this. 17 00:01:09,670 --> 00:01:10,770 It's much better now. 18 00:01:10,890 --> 00:01:11,160 OK. 19 00:01:11,170 --> 00:01:16,600 So I highly encourage you to read the documentation read these links as a brand new developer you want 20 00:01:16,600 --> 00:01:20,830 to read everything you may be used to speed reading and going through things really fast. 21 00:01:20,830 --> 00:01:21,820 That's how I was. 22 00:01:21,820 --> 00:01:23,000 You can't do that anymore. 23 00:01:23,050 --> 00:01:24,630 Every single word matters. 24 00:01:24,640 --> 00:01:26,640 And you need to read everything. 25 00:01:26,920 --> 00:01:28,990 But in this case we're going to download something. 26 00:01:28,990 --> 00:01:32,530 So let's go ahead and click downloads. 27 00:01:32,830 --> 00:01:36,120 And after you've signed in you can see a series of downloads here. 28 00:01:36,130 --> 00:01:37,950 And let's just talk about a few things. 29 00:01:37,960 --> 00:01:40,600 First things first you're going to need as code 9 beta. 30 00:01:40,720 --> 00:01:45,380 OK this is going to require the update you update to the latest Mac OS. 31 00:01:45,460 --> 00:01:51,900 OK no it don't update to the beta which is currently high sierra beta operating systems are very unstable. 32 00:01:52,030 --> 00:01:56,710 OK but you are going to need the latest Mac OS in order to download x code. 33 00:01:56,710 --> 00:01:57,500 Beta 9. 34 00:01:57,520 --> 00:01:59,730 Now why didn't we go to the App Store. 35 00:01:59,740 --> 00:02:06,070 Well we could have we could have on our Mac did command space and then type in App Store and then we 36 00:02:06,070 --> 00:02:11,260 can search for X code and you'll see there's X code right here. 37 00:02:11,710 --> 00:02:18,640 Well the difference is the X code that's available on the App Store is always the latest release version. 38 00:02:18,750 --> 00:02:20,740 Ok not the beta version. 39 00:02:20,740 --> 00:02:25,570 We're going to use the beta version because it gives us access to swift for iOS 11. 40 00:02:25,630 --> 00:02:31,470 Now when I was 11 and so before are officially released you'll want to download it from here instead. 41 00:02:31,630 --> 00:02:35,960 OK so if you're watching this video and X code nine is available. 42 00:02:36,040 --> 00:02:36,660 OK. 43 00:02:36,790 --> 00:02:37,790 You're going to get it right here. 44 00:02:37,810 --> 00:02:39,190 Pos 11 is out. 45 00:02:39,190 --> 00:02:41,060 Come to the app store and download it here here. 46 00:02:41,070 --> 00:02:46,060 Otherwise go to developer to Apple dotcom in order to download the beta. 47 00:02:46,060 --> 00:02:50,320 One more thing I want to talk about when it comes to beta software there can be bugs and there can be 48 00:02:50,320 --> 00:02:51,760 problems but they're pretty close. 49 00:02:51,760 --> 00:02:52,790 The final result. 50 00:02:52,990 --> 00:02:56,660 So you maybe you're asking well is it bad that I'm learning these new things in release. 51 00:02:56,670 --> 00:02:59,010 Well no you're kind of ahead of the game here. 52 00:02:59,230 --> 00:03:03,780 And I'll give you a chance to do some debugging and problem solving if you do run into code issues. 53 00:03:03,790 --> 00:03:07,910 And of course we'll cover some of those problems and issues as updates and changes are made. 54 00:03:07,910 --> 00:03:09,330 So nothing to worry about here. 55 00:03:09,450 --> 00:03:13,900 What you're going to want to go ahead and download x code 9 beta and again I highly recommend that you 56 00:03:13,900 --> 00:03:16,190 do not install the latest Mac OS. 57 00:03:16,210 --> 00:03:22,510 I Heisey error or any beta version of Mac OS because it could destroy your computer. 58 00:03:22,510 --> 00:03:29,060 It's it's very hard to install sometimes as well as the iOS 11 beta or any beta suffer for iOS. 59 00:03:29,090 --> 00:03:34,540 OK they're very well known to break phones and cause lots of problems and you can't install certain 60 00:03:34,540 --> 00:03:38,560 types of outs and a lot of things will break so if you have a test device and you really want to get 61 00:03:38,560 --> 00:03:40,330 the cutting edge beta version of Iowa. 62 00:03:40,390 --> 00:03:43,260 You can do that but don't do it on your main phone. 63 00:03:43,270 --> 00:03:44,440 Trust me now. 64 00:03:44,470 --> 00:03:49,690 OK trust me now I promise you you won't regret not installing this and after you install it you'll come 65 00:03:49,690 --> 00:03:52,020 back to me and you be like you are right Mark. 66 00:03:52,050 --> 00:03:54,190 You know but those you don't really mean squat. 67 00:03:54,190 --> 00:03:59,950 Install it and then come back to me in about a week and tell me how miserable your life is so go ahead 68 00:03:59,950 --> 00:04:01,990 and click download on X cotinine beta 69 00:04:06,430 --> 00:04:07,750 and that is downloading now. 70 00:04:09,510 --> 00:04:14,810 OK now that it's downloaded wherever you saved ours is saved and downloads. 71 00:04:14,810 --> 00:04:21,050 OK all we're going to do here all right is we're going to double click the X cotinine beta file. 72 00:04:21,360 --> 00:04:23,190 It's going to verify it's going to take a while. 73 00:04:23,230 --> 00:04:26,470 And if your computer's a little bit slower it'll take a great while. 74 00:04:27,820 --> 00:04:28,890 What's expanding. 75 00:04:28,890 --> 00:04:32,400 Again it's still part of the process and may take a while. 76 00:04:33,570 --> 00:04:38,100 OK an X code Beta has finished downloading as you can see it here. 77 00:04:38,120 --> 00:04:43,230 My downloads folder and all you have to do is take this icon this is called beta and make sure it says 78 00:04:43,230 --> 00:04:44,030 beta on it. 79 00:04:44,130 --> 00:04:49,660 If it doesn't say Beta you've got the wrong thing and has a little red icon badge at the top left there 80 00:04:50,070 --> 00:04:53,460 and all you need to do is take this and drag it into applications folder. 81 00:04:53,460 --> 00:04:58,380 Now I've already done that and so we go into my applications somewhere down here. 82 00:04:58,410 --> 00:05:01,660 We've gotten X code beta and you can see the difference. 83 00:05:01,660 --> 00:05:03,130 There's X code and X code beta. 84 00:05:03,150 --> 00:05:05,930 They can run side by side without any problems. 85 00:05:05,940 --> 00:05:07,400 One more thing I do want to talk to you about. 86 00:05:07,410 --> 00:05:12,550 If you do have an existing X code project let's say built with some version of X code 8. 87 00:05:12,660 --> 00:05:17,970 You may open it with Esco Bayda and it could upgrade your files on your swift the newest version and 88 00:05:17,970 --> 00:05:22,530 you may or may not want to do that and it's hard to reverse that so just be very careful opening existing 89 00:05:22,530 --> 00:05:24,200 projects in the new Escovedo. 90 00:05:24,210 --> 00:05:29,850 If you don't want to migrate them and upgrade them and one more really important thing you will not 91 00:05:29,850 --> 00:05:35,540 be able to submit apps to the App Store with iOS 11 until it's officially released so if you were thinking 92 00:05:35,770 --> 00:05:40,660 oh I'm going to make this new iOS 11 app and submit it tomorrow you've got to wait. 93 00:05:40,680 --> 00:05:45,120 We got the early access here so this is really cool but you got to wait till it comes out and then Apple 94 00:05:45,120 --> 00:05:49,320 will accept those apps and so if you do have existing apps you may want to start upgrading them to iOS 95 00:05:49,320 --> 00:05:53,420 11 so they're ready on day 1 when Iowa 11 comes out. 96 00:05:53,430 --> 00:05:54,970 But just a few things there. 97 00:05:55,120 --> 00:06:00,060 Ex-coach is officially installed and to test it out all you have to do is double click the icon that 98 00:06:00,060 --> 00:06:01,710 is now in your applications folder. 99 00:06:05,720 --> 00:06:08,320 In there you have it is loaded and you are good to go. 100 00:06:08,410 --> 00:06:12,620 So we've done a few things in this video we've gone to developer to abduct. 101 00:06:12,670 --> 00:06:17,530 We talked about registering as an apple developer we also talked about what the difference between the 102 00:06:17,540 --> 00:06:22,340 ex-coach on the App Store is versus versus what's on the developer appled outcome. 103 00:06:22,360 --> 00:06:28,660 We've also talked about how it's absolutely ridiculous for you to install iOS 11 or any Iowas beta on 104 00:06:28,660 --> 00:06:35,860 your phone because it's probably going to break and then you're not going to use any of your apps and 105 00:06:35,860 --> 00:06:38,470 things like that trust me trust me trust me. 106 00:06:38,470 --> 00:06:42,600 Same with Mac OS High Sierra or any type of beta Mac OS. 107 00:06:42,640 --> 00:06:47,770 For an example I tried installing it on one of our dev computers the other day and it took six times 108 00:06:47,770 --> 00:06:48,660 to try and install it. 109 00:06:48,660 --> 00:06:53,040 It failed after all six times my hard drive was completely wiped and so again. 110 00:06:53,140 --> 00:06:55,990 Be very careful with those but you're pretty safe with Escobedo. 111 00:06:55,990 --> 00:06:57,480 So good to go. 112 00:06:57,490 --> 00:07:02,340 Let's go ahead and call this video done and then actually start moving on to writing code. 113 00:07:02,380 --> 00:07:07,150 You're going to build your very first iOS app and so first things first let's look at what we're going 114 00:07:07,150 --> 00:07:08,310 to be building here. 115 00:07:08,320 --> 00:07:12,310 This app is called hustle mode and we're going to have an item here when you press a button. 116 00:07:12,370 --> 00:07:14,200 The power mode it turns it on. 117 00:07:14,230 --> 00:07:18,200 And this appears in the rockets can animate in some cool sound effect is going to play. 118 00:07:18,220 --> 00:07:23,340 And we're going to do this really fast and you're going to learn how easy it is to make apps in Iowa. 119 00:07:23,410 --> 00:07:24,880 So let's go ahead and get started. 120 00:07:24,880 --> 00:07:31,030 First things first go to your X code 9 beta or the AppStore version if it is released at this point 121 00:07:31,030 --> 00:07:31,730 in time. 122 00:07:31,840 --> 00:07:39,100 I'm using the beta and what we're going to do is click Create a new X code project single view application 123 00:07:39,640 --> 00:07:45,190 and just go ahead and call this hustle mode hustle dash mode and Maleev the default settings here just 124 00:07:45,190 --> 00:07:49,650 make sure swift is selected here and you can unselect these items if they are selected. 125 00:07:49,780 --> 00:07:50,770 Click next. 126 00:07:50,770 --> 00:07:56,470 And then you're going to find a folder for it like so and I'm going to click Create. 127 00:07:56,650 --> 00:07:57,770 And here we go. 128 00:07:57,790 --> 00:08:00,430 We're ready to get started on our app. 129 00:08:00,490 --> 00:08:04,780 So first thing make sure that you have downloaded the assets for this project. 130 00:08:05,520 --> 00:08:10,980 And once they're downloaded what I want you to do is click the assets folder here and select all the 131 00:08:10,980 --> 00:08:15,810 files in the assets folder that you have from this project except the way file unselect that so hold 132 00:08:15,810 --> 00:08:20,620 down Shift select all these and just drag them here in the assets folder like so. 133 00:08:20,760 --> 00:08:21,360 OK. 134 00:08:21,630 --> 00:08:25,650 There are more images here in the folder than appear or are we here and that's because it sets at 2x 135 00:08:25,740 --> 00:08:29,880 and 3x high resolution versions inside of a single image and X code you don't need to worry about that 136 00:08:29,880 --> 00:08:34,710 right now just drag them here in the assets folder and the adult wave file just drag here into the hustle 137 00:08:34,710 --> 00:08:39,810 mode project all together make sure that copy items if needed is selected and make sure added target 138 00:08:39,810 --> 00:08:41,240 is selected as well. 139 00:08:42,330 --> 00:08:43,620 Perfect. 140 00:08:43,650 --> 00:08:47,790 So now we've got our code and all we need to do now or our assets and all we need to do now is go into 141 00:08:47,790 --> 00:08:52,490 the main story board here and work to build out some user interface elements. 142 00:08:52,510 --> 00:08:55,440 Remember we're going to build out that blue screen that hustle mode screen. 143 00:08:55,440 --> 00:08:55,900 OK. 144 00:08:55,980 --> 00:08:57,440 The first power button. 145 00:08:57,450 --> 00:08:57,750 OK. 146 00:08:57,750 --> 00:08:58,500 So let's go ahead. 147 00:08:58,500 --> 00:09:02,080 At the bottom right here in the object directory here. 148 00:09:02,100 --> 00:09:04,130 And we're going to type in the word image. 149 00:09:04,230 --> 00:09:09,750 And let's take this image view and drag it over here onto the screen image you use allow you to have 150 00:09:09,750 --> 00:09:11,040 images on your screen. 151 00:09:11,490 --> 00:09:17,490 And once that's selected here let's go ahead and find the dark blue Biji. 152 00:09:17,510 --> 00:09:21,550 So on the right hand side over here in the image view select dark blue Biji. 153 00:09:21,980 --> 00:09:24,730 OK the next thing we need to do is have a button right in the middle. 154 00:09:24,740 --> 00:09:28,530 So let's type in the word button at the bottom right and drag it on. 155 00:09:28,550 --> 00:09:30,980 Now again for this lesson just follow along. 156 00:09:30,980 --> 00:09:35,690 We will explain more throughout all the other lessons this is the very first intro so you'll be doing 157 00:09:35,690 --> 00:09:38,490 things that you don't quite understand and that's OK. 158 00:09:38,510 --> 00:09:43,070 So this is a button here and what we want to do is on the right hand side can make sure this middle 159 00:09:43,070 --> 00:09:48,110 I kind of selected here the attributes and Specter and take off the word button. 160 00:09:48,110 --> 00:09:51,370 And instead what we're going to do is we're going to set an image on the spud. 161 00:09:51,440 --> 00:09:56,820 So what we're looking for is the power button like so and holding Shift just drag it a little bit bigger. 162 00:09:56,930 --> 00:10:02,610 Whatever size you think looks good and drag it here on the middle of the screen like so. 163 00:10:03,110 --> 00:10:03,410 OK. 164 00:10:03,410 --> 00:10:04,770 So we've got this button here. 165 00:10:04,970 --> 00:10:08,200 And the idea is when you click this button this stuff disappears. 166 00:10:08,300 --> 00:10:13,550 And then we show the cool clouds in the Rock and all that stuff and then animates up into the sky and 167 00:10:13,550 --> 00:10:14,450 plays a sound effect. 168 00:10:14,450 --> 00:10:18,330 So what we want to do is have another view on the top. 169 00:10:18,320 --> 00:10:21,560 Like almost like a second screen that holds all those other elements. 170 00:10:21,600 --> 00:10:27,950 And so what I'm going to do is at the bottom right here I'm going to type in UI view like so and you 171 00:10:27,950 --> 00:10:33,830 can see this Bubon and what you're going to do is just drag it on here like so and you're going to put 172 00:10:33,830 --> 00:10:35,320 it right here. 173 00:10:35,510 --> 00:10:36,830 OK so here's your background. 174 00:10:36,830 --> 00:10:38,870 This is what we're going to put all the elements on. 175 00:10:39,250 --> 00:10:39,500 OK. 176 00:10:39,500 --> 00:10:45,790 And if you notice here in the assets folder we've got let's see here we've got some different graphics 177 00:10:45,790 --> 00:10:50,330 like a blue background and we've got these cool clouds. 178 00:10:50,330 --> 00:10:54,020 This is like the full thing here and I can use this image here that's just more for market purposes 179 00:10:54,620 --> 00:10:58,340 but this is the one that has the clouds and stuff on and so we're going to put the clouds an orange 180 00:10:58,370 --> 00:11:00,430 oval on top of this. 181 00:11:00,500 --> 00:11:05,000 First things first is you know we don't even you probably need to use an image for the background because 182 00:11:05,000 --> 00:11:06,740 we could just set the view to blue. 183 00:11:06,750 --> 00:11:12,520 And so what I'm going to do is command space on a Mac and type in digital color meter. 184 00:11:12,800 --> 00:11:22,230 And what I'm going to do is hover over this blue and this is 75 119 181 75 119 181. 185 00:11:22,370 --> 00:11:28,560 OK so let's go back to the storyboard and we're going to go to the background color and we're going 186 00:11:28,560 --> 00:11:30,420 to selected this here. 187 00:11:30,810 --> 00:11:42,380 And 75 one 18 and 170 171 they get a little brighter every go. 188 00:11:42,430 --> 00:11:43,530 Not too shabby. 189 00:11:43,540 --> 00:11:43,710 OK. 190 00:11:43,720 --> 00:11:45,810 So there's a nice blue background. 191 00:11:45,930 --> 00:11:50,220 You know you don't need to use an image whenever whenever you don't need to because it will be faster 192 00:11:50,230 --> 00:11:51,360 just setting the color here. 193 00:11:51,370 --> 00:11:56,770 And so what we're going to do now is add an image of you to the screen. 194 00:11:58,330 --> 00:12:04,860 And I'm going make it full screen like so and we're going to get this one to the clouds an orange oval. 195 00:12:04,960 --> 00:12:06,460 So pretty. 196 00:12:06,460 --> 00:12:09,510 But one thing that's happening is our image is stretching and so we want to fix that. 197 00:12:09,550 --> 00:12:16,920 Let's go ahead and say aspect feel and let's make it a little smaller. 198 00:12:21,240 --> 00:12:27,080 Like so you know just kind of eyeball it make it look pretty big because it aspect feel it won't stretch 199 00:12:27,080 --> 00:12:30,080 the image it'll just look nice and pretty which is exactly what we want. 200 00:12:30,170 --> 00:12:31,280 OK. 201 00:12:31,280 --> 00:12:32,050 So this is cool. 202 00:12:32,120 --> 00:12:36,410 So the next thing is let's get our rocket and our rock is also an image so just drag an image of you 203 00:12:36,410 --> 00:12:37,160 on here. 204 00:12:37,220 --> 00:12:38,120 All right. 205 00:12:38,120 --> 00:12:40,700 And let's find the rocket rocket and Stream. 206 00:12:40,700 --> 00:12:45,170 Now again this is stretching again so we want to set this to Aspect fit or aspect feel so let's try 207 00:12:45,170 --> 00:12:52,740 aspect feel kind of like that and what we'll do is we'll do us make it go on the screen here. 208 00:12:52,740 --> 00:12:54,600 And what I'm going to do is it's in front of the clouds. 209 00:12:54,610 --> 00:12:56,150 We don't want in front of the clouds. 210 00:12:56,610 --> 00:13:01,580 So on the left hand side here just drag it behind the clouds an orange oval like so. 211 00:13:01,680 --> 00:13:06,900 And with the selected go ahead and double click it and just use the arrow key to go down and we're just 212 00:13:06,900 --> 00:13:09,180 kind of visualizing what it will look like if the rockets moving. 213 00:13:09,190 --> 00:13:11,380 See how it's coming behind the clouds. 214 00:13:11,510 --> 00:13:13,320 It's so pretty. 215 00:13:13,320 --> 00:13:14,850 So cool. 216 00:13:14,880 --> 00:13:16,640 Very good so we want to hit it that first. 217 00:13:16,650 --> 00:13:17,140 OK. 218 00:13:17,240 --> 00:13:22,980 And so what we've done so far is we've created a view we've set the background on it to blue and the 219 00:13:22,980 --> 00:13:26,940 same blue that image was we just decided not to use an image just to show you that you can set a background 220 00:13:26,940 --> 00:13:27,520 color. 221 00:13:27,870 --> 00:13:32,860 And then what we've done is we've created a cloud an orange oval image at the bottom here. 222 00:13:32,890 --> 00:13:38,940 We set it to Aspect feel so it looks nice and then we put the rocket but we put it behind it so it looks 223 00:13:38,940 --> 00:13:43,220 like it's coming up from beneath the clouds and we see that aspect feel on that as well too. 224 00:13:43,590 --> 00:13:44,030 OK. 225 00:13:44,100 --> 00:13:48,650 The next thing is let's go ahead and add a label here so we can type in the label. 226 00:13:49,230 --> 00:13:51,990 And if you remember it's says hustle mode on. 227 00:13:51,990 --> 00:13:58,800 So this label we're going to say hustle mode and this little bit you know messed up so let's go ahead 228 00:13:58,830 --> 00:14:02,370 and make it bigger and we're going to center it. 229 00:14:02,370 --> 00:14:07,800 So with the label selected put the center button to center that text and we want it to be white of course 230 00:14:07,800 --> 00:14:15,090 because that's what it calls for so clicking our little color slicker here we can select white. 231 00:14:15,180 --> 00:14:16,280 All right. 232 00:14:16,410 --> 00:14:21,150 And instead of system I want to do system like bold so click the little T button up here on the label 233 00:14:21,480 --> 00:14:25,550 and go to System and then instead of regular Do bold. 234 00:14:25,630 --> 00:14:27,910 Here we go and let's make it a lot bigger. 235 00:14:28,820 --> 00:14:30,110 So. 236 00:14:30,640 --> 00:14:32,070 Just kind of eyeball it where you want it. 237 00:14:32,090 --> 00:14:33,930 Like here in the center it looks good. 238 00:14:34,040 --> 00:14:40,580 And what I'm going to do is command to copy this label to make a new one and make this even bigger instead 239 00:14:40,580 --> 00:14:41,390 of hosel mode. 240 00:14:41,420 --> 00:14:47,150 This one's going to say on so double click it and change it to the word on and then we're going to increase 241 00:14:47,150 --> 00:14:52,080 this font size as well to just click the button until it gets to the size that you like. 242 00:14:52,760 --> 00:14:54,370 Awesome mode on. 243 00:14:54,470 --> 00:14:57,970 And we can make it a little smaller now since we know how big it is. 244 00:14:58,870 --> 00:14:59,880 And this is looking good. 245 00:15:00,040 --> 00:15:02,490 So hustle mode is on. 246 00:15:02,680 --> 00:15:02,980 OK. 247 00:15:02,980 --> 00:15:06,190 So all of our user interface elements are complete. 248 00:15:06,190 --> 00:15:06,850 So that's great. 249 00:15:06,850 --> 00:15:11,980 So now we can actually go into the code and what we're going to do is we're going to click this button 250 00:15:11,980 --> 00:15:14,130 here in the middle called the assistant editor. 251 00:15:14,290 --> 00:15:15,110 OK. 252 00:15:15,460 --> 00:15:19,300 And what we're going to do is we're going to create some Iby outlets we're going to connect the user 253 00:15:19,300 --> 00:15:20,920 interface to the code. 254 00:15:20,920 --> 00:15:25,090 So real quick I'm going to close the left hand side so I have some more screen space and I did that 255 00:15:25,090 --> 00:15:26,470 by clicking these buttons up here. 256 00:15:26,470 --> 00:15:29,460 You can expand and retract the different panels here. 257 00:15:29,860 --> 00:15:31,660 And this is cool. 258 00:15:31,660 --> 00:15:35,500 So first things first is I'm going to clean up some code here to get rid of this did receive memory 259 00:15:35,500 --> 00:15:37,760 warning we don't need to worry about that just yet. 260 00:15:38,110 --> 00:15:43,740 And then we're going to make a few spaces here in the View Controller make sure this says a controller. 261 00:15:43,960 --> 00:15:47,630 And then what we're going to do is this dark blue background. 262 00:15:47,710 --> 00:15:50,280 OK I'm going to control dry hole in the control button. 263 00:15:50,290 --> 00:15:57,850 I'm going to drag it over a year and make sure this outlet and we're going to say dark blue Biji like 264 00:15:57,850 --> 00:15:58,570 so. 265 00:15:58,810 --> 00:16:01,990 And then what we're going to do is we're going to grab this button here. 266 00:16:02,450 --> 00:16:04,820 OK we're going to call this power. 267 00:16:04,900 --> 00:16:07,250 And like so. 268 00:16:07,420 --> 00:16:11,470 And then this right here the one that holds all these cool clouds and stuff we're going to make an outlet 269 00:16:11,470 --> 00:16:16,890 for and let's call this the let's call this the cloud Holder. 270 00:16:17,040 --> 00:16:18,910 OK it's holding the clouds and all the other views. 271 00:16:18,910 --> 00:16:19,480 OK. 272 00:16:19,570 --> 00:16:20,770 There's the cloud holder. 273 00:16:21,600 --> 00:16:26,480 And then what we want to do is let's go ahead and grab this rocket stream. 274 00:16:26,490 --> 00:16:32,820 So what does control drag the rocket and streamlets just call this the rocket gear to that empty space 275 00:16:32,820 --> 00:16:33,410 there. 276 00:16:33,660 --> 00:16:39,280 So the rocket and we don't need to grab the orange but we do need the labels here. 277 00:16:39,410 --> 00:16:40,530 And I'll tell you why in a second. 278 00:16:40,530 --> 00:16:46,890 So I want to control drag from the hustle mode label drag it here we're going to call this hustle Elby 279 00:16:47,010 --> 00:16:47,880 for label. 280 00:16:48,360 --> 00:16:54,330 And then again control drag from the on button like so and we're going to call this on label and again 281 00:16:54,360 --> 00:16:58,530 all we're doing is connecting user interface elements to the code so we can do things with them. 282 00:16:58,560 --> 00:16:59,060 OK. 283 00:16:59,340 --> 00:17:04,300 This is core iOS development features which you'll be using everyday as I was to Bellaver. 284 00:17:04,690 --> 00:17:06,120 OK so what do we want to have happen. 285 00:17:06,120 --> 00:17:09,270 Well when that power button is selected. 286 00:17:09,320 --> 00:17:10,120 OK. 287 00:17:10,200 --> 00:17:14,710 What we want to do is have all these things become visible and have the power buttons become invisible. 288 00:17:14,780 --> 00:17:15,260 OK. 289 00:17:15,360 --> 00:17:25,000 No big deal it's it's fairly simple actually so all we need to do is create a function here that's going 290 00:17:25,000 --> 00:17:29,500 to allow us to receive an action when an event happens and how do you do that is you go to your dark 291 00:17:29,500 --> 00:17:36,670 blue but excuse me your power button here on the left hand side control drag over into your code and 292 00:17:36,670 --> 00:17:38,660 a Instead of outlet change it to an action. 293 00:17:38,830 --> 00:17:39,290 OK. 294 00:17:39,370 --> 00:17:46,390 And we're going to call this power button pressed and just press enter until you have a function here 295 00:17:46,990 --> 00:17:49,010 that would be called whenever that button is pressed. 296 00:17:49,020 --> 00:17:55,260 And so what we want to do is we want to we want to show the cloud holder and we want to hide the other 297 00:17:55,330 --> 00:18:04,960 background element so let's go ahead and say we want to say cloud Holder is hidden equals false. 298 00:18:05,200 --> 00:18:06,330 OK. 299 00:18:07,090 --> 00:18:14,900 And we also want to do is we want to say the dark blue B.G. is hidden equals true. 300 00:18:14,920 --> 00:18:16,630 We want to hide that and we want to hide the power button. 301 00:18:16,630 --> 00:18:23,660 Right so power button up his hidden equals true like so. 302 00:18:24,220 --> 00:18:28,840 And let's just do a little more clean up in Interface Builder for now so let's close the assistant editor 303 00:18:28,840 --> 00:18:31,540 by clicking these little lines here the standard editor. 304 00:18:31,570 --> 00:18:32,210 OK. 305 00:18:32,410 --> 00:18:35,680 And what I want to do is by default the cloud Holder will be hidden. 306 00:18:35,680 --> 00:18:38,030 So let's open up the right hand side here. 307 00:18:38,170 --> 00:18:42,820 And I also want these hustle mode labels to be is hidden so slick the hustle mode label and the on label 308 00:18:43,060 --> 00:18:48,370 and go ahead and select hit and so scroll down here and select hit and on those so those will be hidden 309 00:18:48,370 --> 00:18:49,030 by default. 310 00:18:49,060 --> 00:18:53,600 And then the cloud holder itself will be hidden by default like so. 311 00:18:53,830 --> 00:18:54,260 OK. 312 00:18:54,280 --> 00:18:56,060 Because we don't want those showing at first. 313 00:18:56,350 --> 00:19:00,140 And make sure that the cloud Holder is above the dark blue background and power button. 314 00:19:00,160 --> 00:19:04,900 So it appears on top of it it doesn't matter too much but at least for visual sake it looks. 315 00:19:04,900 --> 00:19:06,260 That's how we want it here. 316 00:19:06,550 --> 00:19:08,350 And that's all looking good. 317 00:19:08,350 --> 00:19:14,500 So when we press the power button this the screen will appear and the other one the old one will hide. 318 00:19:14,500 --> 00:19:15,430 So that's looking great. 319 00:19:15,430 --> 00:19:17,370 So let's go straight to our code now. 320 00:19:17,500 --> 00:19:18,950 Open up the left hand side. 321 00:19:19,420 --> 00:19:22,170 Go to the view controller and we're going to write some code. 322 00:19:22,180 --> 00:19:26,650 So again what we want to have happen is we want when that power button is pressed we want the rocket 323 00:19:26,650 --> 00:19:29,610 to shoot up into the sky and play a really cool sound effect. 324 00:19:29,890 --> 00:19:32,110 And we want to turn the hustle mode ready to take this. 325 00:19:32,110 --> 00:19:36,970 I was 11 course and work our butts off so you know we can do great and amazing things. 326 00:19:36,970 --> 00:19:40,150 So first things first is in order to play audio. 327 00:19:40,180 --> 00:19:44,590 We're going to need to import a framework that allows us to play audio. 328 00:19:44,610 --> 00:19:50,620 So type an import at the top here avi foundation that allows us to play some music or some sounds. 329 00:19:50,680 --> 00:19:53,160 In our case just a single sound. 330 00:19:53,320 --> 00:19:58,760 And then what we're going to do is blow the ivy out let's hear we're going to type in var layer create 331 00:19:58,770 --> 00:20:04,060 a variable called Player AB audio player and put an exclamation point at the end. 332 00:20:04,420 --> 00:20:08,130 This is called an implicitly unwrapped optional but you don't need to worry about that right. 333 00:20:08,140 --> 00:20:09,900 Right now you'll learn that later. 334 00:20:09,970 --> 00:20:10,590 OK. 335 00:20:10,720 --> 00:20:13,530 And what we're going to do here is in the view did load. 336 00:20:13,590 --> 00:20:18,160 Ok this is a function that is the starting point of your of your code. 337 00:20:18,200 --> 00:20:21,370 When the screen first LOTES and so this is where you can initialize things. 338 00:20:21,370 --> 00:20:25,600 And what we're going to do is we're going to find this file this way File here in our documents directory 339 00:20:25,630 --> 00:20:27,350 and then we're going to load it into the player. 340 00:20:27,490 --> 00:20:37,010 OK so we're going to create a constant here code let path equals bundle that main path and it's say 341 00:20:37,060 --> 00:20:38,410 for resource 342 00:20:41,160 --> 00:20:49,620 like so or to say hostle dash on that's the name of the file of type and that's going to be wave like 343 00:20:49,620 --> 00:20:54,490 so say but they're so bundled up path and then for resource. 344 00:20:54,510 --> 00:20:59,550 And so what we're doing here is we're grabbing the file OK and it's yelling at us with a yellow warning 345 00:20:59,550 --> 00:21:01,170 because we're not using this yet. 346 00:21:01,530 --> 00:21:08,540 And now we're going to do is create a real iOS works with your rules for it's like local file system. 347 00:21:08,550 --> 00:21:10,650 So same as it might grab you or from the Internet. 348 00:21:10,650 --> 00:21:13,310 And this is going to save file. 349 00:21:13,560 --> 00:21:14,900 Well actually you can see it right here. 350 00:21:14,940 --> 00:21:17,570 If I do the parentheses follow your own path. 351 00:21:17,700 --> 00:21:20,040 Now we're just going to pass in the path that we just created here. 352 00:21:20,040 --> 00:21:25,170 So the path was a string and now we're converting it to a u r l Hanigan you don't have to understand 353 00:21:25,170 --> 00:21:27,970 all this just yet you'll learn all about this later. 354 00:21:28,080 --> 00:21:29,040 We're going to do. 355 00:21:29,190 --> 00:21:34,050 We're going to try and load our player and since this could possibly fail we're going to do a due and 356 00:21:34,050 --> 00:21:35,730 catch statement here. 357 00:21:35,730 --> 00:21:44,580 Player equals try AB audio player contents of you are real and we're going to pass in the L and then 358 00:21:44,580 --> 00:21:47,350 we're going to say player not prepare to play. 359 00:21:47,350 --> 00:21:49,470 Let's get it ready to play. 360 00:21:49,470 --> 00:21:53,970 And if this youra was wrong it didn't work we could get an air so we're just going to catch the air 361 00:21:54,180 --> 00:21:55,250 okay. 362 00:21:58,450 --> 00:22:02,980 We're just catching the air here and we're just going to print it in case there was some type of problem. 363 00:22:03,070 --> 00:22:05,130 Again you don't need to worry about all of this. 364 00:22:05,170 --> 00:22:09,100 The important thing to understand is that we're grabbing the file here and we're loading it into the 365 00:22:09,100 --> 00:22:09,430 player. 366 00:22:09,430 --> 00:22:14,120 And because it can fail we have this do catch state and that will catch errors and problems again. 367 00:22:14,290 --> 00:22:15,770 You'll learn all about this later on. 368 00:22:15,800 --> 00:22:17,590 Let's just keep moving on and forward here. 369 00:22:17,580 --> 00:22:19,480 This is just the very first lesson. 370 00:22:19,540 --> 00:22:21,720 So when the power Bun's breasts we're going to hope. 371 00:22:21,760 --> 00:22:26,320 We're going to show the cloud holder and then what we're going to do is we're going to hide the blue 372 00:22:26,320 --> 00:22:28,620 background the dark blue background and the power button. 373 00:22:28,750 --> 00:22:31,200 And now we want to animate the rocket up into the clouds. 374 00:22:31,210 --> 00:22:31,640 OK. 375 00:22:31,720 --> 00:22:39,070 So to make an animation in Iowa s we can use a simple UI view animation and we want to do that one right 376 00:22:39,070 --> 00:22:41,440 here with animations and a completion handler. 377 00:22:41,440 --> 00:22:48,610 So with duration let's set 2.3 seconds and press tab to go to animations and then press enter delete 378 00:22:48,610 --> 00:22:55,680 that thing that says code and then press tab again and press enter enter and type in finished. 379 00:22:55,750 --> 00:23:00,870 Here in the parentheses it's a boolean and we're going to get rid of this code right here. 380 00:23:00,970 --> 00:23:03,020 So auto populated all this stuff for us. 381 00:23:03,030 --> 00:23:06,540 And if it didn't work or you press the wrong key just copy it like I have it here. 382 00:23:06,550 --> 00:23:07,360 Exactly. 383 00:23:07,630 --> 00:23:12,580 And so what's going to happen is we're going to say hey we want to animate this rocket to a certain 384 00:23:12,580 --> 00:23:18,170 position over 2.3 seconds so we're going to say self dot rocket. 385 00:23:18,460 --> 00:23:19,360 OK. 386 00:23:19,420 --> 00:23:21,960 Frame equals C.G. wrecked. 387 00:23:22,150 --> 00:23:23,370 And where do we want it to go. 388 00:23:23,410 --> 00:23:28,510 Well we're going to set an exposition of why position and a width and height so the x is from left to 389 00:23:28,510 --> 00:23:33,190 right and the wise up and down again you don't have to completely understand all this just now just 390 00:23:33,190 --> 00:23:38,380 follow along and you'll learn all about frames and bounds and positions and all this great stuff later 391 00:23:38,380 --> 00:23:38,560 on. 392 00:23:38,560 --> 00:23:44,590 So we're just we want it to be at zero X. And for the y position let's position it like 20 points from 393 00:23:44,590 --> 00:23:44,980 the top. 394 00:23:44,980 --> 00:23:48,160 We won't make it go all the way to the top and the width. 395 00:23:48,160 --> 00:23:50,820 Let's go look at the with a click the main storyboard. 396 00:23:51,200 --> 00:23:54,690 OK click your rocket and then click the ruler over here. 397 00:23:54,730 --> 00:23:58,480 And so with this 375 and the height is 402. 398 00:23:58,480 --> 00:24:04,630 So what we're going to do is we're going to say with is going to be 375 in height is two. 399 00:24:04,650 --> 00:24:09,880 And so what we're saying is over 2.3 seconds let's move the rocket to this position and we're just keeping 400 00:24:09,880 --> 00:24:12,040 the same height and the height and width on this. 401 00:24:12,040 --> 00:24:12,720 OK. 402 00:24:13,090 --> 00:24:19,360 And then when it's finished what do we want to do we want to we want to go ahead and show the show the 403 00:24:19,360 --> 00:24:20,160 labels and stuff. 404 00:24:20,170 --> 00:24:20,840 OK. 405 00:24:21,250 --> 00:24:30,690 For the hustle Modan so self dot hustle label that is hidden not highlighted is hidden equals false 406 00:24:31,240 --> 00:24:37,830 and then self dot on that label that is hit and equals false. 407 00:24:38,140 --> 00:24:38,570 OK. 408 00:24:38,620 --> 00:24:42,940 And then the last thing we want to do is actually just get our cool sound effect to play and I need 409 00:24:42,940 --> 00:24:47,610 to do is type in player play above this view that animate. 410 00:24:47,710 --> 00:24:48,850 OK. 411 00:24:49,480 --> 00:24:52,850 So we've done a lot here and it may be a lot to take in but it's not. 412 00:24:52,870 --> 00:24:53,580 It's not so bad. 413 00:24:53,620 --> 00:24:55,910 What we've done is in Iowa. 414 00:24:55,930 --> 00:24:58,960 You can drag interface elements to your code like so. 415 00:24:58,990 --> 00:25:03,610 And that's using the IBL is all we've done is we've said hey we're making a connection between user 416 00:25:03,610 --> 00:25:05,010 interface and code. 417 00:25:05,080 --> 00:25:09,010 So your code community built them so we've grabbed the buttons in the holder and the rockets and all 418 00:25:09,010 --> 00:25:13,150 those things that we created then we created a player that actually played music. 419 00:25:13,150 --> 00:25:19,090 We went and got the path for the file the sound file the wave file here and we've loaded it into the 420 00:25:19,090 --> 00:25:21,470 player contents of your L into the player. 421 00:25:21,470 --> 00:25:24,810 And when we were preparing the audio player to actually play OK. 422 00:25:25,060 --> 00:25:29,730 Then when the power buttons plus pressed on the main screen we're going to hide the power button. 423 00:25:29,800 --> 00:25:35,230 We're going to hide the dark blue background and we're going to show the clouds in the rocket and all 424 00:25:35,230 --> 00:25:36,490 that on the screen. 425 00:25:36,490 --> 00:25:37,800 And then we're going to play the sound effect. 426 00:25:37,810 --> 00:25:43,610 And while the sound of explain we're going to move the rocket up over 2.3 seconds high into the sky. 427 00:25:43,750 --> 00:25:46,390 And then when that's done we're going to show the hustle labels on. 428 00:25:46,390 --> 00:25:50,920 So if this all worked out as expected we haven't run our code at all. 429 00:25:50,950 --> 00:25:52,150 Then it'll look great. 430 00:25:52,150 --> 00:25:54,630 So I'm going to change this to an iPhone 7. 431 00:25:55,160 --> 00:25:55,480 OK. 432 00:25:55,480 --> 00:25:58,220 And then we're going to run and see what happens. 433 00:25:58,950 --> 00:25:59,890 Here is our simulator. 434 00:25:59,890 --> 00:26:00,550 It's open. 435 00:26:00,610 --> 00:26:05,470 And if it's too large or too small you can hold down command first plus one or two or three and it will 436 00:26:05,470 --> 00:26:07,560 change the size of the simulator for you. 437 00:26:07,640 --> 00:26:08,410 OK. 438 00:26:08,830 --> 00:26:10,140 OK our screen is loaded. 439 00:26:10,300 --> 00:26:12,760 And so if we click this button hopefully it all works out. 440 00:26:12,760 --> 00:26:13,600 Let's go ahead and try 441 00:26:18,050 --> 00:26:19,620 that's pretty cool actually. 442 00:26:19,760 --> 00:26:20,670 We have a problem though. 443 00:26:20,750 --> 00:26:21,710 We have a bug right. 444 00:26:21,710 --> 00:26:24,210 So our rocket ship is too high in the sky. 445 00:26:24,410 --> 00:26:26,600 So we have to debug what happened here. 446 00:26:26,690 --> 00:26:29,630 OK this is called debugging when you have a problem and you need to solve it. 447 00:26:29,630 --> 00:26:30,800 So what happened here. 448 00:26:31,010 --> 00:26:32,360 Well it's a little bit too high. 449 00:26:32,360 --> 00:26:36,110 So all we need to do is probably make its position a little bit lower from the top. 450 00:26:36,110 --> 00:26:43,330 So why at zero is here at the top and so 20 down is not enough we probably need to make it like 100 451 00:26:43,340 --> 00:26:44,070 from the top. 452 00:26:44,120 --> 00:26:45,810 So let's give that a shot on the way. 453 00:26:46,160 --> 00:26:47,790 Type in 100. 454 00:26:47,910 --> 00:26:50,420 Save it and then let's run it again. 455 00:26:51,160 --> 00:26:51,630 Here we go. 456 00:26:51,640 --> 00:26:52,400 Click it. 457 00:26:52,440 --> 00:26:56,060 What hustle mode on. 458 00:26:56,070 --> 00:26:57,360 It's still not quite enough. 459 00:26:57,360 --> 00:27:02,120 I'm going to say 140 we're just making it look perfect here. 460 00:27:02,470 --> 00:27:05,390 What. 461 00:27:05,750 --> 00:27:06,260 There we go. 462 00:27:06,260 --> 00:27:11,300 So congratulations you built your very first iOS app and you've actually done a lot. 463 00:27:11,330 --> 00:27:16,220 OK what did we do here in 20 minutes so you built your first it happened 20 minutes that's pretty fantastic 464 00:27:16,230 --> 00:27:19,580 and that's with me talking if you were approached to vote and you could have built this probably in 465 00:27:19,580 --> 00:27:20,750 five minutes. 466 00:27:20,750 --> 00:27:27,530 So what we've done here is we created interface elements on the screen so you could reference the controls 467 00:27:27,590 --> 00:27:28,800 and hide them and show them. 468 00:27:28,910 --> 00:27:34,490 And then we created an action right here that basically receives events when you press a button. 469 00:27:34,500 --> 00:27:35,570 And we did that from the power button. 470 00:27:35,570 --> 00:27:36,280 OK. 471 00:27:36,650 --> 00:27:41,240 And then what we also did was we made it so when the action is pressed we hide the old elements on the 472 00:27:41,240 --> 00:27:46,370 screen and we show the new ones and then we play an animation of the rocket going up into the sky and 473 00:27:46,370 --> 00:27:50,260 astounded that all at the same time and when it gets to the top we show these labels here and we do 474 00:27:50,260 --> 00:27:53,300 our very own animation which is really cool really really cool stuff. 475 00:27:53,300 --> 00:27:55,850 So just for fun let's play this one more time. 476 00:27:55,850 --> 00:28:02,110 And then you can give yourself a pat on the back and call yourself an official iOS developer. 477 00:28:04,170 --> 00:28:07,920 So congratulations you're an Iowa developer in training at least. 478 00:28:07,950 --> 00:28:09,360 And there's so much more to learn. 479 00:28:09,360 --> 00:28:11,550 So let's go ahead and get started moving forward. 480 00:28:11,580 --> 00:28:14,370 Show this your friends and family and this is really cool stuff. 481 00:28:14,370 --> 00:28:16,760 So Mark Price here at Dove slopes dot com. 482 00:28:16,800 --> 00:28:17,610 Moving on and for.