Lab Exercise

Intro Lab
Introduction to IBM MobileFirst
Platform hybrid applications
Lab Exercise

An IBM Proof of Technology

Catalog Number

Copyright IBM Corporation, 2015

US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.

IBM Software

Table of Contents
INTRO LAB - GETTING STARTED WITH IBM MOBILEFIRST PLATFORM

1 WORKING WITH VMWARE BASICS

2 UNDERSTANDING MOBILEFIRST PLATFORM STUDIO

3 LAB STEPS

3.1 START MOBILEFIRST PLATFORM STUDIO

3.2 IBM BANK APPLICATION APP ARCHITECTURE AND ENVIRONMENTS
3.2.1 ADD ANDROID ENVIRONMENT AND INSPECT APPLICATION STRUCTURE
3.3 IBM BANK APPLICATION USER INTERFACE
3.3.1 HTML STRUCTURE
3.3.2 JQUERY MOBILE FLAT UI THEME
3.3.3 DISPLAYING ACCOUNTS LIST
3.4 IBM BANK APPLICATION ADAPTERS
3.4.1 THE ADAPTER FRAMEWORK
3.4.2 ANATOMY OF ADAPTERS
3.4.3 INVOKING ADAPTER
3.5 BUILDING AND RUNNING THE IBM BANK ANDROID APPLICATION
3.5.1 PREVIEW IBMBANKAPP IN MOBILE BROWSER SIMULATOR (MBS)
3.5.2 PREVIEW IBMBANK ON AN ANDROID DEVICE OR VIRTUAL DEVICE
3.5.3 INTRODUCTION TO THE MOBILEFIRST PLATFORM CONSOLE
3.5.4 INTRODUCTION TO OPERATIONAL ANALYTICS
3.5.5 ADD AN ADAPTER INVOCATION
3.6 CLEAN UP
3.7 SUMMARY

8
9
10
13
13
15
16
20
20
20
24
27
27
32
36
44
46
52
52

APPENDIX A. TROUBLESHOOTING LOCATE/IMPORT THE IBMBANK PROJECT IF NOT ALREADY

PRE-LOADED IN THE MOBILEFIRST PLATFORM STUDIO
53
APPENDIX B. TROUBLESHOOTING ANDROID VIRTUAL DEVICE MANAGER IS NOT VISIBLE ON THE
ECLIPSE MENU BAR
54
APPENDIX C. NOTICES

55

APPENDIX D. TRADEMARKS AND COPYRIGHTS

57

Contents

Page 3

IBM Software

INTRO Lab - Getting Started with IBM MobileFirst Platform

In this lab, you will import a starting version of the IBMBank app that will be used in this Lab series,
examine the structure of this MobileFirst Platform Hybrid application, build it for multiple environments,
and preview it. You will learn what artifacts are generated by the MobileFirst Platform studio and how
you can utilize the tools available with MobileFirst Platform Studio to speed up the UI development. You
will also learn how you can leverage existing frameworks that are based on open standards, such as
jQuery mobile to build an application.

Page 4

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

1 Working with VMWare Basics

You can skip this section if you have experience using VMWare images. These POT lab manuals are
written for the corresponding VMWare image, and make assumptions about the setup, but can be run
independently as well. The VMWare image is a virtualized Windows 7 OS with MobileFirst Platform
Studio and MobileFirst Platform server pre-installed. Lab imports are stored in
C:\MobileFirstLabs\imports folders.
When running in a typical IBM-provided lab setting, the VM Image should have been started and running
in full screen mode.
The virtualized OS has a user name and password:
Administrator / passw0rd

Page 5

IBM Software

2 Understanding MobileFirst Platform Studio

MobileFirst Platform Studio is designed to provide a comprehensive environment for advanced, rich,
cross-platform mobile app development. It installs as a set of plugins to Eclipse IDE. The plug-ins include
development tooling as well as a built-in application server for testing purposes (the MobileFirst Platform
Development Server). You can also choose to deploy and test to a remote MobileFirst Platform server.
MobileFirst Platform Studio supports:

Native and web development supports native and hybrid web development technologies such as
HTML5, Apache Cordova, Java and Objective C.

Optimization Framework allows the majority of hybrid application development to be done in a set
of common folders and shared across device-specific environments. These environments (iPhone,
iPad, Android Phones and Tablets, etc) can inherit, replace or augment elements of the common
folders for best device-specific experience, with highly efficient handling of source code. Runtime
skinning offers another level of iterative differentiation based on minor device differences within an
environment, such as screen size, screen resolution, etc

Web-based simulation preview hybrid screens and JavaScript login with the Mobile Browser
Simulator, an in-browser device simulator providing full access to HTML5-style debugging.

