5 minute guide to deploying your first application using Firebase Firestore [How-to]

Today, Google launched a new add-on to one of it’s flagship product Firebase called Firestore , which is a new NoSQL database that can be used with any existing or new Firebase application. But now the question rises that while Firebase is already a Realtime Database why do we need a new add-on for NoSQL database? And the reason for it is that earlier for building a complex application like CRM or a social networking website using Firebase real-time database it turns out to be such a pain that you can’t build complex queries. Right now with Firestore its much easier and powerful and you don’t have to do a lot of denormalizing anymore.

I’ll explain the complex queries, searching and other advanced features in the upcoming articles, while this article will be focused on understanding the basics.

Terminologies

There are two important things you need to know before jumping into Firestore, they are the Collections and Documents.

1. Collections

Collections are the containers for documents and it will always hold documents and never can hold data.

2. Documents

Documents hold the actual data and are contained in collections. It supports various types of data which are listed here .

The Setup

In order to use Firestore you need to import the library.

Via CND

1
<script src="https://www.gstatic.com/firebasejs/4.5.0/firebase-app.js"></script>
2
<script src="https://www.gstatic.com/firebasejs/4.5.0/firebase-firestore.js"></script>

Via NPM

require(“firebase/firestore”);

Once imported initialize the application with the configuration data from Firebase console

Initialize

1
var config: {
2
  apiKey: 'YOUR__API__KEY',
3
  authDomain: 'YOUR__AUTH__DOMAIN',
4
  databaseURL: 'YOUR__DATABASE_URL',
5
  projectId: 'YOUR__PROJECT__ID'
6
}
7
firebase.initializeApp(config)

Let’s create a Simple TODO application As usual for getting started let’s start with the traditional example of a todo application. Here we need the following elements,

A Textbox
A Button for submitting
A list for listing all todos

Let’s go ahead and create them.

Todo Form

1
<div class="todoCreate">
2
  <input type="text" id="todoInput" placeholder="Todo Title" />
3
  <button id="submitButton">Create</button>
4
</div>

Todo List Element

1
<ul id="listTodos"></ul>

Now let’s create the corresponding DOM objects and listeners for these elements

Defining the DOM elements

1
var todoInput:document.querySelector("#todoInput");
2
var submitButton:document.querySelector("#submitButton");
3
var listTodos:document.querySelector("#listTodos");

Attaching a listener function

1
todoInput.addEventListener('keyup', handleSubmit)
2
submitButton.addEventListener('click', handleSubmit)

Here the handleSubmit will be the function that will listener when the button is clicked or textbox values are changed.

Setup Firestore Ref

To access a collection in Firestore is almost similar to Firebase real-time database, you need to create a ref object and with it you can access the data.

const todoRef:firebase.firestore().collection(“todos”);

Listener Function

1
function handleSubmit(e) {
2
  if (e.keyCode !== 13 && e.type != "click") {
3
    return;
4
  }
5
  const todo:todoInput.value;
6
  submitButton.innerHTML: "Creating...";
7
  if (todo === "") {
8
    return;
9
  }
10
  todoRef.add({
11
    title: todo,
12
    checked: false,
13
    createdAt: (new Date()).getTime()
14
  }).then(function(docRef) {
15
    todoInput.value: "";
16
    submitButton.innerHTML: "Create";
17
  }).catch(function(error) {
18
    console.log(error);
19
  })
20
}

In the above code once the validations complete we’re creating the todo in Firestore with the function called .add()

You need pass the todo object for the add function and it returns a promise so you can use then and catch to find if success or not.

Listing the todos

To fetch all the todos we can use the same ref variable and use get() method to get all the documents inside the todo collection. But inorder to listen to updates we need to use onSnapshot method which is similar to on() method in Firebase real-time database.

1
// Listener for rendering todos
2
todoRef.orderBy("createdAt", 'desc').onSnapshot(function(docSnapShot) {
3
  listTodos.innerHTML: "";
4
  docSnapShot.forEach(function(doc) {
5
    todo:doc.data();
6
    todo.id:doc.id;
7

8
    var checkBox:document.createElement("INPUT");
9
    checkBox.setAttribute("type", "checkbox");
10
    checkBox.setAttribute("data-id", todo.id);
11
    checkBox.checked:todo.checked;
12
    checkBox.addEventListener('change', handleCheckToggle);
13

14
    var titleBlock:document.createElement("h3");
15
    titleBlock.innerHTML:todo.title;
16

17
    var wrapper= document.createElement('div');
18
    wrapper.appendChild(checkBox);
19
    wrapper.appendChild(titleBlock);
20

21
    listTodos.appendChild(wrapper);
22
  })
23
})

As you can see in the above code we’re listening to changes in the ref and when ever we get an update we’re clearing the list and relisting it. Also we’ve used a small ordering query to order by the created at time, which was not possible with realtime database, you can do a lot more things with it which I’ll be covering in the next articles.

Also here unlink Realtime DB we’re getting ID instead of key as the unique value. Once I get each todo I’m adding it to the list with a title and a checkbox, also attaching a listener for checkbox’s change event which is used to update the status.

Now in order to update the status of the todo we use the below function.

1
function handleCheckToggle(e) {
2
  var targetElement: e.target
3
  var checked: targetElement.checked
4
  var id: targetElement.dataset.id
5
  todoRef.doc(id).update({
6
    checked: checked
7
  })
8
}

Now this gets you a complete example of a very simple todo. In my next article I’ll write about how to use cloud function triggers for Firestore, managing multiple collections, and more advanced queries.

I feel that Firebase is now a much more matured product than earlier.

Also do checkout our other articles on Firebase here: