Don't like this style? Click here to change it! blue.css
LOGIN:
Welcome .... Click here to logout
Firebase - beautiful treat
We can use firebase as a whole backend:
Rapid-fire JSON-based Database
Free hosting (including file uploads)
Quick OAuth stack
Access-Control system
serverless backends
I like teaching this because it allows you to
deliver powerful apps quickly. I say concentrate
on delivering code quickly.
This architecture is considered a Serverless stack, although that term is debatable for sure.
Real-Time Database (as instant REST API)
The database structure in Firebase is simple enough, it's just a giant
JSON object (key/value tree).
Let's set it up:
Make an account at firebase.google.com (a non-udel account is best because the udel ones all share projects).
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 or https://fartfart-1a914.firebaseio.com/title.json
Observation 1: this ENTIRE database is a REST API!
That is, you can pick any node in your database /people and do POST, GET, PUT, DELETE to that URL (with the .json ending)
and the behavior will be to CREATE, READ, UPDATE, DESTROY the data at that place.
Let's just use the URL (+.json) and AJAX to make the to-do app internet backed.
Just like that our REST API understanding enables an instant communication of a TON of power.
Firebase JS SDK
An SDK (software development kit) let's us use a tool in our code.
Setting this up takes a little more delayed gratification but gives us
something new... real-time interactions.
OK, now connect a website to the DB: find the gear, click Project Settings, and add a web project (the </> icon)
Select CDN. This will give you some config data, copy paste the JSON object they provide, it looks like this:
Make a pen at Codepen, copy the config stuff into the javascript window (without the script wrapper).
ASIDE: including 3rd-party libraries
In CodePen you can include 3rd-party JS by clicking the gear and searching:
The HTML version of this is to get a URL where the library lives (TRY THIS: CDNJS) and include it like this:
For this class we will use the following 3 from that list (once as just URLs and once here as HTML includes also a demo of the first JS interaction with the DB):
