Building a Cordova Android application from scratch.

Here at EX Squared,  we have been developing native Android and iOS mobile applications for years. We have also worked extensively with Cordova for cross-platform development. We offer a full menu of web and mobile development services, including enterprise level responsive UX design, custom web & database development, web services integration, and hosting.

As an experienced team, we know that creating native apps requires specialized knowledge applicable to the device you are developing for such as: Java for Android, and Swift for iOS. However, there are times when building a native app may not be the best solution. That’s where Cordova comes in.

Reasons to choose Cordova:

• Specialized knowledge of native app languages 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.

• With similarities in market share between Android and iOS users, companies shouldn’t ignore either side by only having an app that serves one OS.

• Finally, using Cordova significantly reduces maintenance cost as most code is shared across the operating systems.

A Client Story

A few years ago, we had a customer ask for recommendations to establish a presence in both the Android and iOS app stores. Here were the requests they made:

• The app needed to be available in both the Android and iOS 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 on mobile and tablet.
• They wanted to be able to send notifications to customers’ devices for certain situations.
• They wanted to keep expenses down.
• They wanted to use as much existing website infrastructure as possible.

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

What is 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 needing knowledge of each of those platform’s native languages.

Cordova also has a wide variety of plugins that allow the developer to interact with native device features via JavaScript. Using Cordova’s plugins, we can easily 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 brings down the time and cost to develop and maintain applications across a full range of devices, since the majority of the codebase is the same for all platforms.

All of the great frameworks that make a developer’s life easier for website development work in Cordova. Because, in essence, Cordova is serving webpages on a device.
• Are you using Angular.js for you existing websites? It will work in Cordova. • Like the power and flexibility that come with JQuery? It will work in Cordova.

In the remainder of this blog post, I will lead you from start to finish, through the creation of a simple Cordova application that will run on an Android device using Android Studio. Ready to get started?

Cordova App Creation:

  • 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 the directory c:HelloCordova in file explorer and that is 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 that exists 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 for how this is done. Notice that it is exactly the same thing you would do if you were building your own website.

We are now ready to install Android Studio.

Section 3: Installing Android Studio

Android Studio is Google’s development environment for building Android Applications. It was first released 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 to 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 want to install to 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 Android 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 is 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 Android 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 the 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 official 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.

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 not to 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 start 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 one 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 Gradle wrapper to be configured for you. Android Studio will continue to work for a bit (it may take several minutes). Then, Android Studio will load with the project. You should see something similar to the  below image:

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 familiar 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 dialog. If you do not have an Android phone, then you will need to select an emulator to run the project. In my case, and hopefully in yours, I have an Android phone that I want to test with.

Plug your test 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 it ran 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 development process works for a Cordova application, let’s make a simple change. Then, we can see that change in Android Studio, and finally 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 so that the changes happen in all your sub-folders. You might think it would be easier to be 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 let’s make a small modification to our index.html file in the parent Cordova 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 the 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 case, 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.

The Prepare command 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:

Congratulations! 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 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.

If you or your team would like to work with us to build your cross-platform apps, get in touch. EX Squared offers a full menu of web and mobile development services, including enterprise level responsive UX design, custom web & database development, web services integration, and hosting. You can also read about best practices and more about mobile applications in our blog.

Learn about how we’ve delivered:

Callminer

TeamAsAService remote staffing to accelerate results

View Case Study