NARAYANAGURU COLLEGE OF ENGINEERING

MANJALUMOODU P.O. KANYAKUMARI DIST. TAMILNADU

PRACTICAL RECORD

CCS 322 App Development

 NARAYANAGURU COLLEGE OF ENGINEERING

(AN ISO 9001-2000 Certified Institution)

Chittadavu estate, Manjalumoodu- 629151
Kanyakumari district

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

SEMESTER:………… BRANCH:………………………………………………………

ROLL NO:………………………… [Link]…………………………………………..

Certified that this is the bonafide record of the work done in

the………………………………………………………………………………………………
Laboratory of Narayanaguru College of Engineering, in partial fulfillment of the
requirements of the B.E Degree of the Anna University, Chennai.

Staff in charge HOD

Submitted at the University Practical

Examination. ................................ 2025

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

Date: …………………………..

Internal Examiner External Examiner

EX. NAME OF TH EXPERIMENT
No. PAGE NO SIGN
 CCS332 APP DEVELOPMENT LABORATORY LTPC

0042

OBJECTIVES:

• To understand and apply the algorithm analysis techniques on searching and sorting algorithms
• To critically analyze the efficiency of graph algorithms
• To understand different algorithm design techniques
• To solve programming problems using state space tree
• To understand the concepts behind NP Completeness, Approximation algorithms and
randomized algorithms.

PRACTICAL EXERCISES: 30 PERIODS

1. Using react native, build across 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 metrics 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
a) For a simple library application.
b) 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
8. The aim of the Daily Habits Tracker app is to help users track their daily habits, enabling them to cultivate positive
behaviors and routines over time.

COURSE OUT COMES: At the end of this course, the students will be able to:
CO1: Develop Native applications with GUI Components.
CO2: Develop hybrid applications with basic event handling.
CO3: Implement cross-platform applications with location and data storage capabilities
CO4: Implement cross platform applications with basic GUI and event handling.
CO5: Develop web applications with cloud database access.
DATE: Using react native, build across platform application for a
[Link] BMI calculator.

Aim:-To create an app using react native, build across platform application for a BMI calculator.

Objective:Develop a React Native app for calculating BMI across different platforms, providing an
intuitive interface for users to input their weight and height, and displaying the calculated BMI
along with a brief interpretation of the result.

Theory: Body Mass Index (BMI) is a measure used to assess a person's weight status based on
their height and weight. It's calculated by dividing weight (in kilograms) by the square of height
(in meters). BMI falls into categories: underweight, normal weight, overweight, and obese.
Developing a BMI calculator app with React Native involves creating an interface for users to
input weight and height, performing the BMI calculation, and displaying the result with
interpretation. This app aims to provide a quick and accessible tool for users to monitor their
weight status on different mobile platforms.

Algorithm:

[Link]: Begin the BMI Calculator app.

[Link]: Prompt the user to enter their height in centimeters. Step 3.
Get Height: Capture the height input from the user.
Step4. Input: Prompt the user to enter their weight in kilograms.
Step 5. Get Weight: Capture the weight input from the user.
[Link] BMI:Calculate the BMI using the formula:\(\text{BMI}=
\frac{\text{weight}}{(\text{height}\div100)^2} \).
Step7. Determine Weight Status : Determine the weight status based on the calculated BMI. If BMI
< 18.5, user is underweight; if BMI is between 18.5 and 24.9, user has normal weight; if BMI is
between 25 and 29.9, user is overweight; if BMI is 30 or above, user is obese.
Step8. Display BMI Result: Show the calculated BMI along with the weight status.
Step9. Display Loading Screen:While calculating BMI, display a loading screen to indicate
processing.
[Link]: Finish the BMI Calculator app.

1
/Program for BMI Caluculator/

Home [Link]
importReact,{useState, useEffect }from'react';
import{Text,View,TextInput,ScrollView,Image,TouchableOpacity}from'react-native'; import Spinner
from 'react-native-loading-spinner-overlay';
import{withExpoSnack}from'nativewind'; import
{ styled } from 'nativewind';
importimgfrom'../assets/[Link]';
import{useNavigation}from'@react-navigation/native';

constStyledView=styled(View); const
StyledText = styled(Text);
constStyledTextInput =styled(TextInput);

constHomeScreen=()=>{
const [height, setHeight] = useState('');
const[weight,setWeight]=useState(''); const
[bmi, setBMI] = useState(null);
const[loading,setLoading]=useState(true); const

navigation = useNavigation();

useEffect(()=>{
constasyncOperation =async()=>{
awaitnewPromise(resolve=>setTimeout(resolve,2000));
setLoading(false);
};

asyncOperation();
}, []);

constcalculateBMI=()=>{
setLoading(true); setTimeout(()
=> {
constbmiValue=(weight/((height/100)(height/100))).toFixed(2); setBMI(bmiValue);
setLoading(false);
[Link]('Result',{bmi:bmiValue});
}, 500);
};

2
return (
<ScrollViewstyle={{flex:1}}>
<StyledViewclassName='bg-blue-100h-screen'>
<StyledViewclassName='m-10'>
<StyledTextclassName='text-xlpt-0'>Welcome </StyledText>
<StyledTextclassName='mt-2text-3xlfont-semibold'>BMIcalculator</StyledText>
<StyledTextclassName='pl-16text-2xlmt-5'>Checkyour<StyledTextclassName='font-
bold'>BMI</StyledText></StyledText>
<StyledViewclassName='flexjustify-center'>
<StyledTextclassName='mt-3text-2xl'>EnterYourHeight(cm):</StyledText>
<StyledTextInputclassName='border-2border-blackrounded-mdpl-5'
keyboardType="numeric"
placeholder='EnterYourHeight' value={height}
onChangeText={(text)=>setHeight(text)}
/>
</StyledView>
<StyledViewclassName='pb-5pt-5'>
<StyledTextclassName='pl-0text-2xl'>EnteryourWeight(kg):</StyledText>
<StyledTextInputclassName='border-2border-blackrounded-mdpl-5'
keyboardType="numeric"
placeholder='EnterYourweight' value={weight}
onChangeText={(text)=>setWeight(text)}
/>
</StyledView>

<TouchableOpacity
style={{backgroundColor:'
blue',borderRadius:
10,
padding: 15, alignItems:
'center',
marginHorizontal:20,
marginTop:20
}}
onPress={calculateBMI}
disabled={loading}
>
<StyledTextstyle={{color:'white',fontSize:18}}>CalculateBMI</StyledText>
</TouchableOpacity>

3
<Spinner
visible={loading}
textContent={'Loading...'}
textStyle={{color:'#FFF'}}
/>
<StyledViewclassName='pl-20h-60w-60mt-14'>
<Imagesource={img}alt='image'/>
</StyledView>
</StyledView>
</StyledView>
</ScrollView>
);
};

exportdefaultwithExpoSnack(HomeScreen);

[Link]
importReactfrom'react';
import{Button,View,Text,Image}from'react-native'; import { styled
} from 'nativewind';
importimgfrom'../assets/[Link]';
import{ScrollView }from'react-native-gesture-handler';

constResultScreen=({route,navigation})=>{ const bmi =

[Link]?.bmi;

const StyledView = styled(View); const

StyledText = styled(Text);
constStyledButton=styled(Button);

constgetWeightStatus=(bmiValue)=>{ if
(bmiValue< 18.5) {
return{status:'Underweight ',color:'blue'};
}elseif(bmiValue>=18.5&&bmiValue<24.9){ return {
status: 'Normal Weight ', color: 'green'
};
}elseif(bmiValue>=25&&bmiValue<29.9)
{return {status: 'Overweight ', color: 'orange'
};
}else{

return{status:'Obese ',color:'red'};
}
};

4
 const{status,color}=getWeightStatus(parseFloat(bmi));

return (
<ScrollViewstyle={{flex:1}}>
<StyledViewclassName={bg-${color}-100h-screen}>
{bmi!==null&&(
<>
<StyledTextclassName='pt-40font-semiboldtext-xltext-centertext-blue-600'> Your BMI is:
</StyledText>
<StyledTextclassName={font-boldtext-6xltext-centermt-5text-${color}-700}>
{bmi}
</StyledText>
<StyledTextclassName={pt-5text-centertext-${color}-800}> Weight
Status: {status}
</StyledText>
</>
)}

<StyledViewclassName='pl-20mt-40'>
<Imagesource={img}alt='image'/>
</StyledView>
</StyledView>
</ScrollView>
);
};

exportdefaultResultScreen;

[Link]

importReactfrom'react';
import{NavigationContainer}from'@react-navigation/native'; import
{createStackNavigator }from'@react-navigation/stack'; import
HomeScreen from './screens/HomeScreen';
import ResultScreen from
'./screens/ResultScreen'; import { AppRegistry } from
'react-native';
constStack=createStackNavigator();

constApp=()=>
{return(
<NavigationContainer>
<[Link]="Home">
<[Link]="BMICalculator"component={HomeScreen}/>
5
 <[Link]="Result"component={ResultScreen}/>
</[Link]>
</NavigationContainer>
);
};

[Link]('App',()=>App); export
default App;

Output:

Conclusion:Hence we have studied and executed the program for BMI Calculator.

6
DATE:EXPT. Build a cross platform application for a simple expense manager which allows
NO:02 Entering expenses and income on each day and displays categorywise weekly income
and expense.

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

Objective: Develop across-plat form application for managing expenses and income, enabling
users to input their financial transactions daily.

Theory: A simple expense manager app enables users to track their daily expenses and income,
providing a weekly summary and category-wise analysis of financial transactions to help users
manage their finances effectively.

Algorithm:

Step1: Start: Begin the Daily Expenses Calculatorapp.

Step2: Load Data: On app initialization, load previously saved expense and income
data from Async Storage.

Step3: Display Home Screen: Show the home screen with options to add income,
add expenses, and view current balance.

Step4: Add Income: Allow the user to input their income for the selected date,
along with an optional note.

Step5: Add Expense: Enable the user to input their expenses for the selected date,
along with an optional note.

Step6: Show Calendar: Provide a button to display a calendar for selecting the date
of income or expenses entry.

Step7: Calculate Balance: Calculate the balance by subtracting total expenses from total
income, considering all transactions up to the selected date.

Step 8: Display Transactions: Show the list of income and expenses for the selected
date, including the date, amount, and note (if available),with options to delete
individual transactions.
7
Step9:Save Data: Save the updated list of income and expenses to Async
Storage whenever changes occur.

Step10:End: Finish the Daily Expenses Calculator app.

/Program a simple expense manager/

[Link]

Import React,{useState, useEffect }from'react';

import{View,Text,TextInput,TouchableOpacity,ScrollView,Alert}from'react-native'; import {
Calendar } from 'react-native-calendars';
importModalfrom'react-native-modal'; import {
styled } from 'nativewind';
importAsyncStoragefrom'@react-native-async-storage/async-storage'; import
{ withExpoSnack } from 'nativewind';

constStyledView=styled(View); const
StyledText = styled(Text);
constStyledTextInput =styled(TextInput);

