DB Schema and Firebase Hookup

Hello reader, hope you are doing well.

In the previous article, we worked on the template. Now in this

article, we will learn to take input from the user and to store that
data in our database, and last we will also fetch all the data in
real-time from the database.

So let’s begin this awesome learning process.

OKAY reader,

As we will take input from the user, we will have to store the user
input data somewhere, so that later retrieve that data to create
the visualisation.

To store the data, we will use the Firestore Database.

In this article, we are not going to learn about the Firebase

hookup from scratch, as we have already discussed it in-depth in
the past article.

If you have no idea about the Firebase or have any confusion

around this, then I will request you to go through the Firebase
Hookup article first.

As we are taking item name and item cost as input, so for each
item we will create an object which will have two keys: name and
cost.

We will have a collection named investment in which we will store

all these item objects.
Let’s open the Firebase console.

We will be using the same d3-course project.

As discussed, let’s create a collection named “investment”.

Now we have to link the firestore with our project.

To link the firestore we will copy the configuration and paste it at

the bottom of our HTML document body.

Along with the configuration, I have added a few more things,

you can learn about them in the Firebase Hookup article.

For this project, I have created two JS files. One for DOM and
another for D3.
We will write the logic to take input in the “script.js” file, and will
write the logic to display the output in the “graph.js” file.

Now let’s write the logic to take input from the user

● Taking User Input

Let’s select the form and apply a submit event to it.

On submit we have to get the value of name and cost and we will
store these values in an object.

This will be the code to do this work:

Now let’s take the input and view it on the developer console.
With this, we are able to take the input from the user.

But here we have some challenges, the first is we are getting the
cost in string.

We can easily convert it to a number by using the “parseInt”

method.

Now let’s move to the bigger challenge, the challenge is to

prevent the user from entering the wrong data.

We don’t want the name and cost to be empty, and we do not

want the cost to be NaN.

OKAY, now let’s apply some checks so that we get the correct
input.

The above code will now ensure that we get the expected input
each time.

If a user provides the wrong input, he/she will get an alert to

enter the correct values.
Now our task is to store the user input in the firstore database.

● Storing input in the Firestore database

We have already linked the firestore to our web app, so we have

the reference of the database (db).

Our current work is to send the item object (which we have

created from the user input) in the “investment” collection we
have created.

We can do this work by using the add() function.

Now let’s give input and check the “investment” collection

Here we can see that a document is created and stored in the
collection based on the user input.

OKAY!!!

What we have accomplished till now?

By now we are able to take the correct input from the user and
able to store that in the firestore database.

In short, we are able to create the database.

Now let’s read the data

● Fetching data in real-time

From the Firestore Hookup article, we know how to get and

locally store the data from the database based on the addition,
modification, and deletion event.
Now again, If you are not aware of this, I will request you to go
through the Firebase Hookup article.

I have written this code in the “graph.js” file. As we have decided

to write the code related to the output in this file.

Here we have a values array and we are pushing the document

data in it based on the change type.

Let’s log this values array:

Here we can see that we have successfully fetched the data from
the database.

OKAY!!!

Let’s quickly see what we have accomplished till now:

We can take the correct input from user, we can store the input
to the firestore database and we can now also fetch the stored
data in real-time.

Now the next task is to create the visualization from this data.

That will be the end of this article, will meet you again in another
article. Till then keep learning, keep exploring and keep
practicing.

Thanks