Building hybrid apps using Cordova is super simple, once your environment is properly set up. In this tutorial, we will show you how to quickly set up your Cordova development environment for creating Android mobile apps, all the instructions in this article assume you are doing development on Windows Machine.

Setup Cordova

Lets set up the basic development environment we need to start with hybrid mobile app development, this takes time depending on your internet speeds

Install NodeJs

To install Cordova we have to start by first installing NodeJs, for that just go to and download the latest version from NodeJS website.

Once you have set up the NodeJs, open Windows PowerShell and type following command to verify it is done properly.

npm -v

If it shows the version number then NodeJs is setup we can move on to next step.

Install Cordova

Once NodeJs & NPM in installed all we need to do is fire the following command and wait for Cordova to install :)

npm install -g cordova

Once it is done, just fire the following command to check the version and verify the setup

cordova -v

Before we move ahead, let's check if we have other prerequisites installed, type the following command to verify

cordova requirements

If you are setting up things for the first time it might look like image below,

<>>>

No worries, let's set up the other required components. If you find everything is installed then just move on to next step. I have copied the instructions as is from Cordova site to put everything in one place for easy reference, for details check that article.

Install Java SDK

Install Java Development Kit (JDK) 8.

When installing on Windows you also need to set JAVA_HOME Environment Variable according to your JDK installation path.

Gradle

As of Cordova-Android 6.4.0, Gradle is now required to be installed to build Android.

When installing on Windows, you need to add Gradle to your path

Android SDK

Install Android Studio. Detailed installation instructions are on Android's developer site.

Adding SDK Packages

After installing the Android SDK, you must also install the packages for whatever API level you wish to target. It is recommended that you install the highest SDK version that your version of cordova-android supports.

Open the Android SDK Manager (run sdkmanager from the terminal) and make sure the following are installed:

1. Android Platform SDK for your targeted version of Android
2. Android SDK build-tools version 19.1.0 or higher
3. Android Support Repository (found under "Extras")

See Android's documentation on Installing SDK Packages for more details.

Setting environment variables

Cordova's CLI tools require some environment variables to be set in order to function correctly. The CLI will attempt to set these variables for you, but in certain cases you may need to set them manually. The following variables should be updated:

1. Set the JAVA_HOME environment variable to the location of your JDK installation
2. Set the ANDROID_HOME environment variable to the location of your Android SDK installation
3. It is also recommended that you add the Android SDK's tools, tools/bin, and platform-toolsdirectories to your PATH

These steps may vary depending on your installed version of Windows. Close and reopen any command prompt windows after making changes to see them reflected.

1. Click on the Start menu in the lower-left corner of the desktop
2. In the search bar, search for Environment Variables and select Edit the system Environment Variables from the options that appear
3. In the window that appears, click the Environment Variables button

To create a new environment variable:

1. Click New... and enter the variable name and value

To set your PATH:

1. Select the PATH variable and press Edit.
2. Add entries for the relevant locations to the PATH. For example (substitute the paths with your local Android SDK installation's location):

   C:\Users\[your user]\AppData\Local\Android\Sdk\platform-tools
   C:\Users\[your user]\AppData\Local\Android\Sdk\tools

Create Project

Now that we have set up Cordova, we can start creating projects. To create a new project just fire the following command, refer to this documentation from Cordova for more details

cordova create hello com.example.hello HelloWorld

In the above command, hello is the physical folder, com.example.hello is the ID and unique identifier for the app and HelloWorld the is name of the app.

Add Platforms and Plugins

Once you have created the project, the next step is to set the various platforms we will support and additional plugins that our mobile app will need to function properly.

Fire the following command to add the platforms

cd hello
cordova platform add android

You will have to wait for a while the first time when you fire this command while Cordova downloads and setups the platform for you. For more options on the platform, command refer to the documentation.

To check the current set of platforms installed you can use

cordova platform ls

Now, let's set up one plugin that we will be using regularly, Injectview plugin makes cordova.js all plugins available to us in the browser allowing us to write JavaScript on the server.

cordova plugin add https://github.com/lesteenman/cordova-plugin-injectview.git

Using 'plugin' command we can install other plugins we need within our Android app.

Once all the plugins you need are installed let's configure the project.

Configure

<><>img

Config.xml

Index.html

Package for Release to Google Play Store

Some common Errors