CCS332 - App Development Lab Manual
CCS332 - App Development Lab Manual
Name:
Register no:
Year/Semester: Branch:
UNIVERSITY COLLEGE OF ENGINEERING KANCHEEPURAM
(A Constituent college of Anna University Chennai)
KANCHIPURAM - 631 552
BONAFIDE CERTIFICATE
REGISTER NO
Ex Page
No Date Experiment Title no Signature
1.
Using react native, build a cross platform
application for a BMI calculator
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 imageand 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.
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
Program
App.js
Result:
Thus, the creation of a cross-platform application for a BMI calculator is done.
EXPT NO :
DATE : EXPENSE MANAGER
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 localStorage or initialize an empty array.
4. Create a function (renderExpenses) to display expenses in the HTML table.
5. Calculate the total amount and update the corresponding display.
6. Create functions (addExpense and deleteExpense) to handle expense addition
and deletion.
7. Validate input values, update the expenses array, and call renderExpenses for
display updates.
8. Attach event listeners to the expense form submission and the expense list for
delete actions.
9. Call the renderExpenses function initially to display existing expenses.
10. Ensure code adaptability by avoiding hardcoding specific IDs or values not likely
to change.
11. Reference the JavaScript file in the HTML file using the <script> tag.
Program:
Index.html:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Expense Tracker</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="container">
<h1>Expense Tracker</h1>
<div style="flex: auto; justify-content: space-between;">
<form id="expense-form">
<input type="text" id="expense-name" placeholder="Expense Name"
required
/>
<input type="number" id="expense-amount" placeholder="Amount"
required
/>
<button
type="submit">
Add Expense
</button>
</form>
</div>
<div class="expense-table">
<table>
<thead>
<tr>
<th>Expense Name</th>
<th>Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody id="expense-list"></tbody>
</table>
<div class="total-
amount">
<strong>Total:</strong
>
₹<span id="total-amount">0</span>
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
Index.js:
const expenseForm =
document.getElementById("expense-
form");
const expenseList =
document.getElementById("expense-
list");
const totalAmountElement =
document.getElementById("total-
amount");
let expenses =
JSON.parse(localStorage.getItem("expenses")) ||
[];
function renderExpenses() {
expenseList.innerHTML = "";
let totalAmount = 0;
for (let i = 0; i < expenses.length; i++)
{ const expense = expenses[i];
const expenseRow = document.createElement("tr");
expenseRow.innerHTML =
`
<td>${expense.name}</td>
<td>₹${expense.amount}</td>
<td class="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("expens
es",
JSON.stringify(expenses));
}
function addExpense(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;
}
const expense =
{ name:
expenseName,
amount: expenseAmount,
};
expenses.push(expense);
// Render expenses
renderExpenses();
}
function deleteExpense(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();
Output:
Result:
Thus, the creation of a cross-platform application for a simple expense manager is
done.
EXPT NO :
DATE : UNIT CONVERTER
Aim :
To Develop a cross platform application to convert units from imperial system to metric
system ( km to miles, kg to pounds etc.,)
Algorithm:
Program:
App.js
components/index.js
import React, { useEffect, useState } from "react";
import { Button, TextInput, View, StyleSheet, Text } from "react-native";
import DropdownComponent from "./dropdown-input";
import cd from '../conversion-data.json'
Output:
Result:
Thus, the creation of a cross-platform application for a unit converter is done.
EXPT NO :
DATE : TODO APP
Aim :
To Design and develop a cross platform application for day to day task (to-do)
management.
Algorithm:
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}>
<ScrollView contentContainerStyle={{
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 (
<TouchableOpacity key={index} onPress={() => completeTask(index)}>
<Task text={item} />
</TouchableOpacity>
)
})
}
</View>
</View >
</ScrollView>
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.writeTaskWrapper}>
<TextInput style={styles.input} placeholder={'Write a task'} value={task}
onChangeText={text => setTask(text)} />
<TouchableOpacity onPress={() => handleAddTask()}>
<View style={styles.addWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
);
}
Result:
Thus, the creation of a cross-platform application for a todo app is done.
EXPT NO : LOGIN SCREEN USING
DATE : APACHE CORDOVA
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.
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="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 = '';
});
Result:
Thus, the creation of a cross-platform application for a android application using
Cordova for a user login screen with username, password, reset button and a
submit button is done.
EXPT NO : LOCATION FINDER USING
DATE : APACHE CORDOVA
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.
is done.
EXPT NO :
DATE : LIBRARY APPLICATION USING JAVA
Aim :
To Write programs using Java to create Android application having Databases for
displaying books available, books lend, book reservation.
Algorithm :
Program:
import android.content.Context;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;
@Override
public void onCreate(SQLiteDatabase db) {
db.execSQL(CREATE_TABLE_BOOKS);
}
@Override
public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
db.execSQL("DROP TABLE IF EXISTS " + TABLE_BOOKS);
onCreate(db);
}
}
ManiActivity
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import java.util.List;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Example usage
BookRepository 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);
Result:
Thus the programs using Java to create Android application having Databases for
displaying books available, books lend, book reservation was successfully verified.