Báo cáo học phần phát triển ứng dụng trên thiết bị di động personal finance manager applicationfima

Dương Đức Tùng - Expense manage 20 Trang 3 2.3.3.2 Expense add screen 222.3.3.3 Expense detail screen 25 Trang 4 LIST OF SYMBOLS, ABBREVIATIONSAbbreviations MeaningDB DatabaseCMS Conte

TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI

KHOA CÔNG NGHỆ THÔNG TIN

_🙞🕮🙜 _

BÁO CÁO HỌC PHẦN PHÁT TRIỂN ỨNG DỤNG TRÊN THIẾT BỊ DI ĐỘNG

PERSONAL FINANCE MANAGER APPLICATION

TABLE OF CONTENTS

LIST OF SYMBOLS, ABBREVIATIONS

INTRODUCTION

PART 1: PROJECT INTRODUCTION

1.1 Overview of mobile programming

1.2 Title of the project

1.3 Reasons for choosing the project

1.4 Applied knowledge and skills

1.5 Objectives of the project

1.6 Overview of the report

PART 2: RESEARCH RESULTS

2.1 Understanding problem requirements

2.2 Building the problem

2.2.1 User requirements analysis

2.2.2 System design

2.3.1 Lê Thị Ngọc Ánh - Managing Target 112.3.1.1 Display Target list Screen 11

2.3.2 Trần Văn Nam - Statistics tracking 182.3.3 Dương Đức Tùng - Expense manage 20

2.3.3.2 Expense add screen 22

2.3.4 Trần Xuân Vũ - Login, sign up, Forget password, settings 27

LIST OF SYMBOLS, ABBREVIATIONS

With a passion for programming and the dedicated guidance of Ms Vu ThiDuong and the teachers in the Information Technology Department of HanoiUniversity of Industry, our group expresses gratitude to our instructor, who teachesMobile Application Development, for enthusiastically imparting valuableknowledge to us This knowledge not only helped us in completing our majorassignments but also served as a stepping stone for our future learning and careerdevelopment Throughout the process of working on our major assignment, weexerted our utmost effort to fulfill the given tasks Our group hopes to receive morefeedback and suggestions from our instructor and peers

We sincerely thank you!

PART 1: PROJECT INTRODUCTION

1.1 Overview of mobile programming

Smartphones have become an indispensable part of society, and buildingapplications for mobile devices is an open market in the software industry.Currently, there are multiple programming methods such as Native programming,cross-platform frameworks, and recently, no-code and low-code tools Our grouphas chosen the Native programming method with the Android operating system toapply and further develop the knowledge and skills we have learned in the MobileApplication Development course

1.2 Title of the project

Personal finance manager application Fima

1.3 Reasons for choosing the project

As life becomes increasingly busy, it becomes harder to control everything.Therefore, management tools have emerged to help people easily control variousaspects of their lives The idea our group proposed is an expense managementapplication for everyday life Mobile phones have become an integral part of ourlives, and integrating expense management into mobile applications brings manybenefits and conveniences Realizing the importance of mobile applications insupporting management and applying the knowledge learned from the mobileapplication development course, we decided to apply our acquired knowledge andconduct research to build the Fima Expense Management Application

1.4 Applied knowledge and skills

During the course of studying Mobile Application Development, we learnedvarious mobile programming-related knowledge, such as programming anddesigning activities, event handling on mobile screens, user interface design,communication and data storage using SQLite, and more We absorbed and appliedall this knowledge in our major assignment under the guidance of our instructor.Additionally, we supplemented our learning with other relevant knowledge gained

from the university, such as requirements analysis, Java programming, and projectmanagement Besides professional knowledge, we also practiced other skills such ascommunication, teamwork, and time management We effectively applied theseskills during the working process.

1.5 Objectives of the project

Our goal was to understand the fundamental knowledge of mobileprogramming and apply the aforementioned knowledge and skills to analyze anddesign a basic mobile application Through the completion of our major assignment,

we have partially achieved the stated objectives

1.6 Overview of the report

Our group proceeded to build the FIMA Expense Management Application onthe Android platform The report consists of three parts:

Part 1: Introduction and overview of the project

Part 2: Research findings and outcomes

Part 3: Acquired knowledge and lessons learned

PART 2: RESEARCH RESULTS 2.1 Understanding problem requirements

The Fima expense management application is designed to help users track andmanage personal expenses effectively The idea originated from the real need forpersonal financial management in today’s digital age This application solves mainfunctions such as: tracking expenses, budget planning, expense categorization, andproviding expense reports The importance of these functions lies in helping userscontrol personal finances and make smart spending decisions

2.2 Building the problem

2.2.1 User requirements analysis

The users of this application are those who want to manage personalexpenses effectively The functions to be performed include Main relationshipsbetween Use Cases :

Image 1 Use Case in the application

