SIMPLE EXPENSE MANAGER

- A Cross Platform Application using IONIC

AIM:
To write a Ionic Application which perform a Simple Expense Manager using Cross
Platform App Development in Windows.
ALGORITHM :
1. Nodejs V.14 or greater and JDK 11 or higher is required.
2. Install Chocolatey for window which ensure Node LTS and JDK 11 was properly installed
by pressing Windows button -> cmd.exe (run as administrator) -> paste the following path

C:\WINDOWS\system32>@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell
.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command
"[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object
System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))" &&
SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

3. Check Chocolatey was installed properly verify at: ‘C:\ ProgramData\ chocolatey\ bin\
choco.exe’
4. Install Nodejs and JDK with code: choco install –y nodejs-lts openjdk11
5. Install AndroidStudio with Android SDK tools & platform with Virtual Devices.
5.1 Install stable SDK Platform either Android 12.0 or Android 13.0 version
5.2 Install Intel x86 Atom_64 System Image in SDK package.
5.3 Install SDK Build tools with either 31.00 or 33.00 version
6. Set the Environmental Variable:
ANDROID_HOME: C:\Users\ System_Name\ AppData\Local\Android\Sdk>
7. The Ionic CLI can be installed globally with npm code :
npm install -g @ionic/cli
8. Start an App : The three most common starters are the blank starter, tabs starter, and
sidemenu starter. Get started with the
ionic start
9. Run the App : The majority of Ionic app development can be spent right in the
browser using the ionic serve command
$ cd myApp
$ ionic serve
10. If you run this application on Android version 10 (API 29+) or above you need to
enter the follow line in the AndroidManifest file under the application tag;
android:requestLegacyExternalStorage="true"
11. Create code on Angular-based codebase that runs on the web, iOS, and Android
using Ionic Framework UI components.
12. Adding Capacitor : You can also add Capacitor to your application by choosing
"Integrate Capacitor". you can now run your app on web, Android, and iOS with the
"Run On Web", "Run On Android", and "Run On iOS" options.

PROGRAM :
Home.page.html code :
<ion-header [translucent]="true">
<ion-toolbar color="dark" align="center">
<ion-title>
Expenses Application
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Expenses Application</ion-title>
</ion-toolbar>
</ion-header>

<div id="container">
<ion-grid class="ion-align-items-center">
<ion-row>
<ion-col>
<ion-button href="/add-expense/" color="success">Add Expense</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button href="/view-expenses/" color="tertiary">View Expenses</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button color="danger">Exit Application</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>

add.expense.page.html Code:
<ion-header>
<ion-toolbar color="success">
<ion-title>Add Expense</ion-title>
<ion-buttons slot="start">
<ion-back-button defaultHref="home"></ion-back-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button (click)="fileDelete()">
<ion-icon name="trash" slot="icon-only"> </ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-header color="success"><Strong>1. Name and Date of Expense</Strong></ion-
card-header>
<ion-item>
<ion-label position="floating">Expense Name</ion-label>
<ion-input type="text" [(ngModel)] ="expense.Name" id="input-name"></ion-input>
</ion-item>
<ion-item>
<ion-label>Date on Receipt</ion-label>
<ion-datetime display-format="DD MMM YYYY" placeholder="Select Date" [(ngModel)]
="expense.Date" id="expense_date"></ion-datetime>
</ion-item>
</ion-card>
<ion-card>
<ion-card-header color="success"><Strong>2. Add Receipt Line</Strong></ion-card-
header>
<ion-item>
<ion-label position="floating">Line Description</ion-label>
<ion-input type="text" [(ngModel)] ="expense.Reason" id="input-reason"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Amount</ion-label>
<ion-input type="number" [(ngModel)] ="expense.Amount" id="input-amount"></ion-
input>
</ion-item>
<div class="ion-margin-vertical ion-text-center">
<ion-button (click)="clearList()" fill="outline" color="danger" id="btn-cancel">
<ion-icon name="close" slot="start"></ion-icon>Clear Lines</ion-button>
<ion-button id="btn-confirm" (click)="addLine()">
<ion-icon name="add-outline" slot="start"></ion-icon>Add Line</ion-button>
</div>
</ion-card>
<ion-card color="dark">
<ion-card-header><Strong>Added Receipt Lines</Strong></ion-card-header>
<ion-grid color="dark">
<ion-row color="dark">
<ion-col color="dark">
<ion-list color="dark" class="ion-no-padding">
<ion-item lines="none" color="dark" *ngFor="let exp of expList">
<ion-label class="ion-text-wrap">{{ exp }}</ion-label>
</ion-item>
</ion-list>
</ion-col>
<ion-col>
<ion-list class="ion-no-padding">
<ion-item lines="none" color="dark" *ngFor="let exp of expListAmount">
<ion-label class="ion-text-wrap ion-text-right">{{ exp }}</ion-label>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
<h3 align="center">Receipt Amount: £{{ totalExpense }}</h3>
</ion-card>
<ion-card>
<ion-card-header color="success"><Strong>3. Receipt Picture</Strong></ion-card-header>
<app-image-picker (imagePick)="onImagePicked($event)"></app-image-picker>
</ion-card>
<ion-card>
<ion-card-header color="success"><Strong>Help Me, Please Help Me!</Strong></ion-card-
header>
<ion-grid>
<ion-row>
<ion-col size-md="6" offset-md="3">
<div>
<p align="center">Enter each receipt under a new expence. Enter each line into the app as it
is displayed
on the receipt and take a picture of the receipt as proof of exepense. The app will
autosave, if you want to delete the expense click on the bin icon in the top right of your
screen.
You can also delete expense claims under the View Expenses Screen.
Press the back button to go back to the main menu once all lines have been entered</p>
<p></p>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
</ion-content>

view-expenses.page.html code :
<ion-header>
<ion-toolbar color="tertiary">
<ion-title>View Expenses</ion-title>
<ion-buttons slot="start">
<ion-back-button defaultHref="home"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="container">
<ion-grid>
<ion-row>
<ion-col>
<ion-label class="ion-align-items-center"> This page does not display anything for the
example application as this was not in the specification</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>

expense-list.html Code:
<ion-item *ngFor="let exp of expList">
<p>{{ exp }}</p>
</ion-item>

AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="io.ionic.starter">
<application
android:requestLegacyExternalStorage="true"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScr
eenSize|screenLayout|uiMode"
android:name="io.ionic.starter.MainActivity"
android:label="@string/title_activity_main"
android:theme="@style/AppTheme.NoActionBarLaunch"
android:launchMode="singleTask">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="@string/custom_url_scheme" />
</intent-filter>
</activity>
<provider
android:name="androidx.core.content.FileProvider"
android:authorities="${applicationId}.fileprovider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/file_paths"></meta-data>
</provider>
</application>
<!-- Permissions -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- Camera, Photos, input file -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- Geolocation API -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-feature android:name="android.hardware.location.gps" />
<!-- Network API -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!-- Navigator.getUserMedia -->
<!-- Video -->
<uses-permission android:name="android.permission.CAMERA" />
<!-- Audio -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
</manifest>
OUTPUT:

RESULT:
Thus the program to perform a Simple Expense Manager using Ionic - Cross Platform
Application was completed and the output was verified successfully.