This blog post is for anyone who likes to get more out of the device you’re reading this on than just doing your daily chores and keeping up with social media. In other words: nerd alert!
Recognize this? Have you just recorded from your team members all their coffee and tea requests, but by the time it’s finally your turn at the coffee corner you’ve forgotten half of them.
In this blog post, I’m going to work with you to create a web app that makes getting coffee and tea for your colleagues a no-brainer anymore. There is currently no better platform to develop on than Google Cloud Platform and today I will dive into the world of Firebase.
We begin by creating a project on Google Firebase.
Click ‘add project’ and give the project a nice name.
To make this course as platform-independent as possible we are going to develop our app in Cloud Shell Code Editor. To open Cloud Shell Code Editor, go to this site and select the newly created project. Next, click on the Cloud Shell icon in the upper right corner to start Cloud Shell and then click on the pen icon to open the Code Editor.
When the Cloud Shell Code Editor has started, type the following commands into the Cloud Shell:
mkdir koffie_thee
cd koffie_thee
firebase login --no-localhost
>copy the url and paste it into a new tab in the brows
>follow the steps on the screen and copy the code
>(in case of problems with copying see screenshot(#01)
>go back to the Cloud Shell, paste the code and press Enter firebase init
>In the Features section, select only the Hosting option.
>Select the newly created project
>name the public directory: public
>rewrite urls to /index.html: N
firebase serve -p 8080Click on File ->Refresh so that the newly created folders and files become visible in the code editor. Click on the Preview icon (top right)-> Preview on port 8080 to view the index.html generated by firebase.
Now create the page where your colleagues can specify what they want to drink. In the editor, go to the folder coffee_tea -> public and open the file index.html. Replace all contents of the file with the following 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">Send <i class="material-icons right">send</i> </button> </form> </div> <div class="col s12 m6"> <h2>Lijst</h2> <table> <thead><tr><th>Name</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>
Click on: Add Firebase to your webapp, select the code and and paste the code under:
Firebase has default protection against reading and writing to the database. To learn more about Firebase authentication, you can watch this Youtube-video. For now, we are going to bypass the security so that the app works without authentication.
Go back to the Firebase Console and go to Database -> Rules and for both read and write change ‘auth != null’ to ‘auth == null’. Then click publish.
Now we need one more piece of code to make sure that the fields are written to the database when someone fills out the form and that the list of orders is displayed correctly. Copy and paste the following code under
<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().Name+''+snap.val().Type+'
‘
);
});
$('#delete').click(function(){
bestellingen.remove(function(){
bestellijst.empty();
});
});
</script>Save this and refresh the preview page. The form and order list should now work.
If everything works to your satisfaction, go back to the Cloud Shell and press “ctrl+c” to exit preview mode. Next, type “firebase deploy” to host the app on Firebase. Click on the Hosting URL to see the live version of your app!
I’d love to hear if you managed it too and if you have any other ideas for this web app. And if you want to learn more about Google Cloud Platform, sign up for one of our training courses. My colleague Koen Maes provides Cloud Platform training, both public and in-house; Koen is a Google Certified Professional & Cloud Platform Authorized Trainer.
For more information about Firebase on the web I can recommend these videos.
Screenshot #1
