Created
April 2, 2021 18:55
-
-
Save math-alpha/be02ce4ad46bb86984d2adb46246a5b0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" xmlns="http://www.w3.org/1999/html"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Firebase sample</title> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |
| <script src="index.js"></script> | |
| </head> | |
| <body style="max-height: 1vh"> | |
| <br><br><br><br><br> | |
| <div class="container" style="margin: auto; width: 60%"> | |
| <h3>Sample user crud data</h3> | |
| <p>This is a simple demonstration of the NoSQL queries using Firestore powered by Google's firebase</p> | |
| <button type="button" class="btn btn-primary" onclick="addData()">Create User</button> | |
| <button type="button" class="btn btn-primary" onclick="getData()">Get User</button> | |
| </div> | |
| </body> | |
| <script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-firestore.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/2.0.0/json2html.min.js"></script> | |
| <script> | |
| // Your web app's Firebase configuration | |
| let firebaseConfig = { | |
| apiKey: "AIzaSyCq9k-kIRfuqsytxTv1aSZxoiXiSIN5Gig", | |
| authDomain: "inspiring-orb-160311.firebaseapp.com", | |
| databaseURL: "https://inspiring-orb-160311.firebaseio.com", | |
| projectId: "inspiring-orb-160311", | |
| storageBucket: "inspiring-orb-160311.appspot.com", | |
| messagingSenderId: "774589302097", | |
| appId: "1:774589302097:web:fef2a6c817712f9fb5ff70" | |
| }; | |
| // Initialize Firebase | |
| firebase.initializeApp(firebaseConfig); | |
| let db = firebase.firestore(); | |
| let userData = { | |
| name: "Ngadou Yopa", | |
| age: 22, | |
| school: "GBHS Bamenda" | |
| } | |
| const addData = () => { | |
| console.log("Adding user ...") | |
| db.collection("users").add(userData).then((docRef) => { | |
| console.log(docRef.id); | |
| }).catch((error) => { | |
| console.error("Error adding document: ", error); | |
| }); | |
| } | |
| const addDoc = () => { | |
| console.log("Adding specific user ...") | |
| // Add a new document in collection "cities" | |
| db.collection("users").doc("brad").set({ | |
| name: "Medjeu Fomegne", | |
| age: "12", | |
| country: "CM" | |
| }) | |
| .then(() => { | |
| console.log("Document successfully written!"); | |
| }) | |
| .catch((error) => { | |
| console.error("Error writing document: ", error); | |
| }); | |
| } | |
| let users = [] | |
| const getData = async () => { | |
| users = []; | |
| console.log("Getting documents") | |
| let template = {'<>':'div','html':'name: ${name} | age: ${year} | country: ${country} | school: ${school}'}; | |
| await db.collection("users").get().then((querySnapshot) => { | |
| querySnapshot.forEach((doc) => { | |
| console.log(`USER ID: ${doc.id}`); | |
| console.log(doc.data()); | |
| users.push({name: doc.data().name, age: doc.data().age, country: doc.data().country}) | |
| }); | |
| //native javascript | |
| document.write(json2html.render(users,template) ); | |
| }); | |
| //$("#target").json2html(users,template); | |
| } | |
| </script> | |
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment