About AddWeb Solution

AddWeb Solution Pvt. Ltd. is an eminent IT development, consulting and outsourcing company. The AddWeb Ionic Chat is one of our recent contribution to the open source community, which we've been a part of since a long time. Below we've shared a few steps on how to start up the app, configure it on different device, what features does the app consists of and what are the updates that we've made to be current version of this AddWeb Ionic Chat.

Documentation of AddWeb Ionic Chat

Please scroll down to learn the process and drop us a mail in case of any queries. We'll be more than happy to help you!

Quick Start

This section is quick guide for the users who are new to Ionic and hybrid mobile application development.

Ionic and Cordova installtion

Skip this if you already have knowledge about creating application using ionic and cordova

The first step involves installing cordova and ionic 3. To do this, in terminal you need to run the following command.

For Osx / Ubuntu
sudo npm install -g ionic cordova
For Windows
npm install -g ionic cordova

Also make sure that you have already install node.js in your machine before installing ionic and cordova. After that you need to download the zip from here and extract in the desired location where you are putting all your projects for starting this project.

That is all you need to know about installing and starting with ionic project

Configurations

In this section we will see the steps for setting the firebase for the application as it is used for the storage, authentication and database.

Let's start by creating new Firebase app on https://firebase.google.com.. Once you are done with creating new Firebase app, just select "Add Firebase to your web app". As seen below, and copy details.

After copying the detail just paste it inside your src/app/app.angularfireconfig.ts file

Now as we have created the new app in firebase, we need to setup the Sign-in method. In our case its Anonymous.

Now, let's have a look at the extra dependencies needed for this application.

In this application we are going to use Twilio for receiving OTP on device for login.

In twilio you need to create paid account and then you need to create an application from this link in twilio for using it in our application.

Once you created the application you need to go through the Build and Verify process from twilio for getting the API credentials, you can find that process on Build and Verify link.

As already mentioned above that application is using firebase for storage, authentication and database so we need to follow some commands in order to setup the application other than just putting the configs in file.


Install angularfire2 and firebase using Below Command
npm install firebase@4.6.0 --save
npm install angularfire2@5.0.0-rc.3 --save

As we have already created the app in firebase we just need to add the bundle id and SHA key to that key.(Ex of bundle id is "com.addwebChat.chat" and for generating SHA key we need to follow below mentioned command.

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

also install below plugin

ionic cordova plugin add  https://github.com/jestcastro/cordova-plugin-firebase.git

now you will get the new google-services.json generated so just download it and put in root directory of the application.

After that you just remove the android platform and again add it then finally run the application

ionic cordova platform rm android
ionic cordova platform add android
ionic cordova run android --device

This application is now supporting the iOS platform as well. For iOS platform we need to do little more configurations in firebase. First of all we need to add iOS application as well from firebase project settings.


From here you need to take the GoogleService-Info.plist and need to put it in the root folder of the application that is same place where your google-service.json file is residing.

After that you just remove the ios platform and again add it.

ionic cordova platform rm ios
ionic cordova platform add ios

As we are using the iOS and this application needs the push notification we may need to make certain configurations for iOS platform. These configurations include below mentioned steps

Steps
  • Creating APNs Certificates from your apple developer account
  • Adding APNs Certificates to Xcode

As we are using Anonymous authantication and localstorage, so we need to enable some rules of Firebase. Add below steps:

  • Go to your Firebase console >> Database >> Realtime Database >> Rules
  • Add below rules:
    {
      /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
      "rules": {
        ".read": true,
        ".write": true
      }
    }
                      
    Publish above rules so you can access your database.

Now everything is ready for you to go with the iOS version of the application so we can run the application.

ionic cordova run ios --device

Addweb ionic chat

Features:

We are providing various features of Addweb ionic chat.

  1. One to one and group chatting
  2. Firebase and Twilio integration for authentication and database
  3. Phone number verification
  4. Contact syncing with devices
  5. Media, contacts, location and documents sharing to one to one and group chats
  6. Profile picture upload form gallery and camera
  7. Cropping feature while uploading profile picture from camera
  8. Friends list
  9. Send friend request
  10. Delete account
  11. Retrieve old messages
  12. Push notification
  13. Message read/unread
  14. Message search
  15. Contact: Search / Add new / Refresh
  16. Integrated list of countries

Updates

Update on 28th April 2018:

We have introduced push notification feature in the addweb ionic chat application, so for that you need to make certain changes in firebase console.

First you need to install native firebase plugin of ionic using below mentioned commands.

ionic cordova plugin add cordova-plugin-firebase
npm install --save @ionic-native/firebase

As displayed in above message you need to copy the Legacy server key from firebase console to the /src/providers/fcm/fcm.ts file.

Errors

Many users have reported the issue that application is not working properly in the latest android version of ionic, so here is the workaround for one issue which we have faced during the development.

If the version of android in application is 7+ then you need to change the path of stringsXml variable in /plugins/cordova-plugin-firebase/scripts/after_prepare.js this folder from stringsXml: ANDROID_DIR + '/res/values/strings.xml' to stringsXml: ANDROID_DIR + '/app/src/main/res/values/strings.xml' this.

We have to make this change because the change in folder structure that the new android version has introduced.

Update on 21st June 2018:

We have introduced searching functionality for contacts and messages. Along with that as we have received the request from many of our client we have added the country phone code at the time of login only so that everytime developer does not need to add the code manually. Along with these, we have also introduced message read and unread functionality for keeping the track of the messages received by receiver.

Update on 20th November 2018:

We have received requests from many of our clients to introduce Group chatting feature. The latest update contains group moderation, participants management, group profile picture uploading features. Along with that we have enhanced images sharing interface. We have provided location, contacts and documents sharing features as well.