Lesson-04-Firebase

Firebase provides a back-end as a service to our apps.

  • Data storage, authentication, hosting, storage etc.

Firestore

  • One of the service provided by Firebase

  • A NoSQL database to store data

  • Contanins collections of documents

  • Allows us to update our app in real-time

Collection & Documents

  • Firestore database

..code-block:: bash

users projects chats cafes ratings

  • Project Collection

ABC123DEF456
JKH378SVD213
LXM346HQI712
PQC891DOK119

  • Single Document

{
    title: 'make site'
    due: '7th Dec 18'
    person: 'Yoshi'
    status: 'ongoing'
}

Set Firestore

Go: https://firebase.google.com/

Choose Cloud Firebase

Go to console

Then create a new project

my firebase: https://console.firebase.google.com/u/0/project/todo-skycoco/firestore/data/~2Fprojects~2F3tLTsx9ggcJmtX80Qeu5

Connect firebase

  1. install a package

1npm install firebase

  1. Install Firebase CLI

1npm install -g firebase-tools
2
3//for mac:
4sudo npm install -g firebase-tools

  1. Deploy to Firebase Hosting

1firebase login
2
3firebase init
4
5firebase deploy

  1. configuration

See the origin file, (click this link to download a copy of this file)

 1// Import the functions you need from the SDKs you need
 2import { initializeApp } from "firebase/app";
 3import {
 4  getFirestore,
 5  doc,
 6  setDoc,
 7  collection,
 8  query,
 9  getDoc,
10  getDocs,
11  onSnapshot,
12} from "firebase/firestore";
13// import { collection, addDoc } from "firebase/firestore";
14
15// collection, getDocs
16
17// TODO: Add SDKs for Firebase products that you want to use
18// https://firebase.google.com/docs/web/setup#available-libraries
19
20// Your web app's Firebase configuration
21// For Firebase JS SDK v7.20.0 and later, measurementId is optional
22const firebaseConfig = {
23  apiKey: "AIzaSyDWSPczHahPzcS0m4y5MZ0sG09g8HVE-8w",
24  authDomain: "todo-skycoco.firebaseapp.com",
25  projectId: "todo-skycoco",
26  storageBucket: "todo-skycoco.appspot.com",
27  messagingSenderId: "373352697464",
28  appId: "1:373352697464:web:d46a8d1a6ac7ebbfaf278d",
29  measurementId: "G-6J9FFH8WYP",
30};
31
32// Initialize Firebase
33initializeApp(firebaseConfig);
34const db = getFirestore();
35
36// const doc_aaa = doc(db, "projects/aaa");
37
38// const project = {
39//   title: "this.title",
40//   content: "this.content",
41//   due: 'format(new Date(this.due), "do MMM yyyy")',
42//   person: "Skycoco",
43//   status: "ongoing",
44// };
45
46// setDoc(doc_aaa, project, { merge: true });
47
48// another way to add docs
49// const ordersCollection = collection(db, "projects");
50// addDoc(ordersCollection, project);
51
52// get sigle doc
53// getDoc(doc_aaa).then((res) => {
54//   if (res.exists()) {
55//     console.log(res.data());
56//   }
57// });
58
59//get multiple docs
60// getDocs(query(collection(db, "projects"))).then((res) => {
61//   res.forEach((doc) => {
62//     console.log(doc.data());
63//   });
64// });
65// const all = query(collection(db, "projects"));
66
67// onSnapshot(all, (docSnapshot) => {
68//   // console.log(JSON.stringify(docSnapshot.docs.map((e) => e.data())));
69//   docSnapshot.docs.map((e) => console.log(e.data()));
70// });
71
72// onSnapshot(doc_aaa, (docSnapshot) => {
73//   if (docSnapshot.exists()) {
74//     console.log(docSnapshot.data());
75//   }
76// });
77
78export { doc, db, setDoc, collection, query, getDocs, getDoc, onSnapshot };

see more:

https://firebase.google.com/docs/web/setup#available-libraries

https://firebase.google.com/docs/firestore/quickstart

  • for add docs, use setDoc and addDoc

 1const db = getFirestore();
 2const project = {
 3        title: "this.title",
 4        content: "this.content",
 5        due: 'format(new Date(this.due), "do MMM yyyy")',
 6        person: "Skycoco",
 7        status: "ongoing",
 8    };
 9
10// first way
11setDoc(doc_aaa, project, { merge: true });
12
13// another way to add docs
14const ordersCollection = collection(db, "projects");
15addDoc(ordersCollection, project);

  • for get docs, use getDoc

 1// get sigle doc
 2getDoc(doc_aaa).then((res) => {
 3    if (res.exists()) {
 4        console.log(res.data());
 5    }
 6});
 7
 8//get multiple docs
 9getDocs(query(collection(db, "projects"))).then((res) => {
10    res.forEach((doc) => {
11        console.log(doc.data());
12    });
13});

Notice: the projects here is the collection in firebase

  • listen docs

 1// signle
 2onSnapshot(doc_aaa, (docSnapshot) => {
 3    if (docSnapshot.exists()) {
 4        console.log(docSnapshot.data());
 5    }
 6});
 7
 8// multiple
 9const all = query(collection(db, "projects"));
10
11onSnapshot(all, (docSnapshot) => {
12// console.log(JSON.stringify(docSnapshot.docs.map((e) => e.data())));
13docSnapshot.docs.map((e) => console.log(e.data()));
14});