Đề tài tìm hiểu về react native và xây dựng 1 ứng

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 2
Đề tài: Tìm hiểu về React Native và xây dựng 1 ứng
dụng bán giày

NGÀNH KỸ THUẬT PHẦN MỀM

GIẢNG VIÊN HƯỚNG DẪN:
ThS. Huỳnh Hồ Thị Mộng Trinh
SINH VIÊN THỰC HIỆN:
Võ Thời Đại
Trương Thàng Quang

TP. HỒ CHÍ MINH, 2022

19521307
19520884


LỜI CẢM ƠN
Trong quá trình học tập, nghiên cứu và phát triển đề tài “Tìm hiểu về
React Native và xây dựng 1 ứng dụng bán giày” em đã nhận được sự giúp
đỡ, chỉ bảo của cô để hoàn thành đồ án này.
Nhóm em xin chân thành gửi lời cảm ơn đến cô Huỳnh Hồ Thị Mộng
Trinh – Giảng viên Trường Đại học Công nghệ thông tin, Đại học Quốc
gia Thành phố Hồ Chí Minh – giảng viên dạy hướng dẫn mơn Đồ án 2, đã
tận tình hướng dẫn và giúp đỡ về kiến thức, phương pháp cho chúng em
trong suốt quá trình thực hiện và hoàn thành đồ án.

Hi vọng với sự chỉ bảo và góp ý từ cơ, nhóm đề tài có thể tiếp tục phát
triển để ứng dụng ngày càng được mở rộng và phục vụ được tốt hơn cho
người dùng.
Mặc dù đã có nhiều cố gắng trong suốt q trình thực hiện đề tài, song
khơng thể tránh khỏi những hạn chế, thiếu sót. Em mong rằng sẽ nhận
được những đóng góp và nhận xét chân thành từ thầy, các bạn sinh viên
và người dùng trong quá trình sử dụng phần mềm để phần mềm ngày càng
hoàn thiện hơn nữa. Mọi đóng góp xin vui lịng gửi về địa chỉ email:

Mỗi ý kiến đóng góp của cơ và các bạn sẽ là một nguồn động lực to lớn
đối với chúng em để chúng em có thể cải thiện phần mềm tốt hơn và xây
dựng những phần mềm hữu ích đối với người dùng hơn nữa.
Chúng em xin trân trọng cảm ơn.

Thành phố Hồ Chí Minh, ngày 22 tháng 12 năm 2022

1


NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................

..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................

2


MỤC LỤC
Chương 1. GIỚI THIỆU .................................................................................................................6
1.1. Đặt vấn đề .............................................................................................................................6
1.2. Giải pháp ...............................................................................................................................6
1.3. Mục tiêu.................................................................................................................................6
Chương 2. TỔNG QUAN................................................................................................................7
2.1. Tổng quan về đồ án .........................................................................................................7
2.1.1.

Tên đồ án: ................................................................................................................7

2.1.2.

Link github quản lý source code ...................................................................7

2.2. Cơ sở lý thuyết ...................................................................................................................7
2.2.1.

Nền tảng Cross Platform ...................................................................................7

2.3. Công nghệ sử dụng ....................................................................................................... 10
2.3.1.

Ngôn ngữ C# ....................................................................................................... 10

2.3.2.

Ngơn ngữ lập trình Java-scripts ................................................................. 12

2.3.3.

React-Native ........................................................................................................ 14

2.3.4.

.NET core .............................................................................................................. 21

2.3.5.

SQL server ............................................................................................................ 22

2.3.6.

Phà n mềm lập trình VSCode ........................................................................ 23

2.3.7.

Dịch vụ Github .................................................................................................... 26

Chương 3. ỨNG DỤNG MINH HỌA ....................................................................................... 26
3.1. Cơ sở dữ liệu.................................................................................................................... 26
3.1.1.

Bảng Product ...................................................................................................... 28

3.1.2.

Bảng Color ............................................................................................................ 28

3.1.3.

Bảng Size ............................................................................................................... 28

3


3.1.4.

Bảng Category .................................................................................................... 28

3.1.5.

Bảng Collection .................................................................................................. 29

3.1.6.

Bảng Recipe ......................................................................................................... 29

3.1.7.

Bảng RecipeItem ............................................................................................... 29

3.1.8.

Bảng Address ...................................................................................................... 30

3.1.9.

Bảng User ............................................................................................................. 30

3.2. Product Requirement Document ........................................................................... 30
3.2.1.

Objective ............................................................................................................... 30

3.2.2.

Release ................................................................................................................... 32

3.2.3.

Features ................................................................................................................ 33

3.2.4.

Analytics – Phân tích ....................................................................................... 38

3.2.5.

Future work – Hướng phát triển ............................................................... 40

3.3. Các màn hình minh họa .............................................................................................. 41
3.3.1.

Màn hình giới thiệu ứng dụng ..................................................................... 41

3.3.2.

Màn hình trang chủ .......................................................................................... 42

3.3.3.

Màn hình đăng nhập ........................................................................................ 43

3.3.4.

Màn hình sản phẩm.......................................................................................... 44

3.3.5.

Màn hình chi tiết sản phẩm .......................................................................... 45

3.3.6.

Màn hình giỏ hàng và thanh toán .............................................................. 47

3.3.7.

Thanh điều hướng các loại sản phẩm ...................................................... 49

3.3.8.

Màn hình các sản phẩm u thích ............................................................. 50

3.3.9.

Màn hình ưu đãi ................................................................................................ 51

3.3.10.

Màn hình lịch sử giao dịch ............................................................................ 52

Chương 4. KIẾN TRÚC HỆ THỐNG ....................................................................................... 53

4


Chương 5. KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN ..................................... 55
Chương 6. TÀI LIỆU THAM KHẢO ........................................................................................ 56

5


Chương 1.
1.1.

GIỚI THIỆU

Đặt vấn đề

Ngày nay, nhiều cửa hàng kinh doanh hoạt động chủ yếu vẫn mang tính
thủ cơng, dựa vào kinh nghiệm của hệ thống nhân viên. Do đặc điểm
lượng hàng hố nhập xuất ngày càng lớn nên cơng tác quản lí, mua bán
mất rất nhiều thời gian, cơng sức mà độ chính xác khơng cao, điều này
nhiều khi gây thiệt hại cho cửa hàng.
1.2.

Giải pháp

Nhận thấy tình hình trên, nhóm em đã lên ý tưởng xây dựng một ứng
dụng hỗ trợ công tác quản lý, bán hàng và mua hàng trực tuyến. “Xây
dựng 1 ứng dụng bán giày” ra đời nhằm đáp ứng nhu cầu hiện đại hóa hệ
thống quản lý và bán hàng, đưa hệ thống phần mềm vào để thay thế công
tác quản lý thủ công, nâng cao trải nghiệm mua hàng trực tuyến cho người
dùng.
1.3.

Mục tiêu

Xây dựng một phần mềm hỗ trợ cửa hàng thực hiện công tác quản lý
sản phẩm và trạng thái đơn hàng, cung cấp một ứng dụng mua sắm đáp
ứng các nhu cầu của khách hàng, cụ thể là trong kinh doanh thời trang.
Xây dựng giao diện phần mềm một cách trực quan, sinh động, dễ sử
dụng, thẩm mỹ. Dùng animation xử lý thành phần hoạt động một cách
mượt mà để mang đến trải nghiệm thú vị và tiện ích cho người dùng.

6


Chương 2.
2.1.

TỔNG QUAN

Tổng quan về đồ án

2.1.1. Tên đồ án:
Tên tiếng việt: Tìm hiểu về React Native và xây dựng 1 ứng dụng
bán giày
2.1.2. Link github quản lý source code
/>
2.2.

Cơ sở lý thuyết

2.2.1. Nền tảng Cross Platform
2.2.1.1. Cross Platform là gì
“Trong cơng nghệ điện tốn, đa nền tảng (tiếng Anh: cross-platform hay
multi platform) là một thuật ngữ chỉ các phần mềm máy tính hay các phương
thức điện tốn và các khái niệm được thực thi đầy đủ và vận hành cùng nhau
trên nhiều nền tảng máy tính. Phần mềm đa nền tảng có thể được chia thành
hai loại; một loại yêu cầu phải thiết kế hoặc biên dịch từng phiên bản cho
mỗi nền tảng nó hỗ trợ; loại kia có thể chạy trực tiếp trên bất cứ nền tảng nào
mà không cần sự chuẩn bị thêm đặc biệt nào - chẳng hạn như phần mềm được
viết bằng một ngôn ngữ thơng dịch hay được biên dịch trước sang mã

bytecode có khả năng di động bằng một trình thơng dịch hay các gói run-time
thường dùng hoặc là thành phần tiêu chuẩn trên mọi nền tảng”.

7


Cross Platform

Cross platform hay Multi Platform là một nền tảng đa ứng dụng. Hiểu đơn
giản hơn là chỉ với một bản code, bạn có thể phiên dịch và sử dụng nó trên
nhiều nền tảng ứng dụng
khác nhau, giúp bạn tiết kiệm được cơng sức và thời gian đáng kể.
Chính vì lợi thế đó mà Cross platform được ưa chuộng bởi rất nhiều lập
trình viên hiện nay. Ngoài ra, khi lập trình, bạn cần phải lựa chọn tuỳ theo
ưu, nhược điểm của một Framework bởi Cross platform sử dụng Framework
đa nền tảng.
Đến thời điểm hiện tại, React-Native, Xamarin và Flutter theo thứ tự được
xem là 3 frameworks phổ biến nhất cho phép phát triển app trên smartphone
sử dụng các hệ điều hành, hay nền tảng khác nhau (cross-platform mobile
development), mà thông dụng nhất là iOS và Android. Với các frameworks
này, một chương trình được viết có thể chạy trên tất cả các nền tảng; cụ thể
hơn, chỉ cần phát triển 1 project nhưng có thể tạo ra các apps chạy trên
smartphone sử dụng iOS, Android.

8


Ba framework phát triển mobile phổ biến

Sự xuất hiện các frameworks nói trên đã hình thành các trường phái và

cộng đồng phát triển app, kèm theo là những tranh luận về việc đánh giá xếp
hạng cho các frameworks này.
2.2.1.2. Ưu điểm, hạn chế của Cross Platform
Ưu điểm:
• Có thể sử dụng một bản code trên nhiều phiên bản khác nhau.
• Sử dụng Cross platform sẽ giúp tiết kiệm được lượng lớn chi phí và
cơng sức viết code.
• Cross platform thích hợp với những dự án lớn, địi hỏi tính linh hoạt và
đa dạng.
Nhược điểm:
• Chưa có khả năng khai thác thư viện của những nền tảng lớn như
Android hoặc iOS dù nó tiết kiệm được chi phí và có tính linh hoạt
cao.
• Q trình cấp phép cho cơng nghệ của ứng dụng Cross platform gặp
nhiều khó khăn và phức tạp

9


2.3.

Công nghệ sử dụng

2.3.1. Ngôn ngữ C#
2.3.1.1. Tổng quan
C# (hay C sharp) là một ngơn ngữ lập trình đơn giản, được phát triển bởi đội
ngũ kỹ sư của Microsoft vào năm 2000, trong đó người dẫn đầu là Anders
Hejlsberg và Scott Wiltamuth.

C# là ngơn ngữ lập trình hiện đại, hướng đối tượng và nó được xây dựng trên

nền tảng của hai ngôn ngữ mạnh nhất là C++ và Java.

C# được thiết kế cho Common Language Infrastructure (CLI), mà gồm
Executable Code và Runtime Environment, cho phép chúng ta sử dụng các ngôn
ngữ high-level đa dạng trên các nền tảng và cấu trúc máy tính khác nhau.

C# với sự hỗ trợ mạnh mẽ của .NET Framework giúp cho việc tạo một ứng
dụng Windows Forms hay WPF (Windows Presentation Foundation), . . . trở
nên rất dễ dàng.
2.3.1.2. Ưu điểm
C# là ngôn ngữ đơn giản
Như ta đã biết thì ngơn ngữ C# dựng trên nền tảng C++ và Java nên ngôn ngữ
C# khá đơn giản. Nếu chúng ta thân thiện với C và C++ hoậc thậm chí là Java,
chúng ta sẽ thấy C# khá giống về diện mạo, cú pháp, biểu thức, toán tử và
những chức năng khác được lấy trực tiếp từ ngôn ngữ C và C++, nhưng nó đã
được cải tiến để làm cho ngôn ngữ đơn giản hơn. Một vài trong các sự cải tiến
là loại bỏ các dư thừa, hay là thêm vào những cú pháp thay đổi.

10


