THENI KAMMAVAR SANGAM COLLEGE
OF TECHNOLOGY
KODUVILARPATTI, THENI -625 534.
DEPARTMENT OFCOMPUTER SCIENCE AND ENGINEERING
CCS332 - APP DEVELOPMENT
LAB MANUAL
INDEX
[Link] Date Content Page Marks Signature
No
1 Using react native, build a cross platform application
for a BMI calculator.
Build a cross platform application for a simple expense
2 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.
Design and develop an android application using Apache
6 Cordova to find and display the current location of the
user.
Write programs using java to create android application
7 having databases for a simple library application and for
displaying books available, books lend, book reservation.
[Link] 1 Build a cross platform application for a BMI calculator using
react native
Aim:
Using react native, build a cross platform application for a BMI calculator.
Procedure:
Step 1: Start
Step 2: Import the required components from React Native and install the npm
module.
Step 3: Create a class-based component named BMI App.
Step 4: The initial state with height, weight, bmi, and bmi Result fields.
Step 5: Define methods handle Height and handle Weight to update the state when
height and weight inputs
change.
Step 6: Create a calculate method to perform the BMI calculation and classify the
result. Step
7: Implement the render method with necessary UI components.
Step 8: Use Text Input for user input of height and weight.
Step 9: Utilize Touchable Opacity for the Calculate button.
Step 10: Display the calculated BMI and its classification as output.
Program:
import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button, Alert } from 'react-native';
export default function App() {
const [weight, setWeight] = useState<string>('');
const [height, setHeight] = useState<string>('');
const [bmi, setBmi] = useState<number | null>(null);
const [category, setCategory] = useState<string>('');
const calculateBMI = () =>
{ if (weight && height) {
const heightInMeters = parseFloat(height) / 100;
const bmiValue = (parseFloat(weight) / (heightInMeters *
heightInMeters)).toFixed(2);
setBmi(parseFloat(bmiValue));
determineBMICategory(parseFloat(bmiValue));
} else {
[Link]('Input Error', 'Please enter valid weight and height.');
}
};
const determineBMICategory = (bmiValue: number) =>
{ if (bmiValue < 18.5) {
setCategory('Underweight');
} else if (bmiValue >= 18.5 && bmiValue < 24.9) {
setCategory('Normal weight');
} else if (bmiValue >= 25 && bmiValue < 29.9) {
setCategory('Overweight');
} else {
setCategory('Obese');
}
};
return (
<View style={[Link]}>
<Text style={[Link]}>BMI Calculator</Text>
<TextInput
style={[Link]}
placeholder="Weight (kg)"
keyboardType="numeric"
value={weight}
onChangeText={(text) => setWeight(text)}
/>
<TextInput
style={[Link]}
placeholder="Height (cm)"
keyboardType="numeric"
value={height}
onChangeText={(text) => setHeight(text)}
/>
<Button title="Calculate BMI" onPress={calculateBMI} />
{bmi !== null && (
<View style={[Link]}>
<Text style={[Link]}>Your BMI: {bmi}</Text>
<Text style={[Link]}>Category: {category}</Text>
</View>
)}
</View>
);
}
const styles = [Link]({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 5,
width: '100%',
marginBottom: 20,
paddingHorizontal: 10,
},
resultContainer: {
marginTop: 20,
alignItems: 'center',
},
resultText: {
fontSize: 20,
fontWeight: 'bold',
},
});
Output:
Result:
Thus the program to work with react native was implemented and executed
successfully.
[Link] 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.
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 using React Native.
Procedure:
Step 1: Set up your project and install required modules. Step
2: Create a class-based component and define the state. Step
3: Handle input changes and date selection.
Step 4: Add methods to manage expenses and income.
Step 5: Implement the render method with necessary UI components.
Step 6: Use TextInput and TouchableOpacity for user interactions.
Step 7: Display data using FlatList and style your components.
Program:
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity, Alert, FlatList }
from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
export default class ExpenseManager extends Component {
state = {
expenses: [],
income: [],
currentAmount: '',
currentCategory: '',
currentDate: new Date(),
isDatePickerVisible: false,
};
handleAmountChange = (text) => {
[Link]({ currentAmount: text });
};
handleCategoryChange = (text) => {
[Link]({ currentCategory: text });
};
handleDateChange = (event, date) => {
[Link]({ currentDate: date || [Link], isDatePickerVisible: false
});
};
showDatePicker = () => {
[Link]({ isDatePickerVisible: true });
};
addEntry = () => {
const { currentAmount, currentCategory, currentDate, expenses, income } =
[Link];
const entry = { amount: parseFloat(currentAmount), category: currentCategory,
date: currentDate };
if (currentAmount && currentCategory) {
if (parseFloat(currentAmount) < 0) {
[Link]({ expenses: [...expenses, entry], currentAmount: '', currentCategory:
'' });
} else {
[Link]({ income: [...income, entry], currentAmount: '', currentCategory: ''
});
}
} else {
[Link]('Error', 'Please fill out all fields.');
}
};
render() {
const { expenses, income, currentAmount, currentCategory, isDatePickerVisible } =
[Link];
return (
<View style={[Link]}>
<Text style={[Link]}>Expense Manager</Text>
<TextInput
style={[Link]}
placeholder="Amount"
keyboardType="numeric"
value={currentAmount}
onChangeText={[Link]}
/>
<TextInput
style={[Link]}
placeholder="Category"
value={currentCategory}
onChangeText={[Link]}
/>
<TouchableOpacity style={[Link]} onPress={[Link]}>
<Text style={[Link]}>Select Date</Text>
</TouchableOpacity>
{isDatePickerVisible && (
<DateTimePicker
value={[Link]}
mode="date"
display="default"
onChange={[Link]}
/>
)}
<TouchableOpacity style={[Link]} onPress={[Link]}>
<Text style={[Link]}>Add Entry</Text>
</TouchableOpacity>
<Text style={[Link]}>Expenses</Text>
<FlatList
data={expenses}
renderItem={({ item }) => (
<View style={[Link]}>
<Text>{[Link]} - {[Link]}</Text>
</View>
)}
keyExtractor={(item, index) => [Link]()}
/>
<Text style={[Link]}>Income</Text>
<FlatList
data={income}
renderItem={({ item }) => (
<View style={[Link]}>
<Text>{[Link]} - {[Link]}</Text>
</View>
)}
keyExtractor={(item, index) => [Link]()}
/>
</View>
);
}
}
const styles = [Link]({
container: {
flex: 1,
padding: 20,
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
},
subtitle: {
fontSize: 18,
fontWeight: 'bold',
marginVertical: 10,
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 5,
marginBottom: 20,
paddingHorizontal: 10,
},
button: {
backgroundColor: '#007bff',
padding: 10,
borderRadius: 5,
marginBottom: 20,
},
buttonText: {
color: 'white',
textAlign: 'center',
fontWeight: 'bold',
},
item: {
padding: 10,
borderBottomWidth: 1,
borderBottomColor: 'gray',
},
});
Output:
Result:
Thus 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 using React Native is build and executed successfully.
[Link] 3 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...).
Procedure:
Step 1: Set up the React Native project and install dependencies.
Step 2: Create a class-based component and define state.
Step 3: Implement methods for handling input changes and conversion logic.
Step 4: Update the render method to include UI components.
Step 5: Use TextInput for user inputs and TouchableOpacity for actions.
Step 6: Display data using FlatList if necessary.
Step 7: Style the components to improve the user interface.
Program:
[Link]
import React, { useState } from 'react';
import { SafeAreaView, StyleSheet, Text, TextInput, Button, View } from 'react-
native';
const App: [Link] = () => {
const [inputValue, setInputValue] = useState<string>('');
const [result, setResult] = useState<string>('');
const [conversionType, setConversionType] = useState<string>('kmToMiles');
const handleConvert = () => {
let convertedValue = 0;
const value = parseFloat(inputValue);
if (!isNaN(value)) {
switch (conversionType) {
case 'kmToMiles':
convertedValue = value * 0.621371;
break;
case 'milesToKm':
convertedValue = value / 0.621371;
break;
case 'kgToPounds':
convertedValue = value * 2.20462;
break;
case 'poundsToKg':
convertedValue = value / 2.20462;
break;
default:
break;
}
setResult([Link](2));
} else {
setResult('Invalid Input');
}
};
return (
<SafeAreaView style={[Link]}>
<Text style={[Link]}>Unit Converter</Text>
<View style={[Link]}>
<TextInput
style={[Link]}
placeholder="Enter value"
keyboardType="numeric"
onChangeText={text => setInputValue(text)}
value={inputValue}
/>
</View>
<View style={[Link]}>
<Button title="Km to Miles" onPress={() => setConversionType('kmToMiles')} />
<Button title="Miles to Km" onPress={() => setConversionType('milesToKm')} />
<Button title="Kg to Pounds" onPress={() => setConversionType('kgToPounds')}
/>
<Button title="Pounds to Kg" onPress={() => setConversionType('poundsToKg')}
/>
</View>
<Button title="Convert" onPress={handleConvert} />
<Text style={[Link]}>Result: {result}</Text>
</SafeAreaView>
);
};
const styles = [Link]({
container: {
flex: 1,
justifyContent: 'center',
padding: 16,
},
title: {
fontSize: 24,
textAlign: 'center',
marginVertical: 16,
},
inputContainer: {
marginVertical: 8,
},
input: {
borderColor: '#ccc',
borderWidth: 1,
padding: 8,
fontSize: 18,
borderRadius: 5,
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginVertical: 16,
},
result: {
fontSize: 20,
textAlign: 'center',
marginVertical: 16,
},
});
export default App;
Output:
Result:
Thus a cross platform application to convert units from imperial system to metric
system (km to miles, kg to pounds etc...) is developed and executed successfully.
[Link] 4 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 using React Native.
Procedure:
Step 1: Set up your React Native project using Expo and install dependencies.
Step 2: Create navigation for your app with React Navigation.
Step 3: Implement a screen to list todos with add and remove functionalities.
Step 4: Implement a screen to add new todos.
Step 5: Integrate navigation into your main app component. Step
6: Run and test your app on an emulator or device.
Program:
[Link]
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, FlatList } from 'react-
native';
const App = () => {
const [tasks, setTasks] = useState<string[]>([]);
const [newTask, setNewTask] = useState('');
const addTask = () =>
{ if ([Link]())
{
setTasks([...tasks, [Link]()]);
setNewTask('');
}
};
const renderTask = ({ item }: { item: string }) => (
<Text style={[Link]}>{item}</Text>
);
return (
<View style={[Link]}>
<Text style={[Link]}>My To-Do List</Text>
<FlatList
data={tasks}
renderItem={renderTask}
keyExtractor={(item, index) => [Link]()}
style={[Link]}
/>
<TextInput
style={[Link]}
placeholder="New Task"
value={newTask}
onChangeText={setNewTask
}
/>
<TouchableOpacity style={[Link]} onPress={addTask}>
<Text style={[Link]}>Add Task</Text>
</TouchableOpacity>
</View>
);
};
const styles = [Link]({
container: {
flex: 1,
padding: 16,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 16,
},
list: {
width: '100%',
marginBottom: 16,
},
task: {
fontSize: 18,
marginVertical: 8,
},
input: {
borderWidth: 1,
padding: 8,
width: '100%',
marginBottom: 16,
},
button: {
backgroundColor: '#007BFF',
padding: 12,
borderRadius: 8,
},
buttonText: {
color: 'white',
fontSize: 16,
textAlign: 'center',
},
});
export default App;
Output:
Result:
Thus a cross platform application for day to day task (to-do) management is designed
and developed successfully.
Design an android application using cordova for a user
[Link] 5 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 and also, include header image and a label.
Use layout managers.
Procedure:
Step 1: Set up your React Native project using Expo and install dependencies
Step 2: Create navigation for your app with React Navigation
Step 3: Implement a screen to list todos with add and remove functionalities
Step 4: Implement a screen to add new todos
Step 5: Integrate navigation into your main app component
Step 6: Run and test your app on an emulator or device
Program:
<!DOCTYPE html>
<html>
<head>
<title>User Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> body {
font-family: Arial, sans-serif; background-color: #f0f0f0; margin:
0; padding: 0;
.container {
text-align: center; margin-top: 50px;
}
img {
width: 200px; height: auto;
margin-bottom: 20px;
label {
display: block; margin-bottom: 5px;
}
input, button {
margin-bottom: 10px; padding: 8px 12px; border: 1px solid #ccc; border-radius: 5px;
width: 80%;
max-width: 300px;
box-sizing: border-box;
}
button {
background-color: #4CAF50; color: white;
border: none; cursor: pointer;
}
button:hover {
background-color: #45a049;
input:focus, button:focus { outline: none;
border-color: #4CAF50;
</style>
</head>
<body>
<div class="container">
<img src="img/header_image.png" alt="Header Image">
<label for="username">Username:</label>
<input type="text" id="username" placeholder="Enter your username">
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter your password">
<button id="resetBtn">Reset</button>
<button id="submitBtn">Submit</button>
</div>
</body>
</html>
Output:
Result:
Thus an android application using cordova for a user login screen with username,
password, reset button and a submit button is designed and also, header image and a
label is included and layout managers are used successfully.
[Link] 6 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.
Procedure:
Step 1: Set up your Cordova project and install dependencies
Step 2: Install the Cordova Geolocation Plugin
Step 3: Implement the UI for displaying location
Step 4: Implement the functionality to fetch and display the location Step
5: Integrate the geolocation logic into your UI
Step 6: Test and build your application
Step 7: Finalize and deploy your application
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Location App</title>
<style>
/* CSS to style the text in white */
#latitude,
#longitude {
color: white;
font-size: 20px;
font-weight: bold;
}
body {
background-color: #333;
font-family: Arial, sans-
serif; text-align: center;
padding-top: 50px;
}
</style>
</head>
<body>
<h1>Current Location</h1>
<p id="latitude">Latitude: </p>
<p id="longitude">Longitude: </p>
<script>
// JavaScript to get the current location
function getLocation() {
if ([Link]) {
[Link](showPosition, showError);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
[Link]("latitude").innerHTML =
"Latitude: " + [Link];
[Link]("longitude").innerHTML =
"Longitude: " + [Link];
}
function showError(error) {
switch ([Link]) {
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation."); break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case [Link]:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}
// Get location on page load
[Link] = getLocation;
</script>
</body>
</html>
Output:
Result:
Thus an android application using apache cordova to find and display the current location of
the user is designed and developed successfully.
[Link] 7 WRITE PROGRAMS USING JAVA TO CREATE ANDROID
APPLICATION HAVING DATABASES FOR A SIMPLE LIBRARY
APPLICATION AND FOR DISPLAYING BOOKS AVAILABLE,
BOOKS LEND, BOOK RESERVATION
Aim:
To write programs using java to create android application having databases for a simple
library application and for displaying books available, books lend, book reservation.
Procedure:
Step 1: Set Up Your Android Studio Project
Step 2: Open Android Studio and start a new project.
Step 3: Choose an empty activity and configure the project with your desired name
(e.g., `LibraryApp`).
Step 4: Set the language to Java and finish creating the project.
Step 5: Create Java classes to represent your database entities such as `Book`, `Lend`,
and `Reservation`.
Step 6: Annotate these classes with `@Entity` and define the necessary fields for each
table.
Step 7: Define DAO interfaces to provide methods for accessing the database.
Step 8: Create interfaces like `BookDao`, `LendDao`, and `ReservationDao`
with methods for inserting, querying, updating, and deleting data.
Step 9: Create an abstract class that extends `RoomDatabase`.
Step 10: Define the database class with the DAOs and entities you've created.
Step 11: Implement a singleton pattern to initialize and access the database instance.
Step 12: Design XML layouts for your app screens such as the main screen, list
of available books, book lending, and reservation screens.
Step 13: Use appropriate UI components such as `RecyclerView`, `TextView`,
`Button`, and `EditText`.
Step 14: Implement a Java class for the main activity that interacts with the `BookDao`
to fetch and display the list of available books.
Step 15: Use a `RecyclerView` with an adapter to display the list of books.
Step 16: Implement Functionality to Lend Books
Step 17: Implement Functionality to Reserve Books
Step 18: Integrate Navigation Using Intents
Step 19: Test the Application
Step 20: Deploy and Continue Development
[Link]
import [Link];
import [Link]; import
[Link];
public class DatabaseHelper extends SQLiteOpenHelper {
private static final String DATABASE_NAME = "[Link]"; private static final int
DATABASE_VERSION = 1;
public static final String TABLE_BOOKS = "books"; public static final String
COLUMN_ID = "_id"; public static final String COLUMN_TITLE = "title";
public static final String COLUMN_AUTHOR = "author"; public static final String
COLUMN_STATUS = "status";
private static final String CREATE_BOOKS_TABLE = "CREATE TABLE " +
TABLE_BOOKS
+
"(" + COLUMN_ID + " INTEGER PRIMARY KEY AUTOINCREMENT, " +
COLUMN_TITLE + " TEXT, " +
COLUMN_AUTHOR + " TEXT, " + COLUMN_STATUS + " TEXT)";
public DatabaseHelper(Context context) {
super(context, DATABASE_NAME, null, DATABASE_VERSION);
}
@Override
public void onCreate(SQLiteDatabase db) { [Link](CREATE_BOOKS_TABLE);
}
@Override
public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
[Link]("DROP TABLE IF EXISTS " + TABLE_BOOKS);
onCreate(db);
}
}
[Link]
public class Book {
private int id; private String title;
private String author; private String status;
public Book(int id, String title, String author, String status) { [Link] = id;
[Link] = title; [Link] = author; [Link] = status;
}
public int getId() {
return id;
}
public String getTitle() { return title;
}
public String getAuthor() { return author;
}
public String getStatus() { return status;
}
}
[Link]
import [Link]; import [Link]; import
[Link];
import [Link];
import [Link]; import [Link];
import [Link];
public class BookDataSource {
private SQLiteDatabase database;
private DatabaseHelper dbHelper;
public BookDataSource(Context context) { dbHelper = new DatabaseHelper(context);
}
public void open() throws SQLException { database =
[Link]();
}
public void close() { [Link]();
}
public void addBook(Book book) { ContentValues values = new ContentValues();
[Link](DatabaseHelper.COLUMN_TITLE, [Link]());
[Link](DatabaseHelper.COLUMN_AUTHOR, [Link]());
[Link](DatabaseHelper.COLUMN_STATUS, [Link]());
[Link](DatabaseHelper.TABLE_BOOKS, null, values);
}
public List<Book> getAllBooks() { List<Book> books = new ArrayList<>();
Cursor cursor = [Link](DatabaseHelper.TABLE_BOOKS, null, null, null,
null, null, null);
[Link]();
while (![Link]()) {
Book book = cursorToBook(cursor);
[Link](book); [Link]();
}
[Link](); return books;
}
private Book cursorToBook(Cursor cursor) {
int id = [Link]([Link](DatabaseHelper.COLUMN_ID));
String title =
[Link]([Link](DatabaseHelper.COLUMN_TITLE));
String author =
[Link]([Link](DatabaseHelper.COLUMN_AUTHOR
)); String status =
[Link]([Link](DatabaseHelper.COLUMN_STATUS)
); return new Book(id, title, author, status);
}
}
Output:
Result:
Thus programs written using java to create android application having databases for a
simple library application and for displaying books available, books lend, book
reservation and executed successfully.