Multi-platform mobile apps on Cordova
How is it possible to write one app that can be run on Android, iOS, Windows Phone and BlackBerry OS? Cordova creates a native application with web-view that displays the entire web-application that you implement. It has extended access to the platform comparing to a casual mobile browser. For example, you can manipulate with camera, contacts, sounds, etc.
Since Cordova works on Node.js you need to install it first. Then:
> npm install –g cordova
Create Cordova application
Now you can execute Cordova basic commands. Let’s create a project:
> cordova create TestApp > cd TestApp
If you look inside this folder, you would see 4 folders: hooks, platforms, plugins and www:
Platforms folder contain all metadata of supported platforms. You should manually add platforms with help of command cordova platform add <platform_name>. We will use the simples platform – browser:
> cordova platform add browser
Cordova basic mobile platforms
- wp8 (Windows Phone 8)
- windows (8.0, 8.1, Phone 8.1)
You can run your app on one of platforms that you added to the project by executing cordova run <platform_name>:
> cordova run browser
This will open a new tab of your default browser with your application running. I’m using Google Chrome and I got such error:
Just press OK and it should continue successfully.
On the opened tab you will see a default Cordova application.
Now let’s customize it.
All basic layout files are located inside www folder.
Copy any image to your TestApp/www/img forlder. In my example I downloaded a Google logo.
Than edit the TestApp/www/index.html file. This file specifies the layout of your application. We need to add a text and an image to existing layout. Place into <div class=’app’> a dummy text and the <img> tag with src linking to image that you copied to TestApp/www/img previously. In my case this <div> looks like this:
<div class="app"> <h1>Apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> My First Cordova App <img src="img/googlelogo_color_272x92dp.png"> </div>
Then once again run Cordova application:
> cordova run browser
You will see changes applied:
So, if you got frontend skills you could easily create interactive single-page mobile apps using Apache Cordova. Before you run your project on a real mobile platform emulator, you need to install the platform SDK. In the next lessons we will discover how to run your app on Android.
If you have any notes for this Cordova basics turorial, please, leave them in the comments.