ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC BÁCH KHOA
KHOA CÔNG NGHỆ THÔNG TIN
Tel. (+84.0236) 3736949, Fax. (+84.0236) 3842771
Website: itf.dut.udn.vn, E-mail:

BÁO CÁO
THỰC TẬP TỐT NGHIỆP
NGÀNH CÔNG NGHỆ THÔNG TIN
Tên đề tài:

Xây dựng website quản lý chi tiêu của một hoạt động tập thể
sử dụng Framework Spring và React

CÔNG TY THỰC TẬP:
Mgm technology partners Viet Nam


LỜI CẢM ƠN
Trong thời gian 2 tháng thực tập ở công ty, em đã nhận được sự giúp
đỡ rất nhiều từ mọi người.
Lời đầu tiên, em xin gửi lời cảm ơn đến Công ty TNHH MTV mgm Việt
Nam đã tổ chức chương trình thực tập cho chúng em. Nhờ đó, chúng em có
cơ hội được tiếp xúc môi trường làm việc thực tế, được tiếp xúc với các anh
chị có nhiều kinh nghiệm và nhận được nhiều lời chia sẽ đầy ý nghĩa. Bên
cạnh đó, em cũng được thực hành làm việc trong môi trường Agile. Với sự
giúp đỡ nhiệt tình và tận tình của anh Phan Văn Bình trong suốt thời gian
hai tháng thực tập, chúng em đã có thời gian làm việc nhóm, chia sẽ kiến
thức và học được nhiều công nghệ mới có thể áp dụng sau này sau khi ra
trường.
Em cũng gửi lời cảm ơn đến lãnh đạo trường Đại học Bách Khoa, Đại

Học Đà Nẵng, lãnh đạo khoa Công nghệ thông tin đã tổ chức học phần này
để sinh viên có cơ hội tìm kiếm công ty thực tập và trải nghiệm thực tế.
Em xin chân thành cảm ơn.
Sinh viên thực hiện
Cao Thị Anh Đào

i


MỤC LỤC
DANH SÁCH HÌNH ................................................................................................. 2
DANH SÁCH TỪ VIẾT TẮT .................................................................................. 3
CHƯƠNG 1: GIỚI THIỆU CÔNG TY TNHH MTV MGM VN ......................... 4
1.1.
1.2.
1.3.

TÊN CÔNG TY .......................................................................................... 4
LỊCH SỬ PHÁT TRIỂN VÀ HÌNH THÀNH ......................................... 4
NHU CẦU NHÂN LỰC VÀ ĐỊNH HƯỚNG PHÁT TRIỂN ................ 5

CHƯƠNG 2: QUÁ TRÌNH THỰC TẬP TẠI CÔNG TY .................................... 5
2.1
2.2

NHIỆM VỤ ĐƯỢC GIAO ........................................................................ 5
CÁC CÔNG NGHỆ ĐÃ NGHIÊN CỨU ................................................. 6
2.2.1 Công cụ quản lý mã nguồn Git ......................................................... 6
2.2.2 Tìm hiểu về ngôn ngữ lập trình JAVA ............................................ 7
2.2.3 Tìm hiểu về Framework Spring ...................................................... 9

2.2.4 Tìm hiểu về TypeScript .................................................................. 13
2.2.5 Tìm hiểu về Framwork React ........................................................ 15

CHƯƠNG 3: KẾT QUẢ THỰC HIỆN SẢN PHẦM .......................................... 19
3.1 GIỚI THIỆU ĐỀ TÀI .................................................................................. 19
3.2 CÁC CHỨC NĂNG CHÍNH CỦA HỆ THỐNG ...................................... 19
3.3 YÊU CẦU PHI CHỨC NĂNG .................................................................... 19
3.4 MÔI TRƯỜNG CÀI ĐẶT ........................................................................... 20
3.5 KẾT QUẢ ĐẠT ĐƯỢC ............................................................................... 21
TÀI LIỆU THAM KHẢO ...................................................................................... 27

i


DANH SÁCH HÌNH

