Repository files navigation

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

We are using Vanilla JS andMaterialize component library.

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

We also usedLive Server to serve locally and provideHot-Reloading (i.e. not needing to refresh after changes).

• We invoke a listener on collection and renders all the documents to DOM while storing theid of the retrieved documents usingrenderToDo(doc) function.
• We have listeners on the rendered elements, and onclick onCheckButton (specifically CheckIcon), we apply a strikethrough using CSS.
• Onclick onCancelButton (specifically CancelIcon), we delete document by id from collection usingdeleteToDo(id) function.
• Once the document is deleted, collection listener invokes a function, and judging from theremovedtype, we remove element from DOM usingdeleteToDoElementById(id) function.
• Onform submission, we add document to collection. Similar to deletion, we get theaddedtype, and renders the element to DOM usingrenderToDo(doc) function.

Either useLive Server,

Or openindex.html on any browser.

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

Read morehere.
Or refer to the visual guide below.

varfirebaseConfig={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 Firebasefirebase.initializeApp(firebaseConfig);// Create ref to firestore databaseconstdb=firebase.firestore()

This adds a document to the collectiontodos with thefieldDescription ofsomeValue (bothfield andvalue are case sensitive),id would be auto generated.

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

This statement removes the document with specifiedid from the collectiontodos.

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

This statement gets all the documents inside thetodos collection.

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

This monitor changes to collectiontodos, 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 changesdb.collection("todos").onSnapshot((snapshot)=>{letchanges=snapshot.docChanges();// Do something});

The only differences to thetodo app is the naming.

Lets go to Firebase/Cloud Firestorewebpage,
and click onGo to console.

Then we can create a new project by clickingCreate a project.

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

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

Some options if you chose to enableGoogle Analytics.
PressCreate project to finish creation.

It would take some time to create your project.

And now the project creation is done!
PressContinue to continue.

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

Now we register our application nameSome-Project (it is a terrible name, it should beSome-Application..
Regardless, nowRegister app.
One can also host the application onFirebase Hosting.

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

Now that we have registered our application, we canCreate Database throughFirestore Database.
One could expand this option from the bottom left.

We will be creating a database using the rules oftest 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 theURL might be different from yourproject name.

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

Enable and ourCloud Firestore is live!

Now, we can call it quits here, or we can try to add somecollections ordocuments.
Here we create acollection namedSome-Collection.

Now we add adocument.
We can useAuto-ID because why not, am I right?
Well, there's a reason we usepassword generator instead of thinking them ourselves, and it would spell doom to have theids easily reverse-engineered.

Now let's declare aField ofSome-Field with thetypestring andvalue ofSome-Value.
Save and done!

And there goes our collection!

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