Integration of device-specific SDKs generates a project for each supported SDK, such as Xcode for
iOS development. Launch, test, package and even extend functionality with the native capabilities
provided by each platform.

Third-party library integration depending on your programming approach, your hybrid mobile
application can include JavaScript frameworks, such as jQuery Mobile, Dojo Mobile, AngularJS, Ionic,
BootStrap, Polymer and many, many more.

Mobile Testing - Mobile Test Workbench allows for creating, storing and running tests of MobileFirst
Platform-built applications.

Service Discovery and Adapter Development the wizard lets you interrogate back end services specify the back-end services that you want to invoke from MobileFirst Platform project and generate
the adapters that connect to those services.

And much more

If you are familiar with Eclipse, it will be less of a learning curve to understand and locate the features
available through the MobileFirst Platform Studio IDE. For example, in order to develop an application
from scratch, you would start by creating a new MobileFirst Platform project and a new MobileFirst
Platform application. In this lab, we will start by importing an already-developed project. You can
optionally go through the steps of creating a simple application from scratch as part of this exercise.
The MobileFirst Platform Studio features and tasks that will be discussed in this lab are:

Import a MobileFirst Platform hybrid application project

Page 6

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

Become familiar with the project structure, HTML and JavaScript logic, CSS styling, and Adapter
invocation code

Build and deploy the MobileFirst Platform application to the MobileFirst Platform Development Server
included in MobileFirst Platform Studio

Invoke a MobileFirst Platform adapter procedure from MobileFirst Platform Studio

Add an environment for Android

Use Preview feature to preview and test application in the Mobile Browser Simulator

Launch the application in an Android Virtual Device

Use the MobileFirst Platform Operations Console for application lifecycle management

Use the MobileFirst Platform Operational Analytics to gain insight on runtime usage

Page 7

IBM Software

3 Lab Steps
The steps recorded in this lab assume that you have obtained and started the corresponding VMWare
image. In the image you will launch Eclipse with the MobileFirst Platform Studio tooling and locate the
application workspace. If running without the image, you may have to adjust some steps to account for
differences.

3.1 Start MobileFirst Platform Studio

Follow these steps to start the studio.
___ 1.

On the Windows desktop, double-click the folder named MobileFirst Platform to open it.

___ 2.

In the MobileFirst Platform folder, double-click the MobileFirst Platform Studio shortcut.

___ 3.
If the Workspace Launcher dialog appears, verify that the Workspace path is
C:\MobileFirst Labs\workspaces\intro and click OK. (If a different workspace is auto-loaded,
use File->Switch Workspace to change to the correct workspace.)
NOTE: Eclipse settings are stored as part of your workspace. If you change the location of the
workspace, you will lose pre-configured values for default browser, perspectives, views, etc It
is recommended to use the workspaces specified in the lab manuals.

Page 8

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

___ 4.
You should be already in the Design perspective. This is the perspective where you will
do all the mobile app development. If you do not see the Design perspective. You can switch to
the Design perspective by selecting the Design perspective option if visible, or use the Open
perspectives icon and selecting Other > Design.

3.2 IBM Bank Application App Architecture and Environments

In the POT VMware image provided, we have successfully imported the project required for the
application to run. If you do not see the IBMBankProject listed under the Project Explorer of the Studio
workspace, see Appendix A for the import instructions for the project. In this lab, we will focus on the
content of the IBMBankProject.

Page 9

IBM Software

3.2.1 Add Android Environment and inspect application structure

___ 1.
Add a new environment by clicking on the drop down arrow next to the MobileFirst
Platform phone icon from the icon bar

___ 2.
Select MobileFirst Environment. Select IBMBankApp as the application/component.
For this lab, we will choose the Android phones and tablets environment (feel free to choose
iPhone as well). Click Finish.

Page 10

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

___ 3.
Lets examine the IBMBankProject project structure. The diagram below describes what
portions of the artifacts are for.

MobileFirst Platform enables cross-platform development through an optimization framework,

which provides a mechanism for cross-environment shared content and environment-specific
deltas. In the screenshot above, you see common folder under IBMBankApp. This is the default
environment. The common environment contains resources (css, js, etc.) that are shared
between environments.

Page 11

IBM Software

___ 4.
Once we added our Android environment, MobileFirst Platform created an android folder
under IBMBankApp, representing the Android environment customizations for the IBMBank
application. The resources of the new environment have the following relationship with the
common resources:

images override the common images when both have the same name

css extend or override css content in the common environment folders

js extends,the JavaScript content in the common environment folders.

Additionally, the wizard has created a new project called IBMBankProjectIBMBankAppAndroid.

This is an Android application project, automatically generated from the MobileFirst Platform
environment. It can be manipulated with standard Android SDK tooling and techniques.

