Khóa luận tốt nghiệp: Design and implementation of the property management system for university

managers and staff.Band management Allow administrator or manager to manage brand by creating, updating, deleting, andviewing brand information.. Asset management Allow administrator or

NATIONAL UNIVERSITY HO CHI MINH CITY UNIVERSITY OF INFORMATION TECHNOLOGY

ADVANCED PROGRAM IN INFORMATION SYSTEMS

PHAN HOANG NAM - 18521130

NGUYEN HUU TOAN - 18521507

DESIGN AND IMPLEMENTATION OF THE

PROPERTY MANAGEMENT SYSTEM FOR

UNIVERSITY

BACHELOR OF ENGINEERING IN INFORMATION SYSTEMS

THESIS ADVISOR PhD NGUYEN THANH BINH

HO CHI MINH CITY, 2023

ACKNOWLEDGMENTS First of all, I would like to express my sincerest thanks to Dr Nguyen Thanh

Binh, who has enthusiastically guided and supported me throughout the process

of studying and researching to complete the thesis Besides teaching and

commenting on academic knowledge, presentation skills, programs, research, Teports, The teacher also cares about students’ health and psychological status

and always listens, shares, inspires, and motivates me to complete this thesis.

The knowledge and skills that he has imparted will definitely be a piece of valuable baggage for my future growth.

Additionally, I would like to thank the Department of Information Systems and

all the teachers who have provided valuable knowledge during the past four years At the same time, I would also like to thank our defense committee, who

commented on and provided expertise on our thesis.

Lastly, I would like to thank Dr Nguyen Thanh Binh and my family, who have supported and encouraged me to complete this thesis.

Phan Hoang Nam Nguyen Huu Toan

1.2.1 Current Status Q0 Q1 HH HH 15

1.2.2 Survey 1 UTIIV€TSÏẨY - Q1 HH TH Hệ 18

1.3 QĐJGC[IV€S Q0 HS T HH HT TH no KH HH HH 201.4 Object and scope Of SfUY1T - càng HH Hiệp 20Chapter 2 BACKGROUND KNOWLEDGE - 5 1 viện 21

"An 9) 0 ẦẮ 21

Q.L.L Introduction nh - 212.1.2 The QR Code Structure - (2c <c 552332222111 11115551 111118551 xe 222.1.3 QR Code deCOdIng, «t3 TH HH HH ng nh như 24

2.2 Technologies and Platforms - 5 + E1 E993 E991 911 931199 ng cư 24

2.2.1 EÏUTẨCT SG 0119111 TH HH HH Hit 24

2.2.1.1 [Introduction na 242.2.1.2 ATCHIIf€CfUTC Q0 HH HH Hết 25p2 ¿tà 0 26

2.2.1.4 DISadVaTn{ÀG - Ác HH TH HH HH HH HH Hệ 272.2.2 R€aCJS LH HH HH HH TH HH HH HH Hiện 27

2.2.2.1 InTOđUCfIONN 2G 5 119101 930991901 nh TT nh ngư 272.2.2.2 AAVANtage nh 28

2.2.2.3 DisadVan(Aỹe ĩc LH HH HH HH HH HH 28

2.2.3 NET COTG - Ghi 29

2.2.3.1 Introduction 1n - 292.2.3.2 0À in 292.2.3.3 DIsadVanfaØ€ - cà HH HH HH HH 29

2.2.4 BOOUStrap ceeeesccesnecencccesceceseceeneesseeesnecesaecscecseeesaeceseesseeseaesesaeeeaeeesaes 30

2.2.4.1 IntTOđUCfION - G5 2199199199 90h TT Hư 302.2.4.2 AVATI{AĐ LG HH TH TH net 30

2.2.4.3 DIsadVanaỹ@ - eee LH HH HT HH HH kg 30

2.2.5.1 IntTOUCfION - G2 G1 E99 HH ng ng ệt 312.2.5.2 AAVAMtage 31

"J9, 32

Chapter 3 ANALYSIS AND DESIGN - - Ăn HH HH Hiệp 33

3.1 General arChIf€CfUTC - 5 HH HH TH HH Hệ 33E2 ao 34

3.4 Web dashboarc - -.- s11 HH HH nh 39

3.4.2 List Of USC-CASES S9 9333311 11 11K 55551 E 393.4.3 Use-case specification and diagrams s55 + s + s++sexsseeeeeers 41

3.4.3.1 SiQt i eee eeeeseeeecsecesecssecseessecssecssecsecesecssecseesseessessaesseseseesaeeaes 413.4.3.2 Change DaSSWOTC - ch HH HH kh 45

3.4.3.3 Property ManageImefn[ - - - «+ + xxx v.v ve 47

3.4.3.4 Generate label QR Code - c5 +5 22111333222 kkesssexee 533.4.3.5 Class diagram Property - - Ăn HH nền 563.4.3.6 Check DTORDTẨY LH HH TH HH 563.4.3.7 Class diagram Checking - «+ + kx+skEssskeseereerereere 633.4.3.8 View History oo eee Q19 HH HT HH TH 633.4.3.9 Component ManaØ©Im€T - + + + + + kE+seeEsseeeeeeeseeere 653.4.3.10 Class diagram COMPOMENE - + + *++E+veeEseeeeeereeeers 723.4.3.11 User management ( For Administrator and Manager) 733.4.3.12 Class diagram USGT - G11 11 1 HH ng rvre 773.4.3.13 Delete item ( For Administrator and Manager) 783.4.3.14 Search 1f€TM - 5 G1 TH TH TH ni HH ng Hết 803.4.3.15 Update setting (For Admin1SfTafOT) - « «+ +sss++scsssesssers 823.4.3.1 Generate T€DOT - Gv 9 91 TH HH HH HH gi 84

3.4.3.17 Brand management - - «+ + + xxx ng ng iệt 86

3.4.3.18 Class diagram brand - 6 + 3 k1 11v ng ng niệt 933.4.3.19 Supplier manag€Im€II( - - 5 + + xxx ngư 933.4.3.20 Class diagram SUDPÏI€T c S1 SE ke errre 993.4.3.21 Maintenance manà©Im€II - + «+ xxx Esv+seEsseseersees 993.4.3.22 Class diagram maIntenanC€ - -. - s «+ +ss + v+svekeseseserseee 105

3.4.3.23 Depreciation manaứ€Im€in( - ô- ô+ +++Ê+s+s+srserskrskrrke 1063.4.3.24 Class diagram d€pT€CIafIOTI 5 Sc St eierrrersee 1133.4.3.25 Location manaỉ€IT€TIL - - 5 + + s3 E9 ve evkp 1143.4.3.26 Class diagram ẽOCAfIONI 5 11v ng kg giết 119

3.4.3.27 Asset type manag€I€IIL ce 5 1 vn rưy 120

3.4.3.28 Class diagram asset fYDâ Án HH HH HH hiệp 1263.4.4 Mapping to Relational Model diagram from Entity class diagram 127E001 200 128

3.5.1 List Of ACÍOTS Gà 1283.5.2 List Of US€-CASâS Q Q11 HH TH HH HH HH TH HH cờ 1283.5.3 Use-case specification and diagrams cecceescceeseeeteeeeeeeeteeseneeeeneees 129

3.5.3.1 Login_ 4@6 đđố <@ / 1293.5.3.2 LOG QU grey 9m 7= ố nh ae 1323.5.3.3 Create maInf€TATCC - 0 cv ng nh ng nà 1333.5.3.4 Scan â) COde€ LG 01111211111 11111821111 8111 1100111118211 182k kg 136

3.5.3.5 Select image from gallery - ô+5 + *vkesikeesersrree 138

3.5.3.7 View profile oo Ố - 145

Chapter 4 IMPLEMENTATION AND DEPLOYMENT cceeceseseeseeneeeeeees 147

4.1 Deployment đ]1aỉTaIm - - c5 1331118311181 18 1111 11 9 11 vn ng gệp 1474.2 User interface 148

4.2.1 Mobile 0n 1484.2.2 Web dashboard ee 153Chapter 5 CONCLUSION .- Ghi 161

5.1 Project aChi€V€ITTI( - ĩ- 5c 5 5 3 919 TH TH TH TH ng TT Hết 1615.2 Limitations he 1625.3 Advantages and đisadVan{aØ©S sgk ket 1625.4 Future 2v eee 162

REFERENCES - ng ng HH HH HH ng 163

LIST OF FIGUTRES

Figure 1.1 Global Property Management Software Market — Industry Trends andForecast to 20229 - HH HH HH HT HH HH HH HH nu 16Figure 1.2 Survey the popularity of asset management software in VNU 20

Figure 2.1 Example of QR Code generarion ceeeeesceeeseeesecenreeeeeesaeeeseeeenneseaes 22

Figure 2.2 Structure Of QR-COde ccceecceescessseceseeceseeeeeeeesecseaeceeeesaeeesaeceeaeceneesaes 23Figure 2.3 Process QR Code decoding -. - 3c 33x13 +ESsreeeeerserersere 24Figure 2.4 98)0ì01/20122: 00000788 ố.- 24Figure 2.5 Flutter arCH1I€C(UC - c- 131 931111111 9301 11H TH ng 25Figure 3.1 General arChIt€CfUTG - - + E1 E310 119311 91 199111 HH ng 33

Figure 3.2 Process follow of web dashboarr 5 + eeseeeskeree 36

Figure 3.3 Process flow of mobile application 55555 <s*+++++eexsseeseeess 37Figure 3.4 Use-case website generalization cccceeceesseeeseeeececeseeeeeeeeaeenseeenneesaes 38Figure 3.5 Use-case mobile øeneraÌ1ZafIOI «+ + svseEeeeeeeesereersersee 39

Figure 3.6 ER (đ1aðTA1H - - (c5 G + 2121111 11 11H TT HH HH 128

Figure 4.1 Deployment website (1aØT4Tm - - c3 1E vs eikersreree 147

Figure 4.2 Wireframes flow using appÏICafIOn - - s5 sss + v+seeeeeesersesee 149Figure 4.3 UI of login SCT€€IN - 5c E1 E991 83111 931 1 9101991 19 ng ng ệp 150Figure 4.4 UI of scanner view with failure SCARTT - 55s s++ssssesesee 150Figure 4.5 UI of detail property Screen oo eeceecesseeeseseceeseceseeeceseesseeeaeeeneeaeeeaes 151Figure 4.6 UI of edit property SCT€€T1 5G 111 ng ng ng rệt 151Figure 4.7 UI of create maintenance SCT€€H - - 5 5 +3 + EE+vEeseeesereesee 152Figure 4.8 UI of profile SCT€€TN - . 5 2 E211 8391183118931 1 911 1111 9 11 8 ng ren 152Figure 4.9 UI of dashboard page - - - 5 + kh HH HH nh 153Figure 4.10 UI of create DFOD€TẨV G1 1111 1 91H ng ng rệt 153Figure 4.11 UI of create COMpONENE G121 E911 E511 51151 1k ng 154

10

Figure 4.12 UI of edit property - 5 + 1n TH ng ng nh nh 154Figure 4.13 UI of create depr€C1atiOII - c1 E911 9 1 111 ng rệ, 155

Figure 4.14 UI of create mmaInt€fIATIC eee eee 11 911 1 91 1H nh ng 155

Figure 4.15 UID of Check i 01 Ắ 156Figure 4.16 UI of check OUIK 4 5< + 1x 1E 9 1n ng 156

Figure 4.17 UI of generate QR Code ĩ5 2+ 11 vn ng ri 157

Figure 4.18 UI of show list property page cecceesccssceceneceseecesceceaeeesseceseeeeaeeeees 157

Figure 4.19 UI of show list type page cecescccsscssseceseeeeeceseeceseeceseeesaeeeseeenseeeeas 158Figure 4.20 UI of create US€T -.- 5 5 + 1n TT nh ng ng 158

Figure 4.21 UI of create ÏOCAfIOTI - . 5 + E111 91 E1 1 1 ng ng 159

Figure 4.22 UI of list location page - -. c5 31112311911 vn ng griệp 159

Figure 4.23 UI of create Drarnd - ¿+ + xxx 91 1 91 vn ng ng 160

Figure 4.24 UI of edit S€VfITE 2G 01 119 HH ng ng ng gệp 160Figure 4.25 UI of history DÀ© Ác 11211121 91191 HH ng rệt 161

11

LIST OF TABLES

Table 3.1 Systeim’s uc 39

Table 3.2 List of use-case W€SIfC 4 G9 HT ng Hết 41Table 3.3 Sign 0n 42Table 3.4 Change DaSSWOFC L1 SH TH TH HH HH Hưng gà 45Table 3.5 Insert property 017777 48Table 3.6 Edit property c1 TH TH HH HH kg rưy 51Table 3.7 Generate label QR Code - - - - 522 1113131 £222EEE+SEeeeeeezze 54Table 3.8 Check 1n - 2G 22062301911 911 112v ng TH TH HH Hệ 57Table 3.9 Check OUt - G6 2G 2266511331851 151 11 11 11121 TH HH HH 60Table 3.10 View Hl1S{OTY ch TT TH TH Hà HH HH ng gệt 64

Table 3.12 Edit COMpONENE 2.0.0 ẢẦ 69Table 3.13 Insert USer oo 74Table 3.14 Edit User - 2G G0 001111930 1930 9101191 1g ng TT HH nh tt 76Table 3.15 Delete 1f€Tm 1111191191111 11 HH nh HH Hit 79Table 3.16 Search hố 81Table 3.17 Update Se€ffITIE - - óc 1H TH nh kkrưy 83Table 3.18 Generate T€DOTI - -. c1 1111 HT HH kg rry 85Table 3.19 Insert noy 0 87Table 3.20 Edit bran - c6 2211231151131 511191119119 1 11h TH nu HH HH, 90

12

Table 5280.2080009) 11 94Table 3.22 Edit supplier eee 97

Table 3.23 Insert maintenance 000.0 eeeceeseeeeneceseeceseeceaeecsaecececsseeceaeecsaeeeseeeeaeeesas 100

I1) 652 85ii0i ii 20 nh .h 103

IV 1UIS920050000020i-vri i01 aăad 110

I )) S80 i8 nh 115I))S92.05 1008004 ì6(0 (0 rrrraa 117Table 3.29 Insert asset fÿDe Ác 3 HH TH TH TH TH TH TH HH nh nh HH 121Table 3.30 Edit asset fyJDe - HH HH HH Hết 124Table 3.31 Application actors - - 1 HH HH ng gệp 128

Table 3.32 List Of USC CASES G1999 1 910199 HH HH ng 128

Table 3.33 Login SCT€€I - (G0 1111 TH HH Hệ 129Table 3.34 Logout SCreeD 0n e.- 132Table 3.35 Create maintenance ceceeceesceeseeeseeeeeseceseeeceesecesececeeseeeaeceaeseneereeaes 134Table 3.36 Scan QR COde - ó- G2 22 1 191g HH gu ngưng 136Table 3.37 Select image from gallery - - c c SE EESkEEseeeeseeersereree 139Table 3.38 Edit property c c 1 121112111311 9111191111 1n HH nếp 142Table 3.39 Edit property - . G2 1211111121 9v 1v HH ng ngệp 143Table 3.40 View pTOẨIÏ€ 2 c1 11 HH TH HH ng ệp 146

13

In today's modern life, there are many websites and applications created for thepurpose of asset management Asset management aims to reduce the risk ofmanaging them There are many different approaches to asset management, but they

all have the same goal of minimizing the risk of assets; Asset managers strive to

identify and minimize risks that could damage or destroy assets In addition, assetmanagement helps improve asset efficiency by identifying and eliminatingunnecessary waste of time and money For better asset management, this thesisoffers a solution: A property management website system and mobile applicationfor asset information scanning For the website, we choose React for the front endbecause it is a powerful framework that allows developers to create websites

quickly and powerfully For mobile apps, we choose Flutter, a UI framework used

to create high-quality interfaces on iOS and Android in a short period of time

14

Chapter 1 INTRODUCTION

1.1 Problem statement

Typically, university property managers will put asset information labels on

properties to control the number of properties available and identify the asset

information Pasting information for such management may be subject to

misinformation Obviously, when we want to edit the information of an asset, wehave to search for that property and correct that information, and it takes us a lot oftime to manage it Thus, the asset management system was born By managingassets through the website, the system also has QR Code scanning softwaredeveloped for the purpose of scanning the QR Code affixed to each asset Inaddition, you can also consider the convenient features that a property managementsystem offers:

Property tracking: The system should be able to track the location and status of

assets.

Property maintenance: The system should be able to track asset maintenanceschedules and costs

Property reporting: The system should be able to generate reports on asset usage,

condition, and maintenance

Reduced costs: The system can help to reduce costs by eliminating the need formanual data entry and by providing insights into asset usage

By incorporating these features into the property management system,

The system can help save time and costs in property management

with the most optimal solution and improve it, this analysis of the current stateprovides actual and potential value for future application development In addition,understanding the current status quo is essential in the development of the systemphases as well as in the analysis and development of the system.

To survey the current status We have focused on the existing platforms in the world We find out how popular the app is in the world Besides, this research helps

us understand the user needs to make the most optimal recommendations inapplication analysis and design

According to Data Bridge Market Research analysis, the asset management

software market valued at $567.78 million in 2021 is expected to reach a value of

$720.25 million by 2029, ata CAGR of 7.00 % during the forecast period The key

factors driving the growth of the farm management software market are theacceleration of digitalization, especially in developing economies, and the adoption

of financial management software solutions growing production of small andmedium enterprises and the rise in popularity of smartphones.[1]

Global Property Management

Global Property Management Software Market is Expected to Software Market, By Regions,

Account for USD 720.25 Million by 2029 2022 to 2029

@ North America MEurope @ Asia Pacific @ South America m@ Middle East and Africa

DMCA Protected © Data Bridge Market Research- All Rights Reserved Source: Data Bridge Market Research Market Analysis Study 2022

Figure 1.1 Global Property Management Software Market — Industry Trends and Forecast to 2029

e Faceworks

16

Faceworks asset management software is one of the outstanding software of the TIT Faceworks software supply system, which is based on the most advanced technologies available today Faceworks asset management software allows users to use it anytime, anywhere, no installation required, quick access on web browsers, convenient and easy to use on any device.

Some outstanding features of the software:

- Manage initial portfolios related to assets.

- Manage, set up lists, and categorize assets on multiple criteria.

- Import and export warehouse assets.

- Provide a variety of tables and tables to help users quickly make reports on asset status, asset inventory, and asset liquidation.

- The system of warning reminders is displayed on the software home page.

e IZISolution

1ZISolution with ERPVIET equipment asset management software system provides

a full range of features to support equipment asset management such as process automation, real-time machine status update, easy tracking monitoring and adjust the expected workload in the next stage, well control of maintenance costs for each

type of machinery and equipment, etc to help enterprises manage production

equipment assets effectively.

Some outstanding features of the software:

- Asset portfolio management, asset decentralization.

- Manage procurement project planning and asset allocation requirements.

- Separation of assets/record increase/reduction of support.

- Asset assessment for Depreciation/inventory/liquidation of assets.

- Look up information, origin, history of circulation, and division of assets.

17

1.2.2 Survey in university

With the current research, we have created a small survey to collect the opinions of employees about equipment management as well as building "Property Management" in the most suitable way Getting input from staff in the university

helps in critical assessment in the development of the current application.

2 How many hours a day do you usually spend | 30 minutes

in property management? 1 hour

5 hours

10 o'clock Other numbers

3 What are the difficulties in managing assets | Staff reply

in the traditional way?

4 How can you count all the properties in the | Word

school? Excel

Bookkeeping

Others

5 What feature do you want in a property | View

management software? Add

18

c A number of survey samples:

- Survey sample: 10 staff

- All forms are valid

- Survey result

a Have you ever used property management software?

19

Figure 1.2 Survey the popularity of asset management software in VNU

In the chart we can see, the management staff in the universities are quite good butnot effective and only 40% of the wealth management staff in the university use

asset management software

1.3 Objectives

The thesis performs the following objectives:

- Define and design a property management system

- Building a website to manage property information in the school

- Compare and determine QR code scanning methods from mobile devices

- System implementation and development

1.4 Object and scope of studying

This thesis aims to study the following subjects:

e Technologies

- Front-end: ReactJS, Bootstrap

20

- Back-end: NET Core

- Database: Microsoft SQL server

- IDE: Visual Studio Code

- Moible application: Dart, Flutter

- Mobile-scanner package

e The scope of the study includes some of the following topics:

- Analysis and design of asset management systems

- Property management website development

- Property management application development

For administrator: Has all user rights, besides, has the right to create a

manager.

For manager: Restricting certain permissions such as configuring theproperty management system.

For staff: Only creating and editing content is allowed

Chapter 2 BACKGROUND KNOWLEDGE

2.1 QR Code

2.1.1 Introduction

QR Code (Quick Response code) is a two-dimensional symbol that can be readeasily by a digital device The code contains the product or service information itattaches to, such as an email address, phone number, or website addressinformation When the code is scanned, the information is decoded and displayed

on the device's screen QR Code were invented in 1994 by Denso, one of the majorToyota group companies, and approved as an ISO international standard (ISO/IEC18004) in June 2000 Initially, QR Code was designed for use in manufacturingcontrol of automotive parts, but it has since gained popularity in other fields [1]

e Here are one reasons QR codes are used everywhere:

21

e There are several advantages over barcodes: much higher data density, and

support for multiple languages

e Anyone can use it for free because Denso has released the patent into the

public domain

e Most cell phones are equipped with a camera that allows reading QR Codes

e Most cell phones equipped with a camera that allows reading QR Codes can

access the Internet automatically by reading the URL encoded in the QRCode.[2]

[ml

Figure 2.1 Example of QR Code generarion!

2.1.2 The QR Code structure

QR Code is a matrix-type symbol with a cell structure arranged in a square Itconsists of the functionality patterns for making reading easy and the data areawhere the data is stored QR Code has finder patterns, alignment patterns, timingpatterns, and a quiet zone QR Code has a function of an error correcting for missreading that white is black Error-correcting is defined in 4 levels (L, M, Q and H);level L: about 7% or less errors can be corrected, level M: about 15% or less errorscan be corrected, level Q: about 25% or less errors can be corrected, and level H:about 30% or less errors can be corrected [2]

' Figure is taken from the website https://qrcode.kaywa.com/

22

}-— 8 Postion Detection Pattern

Figure 2.2 Structure of QR-Code7

Position Dectection Pattern

A pattern for detecting the position of the QR Code By arranging this pattern atthe three corners of a symbol, the position, the size, and the angle of the symbol can

be detected This finder pattern consists of a structure that can be detected in alldirections (360°).[2]

Alignment Pattern

A pattern for QR alignment and distortion correction, The alignment pattern'scenter coordinate will be corrected if the icon is distorted Helps detect the centercoordinates of the alignment pattern easily [2]

Timing Pattern

The pattern identifies the center coordinates of each cell in the QR Code withalternately black and white patterns arranged It is arranged in both portrait andlandscape orientations [2]

Quiet Zone

The margin distance to be able to read the QR Code This quiet zone makes iteasier to detect the symbol from among the images read by the CCD sensor [2]

Data and Error Collection

The data will be analyzed and store in the data area The data will be encoded

into the binary code '0' and '1' The binary numbers '0' and '1' will be converted to

black and white cells and then sorted [2]

? Figure is taken from the website https://www.researchgate.net/figure/Structure-of-QR-Code

23

2.1.3 QR Code decoding

The QR Code decoding is based on the OpenCV open source library and

Libdecodeqr is a C/C++ library for decoding QR code 2D barcodes It is based on

JIS X 0510 and ISO/IEC18004, and can decode miscellaneous images that are taken

with a file, with a webcam, with a scanner, and so on Powered by Libdecodeqr's image reader, the program can complete both image processing and QR Code tasks.

ee

JE ¬ | ee

Figure 2.3 Process QR Code decoding

To process images, it is necessary to filter out noise, to make black and white After

being used the methods to read the QR Code, some information will be formed as

binary '0' and '1' Then the image requires conversion according to some

information obtained Finally, a data stream valid bit can be generated to decode the

Flutter is a cross-platform UI toolkit created by Google It allows developers tobuild native-looking applications for 10S, Android, web, and desktop from a singlecodebase Flutter uses the Dart programming language, which is compiled to nativecode for each platform This results in high-performance applications that feelnative to the platform they are running on [3]

Flutter is a relatively new framework, but it has quickly gained popularity due toits performance, ease of use, and rich feature set It is used by a wide range ofcompanies, including Google, Alibaba, and eBay [4]

Engin Service Protocol Composition Platform Channels

C/C++

Dart Isolate Setup System Events

Dart Runtime Mgmt Frame Scheduling

Frame Pipelining Text Layout

Embedder : :

-Platform-specific Render Surface Setup Native Plugins App Packaging

Figure 2.5 Flutter architecture

Flutter is a UI toolkit that uses a layered architecture to build high-performance,high-quality mobile, web, and desktop applications The architecture is designed to

be flexible and extensible, so developers can build applications that meet theirspecific needs.[5]

The Flutter architecture consists of the following layers:

25

Engine - The engine is the core of Flutter It provides the foundation for all otherlayers, and is responsible for rendering graphics, managing input, and providingaccess to platform-specific APIs.[5]

Framework - The framework provides a set of high-level APIs for building userinterfaces It includes widgets for common UI elements, such as buttons, text fields,and images.[5]

Platform - The platform layer provides access to platform-specific APIs Thislayer is responsible for things like accessing the filesystem, networking, andsensors.[5]

The Flutter architecture is designed to be modular, so developers can choose thelayers that they need for their application For example, an application that onlyneeds to run on Android can use the engine and framework layers, but not theplatform layer.[5]

2.2.1.3 Advantage

The pros of Flutter are:

High performance: Flutter apps are known for their high performance, and theycan match or even exceed the look and feel of native apps This is because Flutteruses a software rendering engine that is optimized for mobile devices [4]

Expressive and flexible UI: Flutter's UI toolkit is very expressive and flexible,and it allows you to create beautiful and complex user interfaces with ease Flutteralso has a large and growing library of widgets that you can use to build your UI

Hot reload: Flutter's hot reload feature allows you to see changes to your code inreal time, without having to rebuild your app This makes it very easy to iterate onyour app and quickly make changes.[6]

Cross-platform: Flutter allows you to build apps for Android, iOS, web, anddesktop from a single codebase This can save you a lot of time and money, as youdon't need to develop separate apps for each platform

26

Easy to learn: Flutter is easy to learn and use, even if you don't have anyexperience with cross-platform development The documentation is clear andconcise, and there are a lot of resources available online to help you get started.

Large and active community: Flutter has a large and active community ofdevelopers who are constantly creating new widgets, plugins, and tools to make iteven easier to use.[6]

2.2.1.4 Disadvantage

Flutter is a relatively new technology This means that there is a limited amount

of documentation and support available, and the framework is still underdevelopment This can make it difficult to find answers to questions andtroubleshoot problems.[6]

Flutter apps can be large in size This is because Flutter uses a compiledlanguage, Dart, which results in larger app binaries than those created withinterpreted languages like JavaScript This can be a problem for users with limitedstorage space or slow internet connections.[6]

Flutters ecosystem is still growing There are a limited number of third-partylibraries and tools available for Flutter, which can make it difficult to find thefunctionality you need This is slowly improving as the framework gains popularity,but it is still something to keep in mind

React is a JavaScript library that helps you build user interfaces It is a

declarative library, which means that you describe what you want the UI to look

27

like, rather than how to make it look that way This makes React very efficient andeasy to use [7]

How does React work?

React works by creating a virtual DOM in memory The virtual DOM is arepresentation of the real DOM, but it exists in memory instead of on the page.React uses the virtual DOM to track changes to the UI When something changes inthe UI, React only updates the parts of the virtual DOM that have changed This ismuch more efficient than updating the entire DOM every time something

Here are some of the disadvantages of React:

Dependency: React is a library, which means that it depends on other libraries This

can make it more difficult to manage your dependencies and keep your code

up-to-date

State management: React does not have a built-in state management solution, soyou will need to choose a third-party library

Ecosystem: The React ecosystem is constantly evolving, which can make it difficult

to keep up with the latest changes.[9]

28

2.2.3 NET Core

2.2.3.1 Introduction

.NET is a software development platform created by Microsoft that provide acommon platform to run an application that was built using the different languagesuch as C#, VB.NET, Visual Basic, etc It is also used to create a form based,console-based, mobile and web-based application or services that are available in

Microsoft environment [10]

2.2.3.2 Advantage

Cross-platform: NET applications be run on a variety of platforms, includingWindows, macOS, and Linux This makes it a good choice for developers who want

to create applications that can be used by a wide range of users

Open source: The NET framework is open source, which means that it is free touse and modify This gives developers a lot of flexibility and control over theirapplications [11]

Large community: NET has a large and active community of developers, whichmeans that there is a lot of support available This can be helpful if you need helpwith your development or if you have questions about the platform

Performance: NET applications are typically very performant This is due inpart to the use of the NET CLR, which is a highly optimized virtual machine.[11]

2.2.3.3 Disadvantage

There are also some disadvantages to using NET, including:

Vendor lock-in: NET is a proprietary framework by Microsoft This means thatdevelopers who use NET are essentially locked into the Microsoft ecosystem Ifyou want to switch to a different platform, you may have to rewrite your code fromscratch [11]

Memory leaks: NET applications can be susceptible to memory leaks if they are

not properly written This can lead to performance problems and even crashes

29

Difficulty in the transition to NET core: NET Core is a new version of the.NET framework that is designed to be cross-platform However, the transition from.NET to NET Core can be difficult, as many of the APIs have changed.

Limitations of the NET framework: The NET framework is a large and

complex framework, and it is not without its limitations For example, it does not

support some popular programming languages, such as Python and Ruby.[11]

2.2.4 Bootstrap

2.2.4.1 Introduction

Bootstrap is a free and open-source CSS framework created by Mark Otto andJacob Thornton It is the most popular HTML, CSS, and JavaScript framework fordeveloping responsive, mobile-first websites Bootstrap includes a wide range ofcomponents and utilities that can be used to create a variety of web pages, includingforms, navigation, tables, and buttons Bootstrap is also highly customizable, so youcan easily change the look and feel of your website to match your branding [12]

2.2.4.2 Advantage

Responsive design: Bootstrap is built with responsive design in mind, so yourwebsite will look great on any device, from a desktop computer to a mobile phone.Easy to use: Bootstrap is very easy to learn, even for beginners The documentation

is clear and concise, and there are plenty of resources available online to help you

Overuse: Bootstrap can be overused, which can lead to websites that all look thesame It is important to customize Bootstrap to your own needs and branding toavoid this.

Learning curve: Bootstrap has a learning curve, and it can take some time to learnhow to use it effectively.[13]

Not always the best solution: Bootstrap is not always the best solution for everywebsite If you need a highly customized website, Bootstrap may not be the bestoption

2.2.5 Typescript

2.2.5.1 Introduction

TypeScript is a superset of JavaScript syntax that adds static typing This meansthat TypeScript code can be checked for errors at compile time, which can help

prevent errors and improve code quality TypeScript is a language that must be

compiled before execution

TypeScript is a popular choice for large-scale Javascript applicationdevelopment It can create web applications and mobile applications [14]

2.2.5.2 Advantage

Static typing: Static typing can help to prevent bugs and improve code quality

Compile-time checking: TypeScript code can be checked for errors at compile time,which can save time and effort [15]

Performance: TypeScript code can be compiled to JavaScript code, which canimprove performance

Portability: TypeScript code can be run on any platform that supports JavaScript

Community: TypeScript has a large and active community of developers

31

2.2.6 Dart

Dart is an open-source general-purpose programming language It is originally

developed by Google Dart is an object-oriented language with C-style syntax It

supports programming concepts like interfaces, classes, unlike other programminglanguages Dart doesn’t support arrays.[16]

32

Chapter 3 ANALYSIS AND DESIGN

3.1 General architecture

Based on the application design analysis We've designed a solution that delivers

better performance The whole system is described as the figure below:

= onmoles [& m| — Sewee ` <

Figure 3.1 General architecture

The architecture overview is organized according to the Client-Server model andthey are connected to each other via Http Request (Restful API)

Server side: Routers are responsible for redirecting pages Modules are organized

into the components of the page, which contain and define the elements displayed

on the user interface When the user interacts with the system, the respectivecomponents send the user's actions to the controller, which is responsible forstoring, solving system login problems, and managing the state of the system action

to help fulfill requests to get data or change state To request data from the server,

they are through an HTTP request that calls the API to the server After receiving

the request from the client, the server will return the API used to update the systemstate Then, the data through the system controller is fed into the module to displaythe UI, and the UI elements are changed

33

Server side: At the server, we organize according to a 3-layer model: controller,module, and group manager For the module set up with the task of receiving therequest and response format from the API, it will then go through the controller tohandle logic based on the response data It is passed in by the controller and isresponsible for the database operation to perform operations on adding, deleting,editing, or querying the data of the records in the database And more than that, thecontroller will call the service to handle the logic and the service will be called tothe group manager to manage and manipulate the database.

Mobile application: We use flutter with strong design and mobile_scanner package

to scan QR code to get product information quickly

3.2 Process flow

In the website section, we choose ReactJS which is a Javascript library created

to build fast and responsive user interfaces for web and mobile applications In theinterface, we use Bootstrap framework to make the website more lively and smooth

In this application, we chose the mobile_scanner package to be critical inbuilding a QR Code scanner on iOS and Android apps This Flutter packagedeveloped based on the MLKitBarcodeScanning framework s a part of Google's

ML Kit, a collection of pre-trained machine-learning models that can be used to

build mobile apps

The processing flow is generally described in the figure below:

34

Common

Figure 3.2 Process follow of web dashboard

After login, the application will check the account has been logged in any time ornot If you are not logged in, the application displays a password change window.After successfully changing the password, the user proceeds to login with the newpassword After logging in, the application will process the system authorization forthe application and log in successfully After successful login, users can proceed toadd, delete, edit, search, report and track assets

36

a Vv

Open QR decoder

Scaned ready

l

QR image detection

Figure 3.3 Process flow of mobile application

After the user successfully logs in with the Staff role account, the screen switches to

QR Code scanner mode In QR Code scanner mode, the barcode scan display area isfound When scanning an invalid code, a message will be displayed and then the

camera stops Once the valid QR code image is captured and begins entering the

QR Code decoding state, the decoded information will be displayed [18]

37

vances all management service

«include» “> yo see

setting management › a User must be

update setting signed-in to use all

Figure 3.4 Use-case website generalization

38

includ create maintenance

Actor Description Note

Administrator Adminstrator who manages all the systems.

Manager Manager who manages the addition and deletion

of the system Limited functionality

Staff Staff who add or edit system features and

Table 3.1 System’s actors

3.4.2 List of use-cases

Actor Use-case Description

Administrator, | Sign in Allow sign in with the system

Manager User management | Allow administrator or manager can mnage

39

managers and staff.

Band management Allow administrator or manager to manage

brand by creating, updating, deleting, andviewing brand information

Suppliermanagement

Allow administrator or manager to managesuppelier by creating, updating, deleting, andviewing supplier information

Asset management Allow administrator or manager to manage

asset by creating, updating, deleting, and

viewing asset information

Generate label QR

code

Automatically generate QR code labels used

to scan asset information

View history asset Displays a history of editing or updating

asset or component information

Check in asset Change the status of the property

Component Allow to adminstator or manager to manage

management component by creating, updating, and

viewing component information

Depreciation Allow administrator or manager to manage

management depreciation by creating, updating, and

viewing depreciation information

Location Allow administrator or manager to manage management location by creating, updating, and viewing

location information

Asset Allow administrator or manager to manage

type management asset type by creating, updating, and viewing

asset type information

Staff Brand management Allow staff to manage brand by creating,

updating, and viewing brand information

Suppliermanagement

Allow staff to manage suppelier by creating,updating, and viewing supplier information

Asset management Allow staff to manage asset by creating,

updating, and viewing asset information

Component Allow staff to manage component by

management creating, updating, and viewing component

Depreciation Allow staff to manage location by creating,

management updating, and viewing location information Location Allow staff to manage location by creating, management updating, and viewing location information Asset Allow staff to manage asset type by creating,

information

Table 3.2 List of use-case website

3.4.3 Use-case specification and diagrams

3.4.3.1 Sign in

Description User use exit account to sign-in to system for all services

41

Trigger User click to button “Sign in”

Pre-condition User devices must connect to Internet

User account existedPost-condition User get a notification about sign in successful

User redirected to dashboard pageBasic flow 1 User click on sign in button

2 User enter username & password and click confirm

3 System validate username & password in correct format

4 System validate user input data with existed account data indatabase

5 System store sign-in status using sessions

6 System displays successful signed-in and redirect todashboard page

7 System save customers sign-in status

Alternative flow 2a System display invalid information due to wrong format

Use-case continute at step 2

4a Sytem display invalid information due to user account is

not existed in database

Use-case continute at step 2

Exception flow

Table 3.3 Sign in

42