Khóa luận tốt nghiệp: A mobile-based system for managing the apartment guests for security

There are several reasons for using current technologies like Firebase, Realtime Database, and the Zalo app with Zalo Link profile: 1.. It offers features like real-time data synchroniza

VIETNAM NATIONAL UNIVERSITY HO CHI MINH CITY UNIVERSITY

OF INFORMATION TECHNOLOGY ADVANCED PROGRAM IN INFORMATION SYSTEMS

DUONG MINH THANH

GRADUATION THESIS

A mobile-based system for managing the

THESIS ADVISOR Ph.D NGUYEN THANH BINH

Ho Chi Minh City, 28-April-2022

First and foremost, I want to express my gratitude to all of the instructors from the

Department of Information Systems and the University of Information Technology at

Vietnam National University, Ho Chi Minh City, who have taught me so much over the past four years and given me knowledge, lessons, and experience that I will never forget.

Generations of students on their educational journey believe that the Faculty of Information Systems, in particular, and the University of Information Technology, generally, will continue to succeed in educating and developing talent.

I want to show my gratitude to Ph.D Nguyen Thanh Binh, my instructor, served as my primary supervisor and helped us with this graduation thesis He has always cared about

me and assisted me in resolving issues, and problems with the implementation procedure.

Thanks to you, I was able to finish this graduation thesis effectively.

Last but not least, I'd like to express my gratitude to my colleagues at the University of

Information Technology, who have always offered enthusiastic support and helped me

create this app system.

UNIVERSITY OF INFORMATION TECHNOLOGY

Advanced

ADVANCED PROGRAM Education

IN INFORMATION SYSTEMS Program

THESIS PROPOSAL

THESIS TITLE: A mobile-based system for managing apartment guests for security

Advisor: Ph.D Nguyén Thanh Binh

e Build an android for visitors at old apartments which do not have a management system.

e Basic functionality of the application:

1 Display a form for visitors on the tablet to visitors fill in their information

2 The security guard calls the owner’s apartment phone or Zalo based on visitors!

information

3 Statistic amount of visitors according to month, year, etc.

4 Manage visitor information, owner information, etc.

Scope:

e For managing info on the owner’s apartment, visitors, etc.

e Manage security when visitors want to meet the owner’s apartment.

e Easy to contact the owner’s apartment by security guards.

e Language: Java (information form, dashboard, list, etc.)

e@ Deploy enviroriment: Android Studio

Objective:

e Build the system bases on the tablet for filling in information.

e Security guards based on information call the owner’s apartment.

e Statistic about amount visitors by date and other information, illustrated by charts.

Research timelines:

Study and work

e Review java basic and oop (from 1 to 2 weeks)

e Learn Android (from 1 to 2 weeks)

e Learn Firebase (1 week)

e Start a project and upload it on GitHub (3 weeks)

e Fix bugs (2 weeks)

e Write a report, PowerPoint (4 weeks)

Fix bugs

e https://stackoverflow.com/

Approved by the advisor(s) Ho Chi Minh city, 24/2/2023

Signature(s) of advisor(s) Signature(s) of student(s)

Duong Minh Thanh

THESIS PROPOSAL 4 Chapter 1 Problem Statemen

1.1 Overview 9 1.1.1 Current SEAEUS 5c 2:2 1212119121 19121 1121221121101 H TH HH TH HH TH HH TH HH 9

1.1.2 Difference between new apartments and old apartimens -.:-: ¿-+55+5++s+s++s+>+ss+ 9 1.1.3 Why choose this as a ODIC? St St 2121212121 HH2 2H ườn 10 1.1.4 Why use current technoÏOgi€S” - ¿+ + 219191 1x EEEEEEE212121217 7 hưu 10 1.1.5 Reasons for the need for a sÿSf€m ¿+ E113 E+EEEEEEEEE2221212 tru II

1.2 Scope and Objective - 3S 2212121111 1 1 11 111111212 Hư 12 L.2.1 Target 12 1.2.2 SCOPC ốc ốốốố ốee 12 1.2.3 Objective con 0 0010 v2 HH HT hong HH1 111 Tre 12

1.3 Thesis structure 2⁄2 8 cỜNG, ice.i 12 1.4 Implementation pÏan - 5c cece c5: St St 1212121212181 1 1 11 1111211121211 ưu 12 Chapter 2 Background Knowledge and FTraIneWOr kS - - - cv Site 14

2.1 Firebase

2.1.1 What is Firebase?

2.1.2 Firebase with other SQL language:

2.1.3 Real-time database in Firebase

2.1.4 Why choose Firebase?.

Chapter 3 Analysis and design c.ccccccccccesessseesesescscseseeeesesesesesesescscssscscecssssesesessisiessssesssecensteeeeeeees 19

ki ch 19 EDi9 ca ^^ 19 3.1.2 WOTKÍÏOW 2 21 122 E2 212212121 1 HH1 11 11 H111 1g 20 3.2 Use case đia8TAIM St nền TH HT HT HH TT HT TH TT HT TH HT HH TH HH it 2

3.2.3 Visitor activity

3.2.4 List of actors

3.2.5 List Of USC CASES cọ St t2 HH 211112111111 1101101210121 kg rà 24 3.3 Sequence đỉa8Ta1m + tt S2 2121212121717 11 1 1 1H11 11H Hước 25 3.3.1 Visitor ACLÏVÏẨY c1 HH HH0 111 1 ry 25 3.3.2 Staff aCLÏVỈLY, tt HH HH HH 10 11g ri 27

3.3.3 Admin aCtiVIVy ccc.sntnnnnng nghe 31 3.4 Wireframes and Explanations ccccccccesesesessseessssssssssssssssscsesseeensesisssssssssssisssstseeserseseeeseeseeetes 38 3.4.1 Visitor SCT€EN St nghe OO

3.4.2 Staff SCTe€n cà tt tt ng 0121010101101 1001010121012 ke 40 3.4.3 Admin SCT€en c2 2t 2E 2122121212211 111111111102 4 3.5 Database

Chapter 4 Implemenfafi0nn 5-2 21321 3 22 E221 21212121 1.21 11.1 11g rưey 54 4.1 Gen€ral cà n1 TH 8111111111111 1e 54 4.1.1 General UI

4.1.2 General package

4.1.3 General description of the application sy:

4.2 Detail

4.2.1 es ee hae 58 4.2.2 Home Taina: oss ssssssessssecssscsssecsssecssssesssscsssecsssscsssscsessssesesseseses 58 4.2.3 Pi COdE., cv tt nh HH HH HH HH 1111111111111 re 60 4.2.4 Dashboard 2c 2t t2 221 2121121211212121210212101121012101111010101210111011210112101210111 ke 61 0 hố 63

4.2.7 Manage aCCOunt§(admiH)) - + St 9212123211 3 EEEEEEEEEErrrrrrrrrrrrrrrrrrrrrrr 67 4.2.8 View visitors (admin and StAfẨ) - - - c9 TT TH nh HH HH rà nàn 69 4.2.9 View charts (admin and Sa ) - - c2 19T TT nh TH TH HH HH HH nàn 71 4.2.10 Change to the home screen(staff) cccccceceseseseeeesesessessssssesssescseesseeeeseeesssesesssssseseseeeeeeees 72 4.2.11 View feedback (admin and staff) 0 ccccececesceseseesesesecesesescescsesceecseseeeescseeecaseceeeateeeeeateeeeees 72

4.2.12 Log out

Chapter 5 Conclusion and future

5.3 Future vision

References

Chapter 1 Problem Statement

1.1 Overview

Information technology is currently advancing daily It is fairly common to use information technology in management the use of information technology for simple or sophisticated job- related tasks Technology is still advancing every day, simplifying processes ever-more, and

identifying quick fixes for all issues It could be used in information technology to manage data about people and locations, business management software, or artificial intelligence technology to

assist in the provision of business solutions, etc.

Although many apartment buildings have been constructed and invested in to provide housing for

workers, there are still some restrictions due to management and protection Writing and storing

books is vital for management when someone comes to visit When we need information, we must

search for a very little and time-consuming book for it.

1.1.1 Current status

In old apartment buildings, when guests visit, they are required to register their information on paper The staff then has to contact the apartment owner to come downstairs and pick up the guests, which is inconvenient for both the guests and the apartment owner in terms of shuttle service.

In contrast, new apartments are equipped with an internal voice system or an internal video call feature when guests visit The staff can make a video call through the system to confirm the guest's arrival, which is not available in old apartments This advancement in technology allows for more efficient and convenient communication between the staff and the guests, eliminating the need for the staff to contact the apartment owner for assistance in the shuttle service.

1.1.2 Difference between new apartments and old apartments

High-rise apartments and low-rise apartments are two common types of residential units in modern urban areas The main differences lie in their location, amenities, and quality of living High-rise apartments are typically situated in central city locations, with large-scale developments and numerous amenities such as swimming pools, gyms, parks, 24/7 security, and resident services.

On the other hand, low-rise apartments are often found in suburban areas, with smaller-scale developments and fewer amenities.

Furthermore, there are significant differences between new and old apartments as well New apartments are usually built with modern technology and designs, incorporating the latest amenities and advanced security systems In contrast, old apartments may offer a sense of

longevity and historical value in their living spaces, but they may lack some of the latest

conveniences and technologies.

Communication systems play a crucial role in both high-rise and low-rise apartments They ensure that residents can communicate with each other, with the building management, and with various

services The communication system assists building management in disseminating news and updates, reporting technical issues, scheduling the use of shared facilities, and addressing day-to- day concerns It also plays a vital role in providing security information and emergency evacuation

instructions when necessary.

In summary, high-rise and low-rise apartments, as well as new and old apartments, each have their own unique characteristics However, an effective communication system is an essential element for enhancing communication and efficient management within apartment complexes.

1.1.3 Why choose this as a topic?

To make managing apartment guests and maintaining security more convenient, I decided to

research a system based on mobile devices “A mobile-based system for managing the apartment guests for security” The objective of this thesis is to develop a user-friendly mobile

application on a cost-effective and easily deployable platform, and seamlessly integrate it into the existing old apartment system.

1.1.4 Why use current technologies?

There are several reasons for using current technologies like Firebase, Realtime Database, and the Zalo app with Zalo Link profile:

1 Firebase: Firebase provides a comprehensive suite of tools and services for building mobile applications It offers features like real-time data synchronization, user authentication, cloud storage, and push notifications By using Firebase, you can leverage its robust backend infrastructure, scalability, and seamless integration with other Firebase services.

2 Realtime Database: The Realtime Database, offered by Firebase, is a cloud-hosted NoSQL, database that allows real-time data synchronization between clients and servers It enables instant updates and ensures that all connected clients have the latest data By using the Realtime Database,

you can create responsive and collaborative applications that provide real-time updates to users.

3 Zalo App with Zalo Link Profile: Zalo is a popular messaging and social networking app in Vietnam It offers various features, including text messaging, voice and video calls, and media sharing Additionally, Zalo provides a unique feature called Zalo Link profile, which allows users

to create customizable profiles with links to external websites or resources By integrating the Zalo

app with Zalo Link profile, you can enhance user engagement, provide seamless communication,

and leverage the extensive user base of the Zalo platform.

By utilizing these technologies, you can leverage the powerful backend capabilities of Firebase, enable real-time data synchronization with the Realtime Database, and enhance user engagement through the Zalo app with Zalo Link profile.

1.1.5 Reasons for the need for a system

There are eight reasons for the need for the system:

1 Guest Management and Security: The current manual process of managing apartment guests in

old apartment buildings is inconvenient and may not provide adequate security measures A

mobile-based system can improve guest registration, tracking, and verification processes, leading

to enhanced security within the building premises

2 Efficiency and Convenience: Utilizing current technologies like Firebase, Realtime Database,and the Zalo app with Zalo Link profile offers advanced features and functionalities that canstreamline various tasks Automation and real-time data synchronization provided by thesetechnologies can significantly improve the efficiency and convenience of managing apartment

guests and communicating with residents.

3 User-Friendly Mobile Application: Creating a user-friendly mobile application simplifies theguest management process for both residents and building management The ease of use andaccessibility of a mobile app contribute to a seamless experience for all parties involved

4 Cost-Effectiveness and Deployment: Building the system on a cost-effective platform likeFirebase ensures efficient use of resources Moreover, Firebase's cloud-based infrastructure allowsfor easy deployment and scalability, making it a practical choice for implementation

5 Enhancing Communication and Engagement: Integrating the Zalo app with Zalo Link profilefacilitates seamless communication between residents and building management This integrationcan enhance user engagement, as the Zalo app is a widely used platform in Vietnam

6 Real-Time Updates: The Realtime Database feature of Firebase ensures that all connectedclients have the latest guest information and updates, providing real-time data synchronization foreffective guest management

7 Improved Security Measures: By leveraging current technologies, the system can enhancesecurity through features such as authentication, data encryption, and real-time monitoring,ensuring the safety and privacy of residents and their guests

8 Integration with Existing Infrastructure: Seamless integration with the existing old apartment

system allows for easy adoption of the new mobile-based system without significant disruptions

or additional infrastructure investments

In conclusion, the need for the system arises from the desire to improve guest management,enhance security, increase efficiency, and leverage the benefits of current technologies The systemaims to provide a user-friendly mobile application, improve communication, offer real-timeupdates, and enhance security measures within old apartment buildings

1.2 Scope and Objective

