Firebase: Real-Time Database
Alright, the goal for today is to read and write data from a firebase RTDB.
Steps:
Make an account at firebase.google.com (I think a non-udel account is best but I don't remember why).
Create a new project, navigate your way to the real-time database, make it and put some data in there by clicking the plus button. Select "test" security rules.
Grab the URL just above your database and add .json to the back then go to that URL. For instance for me it's:
https://fartfart-1a914.firebaseio.com/.json
OK some insights before we get too deep. This database is a giant key/value tree (a big JSON object).
Every branch in the tree can be accessed by way of a URL by taking the DB URL adding /paths/to/the/tree and .json to the leaf.
When you put that URL into a browser it is a "GET" request which "reads" the data. There are other verbs you can do: PUT, POST, DELETE and PATCH are other "methods" you can "do" to a URL.
The essence of all web-apps is CRUD: Create, Read, Update, Destroy. More on that dimension laters (it's an arbitrary REST API).
OK, now connect a website to the DB: find the gear, click Project Settings, and add a web project (the </> icon)
This will give you some config data, select CDN and copy paste the javascript they provide, it looks like this:
Make a pen at Codepen, copy the config stuff into the javascript window (without the script wrapper).
There is a line you pasted that looks like: import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
make another line just beneath it that looks like: import * as rtdb from "https://www.gstatic.com/firebasejs/9.0.2/firebase-database.js";
Finally add this: let db = rtdb.getDatabase(app);
let titleRef = rtdb.ref(db, "/");
rtdb.onValue(titleRef, function(ss){
alert(JSON.stringify(ss.val()));
}); (also in snippet below)
Once you've got a pop-up that matches the data you put in the database, close the pop-up, then change the data (via the web interface) and see it pop-up again.
OK so let's pause and show-and-tell. Firebase version 9 was a breaking change. It also uses a new style of javascript importing. It breaks all of my old code. So if I'm not as fast as normal forgive me.
onValue set's up a callback function that consumes a "snapshot" of the data at that key every time any data at that key or below changes.
If you only want to get the data once you can replace onValue with get, but now use the Promise notation like:
rtdb.get(nameRef).then(ss=>{
alert(ss.val());
})
If you want to setup your DB listener at a different child/key you can use rtdb.child
Edit the database to look like this: {"name":"Andy","status":"awesome"} then use child to point directly to the name ref and read it using onValue