constHomeScreen=()=>{
const[expense,setExpense]=useState(''); const
[income, setIncome] = useState('');
const[isCalendarVisible,setCalendarVisible]=useState(false);
const[selectedDate,setSelectedDate]=useState(newDate().toISOString().split('T')[0]); const
[previousDayBalance, setPreviousDayBalance] = useState(0);
const[expensesList,setExpensesList]=useState([]); const
[incomeList, setIncomeList] = useState([]);
const[expensesSummary,setExpensesSummary]=useState(null); const [note,
setNote] = useState('');
const[expenseNote,setExpenseNote]=useState(''); const
[incomeNote, setIncomeNote] = useState('');

constSTORAGE_KEY='@DailyExpenses:data';
constMONTH_IN_MILLISECONDS=30*24*60*60*1000;

//FunctiontoloaddatafromAsyncStorage const
loadData = async () => {
try{

8
 constdata=[Link](STORAGE_KEY); if (data
!== null) {

constparsedData=[Link](data);
const{timestamp,expensesList:storedExpenses,incomeList:storedIncome}=parsedData; if ([Link]()
- timestamp <= MONTH_IN_MILLISECONDS)
{setExpensesList(storedExpenses||[]);
setIncomeList(storedIncome || []);
} else { clearData();
}
}
}catch(error){
[Link]('ErrorloadingdatafromAsyncStorage:',error);
}
};

//FunctiontosavedatatoAsyncStorage const
saveData = async () => {
try{
constdataToSave=[Link]({
timestamp: [Link](), expensesList,
incomeList,
});
[Link](STORAGE_KEY,dataToSave);
}catch(error){
[Link]('ErrorsavingdatatoAsyncStorage:', error);
}
};

//FunctiontocleardatafromAsyncStorage const
clearData = async () => {
try{
[Link](STORAGE_KEY);
setExpensesList([]);
setIncomeList([]);
}catch(error){
[Link]('ErrorclearingdatafromAsyncStorage:',error);
}
};
9
//UseuseEffecttoloaddatawhenthecomponentmounts useEffect(()
=> {
loadData();
},[]);

//UseuseEffecttosavedatawheneverexpensesListorincomeListchanges useEffect(() => {

saveData();
},[expensesList,incomeList]);

consthandleShowCalendar=()=>{
setCalendarVisible(true);
};

consthandleAddExpense=()=>{
constexpenseValue=parseFloat(expense);
if(!isNaN(expenseValue)&&[Link](expenseValue)){
setExpensesList([...expensesList,{date:selectedDate,amount:expenseValue,note:expenseNote}]); setExpense('');
setExpenseNote('');//Clearnoteafteradding
}else {
[Link]('Error','Pleaseenteravalidintegerexpenseamount.');
}
};

consthandleAddIncome =()=>{
constincomeValue=parseFloat(income);
if(!isNaN(incomeValue)&&[Link](incomeValue)){
setIncomeList([...incomeList,{date:selectedDate,amount:incomeValue,note:incomeNote}]); setIncome('');
setIncomeNote('');//Clearnoteafteradding
}else {
[Link]('Error','Pleaseenteravalidintegerincomeamount.');
}
};

consthandleDeleteExpense=(index)=>
{constupdatedExpenses=[...expensesList];
[Link](index, 1);
setExpensesList(updatedExpenses);
};

10
consthandleDeleteIncome=(index)=>
{constupdatedIncome=[...incomeList];
[Link](index, 1);
setIncomeList(updatedIncome);
};

constcalculateBalance=()=>{
const totalIncome = [Link]((acc, item) => acc + parseFloat([Link]), 0);
consttotalExpenses=[Link]((acc,item)=>acc+parseFloat([Link]),0); const balance
= totalIncome - totalExpenses;

letcolor='text-black';

if (balance < 0)
{color='text-red-500';
}elseif(balance>0)
{color='text-green-500';
}else {
color='text-blue-500';
}

return{balance,color };
};

const handleCalendarDayPress = (day) =>{

setPreviousDayBalance(calculateBalance().balance);
setCalendarVisible(false);
setSelectedDate([Link]);//Updateselecteddate

//Updateexpensessummarywhenadateisselected updateExpensesSummary([Link]);
};

constupdateExpensesSummary=(selectedDate)=>{
//Filterexpensesfortheselectedmonth
constselectedMonthExpenses=[Link]((expense)=>[Link]([Link](0, 7))
);

// Calculate total expenses for the selected month const

totalExpenses =
[Link]((acc,item)=>acc+
parseFloat([Link]),

11
 );

setExpensesSummary({
selectedMonth: [Link](0, 7),
totalExpenses:[Link](2),
expensesList: selectedMonthExpenses,
});
};

