Taxonomy Icon

Mobile Development

Develop a hybrid mobile app with a cloud-native back end

Get the code View the demo

Summary

When developing enterprise mobile apps that you and your organization foresee as solving important business problems for your customers/employees, the time to market is critical. You want to develop the apps as quickly as possible and get them into production. At the same time, you want the make sure that your organization’s data, APIs, and mobile apps are secure, and that the mobile back end can seamlessly scale to a large number of mobile users.

In this developer code pattern, we show you how to leverage open source technologies, such as Apache Cordova and the Ionic Framework, and cloud services such as Cloudant, IBM Cloud Object Storage, and IBM Mobile Foundation, to quickly develop and host secure, scalable enterprise mobile apps.

Description

When developing your enterprise mobile app that needs centralized hosting of data, use of cloud-native services – such as Cloudant NoSQL database for storing textual data and IBM Cloud Object Storage for storing image/video/audio data – allows you to quickly go from idea-conception to reality. The IBM Mobile Foundation service provides a scalable mobile access gateway for securely accessing those back-end services, and it provides other essential mobile back-end capabilities such as push notifications, app lifecycle management, and app analytics.

When you have completed this pattern, you will understand:

  • How to authenticate users (through pre-emptive login) using IBM Mobile Foundation security adapter.
  • How to write an IBM Mobile Foundation adapter that authenticates with the IBM Cloud Object Storage service and pass the authorization token to the mobile app.
  • The recommended architectural patterns for coding the interaction between mobile app and the IBM Cloud Object Storage service.
  • How to use imgcache.js in Ionic app for caching images fetched from the IBM Cloud Object Storage service.
  • How to show Google Maps in Ionic app as well as capture user’s geo-location and image from camera.
  • How to upload the captured image from mobile app to IBM Cloud Object Storage.
  • How to fetch data from Cloudant to mobile app via IBM Mobile Foundation adapter, as well as post new data to Cloudant.
  • How to customize the Ionic app logo and splash, and build the release APK for uploading to public/private app stores.

Flow

flow

  1. User launches mobile app, enters his/her credentials on the login screen and clicks Login.
  2. Mobile app sends user credentials to Mobile Foundation server for validation.
  3. Mobile Foundation server invokes security adapter logic to validate user credentials and returns an appropriate response to the mobile app. Here, we use a simple security adapter that returns success when password equals username.
  4. If user authentication succeeds, mobile app shows home page. As part of this, it makes a call to Mobile Foundation adapter to fetch the data from Cloudant NoSQL database.
  5. Mobile Foundation adapter fetches data from Cloudant and returns it to the mobile app. The data fetched will have references to images stored in IBM Cloud Object Storage.
  6. Mobile app makes call to Mobile Foundation adapter to get the authorization token for interacting with Cloud Object Storage.
  7. Mobile Foundation adapter makes a call to the Cloud Object Storage token manager endpoint to get the authorization token and returns it to the mobile app.
  8. Mobile app initializes image-caching plugin and asks it to use an HTTP header of “Authorization=the value returned from Mobile Foundation adapter” while fetching images. Mobile app displays the data obtained from Mobile Foundation adapter as a list of items. The image-caching plugin running on the mobile app downloads and caches images from IBM Cloud Object Storage.
  9. User clicks on a list item to see more details. A detail page is shown, consisting of image and geo-location marked inside Google Maps.
  10. On the home page, user clicks the + button to report a new civic problem. A new page is shown, where the user can enter a description for the new civic problem as well as capture image and geo-location of the problem spot. User clicks Submit.
  11. Mobile app uploads textual data to Cloudant NoSQL database via Mobile Foundation adapter.
  12. Mobile app creates thumbnail image by resizing captured image and uploads both the captured image and thumbnail to the IBM Cloud Object Storage service.
  13. Other users who click the refresh button on the home page (and those who log in afresh) are shown the updated list of problem reports.

Instructions

Ready to put this code pattern to use? Complete details on how to get started running and using this application are in the README.