Trong bối cảnh xu hướng công nghệ ngày càng hiện đại, đặc biệt là việc ứng dụng công nghệ trong đời sống gần như không thể thiếu, kèm theo vấn đề đại dịch COVID19 đang ảnh hưởng nghiêm trọng đến nhiều mặt trong đời sống của toàn xã hội, chuyển đổi số đang trở thành chủ đề nóng và được ưu tiên hàng đầu trong các lĩnh vực. Dưới tác động của đại dịch COVID19, việc chuyển đổi mô hình kinh doanh truyền thống sang mô hình trực tuyến sử dụng các ứng dụng công nghệ đang là mục tiêu hàng đầu để tạo điều kiện mua sắm dịch vụ từ xa, giao hàng tận nhà và giảm chi phí thông qua nhiều hình thức khuyến khích tiêu dùng. Đồng thời, việc giảm thiểu tiếp xúc trực tiếp và tụ tập đông người là lựa chọn hợp lý và hiệu quả nhất. Nhận thức được thực tiễn này và với mong muốn hỗ trợ mọi người mua hàng trực tuyến một cách dễ dàng, nhanh chóng và hiệu quả, chúng em quyết định xây dựng một website chuyên bán Laptop. Chúng em sẽ tạo ra một trang web linh hoạt, đảm bảo tính tương tác cao và giúp người dùng dễ dàng tìm kiếm và mua sắm các sản phẩm laptop đa dạng và chất lượng. Sản phẩm được cập nhật thường xuyên để đáp ứng nhu cầu người dùng và đảm bảo rằng chúng có sẵn khi khách hàng cần. Chúng em cũng sẽ đảm bảo tính hiệu quả của trang web bằng cách tối ưu hóa trang web để tăng tốc độ tải trang và cải thiện trải nghiệm người dùng.
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN BỘ MƠN CƠNG NGHỆ PHẦN MỀM XÂY DỰNG WEBSITE CHUYÊN BÁN LAPTOP KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN Th S NGUYỄN HỮU TRUNG LỜI CẢM ƠN Lời đầu tiên, nhóm chúng em xin phép gửi lời cảm ơn chân thành sâu sắc đến Khoa Công nghệ Thông tin – Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh tạo điều kiện cho chúng em học tập, tích lũy đầy đủ tảng kiến thức từ có khả thực đồ án tốt nghiệp Bên cạnh đó, chúng em xin gửi lời cảm ơn chân thành đến thầy Nguyễn Hữu Trung Sau trình dài học tập thực đồ án, thầy cộng tận tâm bảo nhiệt tình cho chúng em suốt trình từ đầu đến kết thúc đề tài Các thầy cô Khoa Công nghệ Thông tin đặc biệt thầy Nguyễn Hữu Trung, thầy Nguyễn Minh Đạo tặng cho chúng em khối lượng kiến thức kinh nghiệm khổng lồ chuyên ngành công việc tương lai Hơn nữa, việc tiếp thu thêm trải nghiệm thực tế từ lời khuyên thầy cô cộng hưởng việc thực tập, làm việc công ty giúp chúng em ngày phát triển thân Điều giúp thân thơi thúc chúng em hồn thành đồ án tốt nghiệp Đây hành trang vô lớn chúng em trước bước đời tạo dựng nên nghiệp, trang đời Tuy nhiên, với khả hạn hẹp, chúng em cố gắng để hoàn thành cách tốt Vì vậy, việc xảy thiếu sót điều khó tránh khỏi Chúng em hy vọng nhận góp ý tận tình q thầy (cơ) qua chúng em rút học kinh nghiệm hoàn thiện, cải thiện nhằm nâng cấp sản phẩm cách tốt Nhóm chúng em xin chân thành cảm ơn! Trường Đại học Sư phạm Kỹ thuật TP.HCM Khoa Công nghệ Thông tin ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Chuyên ngành: Công nghệ phần mềm Tên luận văn: Xây dựng website chuyên bán laptop Giáo viên hướng dẫn: ThS Nguyễn Hữu Trung Nhiệm vụ luận văn: Lý thuyết - Tìm hiểu cơng nghệ: ReactJS, JSON Web Token, Spring Boot Thực hành - Sử dụng Spring Boot để xây dưng Back-end, xây dựng API cho module hệ thống - Sử dụng MySQL làm hệ quản trị sở liệu để lưu trữ liệu hệ thống - Ứng dụng JSON Web Token để xác thực phân quyền cho hệ thống API cho người dùng - Ứng dụng thư viện ReactJS để xây dựng xử lý giao diện Website cho người dùng MỤC LỤC PHẦN MỞ ĐẦU 1.TÍNH CẤP THIẾT CỦA ĐỀ TÀI 2.ĐỐI TƯỢNG NGHIÊN CỨU 3.PHẠM VI NGHIÊN CỨU 4.MỤC TIÊU CỦA ĐỀ TÀI 5.Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 5.1 Ý NGHĨA KHOA HỌC 5.2 Ý NGHĨA THỰC TIỄN PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT-END 1.2 CÁC CÔNG NGHỆ SỬ DỤNG Ở BACK-END CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HỐ U CẦU 2.1 KHẢO SÁT HIỆN TRẠNG 2.2 KIẾN TRÚC CHUNG CỦA HỆ THỐNG 2.3 XÁC ĐỊNH YÊU CẦU 2.4 MƠ HÌNH HĨA U CẦU CHƯƠNG 3: THIẾT KẾ PHẦN MỀM 3.1 LƯỢC ĐỒ TUẦN TỰ 3.2 THIẾT KẾ CƠ SỞ DỮ LIỆU 3.3 LƯỢC ĐỒ CLASS 3.4 THIẾT KẾ GIAO DIỆN CHƯƠNG 4: CÀI ĐẶT ỨNG DỤNG 4.1 CÀI ĐẶT CHƯƠNG TRÌNH PHẦN KẾT LUẬN KẾT QUẢ ĐẠT ĐƯỢC 1.1 VỀ LÝ THUYẾT 1.2 VỀ ỨNG DỤNG ƯU ĐIỂM NHƯỢC ĐIỂM HƯỚNG PHÁT TRIỂN TÀI LIỆU THAM KHẢO KẾ HOẠCH THỰC HIỆN STT Thời gian Cơng việc • • • • • • • • • • • Khảo sát trạng Thiết kế usecase mơ hình hóa u cầu Thiết kế sở liệu Tìm hiểu thư viện ReactJS JavaScript Tìm hiểu Spring Boot Spring Security Tìm hiểu JSON Web Token để ứng dụng vào xác thực phân quyền API hệ thống Tìm hiểu SQL MySQL để áp dụng vào lưu trữ liệu người dùng hệ thống Tiến hành phát triển API dựa kiến thức tìm hiểu tài liệu Tiến hành xây dựng giao diện người dùng cho hệ thống Kết hợp phần xây dựng lại với (giao diện, API, sở liệu) Tìm hiểu, sửa đổi hệ thống để hồn thiện • Kiểm thử chương trình tiến hành sửa lỗi • Viết hồn thiện báo cáo Ý kiến giáo viên hướng dẫn Người viết đề cương (ký ghi rõ họ tên) Ghi BẢNG PHÂN CÔNG CÔNG VIỆC THÀNH VIÊN CÔNG VIỆC Thiết kế giao diện website dành cho quản trị viên Thiết kế giao diện di động dành cho người dùng Thiết kế lược đồ sở liệu tạo sở liệu Xây dựng hệ thống xử lý liệu API Vẽ lược đồ Sequence việc xử lý thơng tin phía quản trị viên Viết báo cáo phần hệ thống phần lại Thiết kế giao diện website dành cho người dùng Tương tác với API, xây dựng chức Website hiển thị giao diện người dùng Kiểm thử sửa lỗi Vẽ lược đồ Use-case mô tả chi tiết, vẽ lược đồ Sequence xử lý thơng tin phía người dùng Viết báo cáo cho phần giao diện mở đầu ĐÁNH GIÁ MỤC LỤC LỜI CẢM ƠN ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP .2 DANH MỤC BẢNG BIỂU DANH MỤC HÌNH ẢNH .9 PHẦN MỞ ĐẦU 12 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 12 ĐỐI TƯỢNG NGHIÊN CỨU .12 PHẠM VI NGHIÊN CỨU 13 MỤC TIÊU CỦA ĐỀ TÀI 14 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 15 5.1 Ý NGHĨA KHOA HỌC 15 5.2 Ý NGHĨA THỰC TIỄN 16 PHẦN NỘI DUNG 17 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 17 1.1 CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT-END 17 1.2 CÁC CÔNG NGHỆ SỬ DỤNG Ở BACK-END 22 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MƠ HÌNH HỐ YÊU CẦU .28 2.1 KHẢO SÁT HIỆN TRẠNG 28 2.2 KIẾN TRÚC CHUNG CỦA HỆ THỐNG 30 2.3 XÁC ĐỊNH YÊU CẦU 30 2.4 MƠ HÌNH HĨA YÊU CẦU 33 CHƯƠNG 3: THIẾT KẾ PHẦN MỀM 45 3.1 LƯỢC ĐỒ TUẦN TỰ 45 3.2 THIẾT KẾ CƠ SỞ DỮ LIỆU 57 3.3 LƯỢC ĐỒ CLASS 70 3.4 THIẾT KẾ GIAO DIỆN 71 CHƯƠNG 4: CÀI ĐẶT ỨNG DỤNG 99 4.1 CÀI ĐẶT CHƯƠNG TRÌNH 99 4.2 KIỂM THỬ ỨNG DỤNG 102 PHẦN KẾT LUẬN .114 KẾT QUẢ ĐẠT ĐƯỢC 114 1.1 VỀ LÝ THUYẾT 114 1.2 VỀ ỨNG DỤNG 114 ƯU ĐIỂM 115 NHƯỢC ĐIỂM 115 HƯỚNG PHÁT TRIỂN 115 TÀI LIỆU THAM KHẢO 116 DANH MỤC BẢNG BIỂU DANH MỤC BẢNG BIỂU Bảng 2.1 Use case phía quản trị viên 34 Bảng 2.2 Mô tả use case “Đăng nhập” 35 Bảng 2.3 Mô tả use case “Chỉnh sửa thông tin tài khoản” 36 Bảng 2.4 Mô tả use case “Xem thông tin chi tiết sản phẩm” .37 Bảng 2.5 Mơ tả use case ‘Tìm kiếm sản phẩm’ 37 Bảng 2.6 Mô tả use case “Thêm sản phẩm vào giỏ hàng” 38 Bảng 2.7 Mơ tả use case “Xóa sản phẩm khỏi giỏ hàng” 39 Bảng 2.8 Mô tả usecase “Chỉnh sửa sản phẩm giỏ hàng” 39 Bảng 2.9 Mô tả use case “Thêm bình luận cho sản phẩm” 40 Bảng 2.10 Mô tả use case “Thêm đánh giá cho sản phẩm” 41 Bảng 2.11 Mơ tả use case “Thanh tốn hóa đơn” 41 Bảng 2.12 Mô tả use case “Xem lịch sử đơn hàng” .42 Bảng 2.13 Mô tả use case “ Thêm sản phẩm vào hệ thống” 43 Bảng 2.14 Mô tả use case “Xóa sản phẩm khỏi hệ thống” 43 Bảng 2.15 Mô tả use case “Chỉnh sửa thông tin sản phẩm hệ thống” 44 Bảng 3.1 Thông tin mô tả bảng Address 57 Bảng 3.2 Thông tin mô tả bảng Banner 58 Bảng 3.3 Thông tin mô tả bảng Brand 59 Bảng 3.4 Thông tin mô tả bảng Cart 59 Bảng 3.5 Thông tin mô tả bảng Category 60 Bảng 3.6 Thông tin mô tả bảng Comment 60 Bảng 3.7 Thông tin mô tả bảng Discount .61 Bảng 3.8 Thông tin mô tả bảng Feedback 61 Bảng 3.9 Thông tin mô tả bảng ImportProduct 62 Bảng 3.10 Thông tin mô tả bảng Invoice .62 Bảng 3.11 Thông tin mô tả bảng Label 64 Bảng 3.12 Thông tin mô tả bảng LogSystem .64 Bảng 3.13 Thông tin mô tả bảng Product .65 Bảng 3.14 Thông tin mô tả bảng ProductImage 65 DANH MỤC BẢNG BIỂU Bảng 3.15 Thông tin mô tả bảng Product_Unit 66 Bảng 3.16 Thông tin mô tả bảng RefreshToken 67 Bảng 3.17 Thông tin mô tả bảng ResetPasswordToken .67 Bảng 3.18 Thông tin mô tả bảng Product_Accessory 67 Bảng 3.19 Thông tin mô tả bảng Product_Discount 68 Bảng 3.20 Thông tin mô tả bảng Product_Label 68 Bảng 3.21 Thông tin mô tả bảng Role 68 Bảng 3.22 Thông tin mô tả bảng User_Role 68 Bảng 3.23 Thông tin mô tả bảng User 69 Bảng 4.1 Phạm vi kiểm thử 102 Bảng 4.2 Bảng rủi ro kế hoạch giảm nhẹ .106 Bảng 4.3 Kết kiểm thử chức phía người dùng 107 Bảng 4.4 Kết kiểm thử chức phía quản trị viên 110 DANH MỤC HÌNH ẢNH DANH MỤC HÌNH ẢNH Hình 1.1 Virtual DOM ReactJS 17 Hình 1.2 Virtual DOM ReactJS 18 Hình 1.3 Luồng hoạt động Redux-saga 20 Hình 1.4 Kiến trúc chung spring framework 22 Hình 2.1 Website “Thế giới di động” 28 Hình 2.2 Website “FPT SHOP” 29 Hình 2.3 Kiến trúc chung hệ thống 30 Hình 2.4 Use case phía người dùng .33 Hình 3.1 Lược đồ "Đăng nhập" 45 Hình 3.2 Lược đồ "Đăng ký" 45 Hình 3.3 Lược đồ “Đổi thông tin cá nhân” 46 Hình 3.4 Lược đồ “Đổi mật khẩu” 46 Hình 3.5 Lược đồ “Quên mật khẩu” 47 Hình 3.6 Lược đồ “Tìm kiếm sản phẩm” 48 Hình 3.7 Lược đồ “Thêm sản phẩm vào giỏ hàng” 48 Hình 3.8 Lược đồ “Đặt hàng” 49 Hình 3.9 Lược đồ “Đăng nhập phía Admin” 50 Hình 3.10 Lược đồ “Thêm thông tin sản phẩm” 50 Hình 3.11 Lược đồ “Cập nhât thơng tin sản phẩm” 51 Hình 3.12 Lược đồ “Cập nhật hình ảnh sản phẩm” 51 Hình 3.13 Lược đồ “Xóa thơng tin sản phẩm” .52 Hình 3.14 Lược đồ “Xem thông tin chi tiết đơn hàng” 52 Hình 3.15 Lược đồ “Thay đổi trạng thái đơn hàng” 53 Hình 3.16 Lược đồ “Tạo phiếu nhập hàng” .53 Hình 3.17 Lược dồ “Phản hồi bình luận” 54 Hình 3.18 Lược đồ “Phân quyền người dùng” .55 Hình 3.19 Lược đồ “Cập nhật mã chiết khấu sản phẩm” 56 Hình 3.20 Lược đồ thực thể kết hợp (ERD) 57 Hình 3.21 Lược đồ lớp 70 PHẦN NỘI DUNG - Ứng dụng sau khởi động chạy cổng 19001 (mặc định android), lúc có lựa chọn: sử dụng web (w), sử dụng điện thoại có hệ điều hành android (a) ios (i) kết hợp với máy thật cài app expo dùng trực tiếp giả lập điện thoại (bluestack, ld player, máy ảo quản lý android studio, …) 4.2 Kiểm thử ứng dụng 4.2.1 Kế hoạch kiểm thử 4.2.1.1 Phạm vi kiểm thử Bảng 4.1 Phạm vi kiểm thử Tên Module Đăng kí tài khoản Vai trị áp dụng Người dùng Mơ tả Người dùng đăng kí tài khoản sử dụng hết thống số điện thoại mật Đăng nhập Người dùng Người dùng đăng nhập vào hệ thống số điện thoại mật Chỉnh sửa thông tin Người dùng Người dùng chỉnh sửa thông tin cá nhân tài khoản Xem danh sách đơn Người dùng Người dùng xem đơn hàng hàng đặt Thêm sản phẩm vào Người dùng Người dùng thêm sản phẩm mà giỏ hàng muốn mua vào giỏ hàng Xóa sản phẩm khỏi Người dùng Người dùng xóa sản phẩm khơng muốn giỏ hàng đặt giỏ hàng Thay đổi số lượng Người dùng Người dùng tăng giảm số lượng hàng giỏ hàng mặt hàng giỏ hàng Thay đổi địa giao Người dùng Người dùng sửa địa giao hàng hàng 102 PHẦN NỘI DUNG Quên mật Người dùng Người dùng thay đổi mật quên mật Đổi mật Người dùng Người dùng đổi mật tài khoản Tìm kiếm sản phẩm Người dùng Người dùng tìm kiếm sản phẩm theo tên Hủy đơn hàng Người dùng Người dùng hủy đơn hàng mà không muốn đặt hàng Đặt hàng Người dùng Người dùng đặt hàng với giỏ hàng Thanh tốn online Người dùng Người dùng tốn online Momo trước nhận hàng Đánh giá sản phẩm Người dùng Người dùng đánh giá sản phẩm đơn hàng giao Thêm sản phẩm Quản trị viên Quản trị viên thêm sản phẩm vào hệ thống Sửa thông tin sản Quản trị viên Quản trị viên chỉnh sửa thông tin sản phẩm phẩm hệ thống Xóa sản phẩm Quản trị viên Quản trị viên xóa sản phẩm hệ thống Thêm danh mục Quản trị viên Quản trị viên thêm danh mục vào hệ thống Chỉnh sửa danh mục Quản trị viên Quản trị viên chỉnh sửa thông tin danh sản phẩm mục Xóa danh mục Quản trị viên Quản trị viên xóa danh mục 103 PHẦN NỘI DUNG Thêm thuộc Quản trị viên thêm thuộc tính thương hiệu tính Quản trị viên Thương hiệu vào hệ thống Chỉnh sửa thuộc tính Quản trị viên Quản trị viên chỉnh sửa thông tin thương thương hiệu hiệu Xóa thuộc tính Quản trị viên Quản trị viên xóa thuộc tính thương hiệu tính Quản trị viên Quản trị viên thêm thuộc tính danh mục thương hiệu Thêm thuộc danh mục vào hệ thống Chỉnh sửa thuộc tính Quản trị viên Quản trị viên chỉnh sửa thơng tin danh danh mục mục Xóa thuộc tính danh Quản trị viên Quản trị viên xóa thuộc tính danh mục mục Thêm thuộc tính Quản trị viên Quản trị viên thêm thuộc tính nhãn thơng nhãn thơng tin tin vào hệ thống Chỉnh sửa thuộc tính Quản trị viên Quản trị viên chỉnh sửa thông tin nhãn nhãn thơng tin thơng tin Xóa thuộc tính nhãn Quản trị viên Quản trị viên xóa thuộc tính nhãn thơng thơng tin tin Thêm mã chiết khấu Quản trị viên Quản trị viên thêm mã chiết khấu vào hệ thống Chỉnh sửa mã chiết Quản trị viên Quản trị viên chỉnh sửa thơng tin chiết khấu khấu Xóa mã chiết khấu Quản trị viên Quản trị viên xóa mã chiết khấu Thiết lập hình ảnh Quản trị viên Quản trị viên thêm xóa hình ảnh sản phẩm sản phẩm 104 PHẦN NỘI DUNG Áp dụng mã chiết Quản trị viên Quản trị viên thiết lập mã chiết khấu dành khấu cho sản phẩm cho sản phẩm hệ thống Áp dụng nhãn thuộc Quản trị viên Quản trị viên thiết lập nhãn thuộc tính tính cho sản phẩm dành cho sản phẩm hệ thống Xem thống kê,doanh Quản trị viên Quản trị viên xem bảng thống kê, biểu thu hệ thống đồ liệu hệ thống Vơ hiệu hóa Quản trị viên vơ hiệu hóa tài khoản người tài Quản trị viên khoản người dùng dùng, người dùng có dấu hiệu vi phạm điều khoản Kích hoạt tài khoản Quản trị viên Quản trị viên kích hoạt lại tài khoản người người dùng dùng Xác nhận đơn hàng Quản trị viên xác nhận đơn hàng Quản trị viên người dùng đặt hàng Ẩn đánh giá sản Quản trị viên Quản trị viên ẩn thông tin đánh giá sản phẩm phẩm có dấu hiệu spam, cố tình Ẩn bình luận sản Quản trị viên Quản trị ẩn bình luận khơng có liên quan phẩm đến sản phẩm sử dụng ngôn từ không phù hợp 4.2.1.2 Các loại kiểm thử Thông qua cấu trúc dự án, loại kiểm thử áp dụng bao gồm: - Integration test: kết hợp module ứng dụng kiểm thử ứng dụng hoàn chỉnh - System test: kiểm thử thiết kế hệ thống (sau tích hợp) có thỏa mãn u cầu đặt hay khơng - Usability test: xác minh ứng dụng có khả ứng dụng cao, dễ sử dụng giao diện thân thiện với người dùng 105 PHẦN NỘI DUNG 4.2.1.3 Rủi ro kiểm thử Bảng 4.2 Bảng rủi ro kế hoạch giảm nhẹ Rủi ro Kế hoạch giảm nhẹ Các thành viên nhóm chưa rà sốt Thành viên nhóm lập kế hoạch kỹ để tìm lỗi ẩn sản phẩm dành thời gian để sử dụng ứng dụng cắt bớt chức ảnh hưởng đến hệ thống lúc hoạt động 4.2.2 Quy trình kiểm thử Quy trình kiểm thử phần mềm gồm giai đoạn: Requirement analysis – Phân tích yêu cầu: nghiên cứu phân tích yêu cầu cụ thể dự án Test planning – Lập kế hoạch kiểm thử: - Xác định phạm vi dự án - Xác định phương pháp tiếp cận - Xác định nguồn lực - Lên kế hoạch thiết kế công việc kiểm thử Test case development – Thiết kế test case: - Tham khảo tài liệu liên quan - Tạo test cases / checklist - Chuẩn bị liệu kiểm thử - Rà soát lại test cases / checklist Test environment setup – Thiết lập môi trường kiểm thử: thiết lập biến môi trường kiểm tra môi trường kiểm thử Test execution – Thực kiểm thử: - Thực kiểm thử phần mềm - So sánh kết thực tế với kết mong đợi, sau báo cáo lỗi xảy lên công cụ quản lý lỗi - Thực re-test để xác định lỗi sửa regression test có thay đổi liên quan - Đo lường phân tích tiến độ - Điều chỉnh, sửa chữa tài liệu tiến độ dự án theo tình hình thực tế 106 PHẦN NỘI DUNG - Báo cáo thường xuyên cho Project Manager Test cycle closure – Đóng chu trình kiểm thử: - Tổng kết, báo cáo kết việc thực thi test case - Đánh giá tiêu chí hồn thành phạm vi kiểm tra, chất lượng, chi phí, thời gian, mục tiêu quan trọng - Thảo luận rút học kinh nghiệm 4.2.3 Kết kiểm thử Bảng 4.3 Kết kiểm thử chức phía người dùng STT Mô tả Các bước thực Kết mong Kết thực Trạng muốn tế thái Kiểm thử - Nhập đầy đủ Thơng báo đăng kí Thơng chức thơng tin đăng thành đăng kí tài ký chuyển sang trang công khoản - Nhấn nút Đăng chủ công ký Kiểm chức thử - - Nhập số điện đăng nhập thoại đăng nhập báo đăng kí thành chuyển Đạt sang trang chủ Đăng nhập thành Đăng nhập công chuyển thành công - Nhập mật sang trang chủ - - Nhấn nút Đăng chuyển sang Đạt trang chủ nhập Kiểm chức thử - - Nhập mật thay đổi mật nhập mật khẩu mật Thông báo thành Thông công báo thành công Đạt xác nhận - - Nhấn nút Thay đổi 107 PHẦN NỘI DUNG Kiểm thử chức - - Nhập thông tin chỉnh sửa thay sửa - - Nhấn nút lưu chỉnh Thông tin Thông đổi tin chỉnh sửa thay Đạt đổi thông tin tài khoản Kiểm thử chức xem danh - - Nhấn nút Xem chi tiết đơn sách - - Nhấn nút Danh sách đơn hàng Hiện thị đơn Hiện thị hàng chi tiết đơn hàng đơn hàng chi tiết đơn hàng cần cần xem hàng xem thử Ở Kiểm chức phía header Trang nhập vào tìm danh hiển thị Trang hiển thị sách sản danh sách sản tìm kiếm sản kiếm nhấn nút phẩm hiển thị phẩm hiển thị phẩm tìm có tên tìm thử Ở hình chi Thơng báo thêm Thơng Kiểm tiết sản phẩm, thành công giỏ thêm thành sản nhấn nút thêm vào hàng có sản cơng giỏ phẩm vào giỏ hàng chức phẩm phẩm thử Ở hình giỏ Trang giỏ hàng Trang hàng nhấn Xóa để khơng cịn sản hàng sản loại bỏ sản phẩm phẩm xóa Đạt hàng có sản phẩm giỏ hàng báo thêm Kiểm Đạt sản phẩm có tên sản phẩm tìm chức Đạt giỏ khơng cịn sản phẩm Đạt khỏi khỏi giỏ hàng giỏ hàng Kiểm chức thử Ở trang giỏ hàng Sản phẩm thay đổi Sản phẩm thay chọn tăng (hoặc số thay đổi số giảm) phẩm lượng đổi số lượng sản phạm vi sản phẩm phạm vi kho 108 Đạt PHẦN NỘI DUNG lượng giỏ sản hàng kho thử - Ở trang giỏ hàng Trang hiển thị Trang hiển thị Kiểm chức phẩm chọn phương thức đặt đặt hàng hàng thành đặt hàng tốn địa cơng 10 thành công Đạt giao hàng - - Nhấn toán Kiểm - - Ở trang Hệ thống sử dụng Hệ thống sử tốn, chọn sử thơng tin địa dụng địa mặc sử dụng địa mặc định định giao người dùng cho - - Nhập hàng mặc trường thông tin việc đặt hàng khác nhần định khóa trường nhập Thanh tốn địa chức 11 thử dụng thông tin địa mặc định người dùng cho việc Đạt đặt hàng khóa trường nhập địa Kiểm chức 12 hủy hàng thử - Ở trang lịch sử Đơn hàng Đơn hàng mua hàng nhấn chuyển sang trạng chuyển đơn nút hủy thái hủy sang trạng thái hủy - Nhấn ok hộp thoại Đạt xác nhận Kiểm chức 13 thử Ở trang đánh giá Đánh giá Đánh giá sản phẩm nhập hệ thống cập nhật đánh giá sản trường cần phẩm hệ thống cập nhật thiết nhấn nút đánh giá 109 Đạt PHẦN NỘI DUNG 14 Kiểm thử Ở trang chi tiết Ý kiến thảo luận Ý kiến thảo chức sản phẩm nhập ý hệ thống luận thảo luận kiến gửi cập nhật hệ thống cập sản phẩm Đạt nhật Bảng 4.4 Kết kiểm thử chức phía quản trị viên STT Mô tả Kiểm thử chức Kết mong Kết Trạng muốn thực tế thái - - Ở trang Thông thêm sản Các bước thực tin sản phẩm chọn Thêm thông tin phẩm - - Nhập thông tin sản phẩm nhấn Lưu Kiểm thử chức tin sản phẩm click vào phím thiết lập sản phẩm cần điều chỉnh sản phẩm thêm báo Thông báo thành thêm thành công Sản công Sản Đạt phẩm phẩm tạo - - Ở bảng Thông chỉnh sửa Thông Thông tạo báo Thông chỉnh sửa thành chỉnh công báo sửa thành công Đạt - - Chọn thông tin - - Thay đổi thông tin - - Nhấn nút Lưu Kiểm thử chức - - Ở trang Thơng xóa sản tin sản phẩm click vào phím Xóa sản phẩm sản phẩm cần xóa phẩm - 110 Thơng báo xóa Thơng thành cơng xóa cơng báo thành Đạt PHẦN NỘI DUNG Kiểm thử chức thêm thuộc tính Thương hiệu - - Ở trang Thông tin thương hiệu chọn Thêm thông tin Thông báo Thông báo thêm thành thêm thành công công Đạt - - Nhập thông tin nhấn Lưu Kiểm thử chức - - Ở trang Thông chỉnh sửa tin thương hiệu nhấn chỉnh sửa Thương hiệu cần điều chỉnh Thương hiệu Thông báo Thông chỉnh sửa thành chỉnh công báo sửa thành công Đạt - Nhập thông tin - Nhấn nút Lưu Kiểm thử chức - - Ở trang Thông xóa thuộc tính Thơng báo xóa Thơng tin thương hiệu thành cơng nhấn phím xóa thương hiệu cần xóa Thương hiệu xóa báo thành cơng Đạt - Kiểm thử chức thêm thuộc tính Danh mục - - Ở trang Thông tin danh mục chọn Thêm thông tin Thông báo Thông báo thêm thành thêm thành công công Đạt - Nhập thông tin nhấn Lưu Kiểm thử chức chỉnh sửa Danh mục - - Ở trang Thông tin danh mục nhấn chỉnh sửa Danh mục cần điều chỉnh - Nhập thông tin - - Nhấn nút Lưu 111 Thông báo Thông chỉnh sửa thành chỉnh công báo sửa thành công Đạt PHẦN NỘI DUNG Kiểm thử chức - - Ở trang Thông xóa thuộc 10 tin danh mục nhấn thành cơng phím xóa danh mục cần xóa tính Danh mục Kiểm thử chức thêm Nhãn thuộc tính Thơng báo xóa Thơng - - Ở trang Thơng Thơng xóa thành Đạt cơng báo Thơng tin nhãn thuộc tính thêm chọn Thêm thông công tin báo báo thành thêm thành công Đạt - - Nhập thông tin nhấn Lưu Kiểm thử chức - - Ở trang Thông chỉnh sửa Nhãn 11 Thông báo Thông báo tin nhãn thuộc tính chỉnh sửa thành chỉnh sửa nhấn chỉnh sửa cơng thành cơng Nhãn thuộc tính cần điều chỉnh thuộc tính Đạt - Nhập thơng tin - - Nhấn nút Lưu Kiểm thử chức xóa Nhãn 12 Thơng báo xóa Thơng - - Ở trang nhấn phím xóa nhãn thành cơng thuộc tính cần xóa thuộc tính xóa báo thành Đạt cơng - 13 Kiểm thử chức - - Ở trang Thông vô hiệu tin người dùng nhấn phím sửa thơng tin hóa tài khoản người dung Thông báo tài Thông khoản bị báo vô tài khoản bị hiệu hóa Trạng vơ hiệu hóa thái hoạt động Trạng - -Tắt trạng thái kích hoạt thành tắt hoạt thái Đạt động thành tắt 14 Kiểm thử chức - - Ở trang Thơng kích hoạt tin người dùng nhấn phím sửa thơng tin Thơng báo tài Thơng khoản bị báo vơ tài khoản bị hiệu hóa Trạng vơ hiệu hóa 112 Đạt PHẦN NỘI DUNG tài khoản người dùng thái hoạt động Trạng - - Bật trạng thái kích hoạt thành bật hoạt thái động thành bật Kiểm thử chức - - Ở trang Thông Xác nhận tin đơn đặt hàng chọn tab Đang giao hàng đơn hàng - - Nhấn phím hiển 15 thị hóa đơn cần xác nhận Đơn hàng Đơn chuyển trạng chuyển trạng thái xác thái xác nhận chuyển nhận sang tab hàng Đã chuyển sang giao Đạt tab Đã giao - - Nhấn phím xác nhận đơn hàng nhận Kiểm thử chức ẩn đánh 16 giá sản phẩm Thông báo Thông - - Ở trang Trải nghiệm sản phẩm, chọn tab đánh giá - - Chọn ẩn sản ẩn bình luận ẩn bình Bình luận bị ẩn luận khỏi sản phẩm phẩm bình luận muốn ẩn báo Bình luận bị ẩn khỏi Đạt sản phẩm Kiểm thử chức ẩn ý kiến thảo luận sản 17 phẩm Thông báo Thông - - Ở trang Trải nghiệm sản phẩm, chọn tab thảo luận - - Chọn ẩn sản phẩm ý kiến thảo luận muốn ẩn ẩn ý kiến thảo ẩn ý kiến luận Ý kiến thảo luận Ý thảo luận bị ẩn kiến khỏi sản phẩm thảo luận bị ẩn khỏi phẩm 113 báo sản Đạt PHẦN KẾT LUẬN PHẦN KẾT LUẬN KẾT QUẢ ĐẠT ĐƯỢC 1.1 Về lý thuyết Trong suốt trình thực đề tài xây dựng ứng dụng web, nhóm chúng em tìm hiểu nghiên cứu nhiều thơng tin mới, qua có nhìn tổng quan sâu rộng kiến thức công nghệ, kĩ thuật liên quan đến ReactJS, Redux, Spring Boot, JDBC Ngoài ra, chúng em áp dụng thêm kiến thức hệ quản trị sở liệu MySQL việc lưu trữ quản lý thông tin Hơn nữa, chúng em biết thêm số tảng hỗ trợ API lấy thông tin địa Giao hàng nhanh, server lưu trữ hình ảnh Cloudinary công nghệ liên quan đến tài liệu văn phịng Nắm bắt quy trình hoạt động ứng dụng kiến thức học cho việc thiết kế website dựa tảng ReactJS thiết kế giao diện di động thông qua React Native thư viện hỗ trợ khác Redux, Axios, Bootstrap, Tailwindcss, Material UI Qua tạo nên giao diện dễ nhìn cải thiện khả tương tác với người dùng 1.2 Về ứng dụng Hoàn thiện tính cần có website bán hàng trực tuyến: - Cung cấp thơng tin chi tiết kèm hình ảnh sản phẩm trực quan - Chức tìm kiếm theo lọc - Tính giỏ hàng - Tính mua hàng, tốn - Tính đánh giá, bình luận sản phẩm - Đăng nhập tài khoản cá nhân - Tính cập nhật mật quên mật - Xem lịch sử đơn hàng - Tích hợp chat trực tuyến - Quản lý thơng tin sản phẩm - Chức quản lý kiểm sốt thơng tin người dùng - Chức báo cáo doanh thu, lượng người mua, sản phẩm bán chạy để đánh giá hiệu kinh doanh - Chức quản lý đánh giá, bình luận sản phẩm 114 PHẦN KẾT LUẬN ƯU ĐIỂM - Ứng dụng chạy xác chức cài đặt, không xảy tượng xung đột lỗi - Các chức xây dựng theo hướng tách Module Component, dễ dàng sửa đổi, cập nhật mở rộng - Người dùng cuối dễ dàng truy cập sử dụng nhờ giao diện bắt mắt, thân thiện NHƯỢC ĐIỂM - Chưa hỗ trợ nhiều hình thức tốn trực tuyến - Một số chức chưa hoàn thiện: thống kê thông tin mua hàng, lưu trữ giỏ hàng phía trang web bán hàng, chức thay đổi màu sắc giao diện - Chưa thực xử lý triệt để vấn đề ẩn lưu trữ thông tin đăng nhập người dùng trang web HƯỚNG PHÁT TRIỂN Để xây dựng ứng dụng đầy đủ hoàn thiện hơn, chúng em hướng đến vấn đề sau: - Hồn thiện chức cịn sơ sài - Thêm chức khôi phục dành cho thơng tin xóa mềm - Mở rộng mặt hàng bán thêm linh kiện liên quan tới laptop - Tạo chức so sánh tương quan sản phẩm - Xây dựng hệ thống gợi ý sản phẩm - Tích hợp nhiều hình thức tốn online Paypal, VN-Pay, Zalo Pay, … - Thêm chức tính tốn giá trị thơng tin vận chuyển hàng hóa - Cung cấp thêm thông tin dành cho đơn vị nhập hàng - Thiết lập chức thông báo real time thông báo với tin nhắn điện thoại 115 DANH MỤC TÀI LIỆU THAM KHẢO TÀI LIỆU THAM KHẢO [1] R Team, “ReactJS Docs(2022),” [Trực tuyến] Available: https://reactjs.org/docs/getting-started.html [2] N Team, “npm Docs (2022),” [Trực tuyến] Available: http://docs.npmjs.com [3] N Community, “npm package (2022),” [Trực tuyến] Available: https://www.npmjs.com/package/package [4] T Team, “Spring gì? Giới thiệu Spring Framework Java,” [Trực tuyến] Available: https://techmaster.vn/posts/36080/spring-phan-1-spring-la-gi-gioi- thieu-spring-framework-trong-java [5] A H SpringBoot, “Tổng quan Spring Boot Spring Boot gì?,” [Trực tuyến] Available: https://hocspringboot.net/2021/08/15/spring-boot [6] D company, “TỔNG QUAN VỀ HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU MYSQL,” [Trực tuyến] Available: https://dbhire.com/tong-quan-ve-he-quan-tri-co-so-dulieu-mysql 116