What's a bigger one.
Mark syster with slopes dot com.
And in this video we are going to learn how to download x code so we can actually start building apps.
This is the very first step.
And you can't really build apps unless you have the tools to do that.
So I'm going to go ahead and open up Safari Now you can do this with Google Chrome as well.
We're going to go with Safari.
Keep it the Apple way and one thing I will let you know is some of the apple tools and Web sites that
they have don't work unless you use Safari so whenever working with Apple dotcom you want to use Safari
and you've just done is gone to developer dot apple dot com.
If you don't have an account as a registered Apple developer you need to sign up first.
It's absolutely free and you can do that by clicking account and then you can register your account
like so go through those steps after you do have an account already from developer dot apple dot com.
All you need to do is click develop and you're going to see a few things here.
Ex-coach with documentation's videos downloads and they've done a really nice job in making development
really easy this did not used to be like this.
It's much better now.
OK.
So I highly encourage you to read the documentation read these links as a brand new developer you want
to read everything you may be used to speed reading and going through things really fast.
That's how I was.
You can't do that anymore.
Every single word matters.
And you need to read everything.
But in this case we're going to download something.
So let's go ahead and click downloads.
And after you've signed in you can see a series of downloads here.
And let's just talk about a few things.
First things first you're going to need as code 9 beta.
OK this is going to require the update you update to the latest Mac OS.
OK no it don't update to the beta which is currently high sierra beta operating systems are very unstable.
OK but you are going to need the latest Mac OS in order to download x code.
Beta 9.
Now why didn't we go to the App Store.
Well we could have we could have on our Mac did command space and then type in App Store and then we
can search for X code and you'll see there's X code right here.
Well the difference is the X code that's available on the App Store is always the latest release version.
Ok not the beta version.
We're going to use the beta version because it gives us access to swift for iOS 11.
Now when I was 11 and so before are officially released you'll want to download it from here instead.
OK so if you're watching this video and X code nine is available.
OK.
You're going to get it right here.
Pos 11 is out.
Come to the app store and download it here here.
Otherwise go to developer to Apple dotcom in order to download the beta.
One more thing I want to talk about when it comes to beta software there can be bugs and there can be
problems but they're pretty close.
The final result.
So you maybe you're asking well is it bad that I'm learning these new things in release.
Well no you're kind of ahead of the game here.
And I'll give you a chance to do some debugging and problem solving if you do run into code issues.
And of course we'll cover some of those problems and issues as updates and changes are made.
So nothing to worry about here.
What you're going to want to go ahead and download x code 9 beta and again I highly recommend that you
do not install the latest Mac OS.
I Heisey error or any beta version of Mac OS because it could destroy your computer.
It's it's very hard to install sometimes as well as the iOS 11 beta or any beta suffer for iOS.
OK they're very well known to break phones and cause lots of problems and you can't install certain
types of outs and a lot of things will break so if you have a test device and you really want to get
the cutting edge beta version of Iowa.
You can do that but don't do it on your main phone.
Trust me now.
OK trust me now I promise you you won't regret not installing this and after you install it you'll come
back to me and you be like you are right Mark.
You know but those you don't really mean squat.
Install it and then come back to me in about a week and tell me how miserable your life is so go ahead
and click download on X cotinine beta
and that is downloading now.
OK now that it's downloaded wherever you saved ours is saved and downloads.
OK all we're going to do here all right is we're going to double click the X cotinine beta file.
It's going to verify it's going to take a while.
And if your computer's a little bit slower it'll take a great while.
What's expanding.
Again it's still part of the process and may take a while.
OK an X code Beta has finished downloading as you can see it here.
My downloads folder and all you have to do is take this icon this is called beta and make sure it says
beta on it.
If it doesn't say Beta you've got the wrong thing and has a little red icon badge at the top left there
and all you need to do is take this and drag it into applications folder.
Now I've already done that and so we go into my applications somewhere down here.
We've gotten X code beta and you can see the difference.
There's X code and X code beta.
They can run side by side without any problems.
One more thing I do want to talk to you about.
If you do have an existing X code project let's say built with some version of X code 8.
You may open it with Esco Bayda and it could upgrade your files on your swift the newest version and
you may or may not want to do that and it's hard to reverse that so just be very careful opening existing
projects in the new Escovedo.
If you don't want to migrate them and upgrade them and one more really important thing you will not
be able to submit apps to the App Store with iOS 11 until it's officially released so if you were thinking
oh I'm going to make this new iOS 11 app and submit it tomorrow you've got to wait.
We got the early access here so this is really cool but you got to wait till it comes out and then Apple
will accept those apps and so if you do have existing apps you may want to start upgrading them to iOS
11 so they're ready on day 1 when Iowa 11 comes out.
But just a few things there.
Ex-coach is officially installed and to test it out all you have to do is double click the icon that
is now in your applications folder.
In there you have it is loaded and you are good to go.
So we've done a few things in this video we've gone to developer to abduct.
We talked about registering as an apple developer we also talked about what the difference between the
ex-coach on the App Store is versus versus what's on the developer appled outcome.
We've also talked about how it's absolutely ridiculous for you to install iOS 11 or any Iowas beta on
your phone because it's probably going to break and then you're not going to use any of your apps and
things like that trust me trust me trust me.
Same with Mac OS High Sierra or any type of beta Mac OS.
For an example I tried installing it on one of our dev computers the other day and it took six times
to try and install it.
It failed after all six times my hard drive was completely wiped and so again.
Be very careful with those but you're pretty safe with Escobedo.
So good to go.
Let's go ahead and call this video done and then actually start moving on to writing code.
You're going to build your very first iOS app and so first things first let's look at what we're going
to be building here.
This app is called hustle mode and we're going to have an item here when you press a button.
The power mode it turns it on.
And this appears in the rockets can animate in some cool sound effect is going to play.
And we're going to do this really fast and you're going to learn how easy it is to make apps in Iowa.
So let's go ahead and get started.
First things first go to your X code 9 beta or the AppStore version if it is released at this point
in time.
I'm using the beta and what we're going to do is click Create a new X code project single view application
and just go ahead and call this hustle mode hustle dash mode and Maleev the default settings here just
make sure swift is selected here and you can unselect these items if they are selected.
Click next.
And then you're going to find a folder for it like so and I'm going to click Create.
And here we go.
We're ready to get started on our app.
So first thing make sure that you have downloaded the assets for this project.
And once they're downloaded what I want you to do is click the assets folder here and select all the
files in the assets folder that you have from this project except the way file unselect that so hold
down Shift select all these and just drag them here in the assets folder like so.
OK.
There are more images here in the folder than appear or are we here and that's because it sets at 2x
and 3x high resolution versions inside of a single image and X code you don't need to worry about that
right now just drag them here in the assets folder and the adult wave file just drag here into the hustle
mode project all together make sure that copy items if needed is selected and make sure added target
is selected as well.
Perfect.
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
the main story board here and work to build out some user interface elements.
Remember we're going to build out that blue screen that hustle mode screen.
OK.
The first power button.
OK.
So let's go ahead.
At the bottom right here in the object directory here.
And we're going to type in the word image.
And let's take this image view and drag it over here onto the screen image you use allow you to have
images on your screen.
And once that's selected here let's go ahead and find the dark blue Biji.
So on the right hand side over here in the image view select dark blue Biji.
OK the next thing we need to do is have a button right in the middle.
So let's type in the word button at the bottom right and drag it on.
Now again for this lesson just follow along.
We will explain more throughout all the other lessons this is the very first intro so you'll be doing
things that you don't quite understand and that's OK.
So this is a button here and what we want to do is on the right hand side can make sure this middle
I kind of selected here the attributes and Specter and take off the word button.
And instead what we're going to do is we're going to set an image on the spud.
So what we're looking for is the power button like so and holding Shift just drag it a little bit bigger.
Whatever size you think looks good and drag it here on the middle of the screen like so.
OK.
So we've got this button here.
And the idea is when you click this button this stuff disappears.
And then we show the cool clouds in the Rock and all that stuff and then animates up into the sky and
plays a sound effect.
So what we want to do is have another view on the top.
Like almost like a second screen that holds all those other elements.
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
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
it right here.
OK so here's your background.
This is what we're going to put all the elements on.
OK.
And if you notice here in the assets folder we've got let's see here we've got some different graphics
like a blue background and we've got these cool clouds.
This is like the full thing here and I can use this image here that's just more for market purposes
but this is the one that has the clouds and stuff on and so we're going to put the clouds an orange
oval on top of this.
First things first is you know we don't even you probably need to use an image for the background because
we could just set the view to blue.
And so what I'm going to do is command space on a Mac and type in digital color meter.
And what I'm going to do is hover over this blue and this is 75 119 181 75 119 181.
OK so let's go back to the storyboard and we're going to go to the background color and we're going
to selected this here.
And 75 one 18 and 170 171 they get a little brighter every go.
Not too shabby.
OK.
So there's a nice blue background.
You know you don't need to use an image whenever whenever you don't need to because it will be faster
just setting the color here.
And so what we're going to do now is add an image of you to the screen.
And I'm going make it full screen like so and we're going to get this one to the clouds an orange oval.
So pretty.
But one thing that's happening is our image is stretching and so we want to fix that.
Let's go ahead and say aspect feel and let's make it a little smaller.
Like so you know just kind of eyeball it make it look pretty big because it aspect feel it won't stretch
the image it'll just look nice and pretty which is exactly what we want.
OK.
So this is cool.
So the next thing is let's get our rocket and our rock is also an image so just drag an image of you
on here.
All right.
And let's find the rocket rocket and Stream.
Now again this is stretching again so we want to set this to Aspect fit or aspect feel so let's try
aspect feel kind of like that and what we'll do is we'll do us make it go on the screen here.
And what I'm going to do is it's in front of the clouds.
We don't want in front of the clouds.
So on the left hand side here just drag it behind the clouds an orange oval like so.
And with the selected go ahead and double click it and just use the arrow key to go down and we're just
kind of visualizing what it will look like if the rockets moving.
See how it's coming behind the clouds.
It's so pretty.
So cool.
Very good so we want to hit it that first.
OK.
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
same blue that image was we just decided not to use an image just to show you that you can set a background
color.
And then what we've done is we've created a cloud an orange oval image at the bottom here.
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
like it's coming up from beneath the clouds and we see that aspect feel on that as well too.
OK.
The next thing is let's go ahead and add a label here so we can type in the label.
And if you remember it's says hustle mode on.
So this label we're going to say hustle mode and this little bit you know messed up so let's go ahead
and make it bigger and we're going to center it.
So with the label selected put the center button to center that text and we want it to be white of course
because that's what it calls for so clicking our little color slicker here we can select white.
All right.
And instead of system I want to do system like bold so click the little T button up here on the label
and go to System and then instead of regular Do bold.
Here we go and let's make it a lot bigger.
So.
Just kind of eyeball it where you want it.
Like here in the center it looks good.
And what I'm going to do is command to copy this label to make a new one and make this even bigger instead
of hosel mode.
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
this font size as well to just click the button until it gets to the size that you like.
Awesome mode on.
And we can make it a little smaller now since we know how big it is.
And this is looking good.
So hustle mode is on.
OK.
So all of our user interface elements are complete.
So that's great.
So now we can actually go into the code and what we're going to do is we're going to click this button
here in the middle called the assistant editor.
OK.
And what we're going to do is we're going to create some Iby outlets we're going to connect the user
interface to the code.
So real quick I'm going to close the left hand side so I have some more screen space and I did that
by clicking these buttons up here.
You can expand and retract the different panels here.
And this is cool.
So first things first is I'm going to clean up some code here to get rid of this did receive memory
warning we don't need to worry about that just yet.
And then we're going to make a few spaces here in the View Controller make sure this says a controller.
And then what we're going to do is this dark blue background.
OK I'm going to control dry hole in the control button.
I'm going to drag it over a year and make sure this outlet and we're going to say dark blue Biji like
so.
And then what we're going to do is we're going to grab this button here.
OK we're going to call this power.
And like so.
And then this right here the one that holds all these cool clouds and stuff we're going to make an outlet
for and let's call this the let's call this the cloud Holder.
OK it's holding the clouds and all the other views.
OK.
There's the cloud holder.
And then what we want to do is let's go ahead and grab this rocket stream.
So what does control drag the rocket and streamlets just call this the rocket gear to that empty space
there.
So the rocket and we don't need to grab the orange but we do need the labels here.
And I'll tell you why in a second.
So I want to control drag from the hustle mode label drag it here we're going to call this hustle Elby
for label.
And then again control drag from the on button like so and we're going to call this on label and again
all we're doing is connecting user interface elements to the code so we can do things with them.
OK.
This is core iOS development features which you'll be using everyday as I was to Bellaver.
OK so what do we want to have happen.
Well when that power button is selected.
OK.
What we want to do is have all these things become visible and have the power buttons become invisible.
OK.
No big deal it's it's fairly simple actually so all we need to do is create a function here that's going
to allow us to receive an action when an event happens and how do you do that is you go to your dark
blue but excuse me your power button here on the left hand side control drag over into your code and
a Instead of outlet change it to an action.
OK.
And we're going to call this power button pressed and just press enter until you have a function here
that would be called whenever that button is pressed.
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
background element so let's go ahead and say we want to say cloud Holder is hidden equals false.
OK.
And we also want to do is we want to say the dark blue B.G. is hidden equals true.
We want to hide that and we want to hide the power button.
Right so power button up his hidden equals true like so.
And let's just do a little more clean up in Interface Builder for now so let's close the assistant editor
by clicking these little lines here the standard editor.
OK.
And what I want to do is by default the cloud Holder will be hidden.
So let's open up the right hand side here.
And I also want these hustle mode labels to be is hidden so slick the hustle mode label and the on label
and go ahead and select hit and so scroll down here and select hit and on those so those will be hidden
by default.
And then the cloud holder itself will be hidden by default like so.
OK.
Because we don't want those showing at first.
And make sure that the cloud Holder is above the dark blue background and power button.
So it appears on top of it it doesn't matter too much but at least for visual sake it looks.
That's how we want it here.
And that's all looking good.
So when we press the power button this the screen will appear and the other one the old one will hide.
So that's looking great.
So let's go straight to our code now.
Open up the left hand side.
Go to the view controller and we're going to write some code.
So again what we want to have happen is we want when that power button is pressed we want the rocket
to shoot up into the sky and play a really cool sound effect.
And we want to turn the hustle mode ready to take this.
I was 11 course and work our butts off so you know we can do great and amazing things.
So first things first is in order to play audio.
We're going to need to import a framework that allows us to play audio.
So type an import at the top here avi foundation that allows us to play some music or some sounds.
In our case just a single sound.
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
a variable called Player AB audio player and put an exclamation point at the end.
This is called an implicitly unwrapped optional but you don't need to worry about that right.
Right now you'll learn that later.
OK.
And what we're going to do here is in the view did load.
Ok this is a function that is the starting point of your of your code.
When the screen first LOTES and so this is where you can initialize things.
And what we're going to do is we're going to find this file this way File here in our documents directory
and then we're going to load it into the player.
OK so we're going to create a constant here code let path equals bundle that main path and it's say
for resource
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
so say but they're so bundled up path and then for resource.
And so what we're doing here is we're grabbing the file OK and it's yelling at us with a yellow warning
because we're not using this yet.
And now we're going to do is create a real iOS works with your rules for it's like local file system.
So same as it might grab you or from the Internet.
And this is going to save file.
Well actually you can see it right here.
If I do the parentheses follow your own path.
Now we're just going to pass in the path that we just created here.
So the path was a string and now we're converting it to a u r l Hanigan you don't have to understand
all this just yet you'll learn all about this later.
We're going to do.
We're going to try and load our player and since this could possibly fail we're going to do a due and
catch statement here.
Player equals try AB audio player contents of you are real and we're going to pass in the L and then
we're going to say player not prepare to play.
Let's get it ready to play.
And if this youra was wrong it didn't work we could get an air so we're just going to catch the air
okay.
We're just catching the air here and we're just going to print it in case there was some type of problem.
Again you don't need to worry about all of this.
The important thing to understand is that we're grabbing the file here and we're loading it into the
player.
And because it can fail we have this do catch state and that will catch errors and problems again.
You'll learn all about this later on.
Let's just keep moving on and forward here.
This is just the very first lesson.
So when the power Bun's breasts we're going to hope.
We're going to show the cloud holder and then what we're going to do is we're going to hide the blue
background the dark blue background and the power button.
And now we want to animate the rocket up into the clouds.
OK.
So to make an animation in Iowa s we can use a simple UI view animation and we want to do that one right
here with animations and a completion handler.
So with duration let's set 2.3 seconds and press tab to go to animations and then press enter delete
that thing that says code and then press tab again and press enter enter and type in finished.
Here in the parentheses it's a boolean and we're going to get rid of this code right here.
So auto populated all this stuff for us.
And if it didn't work or you press the wrong key just copy it like I have it here.
Exactly.
And so what's going to happen is we're going to say hey we want to animate this rocket to a certain
position over 2.3 seconds so we're going to say self dot rocket.
OK.
Frame equals C.G. wrecked.
And where do we want it to go.
Well we're going to set an exposition of why position and a width and height so the x is from left to
right and the wise up and down again you don't have to completely understand all this just now just
follow along and you'll learn all about frames and bounds and positions and all this great stuff later
on.
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
the top.
We won't make it go all the way to the top and the width.
Let's go look at the with a click the main storyboard.
OK click your rocket and then click the ruler over here.
And so with this 375 and the height is 402.
So what we're going to do is we're going to say with is going to be 375 in height is two.
And so what we're saying is over 2.3 seconds let's move the rocket to this position and we're just keeping
the same height and the height and width on this.
OK.
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
labels and stuff.
OK.
For the hustle Modan so self dot hustle label that is hidden not highlighted is hidden equals false
and then self dot on that label that is hit and equals false.
OK.
And then the last thing we want to do is actually just get our cool sound effect to play and I need
to do is type in player play above this view that animate.
OK.
So we've done a lot here and it may be a lot to take in but it's not.
It's not so bad.
What we've done is in Iowa.
You can drag interface elements to your code like so.
And that's using the IBL is all we've done is we've said hey we're making a connection between user
interface and code.
So your code community built them so we've grabbed the buttons in the holder and the rockets and all
those things that we created then we created a player that actually played music.
We went and got the path for the file the sound file the wave file here and we've loaded it into the
player contents of your L into the player.
And when we were preparing the audio player to actually play OK.
Then when the power buttons plus pressed on the main screen we're going to hide the power button.
We're going to hide the dark blue background and we're going to show the clouds in the rocket and all
that on the screen.
And then we're going to play the sound effect.
And while the sound of explain we're going to move the rocket up over 2.3 seconds high into the sky.
And then when that's done we're going to show the hustle labels on.
So if this all worked out as expected we haven't run our code at all.
Then it'll look great.
So I'm going to change this to an iPhone 7.
OK.
And then we're going to run and see what happens.
Here is our simulator.
It's open.
And if it's too large or too small you can hold down command first plus one or two or three and it will
change the size of the simulator for you.
OK.
OK our screen is loaded.
And so if we click this button hopefully it all works out.
Let's go ahead and try
that's pretty cool actually.
We have a problem though.
We have a bug right.
So our rocket ship is too high in the sky.
So we have to debug what happened here.
OK this is called debugging when you have a problem and you need to solve it.
So what happened here.
Well it's a little bit too high.
So all we need to do is probably make its position a little bit lower from the top.
So why at zero is here at the top and so 20 down is not enough we probably need to make it like 100
from the top.
So let's give that a shot on the way.
Type in 100.
Save it and then let's run it again.
Here we go.
Click it.
What hustle mode on.
It's still not quite enough.
I'm going to say 140 we're just making it look perfect here.
What.
There we go.
So congratulations you built your very first iOS app and you've actually done a lot.
OK what did we do here in 20 minutes so you built your first it happened 20 minutes that's pretty fantastic
and that's with me talking if you were approached to vote and you could have built this probably in
five minutes.
So what we've done here is we created interface elements on the screen so you could reference the controls
and hide them and show them.
And then we created an action right here that basically receives events when you press a button.
And we did that from the power button.
OK.
And then what we also did was we made it so when the action is pressed we hide the old elements on the
screen and we show the new ones and then we play an animation of the rocket going up into the sky and
astounded that all at the same time and when it gets to the top we show these labels here and we do
our very own animation which is really cool really really cool stuff.
So just for fun let's play this one more time.
And then you can give yourself a pat on the back and call yourself an official iOS developer.
So congratulations you're an Iowa developer in training at least.
And there's so much more to learn.
So let's go ahead and get started moving forward.
Show this your friends and family and this is really cool stuff.
So Mark Price here at Dove slopes dot com.
Moving on and for.