Developing Mobile Apps with Apache Cordova

Want to build your own Android, iOS or Windows app?

This article will help you build your first mobile app in 15 mins using Apache Cordova.

What is Cordova?

Cordova is an open-source mobile development framework based on the Phonegap platform. It helps you to develop mobile apps with standard web technologies such as HTML5, CSS3, and JavaScript. This means that you can develop cross-platform applications and avoid each mobile platforms’ native development language.  You can develop an app which will have access to mobile-device features such as the camera or accelerometer using JavaScript APIs.

I would recommend the use of Cordova, if you are new to mobile application development since you can develop apps for multiple platforms. It’s also the right platform if you want to develop an app with a browser window that can access device-level APIs.

Platform Supported:

  • Android
  • iOS
  • OS X
  • Blackberry 10
  • Windows 8.1, Phone 8.1, 10

Getting Started

The easiest way to develop Cordova app is via a command-line interface (CLI). You will need to install Node.js. Node.js is an open-source server environment that is used to run Javascript on a server. It’s available free and can be downloaded at https://nodejs.org/en/download/.

Once you download an install Node.js, you will need to install cordova module using npm. Just run the following command in your command line application:

  • Windows Users: The -g flag below tells npm to install cordova globally rather than in a directory.
npm install -g cordova
  • OS X and Linux Users: Prefixing the npm command with sudo may be necessary to install this development utility.
$ sudo npm install -g cordova

App Development

First, navigate in the command line application to the directory where you can to set up and create your cordova project. Then run the following command:

cordova create hello com.example.hello HelloWorld

This will create a folder called HelloWorld which will contain your project files. The app will be named as hello. By default, it will also create a skeletal web-based application. You can access the file via www/index.html.

Adding Platform Support

Once you create the project, you need to add app development platforms. Navigate to your project’s directory.

cd hello

You will find a folder called platforms. This folder will contain native code for each of the supported platforms. By default this is empty and we need to add the required platforms. Run the following code to add platforms:

cordova platform add ios
cordova platform add android

To check your current set of platforms:

cordova platform ls

Pre-requisites for building

In order to build the app, you will need to install SDKs (Software Development Kits) for each platform. Only browser platform has no pre-requisites.  To check if you satisfy requirements for building the platform, run the command:

cordova requirements
  • Android: Cordova for Android requires the Android SDK which can be installed on OS X, Linux or Windows. You will also need to install the Java Development Kit (JDK) and Gradle.  Sometimes, you might need to set up environment variables manually in order to function correctly.
  • iOS: Apple tools require you to build iOS applications only run on the OS X operating system on Intel-based Macs. You will need to install Xcode 7.0 (the minimum required version) which runs only on OS X version 10.10.4 (Yosemite) or greater, and it includes the iOS 9 SDK (Software Development Kit).
  • Windows: You will need Windows 8.1 OS  (32 or 64-bit machine) along with Visual Studio 2015 or Visual Studio 2013.

Once you satisfy the requirements, you will be able to build the app.

Config.xml

Config.xml is the file where we can set/change the configuration of the app. When we create an  app, a default config file will be created. This can be modified. Some of the important configuration items in the file include:

  • widget: It contains the app reverse domain value (com.example.hello) that we specified when creating the app.
  • name: The name of the app that we specified when creating the app.
  • description: The description of the app.
  • author: The author of the app.
  • content: The app’s starting page (index.html which is placed inside the www directory).
  • plugin: The plugins that are currently installed.
  • access: Used to control access to external domains. The default origin value is set to * which means that access is allowed to any domain. This value will not allow some specific URLs to be opened to protect information.
  • allow-intent: It allows specific URLs to ask the app to open. For example, <allow-intent href = “tel:*” /> will allow tel: links to open the dialer.
  • platform: The platforms (iOS/Android/Windows) for building the app.

Build the App

As earlier pointed out, my default cordova create has made a skeletal web-based application location in the folder www. Open the index.html file and edit the file. Once your app is ready for build, run the following command to build for Android

cordova build android

Similarly, you can build for iOS/Windows or just type cordova build to build for all platforms.

Testing

You can test in the app in an emulator. Run the below command to open up an Android emulator to test the app

cordova emulate android

You can also plug the handset into your computer and test the app directly. For this you will need to set up the device for testing, following procedures that vary for each platform.

cordova run android

Plugins

Cordova offers API that can be used for implementing native mobile functions to your JavaScript app. It means that your app will be able to access mobile features like camera, location data, file system etc. They are typically hosted on npm and you can search for them on the plugin search page

cordova plugin search camera

To add the plugin to your project, run the below command

cordova plugin add cordova-plugin-camera

Updates

You can update cordova to the latest version by running the below command:

npm update -g cordova

To update platforms, you are targeting:

cordova platform update android --save
cordova platform update ios --save

Happy Developing your first mobile app with Cordova !!

Leave a Reply

Ask Bharat