Khóa luận tốt nghiệp Công nghệ thông tin: Ứng dụng các công nghệ react native, react và spring boot trong kiến trúc microservices để xây dựng phần mềm quản lý bán hàng cho nhà hàng và dịch vụ đồ uống

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NÔNG LAM TP.HCM KHOA CÔNG NGHỆ THÔNG TINỨng dụng các công nghệ React Native, React và Spring Boot trong kiến trúc Microservices để xây dựng phần mềm

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NÔNG LAM TP.HCM KHOA CÔNG NGHỆ THÔNG TIN

Ứng dụng các công nghệ React Native, React và Spring Boot trong kiến trúc Microservices để xây dựng phần mềm quản lý bán hàng cho nhà hàng

và dịch vụ đồ uông.

Ngành : Công nghệ thông tin

Niên khóa : 2019 - 2023

Lớp : DHI9DTA

Sinh viên thực hiện : Nguyễn Lê Thành 19130206

Dương Thị Minh Như 19130163

TP HO CHÍ MINH, tháng 08 năm 2023

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC NÔNG LAM TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

Ứng dụng các công nghệ React Native, React va Spring Boot trong kiến trúc Microservices dé xây dựng phần mềm quản lý bán hàng cho nhà hàng và

dịch vụ đồ uông.

Giảng viên hướng dẫn: Sinh viên thực hiện:

ThS Phan Đình Long Nguyễn Lê Thành 19130206

Dương Thị Minh Như 19130163

TP HO CHÍ MINH, tháng 08 năm 2023

CÔNG TRÌNH HOÀN TAT TẠI TRƯỜNG ĐẠI HỌC NÔNG LÂM TP.HCM

Cán bộ hướng dẫn: ThS Phan Đình Long

Cán bộ phản biện: TS Nguyễn Thị Phương Trâm

Luận văn cử nhân được bảo vệ tai HỘI ĐỒNG CHAM LUẬN VAN CỬ NHÂNTRƯỜNG ĐẠI HỌC NÔNG LÂM TP.HCM ngày 8 tháng 09 năm 2023

Nhận xét của giảng viên hướng dẫn:

Nhận xét của giảng viên phản biện:

BỘ GIÁO DỤC VÀ ĐÀO TẠO CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

TRƯỜNG ĐH NÔNG LÂM TP.HCM Độc lập - Tự do - Hạnh phúc

NHIỆM VỤ LUẬN VĂN CỬ NHÂN

Họ tên sinh viên: NGUYEN LÊ THÀNH Giới tính: Nam

Ngày tháng năm sinh: 01/01/2001 Nơi sinh: Kon Tum

Chuyên ngành: Công nghệ thông tin Ngành: Công nghệ thông tin

Email: 19130206@st.hcmuaf.edu.vn

Họ tên sinh viên: DƯƠNG THỊ MINH NHƯ Giới tính: Nữ

Ngày tháng năm sinh: 01/09/2001 Nơi sinh: Ninh Thuận

Chuyên ngành: Công nghệ thông tin Ngành: Công nghệ thông tin

Email: 19130163(@st.hemuafedu.vn

L TEN ĐÈ TÀI: Ung dụng các công nghệ React Native, React và Spring Boot

trong kiến trúc Microservices để xây dựng phần mềm quản lý bán hàng cho

nhà hàng và dịch vụ đồ uống

Il NHIỆM VỤ VA NỘI DUNG

- Nhiệm vụ: Tìm hiểu React Native, React, Spring Boot, kiến trúc Microservices và

các công nghệ liên quan đề xây dựng hệ thống quản lý bán hàng trên các thiết bị di

động và Website.

- N6i dung: Tìm hiểu về các quy trình nghiệp vụ trong quản ly bán hàng, tìm hiểu vềcông nghệ back-end, công nghệ front-end, kiến trúc Microservices và các công

nghệ liên quan, phân tích và thiết kế hệ thống, triển khai phát triển phần mềm

Ill NGÀY GIAO NHIEM VU: 30/01/2023

IV NGÀY HOÀN THÀNH NHIEM VU: 08/09/2023

V HO VÀ TEN CAN BO HƯỚNG DAN: ThS Phan Dinh Long

CAN BO HƯỚNG DAN CAN BO PHAN BIEN KHOA CNTT

(Ky và ghi rõ ho tên) (Ký và ghi rõ họ tên) (Ký và ghi rõ họ tên)

LỜI CẢM ƠN

Lời nói đầu, chúng em xin gửi lời cảm on chân thành đến quý Thay, Cô Khoa Côngnghệ thông tin, Trường Đại học Nông Lâm Thành phố Hồ Chí Minh đã truyền dạy kiếnthức trong suốt thời gian học tập tại trường Đây là hành trang không thể thiếu giúp

chúng em hoàn thành khóa luận và tự tin lập nghiệp sau này.

Xin tỏ lòng biết ơn và gửi lời tri ân sâu sắc đến ThS Phan Đình Long đã luôn kiên

nhẫn, chỉ bảo, hướng dan chúng em trong suốt quá trình thực hiện khóa luận tốt nghiệp

Chúng con xin cảm ơn sâu sắc công on sinh thành, bao ban đặc biệt to lớn của cha

mẹ Cha mẹ là nguồn động lực khích lệ, ủng hộ mà chúng con đặc biệt khắc ghi.

Cam ơn quãng thời gian tươi đẹp ma chung em luôn tự hao, khi được học tập va sinh

hoạt tại lớp DH19DTA, Trường Đại học Nông Lâm Thành phố Hồ Chí Minh

Xin chân thành cảm ơn!

Nhóm thực hiện luận văn tốt nghiệp

Dương Thị Minh Như Nguyễn Lê Thành

DANH SÁCH CHỮ VIET TAT

STT | Ký hiệu chữ viết tắt Chữ viết đầy đủ

1 API Application Programming Interface

2 ID Ma dinh danh

3 IDE Integrated Development Environment

4 JDBC Java Database Connectivity

6 MVC Model View Controller

7 REST REpresentational State Transfer

8 SOAP Simple Object Access Protocol

9 SPA Single Page Application

10 |STT Số Thứ Tự

11 HTTP Hyper Text Transfer Protocol

12 gRPC google Remote Procedure Call

13 DDD Domain-Driven Design

14 ORM Object Relational Mapping

15 OXM Spring Object XML Mappers

16 XML eXtensible Markup Language

17 AOP Aspect Oriented Programming

18 JMS Java Message Service

19 JAXB Java Architecture for XML Binding

DANH MỤC CÁC BẢNG

Bảng 3.1: Danh sách những yêu cầu chức năng chính của ứng dụng đặt món, đặt bàn

CHOMOWOT QUIN ecco cee eerie Eee ee ate ene 49

Bảng 3.2: Danh sách những yêu cầu chức năng chính của ứng dụng quan lý bán hàngcho quản lý hệ thống và nhân viên 2- 2 22©22+2222E+EE£EE+2EE2EE2EE2EE2EE2Exrrrvrr 56

Bảng 5.3: Đặc tả Use Case Dang Dap wrsiescssssscscessssssssessesnssersavsemerssneseassoseonsmecroessreseens 71

Bảng 3.5: Đặc ta Use Case Đăng xuẤt - 2 22- 22222 21 22222212211221211211 211211 1e 71

Bang 3.6: Đặc ta Use Case Yêu cầu cấp lại mat khẩu - 2-2222 „3

Bảng 3.7: Đặc: tả Use Case Quản lý S10 HÃHỠ cácseeeeeeeeisaeseiesasbiageiiecrbissgitgstseksvsdggg0 72

Bảng 3.8: Đặc tả Use Case Xem sản phẩm -2-22-©22222222222E22EEE2EEEzEErzrrrerre 73

Bảng 3 LO" Dac ta Use Case Dat THÔI sesscssscas: saxcconssnens 1002003 05886335 kú536 ga S6AGI-S4GS4GGE555561633648S8 73 Bang 3 11: Dac ta Use Case Hủy đơn hang 2-5255 2252- S22 2csrrrrrerrrrree 74

Bang 3 12: Dac ta Use Case Quản lý người dùng - 5552555 c+<c+cscrsersee 74Bảng 3 13: Đặc ta Use Case Tư vấn khách hàng -2- 2+ 2275+cccczxccxce 75

Bảng 3 14: Đặc tả Use Case Yêu cầu tư vấn 2-©2¿222221222222122112212212222 xe 75

Bang Nhì 0808x101 ÔÖÔÖÔÖÔ 85

Bane 3.16: Mo ta lOp Cate Qty) sussooiedsbindiologiaiad8iskpli0030653503u080389Sl080383339013E3043ã8389120.giG30d8 86

Bang 3.17: MG (a dOp Ia G0 ses cccseasadnnswnad snmavscnsiawenesBinnsinssdinoninebinse ueiseahiornsensisnwesmeenalsunnawnendiod 86

Bang 3.19: M6 tả lớp MateFlAÌ‹:¡¡:::s:scissesssesisiasS011612016 116 1803636034156448048134/ 614836136855 88

Bảng 3.20: Mô tả lớp MaterialProduct cecceeeeeecceeseeeseeeececeeeceeeseneceseeeseeeseeeseeees 89

Bảng 3.21: M6 ta.lop MateFlalRSfẲffi‹ ‹-os-‹c-csscsceckiiit LAN Hà Cang S3 1v03008:6 006 1 D9850 89

Bang 3:25: Mo ta lop MaterlálSUDP HE x cossssessssnanrsvannveseananseneonsaneaweeneanaecanevaeneennvennnns 90

Bảng 3.24: Mo tả lớp imate crecsscues ceceeresenesneesnenenssamraro eer 90 Bang 3.26: M6 ta lop Rolle 111 92 Bảng 3:27: M6 1Ã TẾ Groupie ecessessecenezscussausessacunesise anpsnevesapeenaaeercmatecerememurer serene 92

Bang 3.28: Mô tả lớp User 222¿-222222222222111112222111122222111122222122 2e 92

Bare 29° NO, „ID: HÄĐT:psisctirgiiPtgtdg99914SIP(SEIEGUSIGSIGHEINLISDISGHGSURIGSGEEESEEELEESĐOJ20/S0000.4804ggđD384 94

Batt 3:30: M6 1l, |0: TA 6 esessssnnisssioiktsoiE413t.NSS0E9ESE020G193K HĐSSQHESHSSH.BEISGEEGBSNUHIGGTSIE4074955880) 94 Bảng 3.3 Mota lop Group lables sacs cere mason 94 Bang 3.32: Mô tả lớp PaySlipOrder eeceecescecesceceseeceseeseseeseeeeseeeeseeeeseeeeseeseeeeeees 96

Bang 3:33: M6 ta.lop PayS liplnvettlory:s:as0:s0-necamemanseneneun manners 97

Bảng 3.35: M6 ta lớp ReceIpfÏnV€TOTY ‹::‹:::sc-s‹;ssá-s66255560602560510516501616506560583L652.86E8S885E 98

Bang 4.1: Thông số cau hình các máy chủ của hệ thống -2- 22 22552: 111Bảng 4.2: Thông số cau hình các dich vụ trên máy chủ Microservices 112Bang 4.3: Thông số cau hình các dịch vụ trên máy chủ Keyeloak - - 114

Bảng 4.4: Thông số cấu hình các dịch vụ trên máy chủ Config-Server 114

DANH MỤC HÌNH ẢNH

Hình 2.1: Minh họa về kiến trúc MicrOS€rViCeS 2-5-5 St+ESEE2E2EEEE2EEEEEEEEEEErErrrrree 3

Hình 2.3: Logo của Spring FraI€WOF - - + + + *++x + s*srererrrrrrrrrrrrrrrerrerrke 10Hình 2 4: Tổng quan về kiến trúc của Spring Framework - 2-2255: 10Hình 2.5: Minh họa về API Gafeway -2- 222222222 22E22322212271221 22122122 crrvee 13Hình 2.6: Minh họa về cách hoạt dong cla: Eufelka:SGUVET bisos-sssssossssusissetbbtidsgdieiosg6csg88 14Hình 2.7: Logo của React Framework 6 S133 vn HT Hư nh 20

Hình 2.9: Hình ảnh minh họa về GraphQIL - 2 2 22 ©22+E+2z++zE+zxzzxzrxrxz 28

Hinh 2,10? L086:608 0G KG baenneBnnoiedttieboisgsiEIA380656508.1838101G859/0990880090003409890058080.g.s3gsmizz2 L

Hinh 311: Tông nan:về kiến trite Dialer se canh nhgg han gi.0 04350380 86000.6060130.00006 08 32

Hình 2.12: Kiến trúc Three-Layer hiện thực trong Spring Boot - 36Hình 2 13: Mô hình mẫu về kiến trúc Hexagonal -2-22- 5+ 5+©2++cxzxz 27

I0) 580u0uì:.06r 0n 40 Hinh:2.15: [Logo:cÚa I DBI ixcsececzác6 61115 04645154 886843444GE2X3S834QS3ã3 S84 Sg5E2140ESESGl42958563600L352 00g 41

Hình 2.17: Tổng quan về kiến trúc của Apache Kafka -2:©25+555c<e: 42i00: E009uì:8.{à 00) TT 43

Hinh 2.20: Logo ctta Grafana 0 44

Hình 2:21: Logo của ZTDPKHH secsecsssvensenerneseenenannrene ener 45

;0/1.8220/2-20s/.8,, 60/0088 e 46

Hình 3.1: Sơ đồ Use Case tông quan cho hệ thống - 22 222222222222222222+2 66

Hình 3.2: Sơ đồ chỉ tiết Use Case Đặt món - re 67Hình 3.3: Sơ đồ chi tiết Use Case Xem sản phẩm 2- 2 22 ©5222z+2z2zz22xz+2 67Hình 3.4: Sơ đồ chỉ tiết Use Case Quản lý giỏ hàng -22-©222222z+2cszsczzcee 67Hình 3.5: Sơ đồ chi tiết Use Case Đặt bản 222 S22S22E2EE2E225221211212322122 2e 68

Hình 3.6: Sơ đồ chi tiết Use Case Quản lý thông tin cá nhân -2- 2-2522 68

Hình 3.7: Sơ đồ chỉ tiết Use Case Quản lý đơn hàng 2 22-©222222z+ccvcze- 68

Hình 3.8: Sơ đồ chỉ tiết Use Case Quản lý người dùng - -: 5¿555+555c+: 69

Hình 3 9: Sơ đồ chỉ tiết Use Case Quản lý sản phẩm .2-5-52©7575c2+ 70

Hình 3.10: Sơ đồ chi tiết Use Case Quản lý nhập nguyên liệu -. - 70

Hình 3.11: So đỖ tuần tự chức năng Đăng ÏÝ cáoseneieeeedieeiodddioiediogssaepasoa, 76Hình 3.12: Sơ đồ tuần tự chức năng Đăng nhập - -2¿©-222++2z+zzz+zczxzez 77Hình 3.13: Sơ đồ tuần tự chức năng Quên mật khẩu - 2 2222222zz2222+- 77Hình 3.14: Sơ đồ tuần tự chức năng Thanh toán PayPal 2 ©2©55+2555z+2 78

Hình 3.15: Sơ đỗ tuần tự chức năng Đặt món 2-22 2¿22222222222E2EEzzrzrrcrer 78

Hình 3.16: Sơ đồ tuần tự chức năng Hủy đặt món -2- 22 2222zz2zzz+zzxz+2 79

Hình 3.17: Sơ đồ tuần tự chức năng Nhập kho - - 2¿©22¿22++22+v2z+zzzvsrrreee 79

Hình 3.18: Sơ đồ tuần tự chức năng Sửa người dùng -cc:+ccccsrcerceee 80Hình 3.19: Sơ đồ tuần tự chức năng Đặt bàn - 2©222222E22E22E222222222222222222e2 80Hình 3.20: Kiến trúc Hexagonal xây dung cho dich vụ đặt món - 81

Hình 3.21: Những interface dai diện cho Use Case của chức nang đặt mon 82

Hình 3.22: Những Use Case được nhóm thành bốn nhóm Service khác nhau 82

Hình 3.23: Port va Adapter trong chức năng đặt món eect +25 <<+<c+<c++ 83

Hình 3.24: Sơ đồ lớp tổng quan của product-S€TViCe - 2: 2¿+2s+2z2zz+2xzzzzzxczez 84Hình 3.25: Sơ đồ chỉ tiết Domain Layer của product-serVice : -:- +: 85

Hình 3.26: Sơ đồ lớp tông quan của inVenntOry-S€TVICe : 2-©22222+2z22+22zz2zzz 87

Hình 3.27: Sơ đồ chi tiết Domain Layer của inventOTy-S€TViCe -2 5+-555+: 88

Hình 3.28: Sơ đồ lớp tổng quan của uS€r-SeTViCe - ¿22 ©52+S2E22E2E22222222222222222 9]

Hình 3.29: Sơ đồ chỉ tiết Domain Layer của user-serVice -2 2¿52z22x>s2 91

Hình 3.30: Sơ đỗ lớp tong quan của order-SerViCe -2- 2 ©2222z+2222+22Ez2zzzzxrrxz 93

Hình 3.31: Sơ đồ chỉ tiết Domain Layer của order-SeTViCe - -2- ©2525: 93

Hình 3.32:Sơ đồ lớp tong quan của paymenf-service -2 22©2z+2z+2zz+cxze- 95

Hình 3.33: Sơ đồ chi tiết Domain Layer của paymenf-service -. -: 96

Hình 3.34: Sơ đồ cơ sở dữ liệu của product-service - -cc+cccccccccreerrceee 99

Hình 3.35: Sơ đồ cơ sở dữ liệu của uS€r-S€TVIC€ 2- 5-5222 E2E2E2EE212121121 22121 2e 99

Hình 3.36: Sơ đồ cơ sở đữ liệu của inventory-SerVice -¿2-s+2cccscrxsrrcee 100

Hình 3.37: Sơ đồ cơ sở dữ liệu của order-S€TVIC€ ¿52s SE E2 E22 ExzErrveg 100

Hình 3.38: Sơ đồ cơ sở dữ liệu của paymenf-serVice -2-cs©cz+cxzcczzersea 101

Hints 41: Rito tebe phần mm ting quan san nuaassosenotsovsggx64i0131006059000/06060340106060V613008 102

Hình 4.2: Mỗi dịch vụ kết nối đến một database ¡0007 105

Hình 4.3: Minh họa các dịch vụ giao tiếp với Eureka Server trong hệ thống ¬ 106

Hình 4.4: Hoạt động của Config Server trong hệ thống -2¿©52255225522 107Hình 4.5: Mô tả hoạt động của Keycloak trong hệ thống -225+: 109Hình 4.6: Tổng quan kiến trúc hệ thống 2¿©-2¿222EE+2EE+2EE22EE22EE222Ezzzzze 110Hình 4.7: Chi tiết các dịch vụ trên May Chu NMIIGFGSETVIGES gnevrrasesisisissksssssssessese 112

Hình 4.8: Chi tiết máy chủ Keycloak và các tương tác liên quan - 113

Hình 4 9: Chi tiết máy chủ Config-Server 2-©2222222222122222222121222Ezxsrev 114

Hình 5.1: Biểu đồ tổng doanh thu theo ngày của cửa hàng -5:-555- 117Hình 5.2: Biểu đồ top những sản phẩm bán chạy nhất theo ngày của hàng 118

Hình 5.3: Giao diện quản lý người dùng Keycloak - 555 < S25 <<+<c+ccersee 119

Hình 5.4: Giao diện chính của Eureka-SeTVer - 22255222221 122221222222 11222 xe2 119

tinh: 5.5» Giao điện:chính:của.7ZTDKÍN wicsssiciceiemncesniesreralteresnaltaven ves sinivneuivatsnoncsisunentns 120

TÓM TẮT

Hiện nay, công nghệ càng ngày càng phát triển, cho nên đối với các cửa hàng việc

sử dụng hệ thống quản lý bán hàng đóng một vai trò rất quan trọng, quyết định rấtnhiều đến thành công của cửa hàng Các hệ thống quan lý bán hàng hiện tại tiêu biểu

gồm có KiotViet, PopApp nhưng những hệ thống này thường phải đi kèm với thiết

bị và những chi phi lắp đặt và bảo trì lớn Vì vậy, đề tài “Ung dụng các công nghệReact Native, React và Spring Boot trong kiến trúc Microservices để xây dựng phanmềm quản lý bán hàng cho nhà hàng và dịch vụ đồ uống” đã được tiến hành nhằm xây

dựng một phần mềm quản lý bán hàng với chức năng vận hành và quản lý quy trình

hoạt động của toàn bộ cửa hàng trên chính thiết bị điện thoại, laptop cá nhân Sử dụngnhững công nghệ giúp tối ưu chỉ phí và tăng hiệu suất giúp cho cửa hàng hoạt động

nhanh chóng, én định và liên tục, thực hiện thu thập dữ liệu bán hàng và cho ra các

báo cáo hoạt động kinh doanh nhằm giúp chủ cửa hang có thông tin chính xác dé đưa

ra các quyết định kinh doanh tiếp theo

MỤC LỤC

TIỘN GHI ee ee a ere i

DANH SÁCH CHU VIET TAT 0 2 c.cssscsscsssessesesessesseessessesssesseesusssessesssessesssesseesseeneess 1

DANH MỤC CAC BẢNG - 2222 22212212212111211212121121110112121211211121 22 xe iiiDÁNH MỤC HĨNH AI scx can nencnsoousreavousoenieerimvennveonner aicsosssvisnuaiunns sesame nes v

IMO LG reese css re EE SR RU 1XCHƯƠNG 1 GIỚI THIỆU -2-22©225S222+2EE+EE+2EE£EE2EE2EEEEE2EEEEEzEEerxrzrrerxee 1

2.1.3 So sánh kiến trúc Microservices và kiến trúc nguyên khối (Monolithic) 62.1.4 So sánh kiến trúc Microservices và kiến trúc hướng dịch vụ (SOA - Service-

2.1.5 Những khó khăn khi triển khai Microservices 0 0cccccscescessesssesseestesseeetessees 92.1.6 Kết luận về MicrOS€TViCe 5-52-2222 221222212212112122121121212112111211 21 xe 9

2.2.1 _ Giới thiệu về Spring Framework -2-2222+22222++2E+2EE22E222222Ezzzcrxres 92.2.2 Kiến trúc tông quan của Spring Framework -+©c-++cxesrrvceee 10

2A, Sprite CLOW sessssaseeeeddetdetsdrteottotRdESbDEEiDV0SOEASSOISEHHEHSARESHGSSHESHEMGESHENE-EBAENSĐERSEES 12 222A, Sprite HoO0s»swnesesaruetaoirbueiooidiiinttittSEiÔVEIIEEGHERDSASEEERGKEHIAOESaUGSQERESgAN 15

Một số thành phan khác của Spring Framework 22-25525522: 17

Những tinh năng nổi bật khi sử dụng Spring Framework - 18Những khó khăn khi tiếp cận Spring Framework - 2-2-2 22522552 18Kết luận về Spring Framework 2-22 2222+2E+2EE22E+2EE2ZE22EE22Ezrrerxees 19

Giới thiệu về React FrameWOFK - 2+ s+2s+Sx+ESEESEE2EE7EEEE2 71221217122 re 20

RACE LH 1665165616: 6080645 seaisnstnnwa GÒ6/668-gg 636 sma naaisnsinsta sua an'sngi’ ta Sea ase ses L635663083506-đ05 G0 2ES0 21 Reset NatiVerccemereen eee ee ee 23

Redux Saga — thư viện quan ly tác vụ bat đồng bộ trong React JS va React

Kết luận về GraphQL 2: 2£ 2£ ©2E+SE++EEE2EEEEEEEEEEESEEEEEEESEEerkrsrrrrrev 31

[Dio KẾT tong tuntdihstitobtiiDiS0NN03G0S10G108360361730/3030888018310043808210Q1GB7403ã30I005384000081011308 800800818404 31

Téng quan vé Docker scccscssesssessesssesssssssssscsuessecsssssecsscasecsecsuessecsusssecseeaseesees 31Kién tric cla Docker ó5 32

So sánh Docker và Virtual Machine «.sc.c.ssssessessssssssssssseessssssnesssvasevesvnevseaversvace 33

Đặc điểm khiến Docker tương thích với Mieroservices - 3Š+ dị ch 9 35

f1: à.-95i , 0A 35Giới thiệu về Hexagonal - 2 ¿©5¿+222E22E22E22E22E22E225225223223222222222222xe2 35

2.6.2 Những van dé của kiến trúc Three-Layer truyền thống - 362.6.3 Những thành phan trong Hexagonal -2 22©2222sz2zzzssrsescvsrsezsc-cx+37

2.6.4 Các nguyên tắc quan trọng trong kiến trúc Hexagonal - 39

Dlele Gtadlé= DEPEndenCY iriAHABEHGIEsseessaieoenssesosensessmasseestissseossrssemsi 40 2.7.2 UDB — Ô 4] Dhl, SERB us«.sb6stekhssesbskdsgimtrtesns6BikSfniSZfonegbflsoddedibijnSiiaEgHfftsranliaauMsgiutsadtdnkduuzs2lt3gia,Z.4nu8gues4iasi 41 2.7.4 Kafka - Distributed event sfrearm1ng 5 225 2+2 * +22 +zt+zerrreeereeezee 42

2.7.6 Prommetheus na 44 Dible “GRUAMN Ace ccassspercesp erence EEN Oa ERR 44

hi eBa 21D KH sousrsmiddndmindtdidiEEEESINSS0SS20009100080.04808405H988NGSESSEWEEDDSSEOHSSOMERHSSVOOGRSSSUEGHQGWSENBSĐEDESSHRI 45 Del, NIYNllywassaaaoaanarnosotBIOOSIODSCOEEOOSEEOUEESIOERRCEOSdOEHeSÔvriasnlgrtaneoesmmmad 46

CHƯƠNG 3 PHAN TÍCH VA THIET KE HE THỒNG -2- 2 22 222255254 473.1 _ Bài toán và yêu cầu -2-©22+22222222122211222112221271122212711 22122 e 47

„la; - GHI HIẾU,Ba fÖãÏunsssssennditrdinioiiobioDEIGARIIHSAMINGSSEROASEEHSIRSESGGSEHEHEGHEIAMH0860/2S0888 47

CN “YEndtRHiMÏBseeeeseeeseseneeetnbeonieodieidedirnikrSimeestiegtiesslesnibdrsgiinpteei 48

%Ã 0g 5 49

3.2.1 Ứng dụng đặt món, đặt bàn cho người đùng 2- 2-52 +z2+zs+zcxzc+2 493.2.2 Ứng dụng quản lý bán hang cho quản lý hệ thống và nhân viên 56

23 ‘Wool die nieces 63

SA USC CASE Dia StI cncccenccsssse.nsaanansasntsstncne sharsosanhsbe casnestmesesssmnanassea.idendennosdcantansssee 66

3.4.1 Sơ đã tỔnE QUA ccssvcersissessarenannuernearcerernccnnararsasenenearmmavenmnantmenaneninianonied 66

3.4.2 So đồ chỉ tiết Use Case Sen 101010100 cerceg 66

3.4.3 Dac ta Use U 5 70

35 - QGWUHEHSEILOIHETHHLuisdeenddddoisineiiddidasrdiiieoiSSSSESEOGOHSESIGSBGGSĐ1S0838508008E8860938B80 76

3.6, CIASS DIA STARE seuosssesxaraesndtosdioviuretitdiriiiBOidOVGIHUYEILOGSEISEBOIHGHAGOSVRSEVMGGLSAE90300Ô8B 81

3.6.1 Áp dung Hexagonal trong các dich vụ của hệ thống -5 - 8136.2 CrlASS:điagtaiicla TUTTE CICK VU oncinecronricnninenionsnomtoieaivenitiinncnauenumnennom iia 84

3.22; Dich VU THANH UGAxseseebeeesbisdoniioiaddaioibiOAIHIDOEEIHOSSRSSEEES43S94ESPOHDsSEĐtBESA 101

CHƯƠNG 4 KIÊN TRÚC TONG THE CUA HỆ THỒNG - - 1024.1 _ Kiến trúc phần mềm -2 2222+2EE+2EE22E1222122112211221227122712221 222cc 102

4.1.1 Tổng quan kiến trúc phần mềm - 2-2 ©22222+2E++2E++2E++2E+zzE+zzxzzzze2 102

4.1.2 Mỗi dich vụ lưu trữ dữ liệu ở một database riêng biệt - 1054.1.3 Sử dụng Eureka Server định danh cho các dịch vụ -. - 106

4.1.4 Sử dụng Config Server quản lý cấu hình các dịch vụ - - 1074.1.5 Áp dụng OAuth2.0 bảo mật và ủy quyền tới các dịch vụ trong hệ thống fees 108

175, ery trũa HỆ HỦNNEiseeeeeesemnesdeoetedireesdesndedebdrtienovetesgirfskenpirfdernilsrde 110

4.2.1 Tổng quan kiến trúc hệ thống - -2- 222 2++22++E+++£+++2+++zzzzzxr+zsez 110

ADA, May chữ Config-Senetivncssuscmcmeucnuy nomen ern eTTIT 114

CHUONG 5 KET QUA DAT DUOC coccecesceccscssssessesssssescesescsessssssesisseseeeeseneseees 115

5.1 Kết quả dat được 52-2222222222221222122122112112212112212122 xe 115

ee 1155.1.2 Về thái G6 eee cececccccccssesssssessssuesssessssesssssesssessesssississiteassississiessesissiseaeeeseseeees 116S12 LS Hùeseeeeeeneseshenndtiennritiiehsrhoinhdinkiogtohdiuddiahgtoigg8.00218510368Jn040,06E 116

5.2 Những điểm mạnh của đề tài - 2 2©222222222EE2EE22122122122122122122122222xe2 1205.3 Những hạn chế của đề tài -2-22222222221221221221221221221221221 22122 erxe 121

eee eee 126

CHƯƠNG 1

GIỚI THIỆU1.1 Đặt vấn đề

Trong thời đại mà khoa học công nghệ phát triển mạnh mẽ như hiện nay, Việt Nam

đã có những bước tiễn hội nhập vào dòng chảy của khoa học và công nghệ tiên tiến trên

thé giới Một trong những lĩnh vực quan trọng và phát triển mạnh mẽ là công nghệ thông

tin, đóng vai trò quan trọng trong các ngành khoa học công nghệ và ảnh hưởng đến tất

cả các khía cạnh trong đời sông xã hội cũng như các công tác tổ chức quản lý

Trong lĩnh vực quản lý, công nghệ thông tin đã được ứng dụng rộng rãi và góp phần

tạo nên sự khoa học, chính xác và hiệu quả trong công việc của các nhà quản lý Các

công ty, tổ chức và cơ quan đều muốn áp dụng công nghệ thông tin vào hoạt động của

minh dé nâng cao hiệu qua và tăng cường quản lý

Với sự phat triển của các công ty trong các lĩnh vực sản xuất, kinh đoanh và dịch

vụ, quy mô của chúng ngày càng lớn Quá trình sản xuất và bán hàng diễn ra qua nhiềukhâu và công đoạn khác nhau Số lượng hàng hóa sản xuất và khách hàng sử dụng ngày

càng tăng lên Điều này khiến cho công tác quản lý phức tạp hơn Do đó, việc áp dụng

công nghệ thông tin trong công việc quản lý trở thành một nhu cầu thiết yếu và quan

trọng đối với các công ty

Một trong những thách thức trong quản lý là việc lưu trữ và tra cứu thông tin hóa

đơn Khi có nhiều cơ sở và hàng ngày phải viết nhiều hóa đơn, việc lưu trữ và tìm kiếm

các hóa đơn này có thé tốn nhiều thời gian và đôi khi gặp khó khăn Thống kê và báo

cáo hàng tháng hoặc hàng năm cũng trở nên khó khăn khi số lượng hóa đơn bán hàngngày càng tăng Việc lặp đi lặp lại quá nhiều lần gây khó khăn cho người quản lý trongviệc lưu trữ và quản lý thông tin.

Do đó, công tác quản lý bán hàng đóng vai trò quan trọng trong mọi cửa hàng Đểnâng cao hiệu quả, cần phát triển và hoàn thiện quản lý bán hàng dé đáp ứng với thực tế

của từng cửa hàng Hiện nay, có nhiều hệ thống quản lý bán hàng tiêu biêu như KiotViet,PopApp, Tuy nhiên, những hệ thống này thường đòi hỏi sự kết hợp với các thiết bịđặc biệt và chi phi lắp đặt, bảo trì cao

Với mục tiêu giảm thiểu chỉ phí, tăng hiệu suất hoạt động, dễ dàng bảo trì và dễ

dàng mở rộng chúng em muôn xây dựng một phân mêm quản lý bán hàng với chức năng

vận hành và quản lý toàn bộ quy trình hoạt động của cửa hàng trên chính thiết bị điện

thoại di động và máy tính cá nhân Phần mềm giúp cửa hàng thu thập dữ liệu bán hàng

một cách tự động, liên tục từ việc quản lý hàng hóa, quản lý khách hàng đến việc quản

lý doanh thu và lợi nhuận Từ đó cửa hàng tiết kiệm được thời gian và công sức, tăngcường độ chính xác, giảm thiểu sai sót Người chủ cửa hàng sẽ có cái nhìn rõ ràng về

hiệu suất kinh doanh, xu hướng tiêu dùng, và các chỉ số quan trọng khác, giúp đưa ra

những quyết định kinh doanh thông minh, tối ưu hóa chiến lược và định hướng pháttriển tiếp theo

Chúng em tin rằng việc áp dụng công nghệ thông tin vào quản lý bán hàng là một

bước cần thiết dé cải thiện hiệu suất và thành công của cửa hang trong thị trường cạnhtranh ngày này, đó cũng là lý do nhóm em quyết định chọn đề tài “Ứng dụng các công

nghệ React Native, React va Spring Boot trong kiến trúc Microservices dé xây dựng

phần mềm quan lý ban hàng cho nha hàng và dich vụ đồ uống" cho khóa luận của nhóm

1.2 Mục tiêu

Nghiên cứu nắm vững quy trình bán hàng, nhập hàng, quản lý thông tin

Nghiên cứu các công cụ, nền tang lập trình được sử dụng dé xây dựng hệ thống như

là React Native, React, Spring Boot và kiến trúc Microservices

Xây dung phần mềm quan ly bán hàng trên các nền tang mobile, tablet và website,

quản lý được hầu hết các thông tin và xử lý các quy trình nghiệp vụ trong quy trình quản

lý bán hàng như là quản lý thông tin sản phẩm, quản lý khách hàng, xử lý đặt bàn, đặt

món, đặt đồ uống, xuất ra các thống kê, báo cáo dưới dang số liệu tổng hợp, đồ thị trực

quan nhằm giúp chủ cửa hàng có thể nắm bắt được tình hình kinh doanh và đứa ra cácquyết định đúng đắn nhất

1.3 Đối tượng nghiên cứu

Cơ chế, cách thức hoạt động của các nghiệp vụ bán hàng, nhập hàng, quản lý thôngtin của các cửa hàng đồ ăn và dịch vụ đồ uống

Tìm hiểu về các công nghệ phía Back-End, bao gồm ngôn ngữ lập trình Java, Spring

Boot, Spring Security, Spring Cloud, MySQL, kiến trúc Microservices

Tìm hiểu về các công nghệ phía Front-End, bao gồm HTML, CSS, JavaScript,

TypeScript, React, React Native, Redux Saga.

Tìm hiểu một số công nghệ phụ trợ khác để việc lập trình, quản lý code, quản lý hệ

thong trở nên dé dàng va thuận tiện hơn, bao gồm Docker, Docker compose, Gradle,

Keycloak, Zipkin, Prometheus, Grafana.

1.4 Pham vi nghiên cứu

Tập chung nghiên cứu và xây dựng hệ thống quản lý bán hàng cho doanh nghiệp

kinh doanh dịch vụ nhà hàng và đồ uống, không thực hiện cho các ngành khác.

Thời gian nghiên cứu: 30/01/2023 - 08/09/2023

CHƯƠNG 2

TỎNG QUAN CÔNG NGHỆ2.1 Tổng quan về Microservices

2.1.1 Giới thiệu về Microservices

Microservice là một kỹ thuật phát triển phần mềm, là một biến thể của kiến trúc

hướng dịch vụ (SOA - xuất hiện trong những năm 1990) SOA tập trung vào việc chiaứng dụng thành các dịch vụ nhỏ và độc lập, nhằm tạo sự linh hoạt và tái sử dụng trong

phát triển phần mềm Tuy nhiên, SOA thường gặp khó khăn trong việc triển khai thực

tế do sự phức tạp của các dịch vụ lớn và sự phụ thuộc mạnh mẽ giữa các dịch vụ Bắtđầu vào khoảng giữa những năm 2000, một số công ty công nghệ lớn như Amazon,

Netflix và Twitter đã bắt đầu áp dụng kiến trúc microservice để tăng cường tính mở

rộng, khả năng module và triển khai liên tục trong hệ thong của ho Việc triển khai thànhcông của những công ty này đã thu hút sự quan tâm và lan rộng kiến trúc microservicesang các lĩnh vực phát triển phần mềm khác Đến những năm 2010, kiến trúc

microservice đã trở nên phổ biến và trở thành một trong những phong cách kiến trúc

phô biến trong công nghiệp phát triển phan mềm Các công ty và tổ chức phát trién phầnmềm khắp thé giới đã bắt đầu chuyền từ kiến trúc monolithic truyền thống sang kiến

trúc microservice đề tận dụng các lợi ích vượt trội của kiến trúc này trong việc xây dựng

các ứng dụng phức tap và linh hoạt Cho đến hiện nay, kiến trúc microservice tiếp tụcphát triển và tiến xa hơn trong việc tạo ra các hệ thống phần mềm phức tạp, đáp ứngnhanh chóng và hiệu quả yêu cầu của thị trường và người đùng

Trong kiến trúc microservices, các logic ứng dụng được phân chia thành các phần

riêng biệt, được gọi là các microservices Thay vì phải hiện thực tat cả các logic ứngdụng trong một ứng dụng nguyên khối (monolithic application), mỗi microservice độclập triển khai một phần cụ thể của ứng dụng hoặc một khả năng kinh doanh Các

microservices có thê được viết bằng nhiều ngôn ngữ lập trình và được triển khai và mở

rộng độc lập với nhau Mỗi microservice hoạt động như một ứng dụng con độc lập, có

khả năng giao tiếp với các microservices khác thông qua các giao thức giao tiếp nhẹnhàng như HTTP, RPC hoặc các hang đợi tin nhắn Việc phân chia ứng dụng thành các

microservices độc lập giúp cải thiện tính module và tách biệt các chức năng, ø1úp ứng

dụng dễ hiéu, phát triển, kiểm thử và duy trì

(Nguồn: https://microservices.io/i/Microservice Architecture.png)2.1.2 Những đặc trưng của Microservices

Phân chia thành các dịch vụ độc lập (Decoupling): Kiến trúc Microservices chia

ứng dụng thành các dịch vụ nhỏ hơn và độc lập nhau, mỗi dịch vụ triển khai một phần

cụ thể của ứng dụng hoặc một phần riêng biệt trong lĩnh vực kinh doanh

Tach biệt các chức năng: Mỗi microservices thực hiện một chức năng cụ thể, đảm

bao tính tách biệt giữa các chức năng và giúp dé dang quản ly và phát triển từng phần

riêng biệt

Giao tiếp thông qua các giao thức có tính loose coupling cao: Các microservices

giao tiếp thông qua các giao thức như HTTP, gRPC, hoặc các hàng đợi tin nhắn

(Message Queue) giúp giảm sự phụ thuộc và tăng tính linh hoạt giữa các thành phần.Khả năng mở rộng dễ dàng: Các microservices có thể mở rộng một cách độc lập,cho phép tăng cường hiệu suất và đáp ứng điều kiện tải cao cho các dịch vụ riêng biệt

mà không ảnh hưởng đến toàn bộ hệ thống

Quản lý và duy trì dễ dàng: Việc chia ra làm các dịch vụ riêng biệt giúpmicroservices trở nên dé dang quản lý và bảo trì hơn Nếu cần thay đổi hoặc cập nhật

một tính năng cụ thể, chỉ cần tập trung vào dịch vụ liên quan mà không cần ảnh hưởngđến các dịch vụ khác

Viết bằng nhiều ngôn ngữ lập trình và các công nghệ khác nhau: Các dịch vụ

microservices có thé được viết bằng nhiều ngôn ngữ lập trình và sử dụng các công nghệ

khác nhau, giúp cho việc lựa chọn công nghệ phù hợp nhất cho từng dịch vụ, tối ưu hóahiệu suất và linh hoạt trong việc phát triển Ngoài ra, các dịch vụ của microservices còncho phép tích hợp các dịch vụ và hệ thống từ các nhà cung cấp bên thứ ba một cách dễ

dàng, giúp mở rộng tính năng của ứng dụng mà không ảnh hưởng đến các dịch vụ khác

Tương thích với mô hình phát triển phần mềm Agile: Microservices cho phépđội ngũ phát triển phần mềm chia ra làm các nhóm nhỏ phát triển và triển khai các dịch

vụ của họ một cách độc lập, giúp tăng tốc độ phát triển và giảm thời gian đưa sản phẩm

ra thị trường.

Phân phối và triển khai liên tục (CI CD - Continuous Integration vàContinuous Delivery): Kiến trúc microservices hỗ trợ việc triển khai các dich vụ độclập với nhau, cho phép các nhóm phát triển có thê phân phối và triển khai các phiên bảnmới một cách độc lập và đồng thời

2.1.3 So sánh kiến trúc Microservices và kiến trúc nguyên khối (Monolithic)

Micro-service Micro-service Micro-service Micro-service

©® @ @ ©® @®

©® @ © ọ @

@ ©® © © ©

Data Base Data Base Data Base Data Base Data Base

Hinh 2.2: So sanh gitta Monolithic va Microservices

(Nguon:

https:/www.openlegacy.com/hs-fs/hubfs/Picturel.webp?width=889 &height=478 &name=Picturel.webp)

Microservices va Monolithic là hai phong cách kiên trúc phát triên phân mém có nhiêu

sự khác biệt quan trọng:

s* Tính tách biệt về bản chat (Concern by nature):

Microservices: Microservices phân chia ứng dụng thành các dịch vụ độc lập với

nhau, mỗi dịch vụ đảm nhận một phần của logic ứng dụng Nhờ vậy mà tạo ra tính tách

biệt về bản chất giữa các dich vụ, giúp dé dàng quản lý, phát triển và triển khai từngdịch vụ một cách độc lập.

Monolithic: Monolithic là kiểu kiến trúc truyền thống, toàn bộ ứng dụng được hiện

thực trong một khối duy nhất Vậy nên làm cho các phần của ứng dụng chịu sự phụthuộc chặt chẽ vào nhau, khiến việc phát triển và triển khai trở nên phức tạp hơn

* Tính linh hoạt và khả năng phát triển độc lập:

Microservices: Mỗi dich vụ trong kiến trúc microservices có thé được phát triển

bằng các công nghệ và công cụ khác nhau Ví dụ, một dịch vụ có thể sử dụng ngôn ngữ

lập trình Java, trong khi dịch vụ khác sử dụng Node.Js Từ đó cho phép các nhóm phát

triển tận dụng những công nghệ mà họ có kiến thức và kỹ năng chuyên sâu

Monolithic: Trong kién tric monolithic, toàn bộ ứng dụng phải sử dụng cùng một

ngôn ngữ lập trình, công nghệ và quy ước do vậy có thể gây nên hạn chế sự linh hoạt và

sự đa dang trong việc phát triển và triển khai ứng dụng

* Khả năng mở rộng và triển khai:

Microservices: Microservices hỗ trợ phân phối và triển khai liên tục, cho phép ứng

dụng mở rộng dễ dàng bằng cách triển khai thêm các dịch vụ mới khi cần thiết, giúp ứng

dụng linh hoạt và đáp ứng tốt hơn với điều kiện trong môi trường tải cao

Monolithic: Trong monolithic, việc mở rộng quy mô toàn bộ ứng dụng gây nhiềukhó khăn do sự kết hợp mạnh mẽ giữa các thành phần Việc thêm chức năng mới thườngyêu cầu phải triển khai lại toàn bộ ứng dụng, hơn nữa có thể dẫn đến việc lãng phí tài

nguyên và không hiệu quả.

+* Tinh tích hop và khả năng tái sử dụng:

Microservices: Microservices giúp ngăn chặn sự phụ thuộc vào một nhà cung cấpdich vụ, ngôn ngữ lập trình hay framework cụ thể Nhờ vậy giúp tránh tinh trạng bị khóavào một nhà cung cấp cụ thể và tạo điều kiện thuận lợi cho tái sử dụng dịch vụ giữa cácứng dụng khác nhau.

Monolithic: Trong monolithic, sự phụ thuộc chặt chẽ vào một ngôn ngữ, framework

hay nhà cung cấp có thê dẫn đến sự khó khăn trong việc tái sử dụng các thành phần giữa

các ứng dụng khác nhau.

2.1.4 So sánh kiến trúc Microservices và kiến trúc hướng dich vụ (SOA -

Service-Oriented Architecture)

Những điểm khác biệt quan trọng giữa hai kiến trúc bao gồm:

s* Quy mô và phạm vi:

Microservices tập trung vào chia nhỏ ứng dụng thành các dich vụ nhỏ lẻ và độc lập.

Mỗi dịch vụ tập trung vào một chức năng cụ thé và có thé được phát triển, triển khai, và

quản lý độc lập nhau Chúng có khả năng mở rộng dé dàng và có thé sử dung các công

nghệ khác nhau cho từng dịch vụ.

SOA bên cạnh việc chia nhỏ các dịch vụ, còn nhấn mạnh việc phân tách các chứcnăng kinh doanh thành các dịch vụ độc lập, nhưng các dịch vụ này có thể phụ thuộc vàonhau và chia sẻ dit liệu thông qua giao thức tang ứng dụng như SOAP hoặc REST SOAthường được triển khai trong môi trường doanh nghiệp lớn hơn, có quy mô phức tạp hơn

và chịu sự quản lý tập trung hơn.

s* Tương tác giữa các dịch vụ:

Microservices thường sử dung cơ chế giao tiếp qua mạng như gRPC hoặc RESTful

API để giao tiếp với nhau Sự tương tác giữa các dịch vụ trong kiến trúc microservicesthường là bất đồng bộ, giúp giảm thiểu sự phụ thuộc và tăng tính linh hoạt của hệ thống.SOA thường sử dụng các giao thức giao tiếp đồng bộ truyền thống như SOAP hayXML-RPC, điều này đôi khi làm giảm tính linh hoạt của hệ thống và tạo ra sự phụ thuộcgiữa các dịch vụ.

* Độ phức tạp trong triển khai:

Microservices có thé phức tạp hon so với SOA do yêu cầu phải quản lý nhiều dich

vụ độc lập nhau Việc phân tách dịch vụ nhỏ và quản lý chúng có thé đòi hỏi sự phối

hợp và quản lý chặt chẽ hơn.

SOA có thé đơn giản hơn trong việc triển khai vì các dịch vụ có thể phụ thuộc vào

nhau và được quan lý theo một phạm vi tông thé hơn

s* Muc tiêu và ứng dụng:

Microservices thường được sử dụng trong các ứng dụng có tính mở rộng cao, cần

tích hợp các công nghệ mới và chịu sự biên đôi nhanh chóng.

SOA thường được sử dung trong các doanh nghiệp lớn, có nhu cầu tích hợp các ứng

dụng và dịch vụ có sẵn trong hệ thống doanh nghiệp

2.1.5 Những khó khăn khi triển khai Microservices

Sự phức tạp trong quản lý và điều hành: Khi chia nhỏ ứng dụng thành nhiều

service, có thể dẫn đến sự phức tạp về quản lý và điều hành Số lượng service tăng lên

và có thé trở nên khó kiểm soát, đặc biệt khi phải xử lý các sự phụ thuộc giữa các service.Tăng chi phí giao tiếp: Với kiến trúc Microservices, giao tiếp giữa các service

phải thông qua mạng, điều nay có thé tăng chi phí giao tiếp và ảnh hưởng đến hiệusuất của hệ thống

Triển khai phức tạp hơn: Triển khai và quản lý các service đòi hỏi sự phối hợp và

quản lý khá phức tạp và phải đảm bảo rằng các service hoạt động một cách đồng nhất

và tương tác tốt với nhau

2.1.6 Kết luận về Microservices

Microservices mang lai tính linh hoạt, khả năng phát triển và triển khai độc lập, cũng

như tích hợp và khả năng tái sử dụng tốt hơn so với kiến trúc monolithic Tuy nhiên,việc triển khai microservices có thé đòi hỏi quản lý và phát triển phức tạp hơn so với

monolithic, do sự tách biệt và đa dạng của các dịch vụ Trong đề tài này, hệ thong ap

dụng kiến trúc Microservice dé xây dựng hệ thống quan lý ban hang, có kha năng mởrộng cao, đồng thời tích hợp nhiều công cu quản lý hệ thống và công cụ DevOps giúp

quản lý và giám sát các dịch vụ trong hệ thống một cách trực quan và hiệu quả, đồng

thời cũng đảm bảo tinh ôn định của hệ thống

2.2 Spring Framework

2.2.1 Giới thiệu về Spring Framework

Spring Framework được đặt nền móng bởi Rob Johnson vào năm 2003 và đã nhanhchóng trở thành một trong những framework phát triển phần mềm Java phổ biến nhất.Giúp giảm đáng kể thời gian và công sức lập trình thông qua các thành phan tái sử dung,

đảm bảo ứng dụng dễ duy trình và mở rộng

Là một mô hình phát triển ứng dụng phô biến trong lĩnh vực phát triển phan mềm

Java, cung cấp một hệ thống cơ sở hạ tang phong phú dé xây dựng các ứng dụng haymay chủ ứng dung Tập chung vào giải quyết các van đề phổ biến trong phát triển ứng

dụng như quản lý trạng thai, quan ly giao tiếp với cơ sở dt liệu, xử lý ngoại lệ, xử lý lỗi,

hỗ trợ việc kiểm thử

€ ` spring

Hình 2.3: Logo của Spring Framework

(Ngu6n:https://upload.wikimedia.org/wikipedia/commons/4/44/Spring Framework Logo 20

18.svg)

2.2.2 Kiến trúc tong quan của Spring Framework

Spring Framework được xây dựng trên 2 mô hình co bản cua Inversion of Control

(IoC) va Dependency Injection (DI) Được chia thành nhiều module nhỏ và độc lập, mỗimodule có chức năng cụ thé và có thé sử dụng độc lập hoặc kết hợp với nhau đề xây

dựng các ứng dụng Java phức tạp

Kiến trúc tổng thể của Spring Framework gồm có 5 phần chính: Data

Access/Integration, Web, Core Container, AOP & Instrumentation và Test

Data Access/IntegrationTce

Transactions

Hình 2 4: Tổng quan về kiến trúc của Spring Framework

(Nguôn:

https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/images/spring-overview.png)

Core Container bao gôm các module Core, Beans, Context va Expression

Language:

Core và Beans cung cấp các tính năng cơ ban của Spring, bao gồm IoC vàDependency Injection BeanFactory là hiện thực lại từ mau Factory pattern

Mục tiêu xóa bỏ nhu cầu về các chương trình singletons (chỉ một instance duy

nhất chứa tat cả mọi thứ của chương trình như thư viện, cấu hình ) và cho phép

tách rời các cấu hình và thư viện ra khỏi logic ứng dụng

Context được xây dựng trên nền tang vững chắc được cung cấp bởi Core vaBeans module Là môi trường dé truy cập vào bat kỳ đối tượng nào được định

nghĩa và cấu hình Application context là thành phan quan trọng của Context

JDBC cung cap một lớp JDBC-abstraction mà hỗ trợ kết nối database đơn giản

và dễ dàng, tránh viết nhiều đòng code phức tạp

ORM cung cấp các lớp abstraction hỗ trợ việc ánh xạ dữ liệu từ hệ thống quản

lý cơ sở đữ liệu (DBMS) sang các đối tượng, giúp giảm sự phức tạp khi thao tácvới cơ sở đữ liệu và cho phép lập trình viên làm việc với đối tượng dễ dàng hơn.OXM cho phép tích hợp các thư viện ObjectXML mapping phô biến như JAXB,Castor, XMLBeans, JiBX và XStream vào ứng dụng, giúp tiết kiệm công sức

và giảm lỗi trong việc chuyền đổi dữ liệu

JMS (Java Message service) cung cấp các tính năng cho việc gửi và nhận thông

báo.

Transaction là module hồ trợ cho việc lập trình và quản lý các transaction.

Web module bao gồm Web, Web-Servlet, Web-Struts và Web-Portlet:

Web cung cấp các tính năng cơ bản của web như là file-upload, khởi tạo các IoC

container sử dụng cho servlet listeners va application context dành cho ứng dụng web.

Web-Serviet là module chứa các implementation (triển khai) controller (MVC) của Spring MVC framework cung cấp các phân tách rõ rànggiữa domain model, web form và tích hợp với nhiều tính năng khác của Spring

model-view-Framework.

Web-Struts module chứa các lớp hỗ trợ được tích hợp vào Spring cung cấp cáctính năng xử lý các yêu cầu web (web request) và quản lý presentation layer.Tuy nhiên đến Spring 3.0 thì module này đã không còn được sử dụng nữa.Web-Portlet module cung cấp các implementation (triển khai) MVC được thiết

kế dé sử dụng cho môi trường portlet và cho phép lập trình viên xây dựng ứng

dụng web mà có thé tích hợp nhanh chóng vào portal framework Hơn nữa,

Web-Portlet còn phản ánh chức năng cốt lõi của module Web-Servlet nhưng

được điều chỉnh dé đáp ứng cho môi trường Portlet

AOP & Instrumentation gồm AOP, Aspects va Instrumentation:

AOP là module hiện thực aspect-oriented programming (hay còn gọi là lập trình

hướng khía cạnh) tuân thủ theo chuẩn AOP Alliance, cho phép chúng ta táchbiệt các xử lý logic phụ (hay còn gọi là cross-cutting concerns) của hệ thong

(như ghi log, giao tiếp với cơ sở dữ liệu, bao mật) ra khởi logic chính của ứng

dụng, làm cho mã chương trình trở nên rõ ràng hơn, dễ bảo trì và tái sử dụng

Aspects module cung cấp khả năng tích hợp với AspectJ, module mà giúp mởrộng kha năng của Java dé cho phép lập trình hướng khía cạnh (AOP) có nhiềutính năng và hoạt động linh hoạt hơn.

Instrumentation module cung cấp các cơ chế dé giải quyết các van đề khi máy

chủ ứng dụng yêu cầu sự can thiệp và điều chỉnh về cách tải và sử dụng

classloader trong quá trình chạy Dam bảo ứng dụng hoạt động ôn định và khônggap sự cô trong một môi trường máy chủ cụ thé

2.2.3 Spring Cloud

2.2.3.1 Giới thiệu về Spring Cloud

Spring Cloud là một thành phần của Spring Framework, mã nguồn mở được phát

triên bởi Spring Team, có mục tiêu cung câp các tính năng và giải pháp cho việc xây

dựng và quản lý các ứng dụng cloud-native Hỗ trợ các tiêu chuẩn và giao thức phố biếntrong điện toán đám mây như Service Discovery, Load Balancing, Circuit Breaker,

Distributed Configuration và nhiều tính năng khác Giúp giải quyết các vấn đề phức tạpliên quan đến việc xây dựng các ứng dụng trong môi trường phân tán, có khả năng mở

rộng và tính linh hoạt cao.

2.2.3.2 Những thành phan của Spring Cloud

Spring cloud gateway: Được sử dung dé xây dựng cổng API (API Gateway) dựa

trên Spring Boot trong kiến trúc Microservices Spring Cloud Gateway cho phép địnhtuyến và bao mật các yêu cau đi vào và đi ra của dich vụ trong hệ thống phân tan VớiSpring Cloud Gateway, người dùng có thé tùy chỉnh cách định tuyến yêu cầu từ các

URL đến các dịch vụ cụ thé trong hệ thong Đồng thời cũng hỗ trợ các bộ lọc đề thực

hiện các chức năng như xác thực, ghi log, chuyền tiếp, thay đổi yêu cầu và phản hồi,

giúp tăng tính linh hoạt và khả năng tái sử dụng của ứng dụng Trong đề tài này, hệ

thong sử dung Spring Cloud Gateway như một lớp trung gian giữa người dùng và cácdịch vụ, nhằm cải thiện tính bảo mật, quản lý lưu lượng và thực hiện phân quyền trong

hệ thông một cách hiệu quả

Product Info

REST Recommendation

is Protocol

specific APIs translation

Hinh 2.5: Minh hoa vé API Gateway

(Nguồn: https://microservices.io/i/apigateway.jpg)

Service Discovery: là một trong những tính năng quan trọng và mạnh mẽ của

Spring cloud, giúp các ứng dung tìm ra các dịch vu cần thiết dé thực hiện công việccủa mình mà không cần phải biết trước địa chỉ IP hoặc công của dịch vụ đó Trong

Spring cloud, Eureka được cung cấp mặc định đề làm Service Discovery Eureka cho

phép các ứng dụng đăng ký thông tin về các dich vụ của chúng va tìm kiếm các dich

vụ khác mà chúng cần sử dụng Khi một ứng dụng muốn giao tiếp với một dịch vụ

khác, đầu tiên phải thông qua Eureka đề lây thông tin về dịch vụ đó, bao gồm địa chỉ

IP và công, từ đó thực hiện các cuộc gọi API hoặc trao đôi thông tin.

Service (Eureka)

Registration-Looks for Registers as

“account-service” “account-service”

\ \

RESTful Requests JPA/SQL

Hình 2.6: Minh họa về cách hoạt động của Eureka server

đa tình trạng một node bị quá tải hoặc ngừng hoạt động Một số thuật toán Load

Balancing được hỗ trợ bao gồm Round Robin, Random, Least Connection, Weighted

Response Time va nhiéu thuật toán khác tùy vào nhu cầu của ứng dụng dé lựa chọn thuật

toán phù hợp.

Circuit Breaker: Đầu tiên phải nói về mẫu thiết kế phần mềm Circuit BreakerPattern được áp dụng để giúp giảm thiểu tác động của các lỗi xảy ra trong các dịch vụhay trong các cuộc gọi API từ xa Khi một dịch vụ từ xa gặp sự có, lỗi có thé lan ra vàảnh hưởng tới các dịch vụ khác Dé giữ cho hệ thống vẫn hoạt động ồn định và tránhtình trạng quá tải, Circuit Breaker Pattern sẽ tạm thời cắt đi các cuộc gol dén dich vu

gặp sự có va trả về một giá tri mặc định hoặc thông báo lỗi thay vi cho phép lỗi lan ra

và ảnh hưởng đến toàn bộ hệ thống Trong Spring cloud, thư viện Resilience4j là công

cụ hỗ trợ Circuit Breaker Pattern, Resilience4j cho phép định nghĩa các mạch circuit dé

bao vé cac dich vu Nếu số lượng lỗi vượt quá ngưỡng được định trước, mach circuit sẽ

mở và các cuộc từ xa sau đó sẽ không được thực hiện mà thay vào đó sẽ trả về một giá

trị đã được thiết lập trước Việc này giúp ngăn chặn lỗi lan ra và ảnh hưởng đến hệ thống,

giúp cho ứng dụng hoạt động 6n định, ảnh hưởng tối thiểu đến người dùng Trong đề tàinày, ở mỗi dịch vụ đều cài đặt Circuit Breaker nhằm ngăn chặn và quản lý lỗi giúp hệ

thong hoạt động ồn định hơn

Distributed Configuration: Khi làm việc trong môi trường phân tán, việc quản ly

cau hình trở nên rất phức tap vì với mỗi một node có thê yêu cầu các cau hình khác nhau

Spring Cloud Config Server do Spring cloud cung cấp dé giúp quản lý cau hình của cácdịch vụ trong môi trường phân tán, cho phép lưu trữ cau hình của các dịch vụ trong một

vị trí trung tâm Khi dịch vụ nào cần lấy cấu hình của mình, có thể truy vấn Config

server dé lay cau hình đã được định nghĩa từ trước Giúp giảm thiêu công việc cấu hìnhthủ công và đảm bảo tính nhất quán của cau hình Trong dé tài này, dé quản lý cau hìnhcủa các dịch vụ tại một trí trung tâm, Distributed Configuration được áp dụng với

Repository trên Github là nơi lưu trữ cấu hình, khi bất kỳ dịch vụ nào được khởi tạo thì

sẽ ngay lập tức gọi đến Config Server dé lay cau hình tương ứng

2.2.4 Spring Boot

2.2.4.1 Giới thiệu về Spring Boot

Spring Boot là một thành phần của Spring Framework, cung cấp giải pháp “quy ước

hơn là cau hình” (convention-over-configuration) dé dé dàng triển khai những ứng dụng

Spring một cách dé dang Phần lớn các ứng dung Spring Boot đều chi cần cau hình rất

it, vì phần lớn cau hình đã được nhóm phát triển Spring cài đặt trước

Ra đời vào năm 2014, tuy muộn so với các module khác nhưng lại là một sáng kiến

tuyệt vời của nhóm phát triển Spring Dự án này giúp giảm tải công việc cấu hình củacác lập trình viên cho việc phát triển ứng dụng.

Spring Boot được dùng dé tạo các ứng dụng độc lập dựa trên Spring và không yêucầu cau hình XML và là một chuẩn cho cấu hình thiết kế phần mềm, tăng cao năng suất

cho người phát triển phần mềm Spring Boot là một phần mở rộng của Spring, được sử

dụng để xây dựng các ứng dụng sử dụng microservice Tạo điều kiện và tăng tốc quá

trình phát triển, đạt hiệu suất công việc cao nhờ các tính năng cốt lõi

2.2.4.2 Lý do khiến Spring Boot trở nên nồi bật

Tự động cấu hình các thành phần của ứng dụng dựa trên các dependency có sẵntrong classpath Giúp giảm thiểu cau hình thủ công, tập chung vào logic nghiệp vụ nhiều

hơn vì phần lớn công việc thiết lập, cau hình Spring boot đã làm sẵn

Spring Boot cho phép các nhà phát triển thiết lập và chạy các ứng dụng Spring độclập, cấp sản xuất mà không cần triển khai chúng lên máy chủ web Thông thường, để

chạy một ứng dụng Java, chúng ta cần phải đóng gói ứng dụng đó, chọn, tải xuống và

định cấu hình máy chủ web cũng như tổ chức quá trình triển khai Nhưng trong một ứngdụng Java Spring Boot chỉ cần đóng gói, sau đó ứng dụng đã sẵn sàng đề chạy, sử dụngcác lệnh đơn giản.

Spring boot tích hợp sẵn các máy chủ nhúng như Tomcat, Jetty hoặc Undertow, giúp

dễ dàng triển khai ứng dụng web mà không cần phải cài đặt các máy chủ web riêng biệt

Spring boot actuator cung cấp các endpoint va công cụ giám sát dé theo dõi và quản

lý ứng dụng bao gồm cả thông tin về sức khỏe (healthy check), thống kê (metrics) vànhiều thông tin hữu ích khác

2.2.5 Spring Security

2.2.5.1 Giới thiệu về Spring Security

Spring Security là một phần quan trọng của Spring Framework, được thiết kế dé

cung cấp một hệ thống bảo mật mạnh mẽ cho các ứng dụng Java Spring Security chịutrách nhiệm về việc xác thực người dùng, phân quyền truy cập và quản lý sự an toàncho ứng dụng Spring Security không chỉ giúp đảm bảo rằng đữ liệu và tài nguyên của

ứng dụng được bảo vệ khỏi các cuộc tan công mang mà còn dam bảo rang chỉ có

những người dùng được ủy quyền mới có thê truy cập và sử dụng tài nguyên của ứngdụng.

2.2.5.2 Những thuật ngữ nổi bật sử dụng trong Spring Security

Filter chain là một chuỗi các bộ lọc được áp dụng trước khi các yêu cầu từ người

dùng được đến tới ứng dụng Các bộ lọc này được sử dụng để thực hiện các chức năngnhư xác thực, phân quyền và kiểm soát truy cập Filter chain cho phép xác định các thao

tác bảo mật sẽ được thực hiện trước khi cho phép yêu cầu tiếp tục vào ứng dụng

Security Context là một đối tượng được sử dụng để lưu trữ thông tin bảo mật củangười dùng dang được xác thực Thường được lưu trữ trong một ThreadLocal dé có thétruy cập thông tin bảo mật từ bất kỳ nơi nào trong ứng dụng

Authentication là quá trình xác định danh tính của người dùng dựa trên thông tin

đăng nhập Spring Security hỗ trợ nhiều cơ chế xác thực như JDBC, LDAP, OAuth vànhiều cơ chế khác

Authorization là quá trình xác định quyền truy cập của người dùng dựa trên vai tròhoặc quyền hạn của họ Spring Security cho phép xác định các quyền và vai trò của

người dùng thông qua nhiều cơ chế, và dựa vào đó quyết định liệu họ có được phép truy

cập vao tài nguyên hay không.

Access Decision Manager là một thành phan của Spring Security sử dụng dé quyếtđịnh xem người dùng có được phép truy cập vào tai nguyên hay không Access DecisionManager dựa vào thông tin về phân quyền và quyền truy cập của người dùng dé đưa raquyết định cuối cùng

Session Management được sử dụng trong Spring Security để quản lý phiên ngườidùng, cho phép xác định thời gian sống và cách thức xử lý phiên của người dùng saukhi đăng nhập.

Exception Handling hỗ trợ xử lý các ngoại lệ bảo mật, giúp đảm bảo rằng khi có

lỗi xảy ra trong quá trình xác thực hoặc phân quyền, ứng dụng vẫn có thé xử lý một cáchchính xác và cung cấp thông báo lỗi phù hợp

2.2.6 Một số thành phần khác của Spring Framework

Spring Data cho phép dễ dàng truy cập và sử dụng cơ sở đữ liệu trong ứng dụng

Cung cấp các tùy chọn tự động cấu hình và cung cấp các tích hợp với các cơ sở dữ liệu

phổ biến như MySQL, PostgreSQL, MongoDB và nhiều loại khác

Spring Web MVC hỗ trợ xây dựng các ứng dụng web sử dụng mô hình MVC

(Model-View-Controller) trong Spring Framework.

Spring Batch hỗ trợ việc xử lý lô (batch processing) trong ứng dụng, như xử lý

hàng loạt công việc theo định kỳ hoặc xử lý đữ liệu lớn.

Spring Integration hỗ trợ tích hợp các hệ thống phức tạp thông qua các pattern tích

hợp như Message Channel, Message Endpoint, Message Router va Message Transformer.

Ngoài ra còn nhiều thành phần khác của Spring như: Spring Websocket, SpringSocial, Spring Mobile, Spring for Android,

2.2.7 Những tinh năng nỗi bật khi sử dung Spring Framework

Làm giảm sự phức tạp khi lập trình Java và cung cấp cách tiếp cận hướng tới việc

cau hình và quan lý các thành phần ứng dụng một cách dé dàng Sử dung DependencyInjection và Inversion of Control, Spring loại bỏ sự phụ thuộc giữa cách thành phần,

giúp giảm thiểu các đoạn code lặp lại cần phải viết và tăng tính linh hoạt của ứng dụng

Dependency Injection (DI) cho phép dễ dàng quản lý sự phụ thuộc giữa các thành

phần ứng dụng Giúp tách biệt phần triển khai và phần sử dụng của các lớp và giúp việckiểm thử và bảo trì đễ đàng hơn

AOP (Aspect oriented programming) cho phép tách biệt các xử lý logic phụ như ghilog, bảo mật hay caching ra khỏi logic chính của ứng dụng Điều này làm cho ứng dụng

dé đọc, dé bảo trì và giảm thiểu việc lặp lại mã

Tích hop dé dàng với các công nghệ và framework phổ biến khác như Hibernate,

JPA, JDBC, RESTful, JMS và nhiều công nghệ khác Giúp việc tích hợp các công nghệvào ứng dụng dễ dàng và nhanh chóng

Hỗ trợ cơ chế Classloader giúp tạo ra các ứng dụng module hóa và phân tán, nhờvậy mà ứng dụng có tinh module cao, dé dàng trién khai

Không phụ thuộc vào một server hay một phiên ban Java cụ thé nào, do đó có thé

chạy trên nhiều môi trường và phiên bản Java

Cộng đồng lớn và năng động, nơi mà có thê tìm thấy nhiều tài liệu, hướng dẫn và

hỗ trợ từ các chuyên gia và nhà phát triển khác nhau

2.2.8 Những khó khăn khi tiếp cận Spring Framework

Mặc dù Spring Framework cung cấp tính năng tự động cấu hình, nhưng trong một

số trường hợp ta vẫn phải câu hình một số điểm cu thé, điều này có thể làm cho mã phứctạp hơn và đòi hỏi kiến trúc sâu về framework

Spring Framework có nhiều dự án con và phiên bản phụ thuộc lẫn nhau, việc duy

trì sự bất đồng trong phiên bản có thể trở nên phức tạp trong một số trường hợp

Spring Framework có tích hợp sâu với nhiều thành phần khác nhau, chính vì vậylàm cho việc kiểm thử trở nên phức tạp hơn, đặc biệt là khi sử dụng các thành phần từ

bên ngoài.

Các tinh năng mạnh mẽ và da dạng của Spring framework có thé làm việc học vàlàm quen với framework trở nên khó khăn đối với những người mới bắt đầu

2.2.9 Kết luận về Spring Framework

Spring Framework là một framework mạnh mẽ cho phát triển ứng dụng Java, cung

cấp nhiều tính năng và module tiện ích giúp giải quyết các vấn đề phức tạp trong pháttriển ứng dụng, từ quản lý cấu hình, bảo mật, hay truy vấn đữ liệu Trong đề tài này, hệ

thong được xây dựng trên nền tang Spring Framework và sử dụng một số thành phanquan trọng của Spring Framework như Spring boot, Spring security, Spring data va Spring cloud.

Spring Boot là một lựa chọn hop lý cho việc xây dung ứng dung Spring, giúp việc

sử dụng Spring Framework trở nên dễ dàng hơn với rất ít cấu hình Sự tích hợp của

Spring Boot giúp giảm thiểu công việc cấu hình thủ công và tập trung vào việc triển khailogic nghiệp vụ Hệ thông của đề tài tất cả các dịch vụ đều lựa chọn sử dụng Spring Boot

dé đơn giản hóa việc cấu hình Spring Framework và tạo ra một ứng dụng Spring hiệu

quả.

Đồng thời hệ thống cũng sử dụng Spring Cloud để quản lý các dịch vụ trong môitrường phân tán Điều này cho phép các ứng dụng tương tác và tận dụng các dịch vụ từ

xa một cách dễ dàng và hiệu quả, giúp tạo nên một hệ thống linh hoạt và có khả năng

mở rộng Nhờ tích hợp các tính năng của Spring Cloud như Service Discovery, Load Balancing, Circuit Breaker, Distributed Configuration và Spring Cloud Gateway hệ

thong có thé tối ưu hoá việc quản lý và giảm thiểu sự phụ thuộc giữa các dịch vụ

Spring Security cũng được áp dụng dé đảm bảo tính bảo mật cho các API trong hệ

thong Ở mỗi service, Spring Security được sử dụng tích hợp với hệ thống quản lý và

phân quyền Keycloak dé xác định quyền truy cập của người dùng đối với từng API,

đảm bảo chỉ những người dùng hợp lệ mới có thể truy cập và sử dụng

2.3 React Framework

2.3.1 Giới thiệu về React Framework

React Framework là một tập hợp các công nghệ phát triển được công ty Meta (trướcđây là Facebook) tạo ra nhằm giúp xây dựng giao diện người dùng hiện đại và tương táctrên cả ứng dụng web và di động (tiêu biểu là React JS và React Native) ReactFramework bắt nguồn từ việc Facebook cần giải quyết các vấn đề liên quan đến quản lýgiao diện người dùng trong các ứng dụng web và di động Trong quá khứ, khi phát triểncác ứng dụng web phức tạp, việc duyệt va cập nhật DOM (Document Object Model)trực tiếp dẫn đến hiệu suất kém và khả năng bảo trì thấp Facebook đã đối mặt với nhữngkhó khăn này khi cố gắng tạo ra giao diện người dùng động cho trang Facebook.Với

mục tiêu giải quyết những vấn đề này, React Framework đã ra đời

React JS được phát triển bởi Jordan Walke tại Facebook và được công bố cho cộngđồng phát triển vào năm 2013 React JS ban đầu được thiết kế như một thư viện giao

diện đề giúp Facebook xây dựng các ứng dụng web phức tạp mà hiệu suất và trải nghiệmngười dùng không bị ảnh hưởng bởi việc cập nhật DOM trực tiếp Một trong những khía

cạnh quan trọng của React JS là việc sử dụng Virtual DOM (DOM ảo) giúp tối ưu hoá

quá trình cập nhật và tăng hiệu suất của ứng dụng

Hình 2.7: Logo của React Framework

(Nguồn:

https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/120px-React-icon.svg.png)

Sau thành công của React trên web, Facebook tiếp tục phát triển React Native, một

mở rộng cua React JS, dé giải quyết van dé phát triển ứng dung di động React Nativecho phép xây dung ứng dụng di động đa nền tang sử dung cùng một ngôn ngữ lập trình,

giúp tối ưu hoá quy trình phát triển và tạo ra trải nghiệm tương tác giống ứng dụng

native Cho đến hiện nay, React Framework không chỉ hỗ trợ xây dựng giao diện trên

trình duyệt web, lập trình mobile mà còn có thể được sử dụng để phát triển ứng dụng

SPA và hỗ trợ kết xuất phía máy chủ (SSR - Server-side Rendering) khi kết hợp với

framework như Next.js Điều này cho phép lập trình viên sử dụng React trong một loạtcác dự án phát triển phục vụ cho nhiều mục đích khác nhau

Sự phô biến và linh hoạt của React đã thu hút được sự quan tâm và sử dụng rộng rãi

từ cộng đồng phát triển phần mềm, và tiếp tục được cải tiễn và phát triển dé đáp ứng

nhu cầu ngày càng cao của việc xây dựng những trang web, những giao diện người dùng

hiện đại.

2.3.2 React JS

2.3.2.1 Những đặc trưng của React JS

React JS giúp việc tạo giao diện người dùng trở nên dễ dàng hơn Thay vì tương tác

trực tiếp với DOM, chỉ cần thiết kế các màn hình đơn giản cho từng trạng thái trong ứngdụng, và React sẽ tự động cập nhật và hiển thị các component phù hợp khi dữ liệu thay

đối

Dựa trên component: React JS xây dựng các component đóng gói va quản lý trạng

thái của chúng, sau đó kết hợp dé tạo ra giao diện người dùng phức tap Vì logic của các

component được viết bang JavaScript thay vi template, việc chuyền dữ liệu xuyên suốt

ứng dụng và duy trì trạng thái ngoài DOM trở nên dễ dàng

“Học một lần, viết mọi nơi": React JS cho phép phát triển các tính năng mới mà

không cần viết lại mã hiện có React JS có thé kết xuất trên máy chủ bằng Node.js

React Hook: Hook là các hàm cho phép nhà phát triển “kết nối" các tinh năng vòng

đời và trạng thái của React trong các functional component React cung cấp một số hook

tích hợp như useState, useContext, useReducer, useMemo và useEffect.

DOM ảo (Virtual DOM): Là một cấu trúc đữ liệu tạo ra bởi React dé đại diện cho

cau trúc DOM thực Khi có sự thay đổi trong trang thái của các của thành phan React,

React sẽ tạo ra một DOM ảo mới, tương tự như cấu trúc DOM thực Sau đó, React sẽ sosánh các cấu trúc DOM ảo trước và sau thay đôi dé xác định sự khác biệt và chỉ cập nhật

các thành phần thực sự thay đổi lên DOM thực Quá trình so sánh và cập nhật sự khácbiệt giữa DOM ảo và DOM thực được gọi là reconciliation DOM ảo giúp tăng hiệu suất

bằng cách giảm số lượng lần truy cập và thao tác trực tiếp lên Dom thực, và thay vào đóchi thao tác với cấu trúc dit liệu DOM ảo nhanh hơn [5]