Page 12

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

3.3 IBM Bank Application User Interface

The IBM Bank Application is implemented as a hybrid application. With the hybrid development
approach, you can create applications that use web development techniques but still access native
device capabilities. Your hybrid application runs inside a native container or shell and uses the browser
engine to display the application interface, which is based on HTML, JavaScript and CSS. The native
container provides JavaScript API access to device capabilities that are not accessible to web
applications, such as the accelerometer, camera, and local storage on a smartphone.

3.3.1 HTML structure

Lets first take a look at index.html file.
In the Project Explorer view, expand IBMBankProject > apps > IBMBankApp > common > open
index.html by double-clicking on the file.

The index.html is opened in the Rich Page Editor (RPE). If you receive a warning message Some
pages may not render correctly when using Internet Explorer as the embedded browser, just click OK
and ignore the warning. This MobileFirst Platform source editor allows you to switch between Design,
Source, or Split view, depending on your preference.

Page 13

IBM Software

By default, the RPE design view renders apps in Standard format (generic device), but you can click on
the arrow drop down to switch the view to the characteristics of a specific device. Note the other controls
available on the top menu bar of the RPE - hover to get context help for icons that you dont recognize.
Our IBMBank HTML file is divided into different <div data-role=page> sections, representing different
pages or screens of the application. By default the Rich Page Editor will display the first visible page in
the Design tab, but you can change the display using the Mobile Navigation Eclipse view (bottom left of
the screen shot above). Each page is represented in that view, along with an oval (eyelash) icon. Once
the icon is clicked, it will turn into an open eyed icon (like this - ), indicating the currently visible page in
the RPE Design tab. You can use this to easily display and edit your application screens inside the
studio.
On the right hand side, you can see the palette view. MobileFirst Platform Studio provides drag & drop
support for common HTML tags as well as frameworks jQuery Mobile or Dojo Mobile if those libraries are
included in the application. IBM Bank was built with jQuery Mobile, so the jQuery mobile widget palette is
available. You can drag/drop widgets from the palette during UI development and MobileFirst Platform
will generate the code for the widget. This is known as Rich Page Editing (RPE).
There are seven pages in this application:
splashPage displayed while the application is starting, then dynamically switched to loginPage

Page 14

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

loginPage allows users to login. The Sign In button is initially greyed out. In this version of the app, the
user must enter any 3 characters in both the userid and password fields in order to enable the login
button.
mainPage contains the main menu of the application
mobilePanel sliding panel (child of the mainPage)
accountPage displays a list of accounts and balance information
accountDetailsPage displays a list of detailed transactions for the selected account
signInHelp provides sign-in instructions
In order to view each page, click on the Design tab of the RPE. Click each of the oval icons ( ) next to
the page names in the Mobile Navigation view and it will switch the RPE view to the selected page.

3.3.2 jQuery Mobile Flat UI Theme

The IBMBank application utilizes the jquery-mobile-flat-ui-theme which provides a flat design. Flat
design promotes a simplified, classically digital aesthetic UI design. To implement our flat design, we
have included the Flat-UI open source jQuery Mobile theme in the IBMBank app. For more information
on Flat-UI, you can download and view the demo of Flat-UI from the jquery-mobile-flat-ui-theme GitHub
repository.
In order to use the theme, we have included a copy of jquery.mobile.flatui.css under the common/css
directory, and linked it into index.html as shown below:

This is an example of the open nature of MobileFirst Platform applications, in that any HTML5/JavaScript
compliant content can be inserted into a MobileFirst Platform hybrid application in a normal and
predictable manner.

Page 15

IBM Software

Lets examine mainPage by switching to that page in Source tab. Scroll the page until you find the <!-main page --> comment area.

3.3.3 Displaying Accounts List

One of the options from the main menu is My Accounts which will give you a list of accounts retrieved
from the back-end system. In this lab, the back-end is simulated by implementing the adapters to return a
pre-defined set of data.
If you click on one of the accounts from the list, it will display the account details.

Page 16

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

Lets understand how this flow works by looking at main.js file under common/js folder. It contains
wlCommonInit() function that is invoked automatically after MobileFirst Platform framework initialization
finishes.

MobileFirst Platform framework initialization

The initOptions.js contains MobileFirst Platform
framework initialization settings. It is also responsible
for initializing the MobileFirst Platform framework once
<body> element has finished loading. Refer to the
Info Center for more information.

The main.js is where you can add application initialization code. When IBM Bank application launches, it
will first attempt to connect to the MobileFirst Platform Server. On successful connection, it displays the
splashPage because it is the default page for the application. You can see from the code snippet below
that it transitions to loginPage after 2 seconds.

Page 17

IBM Software

After users successfully logs in (by entering any 3 characters for both userid and password), they will be
presented with the mainPage where they have the option to click on the My Accounts button. You will
find the event handler for this button in mainPage.js file.

After the MyAccounts button click handler switches to accountPage the pagebeforeshow handler for
the accountPage (located in accounts.js) calls the doGetAccounts() function which invokes the
AccountAdapter adapter to populate the list on accountPage with account data. You will investigate
the adapters in more detail in the next section.

Page 18

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

Similarly, you will find an event handler in accounts.js for the accountList (each of the dynamically
generated items in the list on the accountPage) to retrieve that accounts detailed account information.

At the moment, the handler calls the doGetAccountDetailsStatic function, which returns a static array
with 2 elements of placeholder data. In the subsequent steps, we will modify the source code to replace
the static list with a call to the AccountDetailsAdapter hosted on the MobileFirst Platform server.

Page 19

IBM Software

3.4 IBM Bank Application Adapters

In the previous section, we mentioned an example of adapter invocation within the doGetAccounts()
function. Lets take a step back and understand what adapters are and how they work.
MobileFirst Platform Adapters provide a secure, mobile-optimized mechanism for retrieving data from
back-end systems. Adapters include server-side application logic deployed on and serviced by
MobileFirst Platform server and client APIs for invoking the Adapters. With MobileFirst Platform, you can
create and configure adapters manually, or you can also automatically generate SAP Netweaver
Gateway or SOAP Web Services adapters with the service discovery wizard.

3.4.1 The Adapter Framework

The adapter framework mediates between the mobile apps and the back-end services. A typical flow is
depicted in the following diagram. The app, the back-end application, and the JavaScript code and XSLT
components in the MobileFirst Platform Server are supplied by the adapter or app developer. The
procedure and auto-conversions are part of MobileFirst Platform. Refer to the Info Center for additional
information.

3.4.2 Anatomy of Adapters

MobileFirst Platform adapters are composed of XML, JavaScript, and XSL. Each adapter must have the
following elements:

Exactly one XML file, describing the connectivity to the back-end system to which the adapter
connects, and listing the procedures that are exposed by the adapter to other adapters and to
applications.

Exactly one JavaScript file, containing the implementation of the procedures declared in the
XML file.

Page 20

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

Zero or more XSL files, each containing a transformation to convert raw XML data retrieved by
the adapter to JSON returned by adapter procedures.
MobileFirst Platform provides for several types of adapters, including HTTP, SQL, CastIron, SAP
Netweaver Gateway, SAP JCo, Java and JMS. The IBM Bank Application utilizes the HTTP Adapter. A
MobileFirst Platform HTTP Adapter can be used to invoke RESTful services and SOAP-based services.
It can also be used to perform HTML scraping. In the IBMBank app, the adapters simulate service calls
to a backed by returning a pre-defined set of JSON data.
Lets examine the AccountAdapter folder under the adapters folder. First, lets take a look at the
AccountAdapter.xml file. Right click on the xml file and select Open With > Adapter Editor.
Alternatively, double-click on the xml file.

The Connectivity Policy tag defines the connection properties and load constraints of the back-end
system. In this case the protocol is http.

Page 21

IBM Software

The Procedure tag declares a procedure that is exposed by the adapter. You can see that the
procedure exposed by this adapter is getAccounts.

Page 22

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

Now, lets take a look at the AccountAdapter-impl.js file. At the top of the file is a set of usage
comments, added by the New MobileFirst Adapter wizard when you create an adapter. We have left
them in the source. You can see here that the getAccounts() function returns a pre-defined account list
in JSON format. This adapter implementation simulates a backend service call.

Scroll down to view a commented section containing an example of the getAccounts() code if there is an
actual backend service available. The function would first make a call to the getPath() function to obtain
the url path, then make the MobileFirst Platform JavaScript server side API call WL.Server.invokeHttp
to access the back-end web service and return a JSON formatted result containing our list of accounts.

Page 23

IBM Software

The full URL to the web service is assembled from the protocol, domain and port settings in the adapter
XML file, and the path information supplied in the JavaScript implementation file. In this example code for
the getting a list of accounts, the backend Web Service should resolve to
http://localhost:10080/MockService/mockservices/listAccounts/123456789012/data.json

3.4.3 Invoking adapter

To test the adapter, you must deploy it first. It is fairly easy to do by using the following steps:
___ 1.
Right click on the adapter folder, in this case AccountAdapter. A menu will drop down
select Run As > Deploy MobileFirst Adapter. This will also start the server if you have not
already done so. Wait until the adapter is successfully built and deployed.

