This what's up everyone.
Mark I sure hope so.
Doug Hoffman welcome to the wonderful world of Aiwass development.
And in this exciting video 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 rock it's going to animate 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 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 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 selected.
And make sure add to target is selected as well.
Perfect.
So now we've got our code and all we need to do now are our assets and all we need to do now is go into
the main story board here and we're going 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 and 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 but 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
iconv selected here the attributes and inspector and take off the word button.
And instead what we're going to do is we're going to set an image on this button.
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.
So what I'm going to do is at the bottom right here I'm going to type in UI you like so and you can
see this view one.
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 from Mokka 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.
But 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.
Make it a little brighter.
There we 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
or 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 as 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's 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 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 with 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 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 the 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 said 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 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 click the center button the center of the text and we want it to be white
of course because that's what it calls for so clicking on a 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.
There we go and let's make it a lot bigger Hazumu and 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 d to copy this label and make a new one I make this even bigger
instead of Hazm mode.
This one is 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 that up 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 Hosam 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 I.V. outlets we're going to connect to the
user interface to the code.
So real quick I'm going to close the left hand side.
We'll 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 viewer I hear 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 in stream.
So what does control drag the rocket and streamlets just call this the rocket gear to the empty space
there.
So the rocket and we don't need to grab the orange over 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 and 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 creative 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
instead of outlet change it to an action.
OK.
And we're going to call this power button pressed and just press enter and see if 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 elements so let's go ahead and say we want to say Klout Holder is hidden equals false.
OK.
And we also want to do is we want to say the dark blue Biji is hidden equals true.
We want to hide that and we want to hide the power button right.
So power button 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 hidden so slick the hustle mode level and the on level
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 hit 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 press we want the rocket to shoot
up into the sky and play a really cool sound effect.
And we want to turn the motor 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 and 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 called Let path equals bundle does mean path.
Let's say for resource
like so or to say hustle dash on that's the name of the file of type and that's going to be wave like
so save it.
So bundled up main path and then for resource.
And so what we're doing here is we're grabbing the file OK.
And it's 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 else for it's like local file system.
So same as it might grab you are all from the Internet.
And this is going to save the file.
Well actually you can see it right here.
If I do the parentheses follow your own path and 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 Hennigan you don't have to understand
all this just yet.
You'll learn all about this later.
We're going to say 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 a Wii audio player contents of you are ill 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 Yoro was wrong it didn't work we could get an air so we're just going to catch the air.
OK.
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 the 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
the 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.
Frame equals C-g rect.
And where do we want it to go.
Well we're going to see 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 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 high is 402.
So what we're going to do is we're going to say with is going to be 375.
And height is 4.
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 mode on so self hustle label that is hidden not highlighted is hidden equals false and
then self dot on that label that is hidden 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.
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 can manipulate 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 button 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 berths 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 y 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.
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've built your first happened 20 minutes that's pretty fantastic
and that's with me talking if you're a pro iOS tablet 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 IB action right here that basically receives events when you press a button.
And we did that from the power button.
OK.
And then 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 sound
of that.
All the same time and when it gets to the top we show these labels here and when 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.
Boom.
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 us your friends and family and this is really cool stuff.
So Mark Price here at Dove slopes dot com.
Moving on and for.