Jonathan Lloyd

Pusher’s **Beams SDKs and API** make it easy to send push notifications to all of your iOS and Android users with one request.

The service manages manages your app credentials and the lifecycle of device tokens which are required for every request to Google’s Firebase Cloud Messaging (FCM) service and APNs for your iOS devices. 

You can subscribe your app user’s registered device to [Interests](https://pusher.com/docs/beams/concepts/device-interests), which act like persistent Pub/Sub topics, so that you can update many devices with the same request. Create as many interests as you need, and send unlimited push notifications. 

**Today we will walk you through the steps to start sending push notifications to your Android app users with Pusher’s Beams SDKs and API.**

## Step 1 - Sign up for a Pusher account

Before we can start building you will have to sign up for a Pusher [account](https://dash.pusher.com/authenticate/register?ref=pn-tutorial-android) (or log in with your existing Pusher credentials).

## Step 2 - Set up your free Beams instance

Head on over to the [dashboard](https://dash.pusher.com/?createInstance=push-notifications&name=Push%20Notifications) and create your first Beams instance. With a free plan, you can send unlimited push notifications to up to 2000 devices during a billing month.

This will take you to our Quickstart wizard:

![beams-quickstart](//images.ctfassets.net/1es3ne0caaid/1HOms9QNSJBt5Y5y94yPma/e3eff8bd4170a65a9cd44ca07113763f/Screenshot_2020-05-18_at_16.29.15.png)

The Quickstart will guide you through the following steps:

### Configuring FCM

The first step of the Quickstart involves configuring your credentials with FCM. 

All push notifications requests for Android devices go through Firebase Cloud Messaging (FCM), Google’s service which delivers them to the device. 

Pusher’s SDKs and API are abstracted above FCM as well as Apple’s APNs service so that you can deliver push notifications to both platforms with one request. Pusher manages the Server Key and Device Token for each request.

[This page](https://pusher.com/docs/beams/getting-started/android/configure-fcm) guides you through the process of getting an FCM Server Key.

### Uploading your FCM Server Key
After you have configured FCM the next step is to upload your FCM Server Key through the Quickstart wizard:

![beams-quickstart-fcm-key](//images.ctfassets.net/1es3ne0caaid/294FiNEj7r4NSPuGPiwARW/223624aeb943934e087d4fa93902ea10/Screenshot_2020-05-18_at_16.40.31.png)

## Step 3 - Integrating the Beams SDK into your Android project

Now you will integrate the Beams SDK into your Android project. This will send the Device Token to Pusher’s Beams service, which manages its lifecycle if it changes or if the user uninstalls the app. 

You will start by adding the necessary dependencies to your project build.gradle:

``` kotlin
    buildscript {
        ...
        
        dependencies {
           classpath 'com.google.gms:google-services:4.0.1'
        }
    }
```

And your app build.gradle:

``` kotlin
    dependencies {
        ...
    
        implementation 'com.google.firebase:firebase-core:16.0.1'
        implementation 'com.google.firebase:firebase-messaging:17.1.0'
        implementation 'com.pusher:push-notifications-android:1.4.0'
    }
    
    // Add this line to the end of the file
    apply plugin: 'com.google.gms.google-services'
```

You can now register the Device Token with the Beams service. All you have to do is import the SDK:

```
    import com.pusher.pushnotifications.PushNotifications;
```

Then register the Device Token at the appropriate point in your application lifecycle and subscribe your device to an interest `hello`:

``` kotlin
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        PushNotifications.start(getApplicationContext(), "YOUR_INSTANCE_ID");
        PushNotifications.addDeviceInterest("hello");
    }
```

When your server publishes a push notification to the interest *hello*, it will get passed to your app.

You can find more information on this step [here](https://docs.pusher.com/push-notifications/android/sdk-integration).

## Step 4 - Start sending notifications

Push notifications are triggered by your server to your Beams instance. After a device using your Android application subscribes to an interest on our service, your server can then send a push notification to that device by publishing to that interest.

In this example we’ll use Node.js. First, let’s install the dependency:

``` javascript
    $ npm install @pusher/push-notifications-server --save
```

In our JavaScript file, create a Beams instance with the app credentials shown on [our dashboard](https://dash.pusher.com). Then call `publishToInterests` with an array of interests and a payload. Every device subscribed to the interests specified in the array will receive a push notification.

To send via FCM, the payload key will be `fcm`:

``` javascript
    const PushNotifications = require('@pusher/push-notifications-server');

    let pushNotifications = new PushNotifications({
      instanceId: 'YOUR_INSTANCE_ID_HERE',
      secretKey: 'YOUR_SECRET_KEY_HERE',
    });

    pushNotifications
      .publishToInterests(['hello'], {
        fcm: {
          notification: {
            title: 'Hello World',
            body: 'Hello!',
          },
        },
      })
      .then(publishResponse => {
        console.log('Just published:', publishResponse.publishId);
      })
      .catch(error => {
        console.log('Error:', error);
      });
```

If you run your mobile app and put it into background mode, then run this script – you should see your notification. Neat, huh?

**Didn’t see the push notification?** Notifications are not displayed whilst the app is in the foreground. Try minimizing your app by pressing the home button before the push notification arrives.

You can send push notifications from your server by using one of our server SDKs. We currently support [many languages](https://pusher.com/docs/beams/reference/all-libraries) including PHP, Python, Node.js and Java.

We will walk you through the steps to send push notifications to your Android app users with Pusher’s Beams API.


Discover how to send push notifications for your Android device using FCM and our Push Notifications API to send both iOS and Android users with one request.

Send Push Notifications to your Android app

Beams

Lanre Adelowo

Webhooks make it extremely easy to send push notifications to all of your iOS and Android users with a single request. In this tutorial, learn about webhooks and how you can take advantage of them to send a notification to Slack every time a user reads or opens the sent notification. 

Notify Slack users of push notification status with webhooks

Wern Ancheta

Food ordering apps such as Uber Eats and FoodPanda are a popular way to order from your favorite local restaurant. In this tutorial series, create both the food ordering app and the driving app using React Native. In the third and final part, add push notifications to inform both the customer and the driver of various events throughout the ordering process.

Food ordering apps such as Uber Eats and FoodPanda are a popular way to order from your favorite local restaurant. In this tutorial series, create both the food ordering app and the driving app in React Native. In the third and final part, add push notifications for both the customer and the driver.

Create a food ordering app in React Native - Part 3

Channels

Create a food ordering app in React Native - Part 3: Adding push notifications

Food ordering apps such as Uber Eats and FoodPanda are a popular way to order from your favorite local restaurant. In this tutorial series, create both the food ordering app and the driving app using React Native. In part 2, create the driver app and implement a chat functionality between the customer and the driver.

Food ordering apps such as Uber Eats and FoodPanda are a popular way to order from your favorite local restaurant. In this tutorial series, create the food ordering and driving apps in React Native. In part 2, create the driver app and implement a chat functionality.

Create a food ordering app in React Native - Part 2

Create a food ordering app in React Native - Part 2: Adding the driver app and chat functionality

Food ordering apps such as UberEats and FoodPanda are a popular way to order from your favorite local restaurant. In this tutorial series, create both the food ordering app and the driving app. In part 1, create a simplified food ordering app using React Native.

Food ordering apps such as Uber Eats and FoodPanda are a popular way to order from your favorite local restaurant. In this tutorial series, create both the food ordering app and the driving app. In part 1, create a simplified food ordering app using React Native.

Create a food ordering app in React Native - Part 1

Create a food ordering app in React Native - Part 1: Making an order

In this tutorial, create a web app for monitoring the status of your servers in realtime using Laravel.  The app will offer realtime monitoring of disk, CPU and memory. You can also add custom notifications and have the server send you a text message when the CPU usage goes above a set threshold.

Creating a server health monitoring app with Laravel

Christopher Batin

## Introduction

Pusher Beams allows you to customize push notifications you send to your devices via a server. However it can be expensive to run a server 24 hours a day 7 days a week and we may only need to send notifications every so often. This is where [Microsoft Azure Functions](https://azure.microsoft.com/en-gb/services/functions/) can help. Azure Functions are serverless and work on a pay as you go model (with a generous free tier). This means that you only pay for when you use the function. We’re going to explore how we can setup Pusher Beams on an Android client using an Azure Function running Java to trigger the notifications.


## Prerequisites


- A free Microsoft Azure account. You can create one [here](https://azure.microsoft.com/en-gb/free/).
- A free Pusher account. You can create one [here](https://dash.pusher.com/authenticate).
- Maven installed on your machine. Instructions [here](https://maven.apache.org/install.html).
- A free Google Firebase account. You can create one [here](https://firebase.google.com).
- Postman or another HTTP client installed on your machine. You can download Postman from [here](https://www.getpostman.com).
- Android Studio 3.3.2+
- An understanding of Android development and Android Studio environment.


## Create your Android application

We will need to have a user that has registered for notifications and signed up for an interest we will call “hello”, so we can test out our implementation. We’re going to create a very basic Android app that doesn’t actually show anything to the user except for the notification on the lock screen.

Create a new **Empty Activity** project using Android Studio and name it something like AzurePusher. Provide a **Package name** and remember this as you will need it for completing the Firebase set up. We will be using **Kotlin** as the language choice for this tutorial and supporting Android 16+ (Jelly Bean). 

### Firebase set up

Log in to your Firebase account [here](https://firebase.google.com) and go to your console. If you do not already have a project created you will need to create one and name it anything you like, if you have a project select it. Within the **Project Overview** page select **Add App** and follow the instruction for creating a new Android application. 

Once you have completed the setup for your Android app you will be returned to the dashboard. You will need to go to the project settings (found within the “settings cog” in the top left). Once in the project settings select the **Cloud Messaging** tab. Copy the **Server Key** you will need it for setting up your Pusher Beams instance.

![azure-java-android-notifications-img1](//images.ctfassets.net/1es3ne0caaid/4M0VL46QppgHg8oYf7Cwuw/f661c1fd4768eab49983131482daac06/azure-java-android-notifications-img1.png)

### Creating a Pusher Beams instance
Login or create an account to access your dashboard [here](https://dash.pusher.com). Create a new beams instance using the dashboard.

![zure-java-android-notifications-img2](//images.ctfassets.net/1es3ne0caaid/1BmsX4wk9Z37hMEEyris3O/029e824e0ada5ae5e95bafc8c048ec69/zure-java-android-notifications-img2.png)

Complete step one of the Android setup guide, by providing your FCM server key you copied earlier and **Continue**. We will pick up the remainder later on in this tutorial. Press the **X** to exit the setup guide and you will be returned to your dashboard for that instance. Scroll to the bottom of the page and you will find your Pusher Beams instance ID and secret key, make note of these you will need them later.

### Adding the SDKs
Open your app level `build.gradle` file and add the following into your dependencies:

```
    // app/build.gradle
    ...
    dependencies {
     ...
     implementation 'com.google.firebase:firebase-messaging:17.1.0'
     implementation 'com.pusher:push-notifications-android:1.4.0'
     ...
    }
    ...
```

Here we are adding the Firebase messaging SDK and the Pusher Beams SDK. You should already have the Google Service SDK and `google-services.json` added to your project when setting up the Firebase app.

Synchronize Gradle by pressing the **Sync Now** button.

### Initialize Beams

Open your main activity and add the following import:

```kotlin
    // App/java/{your.package.name}/Main.activity
    import com.pusher.pushnotifications.PushNotifications
```

Add the following to your `onCreate` function:

```kotlin
    // App/java/{your.package.name}/Main.activity
    PushNotifications.start(applicationContext, "YOUR_INSTANCE_ID")
    PushNotifications.addDeviceInterest("hello")
```

Remember to replace `YOUR_INSTANCE_ID` with the instance id from your Pusher Beams console and run your application.

## Create your Azure function

### Creating a Pusher Beams instance
Log in or create an account to access your dashboard [here](https://dash.pusher.com). Create a new Pusher Beams instance using the dashboard.

![zure-java-android-notifications-img3](//images.ctfassets.net/1es3ne0caaid/4v90uIaC4j1eluWEWlPHf2/9392c9a352aed318a003caedef49ba41/zure-java-android-notifications-img3.png)

Complete step one of the Android setup guide, by providing your FCM server key you copied earlier and **Continue**. We will pick up the remainder later on in this tutorial. Press the **X** to exit the setup guide and you will be returned to your dashboard for that instance. Scroll to the bottom of the page and you will find your Beams instance ID and secret key, make note of these you will need them later.

### Creating our function
Log in to your Microsoft Azure portal [here](http://portal.azure.com). Using the search facility (found at the top of the page) search for “Function App”. 


> **Note:** When searching make sure to sure for “Function App” and not “Function Apps”

Once you are on the function app page click **Add** to begin the process of adding a new Azure Function. You will need to give your app a name, this must be unique and you cannot use full stops. Try reverse domain naming like this: `com-example-appname`. I have used `PusherBeams-Java-``Android`. As long as the radio buttons are set to **Create new**, entering a name should also auto complete the resource group and storage. If it hasn’t you should complete these fields as well. 

Select your **Subscription** and **Hosting Plan.** If you’re unsure what these should be leave them as the default values. 
We will also be using **Windows OS** for this tutorial and our location will be set to **Central US**. However feel free to alter the location if the **Java** run time is available there as well. Make sure your **Runtime Stack** is set to **Java** and click **Create**.

![zure-java-android-notifications-img4](//images.ctfassets.net/1es3ne0caaid/78NNiMqRzxJk3P9w9uwacR/4580551e2428aaa4a4f4b5f7194ce55b/zure-java-android-notifications-img4.png)

Once your resource has been created you should receive a notification on the navigation bar. If you don’t see this, wait a couple of minutes and refresh the page. Your resource should appear in a list of Function Apps. Select your resource. 

Now you have created a Function App you need to create a Function. On the overview page select the button **New Function**  or from the side bar click on the **+** the is next to the **Functions** drop down. You will be given a selection of ways to build your function, select the **Visual Code** option and click **Continue**. On the next page select the **Direct Publish** option and click **Continue**. Follow the instructions on the next page for installing and setting up for Visual Code, the Azure command line tools and the Azure Functions extension for Visual Studio Code. Make sure you have signed in to your Azure account in Visual Studio Code before continuing.

![zure-java-android-notifications-img5](//images.ctfassets.net/1es3ne0caaid/pnMQSysIdYIFJnzqaKG3P/b8536579deba23810505de3b02452fa5/zure-java-android-notifications-img5.png)

With Visual Code Studio open open the command palette (**View → Command Palette**). Select **Create New Project**. When prompted provide an empty directory for your project and select the language to be **Java**. Provide a group ID using a reverse domain name naming method. Complete the remaining steps as appropriate (you can just accept the default values).

Azure functions make it easy to invoke your code by hitting an HTTP endpoint. This is great for push notifications, as you can hit this endpoint using our HTTP rest client and passing in our message. You will see more of this later when you test your integration. For now all you need to know is that the default implementation will set this up for you.


> **Note:** There are lots of other templates available for invoking your function and you may wish to explore these as well. You can always invoke your function from the portal if you wish to.

 
Once your project is setup you can deploy it straight from Visual Code, right click on the newly created **src** folder and select **Deploy to Function App**. Select the function app you created earlier for example Pusher-Beams-Java-Android. This will complete the deployment process for you, you can confirm the success by checking the terminal output in Visual Code Studio and by refreshing your Azure Portal. 

![zure-java-android-notifications-img6](//images.ctfassets.net/1es3ne0caaid/6bEGGPpvVja9YVahAenTZS/51b3b6d5c45b9166d3f1ebe0dc448c08/zure-java-android-notifications-img6.png)

### Writing our function

The first thing we need to do in our function is install our dependencies. Open your `pom.xml` file and add the following to your dependencies (make sure it’s `<dependencies>`  and not `<dependencyManagement>`):

```xml
    // pom.xml
    <dependencies>
      // ....
      <dependency>
        <groupId>com.pusher</groupId>
        <artifactId>push-notifications-server-java</artifactId>
        <version>1.1.0</version>
      </dependency>
      // ...
    </dependencies>
```

If prompted you should synchronize your project. Now open your `Function.java` and replace the contents of the file with the following:

```java
    // src/main/java/{your/reverse/domain}/Function.java
    package YOUR_PACKAGE_NAME;
    
    import java.io.IOException;
    import java.net.URISyntaxException;
    import java.util.*;
    import com.microsoft.azure.functions.annotation.*;
    import com.pusher.pushnotifications.PushNotifications;
    import com.microsoft.azure.functions.*;
    public class Function {
        @FunctionName("HttpTrigger-Java")
        public HttpResponseMessage run(@HttpTrigger(name = "req", methods = { HttpMethod.GET,
                HttpMethod.POST }, authLevel = AuthorizationLevel.FUNCTION) HttpRequestMessage<Optional<Notification>> request,
                final ExecutionContext context) {
            String instanceId = "YOUR_INSTANCE_ID";
            String secretKey = "YOUR_SECRET_KEY";
            final Notification body = request.getBody().get();
            if (body == null) {
                return request.createResponseBuilder(HttpStatus.BAD_REQUEST)
                .body("Please pass a string or in the request body").build();
            }
            PushNotifications beamsClient = new PushNotifications(instanceId, secretKey);
            List<String> interests = Arrays.asList("hello");
            Map<String, Map> publishRequest = new HashMap();
            Map<String, String> alertMessage = new HashMap();
            alertMessage.put("title", body.getTitle());
            alertMessage.put("body", body.getMessage());
            Map<String, Map> alert = new HashMap();
            alert.put("alert", alertMessage);
            Map<String, Map> aps = new HashMap();
            aps.put("aps", alert);
            publishRequest.put("apns", aps);
            try {
                beamsClient.publishToInterests(interests, publishRequest);
                return request.createResponseBuilder(HttpStatus.OK).body("Push Sent").build();
            } catch (IOException e) {
                e.printStackTrace();
                return request.createResponseBuilder(HttpStatus.INTERNAL_SERVER_ERROR).body("Push Failed").build();
            } catch (InterruptedException e) {
                e.printStackTrace();
                return request.createResponseBuilder(HttpStatus.INTERNAL_SERVER_ERROR).body("Push Failed").build();
            } catch (URISyntaxException e) {
                e.printStackTrace();
                return request.createResponseBuilder(HttpStatus.INTERNAL_SERVER_ERROR).body("Push Failed").build();
            }
        }
    }
```

This code will be used by our Azure function later on to publish notifications to devices that our registered for the `hello` interest. We retrieve the title and message from the request body before creating an object that the Pusher Beams library can use to publish our push notification. Remember to replace `YOUR_INSTANCE_ID` and `YOUR_SECRET_KEY` with the credentials from your Pusher Beams console. The above code has used an object `Notification`, this object is used to decode the request body. 

Create a new file called `Notification.java` and add the following to fix the compiler warnings:

```java
    // src/main/java/{your/reverse/domain}/Notification.java
    package YOUR_PACKAGE_NAME;
    public class Notification {
        private String title;
        private String message;  
      
        public Notification(String title, String message) {
          this.title = title;
          this.message = message;
        }
      
        public String getTitle() {
          return title;
        }
      
        public String getMessage() {
          return message;
        }
        
        @Override
        public String toString() {
          return "Notification={title=" + title + ",message=" + message + "}";
        }
    }
```

Next we need to comment out the auto-generated test case that Visual Studio Code has made for us. Go to `FunctionTest.java` and comment out the file. Alternatively you could get the test to pass if you wish.

Now we can deploy the correct code to, make sure you have saved all your files and deploy your code as you did before. Alternatively you can use the command palette and the **Deploy to Function App** command.

Return to your Azure Portal and your function app, select the **HttpTrigger-Java** (it may be named differently for you if you used a custom setup earlier in this tutorial) within the **Functions** dropdown. Click the **Get function URL** button and copy the URL for the **default (Function key)** and keep it somewhere safe. You will need it for testing your integration later on.

![zure-java-android-notifications-img7](//images.ctfassets.net/1es3ne0caaid/5bDvZhKO09JqSRMAklC7zz/239fe398dc5a0147b62659fdddced83f/zure-java-android-notifications-img7.png)

## Testing our implementation

Open your Postman HTTP rest client and create a new POST request. Add the function URL, that you got from your Azure function earlier, to the URL field. This URL contains a secret key for invoking your function, anybody with this key could potentially invoke your function so you should not share it within the public domain. Within the body of the post request add the following:

```
    {
        "title": "hello",
        "message": "Just a friendly hello"
    }
```

![azure-java-android-notifications-img9](//images.ctfassets.net/1es3ne0caaid/5wFDJgoDuqWXD9zPhDfpfV/75daa86f2b739fa6fd3bad06fffdb0f4/azure-java-android-notifications-img9.png)

Once you are done press the **Send** button at the bottom. If everything has worked as expected you should receive a push to your device.

![zure-java-android-notifications-img8](//images.ctfassets.net/1es3ne0caaid/47Szm2bm6TpJg5UEzmxrVd/070584beb4818b18d6ad3c0ff0ffb365/zure-java-android-notifications-img8.jpeg)

## Conclusion

We’ve learned how to create an Azure function using Java that can publish a push notification using Pusher Beams to an Android device. The source code for this tutorial can be found [here](https://github.com/cjbatin/Azure-function-Java-and-Pusher-Beams-for-Android-Notifications).

Azure Functions are serverless and work on a pay as you go model, which is useful if you only need to send push notifications every so often. In this tutorial, explore how to setup Pusher Beams on an Android client using an Azure Function running Java to trigger the notifications.

Azure function running Java for Android notifications

In this tutorial, we are going to look into building a todo iOS app with React Native. The most interesting part of this tutorial is the fact that we will be implementing push notifications via [Pusher Beams.](https://pusher.com/beams) Every time an updated version of the app is released to the App Store, all devices that have the app installed will get a notification informing them of the available upgrade.

## Prerequisites

To follow along in this tutorial you need the following things:

- Xcode installed on your machine. Download [here](https://developer.apple.com/xcode).
- Know your way around the Xcode IDE.
- React Native. Find out how to install it [here](https://facebook.github.io/react-native/docs/getting-started.html). You will need to follow the section **Building Projects with Native Code.**
- Carthage installed on your machine. Install it with `brew install carthage`.
- A Pusher Beams account. Create one [here](http://https:://dash.pusher.com).


> If you happen not to have `brew` installed, you can do so by running `/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`.


## Creating the iOS project

We will be naming our project `todoApp`. To do that we will be needing to make use of the `react-native` CLI tool to create a new iOS project. Open a terminal and run the following command:

```
    $ react-native init todoApp
```

Depending on your internet connection, the above command should take some time. Once it is done, we are ready to add functionality to our iOS app.

The first thing we need to do is to actually build a useful app - the to-do app. Open up the project in your favorite editor, then create a file called `Todo.js`. It will serve as the model for our project. In `Todo.js`, you will have to paste the following code:

``` javascript
    // todoApp/Todo.js
    
    import { AsyncStorage } from 'react-native';
    
    export default class Todos {
      constructor() {
        this.tasks = {
          items: [],
        };
    
        this.all(() => {});
      }
    
      // register a callback event passing the items found in the store
      // as it's arguments
      all = callback => {
        AsyncStorage.getItem('pushertutorial', (err, allTasks) => {
          if (err !== null) {
            return;
          }
    
          if (allTasks === null) {
            return;
          }
    
          this.tasks = JSON.parse(allTasks);
          callback(this.tasks.items);
        });
      };
    
      // saves a new item to the store
      save = item => {
        this.tasks.items.push(item);
        return AsyncStorage.setItem('pushertutorial', JSON.stringify(this.tasks));
      };
      
      // deletes an item based off an index from the store.
      delete = index => {
        this.all(items => {
          const tasks = {
            items: items.filter((task, idx) => {
              return idx !== index;
            }),
          };
          AsyncStorage.setItem('pushertutorial', JSON.stringify(tasks));
        });
      };
    }
```    

The above code uses the default key-value pair storage system bundled with React Native called AsyncStorage to retrieve and save our to-do items. You can read more about AsyncStorage [here](https://facebook.github.io/react-native/docs/asyncstorage).

Moving on, we will have to actually make use of the Todo model we created earlier. To do this, you will need to edit the `App.js` file already created by React Native during the installation earlier. You should edit `App.js` and paste in the following:

``` javascript
    // todoApp/App.js
    
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      FlatList,
      AsyncStorage,
      Button,
      TextInput,
      Keyboard,
      Platform,
    } from 'react-native';
    import Todos from './Todo';
    
    export default class TodoList extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          tasks: [],
          text: '',
        };
    
        this.todos = new Todos();
        this.syncTodos();
      }
    
      syncTodos = () => {
        this.todos.all(items => {
          this.setState({
            tasks: items,
            text: '',
          });
        });
      };
    
      updateTaskText = text => {
        this.setState({ text: text });
      };
    
      addTask = () => {
        let notEmpty = this.state.text.trim().length > 0;
    
        if (notEmpty) {
          let { tasks, text } = this.state;
    
          this.todos.save({ text });
          this.syncTodos();
        }
      };
    
      deleteTask = i => {
        this.todos.delete(i);
        this.setState({
          tasks: this.state.tasks.filter((task, index) => {
            return index !== i;
          }),
        });
      };
    
      render() {
        return (
          <View style={[styles.container, { paddingBottom: 10 }]}>
            <FlatList
              style={{ width: '100%' }}
              data={this.state.tasks}
              keyExtractor={(item, index) => item.text}
              renderItem={({ item, index }) => (
                <View key={index}>
                  <View
                    style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      justifyContent: 'space-between',
                    }}
                  >
                    <Text
                      style={{
                        paddingTop: 2,
                        paddingBottom: 2,
                        fontSize: 18,
                      }}
                    >
                      {item.text}
                    </Text>
                    <Button title="X" onPress={() => this.deleteTask(index)} />
                  </View>
                </View>
              )}
            />
            <TextInput
              style={styles.input}
              onChangeText={this.updateTaskText}
              onSubmitEditing={this.addTask}
              value={this.state.text}
              placeholder="Add a new Task"
              returnKeyType="done"
              returnKeyLabel="done"
            />
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        padding: 10,
        paddingTop: 20,
      },
      input: {
        height: 40,
        paddingRight: 10,
        paddingLeft: 10,
        borderColor: 'gray',
        borderWidth: 1,
        width: '100%',
      },
    });
```    

While the above code is simple and straightforward, I would like to explain `deleteTask`. After deleting an item from the database, we remove the app from the local state too. This is to allow a UI update.

You can now run this app by either:

- `react-native run-ios`
- Clicking the play button in Xcode. ( highly recommended ).

At this stage, you should have the following:

![ios-beams-updates-demo-1](//images.ctfassets.net/1es3ne0caaid/ujmW55mAPm8g62mcgcqcq/b60a90aaa20e6635ff057ad7560e3938/ios-beams-updates-demo-1.gif)

## Push notifications

You have worked hard into this new release of your app, it wouldn’t make any sense to have just 2% of your existing users making use of the newer release - including critical bug fixes and some UI improvements probably. Sending push notifications to users can be a good way to keep your users informed. 

In this section, we will configure and add [Pusher Beams](https://pusher.com/beams) to our application to help us deliver push notifications about updates to users who have the app installed.

We will be making use of two packages to achieve this. 

- The official iOS SDK. [GitHub Repo](https://github.com/pusher/push-notifications-swift).
- The React Native bridge for the official iOS SDK. [GitHub Repo](https://github.com/b8ne/react-native-pusher-push-notifications).

> Using the React Native bridge requires the installation of the official SDK.

We will start by installing the official iOS SDK. We will make use of Carthage for this. Carthage makes use of a `Cartfile` to track dependencies to install, so we will need to create that file.

```
    $ # Assuming you are at the root directory which is todoApp
    $ cd ios
    $ touch Cartfile
``` 

The next thing to do is to specify the exact dependencies you want installed. This is as easy as pasting the following content in the `Cartfile`:

```
    // todoApp/ios/Cartfile
    github "pusher/push-notifications-swift"
```

Once the dependencies have been specified, the next point of action is to actually install them. To do that, you will need to run the below command in a terminal:

```  
    # This assumes you are in the todoApp/ios directory
    $ carthage update
```    

Once `carthage` is done installing, you will need to:

1. In Xcode, visit the **General** settings tab of the application’s target, in the “Linked Frameworks and Libraries” section, drag and drop the `PushNotifications.framework` from the [Carthage/Build](https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#carthagebuild) folder on disk. 

> A directory called Carthage will be created next to the `**Cartfile**`. You will need to locate `**PushNotifications.framework**` in the iOS folder too.

2. On your application targets’ **Build Phases** settings tab, click the *+* icon and choose **New Run Script Phase**. Create a run script in which you specify your shell (ex: `/bin/sh`), add the following contents to the script area below the shell:
    
    /usr/local/bin/carthage copy-frameworks


3. Add the path below to `PushNotifications.framework` under “Input Files". 
    
    $(SRCROOT)/Carthage/Build/iOS/PushNotifications.framework    


4. Add the path below to `PushNotifications.framework` under the “Output Files”. 
    
    $(BUILT_PRODUCTS_DIR)/$(FRAMEWORKS_FOLDER_PATH)/PushNotifications.framework    

The next step is to now install the React Native bridge which will allow us access native code (the official iOS SDK in this case ) from JavaScript. To do that, you need to run the following command

```  
    $ npm install react-native-pusher-push-notifications
``` 

1. In Xcode, in the project navigator, right click **Libraries** ➜ **Add Files to todoApp**.
2. Go to **node_modules** ➜ **react-native-pusher-push-notifications** and add **RNPusherPushNotifications.xcodeproj**
3. In Xcode, in the project navigator, select your project. Add **libRNPusherPushNotifications.a** to your project's **Build Phases** ➜ **Link Binary With Libraries**

Open the `AppDelegate.m` to register the device for push notifications. Append the following contents to the file:

```
    // todoApp/ios/AppDelegate.m
    
    // Add this to the top of the file where other imports are placed.
    #import "RNPusherPushNotifications.h" 
    
    - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
      NSLog(@"Registered for remote with token: %@", deviceToken);
      [[RNPusherPushNotifications alloc] setDeviceToken:deviceToken];
    }
    
    - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
      [[RNPusherPushNotifications alloc] handleNotification:userInfo];
    }
    
    -(void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error {
      NSLog(@"Remote notification support is unavailable due to error: %@", error.localizedDescription);
    }
```    

As a final step, you will need to add the following to your Header search path **under **Build Settings**, `$(SRCROOT)/../node_modules/react-native-pusher-push-notifications/ios`.


> If you receive an error such as “dyld: Library not loaded:”, you should go to **Build Settings** and set **Always Embed Swift Standard Libraries** to yes.

Login or create an account to access your Pusher Beams dashboard [here](https://dash.pusher.com/). Create a new Pusher Beams instance using the dashboard.

Complete only step one of the iOS setup guide and follow the onscreen instructions to upload (and how to find) your APN key and Team ID. Then press the **X** to exit the setup guide and you will be returned to your dashboard for that instance. Scroll to the bottom of this page and you will find your Pusher Beams instance ID and secret key, make note of these you will need them later.

As a final step, you will need to enable push notifications capabilities for the project. You will also need to set the correct team and bundle ID as without those, push notifications capabilities cannot be enabled.

![ios-beams-updates-push-notifications-on](//images.ctfassets.net/1es3ne0caaid/4MP2SyBVwkuee0eeIOmECI/1f63fb349409a873f1fb2461004dd4fd/ios-beams-updates-push-notifications-on.png)

You will need to edit the `index.js` file to ask the user for permissions to send notifications and also subscribe to the updates topic.

``` javascript
    // todoApp/index.js
    
    import { Alert, Linking, AppRegistry, Platform } from 'react-native';
    import App from './App';
    import { name as appName } from './app.json';
    import RNPusherPushNotifications from 'react-native-pusher-push-notifications';
    
    const appUpdateInterest = 'debug-updates';
    
    // Initialize notifications
    export const init = () => {
      // Set your app key and register for push
      RNPusherPushNotifications.setInstanceId(
        'YOUR_PUSHER_INSTANCE_KEY'
      );
    
      // Init interests after registration
      RNPusherPushNotifications.on('registered', () => {
        subscribe(appUpdateInterest);
      });
    
      // Setup notification listeners
      RNPusherPushNotifications.on('notification', handleNotification);
    };
    
    // Handle notifications received
    const handleNotification = notification => {
      if (Platform.OS === 'ios') {
        Alert.alert('App update', notification.userInfo.aps.alert.body, [
          { text: 'Cancel', onPress: () => {} },
          {
            text: 'Update now',
            onPress: () =>
              // Just open up Apple's Testlight in the app store.
              // Ideally we will replace this if the app has been previously released to 
              // the app store
              Linking.openURL(
                'itms-apps://itunes.apple.com/ng/app/testflight/id899247664?mt=8'
              ),
          },
        ]);
      }
    };
    
    // Subscribe to an interest
    const subscribe = interest => {
      console.log(interest);
      RNPusherPushNotifications.subscribe(
        interest,
        (statusCode, response) => {
          console.error(statusCode, response);
        },
        () => {
          console.log('Success');
        }
      );
    };
    
    init();
    
    AppRegistry.registerComponent(appName, () => App);
```    

The above piece of code is really easy to understand as it all does is configure the PushNotifications library to make use of the key we got from the dashboard earlier. When the device has been registered with Pusher Beams, we subscribe the user to the `debug-updates` topic as all notifications for updating the app will be published to that topic.

In `handleNotification` , we show an alert dialog that provides the user with two options. One is to cancel, the other is to actually update. Clicking on the option to update the app will take the user to the Apple app store.

> Since this is an hypothetical app, we will forward the user to Apple’s Testflight app. You can replace the link to that of a real app if the app already exists on the app store.


## Sending push notifications to the device

The bulk of the entire work has been done. All is that is left now is to actually test that push notifications are delivered to the user. To do this, you will need to visit your instance page on the [dashboard](https://dash.pusher.com). You will want to navigate to the **Debug** console.

> You will need to run the app on a real device as push notifications do not work on a simulator.

![ios-beams-updates-events-log](//images.ctfassets.net/1es3ne0caaid/6uZXS1ZJdYSCyICsmc8G2/2a933f60b500cfde9bf36b018b5ab0ec/ios-beams-updates-events-log.png)

Once you have filled the above form, click on the **Publish Notifications** button. You will get an alert on your device in less than a second. 

Here is an example of how the app works. You should be able to replicate this behavior on your device.

![ios-beams-updates-demo-2](//images.ctfassets.net/1es3ne0caaid/2JmbH8rsGsWwm8GQ0CUqoQ/72927ad023e21970f8063ab6f63a23bd/ios-beams-updates-demo-2.gif)


## Conclusion

In this tutorial, we have built a mechanism for informing users of updates to our app with the help of Pusher Beams. 

The source code can be found on [GitHub](https://github.com/adelowo/pusher-app-updates-push-notifications).

In this tutorial, you will build a simple to-do app for iOS using React Native. You will integrate push notifications, so that every time an updated version of the app is deployed to the App Store, users will receive a notification.

Use Pusher Beams to notify users of updates to your iOS app

Using Pusher Beams to notify users of a new release of your iOS app

Neo Ighodaro

## Introduction

When using music streaming services like Spotify, you can see realtime technology in action when you are using multiple devices. On the other devices, you can see how much playtime has elapsed.

In this series, we will take a look at how you can integrate this feature into your application with minimal fuss. We will be building a web API, a web app, and an iOS application. Both apps will consume the API we built.


![spotify-currently-playing-API-img1](//images.ctfassets.net/1es3ne0caaid/5c40g0HYWdT9vg9kcInhf2/467a5c2254947a427a86b52d214eddfe/spotify-currently-playing-API-img1.gif)


## Prerequisites 

To follow along in this part of the series, you must have the following requirements:

- Node.js (any LTS version) and NPM installed locally on your machine. Install [here](https://nodejs.org/en/download/).
- Basic knowledge of JavaScript.
- Basic knowledge of the command-line interface.


## Setting up

The first thing you need to do is [create a Pusher account](https://pusher.com). Next, create a Pusher Channels application using the dashboard.

Next, create a root directory for your Web API project. We will call it `spot`. When this is done, launch your terminal application and `cd` to the directory you just created. In this directory, run the following command:

```
    $ npm init -y
```

![spotify-currently-playing-API-img2](//images.ctfassets.net/1es3ne0caaid/72uTIgkgk6Qf8VuoktelDK/7d0c75cc5e43fe3617966644a208a7e0/spotify-currently-playing-API-img2.png)

At the end, you should have a `package.json` file in the root of your application.

Let’s install some dependencies we will need for our API. In the terminal, run the following command:

```
    $ npm install --save express body-parser pusher cors
```

![spotify-currently-playing-API-img3](//images.ctfassets.net/1es3ne0caaid/6irkA5SbfuJU3Yh9cr9cIU/235f7a61f347e91a5bee6c7e74cf37c7/spotify-currently-playing-API-img3.png)

This will install all the dependencies we need to build the API. When the installation is complete, we can move on to building the application.


## Building the web API

Now that we have everything installed, let’s create the web API. Open the project in an IDE of your choice. Create a new `index.js` file. This will be where we will have all our logic. Let’s start building our API.

Let’s start by importing and using all the dependencies that we installed using npm. In the file, paste the following code:

```javascript
    // File: index.js
    const express = require('express');
    const bodyParser = require('body-parser');
    const Pusher = require('pusher');
    const fs = require('fs');
    const cors = require('cors');
    const path = require('path');
    const app = express();
```

Above, we imported and created instances of the dependencies we installed using npm. Next, let’s create our API endpoints.

We will be creating three endpoints:


1. `tracks` - this endpoint will return all the available tracks for the music player. Since we are not building a full-fledged application, we will be mocking the data from a flat JSON file. We will create this file later on.
2. `current` - this endpoint will return the currently playing song. This will make it easy for other clients to know which song is currently playing when they are loaded.
3. `tick` - this endpoint will trigger a Pusher event. As the song plays, we will intermittently send the current position of the song playing using this endpoint. This is so that other web clients can know where the track is currently.

Let’s start implementing these endpoints.

In the `index.js` file, paste the following code:

```javascript
    // File: index.js
    // [...]
    
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));
    
    let tracks = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'data.json')));
    
    app.get('/tracks', (req, res) => {
      res.json(tracks);
    });
```

As seen above, we are returning the contents of a nonexistent JSON file. This file is supposed to contain the data for our tracks. Let’s create this file.

Create a file named `data.json` and paste the following JSON string into the file:

```json
    // File: data.json
    [
      {
        "id": 1,
        "duration": 195,
        "artist": "JugHead",
        "title": "Polly",
        "cover": "https://via.placeholder.com/500x500"
      }
    ]
```

Now that we have the data file, we can continue building the API. In the `index.js` file, paste the following code to create the second endpoint:

```javascript
    // File: index.js
    // [...]
    
    let current = {};
    
    app.get('/current', (req, res) => {
      res.json(current);
    });
```

Above, the endpoint simply returns the currently playing track if there is any or an empty JSON object if nothing is playing. 

Let us add the last endpoint. In the `index.js` file, add the following code:

```javascript
    // File: index.js
    // [...]
    
    app.options('/tick', cors());
    
    app.post('/tick', cors(), (req, res) => {
      const { id, position, device } = req.body;
    
      for (let index = 0; index < tracks.length; index++) {
        if (tracks\[index\]['id'] === parseInt(id)) {
          current = tracks[index];
          pusher.trigger('spotmusic', 'tick', { id, position, device });
          return res.json({ status: true });
        }
      }
    
      res.json({ status: false });
    });
```

In the endpoint above, we will receive the ID of the track currently being played, the position of the track and then we will receive the device that is sending the request. When we find a matching existing track, we will trigger the event to Pusher and save the currently playing track on the server.

Finally, let’s make sure the Node.js server is listening on port 3000 when we start the server. In the `index.js` file, add the following code:

```javascript
    // File: index.js
    // [...]
    
    app.listen(3000, () => console.log('Listening on port 3000!'));
```

Now that we have the endpoints set up, let’s add realtime triggers to Pusher. Before the `app` variable, add the following code:

```javascript
    // File: index.js
    // [...]
    
    let pusher = new Pusher({
      appId: 'PUSHER_APP_ID',
      key: 'PUSHER_APP_KEY',
      secret: 'PUSHER_APP_SECRET',
      cluster: 'PUSHER_APP_CLUSTER',
      useTLS: true
    });
```

> Replace the `PUSHER_APP_*` placeholders with the credentials from your Pusher dashboard.


## Running the application server

Now that we have built the application, we need to run the application in a server. In your terminal, run the following command to start the Node server:

```
    $ node index.js
```

![spotify-currently-playing-API-img4](//images.ctfassets.net/1es3ne0caaid/R7Lg5VnlvvSRGGsoDOQDN/946a64a11c580664fd7cb2c113d6474b/spotify-currently-playing-API-img4.png)

Now your server is running, in the next parts, we will move on to creating the clients that will consume the API that the Node.js app provides.

## Conclusion

In this part, we created a web API for our music application. This API will be responsible for returning the tracklist and also updating the now playing track. It will also be responsible for triggering events to Pusher. 

In the next part, we will start building an iOS app that will consume the API we built in this part. The source code is available on [GitHub](https://github.com/neoighodaro/spotify-like-currently-playing-realtime).

When using music streaming services like Spotify, you can see realtime technology in action when you are using multiple devices. On the other devices, you can see how much playtime has elapsed. This three-part tutorial series looks at how to integrate this feature into your application. In the first part, build the web API.

When using music streaming services like Spotify, realtime technology allows you to see on other devices how much playtime has elapsed. This three-part tutorial series looks at how to integrate this feature into your application. In the first part, build the web API.

Learn & Discover Pusher

Send Push Notifications to your Android app

Notify Slack users of push notification status with webhooks

Create a food ordering app in React Native - Part 3: Adding push notifications

Create a food ordering app in React Native - Part 2: Adding the driver app and chat functionality

Create a food ordering app in React Native - Part 1: Making an order

Creating a server health monitoring app with Laravel

Azure function running Java for Android notifications

Using Pusher Beams to notify users of a new release of your iOS app

Building a Spotify-like currently playing feature: Part 1 - Building the web API

Products

Developers

Company

Connect