1.2.1 Target

e Build an android for visitors at old apartments which do not have a management

system.

e Basic functionality of the application:

1 Display a form for visitors on the tablet to visitors fill in their information

2 Based on visitors’ information, staff call the owner’s apartment phone or Zalo

3 View visitor’s information, manage owner information, etc

1.2.2 Scope

With this graduate thesis, the main goal that I aim for when doing this is as follows:

For managing info on the owner’s apartment

Manage security when visitors want to meet the owner’s apartment.

Easy to contact the owner’s apartment staff

Language: Java (information form)

e Deploy envirortment: Android Studio.

1.2.3 Objective

e Build the system bases on the tablet for filling in information

e Staff based on information to call the owner’s apartment

e Helping manage information about apartments, accounts, etc.

1.4 Implementation plan

Time Work Assignment

27/02/2023-06/03/2023 Draw wireframe Thanh

Draw use case, sequence Write wireframe explanation 06/03/2023-20/03/2023 Learn android Thanh

Design UI 20/03/2023-27/03/2023 Connect the app with Firebase Thanh

Create some data on Firebase

27/03/2023-03/04/2023 Start coding the login screen Thanh

and home screen

03/04/2023-10/04/2023 Start coding dashboard screens Thanh

10/04/2023-24/04/2023 Start coding all list screens, add,

edit, delete, search, and refresh for some list screens

Thanh

24/04/2023-01/05/2023 Design UI again the second time

Start coding functionalities on the home screen

Add pin view to enter pin code Add load more when scrolling

at the end of the list Add loading when scrolling at the end of the list

Thanh

15/05/2023-22/05/2023 Design UI again third times

Fix bugs found by pick date does not display

Write report(continue) Learning to use MPChart on Android

Thanh

22/05/2023-29/05/2023 Add charts in the app

Complete fix bug Write report(continue)

Thanh

29/05/2023-06/06/2023 Complete app

Complete report

Thanh

Chapter 2 Background Knowledge and Frameworks

2.1 Firebase

2.1.1 What is Firebase?

Firebase is a comprehensive platform developed by Google that offers a range of cloud-based services and tools for building and managing web and mobile applications It provides a backend infrastructure that allows developers to focus on building the client side of their applications while handling server-side tasks and infrastructure management.

Firebase offers a wide array of features and services that can be used individually or in combination

to suit various application development needs Some key components of Firebase include:

1 Real-time Database: Firebase provides a cloud-hosted NoSQL database that allows developers

to store and synchronize data in real time between clients and servers It uses a JSON data structure

and provides automatic data synchronization, offline capabilities, and real-time event listeners.

2 Authentication: Firebase includes an authentication system that simplifies user management and authentication processes It supports various authentication providers like email/password, social

logins (Google, Facebook, etc.), and even custom authentication methods.

3 Cloud Firestore: Firestore is a flexible and scalable NoSQL document database provided by Firebase It allows for efficient querying and real-time synchronization of data, and it supports

automatic scaling to handle large datasets and high traffic.

4 Cloud Storage: Firebase offers cloud storage for storing and serving user-generated content like

images, videos, and files It provides an easy-to-use API for uploading, downloading, and managing files securely.

5 Cloud Functions: Firebase Cloud Functions enables developers to run server-side code in response to events and triggers It allows for writing custom backend logic without the need to manage server infrastructure.

6 Hosting: Firebase Hosting provides a fast and secure hosting solution for web applications, allowing developers to deploy their web apps easily with a custom domain or a Firebase subdomain.

7 Cloud Messaging: Firebase Cloud Messaging (FCM) allows for sending push notifications to mobile devices and web browsers, helping to engage and retain users by delivering timely updates and messages.

8 Analytics: Firebase Analytics provides insights into user behavior and app usage, allowing

developers to track key metrics, and user engagement, and measure the effectiveness of marketing campaigns.

These are just a few examples of the services offered by Firebase It also includes features like remote configuration, test lab, performance monitoring, and more Firebase is designed to simplify

the development process and provide a scalable and reliable infrastructure for building modern applications.

2.1.2 Firebase with other SQL languages

Firebase primarily provides NoSQL databases, such as Cloud Firestore and the Realtime Database,

which have query languages specific to Firebase These query languages are different from

traditional SQL languages used in relational databases.

However, Firebase can still be used in conjunction with other SQL databases or languages Here are a few ways you can incorporate Firebase with SQL:

1 Cloud Functions: Firebase offers Cloud Functions, which allow you to run server-side code in

response to events You can use Cloud Functions to connect with external SQL databases or

