Apache Cordova basics

In this chapter we will create a simple application using Apache Cordova. This framework runs on Node.js and allows us to create a multi-platform mobile app by using web-technologies: HTML, CSS and JavaScript.

cordova basics

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:

cordova-folders

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

  • amazon-fireos
  • android
  • blackberry10
  • ios
  • Ubuntu
  • wp8 (Windows Phone 8)
  • windows (8.0, 8.1, Phone 8.1)
  • tizen

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:

cordova browser error

Just press OK and it should continue successfully.

On the opened tab you will see a default Cordova application.

cordova default app

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:

cordova customized app

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.

Leave a Reply

Be the First to Comment!