Hình 1: Logo công ty mgm technology partners Vietnam ..................................................... 4
Hình 2: Quá trình hình thành và phát triển của công ty mgm............................................... 4
Hình 3: Các luồng xử lý của Git ............................................................................................ 6
Hình 4: Các tính chất cơ bản của lập trình hướng đối tượng ............................................... 8
Hình 5: Mô hình các thành phần của Spring....................................................................... 11
Hình 6: Cách hoạt động của TypeScript ............................................................................. 13
Hình 7:Lý do sử dụng TypeScript ........................................................................................ 14
Hình 8: Cấu trúc các component trong React ..................................................................... 17
Hình 9: Luồng xử lý của React ............................................................................................ 18
Hình 10: Trang chủ ứng dụng ............................................................................................. 21
Hình 11: Trang tạo hoạt động mới ...................................................................................... 22
Hình 12: Trang quản lý người dùng .................................................................................... 22
Hình 13: Thêm thành viên cho hoạt động............................................................................ 22
Hình 14: Trang thêm thông tin chi tiêu ............................................................................... 23

Hình 15: Danh sách chi tiêu của một hoạt động ................................................................. 23
Hình 16: Trang quản lý thông tin chi tiếc tổng sổ tiền và trung bình mỗi người ................ 24
Hình 17: Trang theo dõi tiền dư, tiền nợ của mỗi cá nhân ................................................. 24


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

DANH SÁCH TỪ VIẾT TẮT

Từ viết tắt

Diễn giải

TNHH

Trách nhiệm hữu hạn

MTV

Một thành viên

QA

Quality Assurance

VCS

Version Control System


URL

Uniform Resource Locator

EJB

Enterprise JavaBeans

UI

User Interface

DOM

Document Object Model

MVC

Model View Controller

JSX

JavaScript XML

HTML

HyperText Markup Language

3|Page



Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

CHƯƠNG 1: GIỚI THIỆU CÔNG TY TNHH MTV MGM VN
1.1. TÊN CÔNG TY
Tên đầy đủ của công ty:
Công ty TNHH MTV mgm technology partners Viet Nam
Địa chỉ công ty
 Cơ sở 1: 07 Pastuer, Hải Châu, Đà Nẵng.
 Cơ sở 2: 07 Phan Chu Trinh, Hải Châu, Đà Nẵng.

Hình 1: Logo công ty mgm technology partners Vietnam
1.2. LỊCH SỬ PHÁT TRIỂN VÀ HÌNH THÀNH
Công ty được thành lập năm 1994 tại MunChen, Đức với số lượng nhân viên
chỉ vài người. Sau nhiều năm phát triển mạnh mẽ và nhanh chóng, hiện nay tổng số
nhân lực của công ty đã lên 573 nhân viên tại 14 địa điểm trên khắp thế giới.

Hình 2: Quá trình hình thành và phát triển của công ty mgm

4|Page


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

Chi nhánh công ty tại Việt Nam được thành lập và phát triển từ cuối năm 2015,

lấy trụ sở Đà Nẵng là làm chi nhánh công ty tại Việt Nam.
Sau 3 năm, nhân lực công ty đã tăng lên nhanh chóng từ vài người trong những
ngày đầu. Hiện này, tổng số nhân viên của công ty đã lên đến hơn 100 người.
Công ty chuyên về phát triển các ứng dụng web cho thương mại, bảo hiểm và
chính phủ điển tử trong 2 thập kỷ nay. Công ty có khả năng mở rộng cao, an toàn và
mạnh mẽ.
1.3. NHU CẦU NHÂN LỰC VÀ ĐỊNH HƯỚNG PHÁT TRIỂN
Công ty TNHH MTV mgm technology Viet Nam đang có nhu cầu nhân lực
rất cao. Hằng năm, công ty thường đăng tuyển hơn 20 bài đăng.
Các vị trí công ty thường xuyên tuyển dụng bao gồm
+ Kỹ sư lập trình (Java, React JS, JavaScrip, TypeScript,…)
+ DevOps
+ Kỹ sư bảo mật thông tin
+ QA
+ Kỹ sư phân tích nghiệp vụ
+…
CHƯƠNG 2: QUÁ TRÌNH THỰC TẬP TẠI CÔNG TY
2.1 NHIỆM VỤ ĐƯỢC GIAO
 Tìm hiểu về quy trình phát triển phần mềm
 Tìm hiểu về cách làm việc nhóm theo mô hình Agile

 Tìm hiểu về công cụ quản lý mã nguồn Git
 Tìm hiểu về ngôn ngữ lập trình JAVA
 Tìm hiểu về Framework Spring
 Tìm hiểu về ngôn ngữ lập trình JavaScript, TypeScrip
 Tìm hiểu về Framework React JS
5|Page


Báo cáo thực tập tốt nghiệp


