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:
