Integration of Chat Library and Firebase in iOS Project

Group chat is a very easy and good approach for having the communication in any mobile application. Today we are going to dive into an implementation of “Group Chat Using Firebase”.

While implementing this functionality in mobile application the very important and challenging task is creating an UserInterface for chatting screen, so for designing this screen we will go with the “JSQMessageViewController” it is an open source library for chatting.

Let’s see the procedure for implementing  “JSQMessageViewController”  to design chat screen. For more info you can take help from this link https://github.com/jessesquires/JSQMessagesViewController 

First of all create a new swift project, Now open terminal window and enter the command : cd (your project path).

After this command we will enter into our project folder, for using JSQMessageViewController we need to install pods into our project.

 

Procedure to install PODS : 

1. Run “pod init” command on terminal. (It will create a Podfile into our project folder)
2. open that created Podfile and enter pods for JSQMessageViewController (ie.pod ‘JSQMessagesViewController‘)
3. Now Save the file and close it.
4. Again go to terminal window and run “pod install” command. (It will install all the dependencies of JSQMessagesViewController to our project and also create a new project file with .xcworkspace extension).
5. Now open projectName.xcworkspace file in xcode.

We are done with all prerequisites for chat screen design,  JSQMessagesViewController have used collectionView for showing message bubble, so to display the message bubble into our project we need to implement all DataSource & Delegates for CollectionView created by JSQMessagesViewController.

 

It is very important to display all chat messages taken place in chat group so that need to be pushed/dump somewhere and retrieve  from somewhere. So for achieving this we are going to use “FIREBASE“.

Firebase is a mobile and web application development platform. It also provides a realtime database, so to achieve the above mentioned scenario we will use the firebase as a database.To create an environment for using firebase into our app we need to follow some steps to setup some prerequisites, please take a reference from this link https://firebase.google.com/ for more info.

Steps to integrate firebase into our project :

1. Go to this link https://firebase.google.com/  
2. Login with your gmail credentials.
3. click on “Go To Console” on top right corner.
4. Now need to create a new app space, on firebase for our app. To create app space on firebase click on “Add Project”
5. Fill up all the required information on the given popup and click on “CreateProject”.
6. Now go to “Authentication” tab on left hand side, click on sign-in methods and enable “Email/Password” by clicking that field.
7. Go to “Project Setting” -> “General” -> “Add firebase to your app” and fill all the information and complete the procedure. At the end it will create a .plist file that you need to add into our project.
8. After importing .plist file to our project it’s time to install PODS for firebase.

• Open existing Podfile from project.
• Add pod ‘Firebase/Core’ to Podfile, save and close the file.
• Follow all the steps whichever we done for installing JSQMessagesViewController pods.

 

Now you are perfectly ready with environment to implement chatting app in iOS using firebase as a realtime database.