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. Jump directly to configurations section if you are already aware about JDK, Android studio, ionic and cordova installation.

JDK 8 installation

Mac
  1. Download the .dmg of Jdk 8 file from the link.
  2. Drag and drop JDK into the applications folder.
  3. Follow the setup wizard in JDK Software
  4. In your Terminal try to open bash_profile file using below command:
      $ nano ~/.bash_profile
  5. Add below alias in above file.
      export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_211.jdk/Contents/Home
      export PATH=$JAVA_HOME/bin:$PATH
      export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
Linux
  1. Download the JDK 8  .tar.gz from this official site link.
  2. Then extract .tar file like below command
      $ sudo tar xvzf jdk-8u5-linux-i586.tar.gz -C /usr/java
  3. Now to set your JAVA_HOME environment variable:
      $ JAVA_HOME=/usr/java/jdk1.8.0_05/
      $ sudo update-alternatives --install /usr/bin/java java ${JAVA_HOME%*/}/bin/java 20000
      $ sudo update-alternatives --install /usr/bin/javac javac ${JAVA_HOME%*/}/bin/javac 20000
  4. Make sure the Oracle's java is set as default java by:
      $ update-alternatives --config java
  5. You could check your java version like below command
      $ java -version
Windows
  1. Download the JDK 8 .exe from this official site link.
  2. Follow the setup wizard in JDK installation and setup it.
  3. After setup completed, set environment variable:
      Windows 7 - Right click My Computer and select Properties > Advanced
      Windows 8 - Go to Control Panel > System > Advanced System Settings
      Windows 10 - Search for Environment Variables then select Edit the system environment variables
  4. Click the Environment Variables button.
  5. Under System Variables, click New.
  6. In the Variable Name field, enter either:
      JAVA_HOME if you installed the JDK (Java Development Kit)
      OR
      JRE_HOME if you installed the JRE (Java Runtime Environment)
  7. In the Variable Value field, enter your JDK or JRE installation path.
  8. Click OK and Apply Changes as prompted

Android Studio installation

Mac
  1. Launch the Android Studio DMG file. Download
  2. Drag and drop Android Studio into the Applications folder, then launch Android Studio.
  3. Select whether you want to import previous Android Studio settings, then click OK.
Linux
  1. Unpack the .zip file you downloaded to an appropriate location for your applications, such as within /usr/local/  for your user profile, or /opt/ for shared users.
  2. To launch Android Studio, open a terminal, navigate to the android-studio/bin/ directory, and execute studio.sh.
  3. Select whether you want to import previous Android Studio settings or not, then click OK.
Windows
  1. If you downloaded an .exe file (recommended), double-click to launch it.
  2. If you downloaded a .zip file, unpack the ZIP, copy the android-studio folder into your Program Files folder.
  3. Then open the android-studio > bin folder and launch studio64.exe or studio.exe.

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
npm install -g cordova@8.0.0 ionic
For Windows
npm install -g cordova@8.0.0 ionic

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 installation of the application:

npm install

Create 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.


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

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@8.0.0
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
In case of issue like rxjs and rxjs-compat try to install:
$ npm install rxjs@6.3.3 rxjs-compat@6.3.3
In case of issue like ionic-native-http-connection-backend/ngx try to install:
$ npm i ionic-native-http-connection-backend@4

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