ShepHertz App42 Blog

As the wearable market expands and turns out to be the next major focus of App developers, I thought to walk you through a sample project that will elucidate how can you use App42 Push Notification API in different ways to send Push Notifications on the phones and also sync them with Android Wearables. As we go further, I would like to recommend reading Getting Started with Android Wear.

Learn to configure Push Notifications using App42 Push Notification API on phone as well as on Android Wearable.
Click To Tweet

Different types of push messages are listed below.
1. Basic Push Notification
2. Image based Push Notification
3. Big Content Based Push Notification
4. Multiple Page based Push Notifications

# Running Sample

This is a sample Android app, which is created using App42 API. Here, are a few easy steps to run it.

1. Register/Login with App42 platform and create an App from App Manager Tab.
2. Download project and unzip it.
3. Configure with Eclipse that has latest ADT (Android Developer Tool).

Import the project in Eclipse
Check Android dependencies and Android private libraries in order and import section on Build Path

4. Configure with Android Studio.

Import this project in your Android Studio
Add library jar files from libs folder by adding library modules in Android Studio

5. Make these changes in MainActivity.java file of sample.

Replace API-Key and Secret-Key that you have received in step 1 at line number 39 and 40
Replace your user-id by which you want to register your application for Push Notification at line number 31

GCM (Google Cloud Messaging) Integration

6. Create a project and get its number from Google developer console. This would be available in Overview section of the project that you have created.
7. Now, select the project that you have created and click on APIs option in Google developer console & enable Google Cloud Messaging for Android service.
8. Click on Credentials (in APIs option) given on left menu -> Create New Key -> Server Key.
9. Accept requests from these server IP addresses as blank and click on Create button.
10. Go to AppHQ Console to click on Push Notification and pick Android Settings in Settings option.
11. Pick GCM provider for your App and copy the server key that is generated in Google developer console (as given in the above step and submit it).
12. Put your Google Project No at line no 90 in MainActivity.java file.
13. Build your Android application and run it on your device (version of your device should be 4.4 or above to support Android Wear Notification and Android Wear Connection).
14. To connect Android wear on your mobile go through Android Wear Getting Started.
15. You can test the App on Android wear simulator.
16. When you will click *Open on Phone* on your Android Wear, notifications will open on phone.

Design Details

1. Registration for Push Notification: To register your GCM id for Push Notifications on App42, you have to use the method written in App42GCMService.java file.

View Source Code Hide Source Code

private void registerWithApp42(String regId) {
App42Log.debug(" Registering on Server ....");
App42API.buildPushNotificationService().storeDeviceToken(
App42API.getLoggedInUser(), regId, new App42CallBack() {
@Override
public void onSuccess(Object paramObject) {
App42Log.debug(" ..... Registeration Success ....");
GCMRegistrar.setRegisteredOnServer(App42API.appContext,
true);
}
@Override
public void onException(Exception paramException) {
App42Log.debug("storeDeviceToken : Exception : on start up "
+ paramException);
}
});
}

2. Send Push Notification to user: You can also send different types of Push Notifications using single API and configure accordingly.

View Source Code Hide Source Code

private void sendPushMessage(JSONObject message, String userName) {
App42API.buildPushNotificationService().sendPushMessageToUser(userName,
message.toString(), new App42CallBack() {
@Override
public void onSuccess(Object arg0) {
displayMessage(arg0.toString());
}
@Override
public void onException(Exception arg0) {
displayMessage(arg0.toString());
}
});
}

3. Build different types of Push Notification messages before sending them to the users: The entire sample code is written in Utils.java file in sample project.

Basic Push Notification View Source Code Hide Source Code

static JSONObject buildBasicJson() throws JSONException {
        JSONObject pushJson = new JSONObject();
        pushJson.put(Title, "App42 PushNotification");
        pushJson.put(NotifyCode, PushCode.Basic.getCode());
        pushJson.put(
                Message,
                "Hey I am using App42 PushNotification API for Android as well as for Wearable Notification.");
        return pushJson;
    }

Image Based Push Notification (Image should reside in assets folder of the sample) View Source Code Hide Source Code

static JSONObject buildImageJson() throws JSONException {
        JSONObject pushJson = new JSONObject();
        pushJson.put(Title, "App42 PushNotification");
        pushJson.put(NotifyCode, PushCode.Image.getCode());
        pushJson.put(
                Message,
                "Hey I am using App42 PushNotification API for Android as well as for Wearable Notification.");
        pushJson.put(Image, DefImage);
        return pushJson;
    }

Big Text Based Push Notification View Source Code Hide Source Code

static JSONObject buildBigTextJson() throws JSONException {
        JSONObject pushJson = new JSONObject();
        pushJson.put(Title, "App42 PushNotification");
        pushJson.put(Message, "App42 PushNotification API");
        pushJson.put(BigText, BigTextContent);
        pushJson.put(NotifyCode, PushCode.BigText.getCode());
        return pushJson;
    }

Multiple Page Based Push Notification View Source Code Hide Source Code

static JSONObject buildMultiPageJson() throws JSONException {
        JSONObject pushJson = new JSONObject();
        pushJson.put(Title, "Shephertz Technology");
        pushJson.put(NotifyCode, PushCode.MultiPage.getCode());
        pushJson.put(
                Message,
                "Shephertz provides complete cloud EcoSystem for App, Game and Web development. ");
        JSONArray pushPages = new JSONArray();
        pushPages.put(getApp42Json());
        pushPages.put(getAppWarpJson());
        pushPages.put(getApp42PaasJson());
        pushPages.put(getAppClayJson());
        pushPages.put(getAppHypeJson());
        pushJson.put(Pages, pushPages);
        pushJson.put(Image, DefImage);
        return pushJson;
    }
//Page Notification like

private static JSONObject getApp42Json() throws JSONException {
        JSONObject app42 = new JSONObject();
        app42.put(PageTitle, "App42");
        app42.put(pageSummary,
                "App42 Complete cloud API for differnet applications.");
        app42.put(
                PageContent,
                "App42 Provides complete cloud API for application development in different SDKs e.g \n PushNotification \n LeaderBoard \n SocialService \n File Storage \n Custom Code");
        return app42;
    }

4. Send Push Notifications from AppHQ Console: You can also send Push Notification JSON messages from AppHQ console.

Select Push Notification section in left panel
Click on User option and select your application
Select a user from registered users list and click on Send Message button
Choose your JSON message from the step mentioned above and drop it in the message box. Later, click on Send button
Now, you will be able to see Push Notification in your device as well as on the connected Android Wear

5. Parse Push Notification message when received on device: When the Push Notification message that we sent in the above step is received on Android device, we have to parse the notification accordingly. This code is written in Utils.java file of the sample project.

View Source Code Hide Source Code

static App42Push getApp42Push(String message) {
        App42Push app42Push = null;
        try {
            JSONObject pushJson = new JSONObject(message);
            app42Push = getEventNotification(pushJson,
                    PushCode.getByCode(pushJson.optInt(NotifyCode, 0)));
        } catch (JSONException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            app42Push = new App42Push(message, "App42 PushNotification",
                    PushCode.Basic);
        }
        return app42Push;
    }
private static App42Push getEventNotification(JSONObject pushJson,
            PushCode pushCode) throws JSONException {
        App42Push app42Push = new App42Push(pushJson.optString(Message,
                DefMessage), pushJson.optString(Title, DefTitle), pushCode);
        if (pushCode == PushCode.BigText) {
            app42Push.setBigText(pushJson.optString(Title, BigTextContent));
        } else if (pushCode == PushCode.Image) {
            app42Push.setImage(pushJson.optString(Image, DefImage));
        } else if (pushCode == PushCode.MultiPage) {
            app42Push.setImage(pushJson.optString(Image, DefImage));
            JSONArray pageArray = pushJson.getJSONArray(Pages);
            ArrayList pushPages = new ArrayList();
            int length = pageArray.length();
            for (int i = 0; i < length; i++) {
                JSONObject jsonPage = pageArray.getJSONObject(i);
                PageNotification page = app42Push.createPageNotification(
                        jsonPage.optString(PageTitle, DefTitle),
                        jsonPage.optString(pageSummary, DefMessage),
                        jsonPage.optString(PageContent, BigTextContent));
                pushPages.add(page);
            }
            app42Push.setPageNotifications(pushPages);
        }
        return app42Push;
    }

6. Build Notification UI for Android Wear and device: After parsing the message in the above step, you have to build Notification UI based on the type of message. The sample code for Notification UI is written in the NotificationBuilder.java file.

Building Common Wearable Notification UI View Source Code Hide Source Code

   private  WearableNotifications.Builder buildWearableNotification(
            Context context, App42Push app42Push) {
        NotificationCompat.Builder builder = new NotificationCompat.Builder(
                context).setContentText(app42Push.getMessage())
                .setContentTitle(app42Push.getTitle())
                .setSmallIcon(R.drawable.logo);
        WearableNotifications.Builder wearableBuilder = new WearableNotifications.Builder(
                builder);
        return wearableBuilder;
    }

Add Action on Notification Click View Source Code Hide Source Code

private  NotificationCompat.Action getAction(Context context) {
        Intent intent = new Intent(context, MainActivity.class);
        intent.putExtra(App42GCMService.EXTRA_MESSAGE, currentMsg);
        PendingIntent pendingIntent = PendingIntent.getActivity(context, 0,
                intent, PendingIntent.FLAG_UPDATE_CURRENT);
        return new NotificationCompat.Action.Builder(R.drawable.ic_result_open,
                "Open on Phone", pendingIntent).build();
    }

Building basic Notification UI View Source Code Hide Source Code

private  Notification buildBasicNotification(Context context,
            App42Push app42Push) {
        WearableNotifications.Builder builder = buildWearableNotification(context,
                app42Push);
        builder.getCompatBuilder().addAction(getAction(context));
        return builder.build();
    }

Building Image based Notification UI View Source Code Hide Source Code

private  Notification buildImageNotification(Context context,
            App42Push app42Push) {
        NotificationCompat.BigPictureStyle style = new NotificationCompat.BigPictureStyle();
        Bitmap imageBitmap =null;
        if (app42Push.getImage() != null) {
            imageBitmap = Bitmap.createScaledBitmap(
                    Utils.loadBitmapAsset(context, app42Push.getImage()),
                    ImageWidth, Imageheight, false);
        }
        style.bigPicture(imageBitmap);
        style.setBigContentTitle(app42Push.getTitle());
        style.setSummaryText("");
        WearableNotifications.Builder builder = buildWearableNotification(context,
                app42Push);
        builder.getCompatBuilder().addAction(getAction(context));
        builder.getCompatBuilder().setStyle(style);
        builder.build();
        return builder.build();
    }

Building Big Text based Notification UI View Source Code Hide Source Code

private  Notification buildBigNotification(Context context,
            App42Push app42Push) {
        NotificationCompat.BigTextStyle style = new NotificationCompat.BigTextStyle();
        style.bigText(app42Push.getbigText());
        style.setBigContentTitle(app42Push.getTitle());
        style.setSummaryText("");
        WearableNotifications.Builder builder = buildWearableNotification(context,
                app42Push);
        builder.getCompatBuilder().addAction(getAction(context));
        builder.getCompatBuilder().setStyle(style);
        builder.getCompatBuilder().setContentText(app42Push.getbigText());
        return builder.build();
    }

Building Multiple Page Notification UI View Source Code Hide Source Code

private  Notification buildMultiPageNotification(Context context,
            App42Push app42Push) {
        NotificationCompat.Builder builder = new NotificationCompat.Builder(
                context);
        ArrayList notificationPages = buildNotificationPages(
                app42Push.getPageNotifications(), context);
        if (app42Push.getImage() != null) {
            Bitmap imageBitmap = Bitmap.createScaledBitmap(
                    Utils.loadBitmapAsset(context, app42Push.getImage()),
                    ImageWidth, Imageheight, false);
            builder.setLargeIcon(imageBitmap);
        }
        builder.setContentTitle(app42Push.getTitle());
        builder.setContentText(app42Push.getMessage());
        builder.setSmallIcon(R.drawable.logo);
        Notification notification = builder.extend(
                new NotificationCompat.WearableExtender()
                        .addPages(notificationPages)).build();
        return notification;
    }
private  ArrayList buildNotificationPages(
            ArrayList pageNotifications, Context context) {
        ArrayList notificationPages = new ArrayList();
        if (pageNotifications != null) {
            int size = pageNotifications.size();
            for (int i = 0; i < size; ++i) {
                PageNotification pageNotify = pageNotifications.get(i);
                NotificationCompat.BigTextStyle style = new NotificationCompat.BigTextStyle();
                style.bigText(pageNotify.getPageContent());
                style.setBigContentTitle(pageNotify.getPageTitle());
                style.setSummaryText("");
                NotificationCompat.Builder notificationPage = new NotificationCompat.Builder(
                        context);
                notificationPage.setStyle(style);
                notificationPage.setSmallIcon(R.drawable.logo);
                notificationPages.add(notificationPage.build());
            }
        }
        return notificationPages;
    }

7. Open on phone: You can open your application on phone by selecting *Open Phone Option* in Android Wearable.

8. Screen Shots: Here are some screen shots for different types of Push Notifications in App42. In this blog, I have explained about how can App42 Push Notifications can be used on Android Wear as well as on other devices like phones in several ways.

Basic Notification	Basic Image Notiification

Multiple Page Notification	Open on Phone Action on Android Wear

Multiple Notification Page1	Multiple Notification Page2

Notification on Android device