Đồ án tìm hiểu reactjs expressjs framework

Mục tiêu: - Xây dựng được website mua bán trực tuyến với nhiều mặt hàng phong phú, giao diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng các chức năng cần thiết của một website

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

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

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

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc Lập - Tự Do - Hạnh Phúc

ĐỀ CƯƠNG CHI TIẾT

Tìm hiểu ReactJS – Express Framework

Tên đề tài tiếng Anh:

Learn ReactJS – Express Framework

Cán bộ hướng dẫn: ThS Nguyễn Công Hoan

Thời gian thực hiện: Từ ngày 05/09/2022 đến tháng 31/12/2022

Sinh viên thực hiện:

Javascript là ngôn ngữ lập trình dễ học với cả những người không có bất kỳ kiến thức gì về ngôn ngữ lập trình khác Chính vì tính phổ biến, dễ học và dễ sử dụng này

mà Express.js cho phép các tài năng trẻ tham gia và đạt được nhiều thành công trong phát triển ứng dụng web

Thông qua đề tài này, nhóm sẽ xây dựng website bán hàng trực tuyến

Website cung cấp cho người dùng nhiều sự lựa chọn đáp ứng nhu cầu về điện thoại phù hợp với nhu cầu người mua với nhiều mẫu mã khác nhau Website cập nhật tất cả

những điện thoại mới ra mắt phù hợp trong từng nhu cầu sử dụng, mẫu mã mới nhất nhằm đáp ứng nhu cầu của người mua

Hệ thống này sẽ có chức năng cơ bản như hiển thị và order, upload mặt hàng mới, gợi ý nhu cầu người dùng, chức năng tìm kiếm theo dạng text, … Về phía quản trị viên

sẽ có những chức năng chính như: quản lý mặt hàng, số lượng, thông tin đơn hàng, quản lý tài khoản người dùng, …

2 Mục tiêu:

- Xây dựng được website mua bán trực tuyến với nhiều mặt hàng phong phú, giao diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng các chức năng cần thiết của một website E-Commerce

- Xây dựng được website dành cho quản trị viên với các chức năng quản lý thông tin

o Quản lý thông tin sản phẩm

o Quản lý tài khoản người dùng

o Quản lý thông tin đơn hàng

o Tìm kiếm sản phẩm theo nhu cầu

o Phân loại sản phẩm theo thể loại, hay top lượt tìm kiếm,

o Cho phép thêm vào giỏ hàng trước khi quyết định thanh toán

o Cho phép upload sản phẩm

o Dễ dàng cho quản trị viên xử lý các đơn hàng

4 Đối tượng:

- Người dùng khách

- Người dùng có tài khoản

- Quản trị viên (Admin)

5 Phương pháp thực hiện:

- Tìm hiểu về ReactJS, NodeJS, MongoDB

- Khảo sát các website bán điện hiện có trên thị trường, từ đó tiến hành phân tích, xác định các yêu cầu, tính năng cụ thể cho đề tài

- Phân tích và thiết kế hệ thống website

- Tìm hiểu quy trình thiết kế UX/UI và tiến hành thiết kế giao diện cho website

- Xây dựng website cho người dùng và website cho quản trị viên

- Tiến hành triển khai và kiểm thử

6 Công nghệ:

- Front-end: ReactJS

- Back-end: NodeJS, ExpressJS

- Database: MongoDB

7 Kết quả mong đợi

- Nắm bắt và áp dụng được các công nghệ mới để xây dựng sản phẩm đề tài

- Hiểu rõ các nghiệp vụ, chức năng của một website bán điện thoại trực tuyến

- Áp dụng được các kiến thức đã học về phân tích và thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, cũng như quản lý và triển khai dự án phần mềm để xây dựng website sản phẩm đề tài

- Xây dựng được website bán điện thoại trực tuyến đáp ứng được các yêu cầu về giao diện và chức năng đã đề ra

- Có thể thay đổi giao diện một cách linh động và mở rộng thêm các chức năng mới cho website sản phẩm đề tài để phù hợp với nhu cầu thực tiễn trong tương lai

Kế hoạch thực hiện:

05/09/2022 – 16/09/2022 Tìm hiểu đề tài, đánh giá thị trường, xác định các chức năng

