Building your first simple app with Firebase

Building your first simple app with Firebase

Firebase is a complex platform for web and mobile development. The initial success grabbed everybody’s attention and led to the acquirement by Google in 2014. The growing popularity of this tool makes Firebase one of the leaders in the industry.

Is this success justified? Let’s see!
Services

Firebase provides plenty of services that can be implemented in your app from authorization system to crash reporting.
Let’s take a quick look at the four most popular modules of Firebase:
 

1. Authentication

A built-in functionality lets you authenticate and authorize users by their emails, Gitlab, Facebook, Twitter and other social media.
The implementation is very simple and saves a lot of time you would spend on building an Auth System.
 

2. Database

Developers are given a choice between Real-time Database and Cloud Firestore. Both of them are noSQL and rely on a JSON format. They support offline work, which means that they store the data on your disk and update them whenever you reconnect. Cloud Firestore is the latest one and it is still in a beta version, but includes lot of automation in building, scaling your database, what was not obvious in the previous one. If you think about the former Firebase database it is like a giant JSON file. The new one is more structured – documents, collections and subcollections, which contain other documents, collections and subcollections. Thanks to this, Firestore provides you with better querying based on multiple conditions. Another big advantage of Cloud Firestore is real-time listener, which streams the updated data whenever it changes.

However, you should keep in mind that Realtime Database has been tested on thousands of apps over the last years and it is still more stable and reliable for sure. Also, it may be cheaper to maintain the data this way.
 

3. Storage

Cloud Storage in Firebase is a very powerful place to keep files in. Storage is high-scalable and strongly secured. Its implementation lets users upload and download images,videos, music etc. regardless of connection quality. Your progress is being saved when you lose connection, so it means it restarts from the same place it finished saving users’ actual bandwidth.
 

4. Performance Monitoring

This module provides developers with extensive data and measurements about their app usage. Fully trackable network traffic, requests rate, insight into situation where the performance could be improved. All of them are shown in  charts and graphs in relation with the app version.

It is still only available on Android/iOS apps, but it is worth mentioning. It lets you monitor the action, good and weak points and shows dependency of efficiency in comparison to the app version. If you want to use a monitoring system on your website, please take a look on Hotjar product.
How to start ?

Although Firebase is meant to be used on many platforms such as Android, iOS, Unity etc. I am going to focus on  Web Development.

What  will you need?

    Node.js
    npm
    Express Framework

1. Start a Firebase project

To start a Firebase project, open the Fireabse Console:
https://console.firebase.google.com

Log in with your google account and click „New Project”.

Follow the instruction and fill the required information.

After a few seconds, your project will be initialized.

On the homepage, you will be offered to inject a Firebase into your project.

Click on that and save config JSON object. It will be required soon.
 

2. Add Firebase to your project  LinkedIn icon

Firebase is a complex platform for web and How To Earn Using Google Ads. The initial success grabbed everybody’s attention and led to the acquirement by Google in 2014. The growing popularity of this tool makes Firebase one of the leaders in the industry.

Is this success justified? Let’s see!
Services

Firebase provides plenty of services that can be implemented in your app from authorization system to crash reporting.
Let’s take a quick look at the four most popular modules of Firebase:
 

1. Authentication

A built-in functionality lets you authenticate and authorize users by their emails, Gitlab, Facebook, Twitter and other social media.
The implementation is very simple and saves a lot of time you would spend on building an Auth System.
 

2. Database

Developers are given a choice between Realtime Database and Cloud Firestore. Both of them are noSQL and rely on a JSON format. They support offline work, which means that they store the data on your disk and update them whenever you reconnect. Cloud Firestore is the latest one and it is still in a beta version, but includes lot of automation in building, scaling your database, what was not obvious in the previous one. If you think about the former Firebase database it is like a giant JSON file. The new one is more structured – documents, collections and subcollections, which contain other documents, collections and subcollections. Thanks to this, Firestore provides you with better querying based on multiple conditions. Another big advantage of Cloud Firestore is real-time listener, which streams the updated data whenever it changes.

However, you should keep in mind that Realtime Database has been tested on thousands of apps over the last years and it is still more stable and reliable for sure. Also, it may be cheaper to maintain the data this way.
 

3. Storage

Cloud Storage in Firebase is a very powerful place to keep files in. Storage is high-scalable and strongly secured. Its implementation lets users upload and download images,videos, music etc. regardless of connection quality. Your progress is being saved when you lose connection, so it means it restarts from the same place it finished saving users’ actual bandwidth. 

4. Performance Monitoring

This module provides developers with extensive data and measurements about their app usage. Fully trackable network traffic, requests rate, insight into situation where the performance could be improved. All of them are shown in  charts and graphs in relation with the app version.

It is still only available on Android/iOS apps, but it is worth mentioning. It lets you monitor the action, good and weak points and shows dependency of efficiency in comparison to the app version. If you want to use a monitoring system on your website, please take a look on Hotjar product.
How to start ?

Although Firebase is meant to be used on many platforms such as Android, iOS, Unity etc. I am going to focus on  Web Development.

What  will you need?

    Node.js
    npm
    Express Framework

1. Start a Firebase project

To start a Firebase project, open the Fireabse Console:
https://console.firebase.google.com

Log in with your google account and click „New Project”.

Follow the instruction and fill the required information.

After a few seconds, your project will be initialized.

On the homepage, you will be offered to inject a Firebase into your project.

Click on that and save config JSON object. It will be required soon.
 

2. Add Firebase to your project

Type in the terminal:

$ npm install firebase --save
view raw
gistfile1.txt hosted with ❤ by GitHub

Add dependency in your JavaScript file:

var firebase = require("firebase");
view raw
app.js hosted with ❤ by GitHub

Put the snippet in your code with appropriate credentials you have already saved in point 1:

// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};

firebase.initializeApp(config);
view raw
app.js hosted with ❤ by GitHub

3. Sign up a user

At this point, you are able to write a basic authorization system.
Let’s make a simple endpoint to enable future users to sign up on your website.
I assume you have got basic knowledge about Express Framework and routing. Add a new Auth component to your project where you are going to store authorization and authentication endpoints.
Here is a method that should be included in a ‘/sign-up’ endpoint:

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...

});
view raw
app.js hosted with ❤ by GitHub

From now, your app is able to create users based on an email&password authentication. The only thing you need is to catch user credentials from the sign-up form and send them to your server to the exact endpoint you have placed the snippet above.

To manage users, check out the code examples in the link below:

https://firebase.google.com/docs/auth/web/manage-users

As you can see, managing users, changing password, authentication method and many other things are very simple with built-in methods. It lets you save not only money, but also thousands of lines of code.
 

4. Store the data

To begin the data storing process simply add the following dependency to your JavaScript file:

require("firebase/firestore");
view raw
app.js hosted with ❤ by GitHub

And initialize a Firestore Class Object:

require("firebase/firestore");
view raw
app.js hosted with ❤ by GitHub

To store the data in a Firestore, use a simple method:

db.collection("users").add({
first: "Michał",
second: "Bednarz",
born: 1995

})
view raw
app.js hosted with ❤ by GitHub

If your database does not contain collection „users”, it will be created automatically. Otherwise, Firestore will add the data to an existing collection.

Firestore is fully equipped with all needed types of queries such as „where”, „order”, „limit” etc. to let you fetch the data in an expected way.

Conclusion

In these four simple steps, I have shown the basics of Firebase and how to start building a website with firebase backend. It is a very powerful tool full of services that can be used in many ways.

It is a developer’s choice which parts he wants to combine with his project and
it is very simple to integrate it with other modules.

 

No-server” app
Presented example shows you how to communicate with firebase via your server written in Node.js. What if you want to get rid of backend and write a „serverless” app?

Fortunately, „npm” provides Angular with Firebase SDK so you can manipulate the data in Firebase straight from the frontend application. This package includes the vast majority of functions and methods of Firebase.

As you can see, using Firebase is a very flexible method to handle some significant parts of your app and it is only your decision how many of this features you will attach to your project.