services For example, you can create a Cloud Function that interacts with an SQL database to perform complex data processing or run SQL queries.

2 Cloud SQL: Google Cloud Platform provides Cloud SQL, a fully managed relational database service You can integrate Cloud SQL with your Firebase project to have a traditional SQL

database alongside your Firebase services This allows you to utilize the power of SQL for certain use cases while still leveraging Firebase for other functionalities.

3 Custom API: If you have an existing SQL database or prefer to work with SQL directly, you can build a custom API layer that interacts with your SQL database This API can be hosted separately or integrated within your Firebase project You can then use Firebase to handle other aspects of your application, such as authentication, storage, and hosting.

By combining Firebase with SQL databases or languages, you can leverage the benefits of both NoSQL and SQL databases, depending on the specific requirements of your application This allows you to have flexibility and make use of the best tools for different parts of your project.

2.1.3 Real-time database in Firebase

Firebase Real-time Database is a cloud-hosted NoSQL database provided by Google as part of the Firebase platform It offers a flexible and scalable solution for building real-time applications,

allowing developers to store and sync data in real-time across multiple clients.

Key Features of Firebase Real-time Database:

1 Real-Time Updates: Any changes made to the database are instantly propagated to connected clients, providing real-time synchronization of data.

2 Offline Support: The Real-time Database enables offline capabilities, allowing clients to access and modify data even when they are offline Once the connection is restored, the database

automatically syncs the changes.

3 Data Structure: The database uses a JSON-like data structure, consisting of key-value pairs It allows for nested data structures and supports storing complex data types.

5 Scalability and Performance: The Real-time Database automatically scales to handle large

volumes of concurrent connections and can handle real-time updates with low latency

6 Integration with Firebase SDKs: The Real-time Database seamlessly integrates with otherFirebase services, such as Authentication, Cloud Functions, and Cloud Messaging, enablingdevelopers to build powerful and integrated applications

7 Real-Time Queries: Developers can perform real-time queries to retrieve specific data from thedatabase, apply filters, and sort the results

Overall, Firebase Real-time Database provides a powerful and scalable solution for building time applications that require synchronized data across multiple devices and platforms Itsimplifies the backend infrastructure and allows developers to focus on building engaging user

real-experiences.

2.1.4 Why choose Firebase?

There are several reasons why developers choose Firebase as their backend platform:

1 Real-time updates: Firebase provides real-time data synchronization, allowing developers tobuild applications with real-time features like chat, collaborative editing, or live dashboards.Changes made to data in Firebase are immediately propagated to all connected clients

2 Serverless architecture: Firebase offers a serverless architecture, meaning developers don't have

to worry about managing servers or infrastructure Firebase takes care of scaling, load balancing,and handling server-side operations, allowing developers to focus more on building the applicationitself

3 Easy integration: Firebase provides a comprehensive suite of services, including authentication,storage, hosting, messaging, and more These services are designed to work well together and can

be easily integrated into your application with minimal effort

4 NoSQL databases: Firebase offers two NoSQL databases: Cloud Firestore and the RealtimeDatabase These databases provide flexible data models, scalability, and real-time synchronization,which are well-suited for mobile and web applications

5 Authentication and security: Firebase provides built-in authentication services, allowing you toeasily authenticate users using various methods such as email/password, social media logins, oreven custom authentication systems Firebase also handles security aspects, including user

authorization and secure data storage.

6 Extensive SDKs and libraries: Firebase provides SDKs for various platforms and programminglanguages, making it easy to integrate Firebase services into your application regardless of thetechnology stack you're using Additionally, Firebase offers libraries and tools that simplifycommon tasks and accelerate development

7 Analytics and monitoring: Firebase includes powerful analytics and monitoring features,

allowing you to gain insights into user behavior, track app performance, and monitor errors This data can help you make informed decisions and improve your application over time.

Overall, Firebase offers a powerful and easy-to-use platform for building modern applications It

simplifies the development process, provides essential backend services, and enables real-time features, making it a popular choice among developers.

2.2 Java

2.2.1 What is Java?

A programming language utilized in Android app development is called Java It is class-based,

object-oriented programming with C++-like syntax Java's main objectives are to be straightforward, object-oriented, reliable, secure, and high-level.

Some of Java's key advantages include being simple to learn and comprehend Through the use of virtual machines, it is intended to be secure and platform-independent It is focused on objects.

2.2.2 Java in Android

These Java foundational concepts are crucial to Android In addition to several conventional Java libraries (including data structure libraries, math libraries, graphics libraries, networking libraries, and everything else you could need), the Android Studio SDK also provides unique Android libraries that will aid you in creating outstanding Android applications.