của hệ thống

17/09/2022 – 07/10/2022 Tìm hiểu, nghiên cứu công nghệ

08/10/2022 – 17/10/2022 Phân tích và thiết kế hệ thống website

18/10/2022 – 08/11/2022 Tìm hiểu quy trình thiết kế UX/UI và thiết kế giao diện cho

website 09/11/2022 – 06/12/2022 Cài đặt phần back-end, xử lý của hệ thống

06/12/2022 – 24/12/2022 Kiểm thử hệ thống và hoàn thiện báo cáo

Xác nhận của GVHD

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

ThS Nguyễn Công Hoan

TP HCM, ngày 18 tháng 02 năm 2022 Sinh viên Sinh viên

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

Lý Sô Ly Nguyễn Khánh Thành

LỜI CẢM ƠN

Đầu tiên, nhóm thực hiện đề tài “Xây dựng website nghe mua điện thoại online” xin gửi lời cảm ơn đến quý thầy cô đã đang giảng dạy chúng em ở ngôi trường Đại học Công nghệ thông tin – Đại học quốc gia thành phố Hồ Chí Minh những kiến thức nền tảng vững chắc để nhóm có thể tự tìm hiểu và hoàn thiện đề tài này một cách tốt nhất

Đặc biệt, chúng em xin gửi lời cảm ơn tới cô Nguyễn Công Hoan vì sự tận tình hướng dẫn cũng như những góp ý, đề xuất quý báu của cô dành cho nhóm trong quá trình thực hiện đồ án

Trong suốt thời gian qua, nhóm đã tự tìm hiểu các công nghệ mới và kết hợp với những kiến thức nền tảng trong quá trình học tập, nghiên cứu và vận dụng để thực hiện đề tài này Với quỹ thời gian có hạn cũng như kinh nghiệm xây dựng sản phẩm còn thiếu, sản phẩm

đồ án cuối cùng có thể sẽ mắc phải một số sai sót và chúng em rất mong sẽ nhận được những góp ý của cô để bổ sung, cải tiến sản phẩm cũng như nâng cao kiến thức để xây dựng các sản phẩm tiếp theo sẽ chỉn chu và hoàn thiện hơn, và tích luỹ thêm cho mình những kinh nghiệm quý giá để đáp ứng tốt cho những công việc thực tế trong tương lai

Một lần nữa, xin cảm ơn cô vì đã đồng hành cùng chúng em trong suốt học kỳ I của năm học này

Sinh viên thực hiện

Lý sô Ly - Nguyễn Khánh Thành

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

Tp.HCM, ngày … tháng 6 năm 2022

GVHD

MỤC LỤC

LỜI CẢM ƠN 5

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

Chương 1: GIỚI THIỆU ĐỀ TÀI 3

1.1 Tên đề tài: 3

1.2 Mô tả đề tài: 3

1.3 Lý do chọn đề tài: 3

1.4 Khảo sát hiện trạng: 4

1.5 Công nghệ sử dụng: 4

1.6 Môi trường thiết kế: 4

1.7 Công cụ hỗ trợ: 4

Chương 2: CƠ SỞ LÝ THUYẾT 5

2.1 Tổng quan về ReactJS: 5

2.1.1 Giới thiệu về ReactJS: 5

2.1.2 Khái niệm cơ bản trong ReactJS: 5

2.1.2.1 Virtual DOM: 5

2.1.2.2 JSX: Error! Bookmark not defined 2.1.3 Cách ReactJS hoạt động: 6

2.1.4 Ưu điểm của ReactJS: 6

2.2 NodeJS: 6

2.2.1 NodeJS là gì? 6

2.2.2 Cách NodeJS hoạt động: 8

2.2.3 Ưu điểm của NodeJS: 8

2.3 ExpressJS: 8

2.3.1 ExpressJS là gì? 8

2.3.2 Tính năng của ExpressJS: 9

2.4 MongoDB: 9

2.4.1 MongoDB là gì: 9

2.4.2 Một số câu lệnh cơ bản: 10

2.4.3 Ưu điểm của MongoDB: 10

Chương 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 12

3.1 Sơ đồ Use-case: 12

3.1.1 Đăng nhập: 12

3.1.2 Đăng xuất: 13

3.1.3 Đăng ký thành viên: 14

3.1.4 Giỏ hàng: 15

3.1.5 Thay đổi thông tin các nhân: 15

3.1.6 Quản lý thông tin cá nhân: 17

3.1.7 Tìm kiếm: 19

3.1.8 Xem thông tin sản phẩm: 19

Chương 4: THIẾT KẾ GIAO DIỆN 21

4.1 Trang đăng nhập, đăng ký: 21

4.1.1 Giao diện: Error! Bookmark not defined 4.1.2 Mô tả: 21

4.2 Trang chủ: 22

4.2.1 Giao diện: 22

4.2.2 Mô tả: 23

4.3 Trang thông tin sản phẩm: 24

4.3.1 Giao diện: 24

4.3.2 Mô tả: 24

4.4 Trang tìm kiếm: 24

4.4.1 Giao diện: 24

4.4.2 Mô tả: 25

4.5 Trang thông tin giỏ hàng: 27

4.5.1 Giao diện: 27

4.5.2 Mô tả: 27

4.6 Trang thông tin vận chuyển: 28

4.6.1 Giao diện: 28

4.6.2 Mô tả: 28

Chương 5: KẾT LUẬN 29

5.1 Nhận xét: 29

5.1.1 Thuận lợi: 29

5.1.2 Khó khăn: 29

5.2 Đánh giá: 29

5.2.1 Ưu điểm của đồ án: 29

5.2.2 Nhược điểm của đồ án: 29

5.3 Hướng phát triển của đồ án: 29

TÀI LIỆU THAM KHẢO 30

MỤC LỤC HÌNH ẢNH

Hình 2.1: Mô tả cách Virtual DOM hoạt động 5

Hình 2.2: Ví dụ về tạo một element trong React 6

Hình 2.3: Ví dụ về React được viết bằng JSX 6

Hình 2.4: Express js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website 9

Hình 3.1: Sơ đồ use-case tổng quát 12

Hình 3.2: Sơ đồ use-case đăng nhập 12

Hình 3.3: Sơ đồ use-case đăng xuất 13

Hình 3.4: Sơ đồ use-case đăng ký thành viên 14

Hình 3.5: Sơ đồ use-case mua sản phẩm 15

Hình 3.6: Sơ đồ use-case thay đổi thông tin cá nhân 17

Hình 3.7: Sơ đồ use-case quản giỏ hàng cá nhân 17

Hình 3.8: Sơ đồ use-case tìm kiếm 19

Hình 3.9: Sơ đồ use-case xem thông tin sản phẩm 20

Hình 4.1 Giao diện nút đăng nhập sau khi click log in Error! Bookmark not defined Hình 4.2 Giao diện nút trang đăng nhập sau khi click Log in 21

Hình 4.3 Giao diện nút trang đăng ký sau khi click Sign up 22

Hình 4.4 Giao diện trang chủ 23

Hình 4.5 Thanh setting sau khi mở rộng 23

Hình 4.6: Giao diện trang thông tin sản phẩm Error! Bookmark not defined Hình 4.7: Giao diện trang tìm kiếm khi tìm kiếm theo từ khóa 24

Hình 4.8: Giao diện kết quả sau khi tìm kiếm điện thoại 25

Hình 4.9: Giao diện kết quả sau tìm kiếm với từ khoá “Samsung A20” 26

Hình 4.10: Giao diện thông tin giỏ hàng 27

Hình 4.11: Giao diện thông tin nhận hàng 28 Hình 4.12: Giao diện trang thông tin vận chuyển 28

DANH MỤC BẢNG

Bảng 3.1: Đặc tả đăng nhập: 12

Bảng 3.2: Đặc tả đăng xuất: 13

Bảng 3.3: Đặc tả đăng ký thành viên: 14

Bảng 3.4: Đặc tả chọn máy: 15

Bảng 3.5: Đặc tả đề xuất điện thoại: 15

Bảng 3.6: Đặc tả hiển thị thông tin sản phẩm: 16

Bảng 3.7: Đặc tả thông tin cá nhân: 17

