IBM MobileFirst Platform v7.0 Pot Intro v0.1

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

Contents Page 3

Table of Contents

INTRO LAB -‐ GETTING STARTED WITH IBM MOBILEFIRST PLATFORM 4

1 WORKING WITH VMWARE BASICS 5

2 UNDERSTANDING MOBILEFIRST PLATFORM STUDIO 6

3 LAB STEPS 8 3.1 START MOBILEFIRST PLATFORM STUDIO 8 3.2 IBM BANK APPLICATION – APP ARCHITECTURE AND ENVIRONMENTS 9 3.2.1 ADD ANDROID ENVIRONMENT AND INSPECT APPLICATION STRUCTURE 10 3.3 IBM BANK APPLICATION – USER INTERFACE 13 3.3.1 HTML STRUCTURE 13 3.3.2 JQUERY MOBILE FLAT UI THEME 15 3.3.3 DISPLAYING ACCOUNTS LIST 16 3.4 IBM BANK APPLICATION – ADAPTERS 20 3.4.1 THE ADAPTER FRAMEWORK 20 3.4.2 ANATOMY OF ADAPTERS 20 3.4.3 INVOKING ADAPTER 24 3.5 BUILDING AND RUNNING THE IBM BANK ANDROID APPLICATION 27 3.5.1 PREVIEW IBMBANKAPP IN MOBILE BROWSER SIMULATOR (MBS) 27 3.5.2 PREVIEW IBMBANK ON AN ANDROID DEVICE OR VIRTUAL DEVICE 32 3.5.3 INTRODUCTION TO THE MOBILEFIRST PLATFORM CONSOLE 36 3.5.4 INTRODUCTION TO OPERATIONAL ANALYTICS 44 3.5.5 ADD AN ADAPTER INVOCATION 46 3.6 CLEAN UP 52 3.7 SUMMARY 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

IBM Software

Page 4 MobileFirst Platform 7.0 Proof of Technology – Intro Lab

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.

IBM Software

Page 5

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

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

IBM Software

Page 7

• 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

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.

IBM Software

Page 9

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

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.

IBM Software

Page 11

___ 3. Let’s 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.

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.

IBM Software

Page 13

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

Let’s 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.

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 don’t 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

IBM Software

Page 15

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.

IBM Software


Let’s examine mainPage by switching to that page in Source tab. Scroll the page until you find the  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.

IBM Software

Page 17

Let’s 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.

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.

IBM Software

Page 19

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 account’s 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.

IBM Software


3.4 IBM Bank Application – Adapters

In the previous section, we mentioned an example of adapter invocation within the doGetAccounts() function. Let’s 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.

IBM Software

Page 21

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

Let’s examine the AccountAdapter folder under the adapters folder. First, let’s 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.

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.

IBM Software

Page 23

Now, let’s 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.

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.

IBM Software

Page 25

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

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.

IBM Software

Page 27

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.

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.

IBM Software

Page 29

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.

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.

IBM Software

Page 31

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

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.

IBM Software

Page 33

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.

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.

IBM Software

Page 35

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

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.

IBM Software

Page 37

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

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.

IBM Software

Page 39

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

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.

IBM Software

Page 41

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

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.

IBM Software

Page 43

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

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.

IBM Software

Page 45

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

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,

IBM Software

Page 47

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

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 re-launch the app.

IBM Software

Page 49

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

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.

IBM Software

Page 51

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

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.

IBM Software

MobileFirst Platform 7.0 Proof of Technology – Intro Lab Page 53

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.

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.

IBM Software

Appendix Page 55

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

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.

IBM Software

Appendix Page 57

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.

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 IBM’s 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.

Education

IBM MobileFirst Platform v7.0 Pot Intro v0.1