___ 2.
To test the AccountAdapter, right click again on IBMBankProject > Adapters >
AccountAdapter and this time select, Run As > Call MobileFirst Adapter.

Page 24

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

___ 3.
The Call MobileFirst Procedure window opens and you can choose which procedure
name to run. In this case there is only one, getAccounts. In dialog window, ensure that
getAccounts is selected in the Procedure Name field and click the Run button.

Page 25

IBM Software

___ 4.
If the MobileFirst Platform Development Server has not been started yet, it will start and
the adapter will be deployed. You should see a browser window open with the results of the
procedure call in the adapter:

___ 5.
Deploy the AccountDetailsAdapter. Expand IBMBankProject > adapters, then right-click
AccountDetailsAdapter > Run As and select Deploy MobileFirst Adapter.

Page 26

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

3.5 Building and Running the IBM Bank Android Application

Building a MobileFirst Platform application for a specific environment (for example, iOS or Android) is the
process that transforms the JavaScript, HTML and CSS code that you have created for your application
into a mobile application for the specified target. The build processes produce several elements:

A native project for the target platform that is stored in the native folder of the
environment. For Android, this project is also surfaced as an Android Project entry in the Eclipse
Project Explorer view.

A MobileFirst Platform application file (.wlapp) that contains the application metadata and
Web resources that are used by MobileFirst Platform Server to identify and service the mobile
application.

.adapter files adapter logic and metadata required on the MobileFirst Platform server.

After you have built and deployed the application files on the MobileFirst Platform server, you are ready
to preview the mobile app using the Mobile Browser Simulator, device and/or the device emulator.

3.5.1 Preview IBMBankApp in Mobile Browser Simulator (MBS)

The Mobile Browser Simulator will allow you to preview the application for the android environment.
Follow these steps to preview the application in the MBS.
___ 1.
Deploy the MobileFirst application to the server. In the IBMBankProject > apps folder,
right click on IBMBankApp and select Run As > Build All Environments.

Page 27

IBM Software

___ 2.
Deploy the application to the server. Right click the application folder IBMBankProject >
apps > IBMBankApp and select the Run As > Run on MobileFirst Development Server option
to deploy the application metadata and Web resources e.g. the .wlapp file(s) to the internal
MobileFirst Platform Development Server.

___ 3.
Right click on the android folder under IBMBankProject > apps > IBMBankApp and
select Run As > Preview.

The Mobile Browser Simulator should launch in a web browser and you should be able to use the
application. (if it opens within eclipse, check Window > preferences > General > Web Browser
from the Eclipse menu bar and select Use external web browser and choose Chrome).
If you encounter the following Java Security Warning click Allow.

Page 28

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

Or any Security warning. Select I accept the risk and want to run this application checkbox.
Click Run.

___ 4.
You should arrive at the login page for the IBMBankApp application, in a simulated
Android environment. Notice the Cordova controls on the left of the Mobile Browser Simulator.
You can use these to simulate device features like Accelerometer, Battery, Camera, Compass,
Geolocation, Network and even location scenario playback to test your application.

___ 5.
In order to login, enter any 3 characters e.g. joe for both username and password and
click on the Log In button.

Page 29

IBM Software

___ 6.
It will bring you to the IBMBankApp home page with the menu of application features.
The only functioning menu option from the homepage at this point is the My Accounts button.
Click on My Accounts to activate the functionality.

___ 7.
The My Accounts button will cause the AccountAdapter to be invoked on the
MobileFirst server, which will return the "enterprise data" from our back-end system - you should
recognize the data returned from the AccountAdapter in the Account List screen that appears.
Click the No-Fee Checking item to see account details.

Page 30

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

___ 8.
On the Account Details screen, notice at this point that the data appears to be
placeholders. While the Account list in the previous page was populated from our
AccountAdapter, this Account Details page has been rendered using a static array with 2
elements. In subsequent steps, we will modify the source code to replace the static list with a call
to the AccountDetailsAdapter hosted on our MobileFirst Platform server.

Note: Within the Mobile Browser Simulator, you are able to exercise and debug the Hybrid content of
your application (HTML, JS, CSS) as if it were a mobile web site. If interested, you can open the Chrome
Web Inspector by clicking on the Chrome menu More tools > Developer tools and view the JavaScript
console for error messages view JavaScript & HTML source, CSS values, etc.... Similar debugging
function is available on Safari or from Firebug on Firefox.

Page 31

IBM Software

3.5.2 Preview IBMBank on an Android Device or Virtual Device

Follow these steps to preview the app on an android device.
___ 1.
If running with an android device, ensure that your device is connected via a USB and
visible in the devices view. If running with Android Virtual Devices (AVDs), Start the Virtual device
(named haxm2) from the Android Virtual Device Manager view in Eclipse (Window > Android
Virtual Device Manager) and ensure that it starts fully and allows user interaction. If the Android
Virtual Device Manager is not visible on the Eclipse window menu, see Appendix B for the setup
instructions.

Page 32

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

NOTE: In case you are unfamiliar with AVDs, they are notoriously slow be prepared to wait.
Once the emulator for AVD haxm2 has started successfully, you can close the Starting Android
Emulator window by clicking Close.

Then close the Android Virtual Device (AVD) Manager window.

___ 2.
Right click on the IBMBankProjectIBMBankAppAndroid project in the project explorer
and select Run As > Android Application.

Page 33

IBM Software

___ 3.

The Android Virtual Device haxm2 will automatically open.

___ 4.
When you saw a popup asking if you want to turn on Logcat. Select Yes and click OK.
This will printout any messages from the Android Virtual Device to the LogCat Console.

Page 34

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

___ 5.
When the Android Virtual Device is opened, unlock it by sliding from the lock icon to the
right hand side.

Page 35

IBM Software

___ 6.
You will see the app launched on your device. Below is a screenshot of the IBMBank app
running on an Android phone. Navigate the application just like before.

As in the Mobile Browser Simulator, you should be able to login and navigate through the
Accounts pages. Explore the application on the device or virtual device.

3.5.3 Introduction to the MobileFirst Platform Console

The MobileFirst Platform Console serves as the dashboard for the MobileFirst Platform Server. It
provides graphical visual access to all of the server functionalities.
___ 1.
To view the MobileFirst Platform Operations Console, right click on the IBMBankProject
folder and select Open MobileFirst Console.

Page 36

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

___ 2.
The Operations Console opens in a browser window. You can choose to save the user
ID admin and password admin if prompted by the browser by clicking Save password.

Page 37

IBM Software

___ 3.

Click on the Applications button.

___ 4.

Click on the Phone icon or the IBMBankApp name.

___ 5.
From this console you can lock out an app and manage upgrades. Select the Application
Access to Access disabled, enter the Default notification message, the URL of the latest
application version and click the Save button.

Page 38

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

___ 6.
That version of the application is now disabled from accessing the MobileFirst Platform
server.

___ 7.
Return to the Mobile Browser Simulator and click on the Go/Refresh button to Reload or
re-launch the app.

Page 39

IBM Software

___ 8.
The notification text appears and the MobileFirst Server is no longer accessible by the
application. This feature can be useful for required application upgrades, end-of-life
announcements or system maintenance windows. Click the Close button for now.

___ 9.
You also have instant notification access to all your app users through the MobileFirst
Platform Console. Return to the Operations Console and click on the drop down menu next to the
Application Access.

Page 40

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

___ 10.
Change the Application Access from Access disabled to Active, notifying, and
change the Default notification message to set the text that users will see when the application on
their device tries to access the MobileFirst Server. Click the Save button.

___ 11.

The status of the save operation is displayed accordingly.

Page 41

IBM Software

___ 12.
Return to the Mobile Browser Simulator and click on the Go/Refresh button to Reload or
re-launch the app.

___ 13.
The user receives the Service Notification dialog when the app accesses the MobileFirst
Server. Click the Close button.

Page 42

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

___ 14.
To continue with the lab, we need to re-activate the application. Return to the MobileFirst
Platform Operations Console, change the Application Access to Active and click Save.

___ 15.

The status of the save operation is displayed accordingly.

Page 43

IBM Software

3.5.4 Introduction to Operational Analytics

The Analytics Dashboard is a powerful tool for tracking and finding issues in your applications
using a single console.
___ 1.
To launch the Operational Analytics dashboard, click on the Go to Analytics Dashboard
icon located at the upper right corner of the MobileFirst Platform Operations Console.

___ 2.
The login screen for the MobileFirst Platform Operational Analytics appears. Enter admin
for the user name and admin for the password. Click Log in.

Page 44

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

___ 3.
Once you have logged in you will see the main dashboard screen. The development
MobileFirst server is automatically instrumented for analytics collection and display. In this lab,
you will not see much data. The facilitator can show you what a data driven analytics dashboard
could look like using sample apps. One that we use for demonstration purposes.

___ 4.
Scroll down to the pie charts. This view gives us a quick display of statistics for the app
usage, environment usage and adapter calls. We will revisit later it, after making some source
code changes.

Page 45

IBM Software

3.5.5 Add an Adapter invocation

We will now change the source code of the IBMBank app to invoke an adapter procedure and
display live Account Details content from the server.
___ 1.
Return to the MobileFirst Studio and double-click on the accounts.js source file, located
in the folder IBMBankProject > apps > IBMBankApp > common > js.

