Việc tôi muốn tạo ra một trang website giúp đáp ứng các nhu cầu của dùng trong việc tìm kiếm , lựa chọn các mặt hàng thời trang một cách dễ dàng và nhanh chóng nhất.Thông qua những kiến
Trang 1TRƯỜNG ĐẠI HỌC
SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH
HCMC University of Technology and Education
KHOA CÔNG NGHỆ THÔNG TIN
NGÀNH CÔNG NGHỆ THÔNG TIN
BÁO CÁO ĐỒ ÁN
CÔNG NGHỆ PHẦN MỀM MỚI
WEBSITE BÁN ĐỒ THỂ THAO
GVHD: ThS Nguyễn Minh ĐạoSinh viên thực hiện:
Nguyễn Hoàng Kha 20110500
Thành phố Hồ Chí Minh, tháng 12 năm 2023
Trang 2CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 5
2.1Tìm hiểu chung về ReactJS 5
2.2Tìm hiểu chung về Nodejs 5
2.3Tìm hiểu chung về Redux 7
2.4Tìm hiểu chung về Hooks 8
2.5Tìm hiểu chung về Axios 8
2.6Tìm hiểu chung về JWT 8
2.7Tìm hiểu chung về MongoDB 9
2.8 Tìm hiểu về Refesh token 10
CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 11
3.2.4Trang Thanh Toán 13
3.2.5Trang Đơn Hàng của tôi 13
3.2.6Trang thông tin người dùng 13
3.2.7Giao diện đăng nhập 13
3.2.8Giao diện đăng ký 14
3.2.9Giao diện Admin quản lý sản phẩm 14
3.2.10 Giao diện quản lý người dùng 15
3.2.11 Giao diện quản lý đơn hàng 15
3.3 Phân tích bố cục code 16
3.3.1 Backend 16
CHƯƠNG 4: KẾT LUẬN VÀ KIẾN NGHỊ 27
4.1Kết luận 27
Trang 4Chương 1: TÌM HIỂU TỔNG QUAN ĐỀ TÀI1.1 Lý do thực hiện đề tài
Hiện nay, việc kinh doanh các mặt hàng về thời trang nói chung cũng như thời trang online hiện đang rất phát triển và nhu cầu ngày dùng ngày càng tăng Việc tôi muốn tạo ra một trang website giúp đáp ứng các nhu cầu của dùng trong việc tìm kiếm , lựa chọn các mặt hàng thời trang một cách dễ dàng và nhanh chóng nhất.
Thông qua những kiến thức mà tôi đã học và tìm hiểu, tôi cũng muốn tận dụng những công nghệ , kỹ thuật mới để xây dựng , thiết kế và phát triển một trang website đa chức năng, dễ sử dụng và đáp ứng đủ các nhu cầu phức tạp
1.2 Nội dung thực hiện
Reactjs: Reactjs là một thư viện JavaScript được sử dụng để xây dựng giao diện người dùng (UI) cho ứng dụng web Với Reactjs, việc phát triển các tính năng và chức năng trên website nghe nhạc trực tuyến sẽ trở nên dễ dàng và linh hoạt hơn.
Nodejs: Nodejs là một nền tảng lập trình được sử dụng để phát triển các ứng dụng web Với Nodejs, bạn có thể xây dựng các chức năng back-end cho website nghe nhạc trực tuyến.
Trang 5Redux: Redux là một thư viện JavaScript được sử dụng để quản lý trạng thái (state) của ứng dụng Với Redux, việc quản lý dữ liệu trên website nghe nhạc trực tuyến sẽ trở nên dễ dàng hơn.
Redux Persist: Redux Persist là một thư viện được sử dụng để lưu trữ trạng thái của ứng dụng trong localStorage hoặc AsyncStorage (trên mobile) Với Redux Persist, bạn có thể lưu trữ các thông tin như đăng nhập, playlist và các cài đặt khác.
Axios: Axios là một thư viện JavaScript được sử dụng để gửi yêu cầu HTTP từ client đến server Với Axios, bạn có thể dễ dàng gọi API và xử lý dữ liệu trả về.
JWT: JWT (JSON Web Tokens) là một chuẩn mã hóa token được sử dụng để xác thực người dùng trong các ứng dụng web Với JWT, bạn có thể bảo mật thông tin đăng nhập của người dùng trên website nghe nhạc trực tuyến.
MongoDB: MongoDB là một hệ thống quản lý cơ sở dữ liệu NoSQL được sử dụng để lưu trữ dữ liệu cho website nghe nhạc trực tuyến Với MongoDB, việc quản lý và lưu trữ các thông tin như bài hát, album, nghệ sĩ và thông tin người dùng sẽ trở nên dễ dàng hơn.
Trang 6CHƯƠNG 2:CƠ SỞ LÝ THUYẾT2.1 Tìm hiểu chung về ReactJS
ReactJS (hoặc React) là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook Nó được sử dụng để xây dựng giao diện người dùng cho các ứng dụng web đơn trang (Single Page Applications - SPAs)
Một số khái niệm cơ bản và tính năng quan trọng của React:
Component-Based Architecture (Kiến trúc dựa trên thành phần): React xây dựng giao diện người dùng bằng cách sử dụng các thành phần (components) Mỗi thành phần đại diện cho một phần nhỏ và tái sử dụng có thể của giao diện người dùng Thành phần giúp quản lý và tái sử dụng mã nguồn dễ dàng hơn.
Virtual DOM (DOM Ảo): React sử dụng một biểu diễn ảo của DOM (Virtual DOM) để tối ưu hóa hiệu suất Khi có sự thay đổi trong trạng thái của ứng dụng, React tạo ra một Virtual DOM, so sánh nó với DOM hiện tại, và chỉ cập nhật những phần thay đổi thực sự Điều này giúp giảm tải cho DOM thực và cải thiện hiệu suất ứng dụng.
JSX (JavaScript XML): JSX là một phần của React cho phép viết mã HTML giống XML trong mã JavaScript Nó cung cấp cú pháp dễ đọc và viết cho việc định nghĩa các thành phần React.
Unidirectional Data Flow (Luồng dữ liệu một chiều): React thực hiện luồng dữ liệu một chiều từ cha đến con, giúp dễ dàng theo dõi và quản lý trạng thái ứng dụng.
Tích hợp dễ dàng: React có thể kết hợp với nhiều thư viện và framework khác như Redux để quản lý trạng thái, React Router để quản lý điều hướng, và nhiều thư viện khác để mở rộng chức năng của ứng dụng.
Cộng đồng lớn: React có một cộng đồng lớn và tích cực, với nhiều tài liệu và nguồn thông tin hữu ích Điều này làm cho việc học và phát triển ứng dụng React trở nên thuận lợi.
2.2 Tìm hiểu chung về Nodejs
Trang 7Node.js là một môi trường thực thi JavaScript được xây dựng trên JavaScript runtime V8 của Chrome Node.js cho phép chúng ta chạy mã JavaScript trên máy chủ, thường được sử dụng để xây dựng các ứng dụng web có tính chất thời gian thực, đặc biệt là các ứng dụng đơn trang (single-page applications - SPAs).
Dưới đây là một số khái niệm cơ bản và tính năng chính của Node.js:
JavaScript Everywhere: Node.js giúp mở rộng sức mạnh của JavaScript từ phía client-side (trình duyệt) sang server-side (máy chủ) Điều này cho phép lập trình viên sử dụng cùng một ngôn ngữ lập trình (JavaScript) trên cả hai môi trường.
Asynchronous and Event-Driven: Mô hình lập trình của Node.js là không đồng bộ (asynchronous), sử dụng các sự kiện (event-driven) Điều này có nghĩa là Node.js có thể xử lý nhiều yêu cầu mà không cần tạo ra nhiều luồng (threads), giúp tối ưu hiệu suất của ứng dụng.
Non-blocking I/O (Input/Output): Node.js không chặn (non-blocking) I/O, cho phép xử lý nhiều yêu cầu I/O cùng một lúc mà không cần chờ đợi kết quả trước khi di chuyển sang công việc khác Điều này làm tăng hiệu suất của ứng dụng.
CommonJS Modules: Node.js sử dụng hệ thống module CommonJS, giúp quản lý và tổ chức mã nguồn một cách hiệu quả Điều này giúp phát triển ứng dụng theo mô hình modul và tái sử dụng mã nguồn dễ dàng.
NPM (Node Package Manager): NPM là một công cụ quản lý gói (package manager) cho Node.js, giúp lập trình viên dễ dàng cài đặt, quản lý và chia sẻ thư viện JavaScript và công cụ khác nhau.
Server-side Development: Node.js được sử dụng chủ yếu để xây dựng các ứng dụng máy chủ, như các ứng dụng web, API, và các ứng dụng có tính chất thời gian thực.
Cộng Đồng Lớn: Node.js có một cộng đồng lớn và tích cực, với nhiều thư viện và framework hữu ích được phát triển và duy trì.
Trang 8Tóm lại, Node.js là một môi trường thực thi JavaScript mạnh mẽ, đặc biệt là trong việc xây dựng các ứng dụng máy chủ có khả năng xử lý đồng thời nhiều kết nối, có hiệu suất cao và có tính tương tác cao.
2.3 Tìm hiểu chung về Redux
Redux là một thư viện quản lý trạng thái (state management) cho ứng dụng
JavaScript Nó thường được sử dụng chủ yếu trong các ứng dụng React, nhưng cũng có thể tích hợp với các thư viện hoặc framework khác Redux giúp quản lý trạng thái ứng dụng một cách dễ dàng, dựa trên các nguyên tắc cụ thể như mô hình unidirectional data flow và immutability.
Dưới đây là một số khái niệm và tính năng quan trọng của Redux:
Store: Redux duy trì một "store" là nơi lưu trữ toàn bộ trạng thái của ứng dụng.
Trạng thái này có thể được truy cập và cập nhật thông qua các "action".
Action: Là các đối tượng mô tả sự kiện hoặc hành động sẽ xảy ra trong ứng dụng.
Action chứa ít nhất một thuộc tính type để xác định loại hành động và thường kèm theo dữ liệu (payload) để cập nhật trạng thái.
Reducer: Reducer là các hàm xử lý các action và trả về một bản sao mới của trạng
thái Reducer không thay đổi trạng thái hiện tại mà tạo ra một bản sao mới, giúp duy trì tính nguyên tắc "immutability".
Dispatch: Action được gửi đi thông qua một hàm gọi là dispatch Khi dispatch
được gọi, nó sẽ chuyển action tới reducer để xử lý và cập nhật trạng thái.
Middleware: Middleware là các lớp trung gian có thể mở rộng hoặc thay đổi cách
Redux hoạt động Middleware thường được sử dụng để xử lý các tác vụ như ghi log, xử lý side effects, hay thậm chí là thực hiện các yêu cầu mạng.
Unidirectional Data Flow: Redux tuân theo mô hình luồng dữ liệu một chiều, từ
trên xuống Action được gửi từ components, đi qua reducers, và cập nhật store Các components theo dõi sự thay đổi của store và cập nhật giao diện người dùng tương ứng.
Redux thường được sử dụng trong các ứng dụng lớn và phức tạp, nơi quản lý trạng thái trở nên quan trọng để tránh tình trạng lộn xộn và khó bảo trì Mặc dù có thể có
Trang 9một số độ phức tạp ban đầu khi sử dụng Redux, nhưng nó mang lại sự quản lý trạng thái mạnh mẽ và có thể mở rộng cho ứng dụng của bạn.
2.4 Tìm hiểu chung về Hooks
React Hooks là một tính năng của React phiên bản 16.8 trở đi, giúp lập trình viên quản lý trạng thái và các tính năng của React components một cách dễ dàng hơn Hooks được thiết kế để sử dụng trong các functional components, giúp chúng ta sử dụng các tính năng của class components mà không cần sử dụng class.
2.5 Tìm hiểu chung về Axios
Axios là một thư viện HTTP client được sử dụng trong các ứng dụng JavaScript và Node.js để tương tác với các API từ máy chủ Thư viện này cho phép các lập trình viên gửi các yêu cầu HTTP (GET, POST, PUT, DELETE, ) đến các API, và xử lý các phản hồi được trả về từ máy chủ.
Axios cho phép thiết lập các thông số cấu hình để tùy chỉnh các yêu cầu HTTP và xử lý phản hồi, bao gồm cách xử lý lỗi và định dạng dữ liệu trả về (JSON, XML, HTML, v.v.).
Với Axios, việc tương tác với các API trở nên đơn giản và tiện lợi hơn, và đặc biệt hơn là nó cho phép lập trình viên xử lý các yêu cầu HTTP bất đồng bộ (asynchronous requests) một cách dễ dàng.
2.6 Tìm hiểu chung về JWT
JSON Web Token (JWT) là một tiêu chuẩn mở (RFC 7519) định nghĩa cách truyền thông tin an toàn giữa các bên dưới dạng JSON JWT được sử dụng chủ yếu để xác thực và xác định người dùng sau khi họ đã đăng nhập vào một ứng dụng.
Dưới đây là một số khái niệm và tính năng quan trọng của JWT: Cấu Trúc JWT: JWT bao gồm ba phần cơ bản:
Header: Chứa các thông tin về loại token và thuật toán sử dụng Payload: Là phần chứa các thông tin về người dùng (claim).
Signature: Chữ ký số được tạo ra bằng cách ký (sign) phần header và payload sử dụng một khóa bí mật.
Trang 10Xác Thực (Authentication): JWT thường được sử dụng để xác thực người dùng sau khi họ đã đăng nhập vào một ứng dụng Sau khi người dùng đăng nhập thành công, server tạo ra một JWT và gửi nó về cho client Client sẽ gửi JWT này trong mỗi yêu cầu tiếp theo, giúp server xác định người dùng.
Tính Di Động (Stateless): JWT là stateless, nghĩa là server không cần lưu trữ trạng thái của người dùng đã đăng nhập Thông tin cần thiết để xác định người dùng được chứa trong chính JWT, giúp giảm áp lực cho server.
Phân Quyền (Authorization): JWT cũng có thể chứa thông tin về quyền lợi của người dùng (claims) Điều này giúp ứng dụng thực hiện kiểm tra quyền lợi một cách dễ dàng.
Phương Thức Truyền Thông Tin An Toàn: JWT thường được sử dụng qua HTTPS để đảm bảo tính an toàn của thông tin Chữ ký số giúp ngăn chặn bất kỳ sự thay đổi nào trong dữ liệu trên đường truyền.
Dễ Dàng tích Hợp: JWT có thể dễ dàng tích hợp với nhiều loại ứng dụng, bao gồm cả ứng dụng web, mobile apps, và dịch vụ web.
Thời Hạn (Expiration): JWT thường có thể được thiết lập với một thời hạn (expiration time) Sau khi thời hạn này hết, JWT sẽ không còn hiệu lực, giúp giảm rủi ro bảo mật JWT là một công nghệ phổ biến trong việc xác thực và phân quyền trong các ứng dụng web và dịch vụ web, đặc biệt khi cần tích hợp giữa các hệ thống khác nhau
2.7 Tìm hiểu chung về MongoDB
MongoDB là một hệ quản trị cơ sở dữ liệu phi quan hệ, phân tán, mã nguồn mở Nó sử dụng kiểu dữ liệu JSON để lưu trữ và truy vấn dữ liệu, thay vì sử dụng bảng và quan hệ như các hệ quản trị cơ sở dữ liệu quan hệ truyền thống.
Một số đặc điểm của MongoDB bao gồm:
Tính linh hoạt: MongoDB cho phép lưu trữ dữ liệu với các định dạng khác nhau, giúp cho việc phát triển ứng dụng trở nên linh hoạt hơn.
Tính mở rộng: MongoDB có thể dễ dàng mở rộng để đáp ứng nhu cầu lưu trữ dữ liệu tăng lên.
Trang 11Tính khả dụng cao: MongoDB hỗ trợ tính năng replica set và sharding giúp đảm bảo tính khả dụng và độ tin cậy của hệ thống.
Tính năng tìm kiếm đầy đủ văn bản: MongoDB hỗ trợ tìm kiếm dữ liệu với nhiều tiêu chí khác nhau, trong đó có tính năng tìm kiếm đầy đủ văn bản.
Các ngôn ngữ lập trình được hỗ trợ bởi MongoDB bao gồm JavaScript, Python, Ruby, C++, C#, Java và PHP.
2.8 Tìm hiểu về Refesh token
Refresh Token là một chuỗi đại diện cho quyền truy cập, tương tự như Access Token Tuy nhiên, Refresh Token không được sử dụng để truy cập tài nguyên, mà thay vào đó, nó được sử dụng để đổi lấy Access Token mới khi Access Token hiện tại hết hạn Quá trình hoạt động thông thường của Refresh Token là như sau: khi người dùng đăng nhập thành công, hệ thống trả về một cặp Access Token và Refresh Token Access Token thường có thời hạn hợp lý ngắn Khi Access Token hết hạn, ứng dụng sử dụng Refresh Token để yêu cầu đổi lấy Access Token mới Nếu Refresh Token vẫn còn hạn, hệ thống cung cấp một cặp mới Access Token và Refresh Token Bằng cách này, sử dụng Refresh Token có thể giúp tăng cường tính bảo mật và cung cấp trải nghiệm người dùng thuận lợi hơn khi truy cập các tài nguyên của ứng dụng.
Tuy nhiên, quản lý Refresh Token cũng đặt ra nhiều thách thức về an toàn Refresh Token cần được mã hóa và lưu trữ an toàn Chính sách về thời gian hết hạn và tái sử dụng cũng cần được đặt ra để đảm bảo tính bảo mật của ứng dụng.
Một số điều quan trọng để lưu ý khi sử dụng Refresh Token bao gồm:
1 Mã Hóa An Toàn: Refresh Token cần được mã hóa bằng các phương thức an
toàn để tránh bị tấn công.
2 Lưu Trữ An Toàn: Refresh Token nên được lưu trữ an toàn, thường là trên
server, để ngăn chặn truy cập trái phép.
3 Thời Gian Hết Hạn và Tái Sử Dụng: Thiết lập chính sách thời gian hết hạn và
tái sử dụng để giảm thiểu rủi ro bảo mật.
4 Cơ Mechanism Đổi Mới: Thiết kế một cơ chế đổi mới để ngăn chặn việc sử dụng
Refresh Token cũ khi người dùng đã đăng xuất hoặc thay đổi mật khẩu.
Trang 125 Ghi Log An Toàn: Ghi log hoạt động liên quan đến Refresh Token để theo dõi và
phát hiện các hoạt động đáng ngờ.
3.1 Phân tích
3.1.1 Mô tả nghiệp vụ
Trang web có thể có phép người dùng tra cứu tìm kiếm các mẫu quần áo, phụ kiện thể thao của các đội bóng Sau khi tìm kiếm người dùng có thể xem chi các mẫu quần áo cũng như phụ kiện.
Trước khi thực hiện mua sản phẩm người dùng phải thực hiện việc đăng nhập hoặc đăng kí tài khoản để có thể trải nghiệm tính năng mua sản phẩm.
Tại đây người dùng có thể mua một sản phẩm hoặc nhiều sản phẩm cùng một lúc Và người dùng cũng có thể xem tình trạng cũng như thông tin đơn hàng mình đã đặt.
Trang 163.2.11 Giao diện quản lý đơn hàng
Trang 173.3 Phân tích bố cục code
3.3.1 Backend
Index.js: thiết lập một máy chủ Express, cấu hình các middleware, kết nối đến cơ sở dữ liệu MongoDB, và sử dụng các tuyến đường được định nghĩa trong module router
CreateOrder:
• Hàm này xử lý việc tạo đơn hàng mới.
• Nó trích xuất thông tin cần thiết từ body của request như paymentMethod, itemsPrice, shippingPrice, totalPrice, fullName, address, city, và phone.
• Hàm kiểm tra xem có bất kỳ trường nào bị thiếu không, và nếu có, nó trả về một phản hồi với thông báo lỗi.
• Nếu tất cả các trường cần thiết đều có mặt, hàm gọi hàm createOrder từ mô-đun OrderService và trả về phản hồi.
• Hàm này lấy tất cả chi tiết đơn hàng cho một người dùng cụ thể • Nó trích xuất userId từ tham số của request.