geeksilva97 · December 2, 2019 10:56
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Medium - Emulators Suite</title>
 </head>

 <body>

    <h3>Firestore</h3>
    <!-- List to show firestore data -->
    <ul class="firestore-users">

    </ul>

    <h3>Realtime Database</h3>
    <!-- List to show Database data -->
    <ul class="rtdb-users">

    </ul>

    <!-- SDK Core -->
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>

    <!-- Realtime Database -->
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-database.js"></script>

    <!-- Cloud Firestore -->
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-firestore.js"></script>

    <!-- Cloud Functions -->
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-functions.js"></script>
    <script>

        // Firebase initialization

        const firebaseConfig = {
            projectId: 'happy-todolist',
            databaseURL: "http://localhost:9000?ns=happy-todolist"
        };

        const app = firebase.initializeApp(firebaseConfig);
        app.functions().useFunctionsEmulator('http://localhost:5001');


        var db = firebase.firestore();
        db.settings({ host: "localhost:8081", ssl: false });

        
        const rtdb = firebase.database();
        const usersRef = rtdb.ref('users');


        const ulFirestore = document.querySelector('.firestore-users');
        const ulDatabasse = document.querySelector('.rtdb-users');

        const usersCollection = db.collection('users');
    

        usersCollection.onSnapshot(querySnapshot => {
            ulFirestore.innerHTML = '';
            querySnapshot.docs.forEach(doc => {
                ulFirestore.innerHTML += '<li>' + JSON.stringify({ id: doc.id, ...doc.data() }) + '</li>';
            });
        });

        usersRef.on('value', (snapshot) => {
            ulDatabasse.innerHTML = '';
            let data = snapshot.val();
            for(let key in data) {
                ulDatabasse.innerHTML += '<li>'+JSON.stringify({id: key, ...data[key]})+'</li<';
            }
        });


        // Collecting the user name
        const name = prompt('What\'s your name?');
        if (name) {

            // add to firestore
            usersCollection.add({
                name: name
            });

            // add to database
            var newUserRef = usersRef.push();
            newUserRef.set({
                name: name
            });
        }
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Medium - Emulators Suite</title>
	</head>

	<body>

	<h3>Firestore</h3>
	<!-- List to show firestore data -->
	<ul class="firestore-users">

	</ul>

	<h3>Realtime Database</h3>
	<!-- List to show Database data -->
	<ul class="rtdb-users">

	</ul>

	<!-- SDK Core -->
	<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>

	<!-- Realtime Database -->
	<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-database.js"></script>

	<!-- Cloud Firestore -->
	<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-firestore.js"></script>

	<!-- Cloud Functions -->
	<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-functions.js"></script>
	<script>

	// Firebase initialization

	const firebaseConfig = {
	projectId: 'happy-todolist',
	databaseURL: "http://localhost:9000?ns=happy-todolist"
	};

	const app = firebase.initializeApp(firebaseConfig);
	app.functions().useFunctionsEmulator('http://localhost:5001');


	var db = firebase.firestore();
	db.settings({ host: "localhost:8081", ssl: false });


	const rtdb = firebase.database();
	const usersRef = rtdb.ref('users');


	const ulFirestore = document.querySelector('.firestore-users');
	const ulDatabasse = document.querySelector('.rtdb-users');

	const usersCollection = db.collection('users');


	usersCollection.onSnapshot(querySnapshot => {
	ulFirestore.innerHTML = '';
	querySnapshot.docs.forEach(doc => {
	ulFirestore.innerHTML += '<li>' + JSON.stringify({ id: doc.id, ...doc.data() }) + '</li>';
	});
	});

	usersRef.on('value', (snapshot) => {
	ulDatabasse.innerHTML = '';
	let data = snapshot.val();
	for(let key in data) {
	ulDatabasse.innerHTML += '<li>'+JSON.stringify({id: key, ...data[key]})+'</li<';
	}
	});


	// Collecting the user name
	const name = prompt('What\'s your name?');
	if (name) {

	// add to firestore
	usersCollection.add({
	name: name
	});

	// add to database
	var newUserRef = usersRef.push();
	newUserRef.set({
	name: name
	});
	}
	</script>
	</body>

	</html>