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 IBM Cloud.

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 IBM Cloud

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
Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.