2016-02-09

The 1st Part covers the server side implementation of the app i.e building the REST API and the server app. In this part we’ll integrate the GCM in your new / existing android app. In the 3rd part the final chat app modules will be integrated.

This article also provides you a test interface where you can test any of your gcm apps by sending a sample push notification message.



DOWNLOAD CODE

LIVE DEMO

VIDEO DEMO

I am also posting the project structure of the Android Project to get a clear picture file structure needed to build the final app.



Integrating GCM In Your Project

Once you got the idea of the project structure, let’s start add the gcm into your app.

1. Create a new project in Android Studio and fill all the details required. When it prompts to select a default activity, select Blank Activity and proceed.

2. The next step is downloading the google-services.json file. This configuration file contains google services information specific to your app. You can configure google services like cloud messaging, google analytics, admob, sign in with google in the same configuration file. But in this article, we’ll choose only the gcm.

Goto this doc and click on Get a configuration file which prompts you to fill quick app related information.

3. On the developer console, choose the project that you previously created in Part 1, give the current project’s package name. Enable Google Cloud Messaging and click on Download google-services.json.



4. Add the downloaded google-services.json to your project’s app folder. Make sure that you are placing this json file correctly under app folder. Otherwise you won’t be successful in implementing the gcm.

5. Open build.gradle located under app level and do the below changes.

add apply plugin: ‘com.google.gms.google-services’ at the top.

add com.google.android.gms:play-services:8.3.0 dependency

6. One more important change is, open build.gradle located in root directory of the project and add

classpath ‘com.google.gms:google-services:1.5.0-beta2’

classpath ‘com.android.tools.build:gradle:2.0.0-alpha6’ in dependency and clean the project from Build => Clean Project.

7. Now under your project’s main package, create four packages named activity, app, gcm and helper. Move your main activity class into activity package.

8. Under app package, create a class named Config.java. This class contains app configuration information related to gcm.

9. Under helper package, create a class named MyPreferenceManager.java This class stores data in SharedPreferences. Here we temporarily stores the unread push notifications in order to append them to new messages.

10. Create a class named MyApplication.java under app package. This is a singleton class needs to be added to AndroidManifest.xml file.

11. Create a folder named raw under res. Download notification.mp3 and paste it in res => raw folder. This is a custom notification sound which will be played whenever a new push notification is received.

12. Create a class named NotificationUtils.java under gcm package. This class is used to show the notification in notification tray. This also contains major functions like checking app’s running state (background / foreground), downloading notification image attachment from url, playing notification sound and clearing notification messages.

13. Create a class named GcmIntentService.java under gcm package. This service extends IntentService which acts as a background service. This service basically used for three purposes.

> To connect with gcm server and fetch the registration token. Uses registerGCM() method.

> Subscribe to a topic. Uses subscribeToTopic(“topic”) method.

> Unsubscribe from a topic. Uses unsubscribeFromTopic(“topic”) method.

14. Create a class named MyInstanceIDListenerService.java under gcm package. This service invokes onTokenRefresh() method whenever there is a change in gcm registration token.

15. Create a class MyGcmPushReceiver.java under gcm package. This is a receiver class in which onMessageReceived() method will be triggered whenever device receives new push notification.

16. Open AndroidManifest.xml and do the below necessary changes.

> Add MyApplication to <application> tag using name attribute

> Add INTERNET, WAKE_LOCK, GET_TASKS and C2D_MESSAGE permissions.

> Add MyGcmPushReceiver & GcmIntentService as services and GcmReceiver as receiver.

> Replace info.androidhive.gcm with your current project’s package name.

17. Finally open MainActivity.java and make the following changes.

> In order to receive the push notifications, device has to support google play services. So checkPlayServices() method is used to check the availability of google play services. If the play services are not available, we’ll simply close the app.

> Register a broadcast receiver in onResume() method for both REGISTRATION_COMPLETE and PUSH_NOTIFICATION intent filters.

> Unregister the broadcast receiver in onResume() method.

> Create an instance of broadcast receiver in onCreate() method in which onReceive() method will be triggered whenever gcm registration process is completed and a new push message is received.

Now run & deploy the app on a device. Make sure that your device is having internet connection and you followed the above steps correctly. After the app is launched, you should able see the gcm registration token as a Toast message. You can also find the registration token in LogCat.

Testing Push Notifications

In order to test the push notifications, I have created a simple interface where you can type a sample message and send it to devices. Note that the sensitive information (API key & registration token) you are providing is not stored on the server in any manner. Also the demo test panel works when you are following the steps explained in this article only.

1. Goto to the push notifications test panel.

2. Enter your GCM API Key that you have obtained from google developer console.

3. Enter the gcm registration token which is logged in your Android Studio LogCat.

4. Type a message and click on Send Push Notification button. There is also an option provided to test push notification with image attachment.

If you are able to get the push notifications using the test interface, congratulations! You are only a few steps away from building a fully working realtime chat time. So let’s start building the remaining modules in 3rd Part.

Show more