Pluggable's Fanmeter Plugin for Cordova apps

Fanmeter's Cordova plugin for Cordova apps. This plugins allows you to create fanmeter events. You have two ways of doing it:

1. You want everything automated and, so, you'll need to integrate with FCM to handle the received notifications that start the event (see the next section and you'll need to use the fanmeterExecute API);

2. You want to handle the conditions yourself (without Fanmeter's notifications). You can skip the next section (the Pre-conditions one) and start calling the fanmeterStartService and fanmeterStopService API.

Nonetheless, note that for Android, push permission is required so that a notification is shown to the user so that he knows that a foreground service is running. Also, note that the GPS permission is needed for the fans to participate in the geo-restricted events.

Hence, you need to ask for such permission in Android. For iOS, add the Background Modes capability and enable Location Updates. Also, you must open your Info.plist file and add something the following code at the bottom:

<key>NSLocationAlwaysUsageDescription</key>
<string>GPS is required to collect data to classify your celebration during the event! </string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>GPS is required to collect data to classify your celebration during the event! </string>	

Note that, for Android only, Fanmeter is required to use a Data Sync foreground service to communicate non-intrusive sensor motion data with Pluggable's server. Since API 34 of Android, when publishing an app that uses such services, you are required to fill a Policy Declaration where you must justify the need for such services. In Fanmeter's case, when filling such policy, you will be asked the question "What tasks require your app to use the FOREGROUND_SERVICE_DATA_SYNC permission?".

There, you should:

1. Select the option OTHER in Other tasks;
2. Provide the following video link:

https://youtu.be/w4d7Pgksok0

3. Provide the following description:

Fanmeter is an Android SDK, incorporated in this app, that uses a Data Sync foreground service to communicate non-intrusive sensor motion data with Pluggable's servers, which are used to quantify the engagement of the user in real-time. The foreground service must start as soons as the user opts to participate in the event (so that it can collect and communicate motion data) and must keep running until the user himself decides to terminate his/her participation.

Pre-conditions [Integrate with FCM]

Before using this plugin you should guarantee that your app already integrates with Firebase Cloud Messaging so that your app can receive push notifications.

1. Create a new Firebase project;

2. Install Cordova's Firebase plugin by running:

cordova plugin add cordova-plugin-firebase-messaging

3. Android Setup - a configuration file must be downloaded and added to the project:

• On the Firebase console, add a new Android application and enter the projects details. The "Android package name" must match the local package name which can be found inside your app's config.xml file;
• Download the google-services.json file and place it into the root directory of your Cordova project;
• Add a new tag for the Android platform inside your app's config.xml file:

  ...
  <platform name="android">
      <resource-file src="google-services.json" target="app/google-services.json" />
  </platform>
  ...

• Remember to ask the user for push notification permission.

4. iOS Setup - to allow the iOS app to securely connect to the Firebase project, a configuration file must be downloaded and added to the project:

• On the Firebase console, add a new iOS application and enter your projects details. The "Apple bundle ID" must match your local project bundle ID. The bundle ID can be found within the "General" tab when opening the project with Xcode or in your app's config.xml file;
• Download the GoogleService-Info.plist file and place it into the root directory of your Cordova project;
• Add a new tag for the iOS platform inside your app's config.xml file:

  ...
  <platform name="ios">
      <resource-file src="GoogleService-Info.plist" />
  </platform>
  ...

5. Additional iOS Setup - iOS requires further configuration before you can start receiving and sending messages through Firebase. For instance:

• You must upload your APNs authentication key to Firebase. If you don't already have an APNs authentication key, make sure to create one in the Apple Developer Member Center;
• Inside your project in the Firebase console, select the gear icon, select Project Settings, and then select the Cloud Messaging tab;
• In APNs authentication key under iOS app configuration, click the Upload button.
• Browse to the location where you saved your key, select it, and click Open. Add the key ID for the key (available in the Apple Developer Member Center;) and click Upload.
• For further notes, you can check React-Native iOS with Firebase Cloud Messaging, which is quite illustrative.
• You should open app/App_Resources/iOS/Info.plist and add the following code at the bottom:

<key>UIBackgroundModes</key>
<array>
  	<string>fetch</string>
  	<string>location</string>
  	<string>remote-notification</string>
</array>
<key>NSLocationAlwaysUsageDescription</key>
<string>GPS is required to collect data to classify your celebration during the event! </string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>GPS is required to collect data to classify your celebration during the event! </string>	

• Also note that for iOS apps, the GPS permission is needed for the fans to participate in the event.

NOTE: FCM via APNs does not work on iOS Simulators. To receive messages & notifications a real device is required. The same is recommended for Android.

Fanmeter Usage

After configuring your app to integrate with FCM, you are ready to use this plugin to properly engage with your fans! To install the Fanmeter Package just run in the root of the project:

cordova plugin add cordova-plugin-fanmeter

Note that for Android, to customize the used notification icon just add the desired icon in the Android's drawable folder and name it ic_push_app_icon. Otherwise, a default icon, not related to your app, will be used.

Fully-automated Fanmeter

If you want to automate the entire process, this library exposes two mandatory methods, which can be imported and used in your .js files as demonstrated in the next lines.

• The fanmeterExecute method is used to launch the SDK as soon as a notification is tapped by the user. The fanmeterExecuteWithLocalNotification method is used to tell the SDK to launch a local notification to the user, which is required by Android to launch push notifications when the app is in the foreground. Both accept the same set of parameters:

  • externalUserId, the user identifier in the company's db - can be the username, the uuid, or other;
  • externalTokenId, the individual smartphone identifier (allows for same accounts in different devices);
  • notificationData, a map containing data coming from the notification;
  • externalUserEmail, the user's email (optional);
  • fcmToken, the FCM token id (mandatory for autonomous events);
  • ticketNumber, the ticket number of the user (optional);
  • ticketStand, the stand where the given user is (optional);
  • notificationClassResponse, the name of the class that is being instantiated when the user clicks the notification - example: "com.company.activities.SearchActivity" (null opens a default view);;
  • log, enables additional logging (optional).

  It also returns the following values:

  • 1: SUCCESS;
  • -80: No GPS/PUSH Permissions; -81: GPS Disabled; -82: Invalid event coordinates;
  • -92: Invalid License; -93: Invalid Event; -94: Invalid event dates; -95: externalUserId or externalTokenId are empty; -96: Failed to get event details; -97: Failed to start background service.

These should be called as follows:

let EXTERNAL_USER_ID = 'your_user_id';
let EXTERNAL_TOKEN_ID = 'the_id_of_the_device';
let EXTERNAL_USER_EMAIL = '[email protected]';
let FCM_TOKEN = 'the_fcm_token';
let TICKET_NUMBER = 't-1234';
let TICKET_STAND = null;
let NOTIFICATION_CLASS_RESPONSE = null;
let FANMETER_LOG = true;

let COMPANY_NAME = 'your_company_name';
let LICENSE_KEY = 'your_company_key';

// Register the background handler and notification tap.
cordova.plugins.firebase.messaging.onBackgroundMessage(function(notificationData) {
    cordova.plugins.FanmeterPlugin.fanmeterExecute(
        EXTERNAL_USER_ID, 
        EXTERNAL_TOKEN_ID, 
        notificationData, 
        EXTERNAL_USER_EMAIL, 
        FCM_TOKEN, 
        TICKET_NUMBER, 
        TICKET_STAND, 
        NOTIFICATION_CLASS_RESPONSE, 
        FANMETER_LOG,
        function(response){
            console.log("JS | SUCCESS fanmeterExecute | " + JSON.stringify(response));
        }, function(error){
            console.log("JS | ERROR fanmeterExecute | " + JSON.stringify(error));
        }
    );
});

// Register the foreground handler.
cordova.plugins.firebase.messaging.onMessage(function(notificationData) {
    cordova.plugins.FanmeterPlugin.fanmeterExecuteWithLocalNotification(
        EXTERNAL_USER_ID, 
        EXTERNAL_TOKEN_ID,
        notificationData,
        EXTERNAL_USER_EMAIL, 
        FCM_TOKEN, 
        TICKET_NUMBER, 
        TICKET_STAND, 
        NOTIFICATION_CLASS_RESPONSE,
        FANMETER_LOG, 
        function(response){
            console.log("JS | SUCCESS executeWithLocalNotification | " + JSON.stringify(response));
        }, function(error){
            console.log("JS | ERROR executeWithLocalNotification | " + JSON.stringify(error));
        }
    );
});

• Also, the fanmeterLaunchFanmeterView method is used to tell the SDK to launch the Fanmeter native view. For example, it can be associated with a button in the company's app, redirecting the user to the Fanmeter native view, allowing users without notification permissions to participate in the event. It will open the Fanmeter view with the event with the closest date to the current date, accepting a set of parameters, including:

  • companyName, the name of the company requesting to start the service;
  • licenseKey, the company key requesting to start the service;
  • externalUserId, the user identifier in the company's db - can be the username, the uuid, or other;
  • externalTokenId, the individual smartphone identifier (allows for same accounts in different devices);
  • externalUserEmail, the user's email (optional);
  • fcmToken, the FCM token id (mandatory for fully autonomous events);
  • ticketNumber, the ticket number of the user (optional);
  • ticketStand, the stand where the given user is (optional);
  • log, enables additional logging (optional).

  It also returns the following values:

  • 1: SUCCESS;
  • -80: No GPS/PUSH Permissions; -81: GPS Disabled; -82: Invalid event coordinates;
  • -92: Invalid License; -93: Invalid Event; -94: Invalid event dates; -95: externalUserId or externalTokenId are empty; -96: Failed to get event details; -97: Failed to start background service.

function launchView() {
    cordova.plugins.FanmeterPlugin.fanmeterLaunchFanmeterView(
        COMPANY_NAME,
        LICENSE_KEY,
        EXTERNAL_USER_ID, 
        EXTERNAL_TOKEN_ID,
        EXTERNAL_USER_EMAIL, 
        FCM_TOKEN,
        TICKET_NUMBER, 
        TICKET_STAND, 
        FANMETER_LOG, 
        function(response){
            console.log("JS | SUCCESS launchView | " + response);
        }, function(error){
          console.log("JS | ERROR launchView | " + error);
        }
    );
}

• You also need to know the FCM token ID associated with each user device. It's equally mandatory to subscribe the user to a specific topic so that they can receive event notifications:

// Get user's FCM token. 
cordova.plugins.firebase.messaging.getToken().then(function(token) {
    console.log("Got device token: ", token);
    // Save the token
    FCM_TOKEN = token
});

// Subscribe to specific topic.
cordova.plugins.firebase.messaging.subscribe("fanmeter_cordova_test_app");

OWN-UI Fanmeter

If you want to integrate Fanmeter in your own UI, you can use the fanmeterStartService, fanmeterStopService, and fanmeterIsServiceRunning methods. These methods are exposed by the library to handle user sensor data collection during an event and can be used, if needed, as follows.

• You should call the fanmeterStartService method to let the SDK enable sensor data collection for your client's device during a particular event. It accepts a set of parameters, including:

  • companyName, the name of the company requesting to start the service;
  • licenseKey, the license key of the company requesting to start the service;
  • eventTitle, the event name;
  • externalUserId, the user identifier in the company's db - can be the username, the uuid, or other;
  • externalTokenId, the individual smartphone identifier (allows for same accounts in different devices);
  • externalUserEmail, the user's email (optional);
  • fcmToken, the FCM token id (optional);
  • ticketNumber, the ticket number of the user (optional);
  • ticketStand, the stand where the given user is (optional);
  • notificationClassResponse, he name of the class that is being instantiated when the user clicks the notification - example: "com.pluggableai.activities.SearchActivity" (optional);
  • log, enables additional logging (optional).

  It also returns the following values:

  • 1: SUCCESS;
  • -80: No GPS/PUSH Permissions; -81: GPS Disabled; -82: Invalid event coordinates;
  • -92: Invalid License; -93: Invalid Event; -94: Invalid event dates; -95: externalUserId or externalTokenId are empty; -96: Failed to get event details; -97: Failed to start background service.

cordova.plugins.FanmeterPlugin.fanmeterStartService(
    COMPANY_NAME, 
    COMPANY_LICENSE_KEY,
    "eventTitle", 
    EXTERNAL_USER_ID, 
    EXTERNAL_TOKEN_ID, 
    EXTERNAL_USER_EMAIL, 
    FCM_TOKEN, 
    TICKET_NUMBER, 
    TICKET_STAND, 
    NOTIFICATION_CLASS_RESPONSE, 
    FANMETER_LOG, 
    function(response){
        console.log("JS | SUCCESS Started | " + JSON.stringify(response));
    }, function(error){
        console.log("JS | ERROR Started | " + JSON.stringify(error));
});

• You should call the fanmeterStopService method to let the SDK disable sensor data collection for your client's device during a particular event. This returns 1, if success, otherwise an error code. For that, you must do as follows:

cordova.plugins.FanmeterPlugin.fanmeterStopService(
    FANMETER_LOG, 
    function(response){
        console.log("JS | SUCCESS Stopped | " + JSON.stringify(response));
    }, function(error){
        console.log("JS | ERROR Stopped | " + JSON.stringify(error));
    }
);

• The method fanmeterIsServiceRunning is used to check the current status of the service. This returns 1, if the service is running, otherwise 0.

cordova.plugins.FanmeterPlugin.fanmeterIsServiceRunning(
    function(response){
      console.log("JS | SUCCESS SERVICE IS | " + JSON.stringify(response));
    }, function(error){
        console.log("JS | ERROR | " + JSON.stringify(error));
    }
);

Generics

Other important methods are to request user permission to be able to send notifications and request GPS permission. Also, get the user token and listen for changes to get the user FCM_TOKEN and update it when it changes.

// Request push permission.
cordova.plugins.firebase.messaging.requestPermission({forceShow: true}).then(function() {
      console.log("Push messaging is allowed");
});

// Get user's FCM token. 
cordova.plugins.firebase.messaging.getToken().then(function(token) {
    console.log("Got device token: ", token);
    // Save the token
    FCM_TOKEN = token
});

More info

• FCM via APNs does not work on iOS Simulators. To receive messages and notifications a real device is required. The same is recommended for Android.

• If your platform app (iOS and/or Android) is unable to get the new plugin, then, between steps 1. and 2., you'll probably need to relink the platform data:

  # Android apps
  cordova platform remove android
  cordova platform add android
  
  # iOS apps
  cordova platform remove ios
  cordova platform add ios

• For full compatibility, attention to the used versions of XCODE, SWIFT and COCOAPODS. Recommended versions are XCODE=15, SWIFT=5.9, and COCOAPODS=1.14.2.

• For more info visit https://pluggableai.xyz/ or give us feedback to [email protected].