Ionchat Firebase v3 Messenger

Quick Start Configurations Ionchat

Welcome to Ionchat Firebase v3 Messenger, I would first like to thank you for purchasing Ionchat. This documentation will serve as your manual to easily deploy your own Firebase powered Messenger Ionic 3 app. If you want to learn more about Ionchat, head straight directly to the Ionchat section. Lastly if it's not too much to ask, kindly leave me a comment on Codecanyon on your Ionchat experience. Let's get started.

This section will guide you to easily deploy your own full-featured Firebase powered authentication Ionic 3 application on your development environment. This section will be subdivided into the following subsections:


Ionic 3 and Cordova Installation

* Skip if you already have Ionic 3 and Cordova installed

The first step involves installing Cordova and Ionic 3. To do so, we open our terminal (for OSX) / Git or Console2 (for Windows) app and execute the following command: 

For OSX:

sudo npm install -g cordova ionic

For Windows:

‚Äčnpm install -g cordova ionic

If you encountered an error during installation, please make sure to check if Node.js is installed.

Congratulations! You have successfully installed Ionic 3 and Cordova.

For more information on the installation of Ionic 3, please refer to the official Ionic 3 Installation documentation here.

Creating an Ionic 3 Project

After successful Ionic 3 and Cordova installation, we then proceed with creating a new Ionic 3 project by executing the following command:

ionic start <PROJECT_NAME> blank

Replace <PROJECT_NAME> with your desired folder/project name. This will prompt Ionic 3 to download and install all the neccessary files for our project.

Now, unzip or extract the contents of Ionchat-v3.zip to your project <PROJECT_NAME> directory and override the contents. Note: Doing this will override your project directory and so it is advisable to do this on a fresh Ionic 3 project. If you have an existing project DO NOT OVERRIDE, doing so will make you lose your existing project.

Congratulations! You now have created an Ionic 3 project with this kit's codebase.

Installing Dependencies and Plugins

To install the dependencies and plugins to our Ionic 2 project, our terminal must first to point over to our project directory. This can be easily done by executing the following command:

cd <PROJECT_NAME>

Now execute the following commands to install Firebase, AngularFire 2, Oauth, InAppBrowser, and Camera:

npm install firebase --save
npm install angularfire2 --save
npm install @ionic-native/core --save
npm install ng2-cordova-oauth --save
npm install moment --save
npm install ionic-native --save
cordova plugin add cordova-plugin-inappbrowser --save
cordova plugin add cordova-plugin-camera --save
npm install @ionic-native/camera --save

This will download and install the dependencies required by this kit.

One last thing to note is that, your project SHOULD be on version Ionic 3, if you're still on Ionic 2, you have to update your project's version to Ionic 3. You can do that by changing your version on package.json and calling npm install.

Congratulations! You have now successfully installed the required dependencies and plugins on your project.

Deploy on iOS and Android

Now that you have successfully configured everything, the last step of course is to deploy your app on iOS or Android device either via emulator/simulator or actual mobile devices. But before everything else, we must first let Ionic 2 know what platform we are intending to build the project for.

To do so first open the terminal window again and head over to your project directory with the following command:

cd <PROJECT_NAME>

Afterwards, we then proceed to add the platform that we are building the project for with the following command:

For iOS:

ionic platform add ios

We then execute the following command to deploy our project on the iOS Simulator

ionic emulate ios

If you want to deploy your project on an actual Apple device, simply connect your Apple device via USB and navigate to your <PROJECT_NAME>/platforms/ios/ and open <PROJECT_NAME>.xcodeproj to open Xcode and deploy as you normally does. Congratulations! Your app is now running on your iOS simulator/device.

Note: You need a Mac and an Apple developer account, if you're deploying for iOS.

For Android:

ionic platform add android

We then execute the following command to build the project apk:

ionic build android

The apk will be generated at <PROJECT_NAME>/platforms/android/build/outputs/apk folder which we can install to our Android device/emulator. Congratulations! Your app is now running on your Android simulator/device.

Note on Live Reload:

If you are using live reload command in deploying your app, it is important to add 

<allow-navigation href="*"/>

in your config.xml. This will prevent numerous runtime and network errors from your app.

This section will guide you in configuring your app for your own app on Firebase, Facebook, and Google. This section is subdivided into the following:


Firebase

We first start by creating a new Firebase app at https://firebase.google.com. After successfully creating a new Firebase app, select "Add Firebase to your web app". As seen below, and copy the shown credentials. 

 

 

After copying, open to src/login.ts and set your Firebase app's credentials.

export const firebaseConfig = {
  apiKey: "AIzaSyA2QrCach2kxQpuwtjzLuP5GkWq2gc_6Xs",
  authDomain: "fir-v3-auth-social-kit.firebaseapp.com",
  databaseURL: "https://fir-v3-auth-social-kit.firebaseio.com",
  storageBucket: "fir-v3-auth-social-kit.appspot.com",
  messagingSenderId: "86899339460"
};

Now head back to your Firebase app's console and select Sign-In Method under Authentication tab and enable Email/Password.

*If you're planning to use Guest logins in your app, make sure to also enable Anonymous.

 

 

Now, back to your Firebase app's console, select Rules under Database tab, and set the rules as following:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null",
    "accounts": {
      ".read": true,
      ".indexOn": ["username"]
    },
    "requests": {
      ".read": true,
      ".write": "auth != null"
    }
  }
}

 

Lastly, head over to Rules under Storage tab, and change the following:

allow read, write: if request.auth != null;

to

allow read, write;

Your Storage rules should now look like this:

service firebase.storage {
  match /b/fir-v3-auth-social-kit.appspot.com/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}

Congratulations! You have successfully configured your Firebase application!

Facebook

We first start by creating a new Facebook web app on Facebook Developer's Console at: https://developers.facebook.com. After creating your web app, make sure to keep track of its appId and appSecret.

 

 

Next, add Facebook Login to your Facebook app, and add http://localhost/callback as a valid OAuth redirect. Make sure to also enable Client Oauth Login and Web Oauth Login.

 

 

Now head over to Sign-In Method under Authentication in your Firebase app's console, and enable Facebook login by setting your appId and appSecret.

 

 

Lastly, open src/login.ts and set your facebookAppId with your appId.

export const facebookAppId: string = "1025234637591184";

Congratulations! You have successfully configured Facebook Login in your application!

Google

With Google, disabling app logins from InAppBrowser, it is now trickier to implement Google Login in our apps. Thankfully this section will discuss the alternative way on how to make your users login to your apps using Google APIs. Since the implementation of Google Login will vary for iOS and Android, this section will be subdivided into two sections: one for iOS, one for Android.

 

iOS

Start first by adding an iOS app on Firebase console enter your app name, and your app package bundle identifier which you can find on your config.xml. In my case it's com.ionicframework.firebaseauth the important thing here is it should match your app bundle identifier on your config.xml. 

<widget id="com.ionicframework.firebaseauth" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

After adding that in, proceed to generate your configuration files, and download the GoogleService-Info.plist. Place GoogleService-info.plist into the root of your project's directory.  

Now open your GoogleService-Info.plist with a text editor and keep track of your REVERSED_CLIENT_ID because we'll be using it shortly. Also keep track of your CLIENT_ID because we'll be using it later on.

<key>CLIENT_ID</key>
<string>31493597450-3o6bp85qerb6lsh81cj9df47b9shcs4o.apps.googleusercontent.com</string>
<key>REVERSED_CLIENT_ID</key>
<string>com.googleusercontent.apps.31493597450-3o6bp85qerb6lsh81cj9df47b9shcs4o</string>

It is now finally time to add Cordova plugin for Google Plus in our project. To do that open the terminal and redirect to your project directory. Now execute the following command:

ionic plugin add https://github.com/EddyVerbruggen/cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=yourReverseClientId 
npm install @ionic-native/google-plus --save

You have to replace yourReverseClientId with your REVERSED_CLIENT_ID from your GoogleService-info,plist.

In my case it's:

ionic plugin add https://github.com/EddyVerbruggen/cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=com.googleusercontent.apps.31493597450-3o6bp85qerb6lsh81cj9df47b9shcs4o

Now retrieve your CLIENT_ID from GoogleService-info.plist and head over to Sign-In Method under Authentication in your Firebase app's console, make sure to enable Google login and whitelist your CLIENT_ID.

 

A few things worth mentioning is that if you're deploying for iOS 10, keychain access should be enabled, so we add the KeychainAccessibility on our config.xml if the platform is iOS:

<platform name="ios">
  <allow-intent href="itms:*"/>
  <allow-intent href="itms-apps:*"/>
  <preference name="KeychainAccessibility" value="WhenUnlocked"/>
</platform>

While you're at it check also if the REVERSED_CLIENT_ID is set properly.

<plugin name="cordova-plugin-googleplus" spec="https://github.com/EddyVerbruggen/cordova-plugin-googleplus">
  <variable name="REVERSED_CLIENT_ID" value="com.googleusercontent.apps.31493597450-3o6bp85qerb6lsh81cj9df47b9shcs4o"/>
</plugin>

Note: Google Login might not work when running your app on an iPhone via emulator/simulator. Deploy it to an actual device via Xcode and it should work without any problems, assuming you have followed the instructions carefully.

Congratulations! You have successfully configured Google Login for iOS in your application!

 

Android

Start first be creating an Android app on Firebase console enter your app name, and your app bundle identifier which you can find on your config.xml. In my case it's com.ionicframework.firebaseauth the important thing here is it should match your app bundle identifier on your config.xml. 

<widget id="com.ionicframework.firebaseauth" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Proceed then to add Android signing certificate SHA1. To generate one, open the terminal and type the following command:

For Mac/Linux:

For Windows:

You will be prompted with a password, the default password is: android.

After generating your certification, it should show 3 certificates, MD5, SHA1, and SHA256. Head back to Google developer's console and place in your SHA1 hash. It should be accepted and you can then proceed to generate configuration files. Finally, download the google-services.json. Place the google-services.json into the root of your project's directory. 

It is now finally time to add Cordova plugin for Google Plus in our project. To do that open the terminal and redirect to your project directory. Now execute the following command:

ionic plugin add https://github.com/EddyVerbruggen/cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=yourReverseClientId
npm install @ionic-native/google-plus --save

Since we're deploying for Android, the yourReverseClientId doesn't matter and you can omit the --variable REVERSED_CLIENT_ID flag, but if you're planning on using Google Login with iOS refer to the instructions above on the iOS section. 

Now open your downloaded google-services.json using a text-editor and look for the client_id with client_type of 3.

{
   "client_id": "31493597450-u75kd39sk6f8q6r4bfh807oush6tq7lu.apps.googleusercontent.com",
   "client_type": 3
}

Now open src/login.ts and set in your googleClientId as your client_id.

export const googleClientId: string = "31493597450-u75kd39sk6f8q6r4bfh807oush6tq7lu.apps.googleusercontent.com";

Finally, head over to Sign-In Method under Authentication in your Firebase app's console, make sure to enable Google login and add your client_id to the whitelist.

 

Note: Google Login might not work properly when you're running your app on an emulator without Google APIs this is mostly the case for Genymotion and other emulators. Deploy it to an actual Android device with Google APIs and it should work without any problems, assuming you have followed the instructions carefully.

 
Congratulations! You have successfully configured Google Login for Android in your application!

 

This section will cover the various features this kit. This section is subdivided into the following:


Registration

The user can sign up by first selecting Signup with Email on the LoginPage. The user is then asked for an email and password. The Join button will only become enabled when both email and passwords are valid. Email should be a valid email, while the password must be of minimum length of five characters and should not contain special characters and symbols. Both fields are required. After successful registration, the user is automatically redirected to the verification page where they will be asked to confirm their email addressed. 

Login

The user can login by entering their email and passwords. When the user is successfully logged in, Firebase keeps track of the logged in user and is no longer asked to login again whenever the app is reopened. There are appropriate errors provided when an error is encountered such as when the user entered the wrong password.

Reset Password

The user can reset their password by entering their email address. When a user with the said email is found on Firebase, a password reset mail will be sent to the email. The user can then click the link on their email and set a new password. There are appropriate errors provided when an error is encountered such as when the email entered is not found on Firebase.

Email Confirmation

When a user is first registered on Firebase either via email or Facebook, an email confirmation will be sent to their email. Although if the user is registered via Google Login, they are no longer asked to verify their email address. However, when a user changed password into a gmail account, they are still required to verify the email. After successful confirmation, a user data (such as name, userId, img) will be inserted on the Firebase database, however users that have yet to confirm their email won't have any data on the database. More on this user data will be discussed on Accessing User Data section below.

Social Login

The user can login via their Facebook and Google account. When the user is logged in through Facebook for the first time, they will be asked to confirm their email address that is associated with their Facebook account. Meanwhile, if the user logged in using their Google account, they are no longer asked to confirm their email address. Social provider data such as name, photo, and email will be automatically retrieved. Make sure to enable all the appropriate configuration and setup needed in order for Social Login to work (please refer to Configurations section of this document).

Guest Login

The user can login anonymously to the app via Guest Logins. When the user is logged in as guest they will be redirected to a different home page dedicated to guests where they can upgrade the guest account by linking it with their Facebook or Google account. After linking and confirmation, the guest user is then upgraded to a full user account. 

Account Management

When a confirmed user is logged in the user is then redirected to a home page where they can manage their profile. This includes updating their profile name, updating their profile picture, updating their email address, updating their password, deactivating their account, and logging out. 

Set Profile Name

A prompt will show up which will be filled in with their current name. The user can then enter a new name which will be updated on the Firebase user, and user data on the database.

Set Profile Photo

A prompt will show up asking if the user wants to select a photo from gallery or take a photo using their camera. When an image is selected it will first be uploaded on Firebase Storage, and will then updated on the Firebase user, and user data on the database.

Change Email Address

A prompt will show up asking for a new email address. When the email is successfully changed, the user is then redirected to the verification page and is asked to reconfirm the new email address.

Change Password

A prompt will show up asking for the current password, as well as the new password. The current password is first checked if it is the correct password. When everything is correct, the password is then updated on the Firebase user. Passwords are NOT stored on the user data on the database because this is sensitive data.

Delete Account

A prompt will show up, and warn the user that deleting their account is irreversible. When the user proceeds with the deletion, the user data on the database and their profile picture will be deleted on Firebase database and storage as well. After successful delete, the user is then redirected to the login page. 

Logging Out

When the user logged out, when the app is reopened, the user is naturally asked to login.

Accessing User Data

As explained earlier, confirmed users will have their user data on the database. User data can be accessed on the database by the following firebase reference:

firebase.database().ref('accounts/' + userId)

So it is important that when you're making your data on the database, that a reference it to the userId of the logged in user. To access the userId of the logged in user you can use:

firebase.auth().currentUser.uid;

The structure of the user data on the database is as follows:

userId: {
   dateCreated: Date,
   email: string,
   img: string,
   name: string,
   provider: string,
   userId: string
}

If you want to use AngularFire 2, to return an observable object for user data you can use the following snippet:

this.angularfire.database.object('/accounts/' + firebase.auth().currentUser.uid).subscribe(account => {
      this.user = account;
});

Now from this snippet, everytime our user data on the database is updated, it will call the subscribe function block, thereby setting our controller's user variable to automatically reflect the changed data on the database. Of course, you have to import AngularFire 2 on the constructor of the controller.

This section will cover the various customizations of this kit including how to import login functionalities to an existing application. This section is subdivided into the following:


Import to Existing Application

Import files and dependencies

If you already have an existing application and wanted to just import the login functionalities to your app, you're in luck because you can do that easily. Here's a list of files that you will need to import into your application:

src/login.ts
src/validator.ts
src/providers/alert.ts
src/providers/image.ts
src/providers/loading.ts
src/providers/login.ts
src/providers/logout.ts

Make sure to copy the said files into your existing application project directory.

Next head over to src/app/app.module.ts and import the said frameworks, providers and files.

import * as firebase from 'firebase';
import { AngularFireModule, AuthMethods, AuthProviders } from 'angularfire2';
import { LoginProvider } from '../providers/login'; 
import { LogoutProvider } from '../providers/logout'; 
import { LoadingProvider } from '../providers/loading'; 
import { AlertProvider } from '../providers/alert'; 
import { ImageProvider } from '../providers/image'; 
import { Login } from '../login';

Now make sure to initialize Firebase with the following code anywhere outside the @NgModule:

firebase.initializeApp(Login.firebaseConfig);

and inside imports of @NgModule

AngularFireModule.initializeApp(Login.firebaseConfig, { method: AuthMethods.Password, provider: AuthProviders.Password })

Make sure you have installed Firebase and AngularFire 2 packages, otherwise you'll have some errors on importing firebase and AngularFire 2 (refer to Quick Start section).

Firebase Login Configurations

You now then have to configure your authentication methods on your Firebase app, head over to Configurations section of this manual and configure them. After following the instructions, you should be able to set a facebookAppId and googleClientId on src/login.ts as well as configured your login methods on your Firebase app. You can now proceed to setting your own pages, please refer to Setting your Pages section below.

Login Methods

Now that you have imported the needed files, you can then refer to Providers Methods, and call the appropriate methods in your pages that needs them. Don't forget to import the providers in the controller.

Providers Structure

This section aims to cover the basic explanation on how the app is structured with regards to the providers.

A brief overview of the providers is as follows:

alertProvider

The provider class mainly responsible for showing success and error messages in the app. The messages can be customized inside this class. If you added your own messages don't forget to make a function for them or add them in the showErrorMessage switch block.

imageProvider

The provider class mainly responsible for most of the image processing including uploading to Firebase done in the app. The image settings can be customized in this class.

loadingProvider

The provider class mainly responsible for showing the loading spinner on the app. The spinner can be customized in this class. 

loginProvider

The provider class mainly responsible for most of the login functionalities in the app. It's important that you have set your own configs on src/login.ts as well as configured them properly (refer to Configurations section)This class will be imported to your main view of the app (usually LoginPage). It's important that this provider is hooked with your navController because this provider redirects the views of your app depending on the status of the user.

logoutProvider

The provider class mainly responsible for logout functionality of the app. It's important that this class is hooked with your app. Every view of your app with logout functionality, should import this provider and call setApp(app) on the constructor.

Basically, the LoginProvider composes the main chunk of the structure. This provider, observes the status of the user on Firebase and directs the view accordingly depending on the status of the user. For instance, if the user is logged in anonymously, the loginProvider redirects the view to the trialPage, similarly if the user is awaiting email confirmation, the user is redirected to the verificationPage. Finally, if the user has completed their registration and confirmed their email, they are redirected to the homePage. Having said, it is important that the LoginProvider is hooked with your navController. This can be done by calling this.loginProvider.setNavController(this.navCtrl); on the constructor of your main page (usually the LoginPage).

The LogoutProvider, simply supervises the logging out functionality of the app. Every one of your pages that needs the logout functionality needs to import this provider and have to call this.logoutProvider.setApp(this.app);

The alert, image, and loading providers are simply helper classes that show alerts, messages, loading indicators, and even process images and upload on Firebase.

When a user is directed to the homePage for the first time, a user data will be created on the database. Users awaiting verification will not have a user data yet, unless they have already confirmed their email for the first time and was headed to the homePage. Refer to the Accessing User Data section as to how to access the user data on the database.

If you want to learn more about providers and their methods, continue on to the next section.

Providers Methods

loginProvider

setNavController: hooks this controller up with the navController of your main view. This step is mandatory to redirect the view of the app.

facebookLogin: opens a Facebook login prompt and log the user in using Facebook. Make sure to configure your app with Facebook login as well as set your facebookAppId on src/login.ts.

googleLogin: opens a Google login prompt and log the user in using Google. Make sure to configure your app with Google login as well as set your googleClientId on src/login.ts.

guestLogin: log the user in anonymously as guest, the user is redirected to trialPage

emailLogin: log the user in given the email and password.

register: registers the user on Firebase given the email and password.

sendPasswordReset: send a password reset email, given the email.

 

logoutProvider

setApp: hooks this controller up with the app. This step is mandatory to properly log the user out and clear navigation stacks.

logout: log the user out. Make sure that you have called setApp in the constructor of the controller that uses this method.

 

imageProvider

imgURItoBlob: converts the imageURI returned by the camera to Blob required by Firebase.

generateFilename: generate a random filename with .jpg extension for Firebase upload.

setProfilePhoto: process and uploads the photo on Firebase afterwards updates the database. Needs user object and camera sourceType.

deleteImageFile: deletes the image file, given the url of the imageFile.

deleteUserImageFile: deletes the image file of the user, given the url of the imageFile and the user object. 

 

loadingProvider

show: show a loading spinner

hide: hide the loading spinner

 

alertProvider

A couple of methods here are simply just error messages and success messages. You can define your own messages, just follow the template.

 

Setting your Pages

You can set your own pages on src/login.ts, don't forget to import the said pages on your src/app/app.module.ts and import them on src/login.ts

homePage: the page to redirect after successful login and verification.

verificationPage: the page to redirect when the user is awaiting email confirmation.

trialPage: the page to redirect when the user is logged in anonymously or as guest.

One thing to note is that your rootView (usually the loginPage) with the login functionalities, should import the LoginProvider and be hooked with the navController on the constructor.

this.loginProvider.setNavController(this.navCtrl);

Setting your Validators

You can customize and set your validators on src/validator.ts. The validators here are used by the formGroups in creating and validating the forms for login, and registration as well as the prompt messages. When setting your validators it's important that you know RegEx. In testing your RegEx, you can use http://www.regexpal.com, https://regex101.com, among others.

A sample form validator is as follows:

A sample prompt validator is as follows:

Loading Indicator

You can easily customize the loading indicator throughout the app on src/providers/loading.ts. The list of spinner types can be viewed on https://ionicframework.com/docs/v2/api/components/spinner/Spinner/.

private spinner = {
  spinner: 'circles'
};

Colors

You can easily set your own colors to customize the look and feel of your app using scss. Simply edit src/theme/variables.scss and set your own colors. The briefly describes the customizable elements on variables.scss:

