Practical No.1: Cordova Basics and Configurations

Practical No.1: Cordova Basics and Configurations.
Installation: We need the following softwares.

a) Node.js
b) Git
c) Java (jdk 8.1)
d) Android SDK Manager(or SDK Manager or Studio) with Emulator(AVD)
Install Node.js
P age |1 SYBSc(IT) SEM – III MOBILE PROGRAMMING

 Install Git

 Install Cordova
Run command in command prompt: npm install –g cordova

 Install Java

 Install Android Studio

For checking the versions of the Installed software’s:
Add the path in

Properties – Advanced system settings – Environment variables
In User Variable

In System variables

Practical no.2: Creating and Building Simple “Hello World” App using Cordova
 Step 1: Creating a new directory and project.
 Step 2: Adding the Platform for application.
Index.html
<body>
<div class="app">
<h1>Hello World</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
</body>
 Step 3: Build the Project.

 cordova emulate android
P a g e | 10 SYBSc(IT) SEM – III MOBILE PROGRAMMING

Practical No. : 3 Configuration of Cordova Project
Once we have created a cordova project a directory structure is created
on machine is as below
Here we get a file named config.xml
The file contains all the configuration elements related to our project. We can also change the
configuration here in this file as per our requirement.
The file contains code below
Config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hello" version="1.0.0"xmlns="http://www.w3.org/ns/widgets"

xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloApp</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="[email protected]" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>

Practical no.4: Adding and using Event Listeners with Functions.
 Creating new application,
 Open the index.js file.

receivedEvent: function(id)
{
document.addEventListener("volumeupbutton",volUpFunction, false);
document.addEventListener("volumedownbutton",volDownFunction, false);;
var parentElement = document.getElementById(id);

var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);

}
};
function volUpFunction()
{

alert('I am Volume Up Button...')
};
function volDownFunction()
{
alert('I am Volume Down Button...')
};
app.initialize();
 Now build and run the application.
Path of Apk
D:\demo\EveFun\platforms\android\app\build\outputs\apk\debug

Practical No.5: Adding Using Buttons.
 Create new Cordova Project for button demo.
 Add the android platform .
 Open index.html
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<button id = "HelloWorld">Click Me</button>
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
 Open index.js
onDeviceReady: function()
{
document.getElementById("HelloWorld").addEventListener("click",
sayHello);
this.receivedEvent('deviceready');
},
function sayHello()
{
alert('Welcome to The World Of Mobile Programming......');
};
app.initialize();

 Build the application.
 Run the Project.

Path of Apk
D:\demo\ButtonCP\platforms\android\app\build\outputs\apk\debug

Practical No.6: Handling and Using Back Button.
 Create cordova for back button.
 Create android platform.
 Open index.js file.

document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(e)
{
e.preventDefault();
alert('I am Back Button');
}
 Build and Run the application.

Practical No.7: Installing and Using Plugins.
Run Command in command Prompt:

npm install –g plugman
 Installing Plugman.
 Installing Plugins.

Practical No.8 : Installing and Using Battery Status Plugins.
 Creating new application.
 Adding battery status plugin.
 Open the index.js file.

receivedEvent: function(id) {
window.addEventListener("batterystatus", onBatteryStatus, false);
window.addEventListener("batterylow", onBatteryLow, false);
window.addEventListener("batterycritical", onBatteryCritical, false);
}
function onBatteryStatus(info){
alert("BATTERY STATUS:\n Whats the Level?" + info.level +"\n is Plugged?"
+ info.isPlugged);
};
function onBatteryLow(status){
alert("Battery is in Low Level" + status.level + "%");
};
function onBatteryCritical(status){
alert("Battery is Critical Now" + status.level + "%\n Start charging Soon!");
};
app.initialize();

Practical No.9: Installing and Using Camera Plugin.
 Adding camera plugin.
 Open index.html file.

<div class="app">
<button id = "takePic">TAKE PICTURE</button>
<img id = "myImg"></img>
</div>

{
document.getElementById("takePic").addEventListener("click",takePic);
}
And before the app.initialize(); write the function shown below.,
function takePic()
{
navigator.camera.getPicture(onSuccess,onFail,
{
quality:50,
destinationType:Camera.DestinationType.DATA_URL
});
function onSuccess(imageData){
var image = document.getElementById('myImg');
image.src = "data:image/jpeg;base64,"+imageData;
};
function onFail(message)
{
alert('Failed because:'+message);
};
};
app.initialize();

Practical No.10: Installing and Using Contacts Plugin.
 Adding contact plugin.

<div class="app">
<h3>Handling Contacts</h3>
<button id="addContact">ADD CONTACT</button><br><br>
<button id="searchContact">FIND CONTACT</button>
</div>

{
document.getElementById("addContact").
addEventListener("click",addContact);
document.getElementById("searchContact").
addEventListener("click",searchContact);
}
function addContact()
{
var contact=navigator.contacts.create();
contact.displayName="Tushar";
contact.nickname="Tushar";
contact.name="Tushar";
contact.save(contactSuccess,contactError);
function contactSuccess
{alert("Contact saved!")
}
function contactError(message)
{alert('Failed because:' +message);
}
};
function searchContact()
{
var myContact=navigator.contacts.create({"displayName":"Test User"});
var options = new ContactFindOptions();
options.filter="Tushar";
options.multiple=true;
options.desiredFields=[navigator.contacts.fieldType.id];
options.hasPhoneNumber=false;
var fields=[navigator.contacts.fieldType.displayName,navigator.contacts.
fieldType.name];
navigator.contacts.find(fields,onSuccess,onError,options);
function onSuccess(contacts)
{alert('Found' +contacts.length+'contacts.');
};
function onError(contactError)
{alert('onError!');
};
};
app.initialize();

Practical No.11: Installing and Using Device Plugin.
 Adding device plugin.

<div class="app">
<h3>Get The Device Details</h3>
<button id="myDevice">KNOW DEVICE DETAILS</button>
</div>

{
document.getElementById("myDevice")
.addEventListener("click", myDeviceDetails);
}
function myDeviceDetails() {
alert("My Cordova version: " + device.cordova + "\n" +
"My Device model: " + device.model + "\n" +
"My Device platform: " + device.platform + "\n" +
"My Device UUID: " + device.uuid + "\n" +
"My Device version: " + device.version);
};
app.initialize();


Practical No.1: Cordova Basics and Configurations

Uploaded by

Copyright:

Available Formats

Practical No.1: Cordova Basics and Configurations

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Practical No.1: Cordova Basics and Configurations

Uploaded by

Copyright:

Available Formats

Practical No.1: Cordova Basics and Configurations.

Installation: We need the following softwares.

P age |1 SYBSc(IT) SEM – III MOBILE PROGRAMMING

P age |2 SYBSc(IT) SEM – III MOBILE PROGRAMMING

P age |3 SYBSc(IT) SEM – III MOBILE PROGRAMMING

P age |4 SYBSc(IT) SEM – III MOBILE PROGRAMMING

P age |5 SYBSc(IT) SEM – III MOBILE PROGRAMMING

Add the path in

P age |6 SYBSc(IT) SEM – III MOBILE PROGRAMMING

P age |7 SYBSc(IT) SEM – III MOBILE PROGRAMMING

 Step 2: Adding the Platform for application.

 Step 3: Build the Project.

P age |9 SYBSc(IT) SEM – III MOBILE PROGRAMMING

P a g e | 10 SYBSc(IT) SEM – III MOBILE PROGRAMMING

Here we get a file named config.xml

The file contains code below

<widget id="io.cordova.hello" version="1.0.0"xmlns="http://www.w3.org/ns/widgets"

A sample Apache Cordova application that responds to the deviceready event.

<author email="[email protected]" href="http://cordova.io">

Apache Cordova Team

<content src="index.html" />

<plugin name="cordova-plugin-whitelist" spec="1" />

<access origin="*" />

<allow-intent href="http://*/*" />

<allow-intent href="https://*/*" />

<allow-intent href="sms:*" />

<allow-intent href="mailto:*" />

<allow-intent href="geo:*" />

<allow-intent href="market:*" />

<allow-intent href="itms:*" />

<allow-intent href="itms-apps:*" />

P a g e | 12 SYBSc(IT) SEM – III MOBILE PROGRAMMING

 Open the index.js file.

var parentElement = document.getElementById(id);

console.log('Received Event: ' + id);

P a g e | 13 SYBSc(IT) SEM – III MOBILE PROGRAMMING

 Now build and run the application.

P a g e | 14 SYBSc(IT) SEM – III MOBILE PROGRAMMING

 Add the android platform .

P a g e | 16 SYBSc(IT) SEM – III MOBILE PROGRAMMING

 Run the Project.

P a g e | 17 SYBSc(IT) SEM – III MOBILE PROGRAMMING

 Create android platform.

 Open index.js file.

 Build and Run the application.

P a g e | 18 SYBSc(IT) SEM – III MOBILE PROGRAMMING

Run Command in command Prompt:

P a g e | 21 SYBSc(IT) SEM – III MOBILE PROGRAMMING

 Adding battery status plugin.

 Open the index.js file.

 Build and Run the application.

P a g e | 23 SYBSc(IT) SEM – III MOBILE PROGRAMMING

 Adding camera plugin.

 Open index.html file.

 Open index.js file.

 Build and Run the application.

P a g e | 26 SYBSc(IT) SEM – III MOBILE PROGRAMMING

 Adding contact plugin.

 Open index.html file.

<allow-intent href="http:///" />

<allow-intent href="https:///" />