Google Firebase is a Great Way to Simplify Backend Development ...

Because Firebase doesn’t require a web application framework to manipulate and modify its database systems it’s classified as a “serverless” database that can be accessed through the use of Software Development Kits (SDK) and API calls. Google Firebase makes it easier to get into working with databases.

Introduction

Using Google Firebase is a great way to add user interaction to a web application. Firebase allows for a place to store images, information, and data on a server for any application you’re building. Databases are used by most of the world’s most popular applications and media including WordPress, Netflix, Microsoft Xbox and more. Without a database there would never be any way to save and retrieve data later because everything would only exist in a single session in your browser window. This means that, once you delete your browser history, all data is permanently lost forever.

Using a database allows a developer to give users the ability to save and store information for later retrieval and data processing.

NOTE: This assumes advanced level JavaScript skills

START WITH A ROUGH DRAFT OR SKETCH

  1. Draw out what you think the database should function like.
  2. Try to list everything that would be needed in the development of the web application before project start.
  3. Create and map all the inputs and outputs of the system as a whole.
  4. Use Adobe XD (Prototyping tool) or another tool to create a map of functions and what each function does. Then map those functions to an endpoint in the database where it will be stored for later retrieval.

The whole purpose of this section is to plan exactly how the database is going to interact with the system as a whole. So, it is very important to document as best you can the entire process before you start working on any application.

A good tip is to use a computer drawing program and save the document both on your computer and on a cloud backup service. The cloud backup service would be used to restore files in case you lose them. The computer allows you save your files across all devices so you can access them from wherever you are.

Personally, I use OneNote when planning projects and am currently learning ProjectLibre, an open source project management tool for managing medium and large-sized projects.

Login to Your Dashboard

You have to setup a project in order to use Google Firebase. So make sure you follow all the steps and create a project in Google Firebase before you try this. Also make sure to have installed Firebase into your app. Every app is different. Consult the documentation if you are not sure how to implement or check YouTube for help.

Login URL: https://firebase.google.com/

Signing into Google Firebase gives you access to this …

There are two different methods for Databases, one is Firebase Realtime Database and the other is Firebase Firestore. We will be going over Firebase Realtime Database this time. Firebase Realtime Database is great for simple storage needs that instantly updates itself without having to refresh the entire page. Realtime Database has a built in event listener in the SDK that watches for changes in the database at all times. If something is changes it is immediately updated on the front end without having to write any of your own event listeners and code it yourself.

There are also methods for creating database requests that pull data once and require a refresh but I almost always prefer realtime updates.

Example Firebase Database Reference Code (Web)

This enables you to communicate directly with Firebase and read data from the database. To write data to the database you simply change the request like in the image below.

In this example we’re reading the data using the .on() directive which always updates the data automatically when it changes. So, if a user updates the data while this page is active, the page automatically updates the data on the page without any extra code required.

let requests = fb.database().ref(‘services’);

requests.on(‘value’, (snapshot) => {

this.services = snapshot.val();

});

This code basically says to the computer let requests be equal to the location of “services” in Firebase Database.

Then, the next statement says once “requests” is completed write the snapshot of the values associated with the data from what is stored in “requests” into the snapshot.val().

Then, we are saying the services data from the data object in the Vue component in the image below is equal to the data from what is stored in the “requests” (snapshot.val()).

After that we use a simple For loop to display the results on the page using V-for in HTML in the template of the component in the image below.

This is simple and easy to repeat once you have it down.

Post Request Example

;This enables you to communicate directly with Firebase and read data from the database. To write data to the database you simply change the request like in the image below.

Find the Firebase().database().ref …

Notice that it ends in .push()?

That’s because we are finding the location of the database with Firebase().database().ref(‘location’) where “location” is the database location in path similar to on a computer hard drive. But, in firebase every time you want to go to a decendent path you would write it like this …

Firebase().database().ref(‘root_path’).child(‘subfolder’).child(‘destination’).push(‘what_we_want_to_add_to_the_database’)

Using .push() would create an array and push the latest changes to the end of the array.

Using .set() would always replace the data at that location with new data when posting to that destination.

Once you understand these basics it’s actually incredibly easy to start building apps in it.

Pin It on Pinterest

Think this is cool?

Share with your friends!