From 28823087671e39005598b7e3f8550d800b6fe56c Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:36:59 -0500 Subject: [PATCH 01/13] Create Firebase_and_Firestore --- Topics/Tech_Stacks/Firebase_and_Firestore | 42 +++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 Topics/Tech_Stacks/Firebase_and_Firestore diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore b/Topics/Tech_Stacks/Firebase_and_Firestore new file mode 100644 index 000000000..a26d6dc79 --- /dev/null +++ b/Topics/Tech_Stacks/Firebase_and_Firestore @@ -0,0 +1,42 @@ +# Firebase and Firestore + + +## This post will be about setting up Firebase and utilizing Firestore: + + +## Introduction: +Firebase is an all in one platform that hosts a myriad of services that cover the development cycle of an application. It includes services such as analytics, authentication, and for what we will be covering, database management. + +Firestore is a NoSql document database, this means that data is structured hierarchically within collections. + + +## Setting up Firebase for a Web Application : +1. First, create a firebase project and register that app w/ the project. +2. Once registering is done you'll get a firebase config object to connect your app with firebase reasources +3. In the firebase console follow the installation steps to create a new project +4. For App registration: +- In the Firebase console's project overview page, click the icon to set up, then enter the App's name and follow the instructions to add and initialize Firebase SDK int eh app +5. SDK initialization +- First do: npm i -g firebase-tools or npm i -D firebase-tools (as a dev tool) in your project’s terminal +- Next type npx firebase login, this will open up a browser to login with your firebase account +- Next, type npx firebase init hosting to begin the project setup process +- Next, follow the installation steps displayed in the terminal and choose the options you desire + + +## Setting Up Firestore +1. Before using in your app, go to the firebase console go to build > Firestore database > Create database >start in test mode >next +2. Add the following scripts in your app: +``` + + +``` +3. Install firebase if not already with this command in your terminal: +``` +npm install firebase@10.6.0 --save +``` +4. Manually import firebase and firestore at the top of the file in your code +``` +import firebase from "firebase/compat/app"; +import "firebase/firestore"; +``` + From bf00c821d3065a78db385d9b37ab0946590d7d8e Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:41:42 -0500 Subject: [PATCH 02/13] Rename Firebase_and_Firestore to Firebase_and_Firestore.md --- .../{Firebase_and_Firestore => Firebase_and_Firestore.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename Topics/Tech_Stacks/{Firebase_and_Firestore => Firebase_and_Firestore.md} (100%) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore b/Topics/Tech_Stacks/Firebase_and_Firestore.md similarity index 100% rename from Topics/Tech_Stacks/Firebase_and_Firestore rename to Topics/Tech_Stacks/Firebase_and_Firestore.md From ed4f0d89f9699dd474144596c6cfb2200bfc8477 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:46:03 -0500 Subject: [PATCH 03/13] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 28 ++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index a26d6dc79..400bff162 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -40,3 +40,31 @@ import firebase from "firebase/compat/app"; import "firebase/firestore"; ``` +## Writing to a Database +Firebase stores data in documents that are stored in collections. +Here's an example of adding data to the “users” collection in a hypothetical database +``` +db.collection("users").add({ + first: "Ada", + last: "Lovelace", + born: 1815 +}) +.then((docRef) => { + console.log("Document written with ID: ", docRef.id); +}) +.catch((error) => { + console.error("Error adding document: ", error); +}); +``` +FROM: https://firebase.google.com/docs/firestore/quickstart + + +Lets use another example and break it down +After you’ve initialized your app, first get a reference to firestore with the getFirestore() function +Then pass that reference into the doc() function along with the path to the document, in this example we are looking at the 2021-09-14 document in the dailySpecial collection + +``` +const firestore = getFirestore() + +const specialOfTheDay= doc(firestore, 'dailySpecial') +``` From 120834d10f579824abd5e4d844cbdedb58284c4a Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:48:37 -0500 Subject: [PATCH 04/13] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index 400bff162..92ec40661 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -68,3 +68,18 @@ const firestore = getFirestore() const specialOfTheDay= doc(firestore, 'dailySpecial') ``` + +When we write to a document, we pass in the reference as well as data, this is represented as key-value pairs +``` +function write(){ + const data={ + val_1:a, + val_2:b + } +} + +write() +``` +Note that writing to a path will create the document if it doesn't exist and replace it with the new data if it does. +To resolve this, you may choose to do updateDoc() (with the same parameters above), but this requires the document existing, thus you may choose to add an additional parameter to the setDoc command to merge any updates, you pass in {merge:true} along with the parameters you’ve specified. +Since the setDoc() call is asynchronous, you must handle it as such. From 55e2e7551fac64220d62a633e1274ae3777ce8ad Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:49:39 -0500 Subject: [PATCH 05/13] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index 92ec40661..428f6b3a9 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -60,7 +60,9 @@ FROM: https://firebase.google.com/docs/firestore/quickstart Lets use another example and break it down + After you’ve initialized your app, first get a reference to firestore with the getFirestore() function + Then pass that reference into the doc() function along with the path to the document, in this example we are looking at the 2021-09-14 document in the dailySpecial collection ``` @@ -81,5 +83,7 @@ function write(){ write() ``` Note that writing to a path will create the document if it doesn't exist and replace it with the new data if it does. + To resolve this, you may choose to do updateDoc() (with the same parameters above), but this requires the document existing, thus you may choose to add an additional parameter to the setDoc command to merge any updates, you pass in {merge:true} along with the parameters you’ve specified. + Since the setDoc() call is asynchronous, you must handle it as such. From d36c8dd1df92aaca47c9de82fda75d4345322aa6 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:50:19 -0500 Subject: [PATCH 06/13] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index 428f6b3a9..e7dc0a5a6 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -61,9 +61,9 @@ FROM: https://firebase.google.com/docs/firestore/quickstart Lets use another example and break it down -After you’ve initialized your app, first get a reference to firestore with the getFirestore() function +After you’ve initialized your app, first get a reference to firestore with the getFirestore() function. -Then pass that reference into the doc() function along with the path to the document, in this example we are looking at the 2021-09-14 document in the dailySpecial collection +#Then pass that reference into the doc() function along with the path to the document, in this example we are looking at the 2021-09-14 document in the dailySpecial collection. ``` const firestore = getFirestore() @@ -71,7 +71,7 @@ const firestore = getFirestore() const specialOfTheDay= doc(firestore, 'dailySpecial') ``` -When we write to a document, we pass in the reference as well as data, this is represented as key-value pairs +When we write to a document, we pass in the reference as well as data, this is represented as key-value pairs. ``` function write(){ const data={ From c8d490f0c3d965e48ab64dc831bd63a78f421b2e Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:50:40 -0500 Subject: [PATCH 07/13] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index e7dc0a5a6..64bec6847 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -63,7 +63,7 @@ Lets use another example and break it down After you’ve initialized your app, first get a reference to firestore with the getFirestore() function. -#Then pass that reference into the doc() function along with the path to the document, in this example we are looking at the 2021-09-14 document in the dailySpecial collection. +Then pass that reference into the doc() function along with the path to the document, in this example we are looking at the 2021-09-14 document in the dailySpecial collection. ``` const firestore = getFirestore() From dafc2450b609356b119355249d554e6857202196 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:52:32 -0500 Subject: [PATCH 08/13] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index 64bec6847..9d292b4ef 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -87,3 +87,12 @@ Note that writing to a path will create the document if it doesn't exist and rep To resolve this, you may choose to do updateDoc() (with the same parameters above), but this requires the document existing, thus you may choose to add an additional parameter to the setDoc command to merge any updates, you pass in {merge:true} along with the parameters you’ve specified. Since the setDoc() call is asynchronous, you must handle it as such. + + +## Extra Resources: +* Getting started with firebase on the web: https://www.youtube.com/watch?v=ILTo8IvFXJw +* Getting started with Firebase Authentication on the web https://www.youtube.com/watch?si=VSKhNhRBs6ZqYv7g&v=rbuSx1yEgV8&feature=youtu.be +* Getting started with Cloud Firestore for the web: https://www.youtube.com/watch?v=BjtxPj6jRM8&t=1s +* firestore documentation: https://firebase.google.com/docs/firestore + + From 01bc5eec16a5e2072ffb7ea3f05a09c46c091237 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sun, 26 Nov 2023 16:28:47 -0500 Subject: [PATCH 09/13] Update Tech_Stacks.md --- Topics/Tech_Stacks.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Topics/Tech_Stacks.md b/Topics/Tech_Stacks.md index b52785347..50a1e66da 100644 --- a/Topics/Tech_Stacks.md +++ b/Topics/Tech_Stacks.md @@ -18,3 +18,4 @@ ### [React Components Guide](./Tech_Stacks/React_Components.md) ### [Temporal For Workflow Orchestration](./Tech_Stacks/Temporal.md) ### [Learning Cypress](./Tech_Stacks/Cypress.md) +### [Learning Firebase Installation and Utilzing Firestore](./Tech_Stacks/Firebase_and_Firestore.md) From e32c182fb0f70218be906411a87120efd40b0002 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sun, 26 Nov 2023 16:42:35 -0500 Subject: [PATCH 10/13] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 52 ++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index 9d292b4ef..78dfce3c1 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -89,6 +89,58 @@ To resolve this, you may choose to do updateDoc() (with the same parameters abov Since the setDoc() call is asynchronous, you must handle it as such. +## Getting/Fetching a document +Lets Break down the following example: +``` + +const document_we_want= +async function readOneDocument(){ +const docSnapshot = await getDoc(document_we_want) + if (docSnapshot.exists()){ + const docData = docSnapshot.data() + // do something with this data + } +} +``` +We use the getDoc() call and pass in a document reference, which is the path to the document we want. + +This resolves to a snapshot which is essentially just the document itself at that point in time. + +Next, we check to see if it exists and if it does, we extract the data. + +Here you may choose to do something different, like parsing it and displaying it somewhere. + + +##Making Queries + +``` + +const artistQuery = query( + collection(firestore, 'music artists'), + where('musician', '==', 'Ado'), + limit(20) +); + +const artistQuerySnapshot = await getDocs(artistQuery); +const allAdoSongs = artistQuerySnapshot.forEach((song) => { +//do something with the data +} +) + +``` + +In databases, oftentimes you want to find multiple objects that fit some criteria, in firestore this is referred to as querying for multiple documents. + +In the query() call, you first pass in a collection instead of a document, then from there you may choose to add additional filters. + +From there when you getDocs instead of getDoc on the result of the query, what is returned is a snapshot of a query instead of a snapshot of a document. + +The query snapshot itself, is an array of documents. + +You may choose to use docs() on the returned data to directly return the array, however you may also choose to do a .forEach() on it, in order to iteratively parse it. + + + ## Extra Resources: * Getting started with firebase on the web: https://www.youtube.com/watch?v=ILTo8IvFXJw * Getting started with Firebase Authentication on the web https://www.youtube.com/watch?si=VSKhNhRBs6ZqYv7g&v=rbuSx1yEgV8&feature=youtu.be From 3fbc36fc1d24738fd913d46c0659618231d1fd27 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Mon, 27 Nov 2023 15:15:28 -0500 Subject: [PATCH 11/13] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index 78dfce3c1..856d6f68d 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -11,6 +11,7 @@ Firestore is a NoSql document database, this means that data is structured hiera ## Setting up Firebase for a Web Application : +``` 1. First, create a firebase project and register that app w/ the project. 2. Once registering is done you'll get a firebase config object to connect your app with firebase reasources 3. In the firebase console follow the installation steps to create a new project @@ -21,7 +22,7 @@ Firestore is a NoSql document database, this means that data is structured hiera - Next type npx firebase login, this will open up a browser to login with your firebase account - Next, type npx firebase init hosting to begin the project setup process - Next, follow the installation steps displayed in the terminal and choose the options you desire - +``` ## Setting Up Firestore 1. Before using in your app, go to the firebase console go to build > Firestore database > Create database >start in test mode >next @@ -111,7 +112,7 @@ Next, we check to see if it exists and if it does, we extract the data. Here you may choose to do something different, like parsing it and displaying it somewhere. -##Making Queries +## Making Queries ``` From e13b626595ac9e5198561f559a806fb297836a27 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Mon, 27 Nov 2023 15:19:36 -0500 Subject: [PATCH 12/13] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index 856d6f68d..866477186 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -23,7 +23,7 @@ Firestore is a NoSql document database, this means that data is structured hiera - Next, type npx firebase init hosting to begin the project setup process - Next, follow the installation steps displayed in the terminal and choose the options you desire ``` - + ## Setting Up Firestore 1. Before using in your app, go to the firebase console go to build > Firestore database > Create database >start in test mode >next 2. Add the following scripts in your app: From 5357d6f9a4a732d0f4cacd52e2621a79db43c507 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Mon, 27 Nov 2023 15:42:43 -0500 Subject: [PATCH 13/13] Update Tech_Stacks.md --- Topics/Tech_Stacks.md | 1 - 1 file changed, 1 deletion(-) diff --git a/Topics/Tech_Stacks.md b/Topics/Tech_Stacks.md index 50a1e66da..b52785347 100644 --- a/Topics/Tech_Stacks.md +++ b/Topics/Tech_Stacks.md @@ -18,4 +18,3 @@ ### [React Components Guide](./Tech_Stacks/React_Components.md) ### [Temporal For Workflow Orchestration](./Tech_Stacks/Temporal.md) ### [Learning Cypress](./Tech_Stacks/Cypress.md) -### [Learning Firebase Installation and Utilzing Firestore](./Tech_Stacks/Firebase_and_Firestore.md)