___ 2.
Review the source code in accounts.js. The My Accounts page is rendered using data
from the AccountAdapter,

Page 46

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

___ 3.
Scroll down the Editor of account.js until you see the comments click handler for
Account List. You see that the Account Details page is rendered using a static array instead of
an adapter invocation.

___ 4.
Make the change to use the adapter for the Account Details page instead of the static
array by commenting out the call to doGetAccountDetailsStatic and uncommenting the call to
doGetAccountDetails.

Page 47

IBM Software

___ 5.

Click the Save button or press Ctrl-s to save the changes.

___ 6.
Return to the Mobile Browser Simulator and click the Go/Refresh button to Reload or relaunch the app.

Page 48

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

___ 7.
Once the IBMBankApp login page appears, enter any 3 characters e.g. joe for both the
username and password. Click Log In.

___ 8.

On the Home page, click My Accounts.

___ 9.

On the Account List page, click No-Fee Checking.

Page 49

IBM Software

___ 10.

Account detail is now supplied through back-end connectivity in the MobileFirst server.

___ 11.
Verify the new activity in the MobileFirst Platform Operational Analytics. Return to the
Operational Analytics Dashboard and verify changes in the app sessions and adapter usage
details.

Page 50

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

___ 12.
Scroll down the dashboard to view the pie charts. We should see new data captured,
including the AccountDetailsAdapter now being used.

Page 51

IBM Software

3.6 Clean up
___ 13.

Close the Android Virtual Device.

___ 14.

Close the Eclipse workbench.

3.7 Summary
In this lab, you have successfully examined and run a starter version of the IBM Bank Application. You
have also learned fundamental concepts of building and deploying a MobileFirst Platform application.

Page 52

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

Appendix A. Troubleshooting Locate/Import the IBMBank

project if not already pre-loaded in the MobileFirst Platform Studio
NOTE: When using the supplied VMWare image, the IBMBank project should already be pre-loaded in
the C:\MobileFirstLabs\workspaces\intro workspace. Ignore this appendix, if you see the IBMBank
project listed in the project explorer window.
Follow these steps to import the project into the workspace.
___ 1.
From the Eclipse menu, select File > Import and select Existing Projects into
Workspace from the General category of the Import window. Click Next.

___ 2.
Choose the Select archive file option and use the Browse button to navigate to
C:\MobileFirstLabs\imports\Setup folder. Locate and select the IBMBank_intro_import.zip
file. Click Finish and the IBMBankProject will be added to your workspace.

MobileFirst Platform 7.0 Proof of Technology Intro Lab

Page 53

IBM Software

Appendix B. Troubleshooting Android Virtual Device Manager

is not visible on the Eclipse menu bar
Follow these steps to setup the Android Virtual Manager on the Eclipse window menu.
___ 1.

On the Eclipse menu bar, select Window > Customize Perspective.

___ 2.
In the Customize Perspective window, select the Command Groups Availability tab,
select Android SDK and AVD Manager checkbox under the Available command groups
column, and then click the OK button.

Page 54

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

Appendix C. Notices
This information was developed for products and services offered in the U.S.A.
IBM may not offer the products, services, or features discussed in this document in other countries.
Consult your local IBM representative for information on the products and services currently available in
your area. Any reference to an IBM product, program, or service is not intended to state or imply that
only that IBM product, program, or service may be used. Any functionally equivalent product, program, or
service that does not infringe any IBM intellectual property right may be used instead. However, it is the
user's responsibility to evaluate and verify the operation of any non-IBM product, program, or service.
IBM may have patents or pending patent applications covering subject matter described in this
document. The furnishing of this document does not grant you any license to these patents. You can
send license inquiries, in writing, to:
IBM Director of Licensing
IBM Corporation
North Castle Drive
Armonk, NY 10504-1785
U.S.A.
For license inquiries regarding double-byte (DBCS) information, contact the IBM Intellectual Property
Department in your country or send inquiries, in writing, to:
IBM World Trade Asia Corporation
Licensing
2-31 Roppongi 3-chome, Minato-ku
Tokyo 106-0032, Japan
The following paragraph does not apply to the United Kingdom or any other country where such
provisions are inconsistent with local law: INTERNATIONAL BUSINESS MACHINES
CORPORATION PROVIDES THIS PUBLICATION "AS IS" WITHOUT WARRANTY OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
OF NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Some
states do not allow disclaimer of express or implied warranties in certain transactions, therefore, this
statement may not apply to you.
This information could include technical inaccuracies or typographical errors. Changes are periodically
made to the information herein; these changes will be incorporated in new editions of the publication.
IBM may make improvements and/or changes in the product(s) and/or the program(s) described in this
publication at any time without notice.
Any references in this information to non-IBM Web sites are provided for convenience only and do not in
any manner serve as an endorsement of those Web sites. The materials at those Web sites are not part
of the materials for this IBM product and use of those Web sites is at your own risk.
IBM may use or distribute any of the information you supply in any way it believes appropriate without
incurring any obligation to you.
Any performance data contained herein was determined in a controlled environment. Therefore, the
results obtained in other operating environments may vary significantly. Some measurements may have

