From aa45783fc279eacc7b9b4f1db08a5ccc9639685e Mon Sep 17 00:00:00 2001 From: Yasamin Nouri Jelyani Date: Sun, 19 Mar 2023 22:48:20 -0400 Subject: [PATCH 1/3] created skeleton for firebase tutorial --- Topics/Development_Process.md | 6 ++++++ .../firebase/firebase_authentication.md | 10 ++++++++++ .../firebase/firebase_hosting.md | 14 ++++++++++++++ .../firebase/firebase_realtimeDB.md | 14 ++++++++++++++ 4 files changed, 44 insertions(+) create mode 100644 Topics/Development_Process/firebase/firebase_authentication.md create mode 100644 Topics/Development_Process/firebase/firebase_hosting.md create mode 100644 Topics/Development_Process/firebase/firebase_realtimeDB.md diff --git a/Topics/Development_Process.md b/Topics/Development_Process.md index f8e44651e..d7882c8ce 100644 --- a/Topics/Development_Process.md +++ b/Topics/Development_Process.md @@ -5,6 +5,12 @@ ## Build requirements ### [Requirements.txt](./Development_Process/Build_Requirements/Requirements_txt.md) +### [Firebase Hosting](./Development_Process/evelopment_Process/firebase/firebase_hosting.md) + +### [Firebase Authentication](./Development_Process/firebase/firebase_authentication.md) + +### [Firebase RealtimeDB](./Development_Process/firebase/firebase_realtimeDB.md) + ## SOLID PRINCIPLES: SOLID is a mnemonic acronym that represents a set of five very important software development principles which lead to code that is easier to read, maintain, and extend, leading to higher-quality software that is easier to evolve over time. diff --git a/Topics/Development_Process/firebase/firebase_authentication.md b/Topics/Development_Process/firebase/firebase_authentication.md new file mode 100644 index 000000000..0233e47fa --- /dev/null +++ b/Topics/Development_Process/firebase/firebase_authentication.md @@ -0,0 +1,10 @@ +# Using Firebase Authentication +## Table of Contents: +### [Introduction](#introduction-1) +### [Step By Step Tips](#Step_By_Step_Tips-1) +### [External Resources](#External_Resources-1) + +## Introduction + + +## External Resources diff --git a/Topics/Development_Process/firebase/firebase_hosting.md b/Topics/Development_Process/firebase/firebase_hosting.md new file mode 100644 index 000000000..ccc374a56 --- /dev/null +++ b/Topics/Development_Process/firebase/firebase_hosting.md @@ -0,0 +1,14 @@ +# Using Firebase Hosting +## Table of Contents: +### [Introduction](#introduction-1) +### [Step By Step Tips](#Step_By_Step_Tips-1) +### [External Resources](#External_Resources-1) + +## Introduction + + + +## Step By Step Tips + + +## External Resources diff --git a/Topics/Development_Process/firebase/firebase_realtimeDB.md b/Topics/Development_Process/firebase/firebase_realtimeDB.md new file mode 100644 index 000000000..92a70c841 --- /dev/null +++ b/Topics/Development_Process/firebase/firebase_realtimeDB.md @@ -0,0 +1,14 @@ +# Using Firebase Realtime Database +## Table of Contents: +### [Introduction](#introduction-1) +### [Step By Step Tips](#Step_By_Step_Tips-1) +### [External Resources](#External_Resources-1) + +## Introduction + + + +## Step By Step Tips + + +## External Resources From ef7202a43f8b3b0ba29d2a472dac822a933d822f Mon Sep 17 00:00:00 2001 From: Yasamin Nouri Jelyani Date: Sun, 19 Mar 2023 22:49:40 -0400 Subject: [PATCH 2/3] added firebase tutorials --- .../firebase/firebase_authentication.md | 8 ++ .../firebase/firebase_hosting.md | 37 ++++++++ .../firebase/firebase_realtimeDB.md | 91 +++++++++++++++++++ 3 files changed, 136 insertions(+) diff --git a/Topics/Development_Process/firebase/firebase_authentication.md b/Topics/Development_Process/firebase/firebase_authentication.md index 0233e47fa..5a2acac0e 100644 --- a/Topics/Development_Process/firebase/firebase_authentication.md +++ b/Topics/Development_Process/firebase/firebase_authentication.md @@ -6,5 +6,13 @@ ## Introduction +If you are building a website that requires login, and you wish to allow users to securely login with username and password, a google account, facebook account, etc. then you can use firebase authentication! + +First, you will need to login to [Firebase](https://firebase.google.com/), click the console button on the top right corner, create a new project as instructed, under build, click on authentication. Then, follow the instruction in the source linked under the external resources section below which will help you in setting up authentication for users in firebase. + ## External Resources +Below is a tutorial in learning the firebase authentication. +You can perform authentication of the users using Email and Password, Facebook, google, and much more. See the website tutorial for more details. + +[Firebase Authentication](https://firebase.google.com/docs/auth/web/start ) diff --git a/Topics/Development_Process/firebase/firebase_hosting.md b/Topics/Development_Process/firebase/firebase_hosting.md index ccc374a56..e5ffb634a 100644 --- a/Topics/Development_Process/firebase/firebase_hosting.md +++ b/Topics/Development_Process/firebase/firebase_hosting.md @@ -6,9 +6,46 @@ ## Introduction +If you want a free and reliable resource to deploy you webapp, ios, android, etc. +you can use firebase! +First, you will need to login to [Firebase](https://firebase.google.com/), click the console button on the top right corner, create a new project as instructed, under build, click on Hosting. ## Step By Step Tips +You can deploy your website using firebase, and have a URL that users can click on to access your website. + + +To set up firebase hosting for your project, in your local repository, run the following command in your terminal: + +``` +npm i firebase -tools -D +``` +The above command is not what is given on the firebase console, but from experience, this results in no errors down the line. + +This creates a node_modules folder that you will use for later commands. + +To initialize your project, run + +``` +node_modules/.bin/firebase login +``` +and later run: +``` +node_modules/.bin/firebase init +``` +To see your website on localhost, run + +``` +node_modules/.bin/firebase serve +``` + +When you are ready to deploy your website, run +``` +node_modules/.bin/firebase deploy +``` +Using the node_modules folder will reduce many potential errors that may arise. Otherwise, you can follow the step by step guide that the firebase website provides itself. ## External Resources +Below is a tutorial in learning the firebase Hosting. It goes through step by step, how to set up your hosted website. +[Firebase Hosting Tutorial](https://firebase.google.com/docs/hosting) \ No newline at end of file diff --git a/Topics/Development_Process/firebase/firebase_realtimeDB.md b/Topics/Development_Process/firebase/firebase_realtimeDB.md index 92a70c841..01025ac21 100644 --- a/Topics/Development_Process/firebase/firebase_realtimeDB.md +++ b/Topics/Development_Process/firebase/firebase_realtimeDB.md @@ -6,9 +6,100 @@ ## Introduction +Do you want to use a NoSQL database(DB)? Then you can use firebase Realtime DB. However, using the Firebase Firestore Database is better to use for long term data storage. But for starters, learning Firebase Realtime DB is essential. +The data in firebase realtime database is stored in JSON-like objects. +What is NoSQL Database? It is a database that does not have the stringency and rules of a SQL database. NoSQL database is more commonly used when you are handling a lot of data that might not have a perfect structure (unstructured or semi-structured). + +To set up firebase, first, you will need to login to [Firebase](https://firebase.google.com/), click the console button on the top right corner, create a new project as instructed, under build, click on Realtime Database. ## Step By Step Tips +I will demosntrate tips to get started on the firebase realtime database using the example below: + +To store values in the firebase realtimeDB, you must first have your project front end in place. Then, you will create a JS file, and start writing code in that file to create a connection to the database, similar to the structure of the code below: + +Let us say that my HTML page contains two buttons with ids #startbtn and #stopbtn. When the user hits the start button, I want to record the current time in the database, and when the user clicks on the stop button, I want the new current time to be placed in the database under the same user. I will also ask the user for an ID in the field with ID #enterID to save their start and stop times under their ID of choice. + +Hence, I will have the code below: +First, initialize the database: +``` +// Import the functions you need from the SDKs you need + import { initializeApp } from + "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js"; + + // Your web app's Firebase configuration + const firebaseConfig = { + // this section, you will get from your firebase console + }; + + // Initialize Firebase + const app = initializeApp(firebaseConfig); + + import {getDatabase, set, get, update, remove, ref, child} + from 'https://www.gstatic.com/firebasejs/9.17.1 + firebase-database.js' + + const db = getDatabase(); +``` +Then, put variables for the start button, stop button, and enterID values. +``` + var startbtn = document.querySelector('#startbtn'); + var stopbtn = document.querySelector("#stopbtn"); + + var enterID = document.querySelector("#enterID"); +``` + +Add event listeners for when the buttons are pressed, which call the functions saveStartTime and saveEndTime. + +saveStartTime will save the current start time under the Tasks/ID container. + +``` + startbtn.addEventListener('click', saveStartTime); + stopbtn.addEventListener('click', saveEndTime); + + function saveStartTime() { + set(ref(db, "Tasks/" + enterID.value), { + //I will trivially define the end time here as well + StartTime: Date.now(), + EndTime: Date.now(), + + }) + .then(()=> { + alert("Data added successfuly!"); + }) + .catch((error)=>{ + alert(error); + }); + + } + + function saveEndTime() { + update(ref(db, "Tasks/" + enterID.value), { + EndTime: Date.now(), + + }) + .then(()=> { + alert("Data updated successfuly!"); + }) + .catch((error)=>{ + alert(error); + }); + + } + + +``` + +Now, When the user clicks the start button, the current time is saved, and lateron when they click the stop button, the next current time is saved. + +Make sure to add the JS file to the file containing the frontend (in my case, an HTML page) +``` + + +``` ## External Resources +Below is a tutorial in learning the firebase realtime database. It goes through step by step, how to set up your realtime database. + +[Tutorial](https://firebase.google.com/docs/database) \ No newline at end of file From f2de35b3375404f67f3975a681d77b4f430075e0 Mon Sep 17 00:00:00 2001 From: Yasamin Nouri Jelyani Date: Sun, 19 Mar 2023 22:58:31 -0400 Subject: [PATCH 3/3] editted firebase resources --- Topics/Development_Process.md | 4 +++- .../Development_Process/firebase/firebase_authentication.md | 3 ++- Topics/Development_Process/firebase/firebase_realtimeDB.md | 3 ++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/Topics/Development_Process.md b/Topics/Development_Process.md index d7882c8ce..24ef89756 100644 --- a/Topics/Development_Process.md +++ b/Topics/Development_Process.md @@ -5,7 +5,9 @@ ## Build requirements ### [Requirements.txt](./Development_Process/Build_Requirements/Requirements_txt.md) -### [Firebase Hosting](./Development_Process/evelopment_Process/firebase/firebase_hosting.md) +## Firebase + +### [Firebase Hosting](./Development_Process/firebase/firebase_hosting.md) ### [Firebase Authentication](./Development_Process/firebase/firebase_authentication.md) diff --git a/Topics/Development_Process/firebase/firebase_authentication.md b/Topics/Development_Process/firebase/firebase_authentication.md index 5a2acac0e..09e68ecf4 100644 --- a/Topics/Development_Process/firebase/firebase_authentication.md +++ b/Topics/Development_Process/firebase/firebase_authentication.md @@ -12,7 +12,8 @@ First, you will need to login to [Firebase](https://firebase.google.com/), click ## External Resources -Below is a tutorial in learning the firebase authentication. +Below is a tutorial in learning the firebase authentication on websites. You can perform authentication of the users using Email and Password, Facebook, google, and much more. See the website tutorial for more details. [Firebase Authentication](https://firebase.google.com/docs/auth/web/start ) + diff --git a/Topics/Development_Process/firebase/firebase_realtimeDB.md b/Topics/Development_Process/firebase/firebase_realtimeDB.md index 01025ac21..b80dbf13f 100644 --- a/Topics/Development_Process/firebase/firebase_realtimeDB.md +++ b/Topics/Development_Process/firebase/firebase_realtimeDB.md @@ -6,7 +6,7 @@ ## Introduction -Do you want to use a NoSQL database(DB)? Then you can use firebase Realtime DB. However, using the Firebase Firestore Database is better to use for long term data storage. But for starters, learning Firebase Realtime DB is essential. +Do you want to use a NoSQL database (DB)? Then you can use firebase Realtime DB. However, using the Firebase Firestore Database is better to use for long term data storage. But for starters, learning Firebase Realtime DB is essential. The data in firebase realtime database is stored in JSON-like objects. What is NoSQL Database? It is a database that does not have the stringency and rules of a SQL database. NoSQL database is more commonly used when you are handling a lot of data that might not have a perfect structure (unstructured or semi-structured). @@ -14,6 +14,7 @@ What is NoSQL Database? It is a database that does not have the stringency and r To set up firebase, first, you will need to login to [Firebase](https://firebase.google.com/), click the console button on the top right corner, create a new project as instructed, under build, click on Realtime Database. ## Step By Step Tips + I will demosntrate tips to get started on the firebase realtime database using the example below: To store values in the firebase realtimeDB, you must first have your project front end in place. Then, you will create a JS file, and start writing code in that file to create a connection to the database, similar to the structure of the code below: