Scribd
Upload
5 views36 pages

App Development

The document outlines the practical course work for the CSS332 - App Development class at University College of Engineering Arni for the academic year 2023-2024. It includes various projects such as building a BMI calculator, expense manager, unit converter, to-do list management app, and a user login screen using Cordova. Each project includes aims, procedures, and sample code for implementation.

Uploaded by

bharanivenkat2101
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views36 pages

App Development

The document outlines the practical course work for the CSS332 - App Development class at University College of Engineering Arni for the academic year 2023-2024. It includes various projects such as building a BMI calculator, expense manager, unit converter, to-do list management app, and a user login screen using Cordova. Each project includes aims, procedures, and sample code for implementation.

Uploaded by

bharanivenkat2101
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

UNIVERSITY COLLEGE OF ENGINEERING ARNI

(A Constituent College of Anna University Chennai)


Arni – 632 326.

CSS332 – APP DEVELOPMENT


UNIVERSITY COLLEGE OF ENGINEERING ARNI
(A Constituent College of Anna University Chennai)
Arni – 632 326.

Register No.: ……………………………………………

BONAFIDE CERTIFICATE
Certified to be the BONAFIDE RECORD work done by
Mr. / Ms. ……………………………………………… of 6th Semester, B.E. Computer Science
and Engineering in the CSS332 – APP DEVELOPMENT Practical Course
during the Academic year 2023-2024.

Date: ……………………………

Faculty in-charge Head of the Department

Submitted for the Anna University Practical examination held


on …………..……………………..… at University College of Engineering Arni.

Internal Examiner External Examiner


TABLE OF CONTENTS

Sl. Faculty
Date Title of the Program Page Marks
No Signature

1. Using react native, build a cross platform application


for a BMI calculator.

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

3. Develop a cross platform application to convert units


from imperial system to metric system ( km to miles, kg
to pounds etc.,)

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

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

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

7.
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.
EXPT NO : 02 SIMPLE EXPENSE MANAGER
DATE :

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 , the application initializes an empty list called transactions to
store the user's transactions.
3. Initialize variables for form type, category, and amount. Retrieve expenses from
initialize an empty array.
4. The application displays the user's transactions on the screen.
5. If there are transactions in the transactions list, they are shown in a list format. If
there are no transactions, a message indicating that there are no transactions is
displayed.
6.When the user wants to add a new transaction, they click on the "Add Transaction"
button.
7. This action opens a modal window with input fields for the type (income or
expense), category, and amount of the transaction. The user enters the transaction
details into the input fields.
8. After entering the transaction details, the user clicks the "Save" button. The
application validates the input fields to ensure they are not empty and that the
amount is a valid number.
9. If the input is valid, the application creates a new transaction object with the
entered details and adds it to the transactions list.If the input is invalid, the
application displays an error message prompting the user to correct the input.
10. After adding a new transaction, the application updates the display to show the
updated list of transactions.If there were no transactions before, the message
indicating no transactions is replaced with the new transaction.If there were existing
transactions, the new transaction is added to the list.
11. After adding a transaction or canceling the operation, the user can close the
modal window by clicking the close button or outside the modal.
PROGRAM:
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expense Manager</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Expense Manager</h1>
<button onclick="openAddTransaction()">Add Transaction</button>
<div id="transactionList"></div>

<!-- Add Transaction Modal -->


<div id="addTransactionModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeAddTransaction()">&times;</span>
<h2>Add Transaction</h2>
<input type="text" id="type" placeholder="Type (Income/Expense)">
<input type="text" id="category" placeholder="Category">
<input type="number" id="amount" placeholder="Amount">
<button onclick="saveTransaction()">Save</button>
</div>
</div>

<script src="script.js"></script>
</body>
</html>
Styles.css
body {
font-family: Arial, sans-serif;
padding: 20px;
}

h1 {
text-align: center;
}

button {
margin-bottom: 10px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}

.modal-content {
background-color: #fefefe;
margin: 20% auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}

.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
Script.js
let transactions = [];

function openAddTransaction() {
document.getElementById("addTransactionModal").style.display = "block";
}

function closeAddTransaction() {
document.getElementById("addTransactionModal").style.display = "none";
}

function saveTransaction() {
const type = document.getElementById("type").value;
const category = document.getElementById("category").value;
const amount = parseFloat(document.getElementById("amount").value);

transactions.push({ type, category, amount });


renderTransactions();
closeAddTransaction();
}

function renderTransactions() {
const transactionList = document.getElementById("transactionList");
transactionList.innerHTML = "";

transactions.forEach(transaction => {
const transactionDiv = document.createElement("div");
transactionDiv.innerHTML = `<p>Type: ${transaction.type}</p><p>Category:
${transaction.category}</p><p>Amount: $${transaction.amount}</p>`;
transactionList.appendChild(transactionDiv);
});
}
OUTPUT:
RESULT:
Thus, the creation of a cross-platform application for a simple expense manager is
done.
EXPT NO : 02 UNIT CONVERSION
DATE :

AIM :
To write a program for Unit conversion for converting kg to miles ,miles to kg , kg
to pounds , pounds to kg .

ALGORITHAM :
Step 1 : Create a html file .
Step 2 : Give the formula for conversions
Step 3 : In div class create the labels for it.
Step 4 : In If else condition give the formula for conversions in this.

PROGRAM :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unit Conversion</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="number"] {
width: 100%;
padding: 8px;
margin: 5px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<h2>Unit Conversion</h2>
<label for="inputValue">Enter Value:</label>
<input type="number" id="inputValue" placeholder="Enter value...">
<label for="fromUnit">From:</label>
<select id="fromUnit">
<option value="kilograms">Kilograms</option>
<option value="miles">Miles</option>
<option value="pounds">Pounds</option>
</select>
<label for="toUnit">To:</label>
<select id="toUnit">
<option value="miles">Miles</option>
<option value="kilograms">Kilograms</option>
<option value="pounds">Pounds</option>
</select>
<button onclick="convert()">Convert</button>
<p id="result"></p>
</div>
<script>
function convert() {
var inputValue = parseFloat(document.getElementById('inputValue').value);
var fromUnit = document.getElementById('fromUnit').value;
var toUnit = document.getElementById('toUnit').value;
var result;
// Conversion logic
if (fromUnit === 'kilograms' && toUnit === 'miles') {
result = inputValue * 0.621371 / 1000; // Conversion from kilometers to miles
} else if (fromUnit === 'miles' && toUnit === 'kilograms') {
result = inputValue / 0.621371 * 1000; // Conversion from miles to kilometers
} else if (fromUnit === 'kilograms' && toUnit === 'pounds') {
result = inputValue * 2.20462; // Conversion from kilograms to pounds
} else if (fromUnit === 'pounds' && toUnit === 'kilograms') {
result = inputValue / 2.20462; // Conversion from pounds to kilograms
}
// Add more conversion logic for other units as needed
document.getElementById('result').innerText = result;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unit Conversion</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="number"] {
width: 100%;
padding: 8px;
margin: 5px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<h2>Unit Conversion</h2>
<label for="inputValue">Enter Value:</label>
<input type="number" id="inputValue" placeholder="Enter value...">
<label for="fromUnit">From:</label>
<select id="fromUnit">
<option value="kilograms">Kilograms</option>
<option value="miles">Miles</option>
<option value="pounds">Pounds</option>
</select>
<label for="toUnit">To:</label>
<select id="toUnit">
<option value="miles">Miles</option>
<option value="kilograms">Kilograms</option>
<option value="pounds">Pounds</option>
</select>
<button onclick="convert()">Convert</button>
<p id="result"></p>
</div
<script>
function convert() {
var inputValue = parseFloat(document.getElementById('inputValue').value);
var fromUnit = document.getElementById('fromUnit').value;
var toUnit = document.getElementById('toUnit').value;
var result
// Conversion logic
if (fromUnit === 'kilograms' && toUnit === 'miles') {
result = inputValue * 0.621371 / 1000; // Conversion from kilometers to miles
} else if (fromUnit === 'miles' && toUnit === 'kilograms') {
result = inputValue / 0.621371 * 1000; // Conversion from miles to kilometers
} else if (fromUnit === 'kilograms' && toUnit === 'pounds') {
result = inputValue * 2.20462; // Conversion from kilograms to pounds
} else if (fromUnit === 'pounds' && toUnit === 'kilograms') {
result = inputValue / 2.20462; // Conversion from pounds to kilograms
}
// Add more conversion logic for other units as needed
document.getElementById('result').innerText = result;
}
</script>

</body>
</html>
OUTPUT :
Kilogram to Pounds :
Kilogram to miles :

RESULT :
Thus the program for Unit conversion in kg to pounds and kg to miles are
executed successfully.
EXPT NO : 04 TO DO LIST MANAGEMENT
DATE :

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

PROCEDURE:

Step 1: Initialize State:


- Initialize the state variables task and tasks using the useState hook.

Step 2: Add Task:


- Create the addTask function to add a new task to the tasks array.
- Check if the task is not empty before adding.
- Update the state with the new task and reset the input.

Step 3: Remove Task:


- Create the removeTask function to remove a task from the tasks array.
- Use the filter method to create a new array excluding the task with the
specified taskId.
- Update the state with the new array

Step 4: Render UI:


- Render the UI with input fields, buttons, and the task list.
- Map through the tasks array to display each task along with a remove button.

Step 5: Styles:
- Define the styles object for consistent styling throughout the application.
Step 6: Component Structure:
- The `App` component is the main entry point and encapsulates the entire
application structure.
Step 7: Execution:
- Ensure the required React Native components and environment are properly
set up to run the app.

PROGRAM:

import React, { useState } from 'react';


const TodoApp = () => { const
[tasks, setTasks] = useState([]);
const [newTask, setNewTask] =
useState('');
const handleInputChange = (event) => {
setNewTask(event.target.value);
};
const addTask = () => {
if (newTask.trim() !==
'') {
setTasks([...tasks,
newTask]);
setNewTask('');
}
};
const deleteTask = (index)
=> { const updatedTasks =
[...tasks];
updatedTasks.splice(index,
1);
setTasks(updatedTasks);
};

return (
<div>
<h1>To-Do List</h1>
<ul>
{tasks.map((task, index) => (
<li key={index}>
{task}
<button onClick={() => deleteTask(index)}>Delete</button>
</li>
)) </ul>
<div>
<input
type="text"
value={newTa
sk}
onChange={ha
ndleInputCha
nge}
placeholder="Add a task..."
/>
<button onClick={addTask}>Add Task</button>
</div>
</div>
);
};

export default TodoApp;

OUTPUT:

Result:

Thus the cross platform application for a day to day task management using
react native was built successfully.
EXPT NO : 05 LOGIN SCREEN USING CORDOVA
DATE :

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.Include
HTML elements for username input, password input, resetButton, submit
button, header image, and label.
3. Reset Button Functionality : Write JavaScript logic to reset the input fieldsWhen
the reset button is clicked.
4. Submit Button Functionality : Implement JavaScript validation for the
enteredUsername and password.
5. Include Header Image and Label : Add an HTML element for the headerImage,
ensuring its proper placement and styling.
6. Testing and Validation : Test the login screen functionality on differentDevices
and screen sizes to ensure proper behavior.
7. Integration with Cordova : Integrate the HTML, CSS, and JavaScript files intoThe
Cordova project structure.
8. Build and Deployment : Build the Cordova application for the
AndroidPlatform.Deploy the application to an Android device or distribute it
throughAppropriate channels.
Program:
<html>
<head>
<meta charset=”utf-8”>
<meta http-equiv=”Content-Security-Policy” content=”default
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=”msapplication-tap-highlight” content=”no”>
<meta name=”viewport” content=”initial-scale=1, width=device-width, viewport-
Fit=cover”>
<meta name=”color-scheme” content=”light dark”>
<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”>
<form id=”loginForm”>
<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=”btn btn-link” id=”resetButton”>Reset</button>
<button type=”submit” class=”btn btn-primary”
Id=”submitButton”>Submit</button>
</form>
</div>
</div>
</div>
<script>
Document.addEventListener(‘deviceready’, onDeviceReady, false);
Function onDeviceReady() {
// 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.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
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>
Output:

Result:
Thus, the creation of a cross-platform application for a android application using in
cordova for a user login screen with username, password, reset button and a submit
button is done
EXPT NO : 06 DISPLAY CURRENT LOCATION USING CORDOVA
DATE :

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 Geolocation Plugin : Use the Cordova CLI or npm to add the Geolocation plugin
to the project.Design.
3. User Interface : Create UI elements to display the user's current location
information (latitude, longitude, address).
4. Request Location Permission : Implement Cordova's Geolocation API to request
permission from the user to access their device location.
5. Fetch User's Current Location : Write JavaScript code to retrieve the user's current
geolocation using the Geolocation plugin.
6. Display Location Information : Update the UI elements with the retrieved location
information, displaying the latitude, longitude, and address (if available) to the user.
7. 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
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">
<p id="latitude">Latitude: </p>
<p id="longitude">Longitude: </p>
<button class="btn btn-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;
}
function onError(error) {
alert('Error getting location: ' + 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 a android application using
Apache Cordova to find and display the current location of the user was done.
EXPT NO : 07 LIBRARY APPLICATION USING JAVA
DATE :

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 RecyclerViews, TextViews, 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.
PROGRAM:
import java.util.ArrayList;
// Book class to represent individual books
class Book {
private String title;
private String author;
private int year;
// Constructor
public Book(String title, String author, int year) {
this.title = title;
this.author = author;
this.year = year;
}
// Getters
public String getTitle() {
return title;
}

public String getAuthor() {


return author;
}
public int getYear() {
return year;
}
}
// Library class to manage collection of books
class Library {
private ArrayList<Book> books;
// Constructor
public Library() {
books = new ArrayList<>();
}
// Method to add a book to the library
public void addBook(Book book) {
books.add(book);
}
// Method to display all books in the library
public void displayBooks() {
System.out.println("Books in the library:");
for (Book book : books) {
System.out.println("Title: " + book.getTitle() + ", Author: " + book.getAuthor()
+ ", Year: " + book.getYear());
}
}
}
// Main class to test the library application
public class Main {
public static void main(String[] args) {
// Create a library
Library library = new Library();
// Add some books to the library
library.addBook(new Book("Java Programming", "John Doe", 2020));
library.addBook(new Book("Android Development", "Jane Smith", 2019));
library.addBook(new Book("Data Structures and Algorithms", "Alice Johnson",
2021));
// Display all books in the library
library.displayBooks();
}
}
OUTPUT:
Books in the library:
Title: Java Programming, Author: John Doe, Year: 2020
Title: Android Development, Author: Jane Smith, Year: 2019
Title: Data Structures and Algorithms, Author: Alice Johnson, Year: 2021
=== Code Execution Successful ===

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy