facebook How to Build an Instant Messaging App with Ionic and QuickBlox • QuickBlox

How to Build an Instant Messaging App with Ionic and QuickBlox

Hamza Mousa
18 Jun 2021
Building 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.

Although the new release still uses Cordova in the background, it supports React, Angular, Vue, as well as plain JavaScript.

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:

  1. JavaScript SDK
  2. QuickBlox JavaScript SDK can be used with Ionic React, Ionic Vue, or Ionic Angular. Note that Ionic is a web-first that uses cross-platform standards web-based technology. Unlike React Native which provides an abstraction layer for iOS/ Android native UI.

  3. REST-API
  4. Developers also can use QuickBlox REST-API endpoints to access all QuickBlox functionalities like messaging, WebRTC for video calling, and push notifications.

Install ionic

sudo npm install -g @ionic/cli

create a project

bash
$ 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

In this step, we will install QuickBlox JavaScript SDK

QuickBlox SDK

$ npm install quickblox --save

Some developers may require to work with standard Vue JavaScript convention without TypeScript, here is a quick tweak to remove TypeScript.

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 Array from router/index.js.

Don’t forget to remove `lang=”ts”` from vue components script and 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.

QuickBlox login

Now we will create our login template. This template will go on `Home.vue` between `` and `` which is the primary container unit for Ionic.

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

Vue created

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:

  1. Public;
  2. Private group;
  3. Direct.

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.

Sending messages

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.

Conclusion

As our tutorial came to an end, we explored the basic logic to how to build QuickBlox Ionic apps. Although we used Vue for this tutorial, the same concept can be done for Angular, React, and plain JavaScript.

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.

Share article

Subscribe for news

Get the latest posts and read anywhere.


    Thanks for subscribing!

    You will receive an email shortly to verify your subscription.

    Check out your inbox!

    Ready to get started?

    QUICKBLOX
    QuickBlox post-box
    QuickBlox x

    Subscribe for news

    Get the latest posts and read anywhere.


      Don’t forget to visit our social networks:

      • QuickBlox twitter
      • QuickBlox fb
      • QuickBlox linkedin
      • QuickBlox medium
      • QuickBlox git
      • QuickBlox instagram