Here at EX2 we have been developing Android and iOS applications for a number of years. Creating native apps requires specialized knowledge applicable to the device you are developing for: Java for Android, and Objective C (or more recently Swift) for iOS. This specialized knowledge does not come cheaply both in terms of the cost of existing resources with this knowledge or time spent by your existing team learning the languages and platforms. Also, with similarities in market share between Android and iOS users we can’t ignore either side and only have an app that serves one OS.  Finally, using Cordova significantly reduces maintenance cost as most code is shared across the operating systems.

A few years back we had a customer of ours come to us asking for recommendations to establish a presence in the app stores. They wished to take the functionality of their existing website and make it available via an application to their customers. They wanted the application available to both Android and iOS users, mobile and tablet, and they wanted to send notifications to customers’ devices for certain situations. Lastly, they wanted to keep expenses down and to use as much existing website infrastructure as possible.

We knew at the time, that we would not be able to deliver the applications the customer wanted within their budget if we created native applications.Because of this, we went in search of a framework to help reduce cost and maintainability. Enter Cordova.

Cordova is an open source framework for creating “hybrid” mobile applications. The beauty of Cordova is that it allows developers to leverage their knowledge of web development to build mobile applications on a number of different platforms. Using standard HTML, css, and JavaScript, a developer can create applications for Apple, Android, and Windows phones without the need of knowledge of each of those platforms native languages. Additionally, Cordova has a number of plugins that allows the developer to interact with native features of the phone via JavaScript. Using Cordova, we can add a plugins that will allow our application to interact with the device’s camera, geolocation, send notifications, and many other features.

Because Cordova uses HTML, css, and JavaScript, there is plenty of code-reuse between the different device platforms. This leads to less cost to develop and maintain applications across a full range of devices, because the majority of the codebase is the same for all platforms. Additionally all the great frameworks that makes the developers life easier for website development will work in Cordova since in essence is simply serving webpages on a device. Using Angular.js for you existing websites? It will work in Cordova. Like the power and flexibility that with JQuery? It will work in Cordova.

In this blog post, I will lead you from start to finish in creating a simple Cordova application that will run on an Android device using Android Studio. Here are the steps that will be covered:

  • Installing the Cordova CLI (Command Line Interface)
  • Create a new skeleton application using the CLI
  • Install Android Studio
  • Use the Cordova CLI to create the Android platform code
  • Using Android Studio to create and load an Android APK (Android application)
  • Modify our application and see those changes on our Phone

Let’s get started!

Section 1: Installing the Cordova CLI (Command Line Interface)

The Cordova CLI is a command line interface that simplifies the process of creating new Cordova applications on your system of choice. For the purposes of the blog entry we will be installing the CLI on a Windows 8.1 system. For Android development, you have a choice of using Windows, Linux, or Apple.

You can find a platform guide to installing the CLI here. Since this is a guide from start to finish, I will outline the steps I used to load the CLI on my Windows 8.1 box.

1.1 Install Node.js

We will be installing Node.js on our system to help with the installation of the Cordova CLI. Node.js is described as a platform build on Chrome’s JavaScript runtime for easily building fast, scalable network applications. We will be using Node.js because it comes with NPM (node package manager) which will allow us to easily install the Cordova CLI.

Head over to the Node.js homepage and click the Install button to start downloading the node installation .msi file.

You should now have a node-v#.##.#-x64.msi file wherever your downloads are saved. Note, the version I downloaded was v0.12.3 and it is a 64 bit version since my Windows 8.1 box is 64 bit. The version you download may be different based on what the current version of node is, and the system you are downloading from. Browse the directory where the msi file was downloaded and double click the file to install.

During the installation, please ensure that the node package manager will be installed as well as the add to PATH option. They should be selected to install by default.

After Node.js finishes installing, we are ready to install the Cordova CLI

1.2 Install the Cordova CLI

Open a command prompt by clicking the windows start button and typing “cmd”. You will see the option for Command prompt and for Node.js command prompt select either as they both will work. In the command prompt window you will need to type.

npm install -g cordova

This will install the latest version of the Cordova CLI globally (-g). The installation should only take a minute or so. After installation, you should be able to type the following command to see the version of the CLI that has been installed.

cordova -v

You should see something similar to the following which in my case indicates I have version 5.0.0 of the CLI installed.:

We are now ready to use the Cordova CLI to create a new application.

Section 2: Creating the application

One of the key benifits of Cordova is that you will be using HTML, css, and Javascript to create your application. Because we are using a standardized technology, almost all of the code we work on will be shared across all the various device platforms. Lets use the CLI to create our simple application.

2.1 Creating a new application using the CLI

