Cloud Firestore is a NoSql database and this is my first time in Firebase world’s schema-less databases. This article should help to those who would like to get a grip on NoSql databases and who would also like to practice React programming further.

If you have no idea about NoSql databases, I recommend you to watch the video below:

What do we build in this tutorial?

Let’s have a vision of what we are actually developing here. The name of my application is show-cities-firebase and the whole source code is in my github repository. Besides, the app will have following features:

  • Connecting React app with Cloud Firestore database (Not Realtime Database)
  • Keep three attributes for each record
    • ID
    • City name
    • Population
  • List city names and corresponding population data
  • Sort the list by population
  • Delete specific city record
  • Delete all cities

Cloud Firestore Configuration

To start with, you need to include Firebase console access to your regular Google Account (same as gmail account). You may try to get it via https://console.firebase.google.com. And the same console address will help you follow your storage while we are working further. In other words, you will see your data collections under the console. See the GIF animation below to understand what I mean.

console_firebase_collections_example
Checking out Cloud Firestore Collections on console

The next thing you should do is to set up your config input. You must fill in the content regarding your account credentials. I keep this info inside my fire.js file.

Screen Shot 2019-04-22 at 11.57.45
fire.js

And I eventually import the configuration file inside my App.js:

import fire from './fire';

As you see in the picture above, you also need database.rules.json and firebase.json files. Add them to your project as I did in github repository. And we are ready to pull and push data.

Insert City Data

See how the constructor code looks like.

Screen Shot 2019-04-22 at 12.06.06

I keep the cities as an array inside of the state and the cities array contains the required data fields such as id, city and population. I think sortASC attribute’s task is apparent and I initialise the app with maxID = -1 value. Firebase databases do not provide auto-increment feature like in MySql or Oracle databases. Instead, you should do this manually. Therefore, I need maxID to auto-increment ID value for new city records. When the app starts, this value is updated with the highest ID. I call the function below on componentDidMount().

Screen Shot 2019-04-22 at 12.11.18

updateMaxID will return -1 unless there is some data in my collection. However, if there are earlier city records, it sorts the collections in descending order and picks the first top one thanks to the line below:

let maxIdItem = dbCollection.orderBy("id", "desc").limit(1);

After explaining how I set up my application state, let’s see how to insert some data into our collection. Take a look at my render code:

Screen Shot 2019-04-22 at 12.17.02

The application basically has two textboxes – city and population. I use required keyword for data validation, because I do not want any record either without a city name nor population. In addition to that, we have a tiny button which triggers this.addCity() on form submit.

Screen Shot 2019-04-22 at 19.27.03

This is the function where we implement the auto-increment of ID. I refer to this.state.maxID and increment it by 1. After inserting my new record into Cloud Firestore, I call this.updateMaxID().

You must have noticed that population and city ID values are parsed to integer before sending them into the database. This is necessary for sorting implementations and if you do not specify the type of the data, Firebase will store those values as String. Moreover, unlike relational databases, Firebase does not apply strict type rules. Therefore, one record may store the population value as String and while the next one stores it as integer. This is legal in NoSql world 🙂

In the last two lines of this.addCity(), I simply reset the textboxes with empty string. See the sample use below:

react_firebase_city_population_tutorial
Sample output
react_firebase_validation_required_example
Validation example

Listing records

Since we are able to insert some records into our collection, we had better list them as well. To do that, I wrote a function called this.loadCities() which pulls the data into application state.

Screen Shot 2019-04-22 at 20.03.32

The function above does not render the records. Therefore, I wrote another function which lists the city data and it also handles the sorting operations – this.createCitiesTable().

I will skip the implementation of other features. You may try to implement the rest on your own as a homework. If you get stuck, the github repository is always at your service.

Sercan Leylek / OSLO

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s