Tìm hiểu react express và xây dựng ứng dụng minh họa

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.. Kết quả hướng

ĐẠ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 2

Đề tài TÌM HIỂU REACT - EXPRESS VÀ XÂY

DỰNG ỨNG DỤNG MINH HỌA Giảng viên hướng dẫn: ThS NGUYỄN CÔNG HOAN

Sinh viên thực hiện:

NGUYỄN TRẦN HỮU ĐĂNG 18520014

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

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

………

.………

………

.………

………

.………

………

.………

………

.………

………

.………

………

.………

………

.………

………

.………

………

.………

………

.………

………

.………

………

LỜI CẢM ƠN

Để thực hiện tốt đề tài này, với tất cả sự kính trọng, nhóm em xin kính gửi lời cảm

ơn đến thầy Nguyễn Công Hoan đã trực tiếp giảng dạy, truyền đạt và hỗ trợ cho nhóm trong quá trình nghiên cứu để nhóm em hoàn thành đề tài này

Trong quá trình thực hiện, cũng như quá trình làm báo cáo, chúng em khó tránh khỏi những sai sót, nhóm em hi vọng thầy bỏ qua cũng như chúng em rất mong nhận được

ý kiến đóng góp của thầy để có thể học thêm được nhiều kinh nghiệm để hoàn thành tốt những đồ án lần sau Một lần nữa nhóm em xin chân thành cảm ơn thầy

Chúng em xin chân thành cảm ơn!

Mục lục

I GIỚI THIỆU TỔNG QUAN 1

1 Thông tin nhóm 1

2 Tổng quan đề tài 1

1.1 Giới thiệu đề tài 1

1.2 Phạm vi nghiên cứu 2

1.3 Nội dung nghiên cứu 2

1.4 Kết quả hướng tới 2

3 Công cụ sử dụng 2

II REACT 3

1 Giới thiệu chung 3

2 Các từ khoá chính (key concepts) 3

2.1 Component-based approach 3

2.2 Virtual DOM 4

2.3 Props - State 4

2.4 Component Lifecycle 5

2.5 React Hook 6

3 Cách thức hoạt động của ReactJS 6

4 Lý do ReactJS được ưa chuộng 7

5 Một số thư viện - package phổ biến được sử dụng trong ReactJS 8

5.1 React Hook 8

5.2 React Router 9

5.3 React Redux - Redux toolkit 10

5.4 Redux Thunk 10

III EXPRESSJS 11

1 Giới thiệu chung 11

2 Ưu điểm của ExpressJS 11

3 Một số chương trình, thư viện được sử dụng phổ biến với ExpressJS 12

3.1 EJS 12

3.2 Json Web Token 12

3.3 Dotenv 12

3.4 Bcrypt 13

3.5 Postman 13

4 Xây dựng Codebase cho ứng dụng ExpressJS 13

IV ỨNG DỤNG MINH HOẠ 14

1 Giới thiệu ứng dụng minh hoạ 14

1.1 Bài toán thực tế 14

1.2 Hướng giải quyết của nhóm 15

1.3 Tổng quan ứng dụng đã phát triển 15

1.4 Source code 16

2 Product Requirement Document 17

2.1 Objective 17

2.2 Release 19

2.3 Features 20

2.4 Analytics - Phân tích 26

2.5 Future work - Hướng phát triển 27

3 Các màn hình minh hoạ 29

3.1 Trang chủ 29

3.2 Trang sản phẩm 29

3.3 Trang chi tiết sản phẩm 30

3.4 Giỏ hàng 31

3.5 Xác thực thông tin để đặt hàng 32

3.6 Các đơn hàng 32

4 Giao diện quản trị hệ thống 33

4.1 Giao diện Admin tổng quan 33

4.2 Quản lý thể loại sản phẩm 34

4.3 Quản lý giao diện tổng thể 35

V KIẾN TRÚC HỆ THỐNG 36

VI KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN 37

1 Kết quả đạt được 37

2 Hướng phát triển 38

TÀI LIỆU THAM KHẢO 39

I GIỚI THIỆU TỔNG QUAN

1 Thông tin nhóm

2 Tổng quan đề tài

1.1 Giới thiệu đề 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

Xét về mặt thiết kế bố cục: ReactJS 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

Xét về phía máy chủ: JavaScript là một ngôn ngữ lập trình phổ biến được các nhà phát

triển sử dụng Sử dụng JavaScript, các nhà phát triển có thể tận dụng rất nhiều điểm mạnh

mà nó đem lại như “viết một lần, thực thi ở khắp nơi" - đây là câu nói khiến JavaScript vẫn còn phổ biến cho đến tận bây giờ Tuy nhiên, để cấu hình một ứng dụng JavaScript thì cần

18520014 Nguyễn Trần Hữu Đăng 18520014@gm.uit.edu.vn

19520221 Hoàng Phúc 19520221@gm.uit.edu.vn

rất nhiều bước, do đó, ExpressJS ra đời nhằm rút ngắn thời gian cài đặt ứng dụng, các nhà phát triển sẽ tập trung hơn vào nghiệp vụ hơn là việc cấu hình

1.2 Phạm vi nghiên cứu

Trong đồ án lần này, nhóm chủ yếu tập trung vào nghiên cứu tổng quan cách thức hoạt động của ReactJS và ExpressJS Đồng thời, nhóm áp dụng các nghiên cứu trên vào một ứng dụng thực tế để giúp nhóm có thể hiểu sâu hơn các kiến thức đã tìm hiểu

1.3 Nội dung nghiên cứu

Nhóm sẽ tiến hành nghiên cứu chi tiết về cách thức hoạt động, ưu - khuyết điểm cũng như các thư viện - tính năng - package liên quan đến ReactJS và ExpressJS

1.4 Kết quả hướng tới

Với đề tài này, nhóm đề ra hai mục tiêu chính:

Đối với cá nhân các thành viên trong nhóm: mở rộng kiến thức của thành viên trong

nhóm về ReactJS và ExpressJS thông qua quá trình tìm hiểu và áp dụng vào ứng dụng thực

tế Các kiến thức tìm hiểu được thông qua đồ án thúc đẩy nhóm phát triển thêm các ứng dụng khác bằng ReactJS và ExpressJS Đồng thời, nhóm học được cách nghiên cứu và sử dụng một framework mới cần trải qua quá trình gì nhằm giúp nhóm dễ dàng tiếp xúc với các công nghệ mới hơn trong tương lai

Đối với các lập trình viên dùng đồ án nghiên cứu này làm tài liệu tham khảo: thông qua

tài liệu nghiên cứu và ứng dụng nhóm đã xây dựng, các lập trình viên khác có thể dễ dàng định hướng cần phải tìm hiểu gì khi sử dụng ReactJS và ExpressJS Đồng thời nhóm có ghi một số khái niệm, kiến thức cơ bản và thư viện phổ biến được đề xuất bởi cộng đồng khi sử dụng ReactJS và ExpressJS, các lập trình viên khác có thể tham khảo và tìm hiểu sâu hơn

3 Công cụ sử dụng

Trong quá trình xây dựng phần mềm, nhóm đã sử dụng phần mềm sau:

● NodeJS IDE: IDE hỗ trợ xây dựng ứng dụng phía server (ExpressJS)

● Visual Studio Code: hỗ trợ xây dựng giao diện người dùng (ReactJS)

● Postman: hỗ trợ nhóm test các api để lấy dữ liệu từ phía server

● MongoDB Atlas: hỗ trợ nhóm lưu trữ cơ sở dữ liệu

II REACT

1 Giới thiệu chung

React là một thư viện Javascript, được phát triển bởi Facebook, hỗ trợ xây dựng giao diện người dùng

Một ứng dụng có giao diện xây dựng bằng ReactJS sẽ được tạo bởi nhiều thành phần nhỏ (component), trong đó, output của mỗi component là một đoạn code HTML nhỏ và có thể tái sử dụng xuyên suốt ứng dụng Component được xem là từ khoá chính (key concept) khi nhắc đến React Mỗi component có thể chứa các component nhỏ hơn, do đó, một ứng dụng với cấu trúc phức tạp sẽ được hình thành từ nhiều component con Đồng thời, chỉ cần định nghĩa component con 1 lần và có thể sử dụng ở nhiều nơi

