math-alpha · April 2, 2021 18:55
diff --git a/nosql_sample b/nosql_sample
 <!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>
	<!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>