How to Build an Instant Messaging App with Ionic and QuickBlox
Ionic is an application development framework for building hybrid mobile apps. It is a free open-source framework packed with a set of rich mobile customized libraries like gestures and UI components.
It allows developers to use Angular, Vue, and React with a set of native-like UI components.
Ionic has a large community of developers with an ecosystem of community-generated content like templates, apps, and libraries.
Since its first release in 2013, Ionic has been used for creating millions of apps for both iOS and Android devices. In earlier versions, Ionic was built on top of AngularJS and Apache Cordova.
Ionic is used to create all sorts of apps including messaging, games, news, and customer engagement apps.
QuickBlox is a messaging infrastructure platform with enterprise-grade functionalities. It offers real-time instant messaging, video calling and conferencing, push notification, and file-sharing options.
It can be used to create custom messaging apps according to enterprise requirements and workflow. In this tutorial, we will learn how to use Ionic to build a messaging app with QuickBlox.
To combine QuickBlox robust messaging functionalities with Ionic, you have two options:
Developers also can use QuickBlox REST-API endpoints to access all QuickBlox functionalities like messaging, WebRTC for video calling, and push notifications.
sudo npm install -g @ionic/cli
create a project
$ ionic start quickblox-messenger
Next you will have to choose which framework you want to use: Angular, React or Vue. For this project, we will use Vue.
Now we will switch to our project directory and run the project.
$ cd quickblox-messenger
$ ionic serve
Ionic server will fire a local development server for our Ionic project here
Install required packages
$ npm install quickblox --save
npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript
Then change all `.ts` files to `.js`, then remove
Don’t forget to remove `lang=”ts”` from vue components
shims-vue.d.ts file as they are not needed.
To start working with QuickBlox it is required to get our App credentials from the QuickBlox Dashboard.
Before we login, we need to initiate the QuickBlox app. It is advised to follow the best practice to keep.
Now we will create our login template. This template will go on `Home.vue` between `
Before we login, we are required to set up QuickBlox apps and get the app credentials from the QuickBlox developer’s dashboard.
To initiate the app we will set up our example here
To login, we will use QuickBlox login function within our Login Method. As soon as we log in we will retrieve our user details, which will include name, email, nickname and avatar.
Connect to a certain dialog
QuickBlox uses dialogs as entities to classify the type of room, channel, or conversation the messages are being sent to.
There are 3 types of dialogs:
- Private group;
You can create dialogs through the API or using the QuickBlox developer’s dashboard.
For this tutorial, we will set up the dialog using the QuickBlox dashboard.
As soon as we have our dialog or room ready, we need to connect to it to be able to send messages:
Our workflow will be as follows:
Initiate QB -> Login -> Connect to dialog -> Reiterative messages
In this section as well, we will know how we will get messages.
To be able to display the messages with information about users, we will have to fetch the user’s data per every message as in the following method.
Here we will display the room messages, by this piece of code under our login template.
To send a message, we will connect our input form and send the message content as the user clicks the “send” button.
Subscribe to new messages
We need to get new messages from QuickBlox, so here we will create a message listener function just under the QuickBlox Initiate function. This function will push new messages directly to our messages list.
Ionic is a fast efficient way to create a hybrid app without a hustle. It offers different framework choices easily maintained and can be packed for iOS, Android, and Desktop for multiple systems (Linux, Windows, and macOS). The Ionic QuickBlox app can serve as a template for developing custom-flow communication apps.