Building a #Firebase Cloud Messaging App — Part Two

In part one of this series I showed how to build a (very) simple app server to be used with Firebase Cloud Messaging. This server gathered instance tokens for devices that used the app, and from there it was able to send messages to one or all of the devices that use the app.

In this article, I’m going to go to the other side of the equation — and that is to show how to build the app itself!

Create an Android App and add it to your Firebase console

First off, create a simple Android App. I’m using Android Studio, and I simply created a new app with the ‘Empty Activity’ template. This gives me the foundation I need to build my own app on. Importantly, you need to remember the package name that you created the app with. In my case I built an app called com.google.devrel.lmoroney.myapplication.

Now, in Android Studio, go to the Tools menu and select ‘Firebase’. You’ll see the assistant pane on the right with a list of Firebase technologies. Select ‘Cloud Messaging’, and you’ll see a link to ‘Set up Firebase Cloud Messaging’

Click the link and you’ll be taken to another pane with three steps.

The first of these is to ‘Connect to Firebase’, and selecting it will give you a dialog asking if you want to Create a New Firebase project or choose an existing one. Create a new one. Here you can see where I created a new one called ‘LaurenceBlogFCMDemo’

Click ‘Connect to Firebase’ and you’ll be off to the races. Note the status in the upper right hand corner of Android Studio:

 

Once it’s done, you should see the ‘project created’ message. Now you can go to step 2, which is to add FCM to your app.

Click the button in the assistant:

…and you’ll see the ‘Add Cloud Messaging’ dialog which tells you what it’s going to do — namely updating your build.gradle files with what FCM needs.

Click ‘Accept Changes’ in this dialog, and Android Studio will do the rest. It may take a few moments for the Gradle Sync to finish.

If you hit a bug, where the gradle sync fails because of a missing API key / ccurrent key — learn how to fix it here.

You’re now ready to start coding your app! 🙂

Building your app.

Editing the Main Activity

For the first step, add a button to your activity_main layout file. Label it ‘Register’, and give it a name…I called mine btnRegister. When I was done my layout looked like this:

Now, in MainActivity.java, in your onCreate function, you can add an onclick listener for this button. This can call the Firebase instance id service to get your token, which is then used to register with your app server. In this case I load the token into a Hashmap with the key ‘regid’. I then use a service called ‘CallFCM’ to do the communication with my app server. You’ll see that in the next step.

Here’s the code for MainActivity.java

 

Let’s now take a look at what it takes to asynchronously call the app server in CallFCM()

Calling your App Server with the instance token

Posting the instance token to your app server is an asynchonous operation that shouldn’t take place on the UI thread. So, in order to to this Android provides an AsyncTask class. In Android Studio, add a new class to your app (right click on the app folder containing Main Activity, and select Add->New Class), and make sure that the new class extends AsyncTask like this:

You’ll get a basic, empty, class. Update its code to look like this:

This will call the registration script on your app server (see the URL, and see part one for details on how I did it), posting the instance token to it. It does it in the background as an Android Async task. Your app server now knows how to address this device.

In the third and final part of this series, I’ll show you how to add the code to your app so that, when FCM sends you messages, you can receive them and respond to them. You’ll even see how to turn them into an Android notification, so you can render them on your Android Wear device too, as happened hilariously to me at the Android Developers Summit in Berlin.

Check out the results in this video!