In this part, I will develop a Cordova mobile app to display the message received from the Sigfox network on my mobile device.

What have we done so far?

In part 1, I developed the Zoe Helper hardware, a button that sends a Sigfox message to the Sigfox backend, and through a callback, route the message to jacksonn.org.

In part 2, my web API at jacksonng.org takes the message, determines who the recipient is, and send it as a notification to my OneSignal account. OneSignal then forwards it to Firebase and then to the mobile device that has been configured to receive this notification. 

What I used

Cordova is a mobile development framework that lets you reuse your knowledge of the HTML5/JavaScript stack to develop mobile apps on mobile platforms such as iOS, Android, Windows Phone and BlackBerry, among others. I like Cordova it because I didn't want to code in Java if I can help it. :)

In my Cordova app, I used jQuery so that I can work faster in JavaScript. I used jQuery Mobile because....well, I really should move on to a more recent mobile user interface library if the folks at jQuery Mobile won't release an update soon.

The App

Here's what the app does. It displays the notification that it receives from OneSignal. I can dismiss the message by pressing on the "Dismiss Notification" button. It also allows me to update my email address. This changes the email address Tag in my OneSignal.com app for this user. This implementation is currently awkward because in an actual implementation, any changes in the user's email address would have been done in company's website and the user's record in a centralized database would have been updated. 

Code

Refer to OneSignal's documentation on using its Cordova SDK. My app is straightforward. It extracts the message received as a notification and displays it as in a <div></div>. It updates the user's email tag in OneSignal if the user changes his email. 

//index.js

(function () {
    "use strict";

    $(document).ready(function () {
        $("#btnUpdate").bind("click", function () {
            /*
                Tag this user with the email address that he entered.
                In a real scenario, this email would have been pulled in from the database
                with his email account, and the ID of his hardware device
            */
            window.plugins.OneSignal.sendTag("email", $("#txtEmail").val());
            alert($("#txtEmail").val());
        });

        $("#btnDismiss").bind("click", function () {
            $("#message").html("");
        });
    });

    document.addEventListener('deviceready', function () {
        // Enable to debug issues.
        // window.plugins.OneSignal.setLogLevel({logLevel: 4, visualLevel: 4});

        var notificationOpenedCallback = function (jsonData) {
            console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData));
        };

        var notificationReceivedCallback = function (jsonData) {
            $("#message").html(jsonData.payload.body);  //display message received from onesignal
        };

        window.plugins.OneSignal
            .startInit("<your app id>")
            .handleNotificationOpened(notificationOpenedCallback)
            .handleNotificationReceived(notificationReceivedCallback)
            .inFocusDisplaying(window.plugins.OneSignal.OSInFocusDisplayOption.None)
            .endInit();
        
    }, false);
    
} )();

My codes can be found in Github here.

What's Next?

There are many more technicalities of Sigfox that I have yet to explore such as handling downlinks. Perhaps this is something I will revisit at some point. 

Another area that bugs me is the fact that if someone knew my device ID, there's really nothing to stop him from faking a message to my mobile device by pretending to be Zoe. He could simply do it by faking a POST request (actually my project used GET, so he could actually fake it by entering the URL in the browser!) The most elegant solution is to have my server send an OAUTH token to my sigfox device - challenging because a token is longer than 12 bytes, which is all that a Sigfox device can send each time. A simpler and less secure solution is to provide secret API keys to users and warn them not to give it out to anyone. A combination of API key, Device ID, Cross-origin resource sharing (CORS) configuration and email address could determine if the message really came from the device and not spoofed.