Đồ án tìm hiểu reactjs và xây dựng website

1 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN ĐỀ TÀI: TÌM HIỂU REACTJS VÀ XÂY DỰNG WEBSITE BÁN ĐỒ GIA DỤNG Giảng viên hướng dẫn: ThS HUỲNH HỒ THỊ MỘNG TRINH Sinh viên thực hiện: LÊ THANH TUẤN –MSSV: 19522467 Thành phố Hồ Chí Minh, tháng 12 năm 2022 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN ĐỀ TÀI: TÌM HIỂU REACTJS VÀ XÂY DỰNG WEBSITE BÁN ĐỒ GIA DỤNG Giảng viên hướng dẫn: HUỲNH HỒ THỊ MỘNG TRINH Sinh viên thực hiện: LÊ THANH TUẤN –MSSV: 19522467 Thành phố Hồ Chí Minh, tháng 12 năm 2022 Lời cảm ơn Đồ án môn học Đồ án đặt tiền đề cho việc xây dựng khóa luận tốt nghiệp Đây mơn học có nhiều thử thách, địi hỏi người học phải dành nhiều thời gian, cơng sức để nghiên cứu, tìm tịi xây dựng Đồng thời, hội để sinh viên thực hành học suốt năm đại học học hỏi thêm nhiều kiến thức, kinh nghiệm kỹ phục vụ cho công việc sau Cho nên xem thử thách hội để sinh viên rèn luyện, hoàn thiện thân kĩ tích lũy suốt q trình làm đồ án Để đến đoạn cuối hành trình nỗ lực, cố gắng kiên trì Đồng hành sinh viên vượt qua thử thách có mặt giúp đỡ người thầy tận tâm cơng việc Nhóm xin chân thành cảm ơn cô Huỳnh Hồ Thị Mộng Trinh tận tình giúp đỡ nhóm em hồn thành đồ án Chính nhờ góp ý, động viên giúp đồ án nhóm hoàn thiện chuyên nghiệp nhiều Bên cạnh đó, nhóm học hỏi nhiều kiến thức, kinh nghiệm học thú vị trình làm khố luận, hành trang hữu ích cho nhóm sau Nhóm xin chân thành cảm ơn anh chị, bạn bè giúp đỡ nhóm q trình thực đồ án Nhờ người mà nhóm có nhiều góc nhìn khác đề tài làm, từ giúp hồn thiện đồ án nhóm Một lần nữa, nhóm xin chân thành cảm ơn cô người NHẬN XÉT (Của giáo viên hướng dẫn) ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… MỤC LỤC Lời cảm ơn CHƯƠNG I: GIỚI THIỆU CHUNG Đề tài 2 Lý chọn đề tài Tóm tắt đề tài Mục tiêu đề tài Phương pháp nghiên cứu Ý nghĩa hướng đề tài 6.1 Về mặt tài liệu 6.2 Về mặt sản phẩm CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN Reactjs 1.1 Giới thiệu 1.2 Tính bật ReactJs: 1.3 Lý sử dụng NodeJs 2.1 Giới thiệu 2.2 Tính bật NodeJs 2.3 Lý sử dụng NodeJs MongoDB 3.1 Giới thiệu CHƯƠNG III: PHÂN TÍCH HỆ THỐNG 11 Danh sách yêu cầu hệ thống 11 Đặt tả Use-case 13 2.1 Admin 15 2.1.1 Đặc tả Use-case “Đăng nhập” 15 2.1.2 Đặc tả Use-case “Thêm sản phẩm” 16 2.1.3 Đặc tả Use-case “Sửa sản phẩm” 17 2.1.4 Đặc tả Use-case “Xóa sản phẩm” 18 2.1.5 Đặc tả Use-case “Thêm danh mục sản phẩm” 19 2.1.6 Đặc tả Use-case “Sửa danh mục sản phẩm” 20 2.1.7 Đặc tả Use-case “Xóa danh mục sản phẩm” 21 2.1.8 Đặc tả Use-case “Thêm tài khoản đăng nhập” 22 2.1.9 Đặc tả Use-case “Sửa tài khoản đăng nhập” 23 2.1.10 Đặc tả Use-case “Xóa tài khoản đăng nhập” 24 2.1.11 Đặc tả Use-case “Duyệt đơn hàng” 25 2.1.12 Đặc tả Use-case “Thống kê báo cáo” 26 2.2 User 27 2.2.1 Đặc tả Use-case “Đăng ký” 27 2.2.2 Đặc tả Use-case “Đăng nhập” 29 2.2.3 Đặc tả Use-case “Tìm kiểm sản phẩm” 30 2.2.4 Đặc tả Use-case “Xem thông tin sản phẩm” 31 2.2.5 Đặc tả Use-case “Xem danh mục sản phẩm” 32 2.2.6 Đặc tả Use-case “Thêm giỏ hàng” 33 2.2.7 Đặc tả Use-case “Kiểm tra giỏ hàng” 34 2.2.8 Đặc tả Use-case “Xóa sản phẩm khỏi giỏ hàng” 35 2.2.9 Đặc tả Use-case “Cập nhật sản phẩm giỏ” 36 2.2.10 Đặc tả Use-case “Đặt hàng” 37 2.2.11 Đặc tả Use-case “Đánh giá sản phẩm” 38 Sơ đồ liệu 40 3.1 Bảng User 41 3.2 Bảng Admin 41 3.3 Bảng Product 42 3.4 Bảng DetailProduct 43 3.5 Bảng Category 43 3.6 Bảng Discount 44 3.7 Bảng Transaction 44 CHƯƠNG V: THIẾT KẾ GIAO DIỆN 45 5.1 User 45 Trang Home 45 Trang sản phẩm 48 Trang khuyến 50 Trang giỏ hàng 51 Trang Liên hệ 52 Chi tiết sản phẩm 53 5.2 Admin 55 Đăng nhập 55 Trang chủ 55 Quản lý sản phẩm 56 Quản lý danh mục sản phẩm 58 Quản lý đơn hàng 59 Quản lý tài khoản 60 Quản lý đánh giá 61 CHƯƠNG VI: TỔNG KẾT 62 Công nghệ sử dụng 62 Độ hoàn thiện chức 62 3.Kết đạt hướng phát triển 63 3.1 Kết đạt 63 3.2 Hướng phát triển 64 CHƯƠNG VII: BẢNG PHÂN CÔNG CÔNG VIỆC 65 CHƯƠNG VIII: TÀI LIỆU THAM KHẢO 67 ReactJS: https://reactjs.org/ 67 Redux: https://redux.js.org/ 67 NodeJS: https://www.postgresql.org/ 67 Express: https://docs.microsoft.com/en-us/aspnet/web-api/ 67 MongoDB: https://www.mongodb.com/ 67 Firebase: https://firebase.google.com/ 67 CHƯƠNG I: GIỚI THIỆU CHUNG Đề tài - Tên đề tài: Tìm hiểu Reactjs xây dựng website bán đồ gia dụng - Công nghệ sử dụng: • Frontent: Reactjs, Axios, Redux • Backent: NodeJs - Cơ sở liệu: MongoDB, Firebase Lý chọn đề tài Trong thời kì cơng nghệ ngày phát triển, Internet ứng dụng khắp nơi nhu cầu mua sắm trang thiết bị gia dụng người thay đổi Từ đó, nhóm định xây dựng trang web bán đồ gia dụng để đáp ứng cầu tìm hiểu, lựa chọn mua sắm thiết bị gia dụng cho gia đình Ngồi ra, để xây dựng giao diện website linh động nhóm tìm hiểu định chọn cơng nghệ Reactjs, cơng nghệ lập trình giao diện đơng đảo lập trình viên sử dụng để phát triển phần mềm Tóm tắt đề tài Website bán hàng gia dụng xây dựng để đáp ứng cầu tìm hiểu, lựa chọn mua sắm gia đình Mục tiêu đề tài - Xây dựng trang web từ công nghệ Reactjs với cách chức đáp ứng nhu cầu người dùng Bên cạnh đó, học hỏi thêm nhiều cơng nghệ kiến thức lập trình website, API, Services - Tìm hiểu cơng nghệ thích hợp xây dựng ứng dụng - Hồn thành báo cáo mơn học Phương pháp nghiên cứu - Nghiên cứu Website có sẵn thị trường, nhận xét ưu khuyết điểm Website - Nghiên cứu tài liệu đặc tả Website tương tự Website https://www.dienmayxanh.com/, https://www.nguyenkim.com/, … - Tìm hiểu cơng nghệ thị trường, nhận xét chọn công nghệ thích hợp để xây dựng website - Tiếp tục phát triển Website từ môn học Đồ án phát triển website cho quản trị viên Ý nghĩa hướng đề tài 6.1 Về mặt tài liệu - Sử dụng nguồn tài liệu tham khảo Reactjs, NodeJs, MongoDB - Có tài liệu đặc tả use-case, sơ đồ lớp, tuần tự, mơ hình thiết kế giao diện 6.2 Về mặt sản phẩm - Tạo website mua sắm với số tính - Chức phù hợp với tình hình thực tế dễ sử dụng CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN Reactjs 1.1 Giới thiệu • ReactJS thư viện JavaScript tạo để xây dựng giao diện người dùng có khả tương tác tốt nhanh chóng cho ứng dụng web di động Nó thư viện mã nguồn mở, xây dựng dựa component, giao diện người dùng chịu trách nhiệm cho tầng view ứng dụng • Nó sử dụng công ty lớn, thành lập công ty thành lập như: Netflix, Airbnb, Instagram New York Times v v ReactJS mang lại nhiều lợi cho lập trình viên, khiến trở thành lựa chọn tốt so với Framework khác Angular • Trong kiến trúc Model View Controller (MVC), tầng view chịu trách nhiệm giao diện ứng dụng ReactJS tạo Jordan Walke, kỹ sư phần mềm Facebook Hình 1.1: Logo Reactjs Chi tiết sản phẩm Hình 5.6.1: Trang chi tiết sản phẩm Hình 5.6.2: Trang chi tiết sản phẩm Hình 5.6.3: Trang chi tiết sản phẩm * Mô tả chung xử lý kiện hình: Màn hình hiển thị sau người dùng click vào sản phầm Các component: - Header - Form Chi tiết sản phẩm - Danh sách sản phẩm đề xuất 5.2 Admin Đăng nhập Hình 1.1: Trang đăng nhập Trang chủ Hình 2.1: Trang chủ Quản lý sản phẩm Hình 3.1: Quản lý sản phẩm Hình 3.2: Tạo sản phẩm Hình 3.3: Xem chi tiết sản phẩm Hình 7.1: Xóa sản phẩm Quản lý danh mục sản phẩm Hình 4.1: Quản lý danh mục sản phẩm Hình 4.2: Thêm danh mục sản phẩm Hình 4.3: Xem chi tiết danh mục Quản lý đơn hàng Hình 5.1: Quản lý đơn hàng Hình 5.2: Duyệt đơn hàng Quản lý tài khoản Hình 6.1: Quản lý tài khoản Hình 6.2: Tạo tài khoản Quản lý đánh giá Hình 7.1: Quản lý đánh giá sản phẩm CHƯƠNG VI: TỔNG KẾT Công nghệ sử dụng - Công nghệ ReactJs dựa ngôn ngữ JavaScript, HTML, CSS - Công nghệ NodeJS dựa ngôn ngữ JavaScript - Sử dụng Server: IIS - Sử dụng sở liệu MongoDB, Firebase để lưu trữ liệu Độ hoàn thiện chức Bảng 6.1: Độ hoàn thiện chức Tên chức STT Đăng ký, đăng nhập Hiển thị danh sách sản phẩm Hiển thị danh mục sản phẩm Hiển thị sản phẩm theo danh mục Xem chi tiết sản phẩm Thêm sản phẩm vào giỏ hàng Xóa sản phẩm khỏi giỏ hàng Mức độ hoàn thành 100% 100% 100% 100% 100% 100% 100% Đánh giá sản phẩm 100% Quản lý sản phẩm 100% Ghi 10 11 12 Quản lý danh mục sản phẩm Quản lý tài khoản Admin Quản lý đánh giá người dùng 100% 100% 100% 13 Quản lý đơn hàng 100% 14 Thống kê, báo cáo 50% 15 Thanh toán đơn hàng 100% Chưa hoàn thành giao diện 3.Kết đạt hướng phát triển 3.1 Kết đạt Về lý thuyết: - Tìm hiểu nắm quy trình xây dựng website - Tìm hiểu vận dụng kiến thức liên quan đến phương pháp phát triển phần mềm hướng đối tượng, quy trình phát triển phần mềm vào trình xây dựng ứng dụng - Tìm hiểu áp dụng services vào website - Ngồi ra, nhóm tìm hiểu nắm cách sử dụng số framework hữu ích Express, Kỹ mềm: - Phát triển hoàn thiện kỹ sử dụng cơng cụ hỗ trợ lập trình viên như: GitHub, Trello, figma… - Học tập phát triển kỹ làm việc nhóm, kỹ phân chia điều phối công việc, kỹ xếp thời gian Sản phẩm: - Phần mềm đạt chức cần có website Bên cạnh số chức khác Thống kê doanh thu, sản phẩm chưa hoàn thành mặt giao diện - Giao diện thân thiện, dễ sử dụng 3.2 Hướng phát triển • Tiếp tục phát triển, hoàn thiện chức website như: Thống kê, Quản lý người dùng, mở rộng quy mơ website, … • Phát triển thêm chức hỗ trợ giúp người dùng tối ưu hóa hoạt động bán hàng Một số tính dự định phát triển thời gian tới: - Gợi ý sản phẩm cho người dùng CHƯƠNG VII: BẢNG PHÂN CÔNG CƠNG VIỆC Bảng 7: Bảng phân cơng cơng việc STT Nội dung công việc Ngày bắt Ngày kết Người đảm đầu thúc nhận Trạng thái Chọn đề tài 01/03/2022 03/03/2022 Thanh Tuấn Hồn thành Phân tích u cầu 03/03/2022 08/03/2022 Thanh Tuấn Hoàn thành 08/03/2022 13/03/2022 Thanh Tuấn Hoàn thành 13/03/2022 15/09/2022 Thanh Tuấn Hoàn thành 15/03/2022 10/03/2022 Thanh Tuấn Hoàn thành 20/03/2022 25/03/2022 Thanh Tuấn Hoàn thành 03/03/2022 25/14/2022 Thanh Tuấn Hoàn thành 20/09/2022 20/10/2022 Thanh Tuấn Hoàn thành 20/03/2022 28/03/2022 Thanh Tuấn Hoàn thành 28/03/2022 05/04/2022 Thanh Tuấn Hoàn thành Thiết lập actor, chức Vẽ sơ đồ Use case, đặc tả Usecase Viết SRD Viết phân tích sơ đồ lớp mức phân tích 11 Học Reactjs Học NodeJs MongoDB Thiết kế CSDL Cài đặt React, MongoDB, Firebase, Node 12 Xây dựng hình Reactjs 10/06/2022 Thanh Tuấn 15/04/2022 28/11/2022 Thanh Tuấn 28/05/2022 20/12/2022 Thanh Tuấn Hoàn thành 03/06/2022 20/12/2022 Thanh Tuấn Hoàn thành Xây dựng sở 13 liệu, backend, gọi API 14 15 Kiểm thử ứng dụng Viết báo cáo, slide Chưa hoàn 05/04/2022 thành 100% Chưa hoàn thành 100% CHƯƠNG VIII: TÀI LIỆU THAM KHẢO ReactJS: https://reactjs.org/ Redux: https://redux.js.org/ NodeJS: https://www.postgresql.org/ Express: https://docs.microsoft.com/en-us/aspnet/web-api/ MongoDB: https://www.mongodb.com/ Firebase: https://firebase.google.com/ ... MỀM ĐỒ ÁN ĐỀ TÀI: TÌM HIỂU REACTJS VÀ XÂY DỰNG WEBSITE BÁN ĐỒ GIA DỤNG Giảng viên hướng dẫn: HUỲNH HỒ THỊ MỘNG TRINH Sinh viên thực hiện: LÊ THANH TUẤN –MSSV: 19522467 Thành phố Hồ Chí Minh, tháng... đó, nhóm định xây dựng trang web bán đồ gia dụng để đáp ứng cầu tìm hiểu, lựa chọn mua sắm thiết bị gia dụng cho gia đình Ngồi ra, để xây dựng giao diện website linh động nhóm tìm hiểu định chọn... ơn Đồ án môn học Đồ án đặt tiền đề cho việc xây dựng khóa luận tốt nghiệp Đây mơn học có nhiều thử thách, địi hỏi người học phải dành nhiều thời gian, công sức để nghiên cứu, tìm tịi xây dựng Đồng