/WhatsappCloneAndroid

A basic clone of whatsapp Messenger backed by CloudBoost Database service

Primary LanguageJava

#WhatsappCloneMaster #####In this section In this tutorial, we are going to take it a notch higher and build a clone for WhatsApp messenger, a widely used IM application.

 

Whatsapp android Clone

 

>Info here you will learn how to use CloudBoost notification queries i.e how to apply a query on real time notifications so that you are only notified of specific events that meet the query criteria. #Assumptions I will assume that :
  • You have checked out our first java tutorial in this series and know you to set up your environment to develop CloudBoost apps, including the libraries to add to the classpath i.e.
    • Javasdk for cloudboost Javasdk-1.0.1.jar
    • Socket-client.jar
    • Okhttp-2.4.0.jar
    • Okhttp-ws-2.4.0.jar
    • Okio-1.4.0.jar
  • You know android (We shall not focus so much on learning the the android specific concepts bit of the code).
  • You already have an app on cloudboost, and have created a table called whatsapp_message, with the following columns
    • message, type text
    • from_user, type text
    • to_user, type text
#The Android project Create a new android project in your IDE(I use Eclipse 3.7 with ADT) and name it WhatsappAndroidClone, place all the required jar's in the libs folder.

We are going to use the UI patterns used in Whatsapp android application. When we take a look at the Whatsapp android application, 3 fragments are used with a viewpager to navigate between whatsapp major views of calls, chats and contacts. This was the most powerful navigation paradigm before the launch of the Navigation Drawer pattern.

#How it works ##Getting chat name## We first launch a dialog box to allow the user to choose a screen name to chat with, this just eases our work since we are not creating a persistent account for the user.

 

Whatsapp android chats

 

##Receiving messages## With this name set as the App.CURRENT_USER in our android application class, we can create a notification query on our whatsapp_message table. The notificiation query tells ##CloudBoost## that any record saved in whatsapp_message that is addressed to App.CURRENT_USER in the to_user column warrants a notification to App.CURRENT_USER. ##Processing received messages## We there fore have a listener for created events on that table. When this notification arrives, we simply create a record out of it and add it to the adapter attached to our Chats ListView. ##Message State## When a user clicks the name of a person to chat with from the first screen above, we launch the ChatBubbleActivity. This activity hosts our chats with a given user. It has a material design ToolBar for navigation just like it is on whatsapp.

 

Whatsapp android chats

 

When user navigates back to MainActivity using the up arrow, we have the adapter of the current listview saved in App under the current chat name. This way, when user returns to continue chat with this person, we recreate the view but just pick the existing adapter to continue from where we stopped.