ĐỒ án xây DỰNG ỨNG DỤNG kế TOÁN

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MÌNH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM
---------

ĐỒ ÁN 2

ĐỀ TÀI: “XÂY DỰNG ỨNG DỤNG KẾ TOÁN
TRUNG GIAN”
Giảng viên hướng dẫn: Nguyễn Công Hoan

Sinh viên thực hiện:

1. Võ Phi Nhật Duy

17520407

2. Trương Viết Huy Phong

17520879

TP Hồ Chí Minh, ngày 22 tháng 01 năm 2021


MỤC LỤC
1.

2.

3.

4.

Giới thiệu ................................................................................................................................ 2
1.1.

Đặt vấn đề ......................................................................................................................... 2

1.2.

Mục đích của đề tài ........................................................................................................... 2

Công nghệ sử dụng ................................................................................................................ 3
2.1.

JavaScript .......................................................................................................................... 3

2.2.

NodeJS – Framework ExpressJS ...................................................................................... 3

2.3.

Mongo DB ........................................................................................................................ 5

2.4.

ReactJS – Framework ....................................................................................................... 5

2.5.

ReduxJS ............................................................................................................................ 6

2.6.

Redux-saga ...................................................................................................................... 12

Phân tích ................................................................................................................................ 15
3.1.

Objective ......................................................................................................................... 15

3.2.

Objective Model ............................................................................................................. 16

3.3.

People Model .................................................................................................................. 18

3.4.

System Model ................................................................................................................. 20

3.5.

Data Model ..................................................................................................................... 21

Thiết kế ................................................................................................................................. 22
4.1.

Thiết kế dữ liệu ............................................................................................................... 22

4.2.

Thiết kế kiến trúc hệ thống ............................................................................................. 24

4.3.

Thiết kế giao diện ........................................................................................................... 25

5.

Triển khai ứng dụng ............................................................................................................ 33

6.

Tài liệu tham khảo ............................................................................................................... 34

1


1. Giới thiệu
1.1.

Đặt vấn đề

- Sản phẩm của nhóm đồ án sẽ cung cấp phẩn mềm cho các công ty kế toán
trung gian nhỏ, các nhân viên kế toán tự do. Thơng qua sản phẩm của
nhóm, các cơng ty nhỏ, nhân viên kế tốn tự do có thể quản lý hóa đơn
một các dễ dàng, tạo báo cáo tài chính theo quy định của bộ Tài Chính.

Sau khi quan sát nhóm đã thấy rằng một yếu tố quan trọng ảnh hưởng đến
sự hài lòng của khách hàng là việc chưa có phần mềm nào tập trung vào
phục vụ đối tượng khách hàng trên. Hiện nay, cơng ty kế tốn trung gian
nhỏ và các nhân viên kế toán tự do đều phải sử dụng các phần mềm lớn
yêu cầu chi phí cao hoặc sử dụng phần mềm lậu. Việc này dẫn đến tốn
kém chi phi hoặc không được hỗ trợ từ phần mềm lâu dài. Do đó làm việc
sử dụng sản phẩm của chúng tơi các cơng ty kế tốn trung gian nhỏ hoặc
các nhân viên kế toán tự do dễ dàng trong việc lưu trữ và quản lý các hóa
đơn một cách thuận tiện và chính xác khi tạo báo cáo tài chính.
- Nhóm muốn đưa đến 1 giải pháp làm việc online giá thành rẻ hơn, tập
trung vào trải nghiệm của khách hàng nhiều hơn. Đảm bảo việc update
theo thời gian với những thay đổi từ thông tư của chính phủ. Hỗ trợ tốt
trong việc sao lưu dữ liệu tránh mất mát của người dùng.
1.2.

Mục đích của đề tài

- Với bước khởi đầu là mơn Đồ án 2, nhóm thực hiện đề tài mong muốn sẽ
nghiên cứu tìm ra các cơng nghệ có thể có thể áp dụng vào đề tài này.
- Từ các cơng nghệ đã tìm hiểu, nhóm sẽ chọn ra các cơng nghệ phù hợp, có
thể mở rộng và nâng cấp thêm để ứng dụng sẽ hồn thiện theo hướng mong
muốn của nhóm.

2


2. Công nghệ sử dụng
2.1.

JavaScript

Giới thiệu:

- JavaScript theo phiên bản hiện tại là một ngôn ngữ thông dịch được phát
triển bởi Brendan Eich tại hãng truyền thông Netscape. JavaScript xuất
hiện lần đầu và tháng 5 năm 1995 với tên gọi ban đầu là Mocha, sau đó
đổi tên thành LiveScript và cuối cùng là JavasScript.
- Phiên bản mới nhất của JavaScript là ECMAScript 7. ECMAScript là
phiên bản chuẩn hóa của JavaScript, là quy chuẩn để sử dụng JavaScript
tốt nhất cho các lập trình viên. Phiên bản ECMAScript 6 hiện đang là quy
chuẩn sử dụng rộng rãi nhất đối với các lập trình viên sử dụng JavaScript
dành cho phát triển sản phẩm và framework.
Lí do sử dụng trong đồ án:
- JavaScript hiện tại là ngôn ngữ phổ biến đối với việc phát triển ứng dụng
web, ứng dụng di động, hoặc làm việc với server, thông qua việc sử dụng
các thư viện, framework mã nguồn mở.
- Vì JavaScript có thể sử dụng ở cả việc phát triển ứng dụng ở phía khách
hàng và sử dụng để làm việc với server nên nhóm đồ án có thể sử dụng
chung một ngơn để cùng phát triển dự án và hỗ trợ nhau tốt hơn
- JavaScript được dùng để phát triển rất nhiều thư viện, framework mã
nguồn mở, vì vậy cộng đồng sử dụng JavaScript cũng rất lớn và nhóm
thực đồ án cũng dễ dàng hơn trong việc phát triển đồ án.
2.2.

NodeJS – Framework ExpressJS
Giới thiệu:

- NodeJS là một JavaScript runtime được xây dựng dựa trên Chrome’s V8
JavaScript engine. V8 Engine là một JavaScript engine mã nguồn mở chạy
3

trên các trình duyệt Chrome, Opera và Vivaldi. Nó được thiết kế để tập trung
vào hiệu năng và chịu trách nhiệm cho việc dịch mã JavaScript sang mã
máy để máy tính có thể hiểu và chạy được.
- Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty
Joyent, trụ sở tại California, Hoa Kỳ.
- Phần tổng thể, quan trọng nhất bên dưới của NodeJS hầu hết được viết bằng
C++ nên tốc độ xử lý và hiệu quả khá cao.
- NodeJS có thể được sử dụng để phát triển các ứng dụng cần tốc độ xử lý
nhanh theo thời gian thực, các sản phẩm cần mở rộng nhanh, đổi mới công
nghệ, …
- ExpressJS là một framework được xây dựng trên nền tảng của NodeJS. Nó
cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile. ExpressJS
hỗ trợ các method HTTP và midleware tạo ra API vô cùng mạnh mẽ và dễ
sử dụng.
- Một số chức năng chính của ExpressJS:
 Thiết lập các lớp trung gian để trả về các HTTP request.
 Define router cho phép sử dụng với các hành động khác nhau dựa
trên phương thức HTTP và URL.
 Cho phép trả về các trang HTML dựa vào các tham số.
Lí do sử dụng trong đồ án:
- NodeJS là một nền tảng phổ biến với các lập trình viên sử dụng
JavaScript, nó có cộng đồng vô cùng lớn, cùng với rất nhiều
các thư viện, các module mã nguồn mở giúp xử lý các bài toán
một cách đơn giản và dễ dàng hơn.
-

ExpressJS là một framework phổ biến của NodeJS để thực hiện các xử
lý với server. ExpressJS cho phép xây dựng các API dựa trên phương
thức HTTP một cách nhanh chóng và đơn giản.

4


2.3.

Mongo DB
Giới thiệu:
- MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc
NoSql và được hàng triệu người sử dụng.
- NoSQL là 1 dạng CSDL mã nguồn mở và được viết tắt bởi: NoneRelational SQL hay có nơi thường gọi là Not-Only SQL.
- MongoDB là một database hướng tài liệu (document), các dữ liệu được
lưu trữ trong document kiểu JSON thay vì dạng bảng như CSDL quan hệ
nên truy vấn sẽ rất nhanh.
- So với RDBMS thì trong MongoDB collection ứng với table, cịn
document sẽ ứng với row, MongoDB sẽ dùng các document thay cho
row trong RDBMS.
- Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các
dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định.
- Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh
thông qua ngôn ngữ truy vấn MongoDB.

2.4.

ReactJS – Framework
Giới thiệu:
- ReactJS là một thư viện Javacript hỗ trợ các lập trình viên xây dựng
giao diện cho một ứng dụng web (SPA) được phát triển bởi Facebook.
- Mục tiêu cốt lỗi của thư viện này là nhằm cung cấp hiệu suất làm việc
cao nhất, thông qua việc tập trung các component riêng lẻ lại với nhau.

- ReactJS tiện lợi trong việc chia nhỏ và tái sử dụng các component một
cách hiểu quả giúp chúng ta không bị lặp lại code quá nhiều giúp việc
code thuận tiện hơn.
Lí do sử dụng trong đồ án:
5


- ReactJS cho phép lập trình viên viết ứng dụng trực tiếp trên Javasript.
Thêm vào đó là JSX – một tính năng khơng chỉ làm cho ReactJS dễ dàng
mà cịn thú vị hơn. Nếu như AngularJS là một Framework cho phép
nhúng code Javasscript trong code html thông qua các attribute như ngmodel, ng-repeat...thì với react là một library cho phép nhúng code html
trong code Savascript nhờ vào JSX, chúng ta có thể dễ dàng lồng các
đoạn HTML vào trong JS.Tích hợp giữa Savascript và HTML vào trong
JSX làm cho các component dễ hiểu hơn và tường minh hơn.
- Dễ tiếp cận đối với người đã kiến thức lập trình căn bản về Javascript
- Do react cung cấp một cấu trúc dựa trên component, tức là các
component là những mảnh logo được ghép lại thành một trang web. Mỗi
component sẽ tự quyết định nó render như thế nào và logic riêng bên
trong đó.
- Có thể tái sử dụng lại các component này tại bất kì nơi nào.
- Bộ cơng cụ phát triển cho lập trình là một yếu tố quan trọng khi chọn nền
tền phát triển. Vì thế đối với React có 2 bộ cơng cụ tuyệt vời mà em đang
sử dụng: React Developer Tools và Redux Developer Tools. Cả hai có thể
được cài đặt dưới dạng tiện ích mở rộng của Chorme
- React Developer Tools: dùng để kiểm tra các thành phần phản ứng trong
hệ thống phân cấp của các element và quan sát sự thay đổi của state.
- Redux Developer Tools: dùng để quan sát các hành động (actions) gửi đi
và state trong store cũng như theo dõi sự thay đổi được phản ánh trên
view ngay lập tức.
2.5.

ReduxJS
Giới thiệu:
- Khi mà các ứng dụng ngày càng trở nên phức tạp (SPA) thì
chúng ta phải quản lý nhiều state hơn với so trước đó. Những

6


