MobileFirst Foundation 8.0 Developer Labs

• Home

Lab highlights

• Migration from MobileFirst Platform 7.1 based app to 8.0
• Hybrid, Ionic 1 based
• Development using CLI and Visual Studio Code
• User authentication
• Backend mocks Node app
• Push messaging
• JSONStore

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.

• Google Chrome CORS extension
• Visual Studio Code
• Oracle JDK 7
• Android SDK
• Google Play Services
• Android Support repository
• Google Repository
• API v23
• Build tools v23
• Intel x86 Atom_64 image v23
• curl
• nodejs
• npm
• bower
• gulp
• cordova
• ionic@2.0.0-beta.32
• cdvlive
• maven
• git
• python

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 the VMware image archive from Dropbox or OneDrive (7.7 GB)
• Import the downloaded .ova file into the latest version of VMware Player / VMware Fusion / VMware Workstation
• Set the VM settings to at least 2 CPU cores and 4GB of RAM; Enable VT-x/EPT support (may also be required to enable it in the computer BIOS as well)
• Start the VM image
• Use user "ibm" and password: “QQqq1234″ to log in. Same password is set for sudo

Download and install MobileFirst Developer Kit

• Follow the MobileFirst Developer Kit setup instructions and install devkit into /home/ibm/dev/server/ folder
• Install the MobileFirst CLI by running from Terminal: npm install -g mfpdev-cli
• If you expect to not have an Internet connection available, install the adapter archetypes from the Download Center in the MobileFirst Operations Console.

Register on IBM Cloud

• Navigate to registration page, fill required info and register.
• Check your mailbox and verify email
• Make sure that you are able to login inside IBM Cloud console

Lab steps

https://github.com/andriivasylchenko/hybridWallet

https://github.com/andriivasylchenko/AWMockServer

.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();
            }
        }
    }
}])

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();
};

$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);
    }
  )
}
                

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