Part of the beauty of using the CLI to create your application is that it will do most of the work for you. For this example, I created a directory in file explorer c:HelloCordova where I will create the app. In the same command prompt, you will need to move to the directory where you would like the new application created.

cd c:HelloCordova

In the real world, you would want to create this directory where you keep your source control, or create a folder and tie your repository to this directory.

We now are ready to create the application. For this example, we are going to create a simple program called HelloWorld which will be built in a directory called Hello. In your command prompt, type the following command:

cordova create hello com.example.hello HelloWorld

The above command tells the Cordova CLI to create a new application called HelloWorld in a directory named Hello. The com.example.hello is simply a unique identifier for the application that is in reverse domain-style notation. If you open up a file explorer to the new Hello directory, you should see something like this:

Take a look in the www sub folder. You will see folders located here for css, images (img) and JavaScript files (js). Additionally you will see an index.html file. This is the file that will first run when the applications is loaded on a mobile device. When creating your own applications for Cordova, you will override the existing files with your own. You do not have to keep the same folder structure as exist in the www folder. Just be aware that your index.html file should reference the supporting css, images, and JavaScript based on your folder structure. Take a look at the default index.html file in your favorite text editor to get an idea how this is done. Notice that it is exactly the same as you would do if building your own website. We are now ready to install Android Studio.

Section 3: Installing Android Studio

Android Studio is Google’s new development environment for building Android Applications. It was first release as version 1.0 in December 2014. Before Android Studios introduction, it was common to use Eclipse and the ADT bundle to develop Android applications. Our first step in getting Android Studio up and running is ensure we have the Java Development Kit installed on our Windows box.

3.1 Ensure Java Development Kit (JDK) is installed

A prerequisite for Android Studio is the Java Development Kit. JDK 6 or higher is required. If you plan on developing for Andriod version 5.0 or higher then you will need at least JDK version 7. To download the latest version of the JDK go here. On this page you will see a Java download button. Click that button and you will be taken to another page that will list the available JDK download options. Choose the version for your flavor of windows. In my case I am using windows 8.1 64bit so I will download the Windows x64 version. You will have to accept the license agreement before you can download. After downloading the JDK exe file we are ready to install.

3.2 Installing JDK

Browse to your download directory and click the jdk-[version]-windows-x[bit].exe file to install. Choosing all the default values should be fine, unless you perhaps want to install the a different directory.

We are now ready download Android Studio.

3.3 Downloading Android Studio

The latest version of Android Studio can be located here. You will need to click the green Download Android Studio button, accept the Terms and Conditions, and then click the blue Download Android Studio for Windows button. The download is slightly less than 900MB.

After downloading the android-studio-bundle exe, we are ready to install.

3.4 Installing Android Studio

Navigate to your download directory and double click the android-studio-bundle-[version]-windows.exe file. This will bring up the installation wizard that will guide your through the process of installation. I recommend going with the default selections on everything, unless you would like to change the install location.

When the installation is complete the final screen of the wizard will give the option to launch Andriod Studio. Hold off on this for now. First we need to create the Android platform version of our HelloWorld Cordova application.

Section 4: Creating the Andriod platform code

One of the great things about Cordova it its ability to create the code needed to run on any of its supported platforms. Developers do not need to create the project code for loading into Android Studio, nor do they need to know how to create an xCode project for creating iOS applications. The Cordova CLI has the ability to do this work for you.

4.1 Use the Cordova CLI to create the Android Platform code

Now that we have Android Studio installed, we are ready to use the CLI to create our Andriod platform code. Open a command prompt and move to the directory where the new HelloWorld application was created. Before we can load code into Android Studio, we first need to create the Android platform application using the Cordova CLI. Type following into the command prompt to create the Android platform code.

cordova platform add android

This will create a new directory in the platforms folder of the HelloWorld project. If you open the file explorer and and dig into the android folder in the platforms directory you should see the following:

If you delve into the assets and then www folder, you will see the original code including the index.html, css, img, and js folders. When we load this platform code into Android studio, this will be what will run when the application loads. We are now ready to do just that.

Section 5: Using Android Studio to create and load an Android APK

Android Studio is now the offical IDE for Android development. We will use Android Studio to generate an APK for the cordova HelloWorld application and then load it onto an Android phone that we connect to our computer.

5.1 Starting Android Studio for the first time

Our first step is to run Android Studio. In windows 8.1 go to the start screen and type “Android Studio” and select Android Studio to start the application. You should see a loading screen as below:

After the application loads, you should see a dialog that comes up titled “Complete Installation”. You have a choice to import existing settings from a previous install, or to not import since there is no previous version of Studio loaded. Since I have not loaded Android Studio before, I will select to not import anything and click OK.