Một lợi thế khi tìm hiểu ReactJS chính là sau khi có đầy đủ kiến thức cơ bản về ReactJS, lập trình viên có thể dễ dàng học tiếp React Native - framework hỗ trợ xây dựng ứng dụng

và phát triển ứng dụng một cách dễ dàng Concept này giúp đỡ rất nhiều trong việc quản

lý một ứng dụng lớn và phức tạp, bởi lẽ khi xảy ra lỗi, các lập trình viên chỉ cần thay đổi

và chỉnh sửa trong một component nhỏ mà không ảnh hưởng đến code của toàn bộ ứng dụng

2.2 Virtual DOM

Virtual DOM chỉ là một đại diện ảo của DOM, Virtual DOM ra đời đã tăng hiệu suất các ứng dụng ReactJS một cách đáng kể

Cách thức hoạt động của virtual DOM trong ReactJS:

• Ứng dụng React được tạo bởi rất nhiều component con, mỗi component này đều chứa một state và React sẽ theo dõi trạng thái của state Khi state của một component thay đổi, React sẽ so sánh sự khác nhau giữa phiên bản hiện tại và trước đó thông qua thuật toán Diff, đồng thời thực hiện cập nhật trên virtual DOM

• Một khi nắm được component nào thay đổi, React sẽ tiến hành cập nhật duy nhất component đó trên DOM Điều này đã hạn chế được việc cập nhật toàn bộ component trên DOM một cách thường xuyên, tăng hiệu năng của ứng dụng web

2.3 Props - State

2.3.1 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

2.3.2 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.4 Component Lifecycle

Để có thể hiểu rõ cách thức hoạt động của một component, lập trình viên cần nắm rõ vòng đời (lifecycle) của React component Để có thể quản lý dữ liệu từ component cha (props), dữ liệu nội tại (state) và các điều kiện logic khiến component re-render, lập trình viên phải thực sự hiểu rõ định nghĩa và cách sử dụng các phương thức trong lifecycle Vòng đời của một component được chia làm 3 nhóm chính:

- componentDidMount() là nơi thực hiện các side effect như gọi api lấy dữ liệu, thực hiện một số thao tác lên DOM,

Ở đồ án này, nhóm đã sử dụng React Hook để các component trở nên gọn nhẹ, dễ đọc,

dễ sửa chữa và mở rộng

3 Cách thức hoạt động của ReactJS

ReactJS thường được sử dụng để tạo ra giao diện cho các SPA - single page application Khi sử dụng ReactJS, ứng dụng web được chia thành từng component nhỏ, mỗi component chứa hai thành phần chính là state và props Dữ liệu được truyền từ component cha sang con gọi là props, trong khi đó state được định nghĩa là dữ liệu của riêng component đó Component chỉ được re-render khi state của nó thay đổi, chính vì lý do này, ứng dụng không render lại toàn bộ trang web mà chỉ re-render component mà người dùng thao tác lên Chính vì nguyên tắc hoạt động trên cùng với các component chỉ định nghĩa một lần

mà có thể sử dụng ở nhiều nơi, ReactJS đã tăng hiệu suất của ứng dụng web và trở thành thư viện phát triển giao diện được nhiều người sử dụng

4 Lý do ReactJS được ưa chuộng

Một số lợi ích của ReactJS khiến nhóm quyết định chọn thư viện này để tìm hiểu trong

đồ án:

• So với đối thủ cạnh tranh là Angular, React có một số điểm nổi trội hơn khiến nhóm quyết định tìm hiểu và áp dụng React trong đồ án này

Về mặt hiệu suất: React sử dụng công nghệ DOM ảo còn Angular thì sử dụng DOM

thường Với DOM thường, Angular sử dụng DOM API để tìm và cập nhật các element, hiệu suất của ứng dụng sẽ giảm đi đáng kể khi phải liên tục tìm và cập nhật DOM Chính

vì thế, DOM ảo ra đời giải quyết bài toán cập nhật DOM sao cho hiệu năng tốt nhất Tất

