Showing posts with label openshift. Show all posts
Showing posts with label openshift. Show all posts

Friday, January 31, 2014

iOS APNS & Android GCM Push with Apache Cordova (Phonegap)

Here are my instructions for Hello World, a tutorial with Aerogear's Unified Push Server that allows you to send iOS and Android push notifications to Apache Cordova/Phonegap/HTML5 client applications. If you need help, the best place to hang out is on irc.freenode.net #aerogear channel

The instructions can be found in the readme.txt file and the sample code, while not necessary to follow the tutorial is also available at github https://github.com/burrsutter/hellopush The primary difference between the instructions in the readme.txt and the provided solution is that I added logic to address the OS configuration. If you are an Eclipse user, JBoss is adding a plugin for Phonegap/Apache Cordova project creation - here is a video to see it in action: https://vimeo.com/82204444
https://vimeo.com/81565404

My Aerogear Unified Push Server instance is running at OpenShift - sign-up is free and it only takes a few clicks to select the Aerogear Push 0.X quickstart and you are up and running.

Aerogear Cordova Push Plugin (HelloWorld)

0. getting the Cordova command line tool installed for Mac
sudo npm install -g cordova
cordova -version
3.3.1-0.1.2
http://cordova.apache.org/blog/releases/2013/07/23/cordova-3.html

Cordova Command Line Guide
http://cordova.apache.org/docs/en/3.0.0/guide_cli_index.md.html

npm itself comes from Node.js http://nodejs.org/
npm -version
1.3.25
node --version
v0.10.25
You will also need the Android SDK installed for your OS and in your PATH - commands like "android" and "adb devices" should execute
You will also need "curl", if you type in "curl" and hit return
curl: try 'curl --help' or 'curl --manual' for more information

1. Cordova create has the following sequence: "cordova create folderName bundleID appName"

cordova create hellopush com.burrsutter.hellopush "Hello Push"

2. edit hellopush (bring up your editor) if you open config.xml, you should see <name>Hello Push</name> <widget id="com.burrsutter.hellopush" the widget id becomes the bundle identifier, it must unique identify your iOS app, globally when you setup your iOS provisioning profile, you will need this unique bundle ID

3. cd hellopush

4. cordova platform add android

5. cordova plugin search push

6. cordova plugin add org.jboss.aerogear.cordova.push

7. There is a console.log in the default project as well as in the suggested example code, so make sure to also add the console plugin

cordova plugin add org.apache.cordova.console

and to know the mobile OS install the device plugin

cordova plugin add org.apache.cordova.device

8. index.html - insert the following below <div id="deviceready"> but inside <div class="app"> <font size="6"> <div id="notify">notifications </div> <div id="debug">debug </div> </font>

9. index.js

   successHandler: function (message) {
            var debug = document.getElementById("debug");
            console.log(message);
            debug.innerHTML = "success: " + message;
   },
   errorHandler: function (message) {
            var debug = document.getElementById("debug");
            console.log(message);
            debug.innerHTML = "error: " + message;
   },  
   onNotification: function (e) {
            // alert(e.alert);
            var notify = document.getElementById("notify");
            notify.innerHTML = e.alert;
   },  

    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 
    // 'receivedEvent' function, we must explicity call 
    // 'app.receivedEvent(...);'
    onDeviceReady: function() {
        var config = {
                senderID: "492580885002",
                pushServerURL: "https://aerogear-html5.rhcloud.com",
                variantID: "b3852e72-92e1-4b05-a4bd-b549438d4943",
                variantSecret: "13c9daca-457e-4837-bc26-769ba572a940"
        };
        push.register(
            app.successHandler,
            app.errorHandler,
            {
            	"badge": "true",
                "sound": "true",
                "alert": "true",
                ecb: "app.onNotification",
                pushConfig: config
            });
            
        app.receivedEvent('deviceready');
   },
Note: senderID, variantID and variantSecret were all setup in the Push Console at pushServerURL

http://aerogear.org/docs/guides/aerogear-push-android/google-setup/

http://aerogear.org/docs/guides/AdminConsoleGuide/

10. Run "adb devices" to see if an android device is plugged in correctly then cordova run android

this will install and launch the app on your plugged in, developer-ready Android phone/tablet

11. then send a message

curl -3 -u \
"f07c43a6-bb0a-4bb7-a1eb-a368db272212:e2cf19c3-6636-4712-bbe8-26b7c1ac9c09" \
   -v -H "Accept: application/json" -H "Content-type: application/json" \
   -X POST -d '{"message": {"alert":"Hello AeroGear", "badge":1}}' \
   https://aerogear-html5.rhcloud.com/rest/sender
NOTE: this is not wrapping correctly here in Blogger, here is the gist and I included a send.sh to make sending in numerous messages a little easier. Usage: ./send.sh "My Message" 3

where f07c43a6-bb0a-4bb7-a1eb-a368db272212
is your Application ID from the web console
where e2cf19c3-6636-4712-bbe8-26b7c1ac9c09
is the Master Secret also from the web console

Success, send a few more messages, changing the "Hello AeroGear Unified Push!"

Note: If you wish to deploy the app to another Android device, unplug the current one and plug in the new one - use "cordova run android" again and it will deploy to the new device - the app will still function and receive push notifications without being plugged in on USB.

12. Add iOS, if on Mac OS X, with XCode installed (via Mac AppStore is easiest) and you have previously paid your $99 and know how to get around at http://developer.apple.com

cordova platform add ios
13. Setup your provisioning profile:

http://aerogear.org/docs/guides/aerogear-push-ios/app-id-ssl-certificate-apns/ and

http://aerogear.org/docs/guides/aerogear-push-ios/provisioning-profiles/ and

http://aerogear.org/docs/guides/AdminConsoleGuide/

14. Add the variant for iOS via the Unified Push Server web console - uploading the .p12 file and its associated passphrase

15. look under platforms\ios and you should see a Hello Push.xcodeproj - double click on the .xcodeproj

If you see the General tab, double check the bundle identifier of com.burrsutter.hellopush or whatever you made yours

Modify the index.js (in XCode) for the proper variantID and variantSecret from the Unified Push Server console

16. Assuming you have previously registered your plugged in iOS device with the developer.apple.com portal, you can now hit the big arrow and target your device.

When the app installs it should prompt you to accept push notifications.

17. Look for a new installation/device token under your newly added iOS variant in the UPS web console. If you see no instance/device token then something failed.

18. Finally, send a message, it should hit all the android & iOS devices that you have deployed the app to.

Monday, July 2, 2012

JBoss World Keynote Demo 2012

In June 2011, we focused our keynote demonstration on JBoss' AS7 and Infinispan technology which we delivered as fully supported products (Enterprise Application Platform 6 and JBoss Data Grid 6) this year.

For 2012, we wanted to make a killer demonstration that was more accessible today - leveraging a core technology that is already officially supported - jBPM 5 in JBoss BRMS 5.3.   The BPM landscape, normally only accessible by large corporations due to license costs and complex proprietary software offerings...is changing.    This blog provides a high-level overview for the various elements that went into the making of the demonstration.   We have already opensourced the codebase at JBoss Developer Framework (jdf).


Recording of the JBoss World 2012 Keynote on YouTube.  The demonstration starts at 14:33.


- BPMN2 modeling (jBPM & Drools - BRMS 5.3)
- Mobile Tasks - HTML5 based task interactions (Aerogear)
- Enterprise Application Provisioning (AppBlade)
- Real-time web-based dashboard (Errai)
- Cloud/Platform-as-a-Service (OpenShift)
- Gamification 
- Open Source - makes all of this technology more accessible to all developers



BPMN2 Web Designer

BPMN2 + Business Process, Rules & Events

With jBPM & Drools, we are able to model the core business logic via BPMN2 and a decision table using a web-based repository and modeling tool.  This means the workflow and its associated rules can easily be changed, in production, without programming and without service disruption.


HTML5 + Cordova Application

AppBlade Provisioning

HTML5, Apache Cordova & AppBlade

We then extended the business logic layer via RESTful services that were consumed by a HTML5 application wrapped with Apache Cordova and delivered via AppBlade - the application was to enable "employees" to use a simple catalog and shopping cart to order schwag (promotional items, giveaways), we had a little sales contest, encouraging audience members to pound in orders via the AppBlade provisioned application or the mobile web using their smartphone's browser.

Leaderboard - Errai-based Dashboard

Dashboard
As a live, audience-interactive demonstration, we needed a "dashboard" that could tell us, instantly, how a particular participant was performing - much like any organization would love to have to real-time analytics - we took advantage of Drools Fusion (BRMS 5.3), eventing and then leveraged Errai+GWT to push those events out to a waiting web browsers running on Linux, Mac and Windows.  Our dashboard is also an HTML5 application that can leverage the current capabilities of advanced web browsers.   This was a great risk - we had several hundred people in the audience, with a saturated WIFI and leveraging free resources at OpenShift.   Our Errai-based Leaderboard turned out to be a huge hit!  And it clearly demonstrates how the average web browser can be used for real-time process monitoring and it runs great on the iPad.


Cloud
Not only do we believe that HTML5 and the explosion of mobile devices is having a profound impact on the BPM industry, PaaS, Platform-as-a-Service, will enable many more organizations who could not afford a large IT capital expenditure to roll-out a new system to leverage business rule and business process systems.  We also needed to leverage the cloud for a purely practical reason - we were enabling random individuals using their 3G/4G (or conference WIFI) mobile devices - this meant the system had to have a public IP address - OpenShift was the answer.

Gamification
We were doing a live, in-person event, where we required audience participation for the software to even function properly.  No volunteers, software that was too hard to use or simply the lack of motivation, would have completely changed the dynamic of the demonstration.   The leaderboard was the secret ingredient - players were able to see their name on the board and instantly see how their activities on their phones were impacting the business scenario.   The concepts of gamification for BPM can obviously get much more sophisticated than what you see in our demo, however, the core concepts are there - make it competitive, recognize and reward the winner, build a team to play along and acknowledge and reward as many random players as possible - encouragement & motivation.  Perhaps in a future version we would offer badges!

Open Source
Not only is are the key products behind this demonstration open source, the actual demo code is itself also open source - we hope that many of you grab the codebase and run this same presentation at your local JUG - run it on OpenShift - have your audience break out their phones and give it a try!

A huge thank you to Kevin Conner who served as a our overall architect and engineering lead for the project.   All of us took this project on knowing that the actual products upon which the demonstration was based was also being delivered in the same month.  It was an exciting challenge and we had a fantastic team - now we get a weekend off and it is time to start planning our next crazy demo - bring on the robots and gesture UI.  ;-)