QB Cordova + Meteor: Build a messaging app for iOS and Android with Meteor / Cordova

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.

So What are 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:

1. DDP (Distributed Data Protocol)
2. NoSQL Database (MongoDB)
3. Supports multiple frameworks
4. Live-update
5. Rich double ecosystem (Meteor’s Atmosphere and NPM)
6. Mobile ready
7. Supports many frameworks
8. Ability to use Cordova extensions with ease

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.

Build QuickBlox messaging application with Meteor/ Cordova

Setting up Meteor for Mobile development

1. Remove the unnecessary packages
2. Adding mobile required packages
3. Setting the UI CSS Framework
4. Client-side database

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:

1. Initiate QuickBlox SDK
2. Create a login form
3. Connect to a certain dialog
4. Retrieve the messages
5. Send a new message
6. Subscribe to the new messages
7. Render messages

Full JavaScript Code

The main.html file

The style.css file

Build

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.

To sum up:

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.