Getting started with Cordova

Download cordova eBook

Remarks

Apache Cordova is used to create Mobile apps with HTML, CSS & JS.

Apache Cordova targets multiple platforms with one code base.

Apache Cordova is Free and open source.

Cordova wraps your HTML/JavaScript app into a native container which can access the device functions of several platforms. These functions are exposed via a unified JavaScript API, allowing you to easily write one set of code to target nearly every phone or tablet on the market today and publish to their app stores.

Who could use Apache Cordova

  1. a mobile developer and want to extend an application across more than one platform, without having to re-implement it with each platform's language and tool set.

  2. a web developer and want to deploy a web app that's packaged for distribution in various app store portals.

  3. a mobile developer interested in mixing native application components with a WebView (special browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and WebView components.

Introduction to Cordova: https://cordova.apache.org/docs/en/latest/

Creating an application

Preliminary

Install the Cordova cli tools, if you haven't already.
$ npm install -g cordova

Navigate to your desired working folder.
$ cd /path/to/coding/folder

Creating the application

Create a new application
$ cordova create <appProjectName> <appNameSpace> <appName>

For this example, we'll create a 'HelloWorld' application:
$ cordova create helloWorld com.example.helloworld HelloWorld

Adding platforms and plugins

Platforms

First off, navigate to the application's folder.
$ cd <appName>

Add the platforms you wish to build for. The list of supported platforms can be found here.
$ cordova platform add <platformList>

We'll be adding the Android, iOS and browser platform. Use space separation to add multiple platforms at once. The browser platform will come in handy for in-browser testing.
Using the --save argument will save platform list to Cordova's config.xml file.

$ cordova platform add android ios browser --save

An extensive list of options regarding the platform command can be found in the cordova documentation.

Plugins

Cordova plugins can give you access to device hardware, OS specific functions and lots more features.
The structure of the plugin command is the same as the one for platforms

$ cordova plugin add <plugins.value>

We'll be adding the cordova file plugin (for easy device storage access) and the camera plugin, which gives access to the device's camera to make photos and videos.

$ cordova plugin add cordova-plugin-file cordova-plugin-camera --save

Remember: using the --save argument writes your settings to the config.xml file. Very useful to easily recreate the project on another machine.

Cordova has an excellent plugin search page set-up for your convenience. You can find it here.

Running your application

Running the application is pretty straightforward. Simply use the following command.
$ cordova run <platform name>

For our example, we'll be running our test app in the browser.
$ cordova run browser

This open your default browser with your application ready for testing.

Install Cordova on Windows

First, Install Java SE Development Kit

This can be as simple as downloading, double-clicking on the downloaded file, and following the installation instructions. For install Java SE Development Kit download it from official web site. Java SE Development Kit. Downloads

After JDK install is complete you need to add new JAVA_HOME system variable with path to your JDK

Next to the PATH system variable add path to bin dirrectory of JDK

Now you can test the install. Open Command Prompt and use command

javac -version
 

If you see a version number you did everything right!

Now Install Android SDK Tools with Android Studio

I recomended install the Android Studio because at the moment it is the best way to quickly and easily install all the most necessary things for Android Development. The list of things includes:

  • Android Development Kit (Android SDK, Android SDK Manager, Android SDK Platform-tools, Android SDK Build-tools)
  • Android Emulator with a large number of Android configurations
  • IDE (for Android Development on Java)
  • Gradle
  • It would be very helpful if you are learning Java, and in the future want to start developing for Android on Java

So, download Android Studio from official web site developer.android.com

Android Studio Installation is very simple and you just need to follow the instructions. But you should take note on Android SDK Installation Location

enter image description here

After Android Studio installation is complete you need to add new ANDROID_HOME system variable with path to your Android SDK

enter image description here

Now you need to add Android SDK and Android SDK Tools to PATH System Variable. In the list User variables select PATH and click the Edit button. At the end of the field Variable value, add a semicolon and follow paths:

C:\Users\User\AppData\Local\Android\sdk;C:\Users\User\AppData\Local\Android\sdk\tools;C:\Users\User\AppData\Local\Android\sdk\platform-tools;
 

enter image description here

Now you can test the install. Open Command Prompt and use command

adb version
 

This should display the version of the Android Debug Bridge. If you see a version number you did everything right!

Now again open Command Prompt and use command

android
 

for open Android SDK Manager

enter image description here

In the Android SDK Manager select to install

  • Android SDK Tools
  • Android SDK Platform-tools
  • Android SDK Build-tools
  • Android SDK Build-tools
  • Android 6.0 (API 23)
  • Android 5.1.1 (API 22)
  • Android 5.0.1 (API 21)
  • Android 4.2.2 (API 17)
  • GPU Debugging tools
  • Android Support Repository
  • Android Support Library
  • Google Play services
  • Google Repository
  • Google USB Driver
  • Intel x86 Emulator Accelerator (HAXM installer)

and click Install button.

Note:

Cordova Android Supported API Levels

Understanding Android API Levels

Android Platform/API Version Distribution

Install Cordova

Open Command Prompt and install Cordova using command

npm install -g cordova
 

Installation or Setup

To install the cordova command-line tool, follow these steps:

  1. Download and install Node.js. On installation you should be able to invoke node and npm on your command line.

    • To see if Node is installed, open your CLI (command line interface). For Windows it's the Windows Command Prompt, for MAC it's the Terminal. Type:

      $ node -v

      This should print a version number, so you’ll see something like this v0.10.35. If Node is not installed find your OS and follow the instructions here: https://nodejs.org/en/download/package-manager/

  2. (Optional) Download and install a git client, if you don't already have one. Following installation, you should be able to invoke git on your command line. The CLI uses it to download assets when they are referenced using a url to a git repo.

  3. Install the cordova module using npm utility of Node.js. The cordova module will automatically be downloaded by the npm utility.

on OS X and Linux:

 $ sudo npm install -g cordova
 

on Windows:

C:\>npm install -g cordova
 

The -g flag above tells npm to install cordova globally. Otherwise it will be installed in the node_modules subdirectory of the current working directory.

Following installation, you should be able to run cordova on the command line with no arguments and it should print help text.

Versions

Latest Cordova version:

Cordova 6.1.0 - https://cordova.apache.org/news/2016/03/23/tools-release.html Cordova 6.0.0 - https://cordova.apache.org/news/2016/01/28/tools-release.html

Latest Android platform and iOS plaatform

Cordova Android 5.2.2 - https://cordova.apache.org/announcements/2016/07/02/android-5.2.0.html Cordova iOS 4.2.1 - https://cordova.apache.org/announcements/2016/07/11/cordova-android-5.2.1.html

Stats

182 Contributors: 6
Wednesday, September 28, 2016
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook