NAME : OMKAR KHATU

CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

RayatShikshanSanstha’s
Mahatma Phule Arts, Science & Commerce College, Panvel, Dist. – Raigad
Reaccredited by NAAC at ‘A’ grade with CGPA of 3.16 “Best College
Award” by University of Mumbai Founder: Dr.
KarmaveerBhauraoPatil, D.Lit.

CERTIFICATE
Class:-S.Y.B.Sc.IT Year:-2020-21

This is to certificate the work entered in the journal

is the work of Kumar Prerna Sanjivan MhatreOf S.Y.B.Sc(IT) Exam

No.197010 Student of Rayat Shiksahan Sanstha’s Mahatma Phule Arts, Science,

and Commerce Collage, Panvel, has completed a “Applied Mathematics” . In

the academic year 2020-2021. The work of the student is original and the

information included in the case study is true to the best of my

Knowledge.
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 14

___________________ Head of

External Department

Subject

Examiner Incharge
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

INDEX
1A Creating and building simple ‘Hello World” App
using Cordova

1B
Adding and Using Buttons to App using Cordova

2A Creating Events and Using Functions in App

using Cordova

2B Handling and Using Back Button

3A Installing Plugins and using battery plugin

3B Installing and using Camera Plugin

4A Installing and using Contact Plugin
4B Installing and using Device Plugin
5A install and using accelerometer
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

plugin
5B create and using prompt function
6A
Installing and using Globalization
Plugin
6B Installing and using Network Information
Plugin
7A Installing and using Splash Screen
Plugin

7B Installing and using Vibration

Plugin

8 Developing Single Page App

Setting up cordova environment

Steps of Installation and Configuration

Software’s:-
1)node –v6.10.3
2) jdk-8u131-windows
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

3)git-2.13.0
4)intelhaxm-android
5)gradle-4.0
6)Android SDK

Configuring Paths:-
Go to Environment Variable and in System Variables click on New button

JAVA_HOME=C:\Program Files\Java\jdk1.8.0_131

Click again on New Button and set the paths for

GRADLE_HOME AND ANDROID_HOME
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

GRADLE_HOME=C:\Gradle
ANDROID_HOME=C:\Users\Admin\AppData\Local\Android \sdk

Now in same window select variable name “Path” and press “Edit Button”&
update the below given paths.
path=C:\Gradle\bin;
C:\Program Files\Java\jdk1.8.0_131\bin;
C:\Program Files\nodejs;
C:\Program Files\Git\cmd;
C:\Users\ckt\AppData\Local\Android\sdk\tools
C:\Users\ckt\AppData\Local\Android\sdk\platform-tools
C:\Users\ckt\AppData\Local\Android\sdk\tools\bin
C:\Program Files\Git\cmd\bin;
C:\gradle-4.0\bin
C:\Users\ckt\AppData\Roaming\npm;

Installation of Cordova
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

Open CMD (command prompt) and type the following command npm install –

g cordova

Go to ckt/.androidRight click in window Git Bash here write cmd

touch repositories.cfg
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

Go to Users\ckt on cmd sdkmanager - -licenses accept

all licenses

Creation of AVD(Android Virtual Device)

Open CMD and type command:-

Browse to C:\Users\ckt\AppData\Local\Android\sdk\emulator
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

You can list your AVD with the command:-

Creation of AVD is the One Time Process........

you don’t need to create AVD for every project/app

NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

Practical No.:- 1A
Creating and building simple ‘Hello World” App using
Cordova
Step 1:-
Create a folder cordovademo in any drive. Open CMD(command
prompt) & change the directory to the folder cordovademo
Create your first Application practical1A with the help of
below command:-
Cordova create pract1a io.cordova.hellocordova HelloWorld It
will create a folder pract1a in your present directory with the help
of package name io.cordova.hellocordova and App name
HelloWorld.

Adding android @6.2.2 platform

Building app using cordova build android command

NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

Running app using cordova run android command

Output:
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

Practical No.:- 1B Adding and Using Buttons to App using Cordova

Index.html

<body>
<div class="app">
<h1>HELLO WORLD</h1>
<div id="deviceready" class="blink">
<button id="HelloWorld">Click Me</button> </div>
<p class="event listening">Connecting to Device</p>

Index.js

receivedEvent: function(id) { console.log('Received Event: ' +

id);

document.getElementById("HelloWorld").addEventListe
ner("click",SayHello); function SayHello(){ alert("Welcome to Cordova
android Project!!!");} }
}; app.initialize();

Output:
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

Practical No.:- 2A Creating Events and Using Functions in App using

Cordova

Index.html:- no change

Index.js
receivedEvent: function(id) { console.log('Received Event: ' +
id);
document.addEventListener("volumeupbutton",vup
Func,false); document.addEventListener("volumedownbutton",v
dnFunc,false); function vupFunc(){ alert('Volume
UP');} function vdnFunc(){ alert('Volume DOWN');} }
}; app.initialize();

OUPUT:
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

2b) Handling and Using Back Button

Index.html: no change Index.js

receivedEvent: function(id) { console.log('Received Event: ' +

id);

document.addEventListener("backbutton",onBackK
eyDown,false);
function onBackKeyDown(e){ e.preventDefault(); alert('I am Back Button');} }
};
Output:
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

Cordova Plugman is a useful command line tool for installing and managing
plugins. You should use plugman if your app needs to run on one specific
platform.

Installing Plugman command: npm install -g plugman Practical:3

3a) Installing Plugins and using battery plugin

Adding and installing battery Plugin - cordova plugin add cordova-plugin-

battery-status
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

Index.js

receivedEvent: function(id) {

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

window.addEventListener("batterylow",onBatteryLo
w,false); window.addEventListener("batterycritical",onBatter
yCritical,false); window.addEventListener("batterystatus",onBatter
yStatus,false);

function onBatteryStatus(info){ alert("BATTERY STATUS:\n Whats the

Level?"+info.level+"\n is plugged?"+info.isPlugged);}

function onBatteryLow(status){ alert("battery in low level" +

status.level+"%");}

function onBatteryCritical(status){ alert("Battery is critical now"+

status.level+"%\n start charging soon!");} }};

app.initialize();
Output:
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

3b) Installing and using Camera Plugin

Adding and installing camera Plugin: cordova plugin add cordova-plugin-

camera Index.js

receivedEvent: function(id) {

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

document.getElementById("cameraTakePicture").addEv entListener("click",
cameraTakePicture);function cameraTakePicture()
{
navigator.camera.getPicture(onSuccess, onFail,
{
quality: 50,
destinationType: Camera.DestinationType.DATA_URL
}); function onSuccess(imageData)
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

{ var image = document.getElementById('myImage'); image.src =

"data:image/jpeg;base64," + imageData;
} function onFail(message)
{
alert('Failed because: ' + message); }
}

}
}; app.initialize();
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

OUTPUT:

Practical No: 4
4a) Installing and using Contact Plugin

Adding and installing Contact Plugin: cordova plugin add cordova-plugin-

contacts

Html

<button id = "createContact">ADD CONTACT</button>

<button id = "findContact">FIND CONTACT</button>
<button id = "deleteContact">DELETE CONTACT</button

Index.js
receivedEvent: function(id) { console.log('Received Event: ' +
id);
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10
document.getElementById("createContact").addEventList
ener("click", createContact); function
createContact() {
var myContact = navigator.contacts.create({"displayName":
"Test User"}); myContact.save(contactSuccess, contactError);

function contactSuccess() {
alert("Contact is saved!");
}

function contactError(message) {
alert('Failed because: ' + message);
}

}
}
};app.initialize();
OUTPUT:
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

4b) Installing and using Device Plugin

Adding and installing Device Plugin: cordova plugin add cordova-plugin-device

Html
</div>
<h1>Get the Device Details</h1>
<button id = "cordovaDevice">DEVICE INFO</button>
</div>

index.js
receivedEvent: function(id) {

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

document.getElementById("cordovaDevice").addEventList
ener("click", cordovaDevice);
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10
function cordovaDevice() {
alert("Cordova version: " + device.cordova + "\n" +
"Device model: " + device.model + "\n" +
"Device platform: " + device.platform + "\n" +
"Device UUID: " + device.uuid + "\n" +
"Device version: " + device.version);
}}
}; app.initialize();
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

OUTPUT:

Practical No:5
5a) install and using accelerometer plugin

Adding and installing accelerometer Plugin: cordova plugin add cordova-

plugin-device-motion

Index.html
<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>
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

<h3>Acceleration</h3>
<button id = "getAcceleration">GET
ACCELERATION</button>

Index.js
receivedEvent: function(id) { console.log('Received Event: ' +
id);
document.getElementById("getAccel").addEventListener
("click",getAccel);
function getAccel() {

navigator.accelerometer.getCurrentAcceleration(su
ccess,error);
function success(acceleration)
{
alert('Acceleration
X:'+acceleration.x+'\n'+
'Acceleration
Y:'+acceleration.y+'\n'+
'Acceleration Z:'+acceleration.z+'\n'+
'Timestamp:'+acceleration.timestamp
+'\n');
}; function error()
{
alert('error!!');

};
}
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

}
}; app.initialize();

OUTPUT:

5b) create and using prompt function

Adding and installing dialogs Plugin: cordova plugin add cordova-plugin-dialogs

Index.html

<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>

<button id = "dialogAlert">ALERT</button>
<button id = "dialogConfirm">CONFIRM</button>
<button id = "dialogPrompt">PROMPT</button> </div>
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

Index.js

receivedEvent: function(id) { console.log('Received Event: ' +

id);

document.getElementById("dialogAlert").addEventListe ner("click",
dialogAlert);

document.getElementById("dialogConfirm").addEventLis tener("click",
dialogConfirm);

document.getElementById("dialogPrompt").addEventLis tener("click",
dialogPrompt);

function dialogAlert() {
var message = "I am Alert Dialog!";
var title = "ALERT"; var buttonName = "Alert
Button";

navigator.notification.alert(message, alertCallback, title, buttonName);

function alertCallback() {
console.log("Alert is Dismissed!");
}
}
function dialogConfirm() { var message = "Am I Confirm
Dialog?"; var title = "CONFIRM"; var buttonLabels =
"YES,NO"; navigator.notification.confirm(message,
confirmCallback, title, buttonLabels);

function confirmCallback(buttonIndex) {
console.log("You clicked " + buttonIndex + "
button!"); }
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

}
function dialogPrompt() { var message = "Am I Prompt
Dialog?";
var title = "PROMPT"; var buttonLabels =
["YES","NO"]; var defaultText = "Default"
navigator.notification.prompt(message,
promptCallback, title, buttonLabels, defaultText);

function promptCallback(result) {
console.log("You clicked " + result.buttonIndex + "
button! \n" +
"You entered " + result.input1); }
}

}
}; app.initialize();

OUTPUT:
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

Practical No:6
6a) Installing and using Globalization Plugin

Adding and installing globalization Plugin:-cordova plugin add cordova-plugin-

globalization

index.html

</div>
<button id="global">Get Globalization Information</button>
</div> Index.js

document.getElementById("global").addEventListener("click",gl obal1);

function global1()
{ var
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

lang=navigator.globalization.getPreferredLanguage(succ,err); function succ(lang)

{
alert("your language:"+lang.value);
}
var locale=navigator.globalization.getLocaleName(succ1,err); function
succ1(locale)
{
alert("your locale:"+locale.value);
}
var date=new Date();
var options={formatLength:'short',selector:'date and time'}; var
date1=navigator.globalization.dateToString(date,succ2,err,opti ons);
function succ2(date1)
{
alert("your Date is"+date1.value);
}
var currCode='INR' var
curr=navigator.globalization.getCurrencyPattern(currCode,succ
3,err);
function succ3(curr)
{
alert('pattern:'+curr.pattern+'\n'+ 'code:'+curr.code+'\n'+
'decimal:'+curr.decimal+'\n'+
'grouping:'+curr.grouping);
}
function err() {
alert("error getting global info");
}
}

Output:
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

6b) Installing and using Network Information Plugin

Adding and installing network information Plugin:

cordova plugin
add cordova-plugin-network-information

Index.html

</div><button id="getinfo">Get Network

Information</button></div> Index.js

document.getElementById("getinfo").addEventListener("click",g etinfo);
function getinfo()
{
var networkState=navigator.connection.type; var states={};
states[Connection.UNKNOWN]='Unknown connection';
states[Connection.ETHERNET]='Ethernet connection';
states[Connection.WIFI]='wifi connection'; states[Connection.CELL_2G]='Mobile
2G '; states[Connection.CELL_3G]='Mobile 3G';
states[Connection.CELL_4G]='Mobile 4G'; alert('type'+states[networkState]);
}
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

Output:
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10
Practical No:7

7a) Installing and using Splash Screen Plugin

Adding and installing splashscreen Plugin: cordova plugin add cordova-

plugin-splashscreen

Open the CONFIG.XML file with Notepad and Edit it as

follows:-

<plugin name="cordova-plugin-network-information" spec="^1.3.3" />

<plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
<preference name = "SplashScreen" value =
"screen" />
<preference name = "SplashScreenDelay" value =
"3000" />
<preference name = "SplashMaintainAspectRatio" value = "true" />

</widget> Output:

7b) Installing and using Vibration Plugin

NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10
Adding and installing vibration Plugin: cordova plugin add cordova-plugin-
vibration

Index.html

</div>

<h3> Vibration </h3>

<button id="vibn"> NORMAL VIBRATION </button>
<button id="vibp"> VIBRATION WITH PATTERN</button>
<button id="vibc"> STOP VIBRATION </button> </div> Index.js

receivedEvent: function(id) { console.log('Received Event: ' +

id);

document.getElementById("vibn").addEventListener("click",vib N);
document.getElementById("vibp").addEventListener("click",vib P);
document.getElementById("vibc").addEventListener("click",vib C);
function vibN()
{ var time=3000;
navigator.vibrate(time);
}
function vibP()
{
var pattern=[1000,1000,1000,1000]; navigator.vibrate(pattern);
}
function vibC()
{
navigator.vibrate(0);
}
}
}; app.initialize();
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10

Output:

Practical No:8

Developing Single Page App

Index.html
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/ionic.css">
<script type="text/javascript" src="cordova.js"> </script>
<script type="text/javascript" src="js/index.js"> </script>
<form>
<div class="list">
<input type="hidden" id="id" value=" "/>
<div class="item">
<label> FIRST NAME: </label>
<input type=text id="fname" required/>
</div>
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
ROLL NO. : 10
<div class="item">
<label> LAST NAME: </label>
<input type=text id="lname" required/>
</div>
<div class="item">
<label> AGE: </label>
<input type=text id="age" required/>
</div>
<div class="item">
<button type=submit class="button button-block" id="submit">SUBMIT
</button>
</div>
</div>
</form>

Index.js

receivedEvent: function(id) { console.log('Received Event: ' +

id);
ROLL NO. : 10

document.getElementById("submit").addEventListener("click",s how);
function show()
{
var fname=document.getElementById("fname").value; var
lname=document.getElementById("lname").value;

var age=document.getElementById("age").value;
alert("Welcome" + fname + " " + lname + " " + "your age is"
NAME : OMKAR KHATU
CLASS : S.Y.B.Sc.I.T.
+ age);
}
}
}; app.initialize();

Output: