[Music]
sorry that was yeah we put my background
music in the Pokedex app that I'll be
showing you guys today finally finish it
up though good grief that's loud you
turn down the volume on my computer but
what's up guys first night here you're
watching an identity episode 19 now if
you just came for the firebase and geo
fire tutorial which by the way is gonna
be like at least a two-part tutorial
where we create a poky finder slash
pokey radar app where in this tutorial
we're going to kind of go for the map
aspect of things and then setting up
firebase and geo fire and then in the
future videos of identity ranee we're
gonna finish the app you know step by
step but if you just came for the
tutorial yeah put in timestamp either in
description or in one of the in a
comment down in the comment section so
check that out if you just want the
tutorial but if you want to stay before
we get to that I'm going to show you
talk about where I am in my office
development journey as well as go over
the Pokedex app for the record that that
firebase in geo fire app is a pokey
finder app so this was kind of like a
prerequisite is making that the Pokedex
app just Pokemon that's why Pokemon but
as for the update I am currently of
course working on the firebase in geo
fire pokey finder app and I've gotten
down the maps I've gotten down
everything that I go over later in this
course which is the maps firebase setup
geo fire why not finish the Pokedex app
and there's a slight announcement you
know I said I'm gonna build my social
network app my brother just called me
this morning and he proposed an idea of
a different app that not honestly I like
better and he's actually going to be
building a full-on business plan and
writing down a whole lot of things of
what he wants in the app and just
planning out basically everything to
dish off to me so I can create it and he
already basically runs a business right
now so I don't know if I if I want to
fulfill the other social network app I
told you
or if I'm gonna go with this one or if
I'm just going to create the other ones
it's just and I need to decide before
like the next week or two because that's
when I'm gonna start the firebase social
network app anyway so it's a lot to
think about
it's just there's nothing set in stone I
may still go with the other one like I
said but I just figured I'd document
this and just let you guys know that
there's some thoughts going around in my
head with what I want to do with my
first relapse oh yeah big news big news
let's go ahead and check out this
pokedex app that I turned the volume
down on so you won't be blasted but I'll
show you the volume don't worry so let
me uh let me set this up and let's move
on over to the computer alright guys so
here we are as you can see with the
Pokedex that we have
model-view-controller similar to last
time we have resources utilities and
whatnot but all of this code is on
github and you'll notice as mention in
the last video that oh maybe I didn't
have so much than that pokemons Swift
but you'll notice that I put a lot of
comments in there because as I would
like to repeat this because it's pretty
important I write the code and that
helps me learn and then right after I
write that little bit of code I write in
outlets well that's not really that much
of a description so let's come over to
VC so this it sets a number of items in
this section although this is pretty
self-explanatory because down here it
says a number of items in section if I
write it once in code write it twice or
do the second time in English and then
afterwards I kind of talk about it with
you guys it helps me remember a whole
lot more so it's just something that I
may implement in like a real world app
who knows but it helps me learn as of
right now so I'm gonna stick with it and
it's not like it hurts any code it's
just a comment but let's go on to the
simulator here it is and here's the
Pokedex
simulator let me see if I can make this
window a little bit bigger there we go
so here's a pokedex simulator and
alright let me turn this all the way up
just so you guys can hear it on there
alright enough of that alright I like
Pokemon what can I say but as you can
see as last time we have searched the
search bar up here and just like last
week everything's still the same if I
backspace the keyboard as appears if I
search the keyboard disappears and of
course if I type in J any any Pokemon
with the letter J in it will come up but
I still haven't figured out I don't know
if it's just a simulator thing or if
there's another way to do it the way I I
already explained that in last video but
when I hit X the keyboard doesn't
disappear that's my main problem so if
you can help with that they'll be great
um I went over it last week so I'm not
gonna go over it again but the main
difference between this app and last
week's app is instead of when we hit
this it just shows like Bulbasaur or if
we hit this at your Charizard all I
would do is just show the name of the
Pokemon and that was like the first step
to make sure our segue works the VC is
good to go and it's all connected and
whatnot but this week the final
application little final for this
learning purposes let me head on let me
type one Charmeleon so we have bio and
moves and I said it's dumb for learning
purposes because we didn't implement and
moves because that would have been the
same exact thing as we were doing on
this side we're just be learning it
again but we've already done it multiple
times meaning we use a pokey API and we
implemented our own or urn assets images
and whatnot but for the pokey API I had
the type of each Pokemon the name of
each Pokemon the defense height weight
ID based attack and its evolution
process and levels and all that good
stuff what we did for each thing so for
type for weight for height for defense
we looked into the JPI the JSON data
converted that JSON data using a JSON
converter just so we could read it
easier and using their types like what
their value names and what not and their
types of value so like integer string or
whatever it may be we imported we were
able to take that whenever we whenever
we click on Charmeleon and take
Charmeleon information like fire weight
and all that good stuff and put it into
the
viewcontroller into this UI but as you
can see here's our main storyboard
instead of having so we had this VC last
time instead of just having a simple
Ivysaur label down here with a blue
background we have the same bar up here
basically so it's a clean transition
from one to the other when we're in the
actual app and then we implemented this
bio moves as you saw moves we don't we
didn't do anything with that or else I
think if we were to do that we were
created in another VC maybe I don't know
don't don't quote me on that but I'm
still learning so uh uiimageview we
implemented that we implemented three of
those actually because this is the
Ivysaur for example and this would be an
Ivysaur and this would be a venusaur and
then of course we have the type just
like y'all saw and then also you see how
this is a box right here this is where
the description is supposed to be right
now see I have two spaces in there just
like everything else I don't understand
why it's not working but with this
description box I did implement a
minimal font scale then wanted to be too
big and I also implemented lines so this
has has a maximum of ten lines or yeah
it has ten lines that I am able to use
and there's a whole lot of things
constraints of whatnot and we throw them
all in stack use we threw what we did
was through this in this in a stack view
and then this and this like height and
pokedex and stack view and then type in
defensive stack view like those across
from each other and then we threw each
of those into stack you just to make it
implement better so for example see we
have that stack view and within that we
have that or that's within this deck
view it just helps with spacing whatnot
and then come on over to here so as you
can see right here it's function update
UI we have a whole lot of other attack
label information so we have all these
IB outlets week for our name label main
image description label and that as you
can see by the names is relative to the
UI that you just saw let me bring that
up so in the coma Bulbasaur
type height/weight defense type height
weight defense that's that's how it
correlates and it's connected to that VC
and as we come down you can see where we
update the UI so whenever we click on
Ivysaur it'll bring up Ivysaur x' attack
defense height weight type and
description like i said all this
information is on github I'm not here to
teach you about this pokedex app I'm
here to teach you about the firebase in
geo fire here in a second so let me go
ahead and close this down I'm gonna go
ahead and run the pokey finder app and
go through the firebase installing geo
fire well first before we go into that
we have to have something to attach it
to so we'll have to create the Xcode and
you can attach firebase to that
immediately but we're gonna do is create
the map first so basically the poky
finder app is for Pokemon go you know
pokemon go if you've ever played it or
even in maps you're walking around the
map you're like a little blue dot on the
map and you can walk around whatnot
that's basically what we're going to be
making and there's a few things that you
have to implement in order to get it
working right so that's what we're going
to do first and then we're gonna
implement firebase geo fire and that'll
be it alright so I had to come over to
my desk because holding my loud-talking
for the camera just wasn't doing it so
I'm here at my desk we're gonna go over
the poky radar app pokey finder app
whatever you want to call it and I've
already made it I'm not gonna coat it
with you guys it's really not that much
that I've that I've done it's just like
a few you I think I'll show you but
right after this is when we're gonna go
over the firebase and geo fire cuz a lot
of people are here they're just looking
lotta y'all are just looking to do
implement firebase and geo fire into
your application that you've already
created so not necessarily make a PO
creator app so let's just go ahead and
talk about what I've done so far after
all this is identi so I must do that so
over here we're at the main dot
storyboard all we did was a map view set
the constraints in a button and made
that button graphic as you can see over
on the assets if this wishes to load we
have 151 pokemon and we have yeah hunter
51 pokemon and a few other apps a few
other pictures I mean and that's it for
the main now storyboard is just about
set constraints met view second
strengths and that's it
view controller is the only other file
that we've messed with and as you can
see we've imported map kit we made sure
our view controller has map view
delegate location manager delegate we
have our variables and constants whatnot
and then inside our viewdidload function
we have a user tracking mode for map
view and that as you can see here the
map follows a user's location so you
know how when you're driving and you're
using a GPS or if you're using Apple
maps or Google Maps you stay in the
center in the so basically the screen
follows you around instead of you like
driving like you just see the blue dot
go off the screen you have to pan that's
what this is so it follows the blue dot
it follows you on the map in the
application and then we had to create
this location all status right here for
this function location all status or we
created this in order to implement
inside here's what how it should word it
and only find location when map is in
use so basically we implemented that so
if you close out and it's just running
as a background test task
it isn't draining your battery by
finding your location it only finds your
location when the when the application
is open and we have to ask can we access
your location and that's why we
implemented this right here and this is
location manager in order to do this we
had to implement location manager
function and that's what all of this is
for in order for us to prompt key we
access your location and let's keep
moving on our another function center
map on location it determines the size
of the region shown on the map so
basically when you open up Apple maps
you'll notice how you know what let me
open it up right now you'll notice how
like it opens it up to a certain let me
just open up Google map so it opens it
up I'm on that but it opens up to to
make your sure it's that big sorry about
this guys let me get that focused in
there but it it opens up to make sure
it's that big right see wherever
wherever the dot is and then the screen
is that big you could set it so it opens
up that big or it opens up this big or
opens up this big you know that's
basically what that is let me let me get
me focused and that's basically what
that is so right here I just I just
remembered that this is awfully small
screen you may not be able to see the
phone but I'm sure you understand what
I'm saying so it determines how far away
you are how much of the map you can see
when you open the when you open the app
so let's move on from that tells map to
Center so this you can will probably
implement a button with this you know
how I'm not going to go back on that on
the on the phone because you may not be
able to see it but you know how you can
hit that button and it centers it goes
back to you being Center that's what
this is and it just tells the map to
Center you and what we also implement is
make sure it doesn't auto center when
you're trying to pan so if you turn a
pin over like you're here you're here
and you're trying to pan over to some
see if Pokemon over there you don't want
it to auto center or else you won't be
able to pan then that would be uh that
would be a hassle and then down here on
our map view function replace blue dot
with Ashe for user location like you you
know how on that application you just
saw blue dot that represented me instead
like this let's go back to assets let me
just show you
it's a image of ash ketcham if you if
you're familiar with pokémon ash right
here this is you basically in the
application and that's what we did and
that's basically it that's what we did
we have a IB action for our pokeball
button we have up here or IB outlet for
our mat view and like I said yep that's
it so now let's implement firebase into
our application I assume you already
have firebase account and ignore these
pokey writers I'm just going to create
another one named puggy radar these
aren't hooked up to anything but pokey
radar so you want to create it you know
whatever helps you remember so right
here it's named puppy radar so I just
named this PO your writer makes sense
now they've created that we want to add
firebase to your Iowa
SAP and then bundle so as you can see
iOS bundle ID whoops I didn't mean to do
that come over to you procure a tower
project and this is what you want to
copy command C and then paste command V
right there these are optional so we're
not gonna worry about that now and then
Xcode instruction whatever we download
Google service info.plist and as you see
it's two inside parentheses because I
already have a few Google service besh
info.plist in my downloads folder what
I'm gonna do is drag this on over to my
desktop I'm gonna delete this one move
to trash I'm going to rename this so it
doesn't have that two in there and then
I'm gonna drag it into my application
and make sure it's checked just like
that finish and what I'm going to click
on this application isn't going to go
live
I've yet to decide if we want to black
out any of these IDs but as you can see
all these IDs the values over here
you do not want to show this to anybody
or else they can access your app in
firebase whatever it is so this isn't
going to be a live application so I
don't really know if I care that much
but you guys will see but basically this
is our info dot P list our Google
service and fotopolous and this is good
to go what we're going to have to do now
is download our pod file into our
project folder so you're gonna open
terminal I have I term because well it
looks cool I'm gonna make this bigger
for you guys and then I'm going to
change directory CD into desktop course
apps
what I'm doing is type in the first
little bit of the word and hitting tab
so it finishes the word for me I don't
have to type off the whole thing change
directory in there LS in order to see
what's in there so I have my pokey Rader
right here so I want to go into my pokey
radar and see I poke your radar and then
poke your head out Xcode project what I
want to do is pod in it let's initialize
my pod
and then as we'll see a pod file yep a
pod file is in here now we're gonna open
up that pod file and whatever text
editor you wish I'm just going to open
it up in vim because it's really not
that big of a deal I don't if I was
going to do a lot of editing into this
file then I probably open it up in
something else because it you know you
can't come over here you can't click I'm
trying to click right here you can't
click you have to go like this and make
sure you hit I in order to insert it's
just I don't really like fit but for
these purposes it's fine so we're gonna
do is over back on our firebase console
continue copy this pod of firebase core
so you see it you can see right here it
says create pod file if you don't have
it that's what we did over your pod file
and this that's what we're doing so well
done deal
let me get back out of that and now we
have our proper pod file and what we're
gonna do is hit escape a couple times :
yep : X and then enter what that does is
saves our pod file and what do we want -
oh yeah and we went to pod install so
pod whoops if I know how to type pod
install this may take a while but we're
going to implement one more thing after
this and then firebase will be attached
to our application nice now that we have
pod file installed let's come on back
over to this you'll see Oh first off let
me close the Xcode project and then what
I'm going to want to do is open open
open
poki radar dot XC workspace because you
don't want to use your project file
anymore so in order to really concrete
that in your head let me exit out and
come back in Xcode you see how this is
white this is white this is white
those are workspaces the blue ones
or project files so our project projects
what you want to do is use your
workspaces from here on out and don't
even worry about the project file or
whatever it's called anymore as you can
see we have our pub file and all that
it's good to go we're going to come into
not our view control we're gonna come
into app delegate
import firebase let me just see if it
pops up yep firebase and then we're
going to add in down here if I our app
dot kind of figure and this will allow
everything to communicate properly so
you have to implement that this won't
work without this and you're only
importing this in order to use this so
make sure you do both this and then save
and that's it for firebase now let's
move over to geo fire so strolling geo
fire onto your application is very very
very simple you can come on over so this
is the it's on github it's open source
so you can adjust it if you need to but
as you can see it's objective-c don't
you worry about that it'll be just fine
because we're in Swift as as you know
but geo fire for iOS you know there's
some tutorials of to help to download
geo fire right here go5 downloading go5
for iOS using geo fire with swift so it
kind of tells you that I want to take
you on a pretty simple way to install
geo fire and I'm going to leave what I'm
going to type in our pod file and
description below but I'm getting ahead
myself what we're going to do is go back
into our pod file that we put a pod
firebase you know and talking about we
had to initialize the pond and then vim
pod file and then install pod install
we're gonna go back into that so let me
come on over to that directory that
project I think that's what it's called
yep all right so we're gonna vim into
pod file and we're gonna hit I to insert
I'm gonna bring it right down under here
so pod I gotta look at it to make sure
I'm typing in correctly I read it over
here pod geo fire and then get little
arrow
HTTP I'm just going to type in and I'm
not going to read it and that's it right
there and yes I know I was looking down
at my keyboard moss typing but that's
because I have to put in the dashes and
the lines and all that stuff so just
don't give me a hard time okay but uh
and then what we're gonna do is call it
well no we're not we're gonna hit escape
we're gonna do : X to save it and now we
saved it now we're gonna do pod install
just like we did before pod install it
it's not gonna make anything extra is
just going to basically overwrite what
you just had and since you didn't change
anything you only added things it's it's
good to go and then after pod install
what are we gonna do we can get out of
this we're going to want to open up that
workspace so pokey radar and then where
we at let's come over to pods pods
directory within that posterity we're
going to go to the firebase database
frameworks and then firebase database
framework you're gonna click on that
then over here under target membership
you'll see geo fire check that build
because if you come over what we're
going to do is come over to what is it
view controller we're going to import
geo fire if you didn't build it it
wouldn't recognize that geo fire was
already checked off and good to go now
it'll read geo fire just like that that
should not be there there we go let's
just test it out make sure it works we
can go ahead and we don't want to do geo
fire geo fire this is just to test it
out see if the bridging works and
whatnot and let's build it build
succeeded looks good to me and that's
how you install geo fire into your Xcode
application I hope you guys enjoyed this
video and until next time have a good
one
[Music]