QuickBlox is a messaging infrastructure for enterprises that offers messaging and communication as a service (IaaS). The messaging is packed with file and content sharing, real-time video conferencing, and push notification. QuickBlox offers multiple SDKs for mobile and web development with a primary focus on enterprise customers. Its SDKs include Flutter SDK, native iOS SDK, native Android SDK, JavaScript SDK, and Server REST-API. In this tutorial, we will use QuickBlox JavaScript SDK with Meteor and Cordova to build a messaging mobile application. But first, let’s talk about Meteor and Cordova.
Meteor is an agonistic JavaScript platform, designed to work well with other JavaScript frameworks like React, Angular, Blaze, and Vue. It uses MongoDB as a database which is a NoSQL document database.
The advantage of using Meteor is that it can be used to build iOS and Android messaging applications with ease, using any preferred framework. Its main features include:
Cordova (or Apache Cordova) is an open-source application development framework that allows developers to build mobile apps with web technologies such as JavaScript, HTML, CSS, and other JavaScript frameworks. With Cordova, web developers can build Android or iOS messaging applications with full access to device services. Apache Cordova has a rich ecosystem of plugins and extensions and has been used as a core for many other mobile frameworks like Ionic. Cordova is an essential part of Meteor. Developers can easily add a platform iOS or Android and build their application with one command, $ meteor build, which will generate 3 projects: web, iOS, and Android.
I like to use Meteor/ Cordova to build mobile apps, simply because I take advantage of the awesome meteor client functionalities like a client-side database (minimongo), localStorage, reactive components, full CSS control, many CSS frameworks options, and overall real-time tracker.
Setting up Meteor for Mobile development
QB JavaScript SDK setup
Installing QuickBlox JavaScript SDK is an easy task:
Create a QuickBlox application
To connect to QuickBlox you are required to create an application and get your app credentials. You can register for a developer account and create your first application here.
Also let’s set up our first user, public room, and private groups.
As soon as you have everything ready you can get your app, public room, private group and user credentials. Then create a file for these parameters:
Please take a note, that is a practical example not a best practice to save such data.
Import this file in main.js
Set-up the UI library and the file.
I will be using a setting library I have created to save settings and preferences in a client-side collection: hamzamu:settings. This package will save records temporarily as long as the application is open.
In this step I created a two client-side MongoDB collection which will warp MiniMongo with localStorage.
You can see as well that we initiated the QuickBlox application at the last line with the appID, authKey and authSecret.
Note that you can create the dialog, users pragmatically using QuickBlox SDK API, however, we will focus here about integrating send/ receive messages and Meteor/ Cordova integration.
Here are the basic steps that you need to create a functional secure messaging application with QuickBlox:
Build your Meteor app for iOS and Android. We need to add the specific platforms for the target build and make sure it works. Please note, some adding the platform does not add the SDK or environment variables.
To build the app simply run
As you open the specified build directory you will find your Android and/or XCode package ready to be polished.
Amazing Meteor tools:
With Meteor, you can use Tracker, Sessions, ReactiveVar to add more real-time functionalities as well as countless packages to its ecosystem.
Add more QuickBlox functionalities
You can add more functionalities easily with QuickBlox JavaScript SDK, such as video calling, file sharing, and push notification.
Meteor is a great tool for building real-time reactive web applications, as well as mobile apps for Android and iOS devices. Simply because with Meteor, Cordova is on anabolic reaction and much faster speed. In this tutorial we took a look at how to prepare Meteor for mobile development, integrate QuickBlox JavaScript SDK as we built a nice quick chatting application with it.
You will receive an email shortly to verify your subscription.
Check out your inbox!