Coding

Using the Firebase SDK | Firebase with Abe (Google Developer)

  • 00:00:05 in the last video we had a look at
  • 00:00:08 firebase together with Abe and he walked
  • 00:00:10 us through firebase here through the
  • 00:00:12 most important features for us which are
  • 00:00:14 authentication database storage and
  • 00:00:16 hosting as well as cloud functions now
  • 00:00:19 of course you can dive much deeper into
  • 00:00:21 firebase and the official documentation
  • 00:00:23 is certainly a great place to do so just
  • 00:00:26 as the average serious I have on this
  • 00:00:28 channel about view beautifying firebase
  • 00:00:30 there we will all use some of these
  • 00:00:32 firebase features for example the
  • 00:00:34 database storage and authentication now
  • 00:00:37 in the previous video however we had a
  • 00:00:40 look at a project this project here
  • 00:00:43 where we were able to sign in and sign
  • 00:00:46 up so we did sign up in the last we
  • 00:00:49 already therefore I can use these
  • 00:00:51 credentials to sign in and we see some
  • 00:00:53 messages here you can add new messages I
  • 00:00:55 want to quickly have a look at what goes
  • 00:00:59 on behind the scenes and with that I
  • 00:01:01 mostly mean the code so it's a basic
  • 00:01:04 angular Apple link can be found in the
  • 00:01:06 video description and if we have a look
  • 00:01:09 at the firebase service there which is
  • 00:01:11 where all the interaction with firebase
  • 00:01:14 happens here we can see that I got a
  • 00:01:16 couple of methods interacting with
  • 00:01:18 firebase through the firebase SDK and
  • 00:01:21 here's an important thing if you check
  • 00:01:23 out the documentation which you can find
  • 00:01:25 by clicking on go to Doc's on the top
  • 00:01:27 right here if you go there you click on
  • 00:01:30 guides and there you expand real time
  • 00:01:33 database you will see that there is a
  • 00:01:35 web guide using the JavaScript SDK and
  • 00:01:38 you could also target rest endpoints
  • 00:01:41 with Ajax requests so there are
  • 00:01:43 different ways of interacting with the
  • 00:01:44 database though if you want to use the
  • 00:01:46 real time part of it using the
  • 00:01:49 WebSockets and taking easily advantage
  • 00:01:51 of them you've used JavaScript SDK as I
  • 00:01:54 do here so what's going on here well for
  • 00:01:57 example we sign the user in I'm reaching
  • 00:02:00 out to the firebase object which I am or
  • 00:02:02 it from the firebase NPM packet which is
  • 00:02:04 just the SDK I installed so a JavaScript
  • 00:02:07 package I installed there I then call
  • 00:02:10 the off method which basically gives me
  • 00:02:13 access to all the authentication related
  • 00:02:15 helpers the JavaScript SDK provides
  • 00:02:18 was signed in with email and password
  • 00:02:20 very descriptive method name in my
  • 00:02:22 opinion we can easily pass an email and
  • 00:02:25 a password which I fetched from my
  • 00:02:27 angular form and you just dead sign in
  • 00:02:31 and then firebase will either return a
  • 00:02:34 success case which we handled the ban
  • 00:02:36 block where we get the user which was
  • 00:02:38 signed in or we get an error which we
  • 00:02:42 can simply output and here error next
  • 00:02:45 simply pushes this error to a subject
  • 00:02:48 and the error given back by firebase
  • 00:02:51 actually already contains an error
  • 00:02:53 message which we also saw in the
  • 00:02:55 previous video where we can basically
  • 00:02:57 well see something like this email and
  • 00:03:00 password is not valid or something like
  • 00:03:02 that so same for signing user up we get
  • 00:03:06 out reach out to the firebase SDK we
  • 00:03:09 then basically just activate the
  • 00:03:12 authentication like the features or we
  • 00:03:14 dig into those by calling the off method
  • 00:03:16 and then here's the create user with
  • 00:03:19 email and password method which allows
  • 00:03:21 us to do just that so this what we use
  • 00:03:23 the SDK and this is what we used behind
  • 00:03:26 the scenes in the last video we also get
  • 00:03:30 the listen to messages and send message
  • 00:03:33 method send messages called whenever I
  • 00:03:35 click send here on this button now send
  • 00:03:39 message just just what the name implies
  • 00:03:41 again I use the firebase SDK I then do
  • 00:03:45 not call off as a function but database
  • 00:03:48 that's a function call here and just as
  • 00:03:51 off gave me access to all the
  • 00:03:52 authentication related methods database
  • 00:03:55 gives me access to all the database
  • 00:03:56 related methods now here's an
  • 00:03:58 interesting function I call their after
  • 00:04:01 rest we have a look at the firebase
  • 00:04:04 database by clicking on database in our
  • 00:04:06 firebase console we basically see here
  • 00:04:12 we get our messages messages are pushed
  • 00:04:14 on to an array but it's this messages
  • 00:04:17 node which is interesting we get a
  • 00:04:20 reference to this node with the ref call
  • 00:04:22 the interesting thing is if we add a
  • 00:04:25 node here which doesn't exist yet so if
  • 00:04:28 I would add an S here and change that it
  • 00:04:31 would create
  • 00:04:31 newnode so you don't have to create that
  • 00:04:34 note on the back and before you access
  • 00:04:37 it it works the other way around so
  • 00:04:39 that's what we do with rap we either
  • 00:04:41 create a note or use an existing one and
  • 00:04:44 then pushes one of the ways you can
  • 00:04:46 write data voice yes the name suggests
  • 00:04:48 pushes a new JavaScript object onto this
  • 00:04:51 node and push basically means it adds it
  • 00:04:55 to a list this list then automatically
  • 00:04:58 gets populated with items which receive
  • 00:05:01 well this lexical ID here where we have
  • 00:05:04 a clear unique identifier for each item
  • 00:05:07 which then contains whichever data our
  • 00:05:10 object here contain content and a user
  • 00:05:12 ID here it's a hard-coded user ID
  • 00:05:14 because I'm recording this video after
  • 00:05:16 we made some other changes but that's
  • 00:05:18 the only change I made here in the end
  • 00:05:20 what we do here is we push the
  • 00:05:22 JavaScript object firebase will convert
  • 00:05:24 it into Chasen and store it in our
  • 00:05:26 database and again we get back success
  • 00:05:29 result or potential errors now
  • 00:05:32 interesting is how we listen to you
  • 00:05:35 changes thereafter we again reach out to
  • 00:05:38 the firebase SDK to the database method
  • 00:05:40 and then to the node we want to listen
  • 00:05:42 for changes and saying a listen and not
  • 00:05:45 fetch because firebase is all about
  • 00:05:47 being a real time database now
  • 00:05:50 theoretically you can all just fetch a
  • 00:05:52 snapshot and go with that there is
  • 00:05:54 another method you can use it's called
  • 00:05:56 once here are using on and not once
  • 00:06:00 because I just don't just want to fetch
  • 00:06:03 data once I want to react to changes I
  • 00:06:06 want to listen to changes and since
  • 00:06:08 firebase basically uses WebSockets
  • 00:06:10 behind the scenes it informs me whenever
  • 00:06:12 my day that changes so here I listen to
  • 00:06:15 a certain event and value is not any
  • 00:06:19 random word I entered here value is the
  • 00:06:22 event you want to listen to because it
  • 00:06:24 means whenever the value of this node of
  • 00:06:26 the messages node changes now here we
  • 00:06:30 got our messages stored whenever I add a
  • 00:06:32 new message and whenever I push a new
  • 00:06:34 message on to that node
  • 00:06:36 clearly the value of the node of the
  • 00:06:38 messages node changes because we added a
  • 00:06:40 new element so then this well trigger
  • 00:06:43 here basically is
  • 00:06:45 so the value then fires and fire base
  • 00:06:48 will automatically execute this map that
  • 00:06:51 this anonymous method here where we get
  • 00:06:54 the new data and data is just our array
  • 00:06:58 of messages because you just get the
  • 00:07:00 data of the messages node and the
  • 00:07:02 messages node happens to be a list of
  • 00:07:04 messages so that's what we get with data
  • 00:07:06 and then all that you hear is just
  • 00:07:08 transform the data in a way that I can
  • 00:07:11 use it so I basically loop through all
  • 00:07:12 the messages and push the elements which
  • 00:07:16 you can access with the well helper
  • 00:07:18 method that just gives us access to the
  • 00:07:20 values of the individual node items so
  • 00:07:22 the list items so it gives us access to
  • 00:07:24 content the user ID in this case I push
  • 00:07:28 these objects onto my messages array I
  • 00:07:30 found it important to highlight that and
  • 00:07:33 of course you will see this in action in
  • 00:07:35 my view beautifying firebase series
  • 00:07:38 where we set this up from ground where
  • 00:07:40 we basically built this all from ground
  • 00:07:44 and why don't you highlight how it works
  • 00:07:46 though right now because we did use it
  • 00:07:49 in the previous video now with that
  • 00:07:51 let's move on and let's take a closer
  • 00:07:53 look at how we should actually structure
  • 00:07:55 our data here in the data base and how
  • 00:07:58 we may use rules to control who's able
  • 00:08:02 to write what into our database