2.2.3 Java with other languages in Android

1 Kotlin: Kotlin is a modern programming language that has gained significant popularity in

Android development since its official support by Google in 2017 Kotlin enhances programming productivity by providing concise syntax and improved safety compared to Java.

2 C++: C++ is a powerful and versatile programming language that can be used in Android development through the Android Native Development Kit (NDK) It is often preferred for performance-critical tasks, such as graphics rendering or resource-intensive applications.

3 C#: C# is a programming language developed by Microsoft and widely used for developing Windows applications It is also possible to use C# in Android development through frameworks

like Xamarin, which allows developers to write cross-platform apps using a shared codebase.

4 Swift: Swift is the primary programming language for iOS development, but it can also be used

in Android development through frameworks like Kotlin Multiplatform Mobile (KMM) KMM

enables developers to share code between iOS and Android platforms, making it easier to maintain and develop cross-platform applications.

Each programming language mentioned above has its strengths and considerations in Android development The choice of language depends on factors such as developer familiarity, project requirements, performance needs, and the ability to reuse code across different platforms.

Chapter 3 Analysis and design

3.1 General

In general, with the languages and technologies listed above, this thesis aims to manage visitationstatus in old apartments instead of traditional management, both to increase security and at thesame time Increase the modernity based on this developed system, helping staff, andadministrators manage, view information, contact apartment owners, and help visitors fill in their

information, give feedback, and rate price for service quality.

3.1.1 Overview

“A mobile-based system for managing the apartment guests for security” is the app used by theuser (staff, administrator, visitor) It is connected to Firebase real-time database, got data from it,and when change data is in the app will also change data in Firebase

Figure 1 Overview of system architecture

Description: The app will get the data from Firebase and display it on the screen Firebase usesthe service as a real-time database developed by Google Firebase real-time database is a cloud-hosted NoSQL database that provides real-time synchronization and offline capabilities for weband mobile applications It uses a JSON data structure and offers SDKs for various app platforms

The Zalo app uses a Zalo link profile, which is the link to the information of the Zalo account of

the user Finally, is the call app, every mobile device or tablet device has it to use to call through

a phone number.

3.1.2 Workflow

First, the user, whether it is an admin or staff member, will log in to the app Once logged in, if it

is a staff member, the app will display the home screen On the home screen, visitors can fill outthe registration form if they wish to visit the apartment's owner, provide feedback on the servicethey received, and rate their experience Additionally, there will be an icon for the pin code, whichserves to separate the screen between the dashboard screen for visitors and the staff

Return home Select

Figure 2 Workflow visitor

First, the visitor selects register visit by clicking on the form image This action triggers the app toswitch to the registration form screen The visitor proceeds to fill in their information in theregistration form and clicks on the register button The app validates the data filled in by the visitor

If any required fields are empty, the app displays an error notification, prompting the visitor to fillthem in again However, if the provided data is correct and complete, the app displays a successfulnotification and returns to the home screen

Next, the visitor selects feedback by clicking on the feedback image This action takes the visitor

to the feedback form screen The visitor fills in their feedback information and clicks on the sendbutton The app verifies the data filled in by the visitor If any required fields are left empty, theapp shows an error notification, requesting the visitor to fill them in again On the other hand, ifthe provided data is valid, the app displays a successful notification and returns to the home screen

Lastly, the visitor chooses a rating by clicking on the rating image This action leads the app to

switch to the rating screen The visitor rates their experience by sliding the rating stars to the left

or right and then clicking on the submit button The app presents a successful notification andreturns to the home screen

These sequential actions allow visitors to easily register their visit, provide feedback, and submitratings, with the app ensuring data accuracy and providing notifications accordingly before

returning to the home screen.

re-a successful notificre-ation re-and trre-ansition to the home screen.

Upon reaching the home screen, staff members can click on the lock icon at the screen’s top-right

corner This action will lead to a pin code screen being displayed The staff member is then prompted to enter a four-digit code and click on the enter button In the event of an incorrect code, the staff member will need to re-enter it However, if the entered code is correct, the app will transition to the dashboard screen.

These steps ensure secure access to the app for staff members, with login authentication and the use of a pin code to protect sensitive information.

Description: To utilize this app, the admin is required to log in by entering their username and password After entering the credentials, the admin clicks on the login button The app proceeds

to verify the data provided by the admin If the entered data is incorrect, the app displays an error

notification, prompting the admin to re-enter their username and password However, if the entered data is correct, the app transitions to the dashboard screen, granting the admin access to the app's administrative functionalities.

3.2 Use case diagram

3.2.2 Admin activity

Authentication >.

Figure 3 Use case diagram of visitor activity

Index Actors Meaning

1 Admin People manage the system

2 Staff People manage the system but limited

3 Visitor People use the system’s service

3.2.5 List of use cases

Role Use case Meaning

Register Fill register visit form

Visitor’s | Feedback Feedback for the process of using the

role application

Rating Rating for the process of using the application

Login Log in to the system, enter the pin code

Staff’s Manage Apartment | Search/Refresh/Call or Zalo

role Manage Feedback | Search/Refresh

Statistical View Chart

View Visitor Search/Refresh Login Log in to the system Manage Apartment Add/Edit/Delete/Search/Refresh

Admin’s | View Visitor Search/Refresh

role Manage Feedback | Search/Refresh

Manage Account Add/Edit/Delete Statistical View Chart

6: Dispiay error notification

7 : Fill in form again and click register

i 1: Display home screen

E 6 : Display error notification L

[Fail] 7: Fill feedback again and click send k ] 8: Check

[Success] 9: Send data to database 10 : Update and save

h 12 : Display successful notification al

: Hl 13 : Display home screen :

Figure 2 Sequence diagram feedback

Visitor App System Database

: h 1: Display home screen

2: Display successful notification : | 3: Display home screen :

4 ; Enter pin code ' :

¬ ¬

: 5; Display successful notification | '

6 : Display dashboard screen '

7 ; Select visitor 8: Get data from database Ũ

Kếnrrrrrrrrree ¬— TT” Retain result ;

h 10: Display list visitor ' h

11 : Search visitor 12 : Query data ;

TT n os TF | 13:Returnresuit L

Figure 1 Sequence diagram view list visitor

K LO

Figure 2 Sequence diagram view list apartment : Staff App System Database

1: Login

: 2: Display successful notification : | 3: Display home screen '

' 4: Enter pin code ; ị

¬ ¬

' 5: Display successful notification 1 ,

: 6 : Display dashboard screen :

7: Select apartment ; 8 : Get data from database

- fi CC” §ïReumresut 7” L

' 10 : Display list apartment ' '

ị 11 : Search apartment ' 12 : Query data ;

| »X VW ae :

SH : Display successful notification : mg '

a “ae ị

+ 15; Display list apartment found : '

; 16 : Refresh list apartment

Bown anna en neon eens crze=s=sz=c======z 1 :

h 17 : Display list apartment : h

K KO) O)

: Staff App System Database

1: Login

: 2: Display successful notification : | 3: Display home screen

' 4: Enter pin code ; ị

¬ ¬

' 5: Display successful notification 1 ,

: 6 : Display dashboard screen :

7 : Select feedback ; 8: Get data from database

- 10 : Display list feedback : 9 ; Return result '

ị 11 : Search feedback ' 12 : Query data ;

%X‡ -= -sN:. —-+ a oe Dahir eno 3

: 14 ; Display successful notification : 13 : Return result :

a ị

+ 15: Display listfeedbackfound =: :

; 16 : Refresh list feedback

S77: Display list feedback 1

Figure 3 Sequence diagram view list feedback

K tO ©

: Staff App system Database

: 1: Select chart : h

h >

opt : 4 : Get data from database :

[Bar] a 5: Adjust data and chart setting :

i ~ -»—s«‘“‘«‘«‘ Get data fromdiatabase - '

[Pie] >

9: Adjust data and chart setting :

E 10 : Display pie chart : :

[Line] h > 12 : Get data from database '

: 11 : Select line chart : >

' ï 13 : Adjust data and chart setting h

Rog 14:Displayline chat 3 :

Figure 4 Sequence diagram view chart

: 2 : Display successful notification h 3 : Display dashboard screen '

4 : Select visitor 5 : Get data from database

< —_—— ee | na es ea + TT TT TT TT TT TT TT HC 3

' 7 : Display list visitor ' 6: Return result :

h 8 : Search visitor 9: Query data :

h > a al

ogg pce asec aaa —— = 10 Ñelum resuit ”””””””” ;

: 11: Display successful notification ' : ° :

K£ ->-~=- _ _ - ¿Ứ£% :

' 12 : Display list visitor found h '

: 13 : Refresh list visitor

14 : Display list visitor

Figure 1 Sequence diagram view list visitor

: 2 : Display successful notification a 3 : Display dashboard screen '

: 4: Select feedback : 5 : Get data from database :

: P— ¬ ne nnn 4

F 7 ; Display list feeciback : 6 : Return result :

h 8 : Search feedback h 9: Query data '

h Qo -2 - + + + + + + + + 3

4S — ae alee erate 2 10 : Return result '

' 11 : Display successful notification ' '

Admin App system

h 1: Login '

ke een“, AT na ymnvnnGoeGGOGCmG7, —_— t h h

' 3: Display successful notification ' | 2: Display dashboard screen

' 4 : select apartment H 5 : Get data from database

: 4G = 22 2222 oo one

Ấ 7 : Display list aapartment L 6: Return result

h 8 : Select apartment to search : 9; Query data

Me eee < ns cos Ty nh ng em nen me

Ẩ 11 : Display successful notification H 10 : Return result

E mm 12: Display list apartment found ” {

: 13 : Refresh list apartment h

So 14: Display list apartment = f

Figure 3 Sequence diagram view list apartment

K tO ©

: Admin App system Database

1 : Click menu button

2: Display add button

3 : Click add button 4: Display form

5 : Fill form and click save 6: Check

alt

[Fail] h : 9; Check

: 8 : Fill form again and click save <—_

[Success] : 10 : Send data to database 11 : Update and save

data

13 : Display successful notification 12 : Return tesiilt

Figure 4 Sequence diagram add new apartment

: Admin App system Database

1: Click edit button ‘ :

H 6: Fill form again and click save

[Successful] : 9: Update and save

' data

Figure 5 Sequence diagram edit apartment information

KO) O

App system Database

1: Click delete button h :

>

opt 3: Click no button >: :

[NO] &z -~ ~-~-~~~~~=~==>~>=~e 3 :

4: Display error notification : :

[res] 5 : Click yes button ' :

"

F 8: Update and save

‘ data

9 : Return result

10 : Display successful notification

Figure 6 Sequence diagram delete apartment

Ẩ 7+ Display list account 6: Return result

h 8 : Select account to search h 9: Query data '

ra HH HT TƯ ;

"aT: Display successful notification ””””? 10: Return result

ca 2x2 szotzzse=szznnssereeseeeee i

12 : Display list account found h h

14 : Display list account

ceeer=rer=rerxederer

Figure 7 Sequence diagram view list account

h 13 : Display successful notification : :

Figure 8 Sequence diagram add a new account

: Admin App system Database

: 1: Click edit button : '

6 : Fill form again and click save HÀ 7: Check :

[Successful] : 8: Send data to database

Rog Retirn result T7 TT :

11 : Display successful notification : h

Figure 9 Sequence diagram edit account

j¬ ,,Ô TT TT Rehm result 7) :

‘ 10 : Display successful notification H :

Figure 10 Sequence diagram delete account

: Admin App System Database

1 : Select chart :

opt : 4 : Get data from database :

: 3 : Select bar chart : >;

[Bar] : H 5 : Adjust data and chartsetting :

SoS Display bar chart 7774 :

[Pie] h > 8 : Get data from database :

: 7 ; Select pie chart h :

: ‘ l 9: Adjust data and chart setting :

s 10 : Display pie chart : :

L h —— = + t—— ——

: ~ 12 : Get data from database :

: 11 : Select line chart : Lat

: 13 : Adjust data and chart setting h

Ế 14 : Display line chart L :

Figure 11 Sequence diagram view chart

3.4 Wireframes and Explanations

Wireframe is the first idea to design the user interface of the app system, it can be different fromthe official user interface in Chapter 4 implementation

3.4.1 Visitor screen

wisit

Fi

Figure 1 Home screen

Explanation: This is the home screen displayed on the tablet has three buttons There are threemain functionalities register visit form, rating, and feedback If visitors want to visit an apartmentowner, they choose to register visit to fill out Then they can rate the system to display how theyare satisfied or not Finally, if they have any ideas to improve the app, they can feedback on the

Visiting Register Form

ma Name

Al Select room id ©)

Register

Figure 2 Visiting register form screen

Explanation: The visitor needs to fill in this form to register for visiting the owner department:

Name is the full name of the visitor

ID card is the identity card of a visitor.

Visit time is the time when the visitor chooses to meet the owner department

e Room id is the id of the apartment

When the visitor clicks the button register, it will go back to the home screen if the form is filledwith full information If the form is empty or not filled fully it will display an error notification tothe visitor

Please rate the service level

© @@)©@

Figure 3 Rating screen

Explanation: There are four levels: angry, boring, sad, and happy, the visitor rates it by choosingthe face, which reveals what they think about the service After choosing one of four faces, it will

go to the first screen

Feedback