Bảng 3.8: Đặc tả thêm sản phẩm: 17

Bảng 3.9: Đặc tả xoá sản phẩm: 18

Bảng 3.10: Đặc tả tìm kiếm: Error! Bookmark not defined Bảng 3.11: Đặc tả xem thông tin đơn hàng: Error! Bookmark not defined

DANH MỤC VIẾT TẮT

4 RDBMS Relational Database Management System

là phần thưởng sau những ngày tháng cần mẫn làm việc, …

Với sự phát triển nhanh chóng của internet, việc mua sắm đã được đưa lên không gian mạng qua những website mua điện thoại trực tuyến Điều này khiến chúng ta tận hưởng âm thời gian làm đẹp cho bản thân một cách dễ dàng và thoải mái hơn trước đây

Website mua điện thọau trực tuyến với mục tiêu mang lại trải nghiệm tốt cho người dùng, chúng em xây dựng website cung cấp đầy đủ các chức năng cơ bản hiện có của một website mua bán hàng Người dùng tiếp cận các mẫu mã thời trang đa dạng theo sở thích riêng của mình, …

Website bán hàng E-commerce được xây dựng bằng ReactJS kết hợp với các thư viện

hỗ trợ khác

1.3 Lý do chọn đề tài:

Với sự phát triển của Internet, nhu mua sắm trên không gian mạng tăng vượt trội bởi

vì sự đơn giản, dễ sử dụng, sự tiếp cận nhanh chóng đến kho đến nguồn sản phẩm khổng lồ của các website mua bán trực tuyến

Trước đây, chúng ta luôn bị gò bó khi mua sắm bởi vì thời gian hạn chế Một cửa hàng, hay một trung tâm thương mại như địa điểm đơn lẻ, có không gian trưng bày hạng chế,

… chỉ cho phép chúng ta chưng bày được vài mười mấy, hay vài chục bộ Thậm chí góc khuất còn bị bỏ qua Muốn bổ sung các các sản phẩm mới đều phải mới đều phải đi tìm các nguồn khác từ các nguồn khác, điều này gây mất nhiều thời gian, và chỉ những ai có nhiều thời gian rảnh rỗi hay có vị chí đi lại thuận lợi Mỗi lần thay đổi địa điểm mua hàng cũng như mỗi lần tới một chân trời mới, vô cùng bất tiện Chi phí cho những chuyến đi cũng như thời gian là vô cùng bất tiện

Tốc độ phát triển “chóng mặt” của Internet đã mang lại nhiều thay đổi lớn cho con người, trong đó bao gồm cả việc thay đổi cách thức và thói mua sắm trước đây của chúng ta

vì đã xuất hiện các website mua bán trực tuyến

Chúng em quyết định chọn đề tài “Xây dựng website mua điện thoại trực tuyến” bởi

vì tính ứng dụng cao, nhu cầu thực tế lớn và muốn vận dụng khả năng của mình ở nhiều loại

đề tài khác nhau để xây dựng các sản phẩm cho chúng và cái tên đề tài cũng khá thú vị vì chúng em chưa từng nghĩ tới sẽ thực hiện đề tài này

1.3 Khảo sát hiện trạng:

Hiện nay, thị trường đã có rất nhiều website mua sắm trực tuyến nổi tiếng được mọi người biết đến như thegioididong, SellPhoneS, hay những website cửa hàng lớn, … Với giao diện bắt mắt, dễ sử dụng, cùng với số lượng sản phầm khổng lồ, chúng nhanh chóng trở thành những website mua bán trực tuyến hàng đầu Các chức năng của những website này đều tập trung vào trải nghiệm tìm kiếm một chiếc điện thoại thoải mái ưng ý nhất cho người dùng

Chúng em cũng sẽ xây dựng một website mua điện thoại trực tuyến với những tính năng mua sắm cơ bản nhằm mang lại trải nghiệm dễ sử dụng và tiện dụng cho người dùng

1.5 Môi trường thiết kế:

- Visual Studio Code

1.6 Công cụ hỗ trợ:

- Trình duyệt Cốc Cốc, Chrome, FireFox

Chương 2:

CƠ SỞ LÝ THUYẾT

2.1.1 Giới thiệu về ReactJS:

