Gain actionable insights into Hybrid Apps using Mobile Foundation Analytics
The IBM® Mobile Foundation Analytics service provides key application usage and performance insights for mobile application developers and application owners. By using Mobile Analytics application owners and developers can understand what is happening on the user side, and they can use this insight to build better applications that are hyper-relevant to users and that stand out in the veritable sea of mobile applications.
The service includes the Mobile Analytics Console where developers and application owners can monitor mobile application performance, see usage statistics, and search device logs. Mobile Analytics enables you to,
• Monitor performance and usage of all your applications from your desktop or tablet.
• Quickly identify trends and anomalies, drill down to resolve issues, and trigger alerts when key metrics cross critical thresholds.
In this code pattern, we will see how to monitor the performance and customer usage patterns of the ‘MyWard’ application. Also we will see how to setup and trigger alerts for application crashes.
Flow
- User launches the mobile app, enters his/her credentials on the login screen and clicks
Login
. - Mobile app sends the user credentials to MFP server for validation.
- MFP server invokes the security adapter logic to validate user credentials and returns an appropriate response to the mobile app. For the sake of this demo, we will use a simple security adapter that returns success when password equals username.
- If user authentication succeeds, the username is sent as custom analytics data to the Mobile Foundation server and the mobile app proceeds to show the home page. As part of this, it makes a call to MFP adapter to fetch the data from Cloudant NoSQL database.
- MobileFoundation adapter fetches the data from Cloudant and returns it to the mobile app. The data fetched from Cloudant will have references to the images stored in Cloud Object Storage.
- The data fetched from Cloudant will have references to the images stored in Cloud Object Storage. The mobile app makes a call to the Mobile Foundation adapter to get the Authorization token for interacting with Cloud Object Storage service. The Mobile Foundation adapter makes a call to the Cloud Object Storage service’s token manager endpoint to get the Authorization token and returns it to the mobile app.
- The mobile app initializes image-caching plugin and fetches the images from Object Storage.
- The mobile app displays the data obtained from the Mobile Foundation adapter as a list of items. 9. User clicks on one of the list item to see more details. A detail page is shown consisting of image and geo-location marked inside Google Maps.
- On every page load Mobile Foundation Analytics
send
API is invoked to send across the analytics data collected upto that point.
Included Components
- Cloudant NoSQL DB: A fully managed data layer designed for modern web and mobile applications that leverages a flexible JSON schema.
- Cloud Object Storage: A highly scalable cloud storage service, designed for high durability, resiliency and security.
- Mobile Foundation: A scalable mobile access gateway powered by the market-leading IBM Mobile Foundation Technology. The service offers a comprehensive set of mobile backend capabilities such as, App life cycle, Push, Analytics, Feature Toggle, Security and Authentication and offline synch.
Featured Technologies
- Mobile: Systems of engagement are increasingly using mobile technology as the platform for delivery.
Watch the Video
Steps
-
2. Create Cloudant database and populate it with sample data
-
3. Create IBM Cloud Object Storage service and populate it with sample data
-
8. Out of the box charts in MobileFoundation Analytics dashboard
Prerequisite steps
This project builds on top of https://github.com/IBM/Ionic-MFP-App. Run following steps from that base project to provision the needed mobile backend services from IBM Cloud and populate them with sample data, as well as to setup Ionic and MFP CLI on your development machine.
- Step 1. Setup Ionic and MFP CLI
- Step 2. Create Cloudant database and populate it with sample data
- Step 3. Create IBM Cloud Object Storage service and populate it with sample data
- Step 4. Create Mobile Foundation service and configure MFP CLI
Step 5. Download source repo and customize
5.1 Clone repo
$ git clone https://github.com/IBM/hybrid-analytics-mfp.git
$ cd hybrid-analytics-mfp
5.2 Update App ID, Name and Description
Update IonicMobileApp/config.xml
as below. Change id
, name
, description
and author
details appropriately.
<?xml version='1.0' encoding='utf-8'?>
<widget id="org.mycity.myward" version="2.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:mfp="http://www.ibm.com/mobilefirst/cordova-plugin-mfp">
<name>MyWard</name>
<description>Get your civic issues resolved by posting through this app.</description>
<author email="[email protected]" href="https://developer.ibm.com/code/author/shivahr/">Username</author>
...
5.3 Specify Cloudant credentials in MobileFoundation adapter
Open MobileFoundationAdapters/MyWardData/src/main/adapter-resources/adapter.xml
and update the following properties to point to the Cloudant database created in Step 2.
- Update
key
andpassword
with the Cloudant API key as generated in Step 2.2. - For property
account
, specify the Cloudant Dashboard URL portion upto (and including) -bluemix.cloudant.com as shown in the snapshot of Step 2.2. - For property
DBName
, leave the default value ofmyward
as-is.
<mfp:adapter name="MyWardData" ...>
<property name="account" displayName="Cloudant account" defaultValue=""/>
<property name="key" displayName="Cloudant key" defaultValue=""/>
<property name="password" displayName="Cloudant password" defaultValue=""/>
<property name="DBName" displayName="Cloudant DB name" defaultValue="myward"/>
...
</mfp:adapter>
5.4 Specify Cloud Object Storage credentials in MobileFoundation Adapter
Open MobileFoundationAdapters/MyWardData/src/main/adapter-resources/adapter.xml
and update the following properties to point to the Cloud Object Storage created in Step 3.
- Specify value for
bucketName
as created in Step 3.1. - Specify
serviceId
andapiKey
created in Step 3.2. - While creating the bucket in Step 3.1, if you selected a different Location/Resiliency, then update the
endpointURL
as per the specification in https://console.bluemix.net/docs/services/cloud-object-storage/basics/endpoints.html#select-regions-and-endpoints.
<mfp:adapter name="MyWardData" ...>
...
<property name="endpointURL" displayName="Cloud Object Storage Endpoint Public URL" defaultValue="https://s3-api.us-geo.objectstorage.softlayer.net"/>
<property name="bucketName" displayName="Cloud Object Storage Bucket Name" defaultValue=""/>
<property name="serviceId" displayName="Cloud Object Storage Service ID" defaultValue="" />
<property name="apiKey" displayName="Cloud Object Storage API Key" defaultValue=""/>
</mfp:adapter>
Step 6. Deploy the MobileFoundation Adapters
6.1 Build and Deploy the MobileFoundation adapters
Build and deploy MyWardData
Adapter as below.
$ cd MobileFoundationAdapters/
$ cd MyWardData
$ mfpdev adapter build
$ mfpdev adapter deploy
Note- If the server is not a default one, please mention the server name that you have added using command mfpdev server add
in the command 'mfpdev adapter deploy <servername>'
$ cd ../UserLogin
$ mfpdev adapter build
$ mfpdev adapter deploy
6.2 Launch MobileFoundation dashboard and verify adapter configurations
Launch MobileFoundation Dashboard as below:
- In the IBM Cloud dashboard, under
Cloud Foundry Services
, click on theMobile Foundation
service you created in Step 4. The service overview page that gets shown, will have the MFP dashboard embedded within it. You can also open the MobileFoundation dashboard in a separate browser tab by appending/mfpconsole
to the url mentioned in Step 4. - Inside the MobileFoundation dashboard, in the list on the left, you will see the
UserLogin
andMyWardData
adapters listed.
Verify MobileFoundation Adapter configuration as below:
- Inside the MobileFoundation dashboard, click on the
MyWardData
adapter. UnderConfigurations
tab, you should see the various properties we specified in Step 5.3 and Step 5.4 for accessing Cloudant database and Cloud Object Storage as shown below. As an alternative to specifying those property values inMobileFoundationAdapters/MyWardData/src/main/adapter-resources/adapter.xml
as previously shown in Step 5.3 and Step 5.4, you can deploy the adapters with emptydefaultValue
, and once the adapter is deployed, change the values on this page.
- Click on
Resources
tab. You should see the various REST APIs exposed byMyWardData
adapter as shown below. TheSecurity
column should show the protecting scopeUserLogin
against each REST method.
Step 7. Run application on Android phone
Follow the instructions in Step 7 of base project to run the application on Android phone.
Step 8. Out of the box charts in MobileFoundation Analytics dashboard
MobileFoundation Analytics comes with a set of out of the box charts that will help to monitor the usage and the performance of the applications deployed on MobileFoundation server. Click open the 'Analytics console' tab in the MobileFoundation dashboard. Authentication may be required. The home screen of the Analytics console will look as the image below
On the left of the console, the out of the box charts are listed, for example, Users
, Sessions
,Network Requests
,Crashes
,User Feedback
, and TroubleShooting
.
Run the 'MyWard' application a few times to see the out of the box charts. Please set the Demo mode
to off in the Analytics console. Please set the appropriate time frame (when the application was run a few times) for the charts to show up. We have listed few of the charts below
Users
Sessions
Network Requests
User Feedback
Users and Testers can record and send feedback and bug reports 'In-app', as they run and use the application. App owners get a deeper sense of the application's user experience with this context rich user feedback. Developers on the other hand receive accurate application contexts to diagnose and fix bugs / feature deficiencies.
To enable the in app feedback, invoke the Analytics.triggerFeedbackMode() API on a button click or menu options or gestures. In 'MyWard' application on the home page, there is a feedback button, on click of which the InApp feedback feature is invoked as shown below.
Use the markers in the feedback window to mark where the issue is observed on the app screen and add a comment before sending the feedback to the server.
In the analytics console, the Feedback submitted is listed as shown below (The username comes in as unknown here because setUserContext API as of now is not supported for Cordova applications, but available for Android and iOS applications)
Click open the feedback to see the details submitted
TroubleShooting
Troubleshooting tab lists the 'Crash Summary' and the 'Crash details' as shown below. It also gives you facility to download the crash logs which has been collected remotely. This helps in finding the root cause of the crash.
Step 9. Custom charts in MobileFoundation Analytics dashboard
In the 'MyWard' application, custom analytics data is sent to the MobileFoundation server using analytics APIs. This data is in key, value format. For example,
WL.Analytics.log({'username': username});
Such custom data (the keys) are available in the drop down menus when defining the custom charts. There are different types of charts that can then be chosen and configured to plot the custome data. A few of the custom charts of 'MyWard' application are listed below.
Table chart
Tablechart is used to capture the username
custom data and the corresponding device usage and the device os version.
Click on the 'Create Chart' option under the 'Custom charts' tab.
Define the table chart as shown below
Save the chart and adjust the time frame to see the information listed similar to what is shown below
Flow chart
Page Transition
is one of the flow charts that can be used to identify the pattern in which the application users browse through the app pages.
MyWard
application sends custom data on page transition, for example,
WL.Analytics.log({'fromPage':'HomePage','toPage':'ProblemDetailPage'});
fromPage
and toPage
are the key values to be used in the custom chart configuration.
Click on the 'Create chart' option under the 'Custom charts' tab. Define the Flow chart as below
Save the chart and adjust the time frame to see the information listed similar to what is shown below
Pie chart
To know the spread of types of device models used by customers the pie custom chart can be used. Click on the 'Create chart' option under the 'Custom charts' tab. Define the Flow chart as below
Save the chart and adjust the time frame to see the information listed similar to what is shown below
Troubleshooting
Please see instructions for debugging Android hybrid app using Chrome Developer Tools or troubleshooting guide for solutions to some commonly occuring problems.
References
- Speeding up development of your enterprise mobile apps using open source technologies and cloud services
- MobileFirst Foundation 8.0 Developer Labs
- MobileFoundation Analytics InApp Feedback