By using Cordova, we can build a web application that can run on many mobile devices both iOS and Android. This post will show you all the basic required steps to do it.
NodeJS
First of all, to use Cordova, we need to install NodeJS. I won’t cover how to install NodeJS here. I assume we have NodeJS already. Next step is:
Installing Cordova
To begin installing Cordova, we run this command:
npm install -g cordova
Create the App
Then we create the app by creating a directory and its necessary files. To do it we call:
cordova create hello com.example.hello HelloWorld
After that, we see a folder has been created. Then we go inside that folder, we cd to it: cd hello
If you open the folder, there is a www folder inside it, we place our web files there and that’s all.
Adding platforms
Then we add platforms to our app, let’s say Android and iOS, so we run this command:
cordova platform add ios cordova platform add android
Build it!
Then we can build the app by using this command:
cordova build
Or specifically we run
cordova build ios
Continue with Xcode or Android Studio
After building the app, we can open the built project using Android Studio or Xcode (it depends on what platform you are working on) then on these IDE you can build the app and publish it to Google Play or AppStore.
Configuring config.xml before building
I found it useful to configure the config.xml file before we build Android or iOS app using Cordova. Below are some lines of code to add to the config.xml for some purposes…
Defining an app icon
Add a png file as your app icon to the “res” folder beside the config.xml file (make it if you don’t have the res dir), for example icon.png then add this line to the config.xml:
<icon src="res/icon.jpg" />Specify the device orientation
To make it running in landscape mode, add:
<preference name="Orientation" value="landscape" />App version and build number
You can define the app version and build number version in widget tag:
<widget id="com.exampleapp.cool" version="1.3.0" android-versionCode="4" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">