How to Build a Messaging App for iOS and Android with Meteor / Cordova
So What are Meteor and Cordova?
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:
- DDP (Distributed Data Protocol)
- NoSQL Database (MongoDB)
- Supports multiple frameworks
- Rich double ecosystem (Meteor’s Atmosphere and NPM)
- Mobile ready
- Supports many frameworks
- Ability to use Cordova extensions with ease
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
- Remove the unnecessary packages
- Adding mobile required packages
- Setting the UI CSS Framework
- Client-side database
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:
- Initiate QuickBlox SDK
- Create a login form
- Connect to a certain dialog
- Retrieve the messages
- Send a new message
- Subscribe to the new messages
- Render messages
The main.html file
The style.css file
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
To sum up: