What's up guys I'm Jacob Bledsoe with Debb slopes dot com and we're just going to dive straight into
it today.
What we're going to do in this lesson is get the project the X code project all set up get make sure
get is all set up I'll show you how to set up your good ignore files so you don't push things up into
your get repo that you don't really need and can cause problems if more than one person uses it.
So first things first is we have this awesome asset folder that Evan made for us so we can open that
up and we have all of our assets inside like the background and all the buttons that are going on this
app the font all that good stuff.
But most importantly we have these design docs so we're going to open those up.
And this is let's get to the home screen so here's what we'll start on will start on getting the project
open.
And as you can see it's a it's a tab view controller so we're going to go ahead and create a tab view
project.
And in this lesson we're going to work on getting this Visi all set up.
Probably everything except for this previous run overlay or you view that's here will get the map the
map view that that zoom in button that's the center location button the start run all that stuff will
get it all set up and let's go ahead and just dive in.
I'm going to leave this off to the side so we can reference it.
Let me just put it on a different desk.
All right cool.
So now let's just go ahead and make a new X code project file new projects.
Sorry guys I'm dragging it over right now.
So I just did a file file new project.
Right.
And we could do single view application but we'll let X go do some work for us and do a tab the application.
OK.
And go ahead and hit next.
And you guys can call this whatever you want.
I'm going to call it treads
since it's our running nap and we don't need to include unit tests for this.
So go ahead and hit next.
And let's go ahead and create a get repo.
That's cool with me.
And then save it to where ever you want.
I'm going to save it in my courses folder right here will be good.
And then create get.
I don't know why that came on checked probably because I changed directories and create.
OK.
So we have our project here and it set it up with two view controllers and probably a tab view.
Yep.
So here's our tab view controller and we'll build to get our first one all set up in here.
And the second one here.
But first things first we need to make a good ignore file and the importance of this are you don't want
to pass in like your pods and all that stuff when you're pushing your repo because first of all it'll
make your repo a lot larger than it needs to be.
And usually like hers point your project can just do a pot install anyways.
So let's go ahead and go into our project folder.
So mine is in my documents of slopes courses and it is called treads and there I am.
And you can see that I'm in my master branch and if you want to see that you won't have the same UI
as I do but you can do a get branch and I'll show you all that.
So being inside the directory.
We can go ahead and just do a touch that gets ignore just like that and that will create that file for
us.
So now if we go over and go to that directory
courses and then treads and you'll see our get ignored.
Now with the dot in front of it it makes it a hidden file so if you can't see this file right now all
you have to do is click command shift period and that will hide hidden files or show them.
And then once you see it go ahead and say open with text editor and we are going to.
So what I like to do like what are good files to put in to get ignore.
Obviously we want like our Pod's directory.
We want that ignored.
But I have an easier way.
Like there's a lot of documentation out there for like a standard X code project.
So if you just go ahead and google like a X code swift good ignore file you'll stumble upon Probably
this repository.
And they have a list of everything right here that we need.
It will even ignore like playgrounds and build build build folder and then here Pod's is commented out.
But we're going to include pods and there's a link here that you can check out and it kind of explains
why some people don't think you should get ignore pods and what other people think it's important.
We're going to include it.
But so I'm just going to copy and paste this all the way up.
And when you see the hash tag or the yeah the hash tag in front of it that means it's commented out.
Go back over to our text file here and paste it and then make sure you delete the hash tag in front
of Pod's at the bottom and then everything else looks good.
Right.
And go ahead and save this file.
Close out.
And we're good and I'm going to just rehire those because I don't like seeing hand files that really
bothers me.
And now our get repots all set up so we can do let's see if it sees it there.
Yeah.
So we can do a get ad get commit Dasch am added ignore file done and now let's create a branch.
So and as I teach I'm going to do like Lesson One lesson to Lesson Three So when you download my repo
you can actually check out that branch and see all the code that was done in that lesson.
So I'm going to go ahead and say check out Dasch be Lesson one.
And now if you do a get branch you will see that you are in less than one and that was created off the
master branch.
And we'll be doing it commit throughout the course.
OK now that our projects all set up we can go ahead and get moving.
And what I like to do first now is go ahead and get all of our assets in and we have our assets in this
folder and if we open them up you're going to see we have all the DPN GS but we also have the Monserrat
font.
And so we're going to want to add that into our project too.
So first things first let's make a couple new folders.
Let's go ahead and make a Resources folder.
Whoops.
I have to be clicked on X code.
Let's make a resource folder.
And that's where we'll put our font.
And then let's also make a extension's folder
and we're going to be doing a lot of cool stuff with extensions in this lesson.
And let's make a utility folder if I can spell you till date is
and then a control or folder
view folder
and lastly a model folder and that gets that all ready for us for the whole project and now we can just
go ahead and inside the resources folder Let's just grab all of our fonts here like so and drag those
in.
And copy items if needed is important and it should be added to the treads target.
I'm not sure why it wasn't right.
So that's that all of our fonts are added and they should be able to be found so if we just go ahead
and go to custom and let's pull down and look for it.
And there it is.
So ads it itself which is awesome.
All right.
Now we need to add all of our assets are images and everything so open.
Click on the assets dot X casettes on the indie forget what is called in the project navigator and you'll
see first and second.
And obviously we don't need those so let's delete those.
Why would we want those are it and go back to our assets folder and we're going to want to just drag
everything in.
Inside the assets folder except for our font so I selected all and then command click to select the
font folder and go ahead and just drag these all in.
All right cool so if you click on them one at a time you'll see we have our 1 x 2 x and 3 x of the background
the center NAV the close button and run button and then and run out line pause resume.
We've got everything.
So we are good to go.
Right.
So now let's go back to our main that storyboard and we're going to concentrate on the first view controller
right now.
That is the goal of this lesson and that is this one.
So we need to add a UI image for the background that needs to cover everything.
We also need a map view right here.
We need the start run button we need start running text.
We also need to change the tab the tab bar icons and we need a run icon here and then also the center
now of button and we'll worry about this UI view.
The previous run one in a later in a later one and all later later lesson.
OK so we can just go ahead and delete everything in this view control or we don't need this label or
this label.
All right.
And now first things first I guess we could just go ahead and set up the bar item here and it's looking
for first we don't want that we're going to call this one the run and we are looking for our tab bar
run great icon.
And there we go.
Now you see it down there.
Really cool.
OK.
So now we need to let's look back at this image.
We need that UI image view for the whole background.
So let's go ahead and type and you I image here drag that on and I'm just going to make this a little
bigger so it knows we don't want it to stop at margins.
Okay perfect.
And go ahead.
And on the add new constraints we're going to pin it 0 0 0 to every side.
Perfect.
And now up here if you click on the attributes inspector we're going to select the image we want and
that's called Biji.
And let's just go ahead and make sure it's aspect.
I believe we're going to want aspect fit.
Now we can do aspect fill as the background just in case I don't know it will look like on other screens
so that's good.
So this background is done and now we need our map view.
And then a run label.
So let's go ahead and put the map view on there.
There we go.
Drag that on.
And now that goes all the way to the edge here.
And let's just look at the image.
So it almost.
So our label looks like it's probably like I don't know
maybe we'll do like 10 10 points off the top just to see and then we'll see how it looks.
And then I would say the map view is like eight or 10 points off of that label so this probably is a
good spot.
And then we need to just leave enough room for our button buttons so this map vs that come all the way
down here.
And I'm not going to put any constraints on it yet because I want to get our other labels.
And so let's go ahead and do a label drag that up here.
Right.
And this is going to say run and let's change the font.
Evan gets really mad at you if you don't if you use system
and Monserrat.
There we go.
And I think regular is ok I'll just drag that bigger.
We need a white and let's probably center it inside the text box.
And maybe a little bigger since that's a title we'll do 18 for now just to see how that looks.
All right.
And now we need the button.
So let's go ahead and search for button drag that onto the view controller.
And over here in the attribute inspector delete the delete button.
Title we're not going to want one.
And then in the image let's go ahead and look for the start run button.
Start Run button.
There we go.
All right cool.
And now we just need start running.
We need to start running label underneath that.
So let's find our label actually I'm going to copy and paste this one since we already changed the font
and just drag this down here.
And this needs to say start running.
All right.
And obviously we got we have to change the font size and the font size is wider than the
barely just barely wider so let's see what are we at 12.
12 is probably OK.
I always make sure also that it doesn't say fixed because on smaller screens you want the font to scale
down so I always click minimum font size and just always keep it at like 9 or you know whatever it defaults
to.
It just helps with the auto layout stuff a little more.
All right so I'm going to just move this button up a little this guy.
All right.
So now we should we should pin everything and I'm going to start with pinning this run label.
I want to make sure it's center horizontally center in container and add that guy and let's go ahead
and pin this to the top and this is eight points I think that's OK for now.
It looks funny.
We'll change it later.
OK.
Now click on the map view and let's go ahead and pin this one.
We're going to pin it 0 to the right and zero to the left and 22 points from that level.
Let's just make it even 20 and then I don't want to
pin the bottom yet.
We're going to get the button and play.
So we want.
So we're going to want the map view to shrink with the phone size and not push the button down.
So I'm going to go ahead and make sure this start run in label is horizontally center in the container
and we can pin this one off the bottom.
Eight points is probably great.
And then this button.
We also want horizontally center in container and I am going to pin this
off the start running level.
I think we want it closer than this.
Let's try 12 pull that down.
And now I'm also going to pin the map view I'm just control drag in control from the map view once I
already selected the map view.
And then I control drag to the button and say vertical spacing.
All right.
I think we were good.
We've done everything we need to do for this.
We see there is one thing I don't want this controller to be named first view controller.
So let's go ahead and just call this begin run Visi and I'm just going to rename it right here.
Begin run VC you guys can name anything you want.
Just make sure the name I like to make sure it's changed in the comments.
That doesn't matter but it looks nicer.
And then make sure whatever your class name is the file name is the same thing and then go back to the
main storyboard.
And we're going to have to go to the identity inspector and the class is still looking for a first view
controller.
Go ahead and select begin run.
All right.
And let's see let's look at our designs so we need that center navigation button still.
So we need another button.
Go ahead and just drag it out here and go to the attributes Inspektor delete the button label and then
for image we want the center now button.
All right cool.
And then let's move that looks about good and all we're going to do here is pinnate
six to the right.
And this is automatically pinning it all the way down here and I don't want that.
So just add the six here and then I'm going to do a controlled drag to the map view and say vertical
space.
And there we go.
Now it's just it's going from the top to the bottom which is kind of weird but we want it to always
be within the map view so make sure you pin it to the bottom of the map view and don't pin it to the
bottom of the view controller.
OK.
And since we're all finished up here I think we need to do a get commit so pull open your command prompt
or your terminal.
And what do I get.
Add period and then I commit Dasch am and we will call this initial project set up and start run.
VC UI done.
And there we go.
It's all committed.
So one thing I want you guys to try to do without starting the next lesson is get the next the log VC
all set up without me.
And then you guys can watch if you can't do it or you can skip the whole lesson entirely.
I just want you guys to get used to looking off of design docs.
So this is the next Visi we're going to do.
And you guys should try to design it without watching the next lesson.
And then if you need help go ahead and start the next lesson.
And we'll be knocking this all out.
All right.
So I'll see you guys in the next.