Professional Documents
Culture Documents
Intro Lab
Introduction to IBM MobileFirst
Platform hybrid applications
Lab Exercise
IBM Software
Table
of
Contents
INTRO
LAB
-
GETTING
STARTED
WITH
IBM
MOBILEFIRST
PLATFORM
3 LAB STEPS
8
9
10
13
13
15
16
20
20
20
24
27
27
32
36
44
46
52
52
55
57
Contents
Page 3
IBM Software
Page 4
IBM Software
Page 5
IBM Software
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.
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:
Page 6
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
Use Preview feature to preview and test application in the Mobile Browser Simulator
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.
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
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.
Page 9
IBM Software
___ 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
IBM Software
___ 3.
Lets examine the IBMBankProject project structure. The diagram below describes what
portions of the artifacts are for.
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
Page 12
IBM Software
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
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.
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.
Page 16
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.
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
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
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
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
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
___ 2.
To test the AccountAdapter, right click again on IBMBankProject > Adapters >
AccountAdapter and this time select, Run As > Call MobileFirst Adapter.
Page 24
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
IBM Software
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.
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
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
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
Page 32
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.
___ 2.
Right click on the IBMBankProjectIBMBankAppAndroid project in the project explorer
and select Run As > Android Application.
Page 33
IBM Software
___ 3.
___ 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
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.
Page 36
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.
___ 4.
___ 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
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
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.
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
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.
Page 43
IBM Software
___ 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
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
___ 2.
Review the source code in accounts.js. The My Accounts page is rendered using data
from the AccountAdapter,
Page 46
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.
___ 6.
Return to the Mobile Browser Simulator and click the Go/Refresh button to Reload or relaunch the app.
Page 48
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.
___ 9.
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
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.
___ 14.
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
IBM Software
___ 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.
Page 53
IBM Software
___ 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
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
IBM Software
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