Introducing Firestore for Web-Apps

Firestore is a real-time NoSQL cloud database that can be used for storing data for web-applications. Working with Firestore is very simple. Firebase itself is a NoSQL database, i.e, it does not use any tables, columns, or rows. Instead, when we create a firestore database we split our data into collections and inside each of these collections, we store documents that you can think of as records.
Consider there is a collection that has different records stored inside it. All these records will be assigned a unique identifier. Each of these documents(records) looks like a Javascript object which has different key-value pairs. These key-value pairs are called a field that can have strings, arrays, numbers, time, etc. So if at any point in our application we need to retrieve this whole collection we can just reach out to our Firestore database and obtain that collection. Likewise, we can just reach out and grab a single document if we need a particular document.

Setting Up Firestore

Go to https://firebase.google.com/ create an account with Google and then click on the button that says GO TO CONSOLE. When you go to the console you can access all your projects. After that click on Add project to create a new project. Type in your project name and finally click on create a project. Once the project is created click on continue to proceed to the control center of the new Firebase project.

For creating the database in your project, select the database option, and click on the create database button. There are two modes, one is the start in production mode and the other one is the start in test mode. The start in production mode provides selective access to your data so that data is secure and only the authorized users can access it. When the project is in the development phase we use the start in test mode. This configuration makes it easy to save and retrieve data from the localhost. Select the start in test mode and click on next. You will then be getting an option to select your Cloud Firestore location. Once you have selected your location click on done. Now Firebase will setup the security rules by default and create a Firestore database.

Working with data

Once you are done with the previous steps, you can see the collections on the left side. The right side is going to be populated with the different documents that are stored in the collections.

Let's start off with the creation of a new collection by clicking on the start collection button. Specify the collection name in the collection id and click on next. You will be asked to create your first document in this collection. Enter a unique document ID in the given field. In case, you want it to be generated automatically by Google, press on the auto-id button provided in the field itself. Now you need to add the different fields in the document which are the different key-value pairs. Write the name of the field, select the type of data that you want to store in the field, and then fill in some value. Now click on save and the collection will be created on the left. If you want to create additional collections you can do it by clicking on the start collection button.

Click on the created collection to see all the documents for that collection in the second panel. You can see a unique ID created by Google Firebase in the documents panel that shall be the identifier of the document. Click on the unique ID to see the different fields stored inside the document. You can add more documents by clicking on the add document button.

Connecting the frontend

Now that we have set up Firestore, we need to connect it to our frontend application so that we can access the data from the database.

Click on project overview, you will see three options under the add an app to get started heading. The options are iOS, Android, Web, and Unity. Click on the Web option as we shall be working on the web application. Fill in the app name and click on the register app button. Copy the script that is displayed and paste it in the body of your HTML file.

Cut the first two script tags and place them in the Head. These two tags help in loading the firebase library. This package loads everything that you need to work with firebase. Now copy the following code and paste it below the two script tags that you have placed in the Head.

The first two scripts load the core app library and then the code that we just added helps to install firestore services from firebase. The code we added in the body creates an object called config which is stores our API key so we can identify which project we are trying to refer to in firebase. Finally, at the bottom, we are asking firebase to initialize the app.

Create a constant variable and store the database object inside it so that later on if we need to interact with the database it can be done by using this variable. The next thing we need to do is to modify some settings for this database object so that we do not get a warning error in the console. This setting works with snapshots of the firestore.

We call the javascript file (which processes the data) after defining the firestore database in HTML.

Getting Documents

We need to start interacting with our database and get the data that we have stored in our collection. First of all, we need to create a reference to the collection and then retrieve all the documents inside it. We are performing an asynchronous request which returns a promise. When we call the method we receive back a snapshot of the database. In case you are confused, a snapshot is the representation of data inside the collection at that instant.

In the javascript file execute the following code to make sure that your firebase connection is established. The data stored in the document will be displayed in the console of your browser.

To display this on the web page, we create an element in the HTML file with an ID where we need to display our data. This element can then be accessed with the ID.

Now we refer to this element in the javascript file using this ID.

We need to get data in the document and render it to the required element. For doing this we will create a function where some HTML elements will be created and we shall put data inside these elements which will finally render them to the DOM. We define an li tag in the javascript file that will be eventually sitting inside the ul tag which we have defined in the HTML file. Inside the li tag, we define span tags. Now we set an attribute to the li tag and which is the document ID. After that, we set the text content of these span tags. We then append these fields to the li tag and append the li tag to the document. We have finally displayed the data from the database.

You can check out how the entire code works on my GitHub repository — https://github.com/Aditi-Chowdhuri/Firebase.You can check out the README to see how the output looks like. If you have any queries feel free to respond to this blog. I will be glad to help.