Firebase in een notendop

-

Met frameworks als Ionic, Cordova en Angular is het steeds makkelijker om als Frontend Developer een (web)app te maken. Het uiterlijk, de interactie en het uiteindelijk releasen, stuk voor stuk goed te doen.

Maar hoe mooi de app er ook uitziet, zonder een fatsoenlijke backend heeft je app misschien niet alles te bieden wat je wenst. Het inrichten hiervan kan een tijdrovende en voor een frontender niet erg populaire bezigheid zijn. Geen nood! Firebase kan je redden!

Firebase is een API service die de meeste backend zaken voor je regelt. In dit artikel ga ik in op het werken met de NoSQL database die Firebase biedt. Data wordt opgeslagen / bewerkt via een RESTful API en kan in JSON formaat worden opgehaald. En dit allemaal realtime: alle gebruikers die verbonden zijn met de database krijgen meteen de update(s) te zien. Lastig? Niet bepaald! Het werken met Firebase is een fluitje van een cent omdat je hiervoor bekende technieken als javascript en JSON kunt gebruiken!

Naast realtime data is er nog iets waar een app bijna niet meer zonder kan: inloggen. Authenticatie zal ik in een later blog nog wat meer behandelen, maar goed om te weten is dat standaard inloggen via Facebook, Google, Twitter en GitHub account ondersteund wordt. Uiteraard kun je mensen ook via hun e-mailadres en het door hun gekozen wachtwoord laten registreren.

In dit artikel zal ik je op weg helpen met de eerste basis mogelijkheden die Firebase je biedt. Hoewel er voor het grotere werk wel betaald moet worden, kun je gratis en voor niks beginnen met een basis versie. Zie de Firebase pricing pagina voor alle prijzen en mogelijkheden.

Data structuur

Wanneer je geregistreerd bent bij Firebase kun je eigenlijk al meteen beginnen met het aanmaken van je eerste ‘app’. Het invoeren van een naam is voldoende. Eenmaal aangemaakt kun je via de ‘manage app’ button naar de GUI van je eigen database.

Firebase screenshot

In deze GUI kun je gemakkelijk een JSON bestand die je al hebt importeren, nodes toevoegen / aanpassen en verwijderen. Toegevoegde data (zowel via deze GUI als via bijvoorbeeld je app) zal groen oplichten: alle updates worden realtime bijgewerkt.

In dit artikel werk met een vooraf opgemaakt JSON bestand. Deze kun je importeren door onderstaande JSON te plakken in een bestand en vervolgens te importeren:

[javascript light=”true”]
{“company”:”Incentro”,”items”:
{“101”:{“ready”:false,”title”:”Boodschappen doen”},
“102”:{“ready”:false,”title”:”Honden uitlaten”},
“103”:{“ready”:true,”title”:”Brief posten”}
},
“user”:”Pieter”}
[/javascript]

TIP Alle data wordt als één JSON bestand opgeslagen. Mocht je de structuur die je nu in de GUI ziet als JSON presentatie willen zien, dan is /.json achter de url toevoegen voldoende:

https://naam-van-je-app.firebaseio.com/.json

Nu is het werken in de GUI leuk, maar je wilt uiteraard ook de data kunnen manipuleren via bijvoorbeeld je (web) app. Hiervoor gaan we aan de slag met de javascript API die Firebase biedt.

De javascript SDK

Firebase biedt standaard een javascript SDK. Voor meer informatie over deze en de andere beschikbare SDK’s kun je het beste kijken bij de officiële documentatie.

Goed om te weten, er zijn behalve een ‘standaard’ javascript SDK ook libraries beschikbaar voor Angular, Ember, Backbone en React waarmee je Firebare gemakkelijk kun aansluiten / inegreren. Zie het library overzicht voor alle beschikbare libaries.

Om gebruik te kunnen maken van de JS SDK voeg je als eerst de benodigde JS library toe aan je pagina:

[html light=”true”]

[/html]

Nu de library toegevoegd is kun je connectie maken met je database en de data gaan bewerken. Het adres van jouw database is te vinden op je dashboard:

Firebase screenshot

TIP De javascript code die verder in dit artikel gebruikt wordt kun je uiteraard in een test html-pagina zetten. Om snel te kunnen testen, is het ook mogelijk om alles via je console te doen.

