Firebase Dependency and Set Up
Learn how to add the Firebase dependency and initialize it in your application. This lesson covers importing necessary methods, setting up app settings including the database URL, initializing the app, and creating a reference to the database. You'll also make HTML and CSS changes to accommodate new functionalities, such as adding a clear button and aligning elements. By the end of this lesson, you'll have the basic settings in place to interact with the Firebase database and push user input to it.
[00:00] We need to add the Firebase Dependency so I'm going to come over here to the three dot menu and when I click on that a menu appears and you can't actually see that in the recording but I'm going to select add dependency and a pop-up appears and I'm just going to type in
[00:15] Firebase and I'll click add and we can see that the Firebase Dependency has appeared over here on the left hand side. Now if you're working locally you can install this via npm and you can check out the Firebase docs on that right here again this screenshot is a link just click
[00:32] it to go straight through to those docs and by the way you can also use a cdn to work with Firebase if you prefer to do it that way. Okay now we've got the Firebase Dependency set up we need to import some methods so I'm going to come right up here to the top and we'll say import and then
[00:50] inside curly braces I'm going to say initialize app and we're importing that from firebase app next I'm going to import get database and ref and these are coming from firebase database. Okay that's all the methods that we need
[01:12] now I'm going to come down here and set up a const called app settings and this is going to hold an object and it's going to have one key value pair. Database url is the key and the value will be a
[01:27] string containing the url that we got when we set up the database and we can delete that comment now underneath app settings I'm going to set up another const and this one will be database and here we'll use one of the methods that we've just imported get database. Next I'm going to come down here
[01:46] and set up a const app and now we will use one of the methods that we just imported so I'm going to say initialize app and I'll pass in the app settings. Now we need a const database
[02:02] and again we'll use one of the methods we just imported get database and we'll pass in app and finally we'll set up a const called conversation in database and I've just shortened database to db
[02:18] and we'll set that equals to ref and we'll pass in database. So what we've just done there is set up a const called conversation in db and it stores a reference to our database and that's really
[02:33] important because now conversation in db is going to be our single source of truth for the conversation we have with the chatbot. Okay those are all the basic settings we need for now we will add a few more methods later as we go on. Now before we do anything else we do need to make a few changes to
[02:51] the html and css. I want to add a clear button right here so I'm going to go over to index.html and I'll come in here and just paste in the clear button and I'll hit save and of course we've broken
[03:06] the css so let's head over to index.css and we need to make a couple of changes. So firstly I'm going to come down here and paste in some css for the new button and as soon as I do that you can see that things start to change over here. Now I've used the selector clear-btn and if we have a quick
[03:26] look back at index.html the button has already got that class added and the most important part of this css is actually this property right here grid-area clear-btn and we're using that because
[03:41] the layout up here uses css grid so if we come up here to the chatbot header selector this is where we're setting display grid and we've got the grid template areas right here and I'm going to change
[03:53] this dot for clear-btn and now things are starting to come into alignment so clear-btn is the grid area that we've got on the clear-btn selector. Now we've still got a flat edge to this button
[04:08] and that's because at the moment down on line 137 we are currently selecting all buttons and we've got style set up for this submit button that we've got right here and the submit button has a border left of zero. Now if we go back to index.html we've got the submit button right here and it's actually
[04:27] already got a css class of submit-btn so how about we come over here and we replace this with the more specific selector. Okay that has had the effect of giving us a full rounded button
[04:42] which is what we want right here. Now all we need to do is bring this into alignment by coming up to the support id selector and taking this property right here text align right and changing it to center. Okay now we've got it looking how we want it and we're good to move on.
[04:59] Next we need to figure out how to push our user's input to the database.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!