Hey what's up everyone back in the saddle again.
Mark Price you're at DEF slopes dot com and what we're going to do with our app is we're going to have
a non consumable in that purchase where you can remove advertisements from an app.
And basically when a user actually deletes the apple Iran then you can come back in they can click a
button to restore in-app purchases and it will remove those ads again without having to pay again.
So there's quite a bit of work for those very small things but I wish I had to do all of that.
And what we're also going to do is we're going to cover some of the bases like you know if you did have
ads and you wanted to remove it how do you handle the logic how do you show or not show advertisements
things like that.
And so not only will you be learning how to work with in-app purchases but you're also going to learn
how to integrate Google AdMob the ad framework and that framework for iOS which is really cool.
So first things first is I'm going to click the assets folder and I'm going to drag all the assets for
the project into this folder that I have here in other folder.
OK.
Easy peasy.
So that's looking good.
The next thing I want to do is I want to go get the Google AdMob.
So we're just going to go to Google and type in Google ad iOS SDK and they've got a link for it right
here.
Now you can implement Google AdMob with cocoa pods.
We're not going to do that because we don't have cocoa pod in this project and it's only one framework
and it's really easy to implement.
So instead I'm going to do is I'm going to click this Google mobile app SDK iOS zip
it's 12 megabytes or so
and there it is downloaded here.
Just click it to unwrap it and move this off the screen for now.
I'm not closing it where I need to reference in just a moment here.
And let's go find our framework.
And there it is Google mobile ads for homework and just drag it into your project somewhere.
Copy items if needed should be selected and add to targets as well.
Very good.
So let's finish getting the framework set up so what we're going to do is we're going to go to our app
delegate.
OK.
And you know actually let's put the framework here and actually in the frameworks folder there we go.
For some reason I added it here both places let's get rid of this one.
OK.
We have it here in our project which is great.
And in the app delegate well actually let's go over here to the guide here so you can so you can see
how to get started click the get started button and it's going to give you some instructions on how
to initialize it with swift or Objective-C and you can see right here import Google mobile ads.
OK.
So let's do that here.
In court Google mobile ads and build your project.
Notice how it has no such module.
Google Mobile Ads found and this is a very common problem and if you bring new frameworks into your
project you have to specify where your project can find them and it's not that big of a deal.
We're just going to go over here to our project settings.
The blue icon here go to build settings and type in the word framework there in the search to make sure
all is selected and you're going to see a search paths heading here.
And it says framework search paths DoubleClick that click the plus sign and do dollar sign parentheses
project underscore Diyar and closing parentheses all in caps there.
This is going to find your project directory and it is going to search in there for any frameworks you
might have and press enter.
OK.
I'm going to command shift K to clean the project and now if I build it the air should be gone.
It it looks like it is so that's good enough.
So what we're going to do here is we are going to finish watching with options.
We're going to say the mobile ads configure and it's looking for an application I.D. Now let's go over
here to the inter-webs Google ad mob sign up.
So we're not going to go through the sign up process of Google ads you can do that on your own but if
you need an advertiser I.D. from Google ads go here and sign up for free and they will give you an I.D.
and you can add it to your app.
We're going to use the test I.D. that they've given us here in this little blue box here that you can
use for testing purposes.
So I'm going to copy from the CIA all the way to the one 1 Comanche and I'm going to just paste that
over here.
Inside the application ID parameter.
OK so Google Maps will configure the account which is exactly what we need to do to get this up and
running so technically in a few easy steps you have Google Mobile Ads added to your project which is
pretty awesome.
So what I want to do now is I want to just get some simple user interface on the screen so we can actually
start working with the Google AdMob and I'll show you some mockups of kind of an app that we're going
to build here.
So let me grab the mockups.
Here's the mockups there's extra features and things on here that we aren't going to do but we just
created some fully scalable mockups here and basically let's pretend that we have an app you know.
It doesn't really matter what kind of app it is but you know this is an app where you can watch videos
about something some topic or subject some of them are subscription only we're not covering the subscriptions.
But you could you can kind of have a few different types in our purchases and in this case here we've
got the advertisements there at the bottom.
And we don't want to see the ads and so you can remove the ads and make a purchase and they'll go away
for ever.
And so let's let's just do that here let's build out this user interface and let me just give you one
tip of advice.
So there's different types of motivations that people that come upon people so they make purchases OK
whether it's full of joy from this experience so I want to spend money or whether it's I want to get
ahead or there's another one called the frustration purchase and a frustration purpose is most common
in things like advertisements.
OK were you just really want them gone so you're frustrated so you remove them.
The only way frustration purchases can work is if your apps are amazing.
Meaning you are providing such amazing content in an app that they have to that they have to get rid
of the ads.
So they're frustrated but then they'll be happy after.
And this is a perfect example of a frustration purchase is YouTube read.
Ok YouTube read if you don't have YouTube read you have to watch advertisements and pretty much every
video now and sometimes more more than one advertisement and you love YouTube you love the content they
have but you are just sick and tired of ads.
And so what you do is you get to YouTube read subscription and then it gets rid of the ads and so you've
made a frustration purpose purchase.
But then you're happy you're relieved and so that's what we're doing here is we're implementing a frustration
purchase so your app has to be really good if you're spamming your user you won't make money.
I promise you.
So you have to do ads very carefully delicately.
All right enough soapbox on marketing though.
Let's go ahead and go to our main story board here.
And let's just set up a few little things.
OK.
So I'm going to set up a view I view on the top to match kind of our mockup.
In fact I'll pull the mockup open here so we can so we can all see it here.
I'm going to close this left hand side here like so and let's just drag this over here and that's looking
real nice.
OK.
So again we're just going to quickly build out some simple user interface.
It's nothing nothing amazing.
It's not about the UI in this particular app.
Some cynics and constraints here.
Top left and right.
And let's just give it a fixed height like so.
OK.
And then what I'm going to do is put an image on here like so and I will pin this all four corners at
zero.
Like so and then I would like to make sure on this image clip to bounce is checked.
So the image doesn't bleed.
And then I want to find that computer icon.
Maybe it's the video thumb now.
No it is the background image.
And then let's change just from skelter fill to Aspect feel OK.
Yeah and if I didn't take off click and see how it bleeds like that which we don't want so that's ready.
And just for fun let's set up a label up here.
Like so.
And I want to make this bigger
and we're going to call this daily I'm going to align it to the right.
And I would change the font to white and then what I'm gonna do is duplicate this like so.
And we're going to call this dose and the dose we're going to make a bold color like so.
And then what I want to do is holding shifts like both of these and put them in a stack you like so
and I open up the left hand side here so I can see my stacked view because I want to move it in the
center and up like so.
And I think the text is too small.
So I get bigger 25 and 25.
It's a great thing about stack views is it will automatically justice for us still like the stacked
view again.
And that's about right.
So what I want to do here is pin this to the top like so and we'll go ahead and add one constraint there
and then let's go ahead and give it a horizontal in any container constraint.
So it's right there in the center.
OK.
And that's looking good to me there.
Cool.
Very very cool.
The next thing I want to do is get these advertisements here.
OK.
So let's in fact.
Well let's let's fake let's fake this table view here for a minute let's look at a few images here let's
pretend we're building a table view.
You've done this before.
No big deal.
Just put a few in here like so I'll command the command D.
Yeah that works good enough for me.
So put it there like so and I'm going to give it a fixed height as well 138 and then we'll do the same
here.
So I'll change the top to 0.
And we're going to fix 138.
And then what we'll do here is pin this to the top 0 0 6.
One thirty eight like so pretty cool.
And then we'll do is we'll just set the image here to the video thumbnail
and do on all of these here video from now video.
Now let's skel to feel clip to bounce scale to feel that bounce on this one
aspect feels what I meant to say.
There we go and abounds in that aspect feel and click to bounce.
All right.
And that's looking OK there.
So you know here's our table view with some items in it.
It's no big deal.
Those are all set there.
Now let's get our ad here at the bottom.
How do we do that.
How do we put an advertisement here.
Well it's not as hard as you would think.
So let's go back over to our Google Docs and see what they say.
So we want to do a banner ad
end with the banner ad they have a specific size that's 320 by 50.
You can make yours is why did you want the height is most important here.
So what we're going to do is we're going to go ahead and just put a view here so it can hold the ad
and the button let's put it here at the bottom like so
and like so.
OK.
And let's just pinnate to the bottom the left the right and the top zero from the top.
OK.
And just so I can see what's going on.
I want to make this an orange color.
OK.
And then what we're going to do is we're going to stick the banner ad there.
So we just put another view like so.
And remember the height is 50.
That's the important thing.
So there's our banner and let's just put it right here.
Here's our Google Ads banner.
All right.
And what we're going to do is we're going to change the class name here in the identity inspector to
g a d banner view it's a special Google Ads view that is available to us because we imported the Google
framework the Google AdMob framework here.
OK.
So there's our ad view.
And then what I want to do is let's change the color on this to something ugly too so we know that it's
an ad not green because our button is going to be green let's do blue.
OK.
And then lastly let's put a button here at the bottom like so
and we'll just make it fill the whole space.
No big deal.
Nice and pretty.
A big fat button.
And let's take off the word button and ours is going to say remove ads and we'll do it in a nice bold
font style and we'll change it to blue or from blue to white.
I mean and then the background of this button is going to be any type of green color that looks like
a picture.
Now the pictures are a little bit smaller which is fine.
I think we'll just leave it as is.
And let's set some constraints now on this so the banner ad we're going to say top left right and give
it a fixed height like so.
And then we're going to 49.
Obviously this is like pointing up to here so we need to move it down a little bit and then redo the
constraint.
There we go.
We're going to say zero from the top zero from the left zero from the rock bottom and zero from the
right.
Not all that should do it for us here.
Perfect perfect perfect.
So there's our view.
OK.
And savor this here.
And I guess let's see what else we need to do probably just initialize the advertisement and see just
make sure that it's working.
So let's do that now.
Let's go to our viewer controller here.
And how do we get an advertisement to work.
Well let's go look at the documentation here.
OK so we've got an ad unit and we've got to set the view controller and then we have to load the ad.
So banner view we don't have access to X. We didn't make an IB outlet so let's do that.
So what we're going to do is we're just going to copy this code here.
And then The View did load.
What does pace that there's not going to work because we don't have the banner view out there yet.
We can make it so I've clicked my storyboard.
I'm opening the assistant editor and what we're going to do is this blue banner view we're going to
control drag over here and I beat it and we're going to call it banner view.
OK.
Let's close the assistant editor go back to The View Controller.
And is saying it can't find it's undeclared.
We need to import the Google Mobile Ads like so and there we go.
So that looks good.
We've got that in there.
And let's go ahead and look at the next step is simply to load a request.
No big deal no big deal.
And that looks great.
So we've initialized it with a unit ID so when you're in your AdMob you need to create a unit for your
ad.
OK.
When you're in your account and you use your I.D. here we're using just a test I.D. and the view controller
that's this controller is the one that's managing it.
And then we just load a request to get an ad someone to run this on the simulator and just see if we
get an advertisement of some kind.
And we get an error.
Let's see what's going on.
Oh there's one more thing that we need to do that I forgot about.
Go to your project settings.
Daily dose.
OK.
And let's type in the word bit code and your build settings.
We got to turn it off some frameworks are not compatible with the code.
It's a command shift.
And then let's run it again.
So we're still getting the air Let's check one more thing do some debugging here.
Let's go to our build phases you still need to that big coding we just did.
Let's go to our built phases link library link biner with library our frameworks not here.
So in your build phases the Google ads frameworks and I just drag it over command shift OK to clean
and let's run it again.
OK.
And our app is running.
And clearly we are displaying a 320 by 50 AD from AD mob as you can see right here.
Pretty cool.
So officially you've learnt how to implement Google at AdMob which is awesome.
You can show ads in your app now and make money which is cool.
This is really the first step.
We've got more to do such as the purchase and then moving the ad and then making sure that saves and
the defaults etc etc..
So let's go ahead and call this video done make great progress here.
Marc price it slopes dot.
Moving on and forward.