You will again see the srart screen for Android Studio with a loading bar filling up. You may need to allow access to the executable for Windows Firewall. You will then be asked to select a UI theme for Android Studio. Select whichever makes you happy and click next.

Android Studio will then go through the process of downloading some components and creating a virtual device. Once this is complete, you should click the finish button in the wizard, and you will be greeted with a dialog entitled “Welcome to Android Studio” as shown below:

We are now ready to load the project into Android Studio

5.2 Loading the project into Android Studio

Here we have several options to choose from. In our case, we already have a project created for us by the Cordova CLI in our platforms/android directory. Go ahead and select the option to “Import project (Eclipse ADT, Gradle, etc.)”.

You will then be greeted by a dialog where you should select the location of the project to import. You should select the CLI generated android platform code which in my case is located at “C:HelloCordovahelloplatformsandroid”. Select your correct folder and click OK.

Soon after you will see another dialog entitled “Gradle Sync”. Click OK in order to allow the Graddle wrapper to be configured for you. Android Studio will continue to work for a bit (it may take several minutes) and eventually Andriod Studio will load with the project. You should see something similar as below:

Open the android folder that is under the CordovaLib folder. You will see another set of folders including assets. Open that up and you will see a www folder. Open that folder and you will see the familair index.html, css, img, and js folders.

5.3 Building the project into Android Studio

We are now ready to attempt to build the project. Click the green play button to start the build. You should eventually see the Choose Device dailog. If you do not have an Android phone, then you will need to select an emulator to run the project. In my case, I have an Android phone that I want to test with. Plug your phone into the windows machine via the USB charging cable. Note, you will need to enable developer mode on your phone. Once you have plugged in your phone, you will need to allow USB debugging, and your device should show in the Device dialog. Select your device and you will soon see the following:

Congratulations! You have just created a Cordova application and run it on your Android device!

Our next step is to make a slight modification to our Cordova application and walk through the process of getting those changes into Android Studio.

Section 6: Making a change and re-building the Android platform

In order to get a feel for how the developement process works for a Cordova application, let’s make a simple change and see that change in Android Studio, and then on our phone.

6.1 Modifying the index.html file

When making changes to our HTML code (or css/Javascript), we want to do that in our parent application folder. You might think to do your changes in the platforms/android folder but this is not the case. Imagine if we had more than one platform, for instance Android, iOS, and Windows Phone. If we make our changes in the platforms/android folder, then those changes would not be seen in the iOS and Windows Phone platforms.

So lets make a small modification to our index.html file in the parent Corodova folder which in my case is located at C:HelloCordovahellowww. Open the index.html file in your text editor and search for the text “Device is Ready”. When you find that, add “to Go!” after so that you end up with “Device is Ready to Go!”.

We are now ready to prepare our Android Platform

6.2 Getting the changes to the Android platform code

In order to see our change to the parent index.html folder in our platform/android folder, we need to use the CLI to prepare the Android platform. Open a command prompt and move to your root folder of the Hello application. In my caes, that is C:HelloWorldhello. In the command prompt, type the following:

cordova prepare android

This will copy our changes into the platforms/android directory, which in turn should now show in our Android Studio. One thing to note. We are only dealing with the Android platform in this blog entry. In the real world we might be also dealing with iOS and Windows phone. You could certainly issue the prepare command for each individual platform, but an easier way would be to type the following:

cordova prepare

Since there is no platform specified, the Cordova CLI will prepare all platforms that have been added via the CLI. In our case that is only Android. If we had other platforms it would have prepared them as well. Preparing simply copies the parent directory contents and some platform specific files into each of the platforms we have added.

We are now ready to rebuild our changes in Android Studio

6.3 Building the project in Android Studio

Open Android studio and look in the assets/www folder for the index.html file. Double click that file, and it will show in the Android Studio editor. Scroll down a bit, and you should see the following:

Notice I have highlighted the change that we made. Press the green play button in Android Studio to rebuild the project. When the choose device dialog comes up, again choose your phone and you should see the following:

You have now walked through the process of preparing and rebuilding the Cordova HelloWorld application.

Section 7: Some final thoughts

In this blog entry we have walked through the entire process of using Cordova to create a simple Android application in Android Studio. We also looked at making changes to our HelloWorld application and seeing those changes in our application. This has just been a brief overview of the process. I recommend you spend some time looking over what Cordova has to offer by viewing the available documentation. Here is a link to the documentation to get you started.

Want to know more?

Ask how EX Squared can modernize your business processes and accelerate growth in your industry. Contact us for a fast and free consultation.