From start to finish!

Mobile Applications (Apps) are something every developer wants to create, however, not every developer wants to have to learn multiple languages to be able to create an App which works across different types of devices, such as Android and iOS. Learning Objective C (or Swift) and Java is probably enough to put most people off the idea of creating a cross-platform App. However, it’s possible to create one using technologies which most developers are familiar with. Good old HTML, CSS and JavaScript is all you need. Well, that and Apache Cordova, the mobile application development framework that allows you to build Apps for multiple platforms using a single code base.

Mobile Applications (Apps) are something every developer wants to create, however, not every developer wants to have to learn multiple languages to be able to create an App which works across different types of devices, such as Android and iOS. Learning Objective C (or Swift) and Java is probably enough to put most people off the idea of creating a cross-platform App. However, it’s possible to create one using technologies which most developers are familiar with. Good old HTML, CSS and JavaScript is all you need. Well, that and Apache Cordova, the mobile application development framework that allows you to build Apps for multiple platforms using a single code base.

So, let’s see how to create a very simple App.

Creating your App

To begin working with Cordova you will need the cordova command line tools. These can be installed using npm (if you don’t have npm, see here for how to install it):

npm install -g cordova

With the command line tools installed, you can then generate your first project:

ordova create MyCordovaProjectcd MyCordovaProject

This will have generated a very simple "Hello World" style application. In order to run this, we first need to install a "platform" via cordova. Adding a platform is required so that cordova knows how to build your application for the different types of devices that you wish your App to run on. For now, we just want to see it running in our browser, to do this we just run:

cordova platform add browser

cordova platform add browsercordova run browser

If all has gone according to plan, you should see something like the following in your browser:

Now, this just looks like a very simple website. You could very easily copy the HTML, put it on a web server, point a domain at it and there you have something that anyone can access on any web capable device. However, that’s not very App-like is it? Let’s make it so that our App actually does something that any normal website wouldn't easily be able to do, after all, that’s why we want to make a hybrid app! Let's do something very simple, let’s print out the type of network connection your device is currently using (WIFI, 3G etc).

To do this we first need to install a cordova "plugin". Plugins add additional functionality to your App and allow you to access the native functionality that your device supports, such as its camera, contacts, or in this case, network information. To install the plugin we need to run:

cordova plugin add cordova-plugin-network-information

This gives us the ability to access the network connection type by accessing navigator.connection.type within JS.

Let’s change our Hello World App to display this information. To do this we first need to change our interface. Open up: MyCordovaProject/www/index.html and find the line that looks like:

<p class="event received">Device is Ready</p>

Add the following directly below it:

<p class="connection"></p>

With the interface changed, we now need to modify our JS code to populate our new element with the connection information. Open up MyCordovaProject/www/js/index.js and find the line that looks like:

var receivedElement = parentElement.querySelector('.received');

Add the following directly below it:

var connectionElement = parentElement.querySelector('.connection');connectionElement.innerHTML = navigator.connection.type;

Save your changes and re run: cordova run browser. You should now see "UNKNOWN" below the "Device is Ready" text. This is what we expect, as we are running our App in a browser, it doesn't know what connection type we have. To show this actually working, we will need to run our App on an actual device.

Testing on Devices

Now you have an App that does something "App like", you probably want to see it running on an actual device!

To do this, we need to add another platform. Assuming you want your app to run on both iOS and Android devices, you will need to add both of their platforms:

cordova platform add ios android

Android

Getting your app running on an android device is fairly straightforward, you just need to install the Android SDK (along with the Java SE Development Kit).

If you are on OSX you can easily install the Android SDK Manager using:

brew install android-sdk

Once you have the SDK Manager, you will need to run it (/usr/local/Cellar/android-sdk/<version>/bin/android) and install the following:

SDK Platform

Android SDK Platform-tools

Android SDK Build-tools

Once everything is installed, you should be able to get your App on your device by running:

cordova run android

iOS

To get your App running on an iOS device you will need to be on OSX and running xCode 7 (or greater).

First of all you will need to setup an Apple ID and a Provisioning Profile, you can learn how to do that here.

Once you have everything setup correctly (it can be quite tricky) you should then be able to run:

cordova run ios

If this doesn't work for some reason, you can manually open the xcode project (open MyCordovaProject/platforms/ios/HelloCordova.xcodeproj) and try and work out what the issue is from within there.

Once you have it running on either Android or iOS (or both!), it should look something like the following:

You can see that it displays your connection type as either WIFI or 3G.

Congratulations! You now have a working Hybrid Mobile App!

Sharing your App

Now you have a working app, you will probably want to share it with some people in order to get some feedback or maybe even approval.

You have a number of options when it comes to handling the distribution of your app to your would-be beta testers. If you are only dealing with iOS apps, Apple's Testflight is probably going to be your go-to solution. However, we are dealing with Hybrid apps, that run on both iOS and Android! So, obviously we want a solution that covers both.

The tool we have been using here at Clock is InstallrApp. It supports both iOS and Android and has a pricing model we could easily get on board with. They only charge a one-off fee per App and how much depends on how many people you are wanting to share it with.

One really useful aspect of InstallrApp is that it handles all of the iOS provisioning profile management for you. You just put in a list of emails of people you want to test your app, it sends them a link, once they download your app, Installrapp automatically grabs their device information and updates your Provisioning Profile so that they can use it on their device. Its an awesome feature and makes the distribution of beta version of our Apps painless.

Now that you have decided you want to send out your app for a round of beta testing, it's time to package it up into a single binary file, so that it can easily be uploaded to your distribution system of choice.

Android

Packaging up your application for Android requires the creation of an APK file. This couldn't be simpler. Once you have run your App on an android device and have confirmed its all working, you will find the APK file at MyCordovaProject/platforms/android/build/outputs/apk. There will be a number of APK files here, its android-debug.apk that you are after.

iOS

Packaging up your application for iOS requires the creation of an IPA file. This is definitely not as simple as generating the Android APK file, but if you follow the steps below, it should be straightforward enough:

Firstly, ensure your app runs correctly on an actual iOS device. Then:

open MyCordovaProject/platforms/ios/HelloCordova.xcodeproj

Product > Archive"

Export..."

"Save for Ad-Hoc deployment"

Follow the on-screen instructions, which, if followed correctly will end up with an IPA file being generated.

Now that you have your IPA and (or) APK file, you can now upload these to your distribution system of choice.

Publishing your App

Once you are happy with your App, it’s time to share it with the world! Use the instructions below to get started in submitting your App to the Apple App Store and Google Play Store.

Apple App Store (iOS)

If you have been following the instructions above for iOS then chances are you have just been using a free AppleId to test your App on your iOS device. In order to publish to the Apple App Store you have to become a registered developer. You can enroll as a developer here.

Once you are a registered developer then it’s time to check out Apple’s own comprehensive instructions on how to take your .ipa file and distribute it to the world.

Check it out here.

Google Play Store (Android)

Similarly to publishing your App on the Apple App Store, you also have to become a registered developer to publish to the Google Play Store. You can enroll here.

Once registered you will first want to check out their launch checklist, it’s a great place to start to make sure you have everything you need to get your App ready.

One of the steps you will want to pay special attention to is how to get your .apk file digitally signed so with your developer account. It’s quite a tricky little process, but Google provide a detailed how to guide on this as well.

So there you have it, if you have followed this through step by step, then you now have a published Hybrid App, built using Cordova! Hopefully this shows just how easy it is to get a fully functioning app built, tested and published using nothing but web technologies. No need to try and wrestle with those platform specific technologies!