Blog

Real-time Web Applications with Webix UI and Firebase

Firebase is a back-end service that allows you to store and synchronize data quickly. All you need to do is to focus on your data and Firebase will do the rest.

Webix, in its turn, provides a wide variety of components that you can use for building a user interface, from simple inputs to complex components, such as datatable, scheduler or spreadsheet, and even accessible UI components.

image15

Real-time firebase apps allow users to get new information as soon as it is published. There’s no need in reloading. New data appears on the screen right after the update. This functionality can be used for demonstrating real-time changes in the form of different types of charts, for example.

In this article we’ll learn the basics of building real-time web applications with Webix UI and Firebase by Google.

Firebase Apps Examples

Let’s take a look at some examples of applications that were built using Firebase.

Shazam App

image14

This cross-platform app is best known for its music identification capabilities. It uses a smartphone or a built-in computer microphone to gather a brief sample of audio being played. Shazam is used by more than 120 million people each month to discover, interact with, and share video, audio, or printed content.

Firebase Dynamic Links is a Firebase technology used by Shazam. If such a link is opened on a mobile device, a user will be taken directly to the linked content in the native mobile app. In the case of a desktop web browser, this link will open a proper web page. If a user does not have a native app installed, after clicking the link he will be prompted to install it. After he installs and runs the app, it will be able to access the link.

Fabulous

image01

This app was incubated in Duke’s Behavioral Economics Lab and uses the scientific approach to help you get your goals. The main aim of developers was to provide you with the possibility to improve your health, improve the brainwork, lose weight, get better sleep by instilling healthy habits in your life.

This app uses Firebase Authentication that helps it to know the identity of a user and can be used both for web and mobile applications. Such functionality is crucial for apps that are intended for creating a personalized experience that fits millions of active users with different habits. Firebase Authentication allows storing user’s data in a cloud securely. This tool provides a developer with easy-to-use SDKs and required UI libraries.

Firebase can be used not only with native iOS and Android apps, but also with Web apps. To better understand how it works, let’s continue with the practical part.

Creating a New Firebase Project

Let’s start with creating a new Firebase project. If you don’t have a Firebase account, you can sign up for a new one. After that Firebase will offer you to create a new project.

image03

Let’s call it webix-firebase:

image12

Then you will be taken to the Firebase dashboard page. You can use it to customize every aspect of your firebase app. But what we’re interested in now is database creation. We’ll use a JSON file named data.json that contains a database of movies. Here how it can look like:

[
    { "id":1, "title":"The Shawshank Redemption", "year":1994, "votes":678790, "rating":9.2, "rank":1},
    { "id":2, "title":"The Godfather", "year":1972, "votes":511495, "rating":9.2, "rank":2},
    /*more movies here*/
]

Add as many movies as you want and save the file. Now, return to the Firebase dashboard and click the Database link.

Since it’s not a good idea to use the root database for our firebase app, we need to create an empty child record. Click the “+” button to the right your default database name (which is webix-firebase), then choose the name and set a value for the new record:

image06

After that click the newly created record and choose the option Import JSON:

image11

Choose the previously created data.json file and the new real-time database will be created:

image00

Default security rules require user authentication. Since we don’t want to mess with the authentication issues, let’s allow all users to get access to our data. To do so, open the RULES tab:

image09

All you need to do is to replace the existing rules with the following:

{
  "rules": {
    ".read": "auth == null",
    ".write": "auth == null"
  }
}

After you click the PUBLISH button all changes will be saved.

At this point, we can finish with the configuration process and start creating our real-time firebase app.

Creating the Firebase App

To combine Webix components with Firebase functionality, we can use the Firebase adapter. It’s available on GitHub page – Webix and Firebase. After downloading the adapter, add the required JavaScript and CSS files to your page:

<!-- Webix -->
<script type="text/javascript" src="http://cdn.webix.com/edge/webix.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css">
<!-- Webix-Firebase adapter -->
<script type="text/javascript" src="../codebase/webix-firebase.js"></script>
<!-- FireBase -->
<script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-database.js"></script>

Now, it’s time to add some JavaScript magic. First of all, we need to create main Firebase connection and assign it to Webix:

firebase.initializeApp({
  databaseURL: "https://webix-firebase.firebaseio.com/"
});

//create firebase connection and assign it to webix
webix.firebase = firebase.database();

New to Firebase and don’t know the proper value for the databaseURL property? Have no fear. You can find it by opening the Database page of the Firebase dashboard:

image05

We’ll use the DataTable component to render data on the screen (learn about Webix JavaScript DataTables):

 webix.ui({
    id:"dtable",
    view:"datatable",
    editable:true, editaction:"dblclick",
    columns:[{
        id:"title", editor:"text", fillspace:1
    },{
        id:"year", editor:"text", fillspace:1
    },{
        id:"rating", editor:"text", fillspace:1
    }],

    //load data from /movies
    url: "firebase->movies",
    //save data to /movies
    save:"firebase->movies"
  });

As you can see from this code, we’ve created an editable table. The user should double-click the table cell to change its value.

The table will consist of three columns: Title, Year, and Rating. You can allow your app to show additional columns from the database. Feel free to add as many as you want.

The most interesting part is loading and saving data to the database. We have to use firebase->{reference} as data URL. In our case, we should use the value firebase->movies.

Checking the Results

Now you can open your firebase app in your web browser. Here’s what you should get:

image89start

You can double-click any cell and change the value. To see if changes were applied, you can open the Database page of your Firebase dashboard and check the state of the database.

But here’s a more interesting method. If you have a running web server such as Apache, you can copy the directory that contains your firebase app to its root folder. Then open it in your browser:

image04

Now you can connect to this server from any of your devices. For example, the IP address of my laptop within the local network is 192.168.100.10. So, I can get access to this app from my smartphone using the following URL: 192.168.100.10/webix_firebase:

image89

After that I can add some changes using the desktop browser. For example, I’m going to raise rating for 12 Angry Men movie. It deserves it.

image98edit

Now, if I return to my smartphone again, I’ll see that the corresponding value has changed automatically without page reloading:

image98finish

Conclusion

Firebase is a mobile and web application platform with real-time database support. It provides an API that allows developers to create web, iOS, and Android apps with the possibility to sync data to a NoSQL cloud database. This data can be synced to all connected clients and remains available when the app is offline.

Using the native Webix API, you can use Firebase features to build real-time web and mobile apps with different levels of complexity, from a simple to-do list to rich data products. Such apps can be used by millions of users.

Since Webix provides a developer with dozens of complex components that work out-of-the-box, you can save time resources to the growth of your service and significantly reduce the development time.

I believe that you got the idea of how real-time firebase apps work and how Webix can help you to build them. Keep following our blog, and we’ll keep sharing our tips and tricks with you. Share your experience with Firebase in comments below.

Written by
The following two tabs change content below.
All posts: