This it was a good one.
Mark it definitely overstock.com and I'm super excited to teach this lesson.
This is the window shopper app and it's really the first full fledged app you're going to build.
And we're going to build it as if a professional is building an app that's going to be published on
the App Store or for company.
And so we're going to consider all the little things that need to go into an app.
And we're not going to cut any corner.
So first things first is we've got a repo for this on bitbucket and I'm just going to go ahead and clone
that.
Or rather I'm going to create an X code project and then push that up as the remote for this repo so
I'm going to go over to our X code make sure you have X cotinine open whether it's the beta or release
version if it's released and create a new X code project single view app is what we are going to do
and we're going to call this window shopper click next.
And I'm going to place it right here now in my terminal LS CD window shopper is my project and I'm going
to go ahead and get it to initialize as an empty get repository and then we're going to go ahead and
do get remote ad origin and I'm going to paste in the Eurail for the repo on bitbucket and that's looking
good and get status which is a bunch of red stuff now.
Perfect.
Get add Dash 8 add everything.
Get commit Desch em first commit.
Now what we're going to do is we're going to say get check out dash be lessons 0 1 and we're ready to
go.
So the idea behind this app is you see an item that you want to buy and you want to calculate how long
it's going to take you to work to buy that item.
So you know if your hourly wage was $10 an hour and you wanted an item that costs 100 dollars you're
going have to work 10 hours to get it.
So we want to run that math for the user and it's actually a really useful app.
All I can think of many times and I would have liked to have had an app like this so let's just go ahead
and get started and build it out.
So first thing I like to do whenever working on a project is I like to grab the assets.
OK so let's go to assets click that folder and then as you can see there's some Assa files here we're
just going to copy these or rather select them all and drag them over here.
Perfect.
OK.
There's our assets.
And so the first thing we can start off right away is just building up the user interface Sometimes
it's really hard to figure out where do I start not do I start with the data do I start with the functions
that are underneath the hood.
And if you can't think of what to do just jump on user interface because at least you should be doing
something and this is this is kind of relaxing.
Helps get your brain in the flow of the app anyway.
So here's our view controller in the main storyboard.
You know already as I'm looking at this is Buke controllers bothering me the name of it because it doesn't
represent anything.
So let's actually on this folder here let's go to a new group and we're going to call this abuse or
excuse me controller if you think why.
Why.
You see that are we going there like versus you know your interface but then the switch over there and
what I'm doing is I'm building on a project like I would really build that out as I'm developing it
as I see things that I want to fix.
I want to fix them.
OK.
So what you're seeing is Mark Price's real development experience I don't have these all listed out
and a bunch of steps.
Do this do this do this teach this teach.
No I have the app that we just built.
The teacher version of it.
And now we're going through as if I'm really building an app.
So first things first is let's drag and drop this controller controller to swift into the controller
folder.
And then once in here.
OK.
Right click the View Controller and go to rename and we're going to call this main Visi for main view
controller a save this.
Now go into my main storyboard here and we know that we're going to need an image as a background here
so I'm going to type an image here at the bottom right beside the object library and well I'm just going
to make this full screen here.
We're just going to support iPhone in this app.
We will do constraints but we're not going to support iPad.
And so all those constraints as well and what we're going to do is we're an opinion from each of the
corners here make sure that constrain the margins is off.
Click add for constraints and on the image we're going to select window shop or Biji.
And even though it's OK in the right aspect ratio right now I am going to change this to aspect.
Fill in the case that it did go to i-Pad we would want to make sure that it doesn't stretch it to fill
up in the proper aspect ratio.
So that's looking good.
Not bad.
We've got a logo here and two textfiles we got a place it's pretty small so not that many controls.
So let's go ahead and throw another image to you on here.
Put it like so and let's select the image we'll say window shopper icon.
Of course it's stretched.
So let's go to Aspect fit and then we'll just scale well eyeball it doesn't have to be perfect I'm going
to put it right about there because I know there's going to be a status bar up here or there.
OK.
Looks good to me.
And we can bring these in here slightly.
We don't need all this extra space.
There you go.
That's fine.
Ok cool.
I'm going to click the pin button here and I'm going to go ahead and give it a fixed width and height
and this should be square.
This would be my guess 60 by 60.
Yeah it looks good.
So 60 by 60 and from the height let's say 35 from the top I'm going to click Add three constraints and
then I'll click the align menu here and we will just horizontally in container.
So it's going to stay right there in the middle and looks great.
Now these are two controls.
Are you high tech svelt.
So this was typed in the word text.
You'll see a text field and text view.
Let's do the textfield one.
And what I'm going to do is change this from this rounded one to just this one with the dot dot dots
on it.
OK.
And let's move it out move it out and you know this is kind of hard to work with.
We've got some settings we can say yeah we can change the font color.
You know maybe set a background color on here.
If we look at our image here it has quite a few custom things on it.
For instance the background on here it's kind of like all white with an opacity.
And then we got some white text that centered for the placeholder and then it's got rounded corners
and stuff.
And we want this to be reusable and imagine if you wanted a textfield just like this across multiple
apps.
We wouldn't want to be setting all this stuff in Interface Builder.
And so you're going to start coming to find that writing code writing custom classes for views in code
is very important because you can reuse these.
And if you want to make them really shine you can clean them up and then put them in their own framework
or unbundle or there's many different ways of packaging.
And then you could redistribute it or maybe even make it like a cocoa pod and make it available to other
people to install in their project.
So I think we're going to need to write some custom code for this background so let's go ahead to getting
started doing that.
First let's go ahead and create a new folder or group and we're going to call this use.
Sometimes I wonder why they call it groups.
Because like like Windows or Microsoft has a patent on the word folder and the X code can't say the
word folder if there's a group.
I don't know it's really weird.
And in the views here somebody research that and get back to me.
Use new file and we're going to go ahead and do a Kokoo touch class and we want to inherit from textfield.
So let's call this currency tech Zale because we wanted to show currency.
All right.
You know because a wage is currency and item price is currency.
OK.
And so class of UI textfield that looks good.
Just click create wonderful OK I'm going to get rid of this for now.
The straw boiler boilerplate code code and what we want to do is we want to make it so it looks really
nice when you're on the app.
So we want it to have the white background etc. so what we'll do is we'll just do the Awake from NIB
function call super awake from it.
So basically when this textfield comes up from the interface builder file when the app is loaded it
will run this code.
OK.
And so we're going to use your programmatically So this can be reused.
Again we don't want to have to go into every control interface builder and then click and drag and type
stuff.
It's a lot of extra work we want it to be reusable.
And so let's do it the right way which is with code sort of say background color.
I know because I talked to a designer.
In fact I asked him was like hey man this these textfield here bro.
OK.
Like what are they what's the color and opacity and he told me Yeah these are white text.
So the pure white and they're only 25 percent opaque.
And so I know what to set it as now.
So that's why I know what we're going to put in here and what we're going to do is we are going to say
background color equals start typing the word color and you can see this color literal and you literally
all you have to do on this is click it.
And you got a color literal.
And what we're going to do is I'm going to click other we're going to set it to white and then we're
going to use that opacity to 25 percent and magically you can now set colors in here.
Isn't that pretty cool.
Let me just show you how they did it in the past you know in the past you might have to do something
like this.
You color and then you know let's say.
RGV I have to have it said you know.
Twenty five point zero divided by two fifty five point zero.
And then you'd have to do that for all these other values here.
You no longer have to do that if you just want to color all you have to do is a color literal and you
can insert it right here in the code which is trippy right.
But at runtime it knows exactly what that is so.
Very cool stuff.
X code is becoming even more visual.
Maybe one day I'll be drag and drop code that will be interesting.
So cool so we've just set the background color so it's white with a little bit of transparency.
And let's go ahead and set the radius of the corners.
We've done this in the past layered up corner radius equals five point zero.
We need to set the text alignment of the text so it's in the center instead of at the left.
OK.
And just to show you save it here.
So we have text here so if I was to say you know $13 it's over there on the left hand side and it's
black too which isn't the right color.
And then of course placeholder text important to you know wage.
And that's also a gray and that's not what we want.
So we've got to fix a few things that are there by default.
So no big deal here in the Awake from NIB function so text alignment is going to be equal to dot center
to center.
And then what we'll do is we'll say we need to set a placeholder text instead of custom color on it.
And there's no way of doing that from the standard placeholder so we have to use no matter what we have
to use code if we want to set the color on a placeholder.
That's a fact.
So what we're going to do is we're going to say if placeholder equals Neil OK so placeholder is a property
of the textfield That's why I have access to it and that's why it's purple.
So if it's nyl there's nothing in it then let's just go ahead and set it to an empty string and you'll
see why in a minute here.
But what we needed to do is initialize it with an empty string.
Otherwise we can set a color on it.
And so what we're going to do is create a variable called or constant called Place equals and this attribute
ID string.
And we want the one that has string and attributes like so and the string is going to be placeholder.
And then the attributes.
OK the attributes are going to be for ground color type color white like so or we could have also done
the color literal either way like so.
OK.
Now here's word this this checks coming into place.
So notice how on this and attribute it string.
I'm using the implicitly unwrapped optional.
Or basically I'm force.
Excuse me I'm for's unwrapping this optional so placeholder is optional.
There may be a value in that there may not be.
So if I had not set it to this empty string if it's empty this would have crashed our program because
we're forced unwrapping and optional.
So always always know that if you're going to unwrap something it has to have data in it beforehand
so this is our safety check right here.
And a lot of people will miss that if you like.
Mark where are you doing this.
That's improper practice.
It's not improper practice so long as you're initializing it like so here.
OK we also could have started and another variable name and then ran that instead.
But this is just fine here.
OK.
So here's our attribute of string and what we're doing is we're setting the property foreground color
on it so the foreground color is what's going to make it white OK.
There's many different things you can do with attribute of strings you can do you know declaration of
there's an underline or strikethrough on it.
Basically you can do all kinds of cool all the cool stuff you see with text on the Internet like with
web development you can do here in Iowa with attributes strings which has a little bit more features
than the regular standard string can.
And then what we're going to do is we're going to attribute a placeholder.
This is a property of the UI textfield people's play so we're going to set it to the attribute of string
we just created.
OK.
So again this is if this is set here it will override the regular placeholder.
OK.
It will overwrite it and it will use this one instead to read a placeholder.
All right.
And then lastly let's set the text color.
This is a property of the UI textfield or just setting the standard colors.
We set the placeholder color but with the regular text color it does have a property and all we have
to do is do that color literal literal again.
So if you're of equal sign or go color literal and white White's defaults that works great for us.
OK.
So this all looks good here.
You know that our changes aren't noticed and are reasonable here but let's see if they actually are
noticeable when we run it.
So the first thing we need to do is select our textfield here and change the class to a currency textfield.
All right.
And then I've changed it to an iPhone 7 simulator and I'm just going to run it it's yelling at us here
because this was supposed to be a space just adding a space character.
So if it's Neil let's add a space character just so it can run because they reduce the real use cases
it's actually going to have a placeholder in it.
So there we go.
So it's up and running just fine.
It looks great actually it looks just like we would expect it to look.
We should probably put some text in there to see just make sure everything is doing what it supposed
to do and maybe let's just write one quick refactor.
So this works and we're adding a space in here but we can I think write some a little bit better code.
And so what we can do here let's close this here.
Want to do is basically check if placeholders Neal and if it is then in any case we will just use a
temporary variable to set an attribute string like so.
So what we'll do is we'll say if let us say p equals say placeholder like so we'll do an if statement
here and we'll do it we will commence X command paste here OK.
And instead of saying placeholder exclamation point now we'll say p ok because it will never even get
in here.
If if it's.
And now we can actually get rid is what we don't even have to insert the empty space.
And I think this is a little bit more elegant solution.
What we did was we wrote some code.
We tested it worked but then we thought of a better solution and we refactored it.
And this is a very common practice in Iowa development.
So if let p.
So this is the text.
OK.
Equals placeholder.
So if it's Neil none of this will run but if it's not Neal then we'll go ahead and make it and attribute
it string like so.
So let's go out and run this again and make sure it's doing what it's supposed to be doing.
OK perfect.
It's doing exactly what we want.
No crashes.
We've written a better application now.
So one more thing I want to do is go to the main storyboard here and let's just Center this like so
and then what I want is to put some text in it just to make sure it's all.
It all looks correctly so or at least placeholder text so what did the what did the market image say.
I said your hourly wage so placeholder text will say your hourly wage.
OK.
Notice here it's on the left hand side but at runtime it should be in the center
perfect.
So a couple of things.
This is really annoying right.
You probably seen this a lot before but at runtime it looks great.
But here in Interface Builder it looks awful.
And if you're working an interface builder a lot it really stinks that you have to pretend in your mind
what it's going to look like.
And so what I'm going to do in the next video is I'm going to blow your mind.
I'm going to show you how you can get Interface Builder looking exactly like it looks at runtime.
So you never get to be like oh what's it going to look like we're doing position.
No.
We'll make it look good.
So that's it for now.
Stay tuned for the exciting next episode Mark Price here at Def slopes dot com.
So you assume.