state này bao gồm dữ liệu trả về từ server và dữ liệu được cache
cũng như dữ liệu nội bộ cũng khơng đảm bảo được sự tồn vẹn
so với server. Để quản lý state mà ln ln có thể thay đổi là
điều rất khó. Ví dụ một model có thể được cập nhật được model
khác, rồi một view có thể được update được model nói trên,
đồng nghĩa nó cũng update ln cái model cịn lại… Và cứ thể
dẫn đến việc chúng ta không biết state nào thay đổi bởi cái gì
và ở đâu. Thế nên chúng ta phải sử dụng một thử viện để giải
quyết các việc đó là Reduxjs.
- Reduxjs là một thư viện Javascript giúp tạo ra một lớp quản lý
trạng thái của ứng dụng, được xây dựng trên nên tảng tư tưởng
của ngôn ngữ và kiến trúc Flux do Facebook giới thiệu.
- Do vậy Redux thường là bộ đơi kết hợp hồn hảo với React.
Tuy nhiên hồn tồn có thể sử dụng với các framework khác
như Angular, Angular2, Backbone, Falcor, Deku
- Nguyên lý hoạt động của Redux được xây dựng dựa trên 3 nguyên lý:
 Nguồn dư liệu tin cậy nhất: State của toàn bộ ứng dụng
được chứa trong một objecttree nằm trong một Store duy
nhất (chỉ có duy nhất một store trong một ứng dụng web)
 Trạng thái chỉ được phép đọc: cách duy nhất để thay
đổi State của ứng dụng là phát một Action (là một

object mơ tả những gì xảy ra)

7


 Thay đổi chỉ bằng hàm thuần tuý: Để chỉ ra cách mà State được
biến đổi bởi Action chúng ta dùng các pure-function gọi là
Reducer
- Về cơ bản Redux có 4 thành phần sau:

 Action: là nơi mang thông tin dùng để gửi từ ứng dụng đến store.
Các thông tin này là key của nó và object mơ tả những gì đã xảy ra.
 Reducer: là nơi xác định

State thay đổi như thế nào

 Store: là nơi quản lý State, cho phép truy cập qua getState(), cập
nhật State qua dispatch(action).

11


Lí do sử dụng trong đồ án:
- Do React được xây dựng theo hướng chi nhỏ thành component
dẫn đến việc quản lý nội bộ các state của chúng mà không cần
bất kỳ một thư viện hoặc cơng cụ nào. Nó sẽ hoạt động tốt với
các ứng dụng có ít component nhưng khi ứng dụng phát triển
và ngày càng phức tạp thì việc quản lý state được chia sẻ giữa
các component sẽ khá khó khăn.
- Ví dụ: trong React để chia sẻ State thông qua các component

con, một state phải live trong component cha. Một method để
update chính state này cũng phải được cung cấp để component
cha và truyền như Props đên các component con.
- Điều này cũng kiến cho việc quản lý các State trở nên phức tạp
và bừa bộn. Đó là lý do em sử dụng thư viện này.

2.6.

Redux-saga
Giới thiệu:
- Redux-Saga là một thư viện redux middleware, giúp quản lý những side
effect trong ứng dụng redux trở nên đơn giản hơn. Bằng việc sử dụng tối
da tính năng Generators (function*) của ES6, nó cho phép ta viết hàm bất
đồng bộ (async) nhìn giống như hàm đồng bộ (synchronos).
- Side effect: tất cả những xử lý ở Reducer đều sử dụng các hàm đồng bộ
hoặc các hàm thuần. Nhưng đối với ứng dụng thực tế thì cần nhiều hơn
vậy như xử lý bất động với server. Như thực hiện lấy dữ liệu từ server thì
ta cần phải đợi kết quả chứ kết quả không trả về ngay được. Như vậy
trong lập trình hàm đó gọi là side effect
12


- Generator Function: khác vời hàm bình thường là thực thi và trả kết quả
về thì Generator Function có thể thể thực thi, tạm dừng trả về kết quả…
Từ khó để làm được việc đấy là yield
- Nguyên lý hoạt động:
Flow khi khơng có Redux Saga:
Action(s) → Reducer(s)
Khi có Redux Saga:
Action(s) → Redux Saga →Reducer(s)

 Đối với logic của saga, ta cung cấp một hàm cho saga,
chính hàm này đứng ra xem xét các Action trước khi vào
store, nếu là Action tương ứng với hàm được thực thi thì
saga sẽ thực thi hàm đó.
 Trong Generator Function này có yield và mỗi khi yield
ta sẽ trả về một plain object được gọi Effect object. Objec
này đơn giản chỉ là một object bình thường bên trong chứ
thơng tin đặc biệc để chỉ dẫn cho middleware của Redux
thực thi các hoạt động khác như put một Action tới store.
Lí do sử dụng trong đề tài:
- Khơng bị dính đến callback hell trong Javascript
- Thuận tiện trong việc lấy dữ liệu ở phía server về đơn giản hơn
Redux-thunk có sẽ dụng

13


14


3. Phân tích
3.1.

Objective

Vision

Trở thành phần mềm kế tốn trung gian số 1 ở Việt Nam

Goals

Goal: Đưa ra thị trường phiên bản đầu tiên sau 1 năm phát triển.
Metric: Thử nghiệm trên tập khách hàng thực tế, lấy phản hồi và
thay đổi theo nhu cầu. Đạt 100 người dùng cá nhân trong 3
tháng đầu phát hành.
Goal: Triển khai phiên bản đầu tiên cho người dùng cá nhân
thành công
Metric: Đạt được 1000 người dùng cá nhân sau 6 tháng phát
hành phiên bản đầu tiên.
Goal: Tăng nhanh số lượng người dùng sau mỗi quý trong năm
đầu tiên.
Metric: 250% số lượng người dùng cá nhân sau mỗi quý trong
năm đầu tiên.
Goal: Được tin tưởng sử dụng bởi các công ty vừa và nhỏ.
Metric: 20 công ty sau 6 tháng phát hành phiên bản đầu tiên và
đạt 80 công ty sau 1 năm phát hành.

Initiatives

- Tìm hiểu quy trình và nghiệp vụ của các cơng ty kế toán trung
gian.
- Liên hệ hợp tác với các cơng ty kế tốn trung gian, nhân viên
kế tốn tự do.
15


- Tổng hợp dữ liệu hóa đơn, báo cáo tài chính các năm của một
số cơng ty để làm mẫu.
Persona(s)

- Nhân viên kế tốn tự do, bán thời gian
- Cơng ty kế toán trung gian nhỏ

3.2.

Objective Model

a) Business Objective Model

b) Key Performance Indicator Model

16


c) Feature Tree

17


3.3.

People Model

a) Org Chart

18


a) Process Flow

19


3.4.

System Model
a) Ecosystem Map

20


3.5.

Data Model
a) Business Data Diagram

b) Data Dictionary
Data Type
String
Currency

Description
Câu, đoạn văn bao gồm chữ số và kí tự đặc
biệt
Tiền tệ đơn vị VNĐ

Date

Thời gian

Boolean

True/False

21


4. Thiết kế
4.1.

Thiết kế dữ liệu

22


23


4.2.

Thiết kế kiến trúc hệ thống

-

Hệ thống gồm 1 server logic phụ trách lưu thông tin vào
database, xử lý các yêu cầu từ client và gọi các request
để crawl dữ liệu và gửi thông tin render dữ liệu cho
người dùng.

- Server phụ trách logic:

 Logic: Server nhận dữ liệu từ Client thông qua giao thức HTTP,
dữ liệu được đi qua Middleware kiểm tra dữ liệu người dùng
gửi có đúng với yêu cầu.

24


4.3.

Thiết kế giao diện

a) Màn hình đăng nhập

b) Màn hình chi tiền mặt

25


c) Màn hình danh sách cơng ty

d) Màn hình thêm công ty

26


e) Màn hình danh sách loại cơng ty

f) Màn hình thêm loại công ty

27