MobileFirst Foundation 8.0 Developer Labs


logo for advanced wallet lab session for 8.0

Lab highlights

Time to complete: up to 3 hours


Pre-requisites:

Follow the Setup section to install an Ubuntu image, install the MobileFirst Developer Kit, archetypes and CLI and register at Bluemix.

You can download videos for offline usage from from Dropbox or OneDrive (2.67 - 2.69)

Setup

The recommended way to setup your workstation for these labs is to download the prepared VMware image that has all required software installed and ready to be used. However, if you want to do this on your own you will need to setup the dependencies listed below.

If you will be using ubuntu-based x64 distro, additional packages are required: lib32z1, lib32ncurses5, lib32bz2-1.0, and lib32stdc++6.
Finally, do not forget to set JAVA_HOME, ANDROID_HOME, MAVEN_HOME and M2_HOME and add them to your PATH.

Alternatively to watching labs on YouTube, you can download offline version from Dropbox or OneDrive. The videos are located inside the "labs_en" folder and have "webm" extension. VLC, same as most of media players and browser will be able to play them.

Download and setup the VM image

Download and install MobileFirst Developer Kit

Register on Bluemix

Lab steps

Description: Clone repository with 7.1 based Hybrid Wallet project and start migration of that app to 8.0
Time to complete: 70 minutes
Lab number for offline usage: 2.67


Lab helpers:

Initial MobileFirst Platform Foundation 7.1 application repository URL

https://github.com/andriivasylchenko/hybridWallet

Mock server repository URL

https://github.com/andriivasylchenko/AWMockServer


Link to completed lab github repository branch
Description:Replace v7.1 adapter-based authentication mechanism based on classic security model with OAuth 2.0
Time to complete: 50 minutes
Lab number for offline usage: 2.68


Lab helpers:

safeApply factory

.factory('safeApply', [function($rootScope) {
    return function($scope, fn) {
        var phase = $scope.$root.$$phase;
        if(phase == '$apply' || phase == '$digest') {
            if (fn) {
                $scope.$eval(fn);
            }
        } else {
            if (fn) {
                $scope.$apply(fn);
            } else {
                $scope.$apply();
            }
        }
    }
}])

initComplete function

function initComplete() {
    console.log('---> WL init completed');
    var AuthRealmChallengeHandler = WL.Client.createSecurityCheckChallengeHandler("UserLogin");
    AuthRealmChallengeHandler.handleChallenge = function(response){
        console.log('--> inside handleChallenge');
        $scope.openModal();
    		if (response.errorMsg) {
            msg = response.errorMsg + "\n";
          }
        else {
          msg = "Please enter username and password \n"
        }

        msg += "Remaining attempts: " + response.remainingAttempts;
        $scope.errorText = msg;
        $scope.displayError = true;
    };

   AuthRealmChallengeHandler.handleSuccess = function(response){
        console.log('--> inside handleSuccess');
        $scope.errorText = '';
        $scope.user = {};
        $scope.displayError = false;
        $scope.closeModal();
   }

  $scope.doLogin = function () {
    console.log('---> trying to perform auth with user ', $scope.user.name);
    AuthRealmChallengeHandler.submitChallengeAnswer({"username": $scope.user.name, "password": $scope.user.password});
  };

  $scope.loadCards();
};


Link to completed lab github repository branch
Description: Remove old push notification related code and using new Push API register device and subscribe for a custom tag to receive Push messages.
Time to complete: 40 minutes
Lab number for offline usage: 2.69


Lab helpers:

initPush function

$scope.initPush = function() {
  MFPPush.initialize(
    function(success){
      console.log('--> push init success');
      MFPPush.registerNotificationsCallback($scope.NotificationReceived);
      var options = {"phoneNumber": ""};
      MFPPush.registerDevice(
        options,
        function(success){
          console.log('--> push register success');
          var tag = ['wallet'];
          MFPPush.subscribe(
            tag,
            function(success){
              console.log('--> push subscribe success');
            },
            function(failure){
              console.log('--> push subscribe failure', failure);
            }
          )
        },
        function(failure){
          console.log('--> push register failure', failure);
        }
      )
    },
    function(failure){
      console.log('--> push init failure', failure);
    }
  )
}
                

NotificationReceived function

$scope.NotificationReceived = function(message) {
  console.log('--> push notification received', message)
  alert(message.alert);
}


Link to completed lab github repository branch