SSM COLLEGE OF ENGINEERING

Accredited by NAAC
Approved by AICTE, Affiliated to Anna University | Recognized by UGC Under Section 2 (f) of 12 (B)
NH-544, Salem Main Road, Komarapalayam-638 183, Namakkal (Dist.), Tamil Nadu, India.
Web: www.ssmce.ac.in, Contact: 9894026708.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

RECORD NOTE BOOK

CCS332 – APP DEVELOPMENT LABORATORY

SEMESTER VI
ACADEMIC YEAR: 2024-2025

REGULATION 2021

STUDENT NAME : ……………………………………...…….………….

REGISTER NUMBER: ………………………………………………………..

YEAR / SEMESTER : ……………………………...…………….…….……..

COURSE NAME : B.E COMPUTER SCIENCE AND ENGINEEIRNG

1
 S.S.M. COLLEGE OF ENGINEERING
KOMARAPALAYAM

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

LABORATORY RECORD

REGISTER NUMBER:

Certified that this is a Bonafide record of Practical work done by

Mr./Ms.…………………………………………………………………………in the
CCS332 – APP DEVELOPMENT LABORATORY during the year 2024-2025.

Signature of Lab Incharge Signature of Head of the Department

Submitted for the Practical Examination held on……..................................

Internal Examiner External Examiner

2
 SSM COLLEGE OF ENGINEERING
Accredited by NAAC
Approved by AICTE, Affiliated to Anna University | Recognized by UGC Under Section 2 (f) of 12 (B)
NH-544, Salem Main Road, Komarapalayam-638 183, Namakkal (Dist.), Tamil Nadu, India.
Web: www.ssmce.ac.in, Contact: 9894026708.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Vision and Mission of the Institute

Vision
To propagate competent technical professionals and equipping them with knowledge and skills to
make a successful entry into the Technological Arena and also to bring out the innovative skills
to benefit the society, the nation and the world at large.

Mission
 To disseminate globally standardized technical education.
 To inculcate a high sense of discipline.
 To foster research & development.
 To gratify industry expectations through Industry – Institute interaction.
 To be student centered in leadership skills to face the challenges of the competitive
world.

Core Values
The core values of SSM College of Engineering are centred around promoting academic
excellence, holistic development, and ethical standards in engineering education. While the
college may not explicitly list all their values, several key themes are emphasized in their
mission and activities:
1. Academic Excellence: The college aims to provide high-quality education and foster the
development of knowledge and skills among students, preparing them for global
challenges.
2. Holistic Development: SSM College focuses on the overall growth of students,
encouraging participation in sports, cultural activities, and leadership programs alongside
academics.
3. Ethical Values: They emphasize the importance of instilling strong ethical values in
students, ensuring that they contribute positively to society as well-rounded professionals.
4. Innovation and Research: The college encourages innovation, creativity, and research,
fostering an environment that supports technological advancements and industry
partnerships.
5. Sustainability and Social Responsibility: The college values sustainability in its
operations and seeks to nurture socially responsible citizens who can contribute
meaningfully to society

3
Vision of the Department:
To create the holistic environment for the development of Computer Science and
Engineering Graduates employable at the global level and to mould them through
comprehensive educational programs and quality research for developing their competency
and innovation with moral values.
Mission of the Department:
1. Ensuring the academic growth by way of establishing centers of excellence and
promoting collaborative learning
2. Promoting research-based projects in the emerging areas of technology convergence for
the benefit of students and faculty
3. Motivating the students to be successful, ethical and suitable for in dusty ready
PROGRAM OUTCOMES (POs)
1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering
fundamentals, and an engineering specialization to the solution of complex engineering
problems.
2. Problem analysis: Identify, formulate, review research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
3. Design/development of solutions: Design solutions for complex engineering problems
and design system components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, and environmental
considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and
research methods including design of experiments, analysis and interpretation of data, and
synthesis of the information to provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and
modern engineering and IT tools including prediction and modeling to complex
engineering activities with an understanding of the limitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to
assess societal, health, safety, legal and cultural issues and the consequent responsibilities
relevant to the professional engineering practice.
7. Environment and sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and
need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or
leader in diverse teams, and in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and

4
 write effective reports and design documentation, make effective presentations, and give
and receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member
and leader in a team, to manage projects and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage
in independent and life-long learning in the broadest context of technological change.

PROGRAM SPECIFIC OBJECTIVES (PSOs)

PSO1: Programming Logic: Ability to identify, design and apply domain knowledge and
computational skills to intelligent solutions for Computer Science and Engineering related
processes in our ecosystem.
PSO2: Software Design: Ability to critique the role of Computer Science and Engineering in
multidisciplinary areas to transform thoughts into products through research and innovative careers.

PROGRAM EDUCATIONAL OBJECTIVES (PEOs)

PEO 1: Basic Skills – Graduates will be able to demonstrate their technical skills and competency
in various applications by providing creative and novel technological solutions.
PEO 2: Technical knowledge– Graduates will be able to ensure the effective contribution to the
society through critical thinking, innovations and research with the broad spectrum of skills in
frontline technologies.
PEO 3: Managerial skills– Graduates will be equipped with multidisciplinary initiatives and
visions towards the growth of society with respect to ethical and lifelong learning.

5
 TABLE OF CONTENT
Ex No Date Experiment Title Page No Mark Signature
Using react native build a cross platform
1 04/03/2025 application for a BMI calculator. 07
Build a cross platform application for a
2 11/03/2025 simple expense manager which allows 11
entering expenses and income on each day
and displays category wise weekly income
and expense.
Develop a cross-platform application to
3 25/03/2025 convert units from imperial system to metric 15
system ( km to miles, kg to pounds etc.,)
Design and develop a cross platform
4 01/04/2025 application for day to day task (to-do) 18
management.
Design an android application using
5 08/04/2025 Cordova for a user login screen with
username, password, reset button and a 22
submit button. Also, include header image
and a label. Use layout managers.
Design and develop an android application
6 29/04/2025 using Apache Cordova to find and display 26
the current location of the user.
Write programs using Java to create Android
7 13/05/2025 application having Databases 29
 For a simple library application
 For displaying books available,
books lend, book reservation.
Assume that student information is available
in a database which has been stored in a
database server

6
Exp.No: 01
Date: 04/03/2025 Using react native, build a cross platform application for a BMI calculator

Aim:
To build a cross platform application for a BMI calculator using react native.

Algorithm:
1. Initialize React Native Project: Set up a new React Native project using the CLI.
2. Design User Interface: Create UI components using React Native's built-in elements for input fields (height,
weight), a calculation button, and a section to display the BMI result.
3. Manage User Input: Use React's state management (useState) to capture user input for height and weight.
4. Calculate BMI: Write a function to calculate BMI based on entered height and weight.
5. Display Results: Show the calculated BMI value and its category (e.g., Underweight, Normal, Overweight)
based on standard BMI ranges.
6. Styling and Testing: Apply styles for UI enhancement and responsiveness. Test the app on different devices
to ensure functionality.
7. Deployment: Prepare the app for iOS and Android platforms, following platform specific guidelines.
8. Publishing: Publish the app on app stores or distribute it through appropriate channels

7
Program:
App.js
import { StatusBar } from 'expo-status-bar';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import BmiForm from './components';

export default function App() {

return (
<SafeAreaView style={styles.container}>
<BmiForm />
<StatusBar style="auto" />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Components/index.js
import { useState } from "react";
import { Button, TextInput, View, StyleSheet, Text } from "react-native";
const BmiForm = () => {
//Defined useStates to keep track of values
const [height, setHeight] = useState('');
const [weight, setWeight] = useState('');
const [bmi, setBmi] = useState('');
// the func calculates bmi and updates the bmi value
function calculate_bmi() {
let h = Number(height) / 100;
let w = Number(weight);
let r = (w / (h * h)).toFixed(1);
if (r > 0) {
setBmi("BMI: " + r);
} else {
setBmi('Invalid data');
}
}
return (
<View>
<Text style={styles.label}>
Height
</Text>
<TextInput
style={styles.input}
onChangeText={setHeight}
value={height}
keyboardType="number-pad"
8
 placeholder="in cms"
/>
<Text style={styles.label}>Weight</Text>
<TextInput
style={styles.input}
onChangeText={setWeight}
value={weight}
keyboardType="number-pad"
placeholder="in kgs"
/>
<Button
style={styles.button}
title="Compute BMI"
onPress={calculate_bmi}
/>
<Text style={styles.bmiLabel}>
{bmi}
</Text>
</View >
);
};
const styles = StyleSheet.create({
input: {
flex: 0,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 20,
margin: 8,
padding: 8,
width: 300,
},
button: {
borderColor: 'blue',
},
label: {
fontWeight: 'bold',
fontSize: 15,
},
bmiLabel: {
fontSize: 40,
margin: 10,
justifyContent: 'center'
}
});
export default BmiForm;
lOMoARcPSD|499 237 14

9
Output:

Result:
Thus, the creation of a cross-platform application for a BMI calculator is done.

10
Exp.No: 02
Date: 11/03/2025 Build a cross-platform application for a simple expense manager which allows
entering expenses and income on each day and displays category wise weekly income
and expense.

Aim:
To build a cross-platform application for a simple expense manager which allows entering expenses and
income on each day and displays category-wise weekly income and expense.

Procedure:
1. Create an HTML file with a structure containing elements for input forms, tables, and display areas.
2. Write JavaScript logic to handle expense-related functionalities, utilizing local storage for data storage.
3. Initialize variables for form elements, expense list, and total amount. Retrieve expenses from local
Storage or initialize an empty array.
4. Create a function (render Expenses) to display expenses in the HTML table.
5. Calculate the total amount and update the corresponding display.
6. Create functions (add Expense and delete Expense) to handle expense addition and deletion.
7. Validate input values, update the expenses array, and callrender Expenses for display updates.
8. Attach event listeners to the expense form submission and the expense list for delete actions.
9. Call the render Expenses function initially to display existing expenses.
10. Ensure code adaptability by avoiding hard coding specific ID so values not likely to change.
11. Reference the JavaScript file in the HTML file using the <script> tag.

11
Program:
Index.html:
<!--index.html-->
<!DOCTYPEhtml>
<html>
<head>
<title>ExpenseTracker</title>
<linkrel="stylesheet"type="text/css"href="css/index.css"/>
</head>
<body>
<divclass="container">
<h1>ExpenseTracker</h1>
<divstyle="flex:auto;justify-content:space-between;">
<formid="expense-form">
<input type="text" id="expense-name" placeholder="Expense Name"required
/>
<inputtype="number"id="expense-amount"placeholder="Amount"required
/>
<button type="submit">Add Expense</button>
</form>
</div>
<divclass="expense-table">
<table>
<thead>
<tr>
<th>ExpenseName</th>
<th>Amount</th>
<th>Action</th>
</tr>
</thead>
<tbodyid="expense-list"></tbody>
</table>
<divclass="total-amount">
<strong>Total:</strong>
₹<spanid="total-amount">0</span>
</div>
</div>
</div>
<scriptsrc="js/index.js"></script>
</body>
</html>

12
Index.js:
const expenseForm = document.getElementById("expense- form");
const expenseList = document.getElementById("expense- list");
const totalAmountElement = document.getElementById("total- amount");
letexpenses= JSON.parse(localStorage.getItem("expenses")) ||[];

function renderExpenses() {
expenseList.innerHTML="";
let totalAmount = 0;
for(leti=0;i<expenses.length;i++)
{constexpense=expenses[i];
constexpenseRow=document.createElement("tr");
expenseRow.innerHTML =
`
<td>${expense.name}</td>
<td>₹${expense.amount}</td>
<tdclass="delete-btn"data-id="${i}">Delete</td>
`;
expenseList.appendChild(expenseRow);
totalAmount += expense.amount;
}
totalAmountElement.textCo ntent = totalAmount.toFixed(2);
// Save expenses to localStorage
localStorage.setItem("expenses",JSON.stringify(expenses));
}
functionaddExpense(event){
event.preventDefault();const expenseNameInput = document.getElementById("expense- name");
const expenseAmountInput = document.getElementById("expense- amount");
const expenseName = expenseNameInput.value; const expenseAmount =
parseFloat(expenseAmountInput.val ue);
expenseNameInput.value= "";
expenseAmountInput.value="";
if(expenseName===""|| isNaN(expenseAmount)) {
alert("Please enter valid expense details.");
return;
}
constexpense={ name: expenseName, amount:expenseAmount,};
expenses.push(expense);
// Render expenses renderExpenses();
}
functiondeleteExpense(event){
if (event.target.classList.contains("delete-btn")) {
const expenseIndex = parseInt(event.target.getAttribute("data-id"));
expenses.splice(expenseIndex, 1);
renderExpenses();
}
}
expenseForm.addEventListener("submit", addExpense);
expenseList.addEventListener("click", deleteExpense);
renderExpenses();

13
Output:

Result:
Thus, the creation of a cross-platform application for a simple expense manager is done.

14
Exp.No: 03
Date: 25/03/2025 Develop a cross-platform application to convert units from imperial system to metric
system ( km to miles, kg to pounds etc.,)

Aim:
To Develop a cross-platform application to convert units from imperial system to metric system (km to
miles, kg to pounds etc.,)

Algorithm:
1. Initialize Project: Set up a cross-platform application using a framework like React Native.
2. Design UI: Create components for entering daily expenses and income (amount, category, date).
3. Manage Data: Implement state management to store and organize user- entered expense and income
data.
4. Calculate Weekly Summary: Write functions to aggregate and categorize daily expenses and income
into a weekly view.
5. Display Category-wise Summary: Show category-wise totals for weekly income and expenses in an
organized format.
6. Apply Styling: Apply styles for an intuitive and visually appealing interface
7. Testing and Validation: Thoroughly test the app to ensure accurate calculations and functionality.
8. Deployment: Prepare the app for deployment on iOS and Android platforms.
9. Publishing: Publish the app on app stores or distribute it through suitable channels.

15
Program:
App.js
import{StatusBar}from'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import FormBox from './components'
export default function App() {
return (
<View style={styles.container}>
<FormBox/>
</View>
);
}
const styles=StyleSheet.create({
container: {flex: 1, backgroundColor: '#fff', justifyContent: 'center',
},
});

Components/index.js
importReact,{useEffect,useState}from"react";
import{Button,TextInput,View,StyleSheet,Text}from"react-native";
import DropdownComponent from "./dropdown-input";
importcdfrom'../conversion-data.json'

const FormBox=()=>{
//console.log(cd["length"]);
const [unit, setUnit] = useState(cd["unit_names"][0]["value"]);
const [from_unit, setFrom_unit] = useState(null);
const [to_unit, setTo_unit] = useState(null);
const [inputData, setInputData] = useState(null);
const [outputData, setOutputData] = useState('0.00');
useEffect(() => {
setFrom_unit(cd[unit][0]["value"]);
setTo_unit(cd[unit][0]["value"]);
setOutputData('0');
setInputData(null);
},
[unit])
const calculate_conversion=(value)=>{ setInputData(value);
letto_litre=Number(value)/from_unit; let to_final = to_litre * to_unit;
setOutputData(to_final);
}
return(
<View style={styles.container}>
<DropdownComponent data={cd["unit_names"]}
value={unit}
setValue={setUnit}
/>
<DropdownComponent dta={cd[unit]} value={from_unit} setValue={setFrom_unit}/>
<TextInput style={styles.numberInput} value={inputData} placeholder="0"
onChangeText={calculate_conversion}inputMode="numeric"/>
<DropdownComponent dta={cd[unit]} value={to_unit} setValue={setTo_unit}/>

16
<Textstyle={styles.outputData}>
{outputData}
</Text>
</View>
)
}
const styles= StyleSheet.create ({ container: {background Color: 'white', padding: 16,},
numberInput: {
height: 50,
borderColor: 'gray',
borderWidth: 0.5,
borderRadius: 8,
paddingHorizontal:8,
margin:10
},
outputData: {
fontSize:30,
margin: 10,
textAlign: 'center'
}
})
export default FormBox;

Output:

Result:
Thus, the creation of a cross-platform application for a unit converter is done.

17
Exp.No: 04
Date: 01/04/2025 Design and develop a cross platform application for day to day task (to-do)
management.

Aim:
To Design and develop a cross platform application for day to day task (to-do) management.

Algorithm:
1. Initialize Project: Create a new cross-platform application using a framework like React Native or
Flutter.
2. Design User Interface: Develop UI components using platform-specific or custom UI elements for
tasks, categories, and task details.
3. Task Management Structure: Define a data structure to represent tasks with attributes such as title,
description, deadline, priority, category, and completion status.
4. User Input and Interaction: Capture user input for creating and editing tasks through input fields.
5. Task Organization and Sorting: Allow users to categorize tasks into different lists or categories
6. Task Notifications and Reminders: Implement a feature for setting task reminders or notifications for
upcoming deadlines or import and tasks.
7. User Authentication and Data Persistence: Implement user authentication if needed for multiple users
or data synchronization across devices.
8. Styling and UI Enhancements: Apply styling for a visually appealing and user-friendly interface.
9. Deployment and Publishing: Prepare the application for deployment on iOS and Android platforms.

18
Program:
import {KeyboardAvoidingView, StyleSheet, Text, TextInput, TouchableOpacity, Keyboard, View, ScrollView
} from 'react-native';
import Task from'./components/task';
import { useState } from 'react';
export default function App() {const[task, setTask]=useState();
const [taskItems, setTaskItems]=useState([]);
const handleAddTask = () => { Keyboard.dismiss();
setTaskItems([...taskItems, task])
setTask(null);
}
const completeTask=(index)=>{ let itemsCopy = [...taskItems];
itemsCopy.splice(index, 1);
setTaskItems(itemsCopy)
}
return(
<View style={styles.container}>
<ScrollViewcontentContainerStyle= {{ flexGrow: 1,}}
keyboardShouldPersistTaps='handled'>
<View style= {styles.wrapper}>
<Text style= {styles.heading}>Task List's</Text>
<View style= {styles.tasklist}>
{/*tasks here...*/}
{/*This is where the tasks will go!*/}
{
taskItems.map((item,index)=>{
return (
<TouchableOpacitykey={index}onPress={()=>completeTask(index)}>
<Tasktext={item}/>
</TouchableOpacity>
)
})
}
</View>
</View>
</ScrollView>
<KeyboardAvoidingViewbehavior={Platform.OS === "ios" ? "padding": "height"}
style={styles.writeTaskWrapper}>
<TextInput style={styles.input} placeholder={'Write a task'} value={task} onChangeText={text =>
setTask(text)} />
<TouchableOpacityonPress={()=>handleAddTask()}>
<Viewstyle={styles.addWrapper}>
<Textstyle={styles.addText}>+</Text>
</View>
</TouchableOpacity>
19
 </KeyboardAvoidingView>
</View>
);
}
const styles=StyleSheet.create ({ container: {flex:1,backgroundColor:'#E8EAED'},
wrapper: { paddingTop:80,paddingHorizontal:20,},
heading: { fontSize: 24, fontWeight:'bold'},
tasklist: { marginTop:30,},
writeTaskWrapper: {
position: 'absolute', bottom: 20,
width: '100%', flexDirection:'row',
justifyContent: 'space-around', alignItems: 'center'
},
input: { paddingVertical:15, paddingHorizontal: 15, backgroundColor:'#FFF', borderRadius: 20, borderColor:
'#C0C0C0', borderWidth: 1, width:300,},});

20
Output:

Result:
Thus, the creation of a cross-platform application for a to-do app is done.

21
Exp.No: 05
Date: 08/04/2025 Design an android application using Cordova for a user login screen with username,
password, reset button and a submit button. Also, include header image and a label.
Use layout managers.

Aim:
To Design an android application using Cordova for a user login screen with username, password, reset
button and a submit button. Also, include header image and a label. Use layout managers.

Algorithm:
1. Setup Cordova Project: Create a new Cordova project using the Cordova CLI.
2. Design User Interface: Use HTML, CSS, and JavaScript to design the login screen. Include HTML
elements for username input, password input, reset button, submit button, header image, and label.
3. Reset Button Functionality: Write JavaScript logic to reset the input fields when the reset button is
clicked.
4. Submit Button Functionality: Implement JavaScript validation for the entered username and password.
5. Include Header Image and Label: Add an HTML element for the header image, ensuring its proper
placement and styling.
6. Responsive Design: Ensure the layout and components are responsive and compatible with various
screen sizes and orientations using appropriate CSS and layout management techniques.
7. Testing and Validation: Test the login screen functionality on different devices and screen sizes to
ensure proper behavior.
8. Integration with Cordova: Integrate the HTML, CSS, and JavaScript files into the Cordova project
structure.
9. Build and Deployment: Build the Cordova application for the Android platform. Deploy the
application to an Android device or distribute it through appropriate channels.

22
Program:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-
eval'; style-src 'self'' unsafe-inline'; media-src *; img-src 'self' data: content :;">
<meta name="format-detection" content="telephone=no">
<meta name="ms application-tap-highlight"content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport- fit=cover">
<meta name="color-scheme" content="lightdark">
<link rel="stylesheet" href="css/index.css">
<title> Hello World</title>
<style>
body{
padding-top:20px;
}
.header{
text-align:center;
}
.login-form{
max-width:400px; margin: 0 auto;
}
</style>
</head>
<body>
<div class="app">
<div class="container">
<div class="header">
<h2>Login</h2>
</div>
<div class="login-form">
<for mid="login Form">
<div class="form-group">
<label for="username">Username : </label>
<input type="text" class="form-control" id="username" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label for="password">Password : </label>
<input type="password" class="form-control" id="password" placeholder="Enter your password" required>
</div>
<button type="button" class="btnbtn-link" id="reset Button">Reset</button>
<button type="submit" class="btnbtn-primary" id="submit Button">Submit</button>
</form>
</div>
</div>
23
</div>
<script>
document.addEventListener('deviceready',onDeviceReady,false);

functiononDeviceReady(){
//Add your device ready code here if needed.
//For simplicity, we are not adding any device ready code in this example.
}
document.getElementById ('resetButton').addEventListener('click', function () {
document.getElementById ('username').value = '';
document.getElementById ('password').value = '';
});
document.getElementById('loginForm').addEventListener('submit', function (e) {
e.preventDefault();

//Add your login logic here.

var username = document.getElementById('username').value; var password =
document.getElementById('password').value;

//Example: Check if the username and password are not empty

if (username.trim() === '' || password.trim() === '') {
alert('Please enter both username and password.');
}
else{
alert ('Login successful!');
//Add your navigation logic to another page or perform further actions.
}
});
</script>
<script src ="cordova.js"></script>
<script src ="js/index.js"></script>
</body>
</html>

24
Output:

Result:
Thus, the creation of a cross-platform application for an android application using Cordova for a user
login screen with username, password, reset button and a submit button is done.

25
Exp.No: 06
Date: 29/04/2025 Design and develop an android application using Apache Cordova to find and display
the current location of the user.

Aim:
To Design and develop an android application using Apache Cordova to find and display the current
location of the user.

Algorithm:
1. Initialize Cordova Project: Create a new Cordova project using the Cordova CLI.
2. Add Geo location Plugin: Use the Cordova CLI or npm to add the Geo location plugin to the project.
User Interface: Create UI elements to display the user's current location information (latitude,
longitude, address).
3. Request Location Permission: Implement Cordova's Geo location API to request permission from the
user to access their device location.
4. Fetch User's Current Location: Write JavaScript code to retrieve the user's current geo location using
the Geo location plugin.
5. Display Location Information: Update the UI elements with the retrieved location information,
displaying the latitude, longitude, and address (if available) to the user.
6. Build and Deployment: Build the Cordova application specifically for the Android platform. Deploy
the application to an Android device or distribute it through suitable channels.

26
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum- scale=1, user-
scalable=no">
<title>Location App</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/location.css"/>
<style>
body {
padding-top:20px;
}
.header{
text-align:center;
}
.location-info{
text-align:center; margin-top:20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h2>Current Location</h2>
</div>
<div class="location-info">
<pid="latitude">Latitude:</p>
<pid="longitude">Longitude:</p>
<button class="btnbtn-primary" id="getLocationButton">Get Location</button>
</div>
</div>
<script>
document.addEventListener('deviceready', onDeviceReady, false);
document.getElementById('getLocationButton').addEventListener('click', function () {
navigator.geolocation.getCurrentPosition(onSuccess,onError);
});
function onSuccess(position){
var latitude=position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById('latitude').textContent = 'Latitude: ' + latitude;
document.getElementById('longitude').textContent = 'Longitude: ' + longitude;
}

27
function onError(error){
alert('Errorgettinglocation:'+error.message);
}

</script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/location.js"></script>
</body>
</html>

Output:

Result:
Thus, the creation of a cross-platform application for an android application using Apache Cordova to
find and display the current location of the user is done.

28
Exp.No: 07
Date: 09/05/2025 Write programs using Java to create Android application having Databases

 For a simple library application

 For displaying books available, books lend, book reservation.

Assume that student information is available in a database which has been stored in a
database server

Aim:
To write programs using Java to create Android application having Databases for displaying books
available, books lend, book reservation.

Algorithm:
1. Set Up Android Project: Create a new Android project in Android Studio for the application.
2. Design User Interface: Design the UI layout using XML in Android Studio, incorporating
Recycler Views, Text Views, and Buttons for displaying book information.
3. Database Connection Setup: Establish database connectivity using SQLite, Room, or
connect to an external database server by configuring connection parameters.
4. Retrieve Book Data: Write Java code to query the database server, executing SQL
queries to fetch details about available, lent, and reserved books.
5. Display Book Information: Populate UI components with the retrieved book data,
structuring the display using adapters and layouts.
6. Implement Book Reservation and Lending: Enable users to reserve and lend books via
UI components, updating database records accordingly.
7. Handle User Interactions: Implement event listeners or click handlers to manage user
interactions like viewing book details or performing book reservations.
8. Error Handling and Validation: Implement error handling for database connectivity
issues and validate user actions to prevent invalid operations.
9. Deployment: Build the Android application APK, test it on emulators or physical devices,
and deploy it on Android devices or distribution channels.

29
Program:
public class Book {
private int id;
private String title;
private String author;
private boolean is Available;
private boolean is Lent;
private boolean is Reserved;
}

import android.content.Context;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;

public class DatabaseHelper extends SQLiteOpenHelper {

private static final String DATABASE_NAME = "Library DB";
private static final int DATABASE_VERSION=1;

//Define table and column names

private static final String TABLE_BOOKS = "books";
private static final String COLUMN_ID = "id";
private static final String COLUMN_TITLE = "title";
private static final String COLUMN_AUTHOR = "author";
private static final String COLUMN_AVAILABLE = "available";
private static final String COLUMN_LENT = "lent";
private static final String COLUMN_RESERVED="reserved";

private static final String CREATE_TABLE_BOOKS = "CREATE TABLE" + TABLE_BOOKS

+"("+COLUMN_ID + " INTEGER PRIMARY KEY AUTOINCREMENT,"+ COLUMN_TITLE + " TEXT," +
COLUMN_AUTHOR + " TEXT," + COLUMN_AVAILABLE+"INTEGER,"+ COLUMN_LENT + "
INTEGER," + COLUMN_RESERVED+"INTEGER)";

public DatabaseHelper (Context context){

super (context, DATABASE_NAME, null, DATABASE_VERSION);
}
@Override
public void onCreate (SQLiteDatabasedb){
db.execSQL(CREATE_TABLE_BOOKS);
}
@Override
public void onUpgrade(SQLiteDatabasedb,intoldVersion,intnewVersion){
db.execSQL("DROPTABLEIFEXISTS"+TABLE_BOOKS);
onCreate(db);
}
}
30
Main Activity:
import android x.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import java.util.List;
public class Main Activity extendsAppCompatActivity{
@Override
Protected void onCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//Example usage
Book Repository bookRepository=new BookRepository (this);

//Add a book
Book newBook = new Book();
newBook.setTitle("Sample Book");
newBook.setAuthor("John Doe");
newBook.setAvailable(true);
newBook.setLent(false);
newBook.setReserved(false);
bookRepository.addBook(newBook);

//Get all books

List<Book>all Books=bookRepository.getAllBooks();

//Now you can use the list of books as needed

}
}

31
Output:

Result:
Thus the programs using Java to create Android application having Databases for displaying books
available, books lend, book reservation was successfully verified.

32