CBHD: Anh Phan Văn Bình

 Xây dựng ứng dụng tính tiền trong hoạt các hoạt động vui chơi tập thể sử dụng
các công nghệ đã được tìm hiểu trước đó
2.2 CÁC CÔNG NGHỆ ĐÃ NGHIÊN CỨU
2.2.1 Công cụ quản lý mã nguồn Git

Hình 3: Các luồng xử lý của Git
Git là một hệ thống VCS (Version Control System) dùng để quản lý và kiểm tra
các phiên bản mã nguồn khác nhau trong quá trình phát triển mã nguồn.
Git ( /ɡɪt/) là phần mềm quản lý mã nguồn phân tán được phát triển bởi Linus
Torvalds vào năm 2005, ban đầu dành cho việc phát triển nhân Linux. Hiện nay, Git
trở thành một trong các phần mềm quản lý mã nguồn phổ biến nhất. Git là phần mềm
mã nguồn mở được phân phối theo giấy phép công cộng GPL2.
6|Page


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

Git có khả năng chạy trên nhiều hệ điều hành khác nhau như Linux, Windows, Mac
OSX...
 Thao tác với dữ liệu
- Toàn bộ thông tin dữ liệu đều được lưu trữ trên máy tính của user.
- User có thể làm việc mọi lúc mọi nơi kể cả trong môi trường không có internet.
- Các thao tác được thực hiện cục bộ.
 Tính toàn vẹn
- User có thể thử nghiệm thoải mái mà không lo sợ việc làm ảnh hưởng hoặc

thay đổi công việc của mình do các thay đổi đều được thêm vào CSDL của GIT.
- Thay đổi được tham chiếu bằng mã băm sử dụng mã hóa SHA-1.
 Chúng ta nên dùng git vì những lý do sau:
- Tiết kiệm thời gian
- Khôi phục khi gặp lỗi
- Làm việc offline
- Tạo ra những hoàn tác hữu ích
- Yên tâm
- Làm việc theo cách riêng của bản thân
- Không trộn lẫn các công việc
- Cộng đồng người dùng lớn
2.2.2 Tìm hiểu về ngôn ngữ lập trình JAVA
Ngôn ngữ lập trình Java ban đầu được phát triển bởi Sun Microsystems do
James Gosling khởi xướng và phát hành vào năm 1995 (Java 1.0 [J2SE]). Tính đến
thời điểm này (tháng 2/2015) phiên bản mới nhất của Java Standard Edition (JSE) là
8. Với ưu thế về đa nền tảng (multi platform) Java càng lúc càng được ứng dụng rộng
rãi trên nhiều thiết bị từ máy tính đến mobile và nhiều thiết bị phần cứng khác...

7|Page


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

Java là ngôn ngữ lập trình hướng đối tượng nên nó cũng có 4 đặc điểm chung
củacác ngôn ngữ hướng đối tượng

Hình 4: Các tính chất cơ bản của lập trình hướng đối tượng
 Tính trừu tượng (Abstraction): là tiến trình xác định và nhóm các thuộc

tính, các hành động liên quan đến một thực thể đặc thù, xét trong mối
tương quan với ứng dụng đang phát triển.
 Tính đa hình (Polymorphism): cho phép một phương thức có các tác
động khác nhau trên nhiều loại đối tượng khác nhau. Với tính đa hình,
nếu cùng một phương thức ứng dụng cho các đối tượng thuộc các lớp
khác nhau thì nó đưa đến những kết quả khác nhau. Bản chất của sự việc
chính là phương thức này bao gồm cùng một số lượng các tham số.
 Tính kế thừa (Inheritance): Điều này cho phép các đối tượng chia sẻ hay
mở rộng các đặc tính sẵn có mà không phải tiến hành định nghĩa lại.

8|Page


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

 Tính đóng gói (Encapsulation): là tiến trình che giấu việc thực thi những
chi tiết của một đối tượng đối với người sử dụng đối tượng ấy.
Bên cạnh đó Java còn có một số đặc tính khác:
 Độc lập nền (Write Once, Run Anywhere): Không giống như nhiều ngôn ngữ lập
trình khác như C và C ++, khi Java được biên dịch, nó không được biên dịch sang
mã máy cụ thể, mà thay vào đó là mã byte code chạy trên máy ảo Java (JVM).
Điều này đồng nghĩa với việc bất cứ thiết bị nào có cài đặt JVM sẽ có thể thực
thi được các chương trình Java.
 Đơn giản: học Java thật sự dễ hơn nhiều so với C/C++, nếu bạn đã quen với các
ngôn ngữ lập trình hướng đối tượng thì việc học Java sẽ dễ dàng hơn. Java trở
nên đơn giản hơn so với C/C++ do đã loại bỏ tính đa kế thừa và phép toán con
trỏ từ C/C++.
 Bảo mật: Java hỗ trợ bảo mật rất tốt bởi các thuật toán mã hóa như mã hóa một

chiều (one way hashing) hoặc mã hóa công cộng (public key)...
 Đa luồng: Với tính năng đa luồng Java có thể viết chương trình có thể thực thi
nhiều task cùng một lúc. Tính năng này thường được xử dụng rất nhiều trong lập
trình game.
 Linh hoạt: Java được xem là linh hoạt hơn C/C ++ vì nó được thiết kế để thích
ứng với nhiều môi trường phát triển.
2.2.3 Tìm hiểu về Framework Spring
a) EJB và Spring
Có thể nói rằng Spring Framework ra đời là nhờ sự thành công của EJB. EJB
(Enterprise JavaBeans) là một kiến trúc phát triển dành cho các ứng dụng doanh
nghiệp đòi hỏi tính mạnh mẽ và khả năng mở rộng cao. EJB là một thành phần quan
trọng của nền tảng Java EE. EJB được tạo ra bởi hai gã khổng lồ công nghệ là IBM
và Sun vào những năm cuối thập niên 90. Dưới sự phát triển của hai tập đoàn này,
EJB đã trở nên nặng nề hơn. Tiêu chuẩn EJB cũng nhanh chóng được thông qua. Sau

9|Page


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

tất cả, EJB được ca ngợi là giải pháp tốt nhất để xây dựng các ứng dụng phân tán
dành cho doanh nghiệp.
Nhưng rồi những chỉ trích về chi tiết kỹ thuật của EJB đã tăng nhanh còn hơn
sự nổi tiếng của nó. EJB là một framework lớn với độ phức tạp cao. Các nhà phát
triền khi làm việc với EJB đã nhận ra rằng nó không hoạt động như những gì nó đã
đề ra. EJB chỉ tuyệt vời trên bàn giấy, nhưng ra thực tế đó lại là một chuyện khác.
EJB vẫn được tiếp tục phát triển, dễ sử dụng hơn nhiều so với buổi ban đầu.
Nhưng những chỉ trích vẫn còn đó, nỗi thất vọng trong cộng đồng Java ngày càng

tăng lên, đòi hỏi cần có một giải pháp thay thế.
b) Sự ra đời của Spring
Vào năm 2002, Spring Framework phát hành phiên bản đầu tiên bởi Rod
Johnson. Việc xây dựng các ứng dụng doanh nghiệp trở nên đơn giản và dễ dàng hơn.
Rod Johnson đã cho xuất bản một cuốn sách được phổ biến rộng rãi có nhan đề "J2EE
Development without EJB". Điều này đã cho Spring Framework rất nhiều động lực
để thay thế EJB.
Theo đà phát triển đó, Spring đã trở thành framework mã nguồn mở phổ biến
nhất để xây dựng các ứng dụng doanh nghiệp. Cách tiếp cận thực tế ban đầu của Rod
Johnson tiếp tục được phát triển và hướng tới một bộ công cụ hoàn chỉnh dành cho
xây dựng các ứng dụng doanh nghiệp. Theo một số nguồn, trên 50% các ứng dụng
web Java hiện nay đang sử dụng Spring.
 Để ngăn chặn sự phức tạp trong phát triển các ứng dụng, Spring
Framework thường dựa trên các quan điểm như sau:
 Đơn giản hóa công việc phát triển thông qua việc sử dụng các POJO
(Plain Old Java Object)
 Nới lỏng ràng buộc giữa các thành phần thông qua việc sử dụng
Dependency Injection
 Giảm thiểu các mã boilerplate thông qua việc sử dụng template và aspect
...
10 | P a g e


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

c) Spring Core
Spring Core là thành phần cốt lõi của Spring Framework. Đây chính là nền tảng
để xây dựng nên các thành phần khác trong hệ sinh thái của Spring Framework.

Lược đồ dưới đây mô tả mối quan hệ giữa Spring Core với các thành phần khác
trong Spring Framework:

Hình 5: Mô hình các thành phần của Spring

d) Dependency Injection (DI)
Dependency Injection (có thể dịch tiêm các thành phần phụ thuộc) là một sức
mạnh nổi bật của Spring Framework. Trong các phiên bản gốc của EJB người ta
không thấy sự xuất hiện của Dependency Injection, nhưng có lẽ do nhận thấy sự thành
công từ Spring khi sử dụng Dependency Injection, các phiên bản EJB 3.x đã cung
cấp các annotation để thực hiện inject các dependency. Dependency Injection là một
mẫu thiết kế phần mềm mà các đối tượng phụ thuộc sẽ được inject vào một lớp nào

11 | P a g e


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

đó. Dependency Injection là một implementation cụ thể của khái niệm Inversion of
Control (đảo ngược điều khiển).
Ta sẽ có một ví dụ đơn giản về Dependency Injection như sau: Bạn có một web
controller có nhiệm vụ lưu thông tin gửi từ form của người dùng. Theo nguyên lý
Đơn trách nhiệm nói trên, bạn không muốn lớp controller tương tác với cơ sở dữ liệu.
Thay vào đó, bạn sẽ sử dụng một lớp service để làm công việc này. Như vậy,
controller của bạn sẽ chỉ phải xử lý dữ liệu của form (get form data, validate data, ...)
rồi gọi một phưong thức của lớp service được inject để lưu dữ liệu. Controller không
cần phải quan tâm hay lo lắng về kết nối cơ sở dữ liệu, pooling hay bảng nào sẽ được
update. Cũng như service không cần phải biết request có những thông tin gì.

e) Các dự án trong Spring Framework
Trên thực tế Spring Framework là một tập hợp của nhiều dự án con. Spring Core
như chúng ta đã tìm hiểu là nền tảng của các dự án trong Spring Framework. Một một
dự án sẽ đảm nhận một chức năng riêng trong việc xây dựng các ứng dụng doanh
nghiệp. Chúng ta sẽ cùng điểm qua các dự án lớn trong Spring.
 Spring MVC
Spring MVC được thiết kế dành cho việc xây dựng các ứng dụng nền tảng web.
Đây là một dự án chúng ta không thể bỏ qua khi xây dựng các ứng dụng Java web.
 Spring Data
Cung cấp một cách tiếp cận đúng đắn để truy cập dữ liệu từ cơ sở dữ liệu quan
hệ, phi quan hệ, map-reduce và thậm chí còn hơn thế nữa.
 Spring Security
Dự án này cung cấp các cơ chế xác thực (authentication) và phân quyền
(authorization) cho ứng dụng của bạn.
 Spring Boot
Spring Boot là một framework giúp chúng ta phát triển cũng như chạy ứng dụng
một cách nhanh chóng.

12 | P a g e


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

 Spring Batch
Dự án này giúp chúng ta dễ dàng tạo các lịch trình (scheduling) và tiến trình
(processing) cho các công việc xử lý theo mẻ (batch job).
 Spring Integration
Spring Integration là một implementation của Enterprise Integration Patterns

(EIP). Dự án này thiết kế một kiến trúc hướng thông điệp hỗ trợ việc tích hợp các hệ
thống bên ngoài.
2.2.4 Tìm hiểu về TypeScript
Typescript là một dự án mã nguồn mở được Microsoft phát triển, được xem là
một phiên bản nâng cao của Javascript.

Hình 6: Cách hoạt động của TypeScript
TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.
Vì sao lại được xem là phiên bản nâng cao của Javascript? Vì nó được bổ sung
những tùy chọn kiểu tĩnh và các lớp hướng đối tượng, nó bao hàm luôn
ES6(ECMAScript 6 2015) - phiên bản mới nhất của Javascript.
TypeScript thêm các namespace, class và module tùy chọn vào JavaScript.
TypeScript hỗ trợ các công cụ cho các ứng dụng JavaScript quy mô lớn cho bất kỳ
trình duyệt nào, cho bất kỳ máy chủ nào, trên bất kỳ hệ điều hành nào.
Với những lập trình viên đã quen với Javascript thì chắc hẳn các bạn cũng hiểu
được những khó khăn khi lập trình với nó.
Tính mở trong việc sử dụng biến gây khó khăn trong việc kiểm soát sự thay đổi,
cập nhật.

13 | P a g e


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

Các ứng dụng phức tạp đòi hỏi sử dụng rất nhiều file source, tách thành nhiều
thư mục riêng thì việc đảm bảo tính thống nhất sẽ mất rất nhiều công sức vì phải thao
tác bằng tay khá nhiều.
Về cơ bản thì Javascript có hổ trợ OOP nhưng khi áp dụng thì lại rất khó khăn

bởi cách triển khai code không hề đơn giản so với những ngôn ngữ bậc cao khác như
Java, C#, Ruby ...

Hình 7:Lý do sử dụng TypeScript
Ưu điểm của Typescript:
 Dễ dàng hơn trong phát triển các dự án lớn, được hỗ trợ bởi các Javascript
Framwork lớn.
 Hỗ trợ OOP mạnh: Hầu hết các cú pháp hướng đối tượng đều được hỗ
trợ bởi Typescript như kế thừa, đóng gói, constructor, abstract, interface,
implement, override...v.v

14 | P a g e


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

 Cách tổ chức code rõ ràng hơn bởi được hỗ trợ các kỹ thuật mới nhất và
hỗ trợ lập trình hướng đối tượng: Hỗ trợ cơ chế giúp kiến trúc hệ thống
code hướng module, hỗ trợ namespace, giúp xây dựng các hệ thống lớn
nơi mà nhiều dev có thể làm việc cùng nhau một cách dễ dàng hơn.
 Hỗ trợ các tính năng mới nhất của Javascript.
 Một lợi thế của Typescript nữa là mã nguồn mở vì vậy nó miễn phí và có
cộng đồng hỗ trợ rất lớn.
Typescript đang được sử dụng ở các Framwork Front-end phổ biến như
Angular 2, Ionic, React ... cũng như Nền tảng cho back-end như Node-js bởi những
ưu điểm của mình.
2.2.5 Tìm hiểu về Framwork React
2.2.5.1 React là gì ?

Giới thiệu qua là React được Jordan Walke viết ra lần đầu tiên. Sau đó được
sử dụng trên trang Newsfeed của Facebook (năm 2011) và Instagram (2012). Đến
05/2013 thì trở thành Open-source và được bảo hộ, phát triển bởi Facebook và
Instagram.
Ngay trên trang chủ của React ( đã nói rõ
React là một thư viện Javascript dùng để xây dựng giao diện người dùng.
Có 3 đặc điểm chính để nói về React đó là:
 Just the UI: Chỉ sử dụng React để xây dựng giao diện người dùng, hiểu
đơn giản thì trong mô hình MVC, React được coi như là phần V. Vì vậy
nếu bạn muốn xây dựng một trang web hoàn chỉnh thì không thể dùng
mỗi React được, mà nó cần thêm phần M và C nữa.
 Virtual DOM: công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng.
 Data Flow: React sử dụng luồng dữ liệu 1 chiều giúp kiểm soát dữ liệu
dễ dàng hơn.

15 | P a g e


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ liệu
của chúng thay đổi liên tục theo thời gian. Dữ liệu thay đổi thì hầu hết kèm theo sự
thay đổi về giao diện.
Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác
nhau và mỗi status lại có số like, share, comment liên tục thay đổi. Khi đó React sẽ
rất hữu ích để sử dụng.
2.2.5.2 Cấu trúc, thành phần trong React
Với những ai đã từng làm với AngularJS thì chắc đều biết đến về khái niệm

Separation of concerns, có thể hiểu đơn giản là chia các thành phần liên quan với
nhau ra làm nhiều phần. Ví dụ trong AngularJS nếu bạn có 1 Directive thì thường sẽ
được chia làm các file: js (xử lý các logic, điều hướng,..), css (chỉnh giao diện), html
(template của Directive) và đây được gọi là Template Language.
Những đặc điểm nổi bật của React:
 React không phải là Template Language
 Separation of Components : chia thành các component.
 Mọi thứ đều là JavaScript Component
 Sử dụng JSX
JSX = Javascript + XML
JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc
điểm:
 Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang
mã Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so
với một mã tương đương viết trực tiếp bằng Javascript.
 Safer: An toàn hơn. Ngược với Javascript, JSX là kiểu statically-typed
, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++. Vì
thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch. Ngoài ra,
nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt.
16 | P a g e


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

 Easier: Dễ dàng hơn. JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng
để cho các lập trình viên Javascripts có thể sử dụng
 Components trong React
Trong React sử dụng khái niệm Component. Mọi thứ trong React đều có thể

coi là Component. Việc này giúp cho React thực hiện tốt các nguyên tắc trong OOP
như:
- Composable: Đóng gói
- Reusable: Tái sử dụng
- Maintainable: dễ bảo trì
- Testable: dễ dàng cho test và fix bug.
Ví dụ: khung danh sách sản phẩm chẳng hạn.

Hình 8: Cấu trúc các component trong React
Trong ví dụ trên chúng ta sẽ chia khung danh sách sản phẩm là 1 component,
khung tìm kiếm là 1 component, các item sản phẩm là 1 component.

17 | P a g e


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

 Virtual DOM
Đây là công nghệ DOM ảo được React sử dụng nhằm tăng hiệu năng sử dụng,
tối ưu việc update UI khi có sự thay đổi về dữ liệu. Có thể hiểu Virtual DOM là một
bản sao của DOM. Khi ứng dụng hoạt động, các thay đổi trên DOM sẽ được tính toán
trước trên DOM ảo, phân tích và tối ưu sau đó mới update DOM. Việc này giúp cho
sự thay đổi trên DOM là hạn chế nhất có thể. Do đó tăng hiệu năng của ứng dụng.
 Data Flow

Hình 9: Luồng xử lý của React
React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều. Dữ liệu
được truyền từ parent đến child thông qua props. Luồng dữ liệu đơn giản giúp chúng

ta dễ dàng kiểm soát cũng như sửa lỗi.
 Flux
Flux là một kiến trúc phần mềm. Nó đã được Facebook sử dụng cùng với React
để xây dựng các ứng dụng web dành cho client.

18 | P a g e


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

CHƯƠNG 3: KẾT QUẢ THỰC HIỆN SẢN PHẦM
3.1 GIỚI THIỆU ĐỀ TÀI
Tên đề tài: Xây dựng ứng dụng chia tiền cho một nhóm thành viên tham gia
chung một động tập thể.
Phạm vi sử dụng: Sử dụng cho một nhóm người vừa phải, có mong muốn quản
lý thông tin chi tiêu của các thành viên trong nhóm, cũng như muốn nắm bắt thông
tin về số tiền mình phải trả cũng như mình được nhận lại sau hoạt động đó.
3.2 CÁC CHỨC NĂNG CHÍNH CỦA HỆ THỐNG
-Thêm mới hoạt động
- Quản lý thành viên của hoạt động đã xem:
+ Xem danh sách các thành viên trong một hoạt động
+ Chỉnh sửa thông tin của các thành viên
+ Xóa thành viên ra khỏi nhóm hoạt động
-

Quản lý chi tiêu các hoạt động của nhóm
+Thêm mới chi tiêu
+Sửa thông tin chi tiêu

+ Xóa thông tin chi tiêu

-

Xem thông tin tổng số tiền đã chi, trung bình số tiền của mỗi người cũng
như số dư, số nợ của từng thành viên trong nhóm

-

Xem thông tin về việc thanh toán các khoản nợ sau khi hoạt động kết thúc

3.3 YÊU CẦU PHI CHỨC NĂNG
19 | P a g e


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

-

Sử dụng các ngôn ngữ đã tìm hiểu để phát triển hệ thống

-

Sử dụng git để quản lý hệ thống mã nguồn mở

-

Sử dung Jirra để quản lý làm việc nhóm


-

Sử dụng Jenkin để build mã nguồn

-

Hệ thống chạy ổn định, chính xác và an toàn

-

Đáp ứng khối lượng thông tin lưu trử lớn

-

Thời gian xử lý, truy xuất dữ liệu của hệ thống ở mức chấp nhận được

3.4 MÔI TRƯỜNG CÀI ĐẶT
- Cài đặt môi trường làm việc với Java, Javascript
- Cài đặt git
- Cài đặt thư viện Spring, React

20 | P a g e


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

3.5 KẾT QUẢ ĐẠT ĐƯỢC


Hình 10: Trang chủ ứng dụng

21 | P a g e


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

Hình 11: Trang tạo hoạt động mới

Hình 12: Trang quản lý người dùng

Hình 13: Thêm thành viên cho hoạt động

22 | P a g e


Báo cáo thực tập tốt nghiệp

CBHD: Anh Phan Văn Bình

Hình 14: Trang thêm thông tin chi tiêu

Hình 15: Danh sách chi tiêu của một hoạt động

23 | P a g e