Deze blogpost is voor iedereen die het leuk vindt om meer uit het apparaat te halen waar je dit op leest dan enkel het doen van je dagelijkse werkzaamheden en het bijhouden van social media. Oftewel: nerd alert!
Ken je dat? Heb je net van je teamleden al hun koffie- en theewensen opgenomen, maar tegen de tijd dat je eindelijk aan de beurt bent bij de koffiecorner ben je de helft alweer vergeten.
Ik ga in deze blogpost samen met jou een web-app maken waarmee het koffie en thee halen voor je collega’s geen hersenkraker meer is. Er is op dit moment geen leuker platform te vinden om op te ontwikkelen dan Google Cloud Platform en vandaag duik ik in de wereld van Firebase.
We beginnen met het aanmaken van een project op Google Firebase.
Klik op ‘project toevoegen’ en geef het project een leuke naam.
Om deze cursus zo platform-onafhankelijk mogelijk te maken gaan we onze app ontwikkelen in Cloud Shell Code Editor.
Om Cloud Shell Code Editor te openen ga je naar deze site en selecteer je het nieuw aangemaakte project. Klik vervolgens rechtsboven op het Cloud Shell icoon om de Cloud Shell te starten en vervolgens op het pennetje om de Code Editor te openen.
Als de Cloud Shell Code Editor is gestart, typ de volgende commando’s in de Cloud Shell:
mkdir koffie_thee
cd koffie_thee
firebase login --no-localhost
>kopieer de url en plak deze in een nieuwe tab in de browser
>volg de stappen op het scherm en kopieer de code
>(bij problemen met het kopiëren zie screenshot (#01)
>ga terug naar de Cloud Shell, plak de code en druk op Enter
firebase init
>selecteer bij de Features alleen de Hosting optie
>kies het nieuw aangemaakte project
>noem de public directory: public
>rewrite urls to /index.html: N
firebase serve -p 8080Klik op File -> Refresh zodat de nieuw aangemaakte folders en files zichtbaar worden in de code editor. Klik op het Preview icoon (rechtsboven) -> Preview on port 8080 om de door firebase gegenereerde index.html te bekijken.
Maak nu de pagina aan waar jouw collega’s kunnen aangeven wat ze willen drinken. Ga in de editor naar de folder koffie_thee -> public en open het bestand index.html. Vervang de volledige inhoud van het bestand door de volgende HTML code:
<html> <head> <meta charset="utf-8"> <title>Koffie en Thee App</title> <link rel="stylesheet" href="https:> <link href="https: rel="stylesheet"> <script> /*globals firebase */ /*eslint-env jquery */ </script> </head> <body> <div class="container"> <div class="row"> <div class="col s12 m6"> <h2>Bestelling</h2> <form> <div class="input-field"> <input name="Naam" placeholder="Naam" id="naam" type="text" class="validate"> <label for="naam">Naam?</label> </div> <div class="input-field"> <input name="Type" placeholder="Cappuccino" id="smaak_type" type="text" class="validate"> <label for="smaak_type">Bestelling?</label> </div> <button type="button" class="btn waves-effect waves-light" id="verstuur">Verstuur <i class="material-icons right">send</i> </button> </form> </div> <div class="col s12 m6"> <h2>Lijst</h2> <table> <thead><tr><th>Naam</th><th>Bestelling</th></tr></thead> <tbody id="bestellijst"></tbody> </table> <button type="button" class="btn waves-effect waves-light" id="delete">Alles verwijderen <i class="material-icons right">delete</i> </button> </div> </div> </div> <script src="https:></script> <script src="https:></script> </body> </html>
Sla het bestand op en herlaad de previewpagina om de wijzigingen te bekijken.
Om de app met firebase te laten werken hebben we een stukje code nodig die voor jouw app uniek is. Je vindt de code in de Firebase console op de “Overview” pagina: ga naar https: en kies jouw project.
Klik daar op: Firebase toevoegen aan uw webapp, selecteer de code en en plak de code onder:
Firebase heeft standaardbeveiliging tegen lezen en schrijven op de database. Om meer te leren over Firebase authentication kun je deze Youtube-video bekijken. Voor nu gaan we de beveiliging omzeilen zodat de app werkt zonder authentication.
Ga terug naar de Firebase Console en ga naar Database -> Regels en verander voor zowel read als write ‘auth != null’ in ‘auth == null’. Klik daarna op publiceren.
Nu hebben we nog een stukje code nodig om ervoor te zorgen dat de velden in de database worden geschreven als iemand het formulier invult én dat de lijst met bestellingen goed wordt weergegeven. Kopieer en plak de volgende code onder
<script> const bestellingen = firebase.database().ref('bestellingen'); $('#verstuur').click(function(){ var values = $('form').serializeArray(); var nieuwe_bestelling = bestellingen.push(); var obj = {}; for (var i in values){ obj[values[i].name] = values[i].value; } nieuwe_bestelling.set(obj); }); const bestellijst = $('#bestellijst'); bestellingen.on('child_added', snap => { bestellijst.append(''+snap.val().Naam+''+snap.val().Type+'
‘
);
});
$('#delete').click(function(){
bestellingen.remove(function(){
bestellijst.empty();
});
});
</script>Sla dit op en refresh de previewpagina. Het formulier en de bestellijst zouden nu moeten werken.
Als alles naar tevredenheid werkt, ga je terug naar de Cloud Shell en druk op “ctrl+c” om de preview mode te stoppen. Typ vervolgens “firebase deploy” om de app op Firebase te hosten. Klik op de Hosting URL voor de live versie van jouw app!
Ik hoor graag of het jou ook gelukt is en of je nog andere ideeën hebt voor deze web-app. En mocht je meer willen leren over Google Cloud Platform, schrijf je dan in voor een van onze trainingen. Mijn collega Koen Maes geeft Cloud Platform trainingen, zowel openbaar als in-house; Koen is Google Certified Professional & Cloud Platform Authorized Trainer.
Voor meer informatie over Firebase on the web kan ik deze video’s aanraden.
Screenshot #1