Appendix

Page 55

IBM Software

been made on development-level systems and there is no guarantee that these measurements will be
the same on generally available systems. Furthermore, some measurements may have been estimated
through extrapolation. Actual results may vary. Users of this document should verify the applicable data
for their specific environment.
Information concerning non-IBM products was obtained from the suppliers of those products, their
published announcements or other publicly available sources. IBM has not tested those products and
cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM
products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of
those products.
All statements regarding IBM's future direction and intent are subject to change or withdrawal without
notice, and represent goals and objectives only.
This information contains examples of data and reports used in daily business operations. To illustrate
them as completely as possible, the examples include the names of individuals, companies, brands, and
products. All of these names are fictitious and any similarity to the names and addresses used by an
actual business enterprise is entirely coincidental. All references to fictitious companies or individuals are
used for illustration purposes only.
COPYRIGHT LICENSE:
This information contains sample application programs in source language, which illustrate programming
techniques on various operating platforms. You may copy, modify, and distribute these sample programs
in any form without payment to IBM, for the purposes of developing, using, marketing or distributing
application programs conforming to the application programming interface for the operating platform for
which the sample programs are written. These examples have not been thoroughly tested under all
conditions. IBM, therefore, cannot guarantee or imply reliability, serviceability, or function of these
programs.

Page 56

MobileFirst Platform 7.0 Proof of Technology Intro Lab

IBM Software

Appendix D. Trademarks and copyrights

The following terms are trademarks of International Business Machines Corporation in the United States,
other countries, or both:
IBM

AIX

CICS

ClearCase

ClearQuest

Cloudscape

Cube Views

DB2

developerWorks

DRDA

IMS

IMS/ESA

Informix

Lotus

Lotus Workflow

MQSeries

OmniFind

Rational

Redbooks

Red Brick

RequisitePro

System i

System z

Tivoli

WebSphere

Workplace

System p

Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or
trademarks of Adobe Systems Incorporated in the United States, and/or other countries.
IT Infrastructure Library is a registered trademark of the Central Computer and Telecommunications
Agency which is now part of the Office of Government Commerce.
Intel, Intel logo, Intel Inside, Intel Inside logo, Intel Centrino, Intel Centrino logo, Celeron, Intel Xeon, Intel
SpeedStep, Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its
subsidiaries in the United States and other countries.
Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both.
Microsoft, Windows, Windows NT, and the Windows logo are trademarks of Microsoft Corporation in the
United States, other countries, or both.
ITIL is a registered trademark, and a registered community trademark of The Minister for the Cabinet
Office, and is registered in the U.S. Patent and Trademark Office.
UNIX is a registered trademark of The Open Group in the United States and other countries.
Java and all Java-based trademarks and logos are trademarks or registered trademarks of Oracle and/or
its affiliates.
Cell Broadband Engine is a trademark of Sony Computer Entertainment, Inc. in the United States, other
countries, or both and is used under license therefrom.
Linear Tape-Open, LTO, the LTO Logo, Ultrium, and the Ultrium logo are trademarks of HP, IBM Corp.
and Quantum in the U.S. and other countries.

Appendix

Page 57

NOTES

NOTES

 Copyright IBM Corporation 2015.

The information contained in these materials is provided for
informational purposes only, and is provided AS IS without warranty
of any kind, express or implied. IBM shall not be responsible for any
damages arising out of the use of, or otherwise related to, these
materials. Nothing contained in these materials is intended to, nor
shall have the effect of, creating any warranties or representations
from IBM or its suppliers or licensors, or altering the terms and
conditions of the applicable license agreement governing the use of
IBM software. References in these materials to IBM products,
programs, or services do not imply that they will be available in all
countries in which IBM operates. This information is based on
current IBM product plans and strategy, which are subject to change
by IBM without notice. Product release dates and/or capabilities
referenced in these materials may change at any time at IBMs sole
discretion based on market opportunities or other factors, and are not
intended to be a commitment to future product or feature availability
in any way.
IBM, the IBM logo and ibm.com are trademarks of International
Business Machines Corp., registered in many jurisdictions
worldwide. Other product and service names might be trademarks of
IBM or other companies. A current list of IBM trademarks is
available on the Web at Copyright and trademark information at
www.ibm.com/legal/copytrade.shtml.