1

Sri Muthukumaran Institute of Technology

Chikkarayapuram, Near Mangadu, Chennai – 600 069.
Academic Year 2023-2024 / Odd Semester

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Subject Code: CCS332

Subject Name: APP DEVELOPMENT
LABORATORY
Branch: III YEAR CSE–VI Semester
Lab Manual
[ REGULATION : 2021 ]
 2

CCS332 APP DEVELOPMENT LTPC

2023

PRACTICAL EXERCISES: 30 PERIODS

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

LIST OF EXPERIMENTS

EXPERIMEN PAGE
EXPERIMENT NAME
T NUMBER NO
I Cycle-MS Excel
EX NO :1 BMI CALCULATOR APPLICATION USING
REACTJS
EX NO: 2 BUILD A CROSS PLATFORM APPLICATION
FOR A SIMPLE EXPENSE MANAGER
EX NO : 3

a)
EX.NO : 4 b)

c)

a)
EX.NO : 5
b)

EX.NO : 6

a)
EX.NO : 7
b)

EX.NO : 8
 4

EX NO: 1 BMI CALCULATOR APPLICATION USING

DATE : REACTJS

AIM :
To build a cross platform application for BMI calculator application using
REACT NATIVE JS.

PROCEDURE :

• Open VS code, from scratch we have to write the code.

• Create a folder named Bmi-calculator-react
• Open the folder in VS Code and start creating files inside the folder.
• First we create app.js file to design our layout.
• Next we write our code in index.css file to design colors and fonts.
• Then we have to write a code for index.js to make our page static to dynamic.
• Finally write a code to app.js to design the page.
• Create a folder named assets and put the output pictures inside the folder.
 5

How to calculate BMI

To calculate BMI, you are required to have two values: a person's height in
meters and his weight in kilograms. If the height is in inches, weight should be in
pounds. The formula to calculate BMI is as follows:
BMI = weight in kilograms / (height in meters)

REACTJS INSTALLATION
1. NodeJS and NPM
2. React and React DOM
3. Webpack
4. Babel

2.1 WAY TO INSTALL REACTJS

There are two ways to set up an environment for successful ReactJS application.
They are given below.
1. Using the npm command
2. Using the create-react-app command

Install NodeJS and NPM

NodeJS and NPM package manager by the link given below NodeJS and NPM
are the platforms need to develop any ReactJS application. You can install.
To verify NodeJS and NPM, use the command
 Node -v
 Npm -v

Install React and React DOM

Create a root folder with the name reactApp on the desktop or where you want.
Here, we create it on the desktop. You can create the folder directly or using the
command given below.
Now, you need to create a package.json file. To create any module, it is required
to generate a package.json file in the project folder. To do this, you need to run
the following command.
 npm init -y

After creating a package.json file, you need to install react and its DOM
packages using the following npm command.
 npm install react react-dom --save
 6

2.2 REACT CREATE – REACT – APP

The create-react-app is an excellent tool for beginners, which allows you to
create and run React project very quickly. It does not take any configuration
manually. This tool is wrapping all of the required dependencies like Webpack,
Babel for React project itself and then you need to focus on writing React code
only. This tool sets up the development environment, provides an excellent
developer experience, and optimizes the app for production.
REQUIRMENTS
The Create React App is maintained by Facebook and can works on any
platform, for example, macOS, Windows, Linux, etc. To create a React Project
using create-react-app, you need to have installed the following things in your
system.
1. Node version >= 8.10
2. NPM version >= 5.6

Let us check the current version of Node and NPM in the system.
2.3 INSTALLATION
Install REACT
We can install React using npm package manager by using the following
command. There is no need to worry about the complexity of React installation.
The create-react-app npm package manager will manage everything, which
needed for React project.
C:\Users\mca1> npm install -g create-react-app
Create a new React project
Once the React installation is successful, we can create a new React project using
create-react-app command. Here, I choose "reactproject" name for my project.
C:\Users\mca1> create-react-app bmi-calculator-react
C:\Users\mca1> npx create-react-bmi-calculator-react
The above command will take some time to install the React and create a new
project with the name "reactproject."
 7

The React project is created successfully on our system. Now, we need to start
the server so that we can access the application on the browser. Type the
following command in the terminal window.
1. $ cd Desktop
2. $ npm start

NPM is a package manager which starts the server and access the application at
default server http://localhost:3000.
Fig.,1.2 React url page
Next, open the project on Code editor. Here, I am using Visual Studio Code. Our
project's default structure looks like as below image.
Requirements of Application:
a) Create a workspace with VS Code
b) Design the general layout with HTML & CSS
c) Create the required components with React JS.
 8

SOURCE CODE
Index.js
 9

//App.js
import React, { useState } from 'react';
import './App.css';

