Coding

Angular 2 Tutorial (2016) – Angular 2 & Firebase Example App

  • 00:00:02 hi everyone welcome back to a new video
  • 00:00:04 we already had a look at HTTP now in
  • 00:00:08 this video I want to show you how we can
  • 00:00:10 connect to another restful service like
  • 00:00:13 in this case firebase 2 to post data and
  • 00:00:16 get data and store it in their database
  • 00:00:19 so if you're not familiar with firebase
  • 00:00:21 you can think of it as like let's say a
  • 00:00:24 cloud database it's it's more than that
  • 00:00:26 but that's it's not for this video and
  • 00:00:29 what we will do is we will use their
  • 00:00:30 REST API to yeah basically put data
  • 00:00:35 there of whose data there and get it
  • 00:00:37 back I'll put this simple up here as for
  • 00:00:42 this video my two future videos where we
  • 00:00:45 dive deeper into the old firebase API
  • 00:00:47 and do more stuff with that but for this
  • 00:00:53 video what I'll be able to do here is I
  • 00:00:55 can insert a first and last name here
  • 00:00:59 set the user and submit it and as we can
  • 00:01:02 see this response you get back from the
  • 00:01:04 server and it's just confirms that this
  • 00:01:08 data was set now if we have a look at
  • 00:01:11 the firebase database of say or the data
  • 00:01:14 that is there itself I do this by
  • 00:01:17 accessing my firebase account here we
  • 00:01:21 see that this data was indeed
  • 00:01:22 successfully set now what we also do is
  • 00:01:26 what we can get the user and now
  • 00:01:28 obviously nothing changes here but if I
  • 00:01:30 reload the page and now click get user
  • 00:01:32 we can see we get back that user in JSON
  • 00:01:35 format now first step for you if you
  • 00:01:38 don't have an account with with Google
  • 00:01:40 or with firebase is for you to sign in
  • 00:01:43 or sign up before with Google or create
  • 00:01:45 a new account with them and once you
  • 00:01:48 have done that
  • 00:01:49 you should be taken to a dashboard which
  • 00:01:52 looks like that now I just hit my my
  • 00:01:57 details here because I don't want anyone
  • 00:01:59 to access this account but you should
  • 00:02:02 see your URL we'll going to use
  • 00:02:05 throughout this video right here where
  • 00:02:08 it's blurry in the video now but you
  • 00:02:10 should see your you are out there
  • 00:02:12 now just copied that URL when we needed
  • 00:02:14 later in this video so I'm not starting
  • 00:02:17 off with basically a clean installation
  • 00:02:19 all I did here was I
  • 00:02:21 well I created the HTML code we're going
  • 00:02:24 to use for this video so the foreign set
  • 00:02:26 the user and the button to get a bag and
  • 00:02:29 some styling but you will find a link to
  • 00:02:31 the code in the description so first
  • 00:02:34 thing I'm going to do is I'll treat a
  • 00:02:36 service which will handle this
  • 00:02:38 firebase access to do that I'll create a
  • 00:02:41 new file here and I will call it fire
  • 00:02:43 fire based dove service ta tour TS and
  • 00:02:48 inside this file let me see when our
  • 00:02:51 first export my class here my firebase
  • 00:02:56 service class and remember the naming
  • 00:02:58 convention where we include the type of
  • 00:03:02 this class or the type to which we're
  • 00:03:06 going to transform this or as which
  • 00:03:08 we're going to use this in the name so
  • 00:03:09 in this case we're including service in
  • 00:03:11 the name of our class here then I want
  • 00:03:15 to make sure that I import injectable
  • 00:03:19 from angler to core and then I attach
  • 00:03:24 the injectable metadata or decorator
  • 00:03:26 here to to attach the metadata to
  • 00:03:28 disclose now inside this class and for
  • 00:03:32 the moment not going to write like a
  • 00:03:34 firebase framework where we then have a
  • 00:03:38 universal or standardized way of sending
  • 00:03:42 data and setting it and putting it to
  • 00:03:45 our firebase database in this case I'm
  • 00:03:48 just creating the methods we're going to
  • 00:03:51 need for this video so what I'm doing
  • 00:03:53 here is I will create a set user method
  • 00:03:56 which allows us to set I use for
  • 00:03:58 basically and this method should take
  • 00:04:01 two arguments the first name which will
  • 00:04:03 be peer string and a last name which
  • 00:04:05 will be a string and additionally we'll
  • 00:04:09 have a get user method then true chest
  • 00:04:12 head again you obviously could write a
  • 00:04:14 more generic class here which would
  • 00:04:17 offer you a simple way of putting and
  • 00:04:21 getting all kinds of data but in this
  • 00:04:23 case this will do now in my set
  • 00:04:26 user function here I want you access the
  • 00:04:31 well the restful api ofer base and
  • 00:04:34 therefore i need to be able to use the
  • 00:04:37 angular 2 HTTP service so to do that
  • 00:04:40 I'll add my constructor to inject it
  • 00:04:43 here I will automatically bind it to a
  • 00:04:46 private property called HTTP and what
  • 00:04:49 will unchecked well the HTTP object or
  • 00:04:52 an instance of this object now to be
  • 00:04:56 able to do that make sure that in your
  • 00:04:58 boot is where you bootstrap your app you
  • 00:05:01 got your router providers well set as
  • 00:05:05 providers so that angular 2 is able to
  • 00:05:08 do this injection then on my back in our
  • 00:05:11 firebase service here what I'll do is
  • 00:05:13 our first created body of this request
  • 00:05:16 because this will be a put request not a
  • 00:05:19 post request but a put request this is
  • 00:05:22 because in firebase or with firebase we
  • 00:05:25 can use both requests a put request will
  • 00:05:29 always overwrite the old data or the the
  • 00:05:33 old data we were setting here not all
  • 00:05:36 the data in the database just the one
  • 00:05:37 we're targeting here and a post request
  • 00:05:40 will kind of append to it so like a push
  • 00:05:43 function an array and it will give each
  • 00:05:47 data entry we we sent there and
  • 00:05:49 automatically generated ID now but both
  • 00:05:52 can be useful it depends on what you're
  • 00:05:55 building here in this case I'm going to
  • 00:05:57 go with to put function or with the put
  • 00:06:00 request because well that's something we
  • 00:06:03 hadn't had a look at until now so first
  • 00:06:06 I'll create a body of this file of this
  • 00:06:08 request and I'll just create a string of
  • 00:06:12 a JSON object and this JSON object was
  • 00:06:15 well basically when I will create from
  • 00:06:18 the parameters were passing here with a
  • 00:06:20 first name of first name and a last name
  • 00:06:23 of last name so very simple javascript
  • 00:06:27 object and creating here and then I'm
  • 00:06:29 turning it into a string thereafter I
  • 00:06:31 will return this HTTP put so this is
  • 00:06:37 where
  • 00:06:37 I create my put request here
  • 00:06:41 I now need to target a specific URL now
  • 00:06:45 this URL is that one you're seeing here
  • 00:06:50 now this just looks a bit different
  • 00:06:51 because it it's too small to have the
  • 00:06:54 normal layout but this is your dashboard
  • 00:06:56 and here it's blurry right now but here
  • 00:06:59 you will find the link to your database
  • 00:07:02 so I'm just copying that and then I have
  • 00:07:05 to enter HTTP colon double slash and
  • 00:07:11 then enter the link now it could learn
  • 00:07:15 here again but here is really just HTTP
  • 00:07:18 and then your link yeah your the URL to
  • 00:07:23 your database now we have to append
  • 00:07:26 something to this URL because we're not
  • 00:07:30 targeting the root directory in our
  • 00:07:32 database let's say we want to create a
  • 00:07:35 user kind of directory or a user element
  • 00:07:38 there so therefore I will target you
  • 00:07:41 slash user dot Chasen by appending dot
  • 00:07:45 Chasen at the end of the URL we're able
  • 00:07:47 to access the restful api of firebase
  • 00:07:51 and then I'll also pass my body to this
  • 00:07:54 function now we're not done yet what I
  • 00:07:58 need to do is I need to map the response
  • 00:08:00 to turn bytes we're getting back to
  • 00:08:03 adjacent element so to do this I will
  • 00:08:06 first an able the map operator of rxjs
  • 00:08:10 by importing rxjs /rx this will give us
  • 00:08:14 access to all the operators and then
  • 00:08:17 I'll just enter a new line here
  • 00:08:20 I will map the response I get here to
  • 00:08:26 response to chase into basic basically
  • 00:08:29 just transform it into a JavaScript
  • 00:08:31 checked ok so now we're having a Jason
  • 00:08:35 element here and we're returning this
  • 00:08:38 now let's also write our get user
  • 00:08:40 function this one is a bit simply a
  • 00:08:43 simpler I'm just returning this HTTP GET
  • 00:08:46 now again I'll take this string
  • 00:08:50 here string from above put it into
  • 00:08:54 quotation marks from above and then I
  • 00:08:59 will know it will not eat death I will
  • 00:09:01 again map the response to transform it
  • 00:09:05 to Jason so this should do it now back
  • 00:09:11 in a rap component I need to create the
  • 00:09:16 response property which is output here I
  • 00:09:26 love assume a more and then I will
  • 00:09:30 inject this firebase service we just
  • 00:09:34 created
  • 00:09:34 I will bind it to the private property
  • 00:09:36 firebase service and this automatically
  • 00:09:43 added to import for me make sure to
  • 00:09:45 import your firebase servers correctly
  • 00:09:46 at the top of this file and I also need
  • 00:09:49 to adhere to my providers area to tell
  • 00:09:53 angular who did well basically how to
  • 00:09:55 create as firebase service now I have
  • 00:09:58 two methods I'm targeting in my HTML
  • 00:10:00 code here that is the onsubmit method
  • 00:10:02 and the on get user method so on submit
  • 00:10:07 will receive my form which is a control
  • 00:10:11 group so make sure to import control
  • 00:10:14 Krupa to talk to you and here what I
  • 00:10:19 will do is I will access my firebase
  • 00:10:23 service will set my user because that's
  • 00:10:28 what I do when they're on submit when I
  • 00:10:29 submit this form and what I want to do
  • 00:10:32 here is I want to pass my first Emma
  • 00:10:34 last name so therefore I access my form
  • 00:10:36 which I pastors on submit method here
  • 00:10:39 and there I have access to value
  • 00:10:42 property and here I can just access
  • 00:10:44 first name because I bound this first
  • 00:10:49 name input field here with ng control to
  • 00:10:52 well the name first name and
  • 00:10:55 respectively the last name input field
  • 00:10:58 is bound to last name through
  • 00:11:00 control here so therefore we can access
  • 00:11:02 it like a property or a property of a
  • 00:11:06 JavaScript object here so form W last
  • 00:11:09 name down here now this alone won't
  • 00:11:15 enable us to output it this just returns
  • 00:11:18 that will chase an object basically but
  • 00:11:21 it doesn't even fire the request to be
  • 00:11:23 honest what we have to do is we have to
  • 00:11:26 subscribe to this observable because
  • 00:11:28 again HTTP in and let you by default
  • 00:11:31 uses observables and we have to
  • 00:11:33 subscribe those observables to basically
  • 00:11:36 fire them or to start whatever they
  • 00:11:39 should do in this case send a request
  • 00:11:41 and also to be able to listen to
  • 00:11:43 anything that which comes back from this
  • 00:11:45 request so in this case in the SUBSCRIBE
  • 00:11:48 function I get two cases first one is I
  • 00:11:52 get back a user so your user is what I
  • 00:11:56 don't want to get back and this case I
  • 00:11:58 want to set this response equal to you
  • 00:12:00 to this user but first I will stringify
  • 00:12:03 the chase because remember we're
  • 00:12:05 transforming our response to jason and
  • 00:12:09 we have to stringify it to actually be
  • 00:12:11 able to output it in our well HTML code
  • 00:12:14 well the other cases we get an error in
  • 00:12:17 this case I just want you lock this to
  • 00:12:20 the console okay so this should work
  • 00:12:24 just before my code about a little bit
  • 00:12:27 here and then I got my on GAD user
  • 00:12:30 method now here also X is my firebase
  • 00:12:34 service and I will call my get user
  • 00:12:37 method there and then again I will
  • 00:12:40 subscribe to this observable and I got
  • 00:12:44 two cases here to I get back a user in
  • 00:12:47 this case well again I will set my
  • 00:12:49 response to the stringify version of
  • 00:12:52 that or I get an error in this case I
  • 00:12:56 want to log it to the console oops okay
  • 00:13:03 so this should work
  • 00:13:04 let's go give it a try and I got an
  • 00:13:07 error here in my firebase service last
  • 00:13:11 you know this
  • 00:13:13 the last names I think my auto-complete
  • 00:13:16 nuts me there so let's try it again
  • 00:13:21 yeah this worked and if we have a look
  • 00:13:23 at our dashboard or in our application
  • 00:13:26 or database here we can see this was
  • 00:13:29 successfully inserted let me reload here
  • 00:13:32 and get the user and we're getting it
  • 00:13:34 back awesome
  • 00:13:35 so this works and this is basically how
  • 00:13:37 we can use the firebase restful api to
  • 00:13:41 set data and get data and obviously we
  • 00:13:44 can do a lot more with it
  • 00:13:45 so either you dive into the firebase
  • 00:13:48 restful api documentation or well i
  • 00:13:51 guess i'll probably do some more videos
  • 00:13:53 and maybe we will refine our firebase
  • 00:13:56 service to be more generic see you in
  • 00:13:59 the next videos bye