Đồ án tìm hiểu về reactjsexpress framework

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA HỆ THỐNG THÔNG TIN BÁO CÁO ĐỒ ÁN ĐỀ TÀI: TÌM HIỂU VỀ REACTJSEXPRESS FRAMEWORK Lớp: SE122.N21 Giảng viên hướng dẫn: ThS Nguyễn Công Hoan Sinh viên thực hiện: Nguyễn Bảo Duy – 19520488 🙡 TP Hồ Chí Minh, 6/2023 🙣 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA HỆ THỐNG THÔNG TIN BÁO CÁO ĐỒ ÁN ĐỀ TÀI: TÌM HIỂU VỀ REACTJSEXPRESS FRAMEWORK Lớp: SE122.N21 Giảng viên hướng dẫn: ThS Nguyễn Công Hoan Sinh viên thực hiện: Nguyễn Bảo Duy – 19520488 🙡 TP Hồ Chí Minh, 6/2023 🙣 LỜI CẢM ƠN Em xin gửi lời cảm ơn tới thầy Nguyễn Công Hoan giúp đỡ, hướng dẫn, định hướng cách làm việc em suốt trình thực đồ án Em vơ biết ơn thầy tận tình dẫn em thực đề tài Trong q trình thực em cịn hạn chế cịn nhiều khó khăn nên khơng tránh khỏi thiếu sót nên em mong thầy đưa góp ý, hướng dẫn để em có thêm cho nhiều kiến thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc Em xin chân thành cảm ơn thầy! TP Hồ Chí Minh, tháng năm 2023 Sinh viên thực Nguyễn Bảo Duy NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ………………, ngày ……… tháng ……… năm ……… Giảng viên hướng dẫn Nguyễn Công Hoan MỤC LỤC DANH MỤC HÌNH ẢNH DANH MỤC BẢNG Chương Tổng quan đề tài 1.1 Lý chọn đề tài 1.2 Mục tiêu 1.3 Phạm vi nghiên cứu 1.4 Đối tượng sử dụng 1.5 Phương pháp thực 1.6 Công nghệ Chương Cơ sở lý thuyết 10 2.1 Reactjs 10 2.1.1 Giới thiệu chung 10 2.1.2 Các khái niệm 10 2.1.2.1 Tiến cận component-based 10 2.1.2.2 Virtual DOM 11 2.1.2.3 Props State 12 2.1.2.4 Vòng đời component 12 2.1.2.5 React Hook 13 2.1.2.6 Cách Reactjs hoạt động 14 2.1.2.7 Ưu điểm Reactjs 14 2.2 React-Route 16 2.3 React Redux Redux-toolkit 17 2.4 Expressjs 18 2.5 Mongoose 18 2.6 JSON Web Token 19 Chương Phân tích thiết kế hệ thống 20 3.1 Xây dựng hệ thống 20 3.1.1 Kiến trúc hệ thống 20 3.1.2 Mô tả chi tiết 20 3.2 Phân tích yêu cầu 20 3.2.1 Yêu cầu chức 20 3.2.2 Yêu cầu phi chức 21 3.3 Sơ đồ use-case 22 3.3.1 Danh sách actor 23 3.3.2 Danh sách use-case 23 3.4 Sơ đồ use-case 24 3.4.1 Đăng ký 24 3.4.2 Đăng nhập 24 3.4.3 Tìm kiếm 25 3.4.4 Xem tin tức 25 3.4.5 Đánh giá sản phẩm 26 3.4.6 Thêm sản phẩm vào giỏ hàng 26 3.4.7 Sửa sản phẩm giỏ hàng 27 3.4.8 Xóa sản phẩm giỏ hàng 27 3.4.9 Xử lý đơn hàng 27 3.4.10 Thêm sản phẩm 28 3.4.11 Sửa sản phẩm 28 3.4.12 Xóa sản phẩm 29 3.4.13 Thêm tin tức 29 3.4.14 Sửa tin tức 30 3.4.15 Xóa tin tức 30 Chương Xây dựng website 32 4.1 Giao diện bên phía người dùng 32 4.1.1 Trang chủ 32 4.1.2 Đăng nhập 33 4.1.3 Đăng ký 34 4.1.4 Tin tức 34 4.1.5 Giỏ hàng 35 4.2 Giao diện bên phía người dùng 36 4.2.1 Đăng nhập 36 4.2.2 Tổng quan 36 4.2.3 Danh sách hãng sản phẩm 37 4.2.4 Danh sách sản phẩm 38 Chương Kết luận 39 5.1 Thuận lợi 39 5.2 Khó khăn 39 5.3 Ưu điểm đồ án 39 5.4 Nhược điểm đồ án 39 5.5 Hướng phát triển đề tài 39 TÀI LIỆU THAM KHẢO 40 DANH MỤC HÌNH ẢNH Hình 2.1.2.2.1 Mơ tả Virtual DOM 12 Hình 2.1.2.4.1 Vòng đời component 13 Hình 3.1.1.1 Sơ đồ kiến trúc hệ thống 20 Hình 3.2.2.1 Sơ đồ use-case 22 Hình 3.2.2.2 Sơ đồ phân rã use-case 22 Hình 4.1.1.1 Trang chủ 32 Hình 4.1.2.1 Màn hình đăng nhập 33 Hình 4.1.3.1 Màn hình đăng ký 34 Hình 4.1.4.1 Màn hình tin tức 34 Hình 4.1.5.1 Màn hình giỏ hàng 35 Hình 4.2.1.1 Màn hình đăng nhập 36 Hình 4.2.2.1 Màn hình tổng quan 36 Hình 4.2.3.1 Màn hình hãng sản phẩm 37 Hình 4.2.4.1 Màn hình danh sách sản phẩm 38 DANH MỤC BẢNG Bảng 3.1.2.1 Kiến trúc hệ thống 20 Bảng 3.2.1.1 Yêu cầu chức 20 Bảng 3.3.1.1 Danh sách Actor 23 Bảng 3.3.2.1 Danh sách use-case 23 Bảng 3.4.1.1 Đặc tả use-case Đăng ký 24 Bảng 3.4.2.1 Đặc tả use-case Đăng nhập 24 Bảng 3.4.3.1 Đặc tả use-case Tìm kiếm 25 Bảng 3.4.4.1 Đặc tả use-case Xem tin tức 25 Bảng 3.4.5.1 Đặc tả use-case Đánh giá sản phẩm 26 Bảng 3.4.6.1 Đặc tả use-case Thêm sản phẩm vào giỏ hàng 26 Bảng 3.4.7.1 Đặc tả use-case Sửa sản phẩm giỏ hàng 27 Bảng 3.4.8.1 Đặc tả use-case Xóa sản phẩm giỏ hàng 27 Bảng 3.4.9.1 Đặc tả use-case Xử lý đơn hàng 27 Bảng 3.4.10.1 Đặc tả use-case Thêm sản phẩm 28 Bảng 3.4.11.1 Đặc tả use-case Sửa sản phẩm 28 Bảng 3.4.12.1 Đặc tả use-case Xóa sản phẩm 29 Bảng 3.4.13.1 Đặc tả use-case Thêm tin tức 29 Bảng 3.4.14.1 Đặc tả use-case Sửa tin tức 30 Bảng 3.4.15.1 Đặc tả use-case Xóa tin tức 30 Chương Tổng quan đề tài 1.1.Lý chọn đề tài Trong thời đại khoa học cơng nghệ ngày phát triển website thứ công cụ ngày cần thiết quan trọng doanh nghiệp Website giúp doanh nghiệp giao tiếp tiếp cận khách hàng dễ dàng hơn, hiệu hơn, thơng qua biết nhu cầu tìm hiểu sản phẩm phản hồi đến từ khách hàng Một website chất lượng chuyên nghiệp giúp nâng cao hình ảnh uy tín doanh nghiệp Vì vậy, việc xây dựng thiết kế website bước thiết yếu để doanh nghiệp phát triển mạnh mẽ Hiện nay, để xây dựng phát triển ứng dụng web cách nhanh chóng có nhiều thư viện, framework hỗ trợ cho sử dụng • Về phía client: Reactjs giúp developers xây dựng giao diện người dùng linh hoạt thông qua component nhằm để dễ dàng tái sử dụng, bảo trì component Ngồi ra, Reactjs sử dụng Virtual DOM để tăng hiệu suất ứng dụng web giảm tải cho trình duyệt • Về phía server: Express.js giúp đơn giản hóa việc xây dựng ứng dụng web phía server cách cung cấp APIs đơn giản dễ hiểu Nó linh hoạt cho phép bạn tùy chỉnh mở rộng theo nhu cầu ứng dụng 1.2.Mục tiêu - Tìm hiểu nghiên cứu cách thức hoạt động ReactJS Express.js - Sử dụng nghiên cứu để xây dựng hệ thống ứng dụng web 1.3.Phạm vi nghiên cứu • Phạm vi mơi trường: o Triển khai ứng dụng mơi trường web • Phạm vi chức năng: o Quản lý thông tin sản phẩm o Quản lý giỏ hàng o Tìm kiếm sản phẩm theo nhu cầu 3.4.5.Đánh giá sản phẩm Bảng 3.4.5.1 Đặc tả use-case Đánh giá sản phẩm Usecase Nội dung Tên use-case Đánh giá sản phẩm Mô tả Người dùng đánh giá sản phẩm chọn Luồng Người dùng nhấn vào sản phẩm Người dùng nhập vào phần đánh giá sản phẩm Người dùng nhấn gửi Luồng phụ Không có u cầu đặc biệt Khơng có Điều kiện trước Khơng có Điều kiện sau Khơng có Mở rộng Khơng có 3.4.6.Thêm sản phẩm vào giỏ hàng Bảng 3.4.6.1 Đặc tả use-case Thêm sản phẩm vào giỏ hàng Usecase Nội dung Tên use-case Thêm sản phẩm vào giỏ hàng Mô tả Người dùng thêm sản phẩm vào giỏ hàng Luồng Người dùng nhấn vào sản phẩm Người dùng nhấn vào nút thêm vào giỏ hàng Nhấn thêm Luồng phụ Khơng có u cầu đặc biệt Khơng có Điều kiện trước Người dùng đăng nhập trước Điều kiện sau Thêm sản phẩm chọn vào giỏ hàng Mở rộng Khơng có 26 3.4.7.Sửa sản phẩm giỏ hàng Bảng 3.4.7.1 Đặc tả use-case Sửa sản phẩm giỏ hàng Usecase Nội dung Tên use-case Sửa sản phẩm giỏ hàng Mô tả Người dùng sửa sản phẩm giỏ hàng Luồng Người dùng nhấn vào sản phẩm giỏ hàng Người dùng điều chỉnh tùy chỉnh theo nhu cầu Thông báo lỗi người dùng nhập sai định dạng Luồng phụ u cầu đặc biệt Khơng có Điều kiện trước Người dùng đăng nhập trước Điều kiện sau Sửa hồ sơ khám bệnh cho người dùng Mở rộng Khơng có 3.4.8.Xóa sản phẩm giỏ hàng Bảng 3.4.8.1 Đặc tả use-case Xóa sản phẩm giỏ hàng Usecase Nội dung Tên use-case Xóa sản phẩm giỏ hàng Mơ tả Người dùng xóa sản phẩm giỏ hàng Luồng Người dùng nhấn vào sản phẩm giỏ hàng Người dùng nhấn vào nút xóa sản phẩm Nhấn xác nhận Luồng phụ Khơng có u cầu đặc biệt Khơng có Điều kiện trước Người dùng đăng nhập trước Điều kiện sau Xóa sản phẩm chọn khỏi giỏ hàng Mở rộng Khơng có 3.4.9.Xử lý đơn hàng Bảng 3.4.9.1 Đặc tả use-case Xử lý đơn hàng Usecase Nội dung 27 Tên use-case Xử lý đơn hàng Mô tả Quản lý xử lý đơn hàng Luồng Quản lý nhấn vào danh sách đơn hàng Chọn đơn hàng để xử lý Thơng báo xử lý thành cơng Luồng phụ Khơng có u cầu đặc biệt Khơng có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Cập nhật đơn hàng hệ thống Mở rộng Khơng có 3.4.10.Thêm sản phẩm Bảng 3.4.10.1 Đặc tả use-case Thêm sản phẩm Usecase Nội dung Tên use-case Thêm sản phẩm Mô tả Quản lý thêm sản phẩm Luồng Quản lý nhấn vào thêm sản phẩm Quản lý nhập thông tin cần thiết Bấm nút thêm Thông báo thêm thành công Luồng phụ Thông báo lỗi người dùng nhập sai định dạng u cầu đặc biệt Khơng có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Thêm sản phẩm hệ thống Mở rộng Khơng có 3.4.11.Sửa sản phẩm Bảng 3.4.11.1 Đặc tả use-case Sửa sản phẩm Usecase Nội dung Tên use-case Sửa sản phẩm 28 Mô tả Quản lý sửa sản phẩm chọn Luồng Quản lý nhấn vào sản phẩm Sửa thông tin sản phẩm chọn Bấm nút sửa Thông báo sửa thành công Luồng phụ Thông báo lỗi người dùng nhập sai định dạng u cầu đặc biệt Khơng có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Sửa sản phẩm chọn hệ thống Mở rộng Khơng có 3.4.12.Xóa sản phẩm Bảng 3.4.12.1 Đặc tả use-case Xóa sản phẩm Usecase Nội dung Tên use-case Xóa sản phẩm Mơ tả Quản lý xóa sản phẩm Luồng Quản lý nhấn vào sản phẩm Nhấn xóa sản phẩm chọn Bấm xác nhận xóa Thơng báo xóa thành cơng Luồng phụ Khơng có u cầu đặc biệt Khơng có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Xóa sản phẩm hệ thống Mở rộng Khơng có 3.4.13.Thêm tin tức Bảng 3.4.13.1 Đặc tả use-case Thêm tin tức Usecase Nội dung Tên use-case Thêm tin tức 29 Mô tả Quản lý thêm tin tức Luồng Quản lý nhấn vào tin tức Thêm tin tức Nhập thông tin cần thiết để thêm tin tức Thông báo thêm thành công Luồng phụ Thông báo lỗi người dùng nhập sai định dạng u cầu đặc biệt Khơng có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Thêm tin tức hệ thống Mở rộng Khơng có 3.4.14.Sửa tin tức Bảng 3.4.14.1 Đặc tả use-case Sửa tin tức Usecase Nội dung Tên use-case Sửa tin tức Mô tả Quản lý sửa tin tức Luồng Quản lý nhấn vào tin tức Sửa tin tức chọn Nhập thông tin cần thiết để sửa tin tức Thông báo sửa thành công Luồng phụ Thông báo lỗi người dùng nhập sai định dạng Yêu cầu đặc biệt Không có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Sửa tin tức chọn hệ thống Mở rộng Khơng có 3.4.15.Xóa tin tức Bảng 3.4.15.1 Đặc tả use-case Xóa tin tức Usecase Nội dung Tên use-case Xóa dịch vụ 30 Mơ tả Quản lý xóa dịch vụ chọn Luồng Quản lý nhấn vào dịch vụ Nhân xóa dịch vụ chọn Nhấn xác nhận xóa Thơng báo xóa thành cơng Luồng phụ Khơng có u cầu đặc biệt Khơng có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Xóa dịch vụ chọn hệ thống Mở rộng Không có 31 Chương Xây dựng website 4.1.Giao diện bên phía người dùng 4.1.1.Trang chủ Hình 4.1.1.1 Trang chủ Trang chủ nơi giới thiệu tổng quan cửa hàng trưng bày số sản phẩm bật cửa hàng 32 4.1.2.Đăng nhập Hình 4.1.2.1 Màn hình đăng nhập Người dùng tiến hành đăng nhập để tiến hành tốn 33 4.1.3.Đăng ký Hình 4.1.3.1 Màn hình đăng ký Người dùng nhập thông tin để tạo tài khoản 4.1.4.Tin tức Hình 4.1.4.1 Màn hình tin tức 34 Người dùng truy cập xem tin tức cửa hàng 4.1.5.Giỏ hàng Hình 4.1.5.1 Màn hình giỏ hàng Người dùng quản lý giỏ hàng 35 4.2.Giao diện bên phía người dùng 4.2.1.Đăng nhập Hình 4.2.1.1 Màn hình đăng nhập Quản trị viên phải đăng nhập để tiếp tục 4.2.2.Tổng quan Hình 4.2.2.1 Màn hình tổng quan 36 Người quản trị hệ thống xem tổng quan luồng liệu có hệ thống: Doanh số, yêu cầu cần xử lý biểu đồ liên quan đến toán doanh thu Đồng thời số liệu / biểu đồ, bấm vào để hiển thị danh sách liên quan đến liệu tương ứng 4.2.3.Danh sách hãng sản phẩm Hình 4.2.3.1 Màn hình hãng sản phẩm Giao diện hiển thị dạng danh sách, giúp người quản trị dễ dàng thêm thay đổi thông tin liệu cần thiết 37 4.2.4.Danh sách sản phẩm Hình 4.2.4.1 Màn hình danh sách sản phẩm Người quản trị hệ thống quản lý: thêm / xóa / sửa sản phẩm có Sản phẩm sửa mơ tả bên trong, quản lý comment đánh giá người dùng 38 Chương Kết luận 5.1.Thuận lợi - Nhận hỗ trợ từ giảng viên - Có mẫu phần mềm để tham khảo 5.2.Khó khăn - Vì chưa qn với việc sử dụng ReactJS nên gặp nhiều khó khăn tốn nhiều thời gian - Vì làm nên có nhiều chức chưa hồn thiện 5.3.Ưu điểm đồ án - Thiết kế giao diện đại, dễ sử dụng - Đáp ứng tín website đặt lịch khám bệnh 5.4.Nhược điểm đồ án - Cịn số tính chưa hoàn thiện - Code chưa tối ưu hóa - Phân bố thời gian khơng tốt khiến số tính chưa hồn thiện 5.5.Hướng phát triển đề tài - Hồn thiện tính - Tích hợp chatbot để hỗ trợ người dùng - Thiết kế giao diện phù hợp cho thiết bị người dùng 39 TÀI LIỆU THAM KHẢO [1] Quang Anh, “Giới thiệu Reactjs”, https://viblo.asia/p/gioi-thieu-reactjsQbq5QvaGKD8, truy cập ngày 26/05/2022 [2] Medium, “Node.js thực gì?”, https://topdev.vn/blog/node-js-la-gi/ , truy cập ngày 25/05/2022 [3] Hoang Hung, “Mongoose cho MongoDB, NodeJS”, https://viblo.asia/p/mongoose-cho-mongodb-nodejs-Qbq5QWvJZD8 , truy cập ngày 27/05/2022 [4] Topdev, “JSON Web Token (JWT) gì?”, https://topdev.vn/blog/jwt-la-gi/, truy cập ngày 27/05/2022 [5] Medium, “ExpressJS gì? Tất tần tật Express.js” , https://topdev.vn/blog/express-js-la-gi/ , truy cập ngày 26/05/2022 40