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.
- 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
sendAPI is invoked to send across the analytics data collected upto that point.
- 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.
- Mobile: Systems of engagement are increasingly using mobile technology as the platform for delivery.
-
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
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
$ git clone https://github.com/IBM/hybrid-analytics-mfp.git
$ cd hybrid-analytics-mfp
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="username@gmail.com" href="https://developer.ibm.com/code/author/shivahr/">Username</author>
...
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
keyandpasswordwith 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 ofmywardas-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>
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
bucketNameas created in Step 3.1. - Specify
serviceIdandapiKeycreated in Step 3.2. - While creating the bucket in Step 3.1, if you selected a different Location/Resiliency, then update the
endpointURLas 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>
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
Launch MobileFoundation Dashboard as below:
- In the IBM Cloud dashboard, under
Cloud Foundry Services, click on theMobile Foundationservice 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/mfpconsoleto the url mentioned in Step 4. - Inside the MobileFoundation dashboard, in the list on the left, you will see the
UserLoginandMyWardDataadapters listed.
Verify MobileFoundation Adapter configuration as below:
- Inside the MobileFoundation dashboard, click on the
MyWardDataadapter. UnderConfigurationstab, 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.xmlas 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
Resourcestab. You should see the various REST APIs exposed byMyWardDataadapter as shown below. TheSecuritycolumn should show the protecting scopeUserLoginagainst each REST method.
Follow the instructions in Step 7 of base project to run the application on Android phone.
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 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 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.
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.
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
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
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
Please see instructions for debugging Android hybrid app using Chrome Developer Tools or troubleshooting guide for solutions to some commonly occuring problems.