edit

Step-by-step guide on setting up Apple push notifications for your GraphQL backend

GraphQL and Android Push Notifications

Calling all Android mobile developers! Today, we’re going to walk you through how to set up Android push notifications for your GraphQL server.

It’s about time for mobile to get some GraphQL love. ❤️

We’re going to cut right to the chase with the 3 steps to get you set up right away with Android push notifications.

Prerequisite: You must have an actual Android device configured for development.

1. Create a Google API project to enable GCM.

We’re going to start off by creating an Android app. To make it easier for you, we’ve provided a starter kit that goes along with this guide.

Download the starter kit here.

Once we’ve created the app, we’ll want to connect it to a Google project. Please go to your Google Developer Console and create a new project.

Create_Project

Once you’ve created your Google project, you’ll have to also create a new Firebase project at the Firebase console.

Firebase_Console

Why do we have to go to Firebase? Google now only provides GCM push notification support through the Firebase console. 😤

Create_Firebase_App

Follow the steps to finish creating your app, then Add Firebase to your Android app.

Add_Firebase

We’ll need your Package Name (or Application ID). Find your package name here in your app:

Package_Name

The nickname is your choice. Your first step should look like this.

Enter_App_Details

After adding the app, you’ll download a Google Service JSON file that you’ll need to import into your project. Place it in your app directory.

Add_Google_Services_JSON

Great! Now you’ll need to update the following dependencies in your Android app.

  • App-level bundle.gradle:

    Add_Dependencies_To_Gradle_1

  • Project-level bundle.gradle:

    Add_Dependencies_To_Gradle_2

And finally, you’ll need to update your strings.xml constants file to reflect the App ID of the newly created Google project.

Add_Project_Number

Nice work ✅ Your Android app and Google project are now connected!

2. Integrate your GraphQL server with GCM.

Now, it’s time to connect your GraphQL server with GCM so that you can actually send push notifications.

Let’s first grab your Server API Key that was auto-generated by Google after successful completion of the previous process of connecting your Android app with your Google project. You’ll need to find it in your Google Developer Console.

Open up the left side panel by clicking the top-left hamburger menu, and navigate to the API Manager.

API_Console

Now click the Credentials tab on the left-hand menu to grab your Server API Key. Save this. You’ll need it in the next step to connect to your GraphQL server.

Server_API_Key

To make it easy, Scaphold.io provides an easy way to set up your very own GraphQL server for free in minutes. Sign up for an account and create an app. At this point, you instantly have a GraphQL server deployed in production, ready to make requests.

Now, go to Scaphold’s Integrations Portal to enable Android push notifications for development. Click Add to begin.

Create_Integration_1

A form will then pop up, asking for your Server API Key. Fill out the appropriate fields and hit Create.

Create_Integration_2

Good job! You’ve now connected your GraphQL server to be able to send push notifications to devices with your app installed.

3. Obtain a device token to send push notifications.

In order to send a push notification to a device, we need to generate a device token that is a unique identifier for a device and an app together. In that case, we’ll need to install your app onto an actual Android device.

But first, we need to create an event handler to receive the device token once a user permits the app to send push notifications to their phone. In your app, you’ll need to put the following snippet in your ExternalReceiver file (i.e. class that extends BroadcastReceiver):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
public class ExternalReceiver extends BroadcastReceiver {
  private void register() {
    new AsyncTask(){
      protected Object doInBackground(final Object... params) {
        String token;
        try {
          token = gcm.register(getString(R.string.project_number));
          Log.i("registrationId", token);
        }
        catch (IOException e) {
          Log.i("Registration Error", e.getMessage());
        }
        return true;
      }
    }.execute(null, null, null);
  }
}

We’re going to be using the boilerplate code from earlier to illustrate.

Now install your app on your Android device by pressing the big ▶️ button in the top bar of Android Studio.

Note: An actual device is needed since the simulator is transient and cannot have a device token associated to it.

Upon success, your device token will be issued by GCM and printed out in your Android Studio console.

Device_Token

Save this device token and send it to Scaphold to register it on your behalf with GCM. This take the form of sending a GraphQL mutation from your app, but for demonstration purposes, we’ll use GraphiQL to do so.

Create_Device_Token


Congratulations! You’ve successfully configured your app and device to be able to send and receive iOS push notifications. And the best part is that it was all done with GraphQL.

Now that your GraphQL server is set up for iOS push notifications, the next part of this guide will walk you through how to...

  • Send push notifications
  • Associate users to device tokens
  • Manage push channels (i.e. groups)

Thanks for following along! We'll walk you through sending your first push notification with GraphQL in the next part of this tutorial.

Looking for how to set up iOS push notifications with APNS? Follow along here!

Enjoy how easy that was to set up a GraphQL server? Join Scaphold today! And be sure to follow us on Twitter or join our Slack for more awesome ways to learn about how to quickly launch your next app with GraphQL!