Note: This pattern is part of a composite pattern. These are code patterns that can be stand-alone applications or might be a continuation of another code pattern. This composite pattern consists of:
- Develop a hybrid mobile app with a cloud-native back end
- Implementing mobile user authentication
- Secure mobile offline synchronization (this pattern)
- Add push notifications to your hybrid mobile apps
Learn how to develop secure offline-first mobile apps with encrypted and automated data synchronization. In this code pattern, learn how to implement secure offline synchronization in hybrid mobile apps by using JSONStore from IBM Mobile Foundation, the Ionic framework, IBM Cloudant, and IBM Cloud Object Store. You learn about implementing offline user authentication in mobile apps, storing data securely (with encryption) on the mobile device, and automatically synchronizing downstream and upstream data and images.
To ensure that your enterprise mobile apps work seamlessly in both offline and online modes, you need to use encrypted on-device storage and automate data synchronization with the backend databases.
While you can achieve automatic data synchronization with CouchDB or Cloudant No SQL DB databases (because they implement the CouchDB Replication Protocol), JSONStore collections in IBM Mobile Foundation provides a powerful alternative for achieving offline sync in both hybrid and Android native or iOS native apps.
JSONStore provides persistent storage of JSON documents encrypted using AES 256-bit encryption, and automated data synchronization with CouchDB or Cloudant databases. In addition, the robust synchronization architecture of JSONStore allows you to extend synchronization to traditional systems of record such as RDBMS or ERP backends.
When you have completed this code pattern, you will understand:
- How to achieve offline user authentication in mobile apps using JSONStore.
- How to store data securely on the device using encrypted JSONStore.
- How to achieve downstream and upstream synchronization of data between a Cloudant database and the device using the automated data synchronization feature of JSONStore.
- How to achieve downstream and upstream synchronization of images between Cloud Object Storage and the device using imgCache.js and Cordova File API.
- When there is network connectivity, user launches and logs in to the mobile app.
- The mobile app sends the user credentials to Mobile Foundation server for validation. Mobile Foundation server validates the user credentials and returns an appropriate response to the mobile app.
- If user authentication succeeds, mobile app initializes JSONStore collection with the current user credentials
- The mobile app initiates data synchronization with the Cloudant database by way of the Mobile foundation adapter.
- The Mobile Foundation sync adapter makes REST calls to the Cloudant database and returns synchronization data to the mobile app. The data that is fetched from the Cloudant database will have references to the images, which are stored on Cloud Object Storage.
- Mobile app makes a call to Mobile Foundation adapter, which makes a call to Cloud Object Storage, to get the authorization token. This token will be used by the Mobile app to access the Cloud Object Storage.
- The mobile app fetches the images using the image-caching plugin.
- On the mobile app, the synchronized data (from Cloudant) and images (from Cloud Object Storage) are downloaded and available for the user to interact with. User can view the detail page consisting of image and geo-location marked inside Google Maps.
- After the user views and updates the data in the mobile app, the mobile app stores the new data in the JSONStore collection, which automatically synchronizes the data to the Cloudant database and the images to the Cloud Object Storage by way of the Mobile Foundation adapter.
Other users who click on refresh button on the home page (and those who log in anew) are shown the updated list of problem reports.
The device must have been previously online, and user authentication must have previously succeeded, such that the JSONStore password was set.
- When the device is offline, the user launches and logs in to the mobile app.
- If the correct password is entered, the mobile app initializes the JSONStore collection with the credentials.
- If user authentication succeeds (that is, JSONStore initializes successfully), the mobile app reads data from the previously synchronized JSONStore collection and shows the list of items on the Home page.
- The user can view the detail pages for the items in the list. If the detail page was previously viewed when the device was online, the image has been cached and is viewable offline. The Cordova plugin for Google Maps ensures that the map view works in offline mode.
- The user can report new civic problems, and capture images and geo location information.
- The mobile app stores the new data in the JSONStore collection and the image and its thumbnail on local file storage on the mobile device.
- At at later time, when the device comes online, the mobile app automatically initiates the synchronization of JSONStore collection with the Cloudant database by making a call to MFP sync adapter, which posts the new data to the Cloudant database.
- The mobile app fetches the authorization token for interacting with the Cloud Object Storage service by making a call to MFP adapter, and then uploads the new images to Cloud Object Storage.
Other users who click on refresh button on the home page (and those who log in anew) can see the newly reported civic problem and its details.
Find the detailed steps for this pattern in the README. Those steps will show you how to:
- Setup Ionic and MFP CLI.
- Create the Cloudant database and populate it with sample data.
- Create IBM Cloud Object Storage service and populate it with sample data.
- Create Mobile Foundation service and configure MFP CLI.
- Download the source repo and customize it.
- Deploy the MFP adapters and test them.
- Run the application on an Android phone.
- Test the app functionality in offline mode.