return(
<ScrollView>
<StyledViewclassName="bg-blue-300h-fullp-8">
<StyledViewclassName='gridgrid-cols-2'>
<TouchableOpacityonPress={handleShow
Calendar} style={{
backgroundColor:'#7C3A9F',
padding: 10,
borderRadius:5,
marginTop: 10,
alignSelf:'center',
}}
>

<StyledTextstyle={{color:'white'}}>ShowDate</StyledText>
</TouchableOpacity>
<StyledViewclassName="m-4">
<StyledTextclassName="text-lgbg-orange-100px-5py-1rounded-xl">{Selected Date:
${selectedDate}}</StyledText>
</StyledView>
</StyledView>
<StyledTextclassName="text-centerfont-semiboldpb-5pt-4text-3xl">DailyExpenses
</StyledText>

<ModalisVisible={isCalendarVisible}>
<CalendaronDayPress={handleCalendarDayPress}/>
</Modal>

<StyledView>
<StyledTextclassName="px-4py-2text-xl">Add Income</StyledText>
</StyledView>
<StyledTextInput

12
 className="bg-green-100px-4py-2mx-4rounded-xl" placeholder="Enter
Income"
value={income}
onChangeText={(text)=>setIncome([Link](/[^0-9]/g,''))}
keyboardType="numeric"
/>
<StyledViewclassName='pt-2'>
<StyledTextInput
className="bg-green-100px-4py-2mx-4rounded-xl"
placeholder="Enter Note (Optional)" value={incomeNote}
onChangeText={(text)=>setIncomeNote(text)}
/>
</StyledView>
<StyledViewclassName="mx-10pt-4">
<TouchableOpacitystyle={
{
backgroundColor:'#27ae60',
padding: 10,
borderRadius:5,
marginTop:10,
}}
onPress={handleAddIncome}
>
<StyledTextstyle={{color:'white'}}>Add Income</StyledText>
</TouchableOpacity>
</StyledView>
<StyledView>
<StyledTextclassName="px-4py-2text-xl">IncomeList</StyledText>
</StyledView>
{[Link]((incomeItem,index)=>(
<StyledViewkey={index}className="flexflex-colsm:flex-rowitems-startsm:items-centerjustify- between px-4
py-2 mx-4 bg-white rounded-md my-2">
<StyledViewclassName="flex-1">
<StyledTextclassName="mb-2sm:mb-0">{${[Link]}:
${[Link]}}</StyledText>
<StyledViewclassName="bg-yellow-100px-4py-2rounded-md">
<StyledTextclassName="whitespace-nowrapoverflow-hiddenoverflow-ellipsis">
{Note:${[Link]||'-'}}
</StyledText>
</StyledView>
</StyledView>
<TouchableOpacityonPress={()=>handleDeleteIncome(index)}>

13
<StyledTextclassName="text-red-500">Delete</StyledText>
</TouchableOpacity>
</StyledView>
))}

<StyledView>
<StyledTextclassName="px-4py-2text-xl">AddExpenses</StyledText>
</StyledView>
<StyledTextInput
className="bg-red-100px-4py-2mx-4rounded-xl" placeholder="Enter
Expenses"
value={expense}
onChangeText={(text)=>setExpense([Link](/[^0-9]/g,''))}
keyboardType="numeric"
/>
<StyledViewclassName='pt-2'>
<StyledTextInput
className="bg-red-100px-4py-2mx-4rounded-xl"
placeholder="Enter Note (Optional)" value={expenseNote}
onChangeText={(text)=>setExpenseNote(text)}
/>
</StyledView>
<StyledViewclassName="mx-10mt-4">
<TouchableOpacitystyle={
{
backgroundColor:'#3498db',
padding: 10,
borderRadius:5,
marginTop:10,
}}
onPress={handleAddExpense}
>
<StyledTextstyle={{color:'white'}}>Add Expense</StyledText>
</TouchableOpacity>
</StyledView>

<StyledView>
<StyledTextclassName="px-4py-2text-xl">ExpensesList</StyledText>
</StyledView>
{[Link]((expenseItem,index)=>(
<StyledViewkey={index}className="flexflex-colsm:flex-rowitems-startsm:items-centerjustify-

14
betweenpx-4py-2mx-4bg-whiterounded-mdmy-2">
<StyledViewclassName="flex-1">
<StyledTextclassName="mb-2sm:mb-0">{${[Link]}:
${[Link]}}</StyledText>
<StyledViewclassName="bg-red-100px-4py-2rounded-md">
<StyledTextclassName="whitespace-normalbreak-words">
{Note:${[Link]||'-'}}
</StyledText>
</StyledView>
</StyledView>
<TouchableOpacityonPress={()=>handleDeleteExpense(index)}>
<StyledTextclassName="text-red-500">Delete</StyledText>
</TouchableOpacity>
</StyledView>
))}
<StyledView>
<StyledTextclassName="px-4py-2text-xl">Balance</StyledText>
</StyledView>
<StyledViewclassName={bg-white rounded-mdmy-2p-4${calculateBalance().color}}>
<StyledTextclassName="text-2xltext-centerfont-bold">
{Balance:${calculateBalance().[Link](2)}}
</StyledText>
{previousDayBalance!==0&&(
<StyledTextclassName="text-basetext-center">
{PreviousDayBalance:${[Link](2)}}
</StyledText>
)}
</StyledView>
<StyledView>
</StyledView>
{expensesSummary&&(
<StyledViewclassName="bg-whiterounded-mdmy-2p-4">
<StyledTextclassName="text-xlfont-bold">
{ExpensesSummaryfor${[Link]}}
</StyledText>
<StyledText>{TotalExpenses:${[Link]}}</StyledText>

<StyledViewclassName="mt-4">
<StyledTextclassName="text-xlfont-bold">ExpensesList</StyledText>
{[Link]((expenseItem,index)=>(
<StyledViewkey={inde
x}
className="flex-rowitems-centerjustify-between px-4py-2mx-4bg-whiterounded-mdmy-2"
>
15
<StyledText>{${[Link]}:${[Link]}}</StyledText>
<StyledText>{Note:${[Link]||'-'}}</StyledText>
<TouchableOpacityonPress={()=>handleDeleteExpense(index)}>
<StyledTextstyle={{color:'red'}}>Delete</StyledText>
</TouchableOpacity>
</StyledView>
))}
</StyledView>
</StyledView>
)}
</StyledView>
</ScrollView>
);
};

exportdefaultwithExpoSnack(HomeScreen);

[Link]

//[Link]
importReactfrom'react';
import{NavigationContainer}from'@react-navigation/native'; import
{createStackNavigator }from'@react-navigation/stack'; import {
AppRegistry } from 'react-native';
import { withExpoSnack } from 'nativewind';
importHomeScreenfrom'./Screens/HomeScreen';

constStack=createStackNavigator(); const

App = () => {
return(
<NavigationContainer>
<[Link]="HomeScreen">
<[Link]="HomeScreen"component={HomeScreen}/>
</[Link]>
</NavigationContainer>
);
}

16
Output:

Conclusion: Hence we have studied and executed the program for Simple Expense Manager.

17
DATE: Develop a cross platform application to convert units from
[Link]: 03 imperial system to metric system (
Km to miles, kg to pounds etc.,)

Aim:-Program to develop across platform application to convert units from imperial system to
metric system ( km to miles, kg to pounds etc.,)

Objective:The objective is to create across-platform application that enable users to convert

units from the imperial system to the metric system and vice versa. The application will provide
a user-friendly interface for converting various units such as kilometers to miles, kilograms to
pounds.

Theory: The application simplifies unit conversion between the imperial and metric systems,
allowing users to quickly convert measurements like kilometers to miles and kilograms to
pounds.

Algorithm:
Algorithm for Setting Up and Building Unit Converter App with Cordova:

Step 1. Create Cordova Project: Use Cordova CLI to create a new Cordova project by running
cordova create Unit Converter Appcom. example. Unit converter Unit ConverterApp. Then
navigate to the project directory using cd Unit ConverterApp.

[Link] Platforms:Add platforms for Android and iOS by running cordova platform add
android and cordova platform add ios.

Step 3. Design User Interface: Design the user interface in [Link] file located in the
wwwdirectory. Include input fields for value and selection fields for"From"and"To"units. Add a
button to trigger the conversion process and a section to display the result.

[Link] CSSStyling: Style the user interface elements for better presentation. Createa CSS file
[Link] in the www/css directory and apply styles to the HTML elements.

Step 5. Implement JavaScript Functionality: Write JavaScript functionality to handle the unit
conversion logic. Create a JavaScript file [Link] in the www/js directory. Define a function
convert () to extract input values, perform unit conversion based on selected units , and display the
result.

Step6. BuildandRun the App: Use Cordova CLI commands to build the app forAndroid and iOS
platforms. Run cordova build android and cordova build ios to generate the APK and IPA files
respectively. Deploy the app on emulators/simulators or physical devicesfor testing and
distribution.

18
/Program for cross platform application to convert units /

Set Up Your CordovaProject:

Cordova create Unit Converter App com. Example .unit converter Unit Converter App cd
Unit Converter App

Add Platforms:

cordovaplatformaddandroid
cordova platform add ios

DesigntheUserInterface:

<!--[Link]-->
<!DOCTYPEhtml>
<html>

<head>
<metacharset="utf-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1"/>
<title>UnitConverter</title>
<linkrel="stylesheet"type="text/css"href="css/[Link]" />
<scripttype="text/javascript"src="[Link]"></script>
</head>

<body>
<div class="container">
<h2>UnitConverter</h2>
<labelfor="value">Value:</label>
<inputtype="number"id="value"name="value"/>

<labelfor="fromUnit">From:</label>
<selectid="fromUnit">
<optionvalue="km">Kilometers(km)</option>
<optionvalue="mi">Miles(mi)</option>
<!--Addmoreoptionsforotherunits-->
</select>

<labelfor="toUnit">To:</label>
<selectid="toUnit">

19
 <optionvalue="km">Kilometers(km)</option>
<optionvalue="mi">Miles(mi)</option>
<!--Addmoreoptionsforotherunits-->

</select>

<buttononclick="convert()">Convert</button>

<div id="result"></div>
</div>

<scriptsrc="js/[Link]"></script>
</body>

</html>

AddCSS:
body{
font-family:Arial,sans-serif;
}

.container{
margin:20pxauto; width:
80%;
}

label{
display: block;
margin-bottom:
5px;
}

input,select
{width:100%;
padding: 8px;
margin-bottom:10px;
}

button{
padding:10px;
margin-top:
10px;
}
20
Java Script Functionality:
// js/[Link]
functionconvert(){
varvalue=parseFloat([Link]("value").value); var
fromUnit = [Link]("fromUnit").value;
vartoUnit=[Link]("toUnit").value;

varresult=0;
if(fromUnit==="km"&&toUnit=== "mi")
{result=value*0.621371;
}elseif(fromUnit=== "mi"&&toUnit==="km")
{result=value*1.60934;
}
//Addmoreconversionlogic forotherunits

[Link]("result").innerHTML="Result:"+[Link](2)+""+toUnit;
}

Build and RunYourApp:

Cordova build android
cordova build ios

Output:

21
Conclusion:Hence we have studied and executed the program for covert units from imperial system
to metric system.

22
DATE: Design and develop across platform application for day to day
[Link] task (to-do) management.

Aim:-Program to design and develop across platform application for day to day task (to-
do) management.

Objective:To write a program to design and develop a cross platform application for day to day
task (to-do) management.

Theory: The aim is to create a cross-platform application for day-to-day task

[Link]-friendlyinterfacetoadd,delete,and manage tasks
efficiently. The application will prioritize simplicity and
intuitive functionality.

Algorithm:
1. Install Ionic CLI: Install the Ionic command-line interface globally using npm.

2. Create Ionic Project: Use the Ionic CLI to create a new Ionic project, specifying the
project type as Angular.

3. Navigate to Project Directory: Change directory to the newly created project directory.

4. Design User Interface: Define the UI layout and components in the HTML file located at
src/app/home/[Link].

5. ImplementLogic:WritetheTypeScriptlogicforthehomepagecomponentto handle
adding tasks. This logic is implemented in the TypeScript file located at
src/app/home/[Link].

6. Build and Run:Add platforms for building (Android and iOS), build the app for each
platform, and then run it on a simulator/emulator or a physical device.

/Program for TO DO list Management/

SetUpYourIonicProject:

npm install -g @ionic/cli Create

a new Ionic project:

23
ionic start To Do List App
blank --type=angular

Change directory to your

project:

cdToDoListApp

Design the User Interface:

<!--
src/app/home/[Link] l -
->
<ion-header>
<ion-toolbar>
<ion-title>
To-DoList
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-list>
<ion-item*ngFor="let
item of items">
{{[Link]}}
</ion-item>
</ion-list>

<ion-item>
<ion-input
placeholder="Enter task"
[(ngModel)]="newTask"></ion
-input>
<ion-button
expand="block"
(click)="addItem()">Add
Task</ion-button>
</ion-item>
24
Implement the Logic:
//src/app/home/[Link]
import { Component } from
'@angular/core';

@Component({select
or: 'app-home',
templateUrl:
'[Link]',
styleUrls:
['[Link]'],
})
exportclassHomePage
{items:{task:string}[]=
[];newTask:string='';

addItem(){
if([Link]()!== '') {
[Link]({task:
[Link] });
[Link]='';
}
}
}

Build and Run Your App:

Ionic cordova platform add

android
Ionic cordova platform add
ios
Buildtheapp:

ioniccordovabuildandroid ionic
cordova build ios

Run the app on a simulator or a

physical device:
25
ionic cordova emulate
android
ionic cordova emulate ios

Orrundirectlyona connected
device:

ioniccordovarunandroid
ionic cordova run ios

26
Output:

Conclusion: Hence we have studied and executed the program for Day to Day TO DO List
Management.

27
DATE: Design a user login screen with user name, password, reset
[Link] button and a submit button.

Aim:- Program 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.

Objective: Develop an Android application using Cordova to create a user-friendlylogin screen

with input fields for username and password, along with reset and submit buttons. Additionally,
include a header image and a label for enhanced visual appeal.

Theory: The aim of the program is to develop an Android application using Cordova
framework, featuring a user login screen. The login screen includes input fields for username
and password, along with buttons for resetting the form and submitting the
[Link],theapplicationincorporatesaheaderimageandalabelfor visual appeal.
Layout managers are utilized to organize the elements on the screen efficiently, ensuring a
user-friendly interface.

Algorithm:
1. Set Up Cordova Project: Ensure Cordova is installed, then create a new project with
cordova create.

2. Add Android Platform: Add the Android platform to the project using cordova
platform add android.

3. Design User Interface: Create an HTML file ([Link]) for the login screenlayout,
including input fields for username and password, along with reset and submit buttons.
Utilize CSS for styling.

4. Add JavaScript Functionality: Implement JavaScript functionality ([Link]) for resetting

the form and handling form submission. Capture the input values and perform necessary
actions (e.g., logging credentials for demo purposes).

5. Build and Run: Build the Cordova project using cordova build android, then run it on an
Android device or emulator using cordova run android.

6. Test: Test the application to ensure the login screen functions as expected, allowing users
to input their credentials and submit the form.

28
Program for Screens:
SetUp Your Cordova Project:
First, make sure you have Cordova installed. Then create a new Cordova project:

Cordova create User Login [Link] login app User LoginApp cd

UserLoginApp

Add Android Platform:

AddAndroidplatformtoyourCordova project:

Cordova platform add android

Design the User Interface:

Create your HTML file with the login screen layout. You can use CSS for styling.

<!--[Link]-->
<!DOCTYPEhtml>
<html>

<head>
<metacharset="utf-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1"/>
<title>UserLogin</title>
<linkrel="stylesheet"type="text/css"href="css/[Link]" />
</head>

<body>
<div class="header">
<imgsrc="header_image.png"alt="HeaderImage"/>
<h1>Login</h1>
</div>

<div class="container">
<formid="loginForm">
<labelfor="username">Username:</label>
<inputtype="text"id="username"name="username"/>

<labelfor="password">Password:</label>
<inputtype="password"id="password"name="password" />

29
 <buttontype="button"onclick="resetForm()">Reset</button>
<buttontype="submit">Submit</button>
</form>
</div>

<scriptsrc="js/[Link]"></script>
</body>

</html>

Css:
/*css/[Link]*/
body {
font-family:Arial,sans-serif;
}

.header{
text-align:center;
}

.container{
margin:20pxauto; width:
80%;
}

label{
display: block;
margin-bottom:
5px;
}

input{
width:100%;
padding:8px;
margin-bottom:10px;
}

button{
padding:10px;
margin-top:
10px;
}

30
Java Script Functionality:

Add JavaScript file for handling form submission and resetting.

//js/[Link]
function resetForm() {
[Link]("loginForm").reset();
}

[Link]("loginForm").addEventListener("submit",function(event)
{ [Link](); // Prevent default form submission
varusername=[Link]("username").value;
varpassword=[Link]("password").value;

//You can addyourloginlogichere

// For demo purposes, just log the credentials
[Link]("Username:"+username+",Password:"+password);
});

Build and Run Your App:

Build your Cordova project and run it on an Android device or emulator:

Cordova build android

cordova run android

31
Output:

Conclusion:Hencewehavestudied andexecutedtheprogramforuserlogin Screen.

32
DATE: Develop an android application using Apache Cordova to
[Link]
find and display the current location of the user.

Aim:-Program to design and develop an android application using Apache Cordova to find and
display the current location of the user.

Objective: Develop an Android application using Apache Cordova to retrieve and display the
user's current location.

