In this post, we'll dive into creating an Apache Cordova application for mobile phones that consumes our Azure-based API. This will complete the journey from reading data, sending it to the cloud, and then consuming it on a mobile phone (or any other app for that matter). In future posts, we'll explore how to add notifications to alert you when certain readings appear to be off.

Apache Cordova allows us to build platform-independent apps using HTML and JavaScript. A Cordova app can be deployed to Android, iOS, and Windows phones, leveraging platform-specific libraries as a proxy between the app and platform capabilities like camera, notifications, contacts, etc.

To get started with building a Cordova app, we'll focus on consuming our Azure API. We won't delve too deeply into building a Cordova app itself, as that's a topic worth exploring in its own right. Check out the official tutorials for more information and plenty of samples on the subject.

Cordova App Setup

Once you've set up your Cordova app (hello world style), you'll need to think about the architecture of that app. Since we're using HTML and JavaScript, there's a lot of re-usable "stuff" out there. That includes one of the most commonly used frameworks: AngularJS.

Angular & Material Design

To create an engaging UI for our Cordova app, we'll leverage Angular and Material Design. A Cordova app gives us a blank canvas to work with. We can choose to fill it in ourselves, but that would be a lot of work! Instead, we can use pre-designed guidelines and frameworks like Material Design, which nicely fits the rest of the OS and apps running on my Android-powered smartphone.

Azure Mobile Apps

To add authentication and chat with our Web API endpoint, we'll utilize Azure mobile apps. This component takes care of logging in users and sending authentication tokens with each call to the API. We can do this ourselves, but it's much easier to use a ready-made component like Azure mobile apps, which provides client-side libraries for connecting with Azure APIs.

Client Components

To add the client components to our Cordova app, we'll need to add a new plugin. In the config.xml file, select the Plugins pane and click "Custom." Add the Azure/azure-mobile-apps-cordova-client plugin using the following URL: https://github.com/Azure/azure-mobile-apps-cordova-client.

Conclusion

By leveraging Apache Cordova, Angular, and Material Design, we've created a mobile app that consumes our Azure-based API. We've also set up authentication and chat with our Web API endpoint using Azure mobile apps. In future posts, we'll explore how to add notifications and other features to our IoT aquarium monitor solution.