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.
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
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
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.
Let’s call it webix-firebase:
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:
After that click the newly created record and choose the option Import JSON:
Choose the previously created data.json file and the new real-time database will be created:
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:
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:
<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:
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:
We’ll use the DataTable component to render data on the screen (learn about Webix JavaScript DataTables):
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:
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:
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:
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.
Now, if I return to my smartphone again, I’ll see that the corresponding value has changed automatically without page reloading:
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.
