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?
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.
- OS X
- Blackberry 10
- Windows 8.1, Phone 8.1, 10
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
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.
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:
- 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 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.
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
cordova plugin search camera
To add the plugin to your project, run the below command
cordova plugin add cordova-plugin-camera
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 !!