7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 Save Data

Hello everyone. This is Reggie Dawson. Welcome to the Use Firebase as your Back End course for Tuts+. In this video, we're going to set up our project and learn how to save data to Firebase. The first thing we need to do is go to firebase.com and sign up. Since Firebase has joined Google, we can also sign up with our Google log in. The choice is yours. After signing up, we will see our dashboard. This is where we create our apps that we can save data to. Click on Create new app, enter a name for your app. It will also auto fill the app URL with the app name. If the app URL is taken, we will have to change it. The app URL is how we access our data and has to be unique. After we have a good app URL, we can click Create New App. Now you're going to wanna take note of and save this app path as we're going to use it later. Then click on Manage App to be taken to the dashboard for this app. Here we start off with a data link which shows us the data stored on our app which is presently empty. Incidentally we can add data here if we wanted to but instead we're going to build an interface to add our products. We also have a link for security and rules which we'll talk about in a later video. Next we have the simulator where we can simulate data writes and reads against our Firebase app. This is useful for testing especially after setting up some security rules or adding authentication. Then we have our analytics, log in and authentication which we will talk about in a later video, hosting which we will also talk about in a later video and secrets which allows us to authenticate users with web tokens. Let's create a folder to hold our project. Now for this you may need to use some type of local web server to host your project, as I know Chrome won't always let you run your JavaScript files from your local machine. I'll be using the Cloud9 IDE even this project. And as a result, we'll be able to easily preview. Honestly there are better libraries to work with Firebase that we will touch on later such as the Angular file library for Angular. For this project we're gonna use plain JavaScript to illustrate what can be done with the Firebase JavaScript client. We will also see the limitations of using JavaScript for a large project with Firebase. The only other libraries we will use outside of Firebase will be bootstrapping jQuery. Bootstrap for the UI components of our app and jQuery because bootstrap relies on it. jQuery is also welcome since we can use it to perform dominant relation. Inside of our project folder, add folders for CSS and JS. CSS will hold our custom CSS files. JS, our custom JavaScript files. Then, in the root of our project folder, create a file name, addProduct.html. First we will add standard html boiler plate. We have our opening and closing html elements wrapping our head element and our title stating, add a product. Then we add our style sheet reference for bootstrap using the CDN. And then another style sheet reference for our custom CSS in our CSS folder. Then we add our closing head tag and an opening body tag. Then we're going to add our nav bar. I won't go too in-depth what this does as it is just a standard Bootstrap nav bar. It is set to be fixed to the top of the page and has one link that returns us to the project listing HTML page. When we are done, this will be part of a larger app, and we will navigate to this page from a project listing. This will return us to that listing. Next we have a div that has the class of container fluid to wrap our page elements. Then we add a form element with the ID of add form. Next, we add a div with the class of form group. Then inside we add the label for item name with the text of item name. And a text input with the class of form control and an ID of itemName. It will also have the placeholder text of Enter Item name. Then we add another form group div. This time we're going to use a text area for a description. This is a class a form control as well, an ID of item description, placeholder text of enter an item description and its role is set to 3. This is specific to text areas and lets us set the height of the text area. Then we add another text input for item price. Finally, we will add a file input for our image. Now Firebase doesn't natively support images, but I'm going to convert the image to base64, so we can upload it to Firebase. Now this is not recommended, as a base64 image has a higher cost to download in an app. But we will use it in this example. A more feasible alternative is to use external hosting or hosting available on Firebase which we'll talk about in a later video. Also bear in mind uploading images this way only works with images with small file sizes and can fail silently for no reason. First we will add our form group and our label for image input. Then we add our file input. Then we add a p tag with the class of help-block, so we can add helper text to our input. Then we add an img tag with the id of preview. This is where we are going to load a preview of the image we upload. After that we add a button. Notice that this button has the attribute of disabled="disabled". This will set our button to be disabled when we access the page. Then we will close our form, after our closing did for our container we will add our script reference for jQuery. And then bootstrap. And then Firebase off from CDN. Finally we will add our reference to our local ad product.js file in our JS folder. Then we will close our body tag and the add product page is done. Before we work on our ad product .JS file, first we need to create our custom.css file in our CSS folder. Inside we will add two rules to this file. First we add padding for our body because if we don't the nav bar will overlap our content. Then we set images to the size of 140x140 pixels. We use this for our image preview, as well as any images we place on our pages. Now let's create our addproduct.js file in our JS folder. First we will add a reference to the Firebase app you created. This is the address we got when we first set up our app. Remember, this is where we're going to add products and I mentioned that we're going to be storing these in a child node called products but we aren't pointing at products. The cool thing about Firebase is that we don't have to create our pass before a hand. We can create the products node on the fly. Then we add global variables for item name, item description, item price and base img. I could have added these in one var statement, but I added them separately for readability. The first thing we're going to do is deal with grabbing an image if one is uploading, as we're going to make images optional. First we will use jQuery to add a change event listener to our file input. Any time this input is changed such as when we choose an image from our local machine, this code will execute. We're going to use the file reader API to grab our image in Base64 format. First we initialize our file reader. The way file reader works is that after we read the image as a data URL, our Base64 image is returned. This in turn executes the onload end event. Before we read the file, we need to set up our handler for this event. The image is returned as reader.result, so I'm going to assign that to our base img variable. Then I will set our preview to the return image as well. I'm using jQuery to set the source attribute on our img tag with the class of preview. Then we use the reader API to read the image as a data URL. After this runs it emits the onload end of it where we grab the image. Next we need to add validation to our app, remember the disable button? We're going to use jQuery to validate our app and enable the button depending on what is entered in our form. We are going to go all out and validate formats but we will make sure that each product has a title, description and price. The image will be optional. First we will create another change listener, this time for our form. Again we are using jQuery to watch the form for changes and we will respond when something is entered or removed from our form. First we will grab our form element using the variables we defined. First we grab the data and our item name input. Then we grab our text area, and then finally we get our item price. Using the jQuery valid method makes it easy to grab the values of our form elements. After that we use an if statement to check the content of our form elements to see if any of them are empty. If there is data in all of our fields, we will remove the disabled property of our button. Here we're using the jQuery Remove Prop Method to remove the disable property of our button. Then we add an esle statement and set the property if any of our form elements are empty. Here we are using the jQuery prop method to set the disabled property. This check will be made every time a change is made to any of the form elements and set the button accordingly. We set the property initially since there will be no content in the form elements when we first navigate to the page. So the button should be disabled. We could test this now and make sure our file handling and form validation are working but we will add our function to save our data first. When it comes to saving data to Firebase, we have two methods we can use. The first method is called set. Let's add a function called addProduct. Again we're going to grab our form elements. Instead of grabbing our form elements to recreate our variables, we grab them inside of our function. The reason is we need to update based on what is inside of our form elements when we'll run this function. Next we use an if statement to check of our base img has the image uploaded. If there is no image, we will set the base IMG variable to none. Next you create a variable to reference our child mode. We use a reference to our for our Firebase app and change the child method which we set to products. This refers to the child node on our app. Since we have not created it yet, this will be created the first time we save data. After that it will refer to the child node with this name. Then we change the set method to our child node and pass our data as an object. First we set our name, then our description, the item price and then finally our image. That's all we need to do to save our data to Firebase. The last thing we need to do is set up our click event listener for our button. After this, our file is done. Let's save all of our files and preview our app. If you look at our dashboard while we save some data will be able to see if our data is saved. Also our button should be disabled until our name description and price fields have data in them. After that our image should display in the preview when we choose image. And then once we click on Save, our data should be uploaded. This works for our data in the situation that we have unique name products, but this method has a major problem. Let's say we add more data. Instead of adding more data, this method overwrites any data at this location. As a result using set in this format is not very useful. Fortunately we have another method that will organize our data better, as well as avoiding overwrites to an extent. Let's go back to our addproduct.js file. First we're going to change child and itemName before set. This is the advantage of setting the product name as a child node which will be a key we can find the product with. This works as long as we have unique item names. After that we can remove name from our object. Let's say even preview. If we were to write some more data to Firebase right now, we would not overwrite. But we will use our dashboard to delete the existing data by clicking on the x. If we save some data now, it will create a key out of our item name. And as you can see, our product was saved. Now if we add more data, We are able to add more data and it does not overwrite. But look what happens if we use something with the same item name. If we use the same name, the data is overwritten, so we have to use unique names. If we use set this way, we will have to check for duplicates before writing our data to Firebase. This method is useful for something like users of a site where every user name must be unique, but we are building a product catalog so you may have lists of items with the same name. In this situation we need something that can handle long lists of products that do not need unique names. This will require some way to create a unique key for each record. Fortunately Firebase has the push method that we can use. Let's go back to our addproduct.js file. We will remove the child in set and replace it with push. Then we will put the name back. Let's save our files and preview. Again we're going to delete our data. Now let's add some more data. Our data is added but it is now under a random key generated by Firebase. Notice we did not have to add a child mode or set up anything to get this ID. The push method generates it automatically. Now if we add another product with the same name. Although it has the same nam,e it is written to its own location. If we are using lists of data, the push method is the way to go. And that's pretty much everything you need to know to save data to Firebase. In the next video we will learn to retrieve and display this data.

Back to the top