Theory:
Apache Cordova facilitates the creation of cross-platform mobile applications by leveraging
web technologies. Utilizing Cordova's geolocation plugin, we can access the device's GPS
capabilities to determine the user's latitude and longitude coordinates.
These coordinates are then displayed on the application's interface. The process involves setting
up a Cordova project, designing the interface using HTML and CSS, implementing JavaScript
functionality.

Algorithm:

Algorithm:LocationAppUsing Cordova

1. Setup Cordova Project: Create a Cordova project named "Location App" and navigate into
it.

2. Add Android Platform: Use Cordova CLI to add Android platform support.

3. InstallGeolocation Plugin:AddtheGeolocation plugintoenablelocationservices.

4. DesignUI:[Link] information.

5. ImplementJavaScript:[Link] user's
current location.

6. Build and Run: Build the project for Android and run it on a device or emulator.

7. Test and Debug: Test the app for accurate location retrieval and handle any errors.

8. Deployment: Consider deployment options like Google Play Store for

wider distribution.

33
 //Program for android appli//

Set Up Your Cordova Project:

Cordova create Location Appcom. [Link] cd

LocationApp

Add the Android platform to your Cordova project:

Cordova platform add android Install

Required Plugins:

Cordova plugin addcordova -plugin- geo location

Design the User Interface:

<!--[Link]-->
<!DOCTYPEhtml>
<html>

<head>
<metacharset="utf-8" />
<metaname="viewport"content="width=device-width,initial-scale=1"/>
<title>LocationApp</title>
<scripttype="text/javascript"src="[Link]"></script>
</head>

<body>
<div id="locationDisplay">
<h2>CurrentLocation:</h2>
<pid="latitude">Latitude:</p>
<pid="longitude">Longitude:</p>
</div>

<scriptsrc="js/[Link]"></script>
</body>

</html>

34
Java Script Functionality:

Add Java Script code to retrieve the current location using the Cordova Geolocation plugin and display it on
the interface.

//js/[Link]
[Link]("deviceready",onDeviceReady,false);

functiononDeviceReady()
{[Link](onSuccess,
onError);
}

Function on Success(position){
varlatitude=[Link];
var longitude = [Link];
[Link]("latitude").textContent = "Latitude: " + latitude;
[Link]("longitude").textContent="Longitude:"+longitude;
}

functiononError(error){
alert('Erroroccurred:'+[Link]);
}

Build and RunYourApp:

Cordova build android

cordova run android

35
Output:

Conclusion:Hence we have studied and executed the program to find and display the current
location.

36
DATE: Write programs using Java to create Android
[Link] application having Databases

Aim:-Develop an Android library application with database support for managing book
availability, loans, and reservations, utilizing a centralized database server containing student
information.

Objective:- Create a user-friendly Android app enabling users to browse available books, track
loaned items, and make reservations, all synchronized with a remotedatabase server housing
student details.

Theory:- This Android application, built in Java, interfaces with a backend database server to
facilitate library operations. Utilizing database functionalities, such as querying for books and
updating loan statuses, ensures efficient management of library resources. The app's intuitive
UI provides seamless navigation and displays real-time information fetched from the central
database, enhancing user experience and enabling effective library management.

Algorithm:-

[Link] Schema Design: Define tables for books, students, loans, and reservations.
[Link]: Implement classes for database operations like insertion, retrieval,
and deletion.
[Link] Helper Class: Develop a helper class to manage database creation and
versioning.
[Link] Database Operations: Open a connection to the database, perform CRUD
operations.
[Link] with Android UI: Link database operations with user interface elements in the
Android application.
[Link] and Refine:Verify functionality, handle exceptions, and refine as needed for a
seamless user experience.
Design Database Schema:

CREATETABLEbooks(

idINTEGERPRIMARYKEY,
titleTEXT,
author
TEXT,
availabilityINTEGER
);
37
CREATETABLEstudents(
idINTEGER PRIMARYKEY,
nameTEXT,
email TEXT
);

CREATETABLEloans(
idINTEGER PRIMARYKEY,
book_id INTEGER,
student_idINTEGER,
loan_date TEXT,
return_date TEXT,
FOREIGNKEY(book_id)REFERENCESbooks(id),
FOREIGNKEY(student_id)REFERENCES students(id)
);

CREATETABLEreservations ( id
INTEGER PRIMARY KEY,
book_id INTEGER,
student_id INTEGER,
reservation_dateTEXT,
FOREIGNKEY(book_id)REFERENCESbooks(id),
FOREIGNKEY(student_id)REFERENCES students(id)
);

CreateJavaClassesforDatabaseOperations:

// [Link]
publicclassDatabaseHelperextendsSQLiteOpenHelper
{
privatestaticfinalStringDATABASE_NAME=
"[Link]";
privatestaticfinalintDATABASE_VERSION= 1;

publicDatabaseHelper(Contextcontext)
{super(context,DATABASE_NAME,null,
DATABASE_VERSION);
}

@Override
publicvoidonCreate(SQLiteDatabasedb)
{ [Link]("CREATE TABLE books (id
INTEGERPRIMARYKEY,titleTEXT,authorTEXT,
availabilityINTEGER)");

38
 [Link]("CREATETABLEstudents(id
INTEGER PRIMARY KEY, name TEXT, email TEXT)")

[Link]("CREATETABLEloans(idINTEGER
PRIMARY KEY, book_id INTEGER, student_id
INTEGER, loan_date TEXT, return_date TEXT, FOREIGN
KEY (book_id) REFERENCES books(id), FOREIGN KEY
(student_id) REFERENCES students(id))");
[Link]("CREATETABLEreservations(id
INTEGER PRIMARY KEY, book_id INTEGER,
student_id INTEGER, reservation_date TEXT,
FOREIGNKEY(book_id)REFERENCESbooks(id),
FOREIGN KEY (student_id) REFERENCES
students(id))");
}

@Override
publicvoidonUpgrade(SQLiteDatabasedb,int oldVersion,
int newVersion) {
//Implementif needed
}
}

