Tuesday, February 13, 2018

How to Install Cordova for Android Development

One challenge in developing a mobile application is in choosing a mobile environment. Apache Cordova allows building of an application through the use of Java for Android, AngularJS, SCSS to create reusable code across platforms. I suggest that some study is done on those languages in order to fast track learning. Cordova supports several development platforms, for this article, its focus is on Android platform.

Cordova Installation

Here are the steps to get started on a command line with installation of Cordova and launching the Android emulator on MS Windows 10 (version 10.0.16299). All the versions mentioned here are those that I am using for this article.

1.Install Base Environment

Cordova relies on well known development tools to generate the latest mobile application. Install Java Development Kit (version 8 or newer), Android studio, Node.js and git. Ensure all these are working.
  1. Java Development Kit. This should be version 8 or newer and configure JAVA_HOME.
  2. Android Studio (This article is version 2.3.3). Install the required SDK platform (I choose Android 7.1.1 Nougat), SDK Tools comprising of Android SDK Tools (version 26.1.1), Android SDK Platform-tools (version 27.0.1) and Android Support Repository (version 47.0.0). In SDK Tools, install Android Emulator. On MS Windows platform, also install HAXM (I have version 6.2.1).
  3. Node.js. This article is version 6.9.1 with npm 3.10.8. 
  4. Optional: GIT (version 2.8.1.windows.1)
Ensure environment variables are configured for JAVA_HOME and ANDROID_HOME

Then at the command prompt type (do not type the dollar sign);
$ npm install -g cordova

On linux
$ sudo npm install -g cordova

2. Creating Hello World App.

We will create a Cordova project in a folder HelloWorld. This will be in io.cordova.project with the app title of HelloWorldApp.
$ cordova create HelloWorld io.cordova.project HelloWorldApp
$ cd HelloWorld

Here is the syntax to create any project
cordova create [project_name] [package_name] [apk_name]

Open the folder platforms, notice it is empty.
Cordova Project folder for HelloWorld


Open and identify the codes in index.html located at
HelloWorld\www


In HelloWorld\www edit index.html to display Hello World. At end of the app tag, add 1 line
<div class="app">


<p>Hello World</p>
</div>

3. Install Android Platform.

When it is the first time creating a project, the target platform has to be added. Here its created in a folder CordovaProject.
$ cordova platform add android

Have a look at the Android source files are located at MainActivity.java in

HelloWorld\platforms\android\app\src\main\java\io\cordova\project

Default MainActivity.java file

Each time the apps code is modified, the project is compiled and run in an emulator OR on a mobile device. Compile and build the project for the Android platform.
$ cordova build android

Start the apps in an emulator. The default emulator manager is by Genymotion and the default emulator is Pixel with Android API 25.
$ cordova emulate android.


If you intend to plug in your Android device to run the app, or  start the apps in an external device, type
$ cordova run android



4. Tips

List existing platform installed and what platform is available.
$ cordova platform ls

No comments:

Blog Archive