Cordova

Cordova is an open-source mobile development framework. It uses the standard web technologies using HTML5, CSS and Javascript, with Cordova we can very much achieve this and package the web application.

 

Features of Cordova

Cordova Core Components These components will be used for creating a base of the app so we can spend more time to implement our own logic.

Command-line interface This tool can be used for starting projects building processes for different platforms.

 

Cordova Advantages

·       Cordova offers one platform for building hybrid mobile apps

·       As we use javascript when working with Cordova we don’t need to learn a platform specific programming languages.

·       It is faster to develop hybrid app than native app so Cordova can save on the development time.

 

What Cordova Provides?

Cordova project consists of three main features

·       Command line tool

·       Full Access to hardware features.

·       Ability to support future features.

 

Cordova Limitations

·       Cross browser compatibility can create a lot of issues, we have to cover a large number of devices.

·       Some plugins have compatibility issues with different devices and platforms.

Cordova Environment Setup

To begin with the setup, we need to first install a few components

NodeJS – It is the platform needed for Cordova development.

Android SDK- For Android platform, you have to install Android SDK on your machine.

XCode- For ios platform, you need to install Xcode on your machine.

 

Creating App

Step 1- Creating App

[code]

Open the directory where you want the app to be installed in command prompt.

C:\users\username\desktop>cordova

·       Create Cordova Project io.cordova.hellocordova  cordovaApp

·       Cordova Project is the directory name where the app is created.

·       io.cordova.hellocordova is the default reverse domain value.

·       CordovaApp is the title of your App.

[/code]

 

Step 2- To Add Platforms

[code]

Open your project directory in the command prompt.it is the cordovaProject.All you need is to have install platform SDK

C:\users\username\desktop\cordovaProject>cordova platform add android or ios.

[/code]

Step 3 – Flow to build and run it on mobile device or emulator

[code]

C:\users\username\desktop\cordovaProject >cordova build android

Note:- We use genymotion android emulator it is more responsive and faster. once we run the app, it will install on the platform we specified.

[/code]

Cordova –Config.xml File

Config.xml file is the place where we can change the configuration of an app when we create the app, the default config file will be created.

 

Config.xml Configuration Table

Widget -The app reverse domain value we specified when creating an app

Name- name of the app, we specified when creating an app.

Description -description for the app.

Author –author of the app

Content- the app’s starting page.

Plugin - currently installed plugins

Access - control access to external domains.Value will not allow some specific URLs to be opened

Allow. Intent – specific URLs to ask the app to open for e.g. <allow-intent href=”txt”/>

Platform – platform for building the app.

Cordova – Storage

We use storage API available for storing data on the client apps. This will show you how to use local storage.

Step 1- Adding Buttons

We will create four buttons in the index.html file.The buttons will be located inside the  div.class=”app” element

<button id =”setLocalStorage“>SET LOCAL STORAGE </button>

<button id =”showLocalStorage”>SHOW LOCAL STORAGE</button>

<button id =”removeProjectFromLocalStorage”>REMOVE PROJECT</button>

 Step 2- Adding Event Listeners

Cordova Security Policy

We will also assign window. Local storage to a local Storage variable we will use later.

document.getElementById(“SetLocalStorage”).addEventListener(“click”,SetLocalStorage)

 

Step 3- Creating Functions

[code]

function setLocalStorage(){

localStorage.setItem(“Name”,”Bhawna”);

localStorage.setItem(“Occupation”,”Developer”);

localStorage.setItem(“Platform”,”cordova”);

Next one will log data to console

function showLocalStorage(){

console.log(localStorage.getItem(“Name”));

console.log(localStorage.getItem(“Occupation”));

console.log(localStorage.getItem(“Platform”));

 [/code]

Cordova – Events

List are the various events that are used in cordova projects following table

[code]

deviceReady- This event is triggered once Cordova is fully loaded, no Cordova functions can be called before everything is loaded.

Pause-This event is triggered when the app put into the background.

Resume-This event is triggered when the app is returned from the background.

Backbutton- Event is triggered when the back button is pressed.

Menubutton-Event is triggered when the menu button is pressed.

Searchbutton -This event is triggered when the search button is pressed.

Startcallbutton – This event is triggered when the start call button is pressed.

[/code]

Above are the basics of Cordova , to learn more in detail from our experienced developers click on to

http://skillbakery.com/courses/cordova.html