function BmiCalculator() {
const [heightValue, setHeightValue] = useState('');
const [weightValue, setWeightValue] = useState('');
const [bmiValue, setBmiValue] = useState('');
const [bmiMessage, setBmiMessage] = useState('');

const calculateBmi = () => {

if (heightValue && weightValue) {
const heightInMeters = heightValue / 100;
const bmi = (weightValue / (heightInMeters * heightInMeters)).toFixed(2);
setBmiValue(bmi);

let message = '';

if (bmi < 18.5) {
message = 'You are Underweight';
} else if (bmi >= 18.5 && bmi < 25) {
message = 'You are Normal weight';
} else if (bmi >= 25 && bmi < 30) {
message = 'You are Overweight';
} else {
message = 'You are Obese';
}
setBmiMessage(message);
} else {
setBmiValue('');
setBmiMessage('');
}
};

return (
<div className="container">
<h1>GeeksforGeeks BMI Calculator</h1>
<div className="input-container">
<label htmlFor="height">Enter Your Height (cm):</label>
<input
type="number"
id="height"
value={heightValue}
onChange={(e) => setHeightValue(e.target.value)}
/>
</div>
<div className="input-container">
<label htmlFor="weight">Enter Your Weight (kg):</label>
<input
type="number"
id="weight"
value={weightValue}
 10

onChange={(e) => setWeightValue(e.target.value)}

/>
</div>
<button className="calculate-btn" onClick={calculateBmi}>
Click to Calculate BMI
</button>
{bmiValue && bmiMessage && (
<div className="result">
<p>
Your BMI: <span className="bmi-value">{bmiValue}</span>
</p>
<p>
Result: <span className="bmi-message">{bmiMessage}</span>
</p>
</div>
)}
</div>
);
}

export default BmiCalculator;

 11

OUTPUT :

RESULT :
The cross-platform application for BMI calculator application using REACT NATIVE
JS was built and the desired output was displayed.
 12

EX NO: 2
BUILD A CROSS PLATFORM APPLICATION FOR A
DATE : SIMPLE EXPENSE MANAGER

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

PROCEDURE:
Step 1: Initialize state variables using `useState` for
`transactions`, `amount`,
`category`, and `transactionType`.
Step 2: When the "Add Transaction" button is clicked.
Step 3: Check if both `amount` and `category` fields have
values.
Step 4: If they do:
Step 5: Create a new transaction object with type, amount,
category, and the
current date.
Step 6: Add this transaction to the `transactions` array using
`setTransactions`.
Step 7: Reset `amount` and `category` to empty strings.
Step 8: `calculateWeeklyReport` function.
Step 9: Iterate through `transactions`.
Step 10: Group transactions by category, summing their
income and expenses
separately.
Step 11: Construct an object containing categories with their
respective income
and expenses for the week.
Step 12: Display input fields for `amount`, `category`, and a
dropdown for
`transactionType`.
Step 13: Allow users to input values for these fields.
Step 14: Provide an "Add Transaction" button to add
transactions based on user
input.
Step 15: Show a categorized list of income and expenses for
the week, generated
from `calculateWeeklyReport`.
 13

PROGRAM:
import React, { useState } from 'react';
const ExpenseManager = () => {
const [transactions, setTransactions] = useState([]);
const [amount, setAmount] = useState('');
const [category, setCategory] = useState('');
const [transactionType, setTransactionType] =
useState('Expense');
const addTransaction = () => {
if (amount && category) {
const newTransaction = {
type: transactionType,
amount: parseFloat(amount),
category,
date: new Date().toISOString(),
};
setTransactions([...transactions, newTransaction]);
setAmount('');
setCategory('');
}
};
const calculateWeeklyReport = () => {
const categories = transactions.reduce((acc, transaction) => {
const { category, type, amount } = transaction;
acc[category] = acc[category] || { income: 0, expense: 0 };
acc[category][type.toLowerCase()] += amount;
return acc;
}, {});
return Object.entries(categories).map(([category, { income,
expense }]) => ({
category,
income,
expense,
}));
};
return (
<div>
<h1>Expense Manager</h1>
<label>
Amount:
<input
type="number"
value={amount}
 14

onChange={(e) => setAmount(e.target.value)}

/>
</label>
<br />
<label>
Category:
<input
type="text"
value={category}
onChange={(e) => setCategory(e.target.value)}
/>
</label>
<br />
<label>
Transaction Type:
<select value={transactionType}
onChange={(e) => setTransactionType(e.target.value)}
>
<option value="Expense">Expense</option>
<option value="Income">Income</option>
</select>
</label>
<br />
<button onClick={addTransaction}>Add Transaction</button>
<div>
<h2>Weekly Report:</h2>
<ul>
{calculateWeeklyReport().map((item) => (
<li key={item.category}>
<h3>Category: {item.category}</h3>
<p>Income: {item.income}</p>
<p>Expense: {item.expense}</p>
</li>
))}
</ul>
</div> </div>
);
};
function App() {
return (
<div className="App">
<ExpenseManager />
</div>
 15

);
}
export default App;
 16

OUTPUT:

Result:
The cross-platform application for a income-expense displayer
using react-native was built successfully.
 17

EX NO: 4 DESIGN AND DEVELOP A CROSS

DATE : PLATFORM
APPLICATION FOR DAY-TO-DAY(TO-DO)
TASK

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

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={newTask}
onChange={handleInputChange}
placeholder="Add a task..."
/>
<button onClick={addTask}>Add Task</button>
</div>
</div>
);
};
export default TodoApp;
 19

PROCEDURE TO CODE :
20
 21

GOTO TO VISUAL STUDIO :

 22

OUTPUT :

Result:
The cross platform application for a day to day task
management using react native was built successfully.