MobileFirst Foundation 8.0 Developer Labs


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