Name: MFP-JSONStore-OfflineSync
Owner: International Business Machines
Description: null
Created: 2017-12-01 20:51:54.0
Updated: 2018-05-24 14:02:47.0
Pushed: 2018-05-24 14:02:46.0
Homepage: null
Size: 2880
Language: TypeScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
The increasing focus on Digital Transformation has led to more and more use cases where organizations want their enterprise apps to be usable even when the device is offline, and later synchronize the data with the enterprise when the device comes online again. In addition, organizations want to leverage the benefits of:
In this IBM code pattern, we will show you how to combine the following technologies to securely implement the mobile offline synchronization use case.
When you have completed this code pattern, you will understand:
Login.Authorization=<value returned from MFP adapter> while fetching images.Home page. The image caching plugin running on the mobile app downloads and caches images from Cloud Object Storage.+ button to report a new civic problem. A new page is shown where user can enter a description for the new civic problem as well as capture image and geo-location of the problem spot. User clicks on Submit button.
Login.Home page.+ button to report a new civic problem. A new page is shown where user can enter a description for the new civic problem as well as capture image and geo-location of the problem spot. User clicks on Submit button.Home page, user can see the new problem listed.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.
t clone https://github.com/IBM/MFP-JSONStore-OfflineSync.git
MFP-JSONStore-OfflineSync
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="shivahr@gmail.com" href="https://developer.ibm.com/code/author/shivahr/">Shiva Kumar H R</author>
...
Open MobileFoundationAdapters/JSONStoreCloudantSync/src/main/adapter-resources/adapter.xml and update the following properties to point to the Cloudant database created in Step 2.
key and password with the Cloudant API key as generated in Step 2.2.account, specify the Cloudant Dashboard URL portion after (and excluding) https:// and upto (and including) -bluemix.cloudant.com as shown in the snapshot of Step 2.2.DBName, leave the default value of myward as-is.protocol, leave the default value of https as-is.port, leave the default value of 443 as-is.createDatabaseIfItDoesNotExist, leave the default value of false as-is.
<mfp:adapter name="JSONStoreCloudantSync" ...>
<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"/>
<property name="protocol" displayName="DB protocol" defaultValue="https" />
<property name="port" displayName="Db port" defaultValue="443" />
<property name="createDatabaseIfItDoesNotExist" displayName="Create database if it does not exist?" defaultValue="false" />
...
</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.
bucketName as created in Step 3.1.serviceId and apiKey created in Step 3.2.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>
Build and deploy UserLogin Adapter as below.
MobileFoundationAdapters/
UserLogin
pdev adapter build
pdev adapter deploy
Note: In Step 4, if you specified No to Make this server the default?, then you need to specify the name of your server profile (Cloud-MFP in our case) at the end of mfpdev adapter deploy command as shown below.
pdev adapter deploy Cloud-MFP
Build and deploy MyWardData adapter as below.
../MyWardData/
pdev adapter build
pdev adapter deploy
Build and deploy JSONStoreCloudantSync adapter as below.
../JSONStoreCloudantSync/
pdev adapter build
pdev adapter deploy
Launch MFP Dashboard as below:
Cloud Foundry Services, click on the Mobile 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 MFP dashboard in a separate browser tab by appending /mfpconsole to the url mentioned in Step 4.JSONStoreCloudantSync, UserLogin and MyWardData adapters listed.Verify MFP Adapter configuration as below:
Inside the MFP dashboard, click on the JSONStoreCloudantSync adapter. Under Configurations tab, you should see the various properties we specified in Step 5.3 for accessing Cloudant database as shown below. As an alternative to specifying those property values in MobileFoundationAdapters/JSONStoreCloudantSync/src/main/adapter-resources/adapter.xml as previously shown in Step 5.3, you can deploy the adapters with empty defaultValue, and once the adapter is deployed, change the values on this page.
Click on Resources tab. You should see the various REST APIs exposed by JSONStoreCloudantSync adapter as shown below. The Security column should show the protecting scope UserLogin against each REST method.
Create temporary credentials to test adapter REST API as below:
Inside the MFP dashboard, click on Runtime Settings. Click on Confidential Clients. Then click on New.
In the form that pops up, specify values for ID and Secret as shown in snapshot below. For Allowed Scope enter ** and click on Add. Finally click on Save.
Test adapter REST API as below:
Inside the MFP dashboard, click on the JSONStoreCloudantSync adapter. Click on Resources and then click on View Swagger Docs. The Swagger UI for adapter REST APIs will get shown in a new window/tab.
Inside the Swagger UI, click on Expand Operations.
To test the POST /getAllModifications API, first click on OFF toggle button to enable authentication. Select UserLogin and click on Authorize as shown below. Enter the ID and Secret created above against Username and Password. Click OK. If authentication is successful, the toggle button will switch to ON position.
Specify the following JSON object under POST body:
": "string",
v": "string",
n": "{\"SeqID\": 0,\"DBName\": \"myward\"}"
Finally click on Try it out button to run the POST /getAllModifications API. The API response should get shown in the Response Body as shown in snapshot below.
Delete the temporary credentials after testing adapter REST API as below:
Runtime Settings. Click on Confidential Clients.Client ID created previously.Follow the instructions in Step 7 of base project to run the application on Android phone.
A note on how the offline mode is supported for each of the pages* in MyWard app: (*Ionic page is the equivalent of iOS View or Android Activity)
Login page:
The first time the app is launched after installation, the user login will work only in online mode. This is to make sure that the user credentials are validated by making a call to MFP security adapter. Once the user authentication succeeds, subsequent login attempts by the same user are supported in offline mode with the help of encrypted JSONStore.
Home page: (downstream sync)
JSONStore for storing/syncing data with Cloudant.
imgcache.js for caching the image thumbnails loaded from Cloud Object Storage.
Problem Detail page: (downstream sync)
Grievances for which the details are already seen in online mode:
JSONStore for storing/syncing data with Cloudant.
imgcache.js for caching the image loaded from Cloud Object Storage.
Cordova plugin for Google Maps to make sure that the map view works even in offline mode.
Report New Problem page: (upstream sync)
Data to be uploaded to Cloudant is stored in JSONStore which later syncs it with Cloudant when device comes online.
Image and its thumbnail are stored on local storage, and are later uploaded to Cloud Object Storage when devices comes online.
Note: In the current implementation, images and its thumbnails are stored as-is on the local file storage at cordova.file.dataDirectory which is private to the application. If you have a more stringent compliance requirement of having to encrypt the images stored locally on the phone, then follow the recommendations on this page.
Test and password Test. (Note: We have used a simple MFP security adapter that returns success when password equals username.)Home page displays list of grievances along with image thumbnails.Problem Detail page, make sure that the image and Google Maps location are displayed.Home page, click on the + icon to report a new grievance. Add description, take photo, grab geolocation and finally submit. Make sure that the new grievance is successfully submitted to server.Mobile data and Wi-Fi.MyWard app.Home page displays list of grievances along with image thumbnails.Home page, click on the + icon to report a new grievance. Add description, take photo, grab gelocation and finally submit. Make sure that the new grievance report is successfully accepted even in offline mode.Home page, the newly reported problem should get listed at the end along with its thumbnail. Upon clicking it, the Problem Detail page should show image.Mobile data or Wi-Fi.Please see instructions for debugging Android hybrid app using Chrome Developer Tools or troubleshooting guide for solutions to some commonly occuring problems.