Skip to content

GDSC-SJCET/Firebase-Tutorial

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Firebase-Tutorial

Firebase tutorial

step 1 : Clone the code

step 2 : setup firebse and paste the configuration code (configration code example given below Don't COPY THIS CONFIGRATION CODE IT'S UNIQUE FOR ALL) on html file below body tag (</.body>)

DOCS

<script type="module"> // Import the functions you need from the SDKs you need import { initializeApp } from "https://www.gstatic.com/firebasejs/9.12.1/firebase-app.js"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration const firebaseConfig = { apiKey: "AIzaSyC_Acy3h5J5Egbj8Mc1CxAXCaS3M-hEWDs", authDomain: "fir-4b6c7.firebaseapp.com", projectId: "fir-4b6c7", storageBucket: "fir-4b6c7.appspot.com", messagingSenderId: "643012676626", appId: "1:643012676626:web:6cf897e4f8fc5df55e9ccb" }; // Initialize Firebase const app = initializeApp(firebaseConfig); </script> 

step 3 : paste the below code in the script (consider the figure 1:import packages)

import { getFirestore, addDoc, collection, getDocs } from 'https://www.gstatic.com/firebasejs/9.13.0/firebase-firestore.js' 

image

step 4 : Paste the below code for initialize database (note highlighted area Figure 3:Database initilizing)

 const db = getFirestore(app); 

image

step 5 : Paste the below code to data sent (like in figure 2:data sending)

Data send

document.getElementById("submit-btn").onclick = async function (e) { e.preventDefault() const docRef = await addDoc(collection(db, "data"), { Name: document.getElementById('Name').value, Message: document.getElementById('Msg').value }); console.log("Document written with ID: ", docRef.id); alert("Form submitted") location.reload() }; 

image

step 6 : Paste the below code as in picture (note Figure 3:Data sending)

Data Calling

window.onload = async function () { const querySnapshot = await getDocs(collection(db, "data")); querySnapshot.forEach((doc) => { const row = document.getElementById("tbody").insertRow(0); row.insertCell(0).innerHTML = doc.data().Name row.insertCell(-1).innerHTML = doc.data().Message }); } 

image

step 7 : Type somthing in website form and submit. Then refresh the website to see the change (note in video)

ezgif com-gif-maker (1)

After you submit, the firestore database will be like this ->

image