dsc-firestore-tut

A tutorial to using Firestore by creating a todo list web application.

Overview

We are using Vanilla JS and Materialize component library.

We imported Javascript modules directly in the HTML, as this serves as a simple tutorial to Firestore.

We also used Live Server to serve locally and provide Hot-Reloading (i.e. not needing to refresh after changes).

• We invoke a listener on collection and renders all the documents to DOM while storing the id of the retrieved documents using renderToDo(doc) function.
• We have listeners on the rendered elements, and on click on CheckButton (specifically CheckIcon), we apply a strikethrough using CSS.
• On click on CancelButton (specifically CancelIcon), we delete document by id from collection using deleteToDo(id) function.
• Once the document is deleted, collection listener invokes a function, and judging from the removed type, we remove element from DOM using deleteToDoElementById(id) function.
• On form submission, we add document to collection. Similar to deletion, we get the added type, and renders the element to DOM using renderToDo(doc) function.

Serve locally

Either use Live Server,

Or open index.html on any browser.

Setup

Firestore initilization

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

Read more here.
Or refer to the visual guide below.

var firebaseConfig = {
    apiKey: "AIzaSyBBbedJiIvULmuHx_NKF_8THwml7prtWLc",
    authDomain: "fir-tutorial-to-do-list.firebaseapp.com",
    projectId: "fir-tutorial-to-do-list",
    storageBucket: "fir-tutorial-to-do-list.appspot.com",
    messagingSenderId: "251747964145",
    appId: "1:251747964145:web:fbe949c1096b8cea4dc550"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Create ref to firestore database
const db = firebase.firestore()

Adding document

This adds a document to the collection todos with the field Description of someValue (both field and value are case sensitive), id would be auto generated.

db.collection("todos").add({
    Description: "someValue"
  });

Removing document

This statement removes the document with specified id from the collection todos.

db.collection("todos").doc(id).delete();

Get documents inside a collection

This statement gets all the documents inside the todos collection.

db.collection("todos")
  .get()
  .then((snapshot) => {
    snapshot.docs.forEach((doc) => {
      // Do something to document
    });
  });

Listens for collection changes

This monitor changes to collection todos, and invoke this statement when a change is detected.
It is far more useful than the previous approach.
This statement also returns all the documents in the collection on initialization.

// Triggers every time collection changes
db.collection("todos").onSnapshot((snapshot) => {
  let changes = snapshot.docChanges();
  // Do something 
});

Firestore Setup Visual Walkthrough (Textual guide here)

The only differences to the todo app is the naming.

Lets go to Firebase/Cloud Firestore webpage,
and click on Go to console.

Then we can create a new project by clicking Create a project.

Then we can name our project.
It is named Some-Project here.

We could choose to enable Google Analytics (we didn't enable it for this project as this is not outward facing).

Some options if you chose to enable Google Analytics.
Press Create project to finish creation.

It would take some time to create your project.

And now the project creation is done!
Press Continue to continue.

Now we can choose some application type for our project.
In this example, we are making a Web Application so we choose Web.

Now we register our application name Some-Project (it is a terrible name, it should be Some-Application..
Regardless, now Register app.
One can also host the application on Firebase Hosting.

We were shown with this page, and we can/need to insert them into our source files, we chose to insert them into the HTML.
Reason? This would serve as an introduction, and we are lazy :U

Now that we have registered our application, we can Create Database through Firestore Database.
One could expand this option from the bottom left.

We will be creating a database using the rules of test mode.
We could change that afterwards when we finished our testing.

As in here (https://console.firebase.google.com/u/1/project/some-project/firestore/rules).
Note that the URL might be different from your project name.

Regardless, we keep on moving forward!
Now we can select the region for our database.
Check your requirements and regulations.

Enable and our Cloud Firestore is live!

Now, we can call it quits here, or we can try to add some collections or documents.
Here we create a collection named Some-Collection.

Now we add a document.
We can use Auto-ID because why not, am I right?
Well, there's a reason we use password generator instead of thinking them ourselves, and it would spell doom to have the ids easily reverse-engineered.

Now let's declare a Field of Some-Field with the type string and value of Some-Value.
Save and done!

And there goes our collection!

Now we can just do addition/deletion/modification etc!
Congratulations!