C# là ngôn ngữ hiện đại
Một vài khái niệm khá mới mẻ khá mơ hồ với các bạn vừa mới học lập trình,
như xử lý ngoại lệ, những kiểu dữ liệu mở rộng, bảo mật mã nguồn..v..v... Đây là
những đặc tính được cho là của một ngơn ngữ hiện đại cần có. Và C# chứa tất cả
các đặt tính ta vừa nêu trên. Các bạn sẽ dần tìm hiểu được các đặt tính trên qua
các bài học trong series này.
C# là một ngơn ngữ lập trình thuần hướng đối tượng
Lập trình hướng đối tượng(tiếng Anh: Object-oriented programming, viết tắt:
OOP) là một phương pháp lập trình có 4 tính chất. Đó là tính trừu tượng

(abstraction), tính đóng gói (encapsulation), tính đa hình (polymorphism) và
tính kế thừa (inheritance). C# hỗ trợ cho chúng ta tất cả những đặc tính trên.
Và để hiểu rõ hơn thì chúng ta sẽ có một chương trình bày về phần này.
C# là một ngơn ngữ ít từ khóa
C# được mơ tả là ngơn ngữ sử dụng giới hạn những từ khóa (gồm khoảng 80 từ
khóa và mười mấy kiểu dữ liệu xây dựng sẵn). Nếu bạn nghĩ rằng ngơn ngữ có
càng nhiều từ khóa thì sẽ càng mạnh mẽ hơn. Điều này khơng phải sự thật, lấy
ví dụ ngơn ngữ C# làm điển hình nhé. Nếu bạn học sâu về C# bạn sẽ thấy rằng
ngôn ngữ này có thể được sử dụng để làm bất cứ nhiệm vụ nào.
Ngồi những đặc điểm trên thì cịn một số ưu điểm nổi bật của C#:
C# có cấu trúc khá gần gũi với các ngơn ngữ lập trình truyền thống, nên cũng
khá dể dàng tiếp cận và học nhanh với C#.
C# có thể biên dịch trên nhiều nền tảng máy tính khác nhau.
C# được xây dựng trên nền tảng của C++ và Java nên nó được thừa hưởng
những ưu điểm của ngơn ngữ đó.
C# là một phần của .NET Framework nên được sự chống lưng khá lớn đến từ
bộ phận này.

11


C# có IDE Visual Studio cùng nhiều plug-in vơ cùng mạnh mẽ.

2.3.2. Ngơn ngữ lập trình Java-scripts
JavaScript là ngơn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20
năm qua. Nó cũng là một trong số 3 ngơn ngữ chính của lập trình web:
• HTML: Giúp bạn thêm nội dung cho trang web.
• CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang
web.
• JavaScript: Cải thiện cách hoạt động của trang web.

JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác
nhau, từ việc cải thiện tính năng của website đến việc chạy game và tạo phần
mềm nền web. Hơn nữa, có hàng ngàn mẫu template JavaScript và ứng dụng
ngoài kia, nhờ vào sự cống hiến của cộng đồng, đặc biệt là Github.

Ngơn ngữ Javascript

2.3.2.1. Lịch sử hình thành Java-scripts
JavaScript được tạo trong mười ngày bởi Brandan Eich, một nhân viên
của Netscape, vào tháng 9 năm 1995. Được đặt tên đầu tiên là Mocha, tên
của nó được đổi thành Mona rồi LiveScript trước khi thật sự trở thành
JavaScript nổi tiếng như bây giờ. Phiên bản đầu tiên của ngôn ngữ này bị
giới hạn độc quyền bởi Netscape và chỉ có các tính năng hạn chế, nhưng nó
12


tiếp tục phát triển theo thời gian, nhờ một phần vào cộng đồng các lập trình
viên đã liên tục làm việc với nó.
Trong năm 1996, JavaScript được chính thức đặt tên là ECMAScript.
ECMAScript 2 phát hành năm 1998 và ECMAScript 3 tiếp tục ra mắt vào
năm 1999. Nó liên tục phát triển thành JavaScript ngày nay, giờ đã hoạt động
trên khắp mọi trình duyệt và trên khắp các thiết bị từ di động đến máy tính
bàn.
JavaScript liên tục phát triển kể từ đó, có lục đạt đến 92% website đang sử
dụng JavaScript vào năm 2016. Chỉ trong 20 năm, nó từ một ngơn ngữ lập
trình riêng trở thành cơng cụ quan trọng nhất trên bộ công cụ của các chuyên
viên lập trình web. Nếu bạn đang dùng internet, vậy chắc chắn bạn đã từng
sử dụng JavaScript rồi.
2.3.2.2. Ưu, nhược điểm của Java-script
Ưu điểm của Javascript:

• Javascript giúp thao tác với người dùng ở phía client và tách biệt
giữa các client. Ví dụ 2 người đang truy cập vào 2 trình duyệt khác
nhau thì cả hai đều có những phiên xử lý Javascript khác nhau,
khơng ảnh hưởng lẫn nhau.
• Javascript có thể hoạt động trên nhiều nền tảng khác nhau, từ
Windows, macOS cho đến các hệ điều hành trên mobile.
• Javascript là một ngôn ngữ dễ tiếp cận, bạn sẽ dễ dàng học nó mà
khơng cần phải cài đặt q nhiều phần mềm.
Nhược điểm của Javascript:
• Vì là một ngơn ngữ rất dễ dàng bị lộ code nên dễ bị khai thác.
Hacker có thể nhập một đoạn code bất kì vào khung console của
trình duyệt, lúc này trình duyệt sẽ hiểu rằng đoạn code đó là chính
thống, nên hacker có thể gửi nhửng request lên server một cách dễ
dàng.

13


2.3.2.3. JavaScripts framework
Javascript Framework là một bộ thư viện được xây dựng dựa vào ngơn
ngữ lập trình Javascript. Mỗi framework thường được tạo ra để phục vụ cho
một lĩnh vực nào đó. Ví dụ với Angular và React thì chun xử lý frontend,
NodeJS thì chuyên xử lý backend, jQuery là một thư viện rất mạnh khi xử lý
DOM HTML và CSS.
Sức mạnh của Javascript là không thể chối cãi, bằng chứng là hiện nay có
rất nhiều libraries và framework được viết bằng Javascript ra đời như:
• Angular: Một thư viện dùng để xây dựng ứng dụng Single Page.
• NodeJS: Một thư viện được phát triển phía Server dùng để xây
dựng ứng dụng realtime.
• Sencha Touch: Một Framework dùng để xây dựng ứng dụng

Mobile. • ExtJS: Một Framework dùng xây dựng ứng dụng quản
lý (Web Applications). • jQuery: Một thư viện rất mạnh về hiệu
ứng.
• ReactJS: Một thư viện viết ứng dụng web.
• Và cịn nhiều thư viện khác.
2.3.3. React-Native
2.3.3.1. Tổng quan về React-Native
Được phát triển bởi Facebook, React Native là một framework hướng đến
phát triển ứng dụng di động đa nền tảng. Với sự trợ giúp của React Native,
lập trình viên (developer) có thể sử dụng JavaScript để tạo ra mobile apps
(ứng dụng di động) hỗ trợ cho cả nền tảng Android và iOS. Instagram,
Facebook, Skype,… là những ứng dụng nổi bật sử dụng React Native.

14


Framework React Native

React Native chính thức trở thành mã nguồn mở vào tháng 3 năm 2015.
Cho đến nay, React Native được áp dụng trong nhiều ứng dụng của ta và cả
nước ngoài
2.3.3.2. Các cách thức hoạt động của React-Native
React Native hoạt động được nhờ tích hợp 2 thread là Main Thread và JS
Thread cho ứng dụng mobile. Trong đó:
• Main Thread: cập nhật giao diện người dùng(UI) và xử lý tương
tác người dùng.
• JS Thread: thực thi và xử lý code Javascript.
2.3.3.3. Props – State
Props:
• Để truyền dữ liệu giữa các component, ReactJS cho ra đời khái niệm

props (hay còn gọi là properties).
• Đối với ReactJS, component con khơng được thay đổi giá trị của props,
bởi vì, props có thể được truyền cho rất nhiều component con, nếu các
component con thay đổi props sẽ dẫn đến nhập nhằng khi testing, dữ
liệu giữa các component không thống nhất.

15


State:
• Nếu props dùng để hứng dữ liệu từ component cha thì state được
dùng để lưu dữ liệu của chính component đó với giá trị có thể thay
đổi phụ thuộc vào logic bên trong component đó.
• Tuy nhiên, khi sử dụng thao tác cập nhật giá trị của state, lập trình
viên phải chú ý nguyên tắc mỗi khi state thay đổi, component sẽ
được render lại. Do đó, cần cân nhắc trong việc thay đổi giá trị state
nhằm tránh việc render liên tục, giảm hiệu suất ứng dụng.
2.3.3.4. Component Lifecycle
Mỗi component có các method lifecycle cho phép bạn có thể override để
chạy code hiển thị lên màn hình mobile. Lifecycle thường được chia làm 3
phần chính:
Mounting:
Bao gồm các method được gọi khi 1 instance của component được khởi
tạo:
•
•
•
•

Contructor

getDerivedStateFromProps()
render()
componentDidMount()

render() là bắt buộc và luôn được thực thi trong khi các method khác là
optional.
Updating:
Một component được update khi có sự thay đổi về state hay props của nó.
React có 5 methods được gọi khi một component được update:
•
•
•
•
•

getDerivedStateFromProp()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

16


render() method là require và luôn được gọi trong khi các method cịn lại
là optional
Unmounting:
Khi một component bị xố khỏi DOM, các hàm thuộc nhóm này sẽ
được thực thi. Đây nơi là để xử lý các biến thời gian như SetInterval, ngắt
các network request.

2.3.3.5. React Hook
Hooks là những hàm cho phép kết nối React state và lifecycle vào các
components sử dụng hàm. Với Hooks có thể sử dụng state và lifecycles
mà không cần dùng ES6 class. Sự ra đời này đã giúp các lập trình viên
tránh sự nhập nhằng về con trỏ this
Các hook phổ biến được sử dụng nhiều: useState, useEffect, useRef.
useState: cập nhật giá trị của state, trong class component để thay đổi
state phải dùng cú pháp this.state. Tuy nhiên với cú pháp này sẽ bị nhập
nhằng con trỏ this, do đó, hook useState ra đời để giảm bớt sự nhập
nhằng trên. Để thay đổi state trong functional component chỉ cần dùng
hàm setState()
useEffect: là nơi thích hợp để xử lý các side effect như gọi api lấy dữ
liệu từ server, các thao tác liên quan đến DOM cũng như các vấn đề liên
quan đến setInterval, network request. Một useEffect sẽ gồm 3 thành
phần: side effect, dependencies và cleanup:
• Side Effect: những ảnh hưởng từ bên ngoài vd gọi API, tương tác
dom hay setInterval.
• Cleanup: Là nơi xử lý các tác vụ liên quan đến hỷ network request,
các biến thời gian. Một ví dụ điển hình cho phần clean up: nếu có
timeInterval mà ko clear sau khi unmount component thì khi

17


unmount component rồi những setinterval vẫn chạy và vẫn update
state sẽ dẫn đến lỗi đã unmount rồi mà vẫn cố gắng update state =>
phải clear setinterval trong hàm cleanup của use effect.
• Có 3 loại dependencies:
- Khơng truyền dependencies vào thì use effect chạy lại sau khi
hàm render được gọi

- Nếu truyền vào mảng rỗng [] thì sẽ giống với hàm
componentDidMount, use effect chỉ chạy 1 lần, side effect chạy
sau render lần đầu và clean up chỉ chạy khi component unmount.
- Truyền filter vào mảng dependencies: chỉ chạy use effect khi
filter thay đổi. Ví dụ thanh search, gọi api theo filter của thanh
search, filter thay đổi thì sẽ gọi api (chạy lại use effect), cịn filter
ko đổi thì ko gọi api (ko chạy use effect).
useRef: dùng để lưu trữ giá trị của một biến qua các lần render. Sau
mỗi lần render, giá trị của một số biến trong component sẽ quay lại giá trị
ban đầu, sử dụng useRef để lưu trữ các giá trị này
2.3.3.6. React Redux - Redux toolkit
Redux:
Là công cụ dùng để quản lý state của ứng dụng. Ứng dụng có thể truy
xuất state này ở mọi nơi thông qua store mà không cần truyền state từ
component cha sang con.
Redux toolkit:
Là một package được sinh ra để tiết kiệm thời gian trong việc cấu hình
store, các file action hay reducer trong redux khá tách biệt và code lặp lại khá
nhiều. Tuy nhiên, đến với redux toolkit, việc config store, action, reducer trở
nên dễ dàng, nhanh chóng và ngắn gọn.
Redux toolkit bao gồm các thành phần:

18


Store: Là nơi lưu trạng thái của ứng dụng và là duy nhất, có thể lưu trữ,
truy xuất hoặc cập nhật giá trị state trong store thông qua các action
Action: Là các event, các event này bao gồm type (để reducer biết đây
là loại action gì, từ đó thực hiện các hành động cập nhật state thích hợp) và
payload (chứa thông tin state mới)

Reducer: Là các pure function, các hàm này lấy state hiện tại, kết hợp
với loại action, state mới và logic được khai báo trong reducer để cho một
state có giá trị khác state ban đầu.
Slice: Với redux, khi định nghĩa action và reducer phải tách ra thành
các file khác nhau, trong khi đó đối với slice, reducer và action được kết hợp
lại trong cùng 1 file
2.3.3.7. Redux Thunk
Đối với Redux, Action chỉ nhận vào POJO rồi chuyển qua cho reducer.
Tuy nhiên, 1 số trường hợp action cần truyền vào function (Async Action)
cho các tác vụ bất đồng bộ (như gọi api, settimeout)

19


Redux Thunk là một Middleware cho phép bạn viết các Action trả về
một function thay vì một plain javascript object bằng cách trì hỗn việc
đưa action đến reducer.
Redux Thunk được sử dụng để xử lý các logic bất đồng bộ phức tạp
cần truy cập đến Store hoặc đơn giản là việc lấy dữ liệu như Ajax request.
2.3.3.8. Ưu điểm của React-Native
Có thể tái sử dụng code
React Native cho phép các developer có thể tái sử dụng code trong khi
phát triển các ứng dụng đa nền tảng. Đặc biệt, developer có thể tái sử dụng
hầu như 80-90% các đoạn code thay vì phải viết và tạo các ứng dụng riêng
biệt cho các nền tảng khác nhau. Ưu điểm này giúp người dùng:
•
•
•
•

Tiết kiệm thời gian và giảm chi phí phát triển của một ứng dụng.
Tận dụng nguồn nhân lực tốt hơn
Duy trì ít code hơn, ít bugs hơn
Các tính năng trong cả 2 platforms cũng tương tự nhau.

Cộng đồng người dùng lớn
React Native được đánh giá là một trong những Framework được yêu
thích nhất (khảo sát của stack overflow vào năm 2019). Nhờ cộng đồng
người dùng rất lớn trên toàn thế giới, bạn có thể tìm sự hỗ trợ nếu gặp phải
bugs.
Tính ổn định và tối ưu
• Được phát triển bởi Facebook, React Native có hiệu năng ổn định
khá cao
• Mã React Native giúp đơn giản hóa q trình xử lý dữ liệu.
• Đội ngũ phát triển ứng dụng khơng q lớn.
• Xây dựng ứng dụng ít native code nhất cho nhiều hệ điều hành
khác nhau.
• Trải nghiệm người dùng tốt hơn khi so sánh với ứng dụng Hybrid.

20


2.3.3.9. Nhược điểm của React-Native
• Yêu cầu Native code.
• Hiệu năng kém hơn so với Native App.
• Bảo mật chưa thật sự tốt do dùng JavaScript. Do sử dụng
JavaScript, người dùng cũng sẽ bị ảnh hưởng bởi những đặc
điểm của JavaScript: dễ làm dễ sai, dẫn đến khó duy trì về
sau.
• Quản lý bộ nhớ.

• Tùy biến chưa thật sự tốt ở một số module.
• Khơng thích hợp cho các app cần năng lực tính tốn cao
(hash, crypto, etc).

2.3.4. .NET core
2.3.4.1. Tổng quan về .NET core 6
.NET core là một framework được phát hành bởi Microsoft vào năm 2016 để
xây dựng ứng dụng trên đa nền tảng (window, linux và macOS).
Có thể xây dựng ứng dụng Desktop (WPF, Winform), website, mobile, game,
IOT và cả AI.
Các phiên bản của .NET Core: (từ .net 5 (2020) microsoft đã bỏ chữ core và gọi
chung là .NET), khuyến khích dùng các phiên bản LTS (Long term support)
được MS hỗ trợ lâu dài.
.NET core là mã nguồn mở (open source) và source code được public trên
github, các lập trình viên có thể vào để đóng góp phát triển giúp mã nguồn tốt
hơn.
2.3.4.2. Ưu điểm
.NET Core hỗ trợ xây dựng ứng dụng đa nền tảng (window, linux, MacOS), .NET
Framework chỉ hỗ trợ trên window.

21


.NET Core ra đời sau nên Microsoft ra đời các phiên bản mới liên tục, cập nhật
theo từng năm (tương lai), .NET Framework ra đời lâu và Microsoft ngừng cập
nhật phiên bản(lớn) mới.
.NET Core có nhanh và nhẹ hơn .NET Framework
.NET Core khơng cần tải tồn bộ framework, chỉ cần cài bộ SDK và khi cần
package nào thfi tải xuống nên nhẹ hơn. .NET Framework phải cài toàn bộ
framework đầy đủ thư viện lên window nên rất nặng.

.NET Core là mã nguồn mở nên các nhà phát triển (developers) có thể đóng góp
để gúp mã nguồn tốt hơn.

2.3.5. SQL server
2.3.5.1. Tổng quan về SQL Server
Là phần mềm được Microsoft phát triển dựa trên RDBMS.
Là hệ quản trị cơ sở dữ liệu quan hệ đối tượng.
Là một nền tảng độc lập.
Phần mềm sử dụng cả giao diện dòng lệnh và giao diện GUI.
2.3.5.2. Mục đích
Tạo cơ sở dữ liệu.
Duy trì cơ sở dữ liệu.
Phân tích dữ liệu bằng SSAS - SQL Server Analysis Services.
Tạo báo cáo bằng SSRS - SQL Server Reporting Services.
Thực hiện quá trình ETL (Extract-Transform-Load) bằng SSIS SQL Server
Integration Services.
2.3.5.3. Ưu điểm
Có thể cài đặt nhiều phiên bản MS SQL cho một máy chủ.

22


Duy trì riêng biệt các mơi trường (sản xuất, phát triển và thử nghiệm).
Giảm vấn đề tạm thời trên cơ sở dữ liệu.
Tách biệt những đặc quyền bảo mật.
Duy trì máy chủ dự phịng.

2.3.6. Phần mềm lập trình VSCode
2.3.6.1. Tổng quan về VSCode
Visual Studio Code (VS Code hay VSC) là một trong những trình soạn

thảo mã nguồn phổ biến nhất được sử dụng bởi các lập trình viên. Nhanh,
nhẹ, hỗ trợ đa nền tảng, nhiều tính năng và là mã nguồn mở chính là những
ưu điểm vượt trội khiến VS Code ngày càng được ứng dụng rộng rãi.

Phần mềm lập trình VSCode

Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux
và macOS, Visual Studio Code được phát triển bởi Microsoft. Nó được xem
là một sự kết hợp hoàn hảo giữa IDE và Code Editor.
Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax
highlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn.
Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay

23


đổi theme, phím tắt, và các tùy chọn khác.
2.3.6.2. Ưu điểm của VSCode
Hỗ trợ nhiều ngơn ngữ lập trình
Visual Studio Code hỗ trợ nhiều ngơn ngữ lập trình như C/C++, C#, F#,
Visual Basic, HTML, CSS, JavaScript, … Vì vậy, nó dễ dàng phát hiện và
đưa ra thông báo nếu chương chương trình có lỗi.
Hỗ trợ đa nền tảng
Các trình viết code thông thường chỉ được sử dụng hoặc cho Windows
hoặc Linux hoặc Mac Systems. Nhưng Visual Studio Code có thể hoạt động
tốt trên cả ba nền tảng trên.
Cung cấp kho tiện ích mở rộng
Trong trường hợp lập trình viên muốn sử dụng một ngơn ngữ lập trình
khơng nằm trong số các ngơn ngữ Visual Studio hỗ trợ, họ có thể tải xuống
tiện ích mở rộng. Điều này vẫn sẽ khơng làm giảm hiệu năng của phần mềm,

bởi vì phần mở rộng này hoạt động như một chương trình độc lập.
Kho lưu trữ an toàn
Đi kèm với sự phát triển của lập trình là nhu cầu về lưu trữ an toàn. Với
Visual Studio Code, người dùng có thể hoàn toàn yên tâm vì nó dễ dàng kết
nối với Git hoặc bất kỳ kho lưu trữ hiện có nào.
Hỗ trợ web
Visual Studio Code hỗ trợ nhiều ứng dụng web. Ngoài ra, nó cũng có một
trình soạn thảo và thiết kế website.
Lưu trữ dữ liệu dạng phân cấp
Phần lớn tệp lưu trữ đoạn mã đều được đặt trong các thư mục tương tự
nhau. Ngoài ra, Visual Studio Code còn cung cấp các thư mục cho một số tệp

24