$primary: main color theme of the app.
$primary-active: main color theme when activated.
$secondary: secondary color theme of the app.
$secondary-active: secondary color theme when activated.
$facebook: facebook color for buttons and icons.
$facebook-active: activated color for facebook buttons and icons.
$google: google color for buttons and icons.
$google-active: activated color for google buttons and icons.
$dark: button color for signup with email.
$dark-active: activated color for signup with email.
$gray: gray color.
$toolbar-background: color of the header bar.

Messages

You can easily customize the prompts, success, and alert messages of the app on src/providers/alert.ts. A sample successMessage and errorMessage is as follows:

const successMessages = {
  passwordResetSent: { title: 'Password Reset Sent!', subTitle: 'A password reset email has been sent to: ' }
}

const errorMessages = {
  accountExistsWithDifferentCredential: { title: 'Account Exists!', subTitle: 'An account with the same credential already exists.' }
}

Image

You can easily customize the imageOptions of images that is uploaded on Firebase on src/providers/image.ts. The list of imageOptions for camera can be viewed on: https://github.com/apache/cordova-plugin-camera#module_camera.CameraOptionsA sample cameraOption is as follows:

private profilePhotoOptions: CameraOptions = {
  quality: 25,
  targetWidth: 384,
  targetHeight: 384,
  destinationType: Camera.DestinationType.DATA_URL,
  encodingType: Camera.EncodingType.JPEG,
  correctOrientation: true
};

 

 

Setup

This will assume that you have followed the instructions on Quick Start, and Configurations section of this document. Regardless, if you skipped that section, it is important that you set your Firebase database rules to the following:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null",
    "accounts": {
      ".read": true,
      ".indexOn": ["username"]
    },
    "requests": {
      ".read": true,
      ".write": "auth != null"
    }
  }
}

This will prevent majority of the problems related to Firebase on your project.

Features

This section will cover the various features of Ionchat. This section is subdivided into the following:

 

Ionchat Profile

A User's Ionchat profile contains the basic information such as name, userId, email, username, and description. Both name and username are important because this is what other users can use to search for users. Most of these fields can be updated on the user's profile page after logging in.

The username is used to search for user or friend. This can be changed on the profile page of the user. The user can change their username, when no user are currently assigned with that username. When the user is newly registered and verified to Ionchat, a username will be generated based on the user's name and id.

The user can add a new product to the shop by entering the product name, main product photo, description, price, website, and other images. After adding a product, it will now show up in their my products list. From this list, the user have a choice of deleting a product and updating a product. Tapping on the product to be updated will show up the update product page and will automatically be filled up with the data of the product. 

For the most part of Ionchat, where a user list is shown, a user can view other user's profile by tapping on the user they want to view from list. Additionally when on a 1:1 Chat or Group Chat, they can tap on the image bubble of the user to view their profile. From the view user profile page, the current user can view the user's profile image and do a couple of actions depending on the user's status to the current user. If this user can be added as friend, a send friend request button will show up. If the user has already been sent a friend request, a cancel friend request button will show up. If the user has sent a friend request, a reject or accept friend button will show up. Finally, if the user is already a friend, a send message button will show up.

If you want to know more about the other fields on the user profile such as name, email, and other features, kindly refer to the Features - Account Management section of this document.

 

Friends

Before I user can participate in a 1:1 Conversation or Group Chat, they must first be friends with that user. This section will discuss how friends system is implemented in Ionchat. 

The user can view their friends under Friends tab. From this list, the user can filter this list by their name or username. From this list the user can view their friend's profile or initiate a chat with them by tapping on the message icon to the right.

Under Friends tab, the user can select the magnifying glass icon on the upper right. This will redirect the user to the Search People page. From this page, the user can search for a user's name or username, afterwhich the user can then view the user profile or send a friend request by tapping on the plus icon to the right. The icon to the right of the list will depend on the status of this user in relation to the logged in user. If this user can be added as friend, a plus icon will show to send a friend request. If the user has already been sent a friend request, a close icon will show up to cancel the pending friend request sent. If the user has sent a friend request, a check icon will show up to accept/reject the friend request received.  

When a user has already been sent a friend request by the current logged in user, a close icon will show up to the right. Should the current user want to cancel their request sent to this user, they can easily do so by tapping on the close icon to the right.

Under Friends tab, the user can select the list icon on the upper left. This will redirect the user to their Requests page. If there's a pending friend requests received by the user, a badge notification (showing the number of friend requests received) will show up near the icon. From this page, the user can view their pending friend request sent and received. The icon to the right of the list will depend on the status of this user in relation to the logged in user. If this user can be added as friend, a plus icon will show to send a friend request. If the user has already been sent a friend request, a close icon will show up to cancel the pending friend request sent. If the user has sent a friend request, a check icon will show up to accept/reject the friend request received.  

When a user has sent us a friend request, a check icon will show up to the right of the list. The current user can then accept or reject this friend request. When the current user accepted the friend request, they will now be friends with the other user. When the current user rejected the friend request, the request will be deleted from the database.

When viewing the list of users, the current user can tap on the list to view the user profile. If the current user wants to do actions such as send friend request, they should tap on the icon to the right. From the view user profile page, the current user can view the user's profile image and do a couple of actions depending on the user's status to the current user. If this user can be added as friend, a send friend request button will show up. If the user has already been sent a friend request, a cancel friend request button will show up. If the user has sent a friend request, a reject or accept friend button will show up. Finally, if the user is already a friend, a send message button will show up.

 

1:1 Chat

The user can only chat with their friends, if the current user are not yet friends with a user, they can send a friend request to a user and wait for the user to accept their friend request. 

The user can view their active conversations with their friends on the Messages Page. The last message will show up on the list of messages on this page. If the user has any unread messages, the list will show the conversation in bold, including a list and badge notifications (number of unread messages). Selecting the conversation will open the conversation with this user. The time elapsed since this conversation is refreshed after every minute. The user can filter their conversations by entering their friend's name or username. Lastly, conversations are arranged by their last active date so latest conversations will always show up first on the list.

The user can initiate a new 1:1 Chat by selecting the compose icon on the upper right. Afterwhich, the user then selects a friend whom they want to have a conversation with. After selecting a friend, the user can then send a text or photo message. Currently, there's no way to delete nor archive a 1:1 Chat with a user. The timestamps on the conversation are refreshed after every minute.

During a conversation with a friend, a user can enter a text message on the message box on the footer. The user can then select the send icon to the right or tap on 'return' on the keypad, to send the text message. 

During a conversation with a friend, a user can send a photo message by selecting the camera icon on the left of the footer. The user is then asked if they want to take a photo or choose from photo gallery. After selecting a photo, the photo is uploaded to Firebase and is afterwards sent.

The user can view their friend's profile while on a conversation by tapping on their friend's avatar on the conversation page.

 

Group Chat

The user can only start a group chat with their friends, if the current user are not yet friends with a user, they can send a friend request to a user and wait for the user to accept their friend request. 

The user can create a group by selecting the plus icon on the upper right on Groups page. The user should then set a group photo, name, description, and add atleast one friend to the group. After a group was created, the user is redirected to the group chat automatically and a system message will show that the group is created. 

The user can view their groups with their friends on the Groups page. The last active date of the group will show up on the list of groups on this page. If the user has any unread group messages, the list will show the group in bold, including a list and badge notifications (number of unread messages). Selecting the group will open the group chat. The time elapsed since this group is active, is refreshed after every minute. The user can filter their groups by entering the group name.

During a group chat, a user can enter a text message on the message box on the footer. The user can then select the send icon to the right or tap on 'return' on the keypad, to send the text message to the group. 

During a group chat, a user can send a photo message by selecting the camera icon on the left of the footer. The user is then asked if they want to take a photo or choose from photo gallery. After selecting a photo, the photo is uploaded to Firebase and is afterwards sent to the group.

The user can view their friend's profile by tapping on their friend's avatar on the conversation page.

System messages will show up on the group chat when: group was created, name was changed, description was changed, photo changed, and a member was added to the group. 

Members of the group can view the group info by selecting the info icon on the upper right. This will redirect the user to the group info page where they can do a couple of actions such as change name, photo, description, and even add their friends to the group.

Structure

This section presents the structure of the Firebase database.

Accounts

For each accounts on Ionchat, we have the following data structure.

accounts: {
   userId: {
      dateCreated: date when the user signed up.
      email: email of the user.
      img: profile photo of the user.
      name: display name of the user.
      username: username of the user.
      description: description of the user.
      provider: provider of the user used in login.
      conversations: list of conversations.
      friends: list of friends.
      groups: list of groups.
      userId: userId of the user.
   },
   userId: ... 
}

For each conversations on an account, we have the following data structure.

conversations: {
   userId: { 
      conversationId: conversationId of the conversation with this friend.
      messagesRead: number of messagesRead on this conversation.
   }
}

userId refers to the id of the user whom the user is having a conversation with.

For each friends on an account, we have the following data structure.

friends: {
   0: userId,
   1: ...
}

For each groups on an account, we have the following data structure.

groups: {
   groupId: {
      messagesRead: number of messagesRead on this group.
   }
}

groupId refers to the id of the group.

 

Conversations

For each conversation on Ionchat, we have the following data structure.

conversations: {
   conversationId: { 
      dateCreated: date when the conversation was created.
      messages: list of messages.
      users: list of users.
   },
   conversationId: ...
}

For each messages on a conversation, we have the following data structure.

messages: {
   0: {
      date: date when this message was sent.
      message: message (for text messages)
      type: type of message. (text or image)
      sender: userId of the sender.
      url: link of photo (for photo messages)
   },
   1: ...
}

For each users on a conversation, we have the following data structure.

users: {
   0: userId,
   1: ...
}

 

Groups

For each groups on Ionchat, we have the following data structure.

groups: {
   groupId: { 
      dateCreated: date when the conversation was created.
      description: description of the group.
      img: url of the photo of the group.
      messages: list of messages.
      members: list of members.
      name: name of the group.
   },
   groupId: ...
}

For each messages on a group, we have the following data structure.

messages: {
   0: {
      date: date when this message was sent.
      message: message (for text/system messages)
      icon: icon name based on Ionicons 2 (for system messages)
      type: type of message. (text, system, or image)
      sender: userId of the sender.
      url: link of photo (for photo messages)
   },
   1: ...
}

For each members on a group, we have the following data structure.

members: {
   0: userId,
   1: ...
}

 

Requests

For user's requests on Ionchat, we have the following data structure.

requests: {
   userId: { 
      friendRequests: list of userIds of pending friend requests received by this user.
      requestsSent: list of userIds who received this user's friend request.
   },
   userId: ...
}

Basically most of the data fetched on the database are done by the providers/data.ts DataProvider class. This structure is also followed when adding, updating and deleting data on the database.

 

Observables

Most of the database fetches done on the app are using observables. The following is an example of an observable

this.dataProvider.getCurrentUser().subscribe((user) => {
   this.user = user; 
});

getCurrentUser() {
   return this.angularfire.database.object('/accounts/' + firebase.auth().currentUser.uid);
}

From this example, everytime the currentUser is updated on the database, it will always sync the user object to our user variable on the controller (this.user = user). What this means is that when subscription was made to an observable, the code block inside will always be called whenever changes happened on the database on real time.

FAQ

Why is my Social Login is not working on ionic serve?

Make sure you have installed all the dependencies and plugins as stated on the Quick Start section of this document. And secondly, make sure that you are not using ionic serve when deploying your app. This is because InAppBrowser doesn't work on ionic serve. You have to deploy your app on simulator or actual devices (ionic emulate ios/ionic build android).

I am encountering errors related to dependencies, typescripts, and plugins

You can try uninstalling and reinstalling your Node.js, npm, Ionic and Cordova.

I am encountering errors related to cameraOptions

Make sure to run npm install ionic-native --save afterwards calling in ionic plugin add cordova-plugin-camera.

Why are the messages are acting weird and is not showing the most bottom message?

As of date, when you're on Ionic 2.3.0, scrollToBottom() is a known issue. What you can do is open package.json and change your "ionic-angular": "2.3.0" to "ionic-angular": "2.2.0" then open the terminal and head over to your project app directory and call npm install. You should be back to Ionic 2.2.0, and everything should work as intended.

How do I add login functionalities from this kit to my existing app?

Please refer to customizations section where I explained how to add login functionalities to an existing application.

I am receiving a duplicate identifier error for Firebase.

Head over to node_modules/firebase/ and check if both app.d.ts and firebase.d.ts exist. If both files exists then just delete firebase.d.ts and the error should be gone.

Why am I encountering Network and Runtime Errors?

Are you running your app with live reload on? Make sure you added <allow-navigation href="*"/> to your config.xml. This will solve most of the Network and Runtime errors. 

I have some suggestions and feedbacks!

Great! I love suggestions and feedbacks, kindly send them to me at ionchatapp@gmail.com. Thank you!

I love you and your kits! How do I help and support you?

Thank you for sharing the love, of course aside from purchasing my kits, you can support me by giving my kits an honest rating or write it on the comments on CodeCanyon. 

Do you accept customization requests?

Yes! From time to time, I accept app customizations from clients like you. However, this will depend on how busy my schedule was. 

Do you accept freelance app requests?

Yes! From time to time, I accept app customizations from clients like you. However, this will depend on how busy my schedule was.