[javascript light=”true”]
// Maak connectie met je database
var myFirebaseRef = new Firebase(“https://naam-van-je-app.firebaseio.com/”);
[/javascript]

De .set() methode

Met de set() methode kun je nieuwe data toevoegen of huidige data aanpassen. Pas dus op met wat je toevoegt of aanpast. In het geval van onderstaand voorbeeld wordt de huidige naam van de user overschreven door een nieuwe naam.

[javascript light=”true”]
// Pas de user aan met een nieuwe naam
myFirebaseRef.set({user: “John”});
[/javascript]

Data toevoegen aan child nodes

Zoals je in de voorbeeld structuur kunt zien zijn de echte todo’s geplaatst onder de node items. Wanneer je nieuwe todo’s zou willen toevoegen moet je er dus voor zorgen dat deze ook onder de correcte node komen te staan. Dit kan op twee manieren. De eerste is het aanmaken van een directe reference naar deze node:

[javascript light=”true”]
var directItemsRef = new Firebase(“https://naam-van-je-app.firebaseio.com/items/”);
[/javascript]

De directItemsRef is nu een directe verwijzing naar de items node en alle childs daarvan. Om een item toe te voegen kun je gebruik maken van de push() methode. Het toegevoegde item zal nu een uniek id krijgen:

[javascript light=”true”]
directItemsRef.push({title: “Auto wassen”, reasdy: false});
[/javascript]

Zoals je in de GUI zal zien zal er nu een nieuw item aan de todo-lijst worden toegevoegd.

Bij de tweede manier maken we gebruik van de al eerder gemaakte verwijzing naar de database en kunnen we zonder de directItemsRef variabel. Hiervoor kun je de child() methode gebruiken:

[javascript light=”true”]
myFirebaseRef.child(‘items’).push({title: “Auto wassen”, ready: false});
[/javascript]

Nu zijn er nog tal van andere methodes beschikbaar om data te bewerken, verwijderen, etc. Hiervoor verwijs ik je voor nu graag door naar de documentatie van Firebase.
Data ophalen en tonen
Nu je todo’s aan de lijst kunt toevoegen is het natuurlijk ook handig om deze te kunnen tonen op een pagina. Om alle data op te halen heb je aan een paar regeltjes javascript genoeg:

[javascript light=”true”]
// Get a database reference to our posts
var ref = new Firebase(“https://naam-van-je-app.firebaseio.com/”);

// Maak een async call naar de database en log deze in je console
ref.on(“value”, function(snapshot) {
console.log(snapshot.val());
}, function (errorObject) {
console.log(“The read failed: ” + errorObject.code);
});
[/javascript]

De on() methode zorgt voor de realtime connectie met je database en maakt een snapshot van het moment dat je de verbinding maakt. Omdat er gebruik gemaakt wordt van “value” zal niet alleen bij het initieel laden de data ophalen. Wanneer er iets in de database aangepast wordt, dan zal er opnieuw een snapshot gemaakt worden en getoond worden, of in dit geval gelogd.

Om dit in actie te zien kun je in de GUI een veld/waarde aanpassen. Je zult zien dat de inhoud van de database opnieuw gelogd zal worden.

De getoonde of gelogde data zal dus realtime zijn. Behalve value kan er ook gekozen worden voor child_added (de data wordt alleen geupdate wanneer er een nieuw child aan de geselecteerde node is toegevoegd), child_changed, child_removed, en child_moved.

In het bovenstaande voorbeeld zal alle data worden opgehaald en wanneer er ergens iets in de database aangepast is, wordt er een nieuw snapshot gemaakt. In ons geval is eigenlijk alleen de data binnen de items node (de echte todo’s) interessant. Je zou de reference hiervoor aan kunnen passen naar https://naam-van-je-app.firebaseio.com/items/ of gebruik maken van de child() methode.

Maar er is meer!

De behandelde mogelijkheden in dit artikel zijn slechts het topje van de ijsberg. Firebase zorgt ervoor dat je als frontender je kunt focussen op de zaken die je echt leuk vindt om te doen zonder dat je je druk hoeft te maken over de backend. En omdat Firebase het grootste deel van de backend taken overneemt zorgt dit voor een kortere ontwikkeltijd van je app. Ook zorgt Firebase er voor dat je app altijd realtime is en dat is iets waar behalve jij ook de eindgebruiker blij van wordt. Denk aan het bijwerken van hi-scores van je game, het bijhouden van live scores bij wedstrijden of het maken van een chat applicatie. De mogelijkheden zijn eindeloos!

Bron afbeelding: unsplash.com