I see the light! : Google Firebase
This is article 3 of my Google Firebase series. In the last article, I covered how to get started with Google Firebase — with the simplicity of starting a project, adding the Firebase SDK, and API options. In this article I will be covering a simple demo application that comes from Google themselves! This demo is the same demo they use for their “travelling circus” teaching style where they go to various cities around the globe with conferences, events, clubs etc. I am a student myself and therefore I discovered this after going to a Google Student Developer Club in my city.
The codelab I will be covering is found in this link: https://codelabs.developers.google.com/codelabs/firebase-web/#0
Installing the Firebase Command Line Interface
The Firebase command line tools while not required, are essential if you really want to get into Firebase development. It is an excellent tool to get you up and running from development to deployment straight from your machine and up to Google’s servers. Once again, this will require a package manager like NPM. (They recently got acquired by GitHub. Hooray Open-Source!)
Once you are logged in and have it setup, you can continue.
This command will serve the cloned repository of the codelab locally. The local server this spins up is a live server, meaning any changes you make on the app can be seen in real-time.
Moving on, we will add the code that adds authentication for our little app.
Its that simple. Just 7 lines of code. (without the comments of course) Through this, you also have the option in having all the other authentication providers as well. For the demo we are using GoogleAuth, which gives us a provider for using Google Sign in.
Next we will add the reading and writing functionality to our Firestore, the database solution for Firebase.
There’s a lot going on here. Let me break it down at a high level. This is basically telling Firebase to go into Firestore, and go into the collection called ‘messages’. Once here, add the following document:
name of this user, message text from the input field, their profile picture, and the timestamp of the Firestore server.
You’ll notice that while this persists your input text on the Firestore database, the text in the web application does not actually get updated. To achieve this, we will simply add a listener to it.
This loadMessages() function defines a query object fetched from the Firestore under the collection name of ‘messages’, ordered by timestamp and limited to 12 results. A “snapshot” of the query is then made which acts as our listener. It listens to every change made on the Firestore server, so that any other browser that has the web application open can see the changes live as they happen.
We’ve covered the basics of the chat functionality, and now I’d like to move on to the performance data functionality. One of Firebase’s main selling points is the ability to easily integrate with Google’s marketing platform of apps. One of which is the performance analytics that Firebase offers. Through this, we are able to see which parts of our web app is causing our slow downs and affecting our functionality and usability. We can initialize this by adding performance monitoring to our application.
As you can see, the performance analytics dashboard displays a lot of useful data, such as the first initial load of the site, load with added contents to the site, the delay of the very first input received etc.
Once all of that is done, we can deploy our app into Firebase hosting.
Congratulations! You’ve successfully deployed your first Firebase App into hosting. That concludes my series on Google Firebase. To summarize, we went over: The problems Google tries to solve, how Firebase solves it, development environment setup, implementation and analytics. Thanks for tuning in!