Tìm hiểu về NEXTJS và xây dựng ứng dụng bán sách (báo cáo cuối kì đồ án 1)

ĐẠI HỌC QUỐC GIA THÀNH PHỐ 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 MƠN HỌC
ĐỒ ÁN 1 – SE121.M21

ĐỀ TÀI: TÌM HIỂU VỀ NEXTJS
VÀ XÂY DỰNG ỨNG DỤNG BÁN SÁCH

Giảng viên hướng dẫn:
Thầy Huỳnh Tuấn Anh
Sinh viên thực hiện:
19522006 – Nguyễn Cơng Phi
19522055 – Lương Thiện Phước

Thành phố Hồ Chí Minh, tháng 6 năm 2022
1


ĐẠI HỌC QUỐC GIA THÀNH PHỐ 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 MƠN HỌC
ĐỒ ÁN 1 – SE121.M21

ĐỀ TÀI: TÌM HIỂU VỀ NEXTJS
VÀ XÂY DỰNG ỨNG DỤNG BÁN SÁCH

Giảng viên hướng dẫn:

Thầy Huỳnh Tuấn Anh
Sinh viên thực hiện:
19522006 – Nguyễn Cơng Phi
19522055 – Lương Thiện Phước

Thành phố Hồ Chí Minh, tháng 6 năm 2022
2


Nhận xét của giảng viên:
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………

……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
3


LỜI CẢM ƠN
Lời đầu tiên, nhóm xin cảm ơn đến thầy Huỳnh Tuấn Anh đã tận tình hướng dẫn
nhóm, hỗ trợ giải đáp những thắc mắc của nhóm và cung cấp những kiến thức về công
nghệ cũng như các vấn đề về hiện thực ý tưởng trong suốt thời gian thực hiện đồ án
“Tìm hiểu NextJS và xây dựng ứng dụng bán sách”.
Hi vọng với sự giúp đỡ, hỗ trợ từ thầy, nhóm có thể tiếp tục phát triển ứng dụng
của mình theo hướng mà nhóm đề ra với mục đích mở rộng đề tài, tối ưu hố trải nghiệm
của người dùng.
Tuy vậy, do kinh nghiệm của nhóm cịn hạn chế và nhóm đang trong q trình
vừa tìm hiểu cơng nghệ mới, vừa áp dụng cơng nghệ đó để thực hiện ứng dụng nên vẫm
cịn những hạn chế, thiếu sót. Chúng em mong nhận được sự đóng góp ý kiến của thầy
và các bạn để đề tài được hoàn thiện hơn.
Chúng em xin chân thành cảm ơn!
Thành Phố Hồ Chí Minh, ngày 10/6/2022

4


LỜI MỞ ĐẦU
Từ xưa đến nay, sách đã là một công cụ dùng để ghi chép, lưu trữ, lưu truyền

những kiến thức phổ biến và được sử dụng rộng rãi. Hầu hết những kiến thức, dữ liệu
được lưu truyền đến thời nay đều được ghi lại trong những cuốn sách. Tuy nhiên, hiện
tại, việc đọc sách với giởi trẻ dần bị lãng qn do có rất nhiều hình thức giải trí mới làm
con người có ít thời gian hơn và ngại dành thời gian cho việc đọc sách. Nhằm để hỗ trợ
và giúp cho người muốn đọc sách có cách tiếp cận với những cuốn sách tốt hơn, chúng
em muốn tạo nên một ứng dụng hỗ trợ bán sách giúp tối ưu hoá trải nghiệm người dùng
và quản lý việc bán sách, tiến đến mở rộng ứng dụng và hỗ trợ tốt nhất cho người dùng.
Các tính năng chính của webapp hỗ trợ là: quản lý sách, quản lý đơn hàng, quản
lý thơng tin cá nhân với những tính năng đặc biệt như hỗ trợ sách điện tử để phù hợp
với người dùng, hỗ trợ tìm kiếm sách, gợi ý sách cho người dùng. Ứng dụng vẫn đang
trong thời gian phát triển nhưng đã đủ các tính năng để người dùng có thể sử dụng ứng
dụng, từ đó có thể nhận được những phản hồi của người dùng để cải thiện sản phẩm sao
cho phù hợp với người sử dụng nhất.

5


MỤC LỤC
I.

GIỚI THIỆU TỔNG QUAN .................................................................................. 1
I.1 Thơng tin nhóm .................................................................................................... 1
I.2 Tổng quan đề tài .................................................................................................... 1
I.2.1 Tổng quan công nghệ ..................................................................................... 1
I.2.3 Ứng dụng vào đồ án ....................................................................................... 2

II.

TÌM HIỂU VỀ NEXTJS ........................................................................................ 3
II.1 NextJS là gì ? ....................................................................................................... 3

II.1.1 Khái niệm ...................................................................................................... 3
II.1.2 Lịch sử ra đời ................................................................................................ 3
II.1.3 Tại sao nên sử dụng NextJS .......................................................................... 4
II.1.4 So sánh với các công nghệ khác ................................................................... 4
II.2 Frontend: ............................................................................................................. 6
II.2.1 Nền ReactJS .................................................................................................. 6
II.2.2 Điểm mới của NextJS ................................................................................... 9
II.2.3 Các công nghệ khác được sử dụng kết hợp ................................................ 10
II.3 Backend.............................................................................................................. 11
II.4 Database ............................................................................................................. 11
II.5 Ưu nhược điểm của NextJS ............................................................................... 12
II.6 Các bước thiết lập cấu trúc cơ bản của đồ án: ................................................... 13

III ÁP DỤNG CÔNG NGHỆ VÀO ĐỒ ÁN “ỨNG DỤNG BÁN SÁCH” ................ 16
III.1 Giới thiệu chung về đồ án................................................................................. 16
III.1.1 Lý do chọn đề tài ....................................................................................... 16
III.1.2 Báo cáo khả thi .......................................................................................... 16
III.1.3 Tầm nhìn và phạm vi ................................................................................. 19


III.2 Quy trình thực hiện đồ án ................................................................................. 20
III.3 Danh sách tính năng ......................................................................................... 20
III.4 Yêu cầu phi chức năng ..................................................................................... 22
III.5 Thiết kế database .............................................................................................. 23
III.5.1 Danh sách các bảng ................................................................................... 23
III.5.2 Chi tiết các bảng ........................................................................................ 23
III.6 Thiết kế giao diện ............................................................................................. 26
III.6.1 Danh sách các màn hình ............................................................................ 26
III.6.2 Chi tiết các màn hình ................................................................................. 27
III.7 Đặc tả Usecase .................................................................................................. 35

III.7.1 Sơ đồ usecase tổng quát............................................................................. 35
III.7.2 Đặc tả chi tiết usecase................................................................................ 36
III.8 Sơ đồ hoạt động ................................................................................................ 46
III.8.1 Danh sách các sơ đồ .................................................................................. 46
III.8.2 Chi tiết các sơ đồ ....................................................................................... 46
IV Tổng hợp ................................................................................................................. 61
IV.1 Kết quả ............................................................................................................. 61
IV.1.1 Các tính năng đã làm được ........................................................................ 61
IV.1.2 Những điều chưa làm được ....................................................................... 61
IV.2 Hướng phát triển tiếp theo ................................................................................ 61
IV.3 Đường dẫn Github ............................................................................................ 63
IV.4 Đường dẫn Figma ............................................................................................. 63
IV.5 Bảng phân công công việc ............................................................................... 64
TÀI LIỆU THAM KHẢO ............................................................................................ 65


I.

GIỚI THIỆU TỔNG QUAN
I.1 Thơng tin nhóm

-

Thành viên 1
o MSSV: 19522006
o Tên: Nguyễn Công Phi
o Email:

-

Thành viên 2
o MSSV: 19522055
o Tên: Lương Thiện Phước
o Email:
I.2 Tổng quan đề tài
Với các doanh nghiệp trong thời đại công nghệ, website là cơng cụ vơ cùng

cần thiết. Nó mang lại hàng loạt tiện ích tuyệt vời, giúp việc kinh doanh trở nên dễ
dàng và nhanh chóng hơn bao giờ hết. Do đó, việc thiết kế, phát triển một ứng dụng
web hỗ trợ cho các doanh nghiệp tăng trưởng mạnh mẽ. Hiện nay, có rất nhiều
framework hoặc thư viện hỗ trợ việc phát triển một ứng dụng web một cách nhanh
chóng, tiện lợi nhưng vẫn đảm bảo tính bảo mật thơng tin khách hàng.
I.2.1 Tổng quan công nghệ
I.2.1.1 NextJS
-

Đây là công nghệ chính được sử dụng trong đồ án.

-

Nextjs là một React Framework, nó sẽ đặt bạn vào một con đường dễ dàng để

xây dựng React application. Nextjs được sử dụng trên hàng nghìn website và trên
rất nhiều website lớn trên thế giới. Vì vậy cộng đồng hỗ trợ lớn sẽ giúp bạn dễ dàng
xây dựng ứng dụng cả mình một cách nhanh chóng và đầy đ. NextJS giúp các nhà
phát triển tạo ra một giao diện website theo hệ thống các component dễ dàng quản
lý, bảo trì và mở rộng ứng dụng. Các thư viện hỗ trợ cho thư viện này có thể giúp
các nhà phát triển tạo ra một trang web thân thiện với người dùng, giao diện thu hút
khách hàng
1

I.2.1.2 MongoDB
-

MongoDB là một database hướng tài liệu (document), một dạng NoSQL

database. Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để
thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON. Các
collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ
không cần tuân theo một cấu trúc nhất định.
I.2.1.3 Tailwind
-

Tailwind à một utility-first CSS framework, nó cũng giống như Bootstrap, nó có

những class built-in mà chúng ta có thể dùng. Tailwind CSS có nhiều các class bao
gồm các thuộc tính CSS khác nhau và quan trọng, chúng ta có thể dễ dàng mở rộng
tạo mới ra những class bằng chính những class của nó.
I.2.3 Ứng dụng vào đồ án
-

Trong cuộc sống hiện đại ngày nay, với sự bùng nổ cơng nghệ kĩ thuật số, vai

trị của các thiết bị thông minh như điện thoại, máy tính đã trở nên khơng thể tách
rời trong cơng việc, học tập cũng như nhu cầu giải trí hằng ngày của mọi người. Đặc
biệt trong đại dịch COVID-19 khiến cho nhiều nhà sách trì trệ và đóng cửa tại Việt
Nam nói riêng và cả thế giới nói chung. Đọc sách giúp chúng ta lĩnh hội kiến thức
của mọi lĩnh vực trong cuộc sống, cũng chính là chìa khóa vươn tới thành cơng
nhanh chóng hơn. Mỗi cuốn sách đều là bậc thang nhỏ mà khi bước lên, chúng ta

tiến tới gần quan niệm về cuộc sống tốt đẹp nhất về cuộc sống. Vì vậy bọn em muốn
tạo ra một website bán sách online với mục tiêu giúp người dễ dàng tiếp cận với
những cuồn sách mà mình u thích.
-

Nhằm để thực hiện ý tưởng đó, chúng em cần một cơng nghệ để có thể hỗ trợ

SEO tốt khi deploy lên internet và dễ viết, dễ sửa lỗi, có nguồn tài liệu và cộng đồng
hỗ trợ dồi dào, đông đảo. Sau một thời gian tìm hiểu, nhóm em đã chọn cơng nghệ
NextJS, một framework hỗ trợ lập trình web với nền là ReactJS – một công nghệ
đang rất hot trong thời gian gần đây.

2


II.

TÌM HIỂU VỀ NEXTJS
II.1 NextJS là gì ?
II.1.1 Khái niệm
II.1.2 Lịch sử ra đời

-

Next.js được phát hành lần đầu tiên dưới dạng một dự án mã nguồn mở trên

GitHub vào ngày 25 tháng 10 năm 2016. Ban đầu, NextJS được phát triển sựa trên
6 nguyên tắc:
o Sử dụng các hàm tiện ích mà khơng cần phải thiết lập
o Tất cả các chức năng đều được viết bằng JavaScript

o Tự động phân tách mã và kết xuất máy chủ
o Tìm nạp dữ liệu có thể định cấu hình
o Dự đốn, phân tích u cầu
o Đơn giản hóa việc triển khai
-

Tháng 3 năm 2017, Next.js 2.0 có các cải tiến giúp web hoạt động trên trang web

nhỏ tốt hơn và làm tăng hiệu quả xây dựng và cải thiện khả năng mở rộng các tính
năng của module đóng.
-

Tháng 9 năm 2018, Next.js 7.0 cải thiện khả năng xử lý lỗi, hỗ trợ API của React

để cải thiện việc xử lý route, nâng cấp lên webpack 4.
-

Tháng 2 năm 2019, Next.js 8.0 ra đời giúp triển khai ứng dụng không máy chủ,

mã được chia thành các hàm lambda để chạy theo yêu cầu, phiên bản này cũng giảm
tài nguyên cần thiết, các export tĩnh và cải thiện prefetch.
-

Tháng 3 năm 2020, Next.js 9.3 được phát hành với khả năng tối ưu hoá với các

Sass toàn cục và hỗ trợ CSS module.
-

Tháng 7 năm 2020, Next.js 9.5 có khả năng thêm tái tạo tĩnh, hỗ trợ redirect.

-

Tháng 6 năm 2021, Next.js 11 được ra đời đã hỗ trợ được webpack 5, code được

chỉnh sửa và chạy được trong thời gian thực, chuyển đổi để tương thích với
ReactApp.
-

Vào ngày 26 tháng 10 năm 2021, Next.js 12 được phát hành và cũng là bản mới

nhất hiện nay, bổ sung một trình biên dịch Rust, giúp quá trình biên dịch nhanh hơn,
hỗ trợ AVIF, Edge Functions & Middleware và Native ESM & URL Import.

3


II.1.3 Tại sao nên sử dụng NextJS
-

Đối với một trang web bán hàng thì việc marketing ln là một vấn đề để đảm

bảo rằng người dùng có thể lựa chọn sản phẩm của web mình mà khơng chọn sản
phẩm của web khác. Ngoài việc đặt quảng cáo trên google hay trên các nền tảng
mạng xã hội thì người phát triển web còn phải làm gia tăng thứ hạng của trang web
trên SEO để trang web có thể hiển thị ở các trang đầu khi tìm kiếm.
-

Các cơng cụ tìm kiếm sẽ sử dụng các Bot để lấy dữ liệu, do đó các ứng dụng

CSR sẽ khó để lấy dữ liệu hơn từ đó việc hỗ trợ tìm kiếm sẽ khó khăn hơn với

trang web. Dù các Bot hiện tại đã có khả năng lấy dữ liệu với ứng dụng CSR
nhưng việc này cịn hạn chế.
-

Do đó việc trang web tích hợp, tăng hiệu suất SEO với việc sử dụng SSR sẽ là

một lựa chọn tối ưu hơn nếu muốn tạo ra một trang web bán hàng. Ưu điểm chính
của Next.js là hỗ trợ SSR tích hợp để tăng hiệu suất và SEO. Server Side
Rendering (SSR) hoạt động bằng cách thay đổi luồng yêu cầu (altering the request
flow) của ứng dụng React để tất cả các thành phần ngoại trừ máy khách gửi thơng
tin của họ đến máy chủ.
➔ Do đó, việc sử dụng NextJS gần như là một lựa chọn hồn hảo cho trang web
mà nhóm em đang muốn thực hiện - ứng dụng web bán sách.
II.1.4 So sánh với các công nghệ khác
-

So sánh với công nghệ CSR của NextJS và SSR của ReactJS:
o Thời gian tải trang lần đầu: là thời gian trung bình khi người dùng
tải trang web lần đầu tiên. Ở lần tải đầu tiên ở CSR, trình duyệt tải HTML,
CSS, và tất cả các script sau đó biên dịch HTML thành nội dung có thể sử
dụng trên trình duyệt. Khoảng thời gian này thường nhiều hơn là việc lấy về
một đoạn HTML đã được biên dịch và các script tương ứng. Do đó SSR sẽ
tốn ít thời gian hơn cho việc tải trang lần đầu.
o Lần thứ 2 và các lần tiếp theo: là thời gian trung bình cho việc di chuyển
từ trang này sang trang khác. Trong hồn cảnh này, bởi vì các đoạn sciprt cần
thiết đã được load trong CSR, thời gian tải là ít hơn với CSR. Nó sẽ khơng gửi
request tới server trừ khi Javascript cần được tải.

4

o Ảnh hưởng tới caching: Để tăng tốc các ứng dụng web nặng, mọi trình
duyệt, cũng như mọi web server đều triển khai các cơ chế caching để tăng tốc
ứng dụng. Điều này sẽ cải thiện thời gian tải toàn bộ của CSR cũng như SSR.
Tuy nhiên, có một lơi ịch mà chỉ có CSR mới có.
▪ CSR: cũng như việc các tải các module là không cần thiết, ứng dụng
CSR có thể hoạt động mà khơng cần tới Internet ( trừ khi cần gửi yêu
cần lấy data). Khi đã được load, ứng dụng không cần thiết gửi các yêu
cầu tới server lần nào nữa. Điều này làm cho các ứng dụng web khi
được chuyển hướng sẽ giống như một ứng dụng desktop.
▪ SSR: yêu cầu tới server luôn được gửi di. Do đó thời gian tải trang
là cao hơn so với CSR. Việc caching đã cải thiện nội dung render cho
SSR cũng như scirpt được lấy ra từ cache. Ảnh dưới dây mơ tả cách
trình duyệt xử lí các yêu cầu được lặp lại cho script đã được cache.
o Ảnh hưởng tới SEO: Với một trang web doanh nghiệp, tối ưu nó cho các
cơng cụ tìm kiếm là điều cần thiết. Các máy tìm kiếm đọc và hiểu trang web
của bạn sử dụng các bot tự động gọi là các crawlers. Các crawlers thường
quan tâm đến các metadata của trang web hơn là nội dung thực sự. Do đó,
điều quan trọng cần chú ý là trang web của bạn cần có các metadata chuẩn
SEO cho các máy tìm kiếm.
▪ CSR: nội dung trang web được sinh ra tự động nhờ Javascript. Do
đó việc thay đổi metadata từ trang này trang web sẽ phải tiến hành bằng
Javascript. Trong quá khứ, các máy tìm kiếm thường khơng thích chạy
Javscript trong khi crawlers đang quét trang web. Tuy nhiên Google
đang chấp thuận chạy Javascipt, xu hướng đang thay đổi.
▪ SSR: trang web hoàn chỉnh đã được biên dịch với đúng các
metadata và gửi tới trình duyệt. Điều này đàm bảo metadata của trang
web ln ln chính xác bất kể crawlers có cho phép Javascript sử
dụng hay không. Điều này dẫn tới SSR là cách tiếp cận tiếp hơn cho
SEO so với CSR.

5


II.2 Frontend:
II.2.1 Nền ReactJS
II.2.1.1 ReactJS là gì
-

React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu

hướng Single Page Application. Trong khi những framework khác cố gắng hướng
đến một mơ hình MVC hồn thiện thì React nổi bật với sự đơn giản và dễ dàng phối
hợp với những thư viện Javascript khác. Nếu như AngularJS là một Framework cho
phép nhúng code javasscript trong code html thơng qua các attribute như ng-model,
ng-repeat...thì với react là một library cho phép nhúng code html trong code
javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS.Tích
hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn.
II.2.1.2 Component
-

React được xây dựng xung quanh các component, chứ không dùng template như

các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những
thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều
nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có
thể chứa thành phần khác. Mỗi component trong React có một trạng thái riêng, có
thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của
trạng thái. Mọi thứ React đều là component. Chúng giúp bảo trì mã code khi làm
việc với các dự án lớn. Một react component đơn giản chỉ cần một method render.

Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo.
-

Có 2 loại component:
o Functional (Stateless) components: 1 functional component là một hàm
Javascript (hoặc ES6) trả về 1 phần tử/1 element React.

Functional

components cũng được nói với một cái tên là stateless components bởi vì
chúng ta khơng thể làm nhiều thứ phức tạp như quản lý React State (data)
hoặc phương thức life-cycle trong functional components. Tuy nhiên, React
giới thiệu React Hooks trong versions 16.8, giờ nó cho phép chúng ta sử dụng
state và những features khác trong functional components.

6


o Class (Stateful) components: Các Class components là những class ES6.
Chúng phức tạp hơn functional components ở chỗ nó cịn có: phương thức
khởi tạo, life-cycle, hàm render() và quản lý state (data). class
ExampleComponent kế thừa Component, vì vậy React hiểu class này là một
component, và nó renders (returns) 1 React Element.
II.2.1.3 Component life cycle

-

componentWillMount đây là method sẽ được thực thi trước khi 1 component

được render trên cả server side và client side.

-

componentDidMount method này được thực thi khi 1 component được render

trên client side. Đây là nơi các hàm AJAX requests, DOM or update state được thực
thi. Method này cũng đucợ sử dụng để kết nối với các JS Framework khác và các
function với delayed execution như setTimeout or setInterval.
-

componentWillReceiveProps sẽ được thực thi ngay khi thuộc tính được update

và trước khi component được render lại. Trong ví dụ dưới, ta sẽ sử dung method này
vùng với setNewNumber để update state.
-

shouldComponentUpdate sẽ trả về kết quả true or false. Phương thức này sẽ

xác định 1 component có được update hay không. Mặc định giá trị này là true. Nếu
bạn không muốn component render lại sau khi update state hay props thì return giá
trị thành false. Các bạn xem ví dụ dưới để hiểu rõ.
7


-

componentWillUpdate được gọi khi chúng ta update state của component trước

khi nó render lại.
-

componentDidUpdate sau khi componentWillUpdate ở trên được gọi xong thì

đến lượt thằng này được goi.
-

componentWillUnmount được gọi khi chúng ta unmout 1 component kiểu như

xóa nó khỏi react.
-

Việc sử dụng trong chương trình cũng phụ thuộc vào loại component đang sử

dụng:
o Functional Component - Stateless Components: Trái ngược với Class
Component, Functional Component trước đây vốn không thể làm những thứ
phức tạp như làm việc quản lí với state. Nhưng với những bản mới nhất của
React đã cập nhật thêm React Hooks để cho phép chúng ta làm việc đó thơng
qua những function như useState(), useEffect(), useRef(),…
o Tóm lại tùy vào nhu cầu sử dụng mà chúng ta có thể linh hoạt lựa chọn
sử dụng Class Components hay Functional Components. Theo xu hướng hiện
tại trên cá nhân tôi thấy việc sử dụng Functional Components rất tiện lợi cho
việc bảo trì (maintain) sau này cũng như nhiều developer đang sử dụng
Functional Components thay cho Class Components. Một phần nữa theo cá
nhân tôi thấy việc sử dụng Functional Components cũng dễ đọc hiểu hơn cho
những người phát triển dự án sau này.
II.2.1.4 ReactHook
-

Hooks là các hàm mà cho phép bạn “hook into (móc vào)” trạng thái của React

và các tính năng vịng đời từ các hàm components. Hooks khơng hoạt động bên
trong classes — chúng cho phép bạn sử dụng React khơng cần classes. Các hooks
điển hình như là useEffect, useState, useRef, useContext,…
o useState: hàm này nhận đầu vào là giá trị khởi tạo của 1 state và trả ra 1
mảng gồm có 2 phần tử, phần tử đầu tiên là state hiện tại, phần tử thứ 2 là 1
function dùng để update state (giống như hàm setState của class component
cũ).

8


o useEffect: Nó giúp chúng ta xử lý các side effects, useEffect sẽ tương
đương với các hàm componentDidMount, componentDidUpdate và
componentWillUnMount trong LifeCycle.
o useReducer: Thực tế khi sử dụng useState thì nó sẽ trả về 1 phiên bản đơn
giản của useReducer, vậy nên chúng ta có thể coi useReducer như một phiên
bản nâng cao hơn dùng để thay thế cho việc sử dụng useState. Nếu đã làm
việc với React-Redux thì chắc hẳn bạn sẽ dễ dàng nhận ra flow quen thuộc
này phải khơng nào. Giống như reducer trong Redux thì useReducer cũng
nhận vào một reducer dạng (state, action) và trả ra một newState.
o useMemo: useMemo giúp ta kiểm soát việc được render dư thừa của các
component con, nó khá giống với hàm shouldComponentUpdate trong
LifeCycle. Bằng cách truyền vào 1 tham số thứ 2 thì chỉ khi tham số này thay
đổi thì thằng useMemo mới được thực thi.
o useCallback: useCallback có nhiệm vụ tương tự như useMemo nhưng
khác ở chỗ function truyền vào useMemo bắt buộc phải ở trong quá trình
render trong khi đối với useCallback đó lại là function callback của 1 event
nào đó như là onClick chẳng hạn.
II.2.1.5 Redux
-

Redux js là một thư viện Javascript giúp tạo ra thành một lớp quản lý trạng thái

của ứng dụng. Redux được xây dựng dựa trên nền tảng tư tưởng của ngôn ngữ Elm
và kiến trúc Flux do Facebook giới thiệu. Do vậy Redux thường là bộ đơi kết hợp
hồn hảo với React. Tuy nhiên hồn tồn có thể sử dụng với các framework khác
như Angular, Angular2, Backbone, Falcor, Deku.
II.2.2 Điểm mới của NextJS
-

Sử dụng next/head: Để hỗ trợ cho việc SEO cũng như chia sẻ thì nextjs cung

cấp cho chúng ta một component là next/head. Về cơ bản nội dung mà chúng ta khai
báo trong phần <head> này sẽ được thêm vào phần <head> trang html mà chúng ta
trả về cho user. Điều này đồng nghĩa với tùy trang ta có thể truyền thêm các thơng
tin như title, meta, or:image... để có thể share lên các trang khác như facebook.

9


-

Fetch dữ liệu từ server: Để có được các thơng tin về trang để điền vào phần

<head> ở trên thì ta sẽ cần thêm thơng tin từ phía server NextJS cung cấp cho chúng
ta thêm một hàm có tên là getInitialProps() có chức năng có thể hiểu là giống
như componentDidMount() nhưng hoạt động được với SSR và có là thay thế được
cho componentDidMount() với ứng dụng SSR.
-

Routing: Nextjs sẽ tự động tạo thành các router đối với các file mà bạn tạo trong

folder page/.
-

Link: Nextjs cung cấp sẵn cho chúng ta một component là next/link giống như

component <Link/> trong react-route .Ngồi ra next/link cịn nhận vào một tham số
nữa là as đóng vai trị như việc rewrite url.
II.2.3 Các cơng nghệ khác được sử dụng kết hợp
-

Tailwind
o Giới thiệu: là một utility-first CSS framework, có những class built-in
mà chúng ta có thể dùng. Tailwind CSS có nhiều các class bao gồm các thuộc
tính CSS khác nhau và quan trọng, chúng ta có thể dễ dàng mở rộng tạo mới
ra những class bằng chính những class của nó.
o Tại sao sử dụng: Tương tự Boostrap nhưng một điều tiện lợi khi dùng
framework này là chúng ta có nhiều class mới hơn tiện lợi hơn Boostrap. Và
hơn nữa, việc có nhiều thêm những class nhưng với quy tắc đặt tên cực kỳ
thân thiện với người dùng, người dùng cũng có thể nhìn vào class đó và có thể
biết được class này nó đang style cái gì. Chúng ta cũng phải nói đến khả năng
tùy biến và mở rộng cao, đem đến cho ta sự linh hoạt không giới hạn.

-

TypeScript
o Giới thiệu: Là một ngôn ngữ được Microsoft phát triển, nền tảng của
TypeScript ít nhiều cũng có sự liên quan đến JavaScript vì nó là một ngơn
ngữ mã nguồn mở của JavaScript. Vai trò của TypeScript là dùng để thiết kế

và xây dựng các dự án ứng dụng quy mơ lớn mang tính chất phức tạp.
o Tại sao sử dụng: Sử dụng TypeScript với những điểm nổi bật như: dễ phát
triển dự án lớn, được nhiều Framework sử dụng. hỗ trợ các tính năng của
Javascript phiên bản mới nhất và có mã nguồn mở.

10


II.3 Backend
-

Ngồi việc tạo các tuyến trang, có nghĩa là các trang được cung cấp cho trình

duyệt dưới dạng các trang Web, Next.js có thể tạo các tuyến API.
-

Đây là một tính năng rất thú vị vì nó có nghĩa là Next.js có thể được sử dụng để

tạo giao diện người dùng cho dữ liệu được lưu trữ và truy xuất bởi chính Next.js,
chuyển JSON thơng qua các u cầu tìm nạp. Các tuyến API hoạt động dưới thư
mục /pages/api/ và được ánh xạ tới /api/. Tính năng này là rất hữu ích khi tạo ứng
dụng.
-

Trong các tuyến đó, chúng ts viết mã Node.js (chứ khơng phải mã React). Đó là

một sự thay đổi mơ hình, từ đó chuyển từ front sang backend một cách liền mạch.
-

Chúng ta có một file /pages/api/*.js, có mục tiêu là trả lại dữ liệu dưới dạng

JSON.
-

Ngồi ra, backend cịn sử dụng nền NodeJS:
o Node.js là một hệ thống phần mềm được thiết kế để viết các ứng dụng
internet có khả năng mở rộng, đặc biệt là máy chủ web. Chương trình được
viết bằng JavaScript, sử dụng kỹ thuật điều khiển theo sự kiện, nhập/xuất
không đồng bộ để tối thiểu tổng chi phí và tối đa khả năng mở rộng

II.4 Database
-

Database được sử dụng là MongoDB. MongoDB là một hệ quản trị cơ sở dữ liệu

mã nguồn mở, là CSDL thuộc NoSql và được hàng triệu người sử dụng.
-

MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ

trong document kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ
rất nhanh. Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan
hệ (như MySQL hay SQL Server...) sử dụng các bảng để lưu dữ liệu thì với
MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng
-

So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ

ứng với row , MongoDB sẽ dùng các document thay cho row trong RDBMS.
-

Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu

lưu trữ không cần tuân theo một cấu trúc nhất định
-

Lý do sử dụng:
11


o MongoDB đáp ứng được yêu cầu phản hồi nhanh, truy vấn nhanh với
lượng request lớn do đó phù hợp với trang web bán hàng có nhiều dữ liệu
về sách.
II.5 Ưu nhược điểm của NextJS
-

Ưu điểm:
o Split code: Nó tự động breaks code để làm cho trang tải nhanh hơn. Đó là
lý do tại sao hầu hết các trang web lớn sử dụng Next.js đều có khả năng tải
trang nhanh hơn mặc dù chúng được xây dựng cho một lượng lớn người xem.
o Brings organic traffic: Các trang web được phát triển bằng Next JS khơng
chỉ nhanh mà cịn đơn giản để tìm kiếm và cung cấp trải nghiệm người dùng
tuyệt vời. Ba yếu tố: tốc độ, cấu trúc và trải nghiệm người dùng, là những yếu
tố xếp hạng quan trọng sẽ tăng thứ hạng trên cơng cụ tìm kiếm của Google
trang web.
o Trải nghiệm người dùng tốt: Việc thuận lợi nhất của việc sử dụng Next JS
là trải nghiệm người dùng, chỉ đứng thứ hai sau tốc độ. Marketers yêu thích
sự độc lập trong thiết kế, đặc biệt là trong ngành thương mại điện tử, nơi nhiều
cửa hàng trực tuyến trơng giống nhau và có một trải nghiệm người dùng tốt
sẽ giúp cửa hàng nổi bật hơn so với các đối thủ cạnh tranh.

o Bảo mật: An tồn vì nó khơng có liên kết trực tiếp đến database,
dependencies, user data hoặc thơng tin bí mật khác.
o Thời gian tải trang nhanh hơn: Tiếp theo, vì các trang web JS là tĩnh, chúng
cực kỳ nhanh và khách truy cập sẽ rất hài lịng với kết quả. Nó cũng có thể tự
động tối ưu hóa các trang bất cứ khi nào nó được yêu cầu.
o Cộng đồng hỗ trợ lớn: Next.Js là React framework nên rất dễ nhận được
sự hỗ trợ nhanh chóng khi bạn cần. Bạn khơng cần phải xây dựng nó từ đầu,
vì sẽ ln có một nhà phát triển React hỗ trợ nhanh chóng cho bạn.
o Server-side rendering: Cải thiện khả năng bảo vệ dữ liệu và tuân thủ PIPA.
Server-side rendering có các ưu điểm như là cải thiện hiệu năng, hỗ trợ SEO
tốt hơn, social sharing, có ít vấn đề hơn với khả năng tương thích của trình
duyệt.

-

Nhược điểm:
12


o Là một framework được cố định, có nghĩa là nó có một phương pháp và
bộ cơng cụ cụ thể mà nó muốn người dùng sử dụng để xây dựng các ứng
dụng của mình.
II.6 Các bước thiết lập cấu trúc cơ bản của đồ án:
-

Tạo base cho dụng next js bằng lệnh npx creat-app-next + [tên]

-

Cài đặt tailwind và config:

o Cài đặt tailwind

o Config tailwind

o Thêm đường dẫn tailwind đến css

o Chạy công cụ CLI cho tailwind

13


-

Sử dụng ngơn ngữ TypeScript:

-

Cấu hình redux cho ứng dụng:
o Tải redux

o Thiết lập reducer cho reducer cho redux. Ví dụ:

-

Connect Database và config với MongoDB
o Tải mongoDB

o Kết nối với database
import mongoose from "mongoose";
const connection = {};

14


async function dbConnect() {
if (connection.isConnected) {
return;
}
const db = await
mongoose.connect("mongodb+srv://nguyencongphi:9bBOmN0r0lXYw0xS
@sellingbook.oo2ez.mongodb.net/test",
{
useNewUrlParser: true,
useUnifiedTopology: true,
});
connection.isConnected = db.connections[0].readyState;
console.log("Connect OK!");
}
export default dbConnect;

15


III ÁP DỤNG CÔNG NGHỆ VÀO ĐỒ ÁN “ỨNG DỤNG BÁN SÁCH”
III.1 Giới thiệu chung về đồ án
III.1.1 Lý do chọn đề tài
- Sách là một nguồn kiến thức vô tận, chính vì vậy ai cũng ln mong muốn sở
hữu cho mình những nguồn thơng tin có giá trị một cách nhanh chóng với mức giá
tốt nhất. Để đáp ứng được nhu cầu này, bọn em quyết định chọn đề tài website bán
sách online để giúp khách hàng mua sách một cách nhanh nhất. Người dùng sẽ sở

hữu được quyển sách mong muốn với mức giá cực tốt kèm nhiều ưu đãi.
III.1.2 Báo cáo khả thi
III.1.2.1 Giới thiệu dự án
-

Website mà nhóm em xây dựng là web sellingbook với nền tảng ban đầu là một

web bán sách và tích hợp thêm các tính năng khác cho người dùng. Sau đó có thể
phát triển theo hướng xây dựng cộng đồng cho những người sử dụng sách hoặc nơi
để người dùng mua và tặng sách, đọc sách ebook với các chế độ tối ưu hoá để phục
vụ nhu cầu đọc sách mọi lúc mọi nơi của người dùng.
III.1.2.2 Mục tiêu dự án
-

Vấn đề nghiên cứu đặt ra ở dự án này là: Làm sao để thu hút được khách hàng

đến với cửa hàng và nhận ra được các giá trị của sách? Làm thế nào để mọi người
hiểu được ý nghĩa của việc đọc sách mang lại là gì ? Khách hàng sẽ được những lời
ích và giá trị gì từ việc mua sách online ?
-

Để trả lời cho các câu hỏi trên thì sản phẩm của dự án cần đạt được các mục tiêu

như sau:
o Tạo ra nhiều voucher hấp dẫn để thu hút khách hàng
o Tạo cho khách hàng cảm giác tiện lợi của ứng dụng.
o Bố cục rõ ràng, trực quan
o Những bài blog giúp khác hàng hiểu rõ hơn về những khu du lịch mà họ
muốn tìm hiểu
o Đánh giá chi tiết tưng sản phẩm, để người có một cái nhìn trực quan về

sách cũng như tìm hiểu về sách

16


III.1.2.3 Phân tích thiết kế:
III.1.2.3.1 Khách hàng:
-

Người dùng phổ thơng
III.1.2.3.2 Phạm vi dự án

-

Dự án xây dựng ban đầu hướng đến người dùng tại Việt Nam và người dùng

ngôn ngữ Tiếng Việt.
III.1.2.3.3 Các chức năng chính
-

Đối với người quản trị:
o Chức năng Thêm/Xóa/Sửa các mặt hàng
o Quản lý người dùng
o Chức năng xác định trạng thái đơn hàng
o Chức năng thống kê doanh thu của cửa hàng

-

Đối với khách hàng:
o Chức năng Thêm/Xóa sản phẩm khỏi giỏ hàng

o Chức năng mua hàng
o Chức năng đăng ký/ đăng nhập
o Chức năng cập nhật thông tin cá nhân
o Chức năng theo dõi đơn hàng
o Chức năng đánh giá sản phẩm
III.1.2.3.4 Lợi ích của dự án

-

Hỗ trợ người dùng

-

Công nghệ được sử dụng
o Môi trường phát triển : NODEJS
o Framework: ExpressJS (Backend) và NextJS (Frontend)
o Thư viện hổ trợ: Redux, Mui, Tailwind
o Cơ sở dữ liệu: MongoDB
o Ngôn ngữ: TypeScript
III.1.2.3.5 Nguồn lực dự án

-

Các thành viên
17


o Nguyễn Công Phi
o Lương Thiện Phước
III.1.2.3.6 Rủi ro dự án

-

Nhìn chung rủi ro dự án thấp. Việc phần mềm gặp sự cố trầm trọng ở mức xấu
nhất cũng sẽ chỉ đem lại phiền hà về mặt thời gian đối với người dùng. Các rủi
ro có thể có bao gồm
o Cơ sở dữ liệu gặp trục trặc. Khiến dữ liệu bị mất hoặc không sử dụng
được
▪ Giải pháp thay thế: Liên hệ người quản trị để được hổ trợ.
III.1.2.4 Kế hoạch tài chính
III.1.2.4.1 Nguồn chi phí cho dự án

-

Tổng mức đầu tư: 0đ

-

Chi phí con người : Khơng có

-

Chi phí tài liệu, cơng cụ: Khơng có

-

Tài liệu giấy : 0đ
III.1.2.4.2 Nguồn vốn

-

Chủ yếu từ thành viên trong nhóm
III.1.2.5 Thuận lợi và thách thức

-

Về mặt thuận lợi:
o Nhóm phát triển có định hướng về quy định phát triển phần mềm từ trước
o Tài liệu về quy trình phát triển phần mềm khá dồi dào về số lượng lẫn
chất lượng
o Nhiều nguồn tài liệu giúp nhà phát triển làm quen với công nghệ mới một
cách nhanh chóng
o Nhóm có tinh thần hăng say làm việc
o Đề tài có tính gần gũi cao với nhóm phát triển

-

Về mặt khó khăn:
o Nhiều cơng nghệ mới u cầu nhóm phát triển phải tìm hiểu kỹ

18