ReactJS là một thư viện javascript mã nguồn mở được phát triển bởi Facebook, ra mắt vào 2013 ReactJS hỗ trợ việc xây dựng những thành phần trên website có tính tương tác cao, có trạng thái và có thể sử dụng lại được

Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng server mà còn ở dưới client React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM (Document Object Model)

2.1.2 Khái niệm cơ bản trong ReactJS:

2.1.2.1 Virtual DOM:

Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý

React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật

Hình 2.1: Mô tả cách Virtual DOM hoạt động

2.1.2.2 Props và State:

- Props: giúp các component tương tác với nhau, component nhận input gọi là props, và

- State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI

2.1.3 Cách ReactJS hoạt động:

- Tạo đại diện của nút DOM thông qua tạo hàm Element trong React Đây là một ví dụ:

Hình 2.3: Ví dụ về tạo một element trong React

- Cú pháp trong HTML code ở trên rất giống với XML components Tuy nhiên, thay vì

sử dụng DOM class truyền thống, React sử dụng className

- Thẻ JSX có tên thẻ, con và thuộc tính Dấu ngoặc kép trong các thuộc tính JSX đại diện cho chuỗi Yếu tố này tương tự như JavaScript

- Ngoài ra, các giá trị số và biểu thức phải được viết bên trong dấu ngoặc nhọn

Hình 2.4: Ví dụ về React được viết bằng JSX

• <MyCounter> được gọi là Số đếm, hiển thị biểu thức số là giá trị của nó

• GameScores là một đối tượng theo nghĩa đen có hai cặp giá trị prop

• <DashboardUnit> là khối XML được render trên trang

• scores={GameScores}}: thuộc tính điểm nhận được giá trị từ GameScores, đã được xác định trước đó

2.1.4 Ưu điểm của ReactJS:

- Phù hợp với đa dạng thể loại website

- Tái sử dụng các Component

- Có thể sử dụng cho cả Mobile application

- Thân thiện với SEO

- Debug dễ dàng

- Công cụ phát triển web hot nhất hiện nay

2.2 NodeJS:

2.2.1 NodeJS là gì?

Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng trên V8 JavaScript Engine – trình thông dịch thực thi mã JavaScript giúp chúng ta có thể xây dựng được các ứng dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp một cách nhanh chóng và dễ dàng mở rộng

NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới Linux, OS X nên đó cũng là một lợi thế NodeJS cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất

Node.js được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ

2.2.3 Ưu điểm của NodeJS:

- Tốc độ cực nhanh: Được xây dựng dựa trên engine JavaScript V8 của Google

Chrome, do đó các thư viện của nó có khả năng thực thi code chỉ rất nhanh

- NPM: Với hơn 50,000 package khác nhau, các developer có thể dễ dàng lựa chọn bất

kỳ tính năng nào để xây dựng cho ứng dụng của mình

- Lập trình không đồng bộ: Mọi API của Node.JS đều có tính không đồng bộ

(non-blocking), do đó một server dựa trên Node.JS không cần phải đợi API trả về dữ liệu

- Không có buffering: Node.JS giúp tiết kiệm thời gian xử lý file khi cần upload âm

thanh hoặc video vì các ứng dụng này không bao giờ buffer dữ liệu mà chỉ xuất dữ liệu theo từng phần (chunk)

- Đơn luồng: Node.JS sử dụng mô hình đơn luồng với vòng lặp sự kiện Do đó các ứng

dụng có thể xử lý số lượng request lớn hơn rất nhiều so với các server truyền thống như Apache HTTP Server

- Khả năng mở rộng cao: Server NodeJS phản hồi theo hướng non-blocking, do đó nó

có thể mở rộng vô cùng dễ dàng, tạo ra các luồng giới hạn để xử lý request

2.3 ExpressJS:

2.3.1 ExpressJS là gì?

Express.js là một framework mã nguồn mở miễn phí cho Node.js Express.js được

sử dụng trong thiết kế và xây dựng các ứng dụng web một cách đơn giản và nhanh chóng

Express hỗ rợ các phương thức HTTP và midleware tạo ra môt API vô cùng mạnh

mẽ và dễ sử dụng