cả thay đổi trong React sẽ được cập nhật trong DOM ảo, React sử dụng thuật toán Diff để kiểm tra sự khác biệt giữa DOM ảo và DOM gốc rồi cập nhật những thay đổi tại những vị trí cần thiết

Về mặt cộng đồng hỗ trợ: Mặc dù còn non trẻ, React.js đã đạt được 163 nghìn sao và 32,7

nghìn lần Fork trên Github và vượt qua AngularJS một cách rõ ràng khi nó xoay quanh 59,5 nghìn Sao và 1,578 nghìn Người đóng góp Do đó, cộng đồng hỗ trợ ReactJS rất mạnh, điều này có thể hỗ trợ nhóm trong việc tìm và sửa chữa lỗi

• JSX: Để tạo ra giao diện web bằng ReactJS, các nhà phát triển phải sử dụng câu lệnh React.createElement, tuy nhiên điều này làm cho file thiết kế giao diện trở nên khó quản

lý, sửa lỗi và mở rộng Do đó, JSX ra đời, cho phép viết mã code HTML trong ứng dụng React và biển đổi các HTML tags thành các React elements Chính vì thế, JSX đã

hỗ trợ các lập trình viên rất tốt trong việc xây dựng giao diện ứng dụng web

• Để khởi tạo một ứng dụng React chỉ cần dùng lệnh “create-react-app" mà không cần tốn quá nhiều thời gian cho việc config

• Component: các component được tách thành từng file nhỏ và có thể tái sử dụng, vì vậy

có thể tránh được việc code bị trùng nhau, dễ sửa chữa, duy trì và phát triển ứng dụng

5 Một số thư viện - package phổ biến được sử dụng trong ReactJS

5.1 React Hook

5.1.1 Khái niệm

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

5.1.2 Các hook phổ biến: useState, useEffect, useRef

a 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()

b 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 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 compo 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)

c 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

5.2 React Router

5.2.1 Khái niệm: là một thư viện định tuyến, với Url này sẽ tương đương với Route

này và render ra giao diện tương ứng

5.2.2 Các tính năng - tiện ích: <Link>, <NavLink>, <Redirect>, useLocation,

useParams

a <Link> <NavLink>: đối với HTML, cặp thẻ để chuyển hướng

là <a></a>, còn ở React thì dùng <Link>, <NavLink>

b <Redirect>: dùng để chuyển trang, có thể lấy thông tin các

trang trước để sử dụng thông qua useLocation

c useParams (chỉ có ở React router v5): dùng để lấy thông tin các params trên url

d useLocation (chỉ có ở React router v5): với react router v4, để lấy được thông tin từ

url (params, pathname, …) thì phải dùng đối tượng location được truyền như props vào component Tuy nhiên, ở v5, chỉ cần dùng hook useLocation thì vấn đề này có thể giải quyết mà không cần truyền đối tượng location

5.3 React Redux - Redux toolkit

5.3.1 Khái niệm Redux và Redux Toolkit

a 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

b 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

5.3.2 Các tính năng - tiện ích: store, action, reducer và nguyên lý hoạt động

a 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

b 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)

c 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

5.3.3 Các tính năng - tiện ích của redux được thay thế bởi redux toolkit:

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

5.4 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)

Khi cần thực hiện các thao tác kể trên, middleware giúp action thực hiện thao tác bất động bộ xong mới chuyển cho reducer Một số loại middleware có thể giải quyết bài toán

trên như redux thunk, redux saga Nhóm quyết định chọn redux thunk vì dễ sử dụng, cấu hình dễ dàng và phù hợp với những ứng dụng vừa và nhỏ

Redux Thunk là một Middleware cho phép viết các Action trả về một function thay vì một plain javascript object bằng cách trì hoã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

III EXPRESSJS

1 Giới thiệu chung

ExpressJS là một framework của NodeJS, cung cấp tập hợp nhiều tính năng mạnh cho việc viết những chương trình trên web và điện thoại

ExpressJS ra đời nhằm rút ngắn thời gian cài đặt và cấu hình các routes của những API trong NodeJS Giúp các lập trình viên tập trung hơn vào việc phát triển nghiệp vụ thay vì tốn nhiều thời gian cho việc cấu hình dự án ExpressJS dễ dàng trong việc tích hợp với các

hệ sinh thái của NodeJS như: Json Web token, Mongoose, Mailgun,

2 Ưu điểm của ExpressJS

ExpressJS hỗ trợ định nghĩa những routes của chương trình bạn dựa trên những phương thức HTTPs và URLs

Express cho phép bạn tạo những REST API server

ExpressJS cho phép bạn định nghĩa một lỗi handling của middleware

Express giúp bạn có thể dễ dàng mở rộng dự án của bạn một cách nhanh chóng với sự

hỗ trợ của NodeJS với rất nhiều mã nguồn mở đi kèm

ExpressJS hỗ trợ tính năng bộ nhớ đệm, và lợi thế của tính năng này là chúng ta không phải chạy lại code lặp lại nhiều lần Thêm nữa, nó sẽ giúp web của chúng ta load nhanh hơn bao giờ hết

3 Một số chương trình, thư viện được sử dụng phổ biến với ExpressJS

• EJS có một cộng đồng hỗ trợ rất lớn có thể hỗ trợ bạn bất cứ khi nào bạn cần

3.2 Json Web Token

Là một thư viện hỗ trợ các tác vụ và thao tác với Json Web Token như việc tạo ra các token, cấu hình token, đọc các token

Json Web Token là một chuẩn để truyền tải thông tin một cách an toàn giữa các bên bằng đối tượng Json

Json Web Token thường được dùng để xác thực và phân quyền người dùng (authentication và authorization), chuỗi token sẽ được gửi kèm trong phần header của request và server sẽ thông qua token đó xác thực request

3.3 Dotenv

Là một môđun tải những biến môi trường từ một file env vào trong process.env Dotenv cấu hình việc lưu trữ môi trường, tách bạch hoàn toàn với code dựa trên phương pháp chương trình mười hai lớp

3.4 Bcrypt

Là một thuật toán hỗ trợ việc mã hóa các thông tin quan trọng

Bcrypt được đánh giá là bảo mật và an toàn hơn so với MD5 và SHA

3.5 Postman

Là một phần mềm mã nguồn mở được sử dụng để phát triển, xây dựng, thiết kế và làm tài liệu cho các RESTful Web Service

POSTMan được tìm hiểu và tích hợp trong đồ án để hỗ trợ việc tự động làm các tài liệu,

mô tả các API của đồ án

4 Xây dựng Codebase cho ứng dụng ExpressJS

Nhóm chúng em đã tìm hiểu và xây dựng một Codebase hoàn chỉnh để triển khai một ứng dụng ExpressJS tiêu chuẩn Codebase này khá hoàn chỉnh, rõ ràng và phù hợp trong việc phát triển một ứng dụng ExpressJS thực tế Từ đó, các lập trình viên có nhu cầu sử dụng bản báo cáo này để làm tài liệu tham khảo, hoàn toàn có thể áp dụng Codebase này

để làm nền tảng phát triển các ứng dụng ExpressJS sau này

Hình ảnh Codebase (chụp từ ứng dụng)

Mô tả Codebase:

• vscode: chứa cấu hình code editor phù hợp nhất với ngôn ngữ hiện tại

• bin: set up những lệnh cơ bản nhất để chạy được 1 chương trình NodeJS

• constants: Những data cơ bản không cần thiết phải lưu xuống database sẽ được

hardcode trong folder này

• controllers: Chứa những file xử lý chính của chương trình

• middlewares: Chứa những chương trình midlleware người dùng sẽ viết

• models: Để tạo shcema lưu về database

• node_modules: Chứa các package, thư viện cần thiết để chạy được chương trình

• public: Chứa những phần xử lý giao diện không sử dụng React

• routes: Chứa những route chính của chương trình

• utils: Chứa những logic được sử dụng nhiều trong chương trình

• views: Những phần giao diện sử dụng template engine của express để render sẽ được

chứa ở đây

• env: Chứa những link môi trường quan trọng sẽ được thư viện dotenv đảm bảo tính

bảo mật

• gitignore: Chứa các file không cần thiết upload lên github

• app.js: Chứa những đường dẫn chính của chương trình và truy xuất tới middleware,

controller để xử lý

• config.js: Cấu hình cho các biến của file dotenv

• package.json: Ghi lại những điều cần set up để có thể chạy được trương trình

IV ỨNG DỤNG MINH HOẠ

1 Giới thiệu ứng dụng minh hoạ

1.1 Bài toán thực tế

Các ứng dụng mua hàng online đã ra đời từ rất lâu về trước như Tiki, Shopee Tuy nhiên, các ứng dụng này không chuyên về mảng cung cấp sản phẩm về tổ yến, còn đối với một số cửa hàng chuyên cung cấp các sản phẩm về yến thì không tạo được sự tin tưởng

tuyệt đối cho khách hàng về mặt chất lượng sản phẩm cũng như về vấn đề bảo mật thông tin khách hàng Đồng thời tận dụng thời điểm hậu covid, các sản phẩm về sức khỏe được quan tâm nhiều hơn, một cơ hội để nhóm nắm bắt thời điểm xây dựng chuyên trang bán hàng thực phẩm chức năng

Do đó, hiện tại trên thị trường không những cần các trang web chuyên cung cấp các mặt hàng liên quan đến công nghệ mà còn phải đảm bảo chất lượng sản phẩm giống với quảng cáo, đồng thời bảo mật thông tin khách hàng luôn được đặt lên hàng đầu

1.2 Hướng giải quyết của nhóm

Nhóm đã đề ra kế hoạch và phát triển một trang web mua hàng online DamiNest để có thể giải quyết vấn đề của bài toán thực tế hiện nay

DamiNest cung cấp các mặt hàng liên quan đến yến và tổ yến Với các mặt hàng đa dạng, chất lượng đúng với giá tiền mà người sử dụng bỏ ra, DamiNest mong muốn đem đến cho người dùng một trải nghiệm tốt hơn trong việc mua hàng online mà không cần nghi ngại về các chiêu trò lừa đảo cũng như là vấn đề thông tin khách hàng bị lộ ra bên ngoài

• Một trang web bán hàng online được xem là một ứng dụng với độ phức tạp vừa phải và

có tính mở rộng cao và ReactJS là thư viện tuyệt vời trong việc quản lý code và khả năng mở rộng ứng dụng

• Concept của ReactJS là chỉ render lại những thành phần cần thiết chứ không load lại toàn bộ trang (Single application page), điều này tăng hiệu suất đáng kể cho một trang web, dẫn đến trải nghiệm người dùng tốt

• ReactJS có rất nhiều thư viện hỗ trợ việc xây dựng một ứng dụng web, sử dụng các thư viện này, các lập trình viên sẽ tiết kiệm thời gian và chi phí khi phát triển DamiNest Ngoài phần giao diện, một web bán hàng online được đánh giá cao khi tốc độ xử lý dữ liệu nhanh, bảo mật thông tin khách hàng tốt Và nhóm nhận thấy rằng, ExpressJS có khả năng thực hiện rất tốt các công việc nêu trên Bởi vì:

• Khả năng bảo mật của ExpressJS được đánh giá là rất tốt vì được NodeJS hỗ trợ framework vô cùng mạnh mẽ Hơn thế nữa, cấu trúc của ExpressJS được cho rằng là rất chặt chẽ Thêm vào đó, nhóm sử dụng các công nghệ bảo mật rất được thịnh hành

và tin dùng ngày nay như mã hoá bằng Bcrypt, JWT…

• ExpressJS được cung cấp rất nhiều các thư viện khác hỗ trợ việc xây dựng một ứng dụng với đầy đủ và đáp ứng được hết những yêu cầu thực tế ngày nay Nhờ vậy, việc chọn phát triển bằng ExpressJS cũng đem lại rất nhiều lợi thế cũng như là tiết kiệm được rất nhiều thời gian trong việc triển khai ứng dụng

• Ứng dụng ExpressJS rất dễ để bảo trì cũng như là nâng cấp về sau

1.4 Source code

Customer: https://github.com/hoangphuc_nvbt/DamiNest

Admin: https://github.com/nthDang/DamiNest