Phone Handle Icon
Call Us
Back to all

Building Cross Platform Apps with Apache Cordova

September 27, 2018
By
Steve Danner
Back to all
Share this article

Since the 1990’s, developers have had options for developing applications for many platforms at once (write once, deploy many).  It started with the advent of Java promising this for both Windows and *Nix platforms.  As we moved into the 2000’s, there were more choices when fans of .NET spawned the Mono project, which promised .NET capabilities in both *Nix and MacO environments.  Once the mobile revolution happened, we had new operating systems, and new, platform-specific languages and APIs to deal with, creating the need for a new cross-platform language.  Around the same time, JavaScript, which had served well as a browser-specific programming language, was really gaining traction as a full blown programming language.  On this premise, the Apache Cordova project was created as a means to create JavaScript-powered applications for ALL mobile platforms.

Challenge

You have a business with hundreds or even thousands of employees.  You have a well-organized portfolio of purchased and custom applications both internal and externally facing.  The need for a mobile app that offers critical business data from these systems, allowing for offline access as many of your users have shady internet access in their remote locations.  The enterprise has a friendly Bring-Your-Own-Device (BYOD) policy, which yields a fair mix of Android and iOS devices.  You need this app yesterday, and don’t have the developer resources on hand to develop native iOS and Android applications in the timeframe needed.

Solution

This is the perfect scenario for an Apache Cordova driven application!  What exactly is Apache Cordova?  In short, it’s an application framework that wraps a native application “shell” around a normal HTML/JavaScript/CSS driven web application.  From a technical standpoint, the web application is hosted on the operating system’s file system and accessed with the file:/// protocol.  At this point, developers really only need to worry about developing a mobile-friendly web application!  The Cordova framework will compile your single HTML/JavaScript/CSS source code into as many platforms as you need to support!  Native device functionality is accessed via a common JavaScript interface with a Cordova “plugin”.  The plugin contains native code for one or more supported operating systems (most support at least iOS and Android), and of course, ships with a JavaScript wrapper for use in your application.  So all of those web developers you already have on hand?  Their skills are going to port over to Cordova just fine and they’ll be churning out functionality in no time at all!

Development Environment

Remember that even though we’ve put our web developers to work using their existing skills, this is still going to wind up compiling into a mobile application to be deployed on your user’s devices, not to a website on the internet.  As such, there are going to be things to be aware of.  First, you’ll want an Integrated Development Environment (IDE) that knows specifically how to deal with Apache Cordova.  We use Microsoft’s Visual Studio Tools for Apache Cordova.  This harnesses the power of Microsoft’s Visual Studio IDE, where your developers may be very comfortable already, and masks a lot of the command line complexity that comes with the native Cordova project.  Building on a Windows machine, you can natively compile to Android or Windows, but iOS will require some external tooling.  We had a lot of luck with Adobe’s PhoneGap Build tool.  Using their easy to use REST API, we wrote a custom PowerShell post-build script that automatically zipped and uploaded the source to PhoneGap Build, and we had a nice, fresh IPA (iOS Application Package) and Android APK on every build!  It could not have been easier.  There is also a plugin for Eclipse, and there is support in JetBrains’ WebStorm for Cordova as well.  Any of these should have your developers running in an environment that is familiar to THEM very quickly.  Once they’re up and writing code, developers need to be able to debug and run the mobile application.  The Visual Studio tools are able to use Google Chrome as an emulator, with a built-in plugin emulator as well!  Once you get past running in a browser, regardless of your developers’ development platform, there are a ton of emulators available for doing their development testing.

Testing

Before you can deploy your app anywhere, you’ll want to first ensure you have an account with both the Google Play Store and the Apple Developer Program.  Make sure to read the fine print on costs and terms with both of these.  Generally speaking, the Google Play Developer program costs $25, one time, and the Apple Developer program costs $99/month.  Of course, that may vary depending on how many people you have accessing it.

Your developers are excited because they just cranked out a mobile app in a record time!  You are ready to start deploying the application to a limited group of test users.  Once again, your challenge is that you have a healthy mix of Android and iOS users, so you’ll want to get a fair mix for your test group as well.  This is where Adobe’s PhoneGap Build tool comes in!  PhoneGap already has your code, and they generate a public page for you with QR codes to download both your iOS build and your Android build!  Simply direct your users to that page, and they can download and install with a single click (or scan)!

Getting the app on your Android test users’ device is straight forward.  You simply enable the “Unknown Sources” installation option in Android settings, download the APK, and they’re good to go!

Getting the app on your iOS test users’ device is a little more complex.  First, you must obtain the UUID (a unique iOS device identifier) for every test device that will be installing the app.  There are a number of ways to do this, but getting it out of iTunes is the most trivial, especially if you are asking end-users to perform this task.  Once you have your UUIDs, you must go to Apple’s Provisioning Portal, armed with your app bundle ID, you will create a provisioning profile with Apple.  There’s a little more to it than that, but there’s no shortage of information on the steps to follow to create the profile, so I’ll skip the details on that.  Once you have your provisioning profile file, you can upload it to your App page in PhoneGap build, and you can now start generating IPA files for your test users to download and install!

Deploying to Everyone

Once testing is complete, you’re ready to deploy company-wide.  You now have an important decision to make.  Is this an app that can be pushed to the world via the Google Play Store or iOS App Store?  Or do you really have to limit your user base to your enterprise?  If you wish to push to the respective global app stores, be sure that you don’t have login requirements to access internal resources or your app will be rejected!  If you do decide that you need to login to use your app, or really just don’t want it “out in the wild”, Google offers a Managed version of the play store to distribute business apps, and Apple offers the Volume Purchase Program for the same purpose.

Once your app has landed on your chosen distribution platform, your IT staff can now deploy using MDM (Mobile Device Management) software, or you can simply instruct your users on how to install the app themselves.  Side note, in our challenge above, we said that our business has a BYOD program, so bear in mind that MDM is not applicable in this scenario.

Competitive Edge

If your business needs a line-of-business application developed quickly and efficiently, you can’t go wrong with Apache Cordova!  Granted, you won’t want to develop a game or some other graphic-intensive app this way, but for line-of-business applications, Cordova performs very well.  Your users will be happy with your time to market, and your developers will be happy with how fast they are able to get going and see real results!  Software Design Partners has utilized this platform with a lot of success, creating happy customers who get great apps at a low cost, and in a  short timeframe.