Home
Develop Enterprise-grade Hybrid Mobile App with Cloud-native Backend.
Develop a Secure, Enterprise-grade Ionic/Cordova based Hybrid Mobile App that connects to CouchDB/Cloudant and ObjectStorage via IBM Mobile Foundation service.
Cloud
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® NoSQL database, IBM Cloud Object Storage, and IBM Mobile Foundation to quickly develop and host secure, scalable enterprise mobile apps.
https://github.com/IBM/Ionic-MFP-App/
When developing your enterprise mobile app that needs centralized hosting of data, use of cloud-native services such as Cloudant No-SQL Database for storing textual data and Cloud Object Storage service for storing image/video/audio data, allows you to quickly go from idea-conception to reality. The Mobile Foundation service available from IBM Cloud provides a scalable mobile access gateway for securely accessing those backend services, and it provides other essential mobile backend capabilities such as push notifications, app lifecycle management and app analytics.
This code pattern gives you step by step instructions for developing an Ionic/Cordova based hybrid mobile app that securely connects to Cloudant and Object Storage services via IBM MobileFoundation (aka MFP) service.
When you have completed this pattern, you will understand:
- How to authenticate users (through preemptive login) using MFP security adapter.
- How to write an MFP adapter that authenticates with Cloud Object Storage service and pass back the Authorization token to the mobile app.
- Recommended architectural patterns for coding the interaction between mobile app and Cloud Object Storage service.
- How to use imgcache.js in Ionic app for caching images fetched from Cloud Object Storage service.
- How to show Google Maps in Ionic app as well as capture user’s geo-location & image from camera.
- How to upload the captured image from mobile app to Cloud Object Storage service.
- How to fetch data from Cloudant service to mobile app via MFP 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.
- 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, 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.
- MFP 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.
- Mobile app makes a call to MFP adapter to get the Authorization token for interacting with Cloud Object Storage service.
- MFP adapter makes a call to Cloud Object Storage service's token manager endpoint to get the Authorization token and returns it to the mobile app.
- Mobile app initializes image-caching plugin and asks it to use an HTTP header of
Authorization=<value returned from MFP adapter>while fetching images. Mobile app displays the data obtained from MFP adapter as a list of items. The image caching plugin running on the mobile app downloads and caches images from Cloud Object Storage. - 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.
- Back in the home page, user clicks on
+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 onSubmitbutton. - Mobile app uploads the textual data to Cloudant NoSQL DB via MFP Adapter.
- Mobile app creates a thumbnail image by resizing the captured image and uploads both the captured image and thumbnail to Cloud Object Storage.
- Other users who click on refresh button on the home page (and those who log in afresh) are shown the updated list of problem reports.
- 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.
- What is Cordova and PhoneGap?: Ionic’s blog post for getting a quick recap of the history of PhoneGap and Apache Cordova, and goals of Cordova and Ionic framework.
- Beginners Guide to Getting Started with Ionic 2: Introduction to Ionic 2 along with practical tutorials.
- ICICI Bank, Comdata and Shiseido Cite IBM's MobileFirst Platform As Key to Their Success: From InterConnect in Las Vegas, IBM's innovative clients -- ICICI Bank, Comdata and Shiseido -- share their business drivers for launching critical customer and enterprise apps. From attracting young buyers to making trucker drivers more efficient to helping beauty consultants sell better, IBM's flexible MobileFirst Platform allows clients to be nimble, to pull data from multiple sources and to secure mobile transactions.