PerformDatabaseOperations:
// [Link]
publicclassBook
{ private int id;private
String title; private
String author; privateint
availability;

//Constructor,getters,andsetters
}

// [Link]
publicclassBookRepository
{ privateSQLiteDatabase
database;privateDatabaseHelperdbHe
lper;

publicBookRepository(Contextcontext)
{ dbHelper = new
DatabaseHelper(context);}
39
 publicvoidopen(){
database=[Link]();
}

publicvoidclose(){ [Link]();
}

publicvoidaddBook(Book book)
{ ContentValues values = new
ContentValues(); [Link]("title",
[Link]());[Link]("author",
[Link]());
[Link]("availability",[Link]());

[Link]("books",null,values);
}

//ImplementotherCRUDoperations
}

Integrate with Android UI:

// [Link]
publicclassMainActivityextendsAppCompatActivity
{privateBookRepositorybookRepository;

@Override
protectedvoidonCreate(BundlesavedInstanceState){
[Link](savedInstanceState); setContentView([Link].activity_main);

bookRepository=newBookRepository(this);
[Link]();

//Add abook
Book book = new Book();
[Link]("Sample Book");
[Link]("SampleAuthor");
[Link](1);
[Link](book);
}

@Override
protectedvoidonDestroy(){ [Link]();
[Link]();
}
}

40
OUTPUT:

Conclusion:-Thus the programs using Java to create Android application having Databases has been executed
successfully.

41
DATE:
Develop Daily Habits Tracker app is to help users track
[Link]
their daily habits, enabling them to cultivate positive behaviors and
routines overtime.

Aim:-The aim of the Daily Habits Tracker app is t o help users track their daily habits, enabling
them to cultivate positive behaviors and routines over time.

Objective: Developauser-friendly mobile application that allows users to track their daily habits
effectively, fostering the establishment of positive behaviors and routines through consistent
monitoring and feedback.

Theory:
The Daily Habits Tracker app serves as a tool to facilitate habit formation and behavior change by
providing users with a structured platform to monitor their daily activities.
Bylogging andtracking their habits over time, users gain in sight into their behavioral patterns and
progress towards their goals. The app encourages consistency and accountability, empowering
individuals to cultivate positive habits through regular monitoring and feedback.

Algorithm:

1. Initialize State: Create state variables to manage the list of habits (habits) and the input
for adding new habits (new Habit).

2. Add Habit Functionality: Implement a function (add Habit) to add a new habit to the list when
the user submits the input. Ensure that the input is not empty before adding a new habit.

3. Toggle Habit Completion: Implement a function (toggle Habit) to toggle the completion
status of a habit when it is pressed. Update the completed property of the habit accordingly.

4. Render Habit List: Render the list of habits using the map function. For each habit,
displayitsnameandprovidetheabilitytotoggleitscompletionstatusbywrappingitin a Touchable
Opacity.

5. Styling: Apply styles to ensure proper layout and presentation of the components. Use
Style Sheet. Create to define styles for the container, input, habit container, text, and
completed habits..

42
 Program for developing app

Import React,{useState}from 'react';

import{View,Text,TextInput,Button,TouchableOpacity,StyleSheet}from'react-native';

constDailyHabitsTracker=()=>
{const[habits,setHabits]= useState([]);
const[newHabit,setNewHabit]=useState('');

constaddHabit=()=>{
if([Link]()!==''){
setHabits([...habits,{name:newHabit,completed:false}]);
setNewHabit('');
}
};

consttoggleHabit=(index)=>
{constupdatedHabits= [...habits];
updatedHabits[index].completed=!updatedHabits[index].completed;
setHabits(updatedHabits);
};

return(
<Viewstyle={[Link]}>
<Textstyle={[Link]}>DailyHabitsTracker</Text>
<Viewstyle={[Link]}>
<TextInputstyle={[Link]
put}
placeholder="Enteranewhabit"
value={newHabit}
onChangeText={setNewHabit}
/>
<Buttontitle="AddHabit"onPress={addHabit}/>
</View>
{[Link]((habit,index)=>(
<TouchableOpacitykey={index}onPress={()=>toggleHabit(index)}>
<Viewstyle={[Link]}>
<Textstyle={[[Link],[Link]&&[Link]]}>
{[Link]}
</Text>
</View>
</TouchableOpacity>

43
 ))}
</View>
);
};

const styles =
[Link]({container:{
flex: 1,
padding: 20,alignItems:
'center', justifyContent:
'center',
backgroundColor:'#fff',
},
title:
{ fontSize:
24,
fontWeight:'bold',
marginBottom:20,
},
inputContainer:
{ flexDirection:
'row',alignItems:
'center',
marginBottom:20,
},
input:
{ flex:
1,
borderWidth: 1,
borderColor:'#ccc',
borderRadius: 5,
padding:10,
marginRight:10,
},
habitContainer:
{ marginBottom:
10,
padding:10,
borderWidth: 1,
borderColor:'#ccc',
borderRadius: 5,
},
habitText:
{ fontSize:
18,},
44
 completedHabit:
{textDecorationLine:'line- through',
},
});

exportdefaultDailyHabitsTracker;

OUTPUT:

Conclusion:- Thus Developing Daily Habits Tracker app is to help user s track thei r daily habits,
enabling them to cultivate positive behaviors and routines over time is been executed.
45