Login: Users need to enter the registered username and password to

access the application If the username and password are correct, the user will betransferred to the main screen of the application Otherwise, the system will report

an error and ask the user to re-enter

Register: New users need to create an account to use the application To

register, users need to enter a username, password, and confirm the password Thesystem will check whether the username already exists and whether the confirmedpassword matches the entered password If all information is valid, a new accountwill be created and the user will be transferred to the login screen

Logout: When users want to end the session, they can choose the logout

function When logging out, all current session information will be deleted and theuser will be transferred back to the login screen

Expense tracking: Users can enter information about their expenses into

the application

Budget planning: Users can set a budget for each spending category Expense categorization: Users can categorize expenses according to

categories such as food, travel, entertainment, etc

Providing expense reports: The application will aggregate and analyze

expense data to provide users with an overview of their financial situation

Non-functional requirements include: the application needs to be easy

to use, compatible with many different devices and operating systems, and ensureuser information security

Image 2 Tables in the database

2.2.2 System design

General information :

The team agreed on designing the interface with gentle colors with blue as themain color, suitable size, and scientifically arranged controls

Image 3 Main screens(1)

The main interface of the application includes a navigation bar at the bottom

of the screen, allowing users to easily switch between main screens such as

“Home”, “Statistics”, “Settings”, etc Each of these main screens contains screens corresponding to specific functions

sub-Image 4 Main screens(2)

Resources or icons used in the project will be taken directly from AndroidStudio

Naming conventions:

The team has also clearly defined naming conventions for activities, XMLlayouts, menus, values, and the layout of packages that store information for theentire article and for each person

Here are some naming conventions for activities in the entire project of theteam:

● Use short, concise words or phrases: The name of the activity should beshort and easy to understand, not too long or complex

● Use capitalized words: The name of the activity should be capitalizedwith all initial letters

● Use meaningful words: The name of the activity should be meaningful,reflecting the function of that activity

● Use descriptive words: The name of the activity should clearly describethe function of that activity

● Main activity: MainActivity

● Login activity: LoginActivity

Data design:

Data is stored in SQLite Data classes are mapped to tables in the database,with each property of the class corresponding to a field in the table

The “User” class with properties “firstname”, “lastname”, “password”,

“email” will be mapped to the “User” table in the database, with each propertycorresponding to a field in the table The data type of these fields will correspond tothe data type of the properties in the class, for example “firstname”, “lastname”,

“password”, “email” will have the data type is “TEXT”

The “Target” class with properties “planName”, “totalBudget”,

“savedBudget”, “deadline”, “priorityLevel”,”targetType” will be mapped to the

“User” table in the database, with each property corresponding to a field in thetable The data type of these fields will correspond to the data type of the properties

in the class

The “UserExpense” class with properties “UserId”, “type”, “description”,

“date”, “amount” will be mapped to the “UserExpense” table in the database, witheach property corresponding to a field in the table.The data type of these fields willcorrespond to the data type of the properties in the class

2.3 Problem implementation

2.3.1 Lê Thị Ngọc Ánh - Managing Target

2.3.1.1 Display Target list Screen

Description: The screen consists of a button "+" that allows users to navigate

to the interface for creating a new goal The screen contains 3 RecyclerViews Thefirst RecyclerView displays the types of goals based on deadlines: when an item isclicked here, the list below will be categorized according to the selected type The

second RecyclerView displays the list of created goals: when an item is clickedhere, it will navigate to the detailed goal interface The third RecyclerView displaysthe list of created goals but sorted by priority.

Task: The goal display screen is responsible for displaying the list of goals andcalling the interface for adding goals through the "+" ImageView

public void onClick(View view) {

Intent intent = new Intent(getContext(),

public void onItemClick(ListTypeTarget item) {

String type = item.getTitle();

TextView txtName = binding.planName;

TextView txtListName = binding.textViewListTarget;

txtName.setText("Target " + type);

txtListName.setText("List " + type + " target");

items =

DBHandler.getInstance(getContext()).fetchTargetByType(type); listTargetAdapter.setTypeTarget(items);

priorityLevelAdapter.saveChangedTarget(items);

}

// a Adapter function onBindViewHolder

@Override

public void onBindViewHolder(@NonNull

TargetAdapter.viewholder holder, int position) {

holder.title.setText(items.get(position).getPlanName()); holder.itemView.setOnClickListener(new

2.3.1.2 Add new Target Screen

Description: It includes input fields for a new goal and 2 button buttons forevent handling

Task: The add goal screen is responsible for adding a new goal and calling thegoal display screen after successfully adding the goal

Completed screen :

Image 6 New target add screen

Source code :

// event when you click on Create-button

// Check for errors when adding a new target to DataBase (belonging to classAddnewTarget)

private void btnCreateEvent() {

btnCreate.setOnClickListener(new View.OnClickListener() { @Override

public void onClick(View view) {

Target target = new Target(0,

editTextName.getText().toString(),

Double.parseDouble(editTextTotalBudget.getText().toString()),Double.parseDouble(editTextSavedBudget.getText().toString()),editTextDate.getText().toString(),

spinner.getSelectedItem().toString(), seekBar.getProgress(),

"link_img");

DBHandler.getInstance(AddNewTargetActivity.this).addTarget(target);

2.3.1.3 Detail Target Screen

Description: It displays the information of a goal and 2 button buttons forevent handling

Task: The goal detail screen displays detailed information of the goal and hasthe functionality to delete the currently displayed goal It calls the goal list screenafter deleting the goal and the edit screen after clicking the "Update" button

Completed screen:

Image 7Target details screen

Source code:

/ / get object data with Intent()

target = ( Target ) getIntent().getParcelableExtra("Target"); // event when you click on Delete-button

private void btnDeleteOnClick() {

btnDelete.setOnClickListener(new View OnClickListener () { @Override

public void onClick( View view) {

2.3.1.4 Update Target Screen

Description: It displays the content to be edited and 2 button buttons for eventhandling

Task: The edit goal screen is responsible for displaying the fields to edit theinformation and is linked to the goal list screen through the "Back" button

Completed screen:

Image 8 Target editing screen

Source code:

// initialize table in Sqlite (belongs to class DBHandler)

String createTableUsersTodoQuery = "CREATE TABLE " +

// Initialization function with arguments of target object

public Target(int id, String planName, double totalBudget, double savedBudget, String deadline, String targetType, int priorityLevel, String imgSrc) {

public void onItemClick(Target item) {

Intent intent = new Intent(getContext(),

TargetDetailActivity.class);

intent.putExtra("Target", item);

startActivity(intent);

}

2.3.2 Trần Văn Nam - Statistics tracking

Description: The xml code will include 4 linearLayout corresponding to 4statistics: "by day", "by week", "by month", "by year" Along with thecorresponding layer of 4 buttons, 1 screen will be displayed and the remaining 3screens will be hidden according to options Each Linear will include 1 TextViewused to display the time period that the user has selected to view statistics, 1 piechart and 1 path chart for the chart part and 1 RecyclerView used to display the list.Task: Display user statistics on the information screen through charts and lists

of items The statistics list will be displayed over time corresponding to the buttons

at the top of the screen

Completed interface:

Image 9 Spending statistics screen

Source code:

Below is the source code to use the MPAndroidChart library to create a

chart First of all, add the dependencies of the MPAndroidChart library Add maven

to the project's gradle

dependencies {

// them dependencies vào gradle của app

implementation ("com.github.PhilJay:MPAndroidChart:v3.1.0")}

Build a method to retrieve data from the database

private ArrayList<PieEntry> dailydata1(String date){

ArrayList<PieEntry> dataVals = new ArrayList<>();

// Declare an ArrayList of type PieEntry

ArrayList<UserExpense> userExpenses = new ArrayList<>();

userExpenses =

dbHandler.getInstance(getContext()).fetchExpensesBetweenDates(date, date);

// Get data from the database to pass into an

ArrayList of type UserExpense

int i = 0;

while (i < userExpenses.size()){

dataVals.add(new

PieEntry((float)userExpenses.get(i).getAmount(),category(userExpenses.get(i).getType())));

i++;

}

//use the add() function to add the newly retrieved

data to the chart's list

return dataVals;

}

Transfer the newly retrieved data to the chart and customize the chartappearance.

//Enter data for daily statistical chart //

dailyPieChart = binding.dailyPieChart; // retrieve the chart

from the interface via Id

PieDataSet piedataset = new

PieDataSet(dailydata1(today),"");

// pass in data from the built method

piedataset.setColors(ColorTemplate.MATERIAL_COLORS); // set the color for the chart

PieData pieData = new PieData(piedataset);

2.3.3 Dương Đức Tùng - Expense manage

2.3.3.1 Expense list screen

Description: The screen consists of a Calendar view at the top of the screen forusers to select a date to view expenses Next is a Recycle view at the bottom,displaying a list of expenses on the selected day Each expense is displayed as acard, including basic information such as type of expense, amount, and note In the

lower right corner of the screen is a Floating Button that allows users to create anew expense.

Task: List expenses, when the user selects a date on the Calendar view, theexpenses will be displayed according to the selected date, when the user clicks onthe expenses, it will switch to the expense detail screen, when the user clicks on theadd button, it will switch to the expense add screen

//Build a string in the format "day-month-year"

based on the input parameters.

currentSelectedDate = i2 + "-" + (i1+1) + "-" +i;

//Use singleton DBHandler

//get a list of expenses by the selected date expenses =

DBHandler.getInstance(getContext()).fetchExpensesByDate(currentSelectedDate);