Đồ án phát triển website so sánh giá bán laptop và phụ kiện trên các sàn thương mại điện tử

ĐẠ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 -🙞🙜🕮🙞🙜 - BÁO CÁO ĐỒ ÁN – LỚP SE121.N11 ĐỀ TÀI: PHÁT TRIỂN WEBSITE SO SÁNH GIÁ BÁN LAPTOP VÀ PHỤ KIỆN TRÊN CÁC SÀN THƯƠNG MẠI ĐIỆN TỬ GVHD: Ths.Huỳnh Hồ Thị Mộng Trinh Sinh viên thực hiện: Mai Long Thành 19522232 Nguyễn Thiện Sua 19522144 Thành phố HCM, tháng năm 2023 LỜI CẢM ƠN Lời đầu tiên, nhóm tác giả xin chân thành cảm ơn q thầy khoa Cơng nghệ Phần mềm, trường Đại Học Công Nghệ Thông Tin, ĐHQG TP.HCM, tận tình hướng dẫn nhóm suốt thời gian qua Những kiến thức mà thầy cô truyền đạt tảng quan trọng để nhóm hồn thành đề tài Nhóm tác giả xin gửi lời cảm ơn chân thành đến ThS Huỳnh Hồ Thị Mộng Trinh, cảm ơn tận tình hướng dẫn tạo điều kiện tốt cho nhóm hồn thành đề tài Những lời động viên, góp ý chân tình động lực q báu để nhóm vượt qua khó khăn tìm hiểu thực đề tài Trong thời gian qua, nhóm tác giả cố gắng vận dụng kiến thức tảng học, kết hợp học hỏi tìm hiểu cơng nghệ để ứng dụng xây dựng đề tài môn học Tuy nhiên trình thực hiện, kiến thức kinh nghiệm cịn nhiều hạn chế, khó tránh khỏi thiếu sót Chính vậy, nhóm tác giả mong nhận góp ý từ q thầy để nhóm hồn thiện thêm kiến thức mà nhóm học tập, làm hành trang q báu cho nhóm cơng việc sau Mọi đóng góp xin vui lịng gửi email: 19522232@gm.uit.edu.vn 19522144@gm.uit.edu.vn Sau cùng, nhóm tác giả xin kính chúc q thầy khoa Công nghệ phần mềm cô Huỳnh Hồ Thị Mộng Trinh thật dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp truyền đạt kiến thức cho hệ mai sau Xin chân thành cảm ơn q thầy ! Nhóm tác giả NHẬN XÉT (Của giáo viên hướng dẫn) DANH SÁCH THÀNH VIÊN NHÓM Tên thành viên MSSV Mai Long Thành 19522232 Nguyễn Thiện Sua 19522144 TỔNG QUAN BÁO CÁO TÊN ĐỀ TÀI: Phát triển xây dựng website so sánh giá bán laptop phụ kiện sàn thương mại điện tử GIẢNG VIÊN HƯỚNG DẪN: Huỳnh Hồ Thị Mộng Trinh THỜI GIAN THỰC HIỆN: Từ ngày 27/02/2023 đến hết ngày 04/07/2023 NỘI DUNG: Lý chọn đề tài - Máy tính, laptop dần trở nên phổ biến sống với giá thành ngày có xu hướng giảm Hơn nữa, mức thu nhập người tăng cao, nên sở hữu máy tính, laptop để phục vụ cơng việc - Hiện để tìm mua laptop có nhiều sàn thương mại điện tử bn bán với giá thành khác Do người mua mơ hồ việc lựa chọn điểm mua với giá thành hợp lý - Cũng khách hàng loay hoay việc lựa chọn sàn thương mại mua laptop có giá thành hợp lý nhất, chúng em hiểu rõ mong muốn tìm kiếm giải pháp để giải tình trạng Chúng em định chọn đề tài để giúp người có nhu cầu mua laptop phụ kiện máy tính xem xét giá sản phẩm tất sàn thương mại lựa chọn mua với giá hợp lý Hiện trạng trang web so sánh nay: + Giao diện khó dùng cho người tiếp xúc với thiết bị công nghệ + Thiếu số tính cần thiết + Các tính quan trọng chưa thực bật + Chưa cho thấy thay đổi giá thành sản phẩm + Màu sắc không thu hút => Với vấn đề trên, chúng em định lựa chọn đề tài xây dựng website so sánh giá bán laptop phụ kiện sàn thương mại điện tử để tiến hành nghiên cứu xây dựng Những làm đồ án - Tìm giá tốt cho sản phẩm - Có biểu đồ đường thể tỉ lệ lên xuống sản phẩm nhiều sàn (3 sàn thương mại) - Xem biến động giá - Xem tháng giảm giá nhiều Mục tiêu đề - Phát triển thêm chức tối ưu website từ đồ án 1: + Đăng nhập/đăng xuất + Xác thực người dùng + Thêm vào danh sách yêu thích + Tối ưu cache, tốc độ load trang + Thêm validate cho component form + Tự động đặt hàng + Nhận tin khuyến Phạm vi, quy mô - Môi trường, platform: website - Phạm vi: so sánh giá sàn thương mại điện tử: An phát computer, An Khang GearVN - Phạm vi chức năng: ● Đăng nhập/đăng xuất ○ Đăng nhập với username password ● Xác thực người dùng ○ Hiển thị permission dựa role user ○ Chặn user cố ý truy cập vào hình khơng phép truy cập ● Thêm vào danh sách yêu thích ○ Thêm sản phẩm vào danh sách yêu thích ○ Load danh sách yêu thích dựa theo user ○ Loại bỏ sản phẩm danh sách yêu thích ● Nhận tin khuyến ○ Thơng báo tự động có flash sale sản phẩm mà khách hàng quan tâm vào email mà khách hàng cung cấp ● Tự động đặt hàng ○ Tự động đặt hàng sản phẩm có giá thấp giá người dùng setup Đối tượng sử dụng: Tất người dùng có nhu cầu muốn so sánh giá tìm mua laptop phụ kiện máy tính Phương pháp thực hiện: - Phương pháp làm việc: Làm việc nhóm thành viên thơng qua phương thức online offline hướng dẫn giảng viên hướng dẫn - Phương pháp nghiên cứu: + Phân tích nhu cầu sử dụng đối tượng người dùng + Nghiên cứu tài liệu công nghệ liên quan + Kiểm tra, tham khảo website khác để tối ưu hóa trang web - Phương pháp cơng nghệ: + Tìm hiểu ngôn ngữ áp dụng framework vào để tối ưu hóa hiệu suất + Xây dựng giao diện web để tương tác với người dùng nhận phản hồi, sửa chữa cần thiết để đưa sản phẩm hồn chỉnh + Tìm hiểu cách thức hoạt động tính trang web Nền tảng công nghệ: - Front-end: html, css, javascript, ReactJS - Back-end: ASP.NET core - Database: MySQL - Validate form: React hook form, class – validator - Xác thực: JWT - Tự động đặt hàng: Selenium - Tối ưu tải trang: Lazy loading Technology Kết mong đợi: - Hoàn thiện website đáp ứng đầy đủ mục tiêu đề - Trang web thực xác yêu cầu khách hàng - Trang web có khả tương tác với người dùng với mức độ ổn định - Các chức website hoạt động đắn, xác, dễ sử dụng Hướng phát triển: - Trang blog - Thêm ngôn ngữ tiếng Anh - Liên kết đến trang review sản phẩm - Thêm chatbot hỗ trợ - Thêm forum công nghệ - Mở rộng thêm nhiều sản phẩm - Tổng hợp voucher sàn thương mại điện tử 10 Kế hoạch làm việc: - Thời gian thực hiện: Từ ngày 27/02/2023 đến hết ngày 17/07/2023 - Quy trình làm việc lên kế hoạch triển khai sau: + Giai đoạn (27/02/2023 - 24/04/2023): Hoàn thiện sơ front end chức Giai đoạn gồm sprint: + Sprint (27/02/2023 -> 04/03/2023): tìm hiểu cơng nghệ, khảo sát trang web liên quan + Sprint (06/03/2023 -> 16/03/2023): phân tích yêu cầu + Sprint (17/03/2023 -> 24/03/2023): xây dựng CSDL, xử lý ngôn ngữ tự nhiên + Sprint (25/03/2023 -> 24/04/2023): xây dựng website, xây dựng server, xây dựng số chức + Giai đoạn (25/05/2023 - 25/06/2023): Tiếp tục hoàn thiện chức lại triển khai viết báo cáo Giai đoạn gồm sprint: + Sprint (25/05/2023 -> 21/06/2023: hồn thiện chức cịn lại giai đoạn 1, tìm sửa lỗi trình xây dựng chức + Sprint (22/06/2023 -> 25/06/2023): Triển khai sản phẩm, viết báo cáo + Giai đoạn (26/06/2023 - 30/06/2023) Kiểm tra lỗi hoàn thiện sản phẩm Giai đoạn gồm sprint: + Sprint (26/06/2023 -> 28/06/2023): Kiểm tra lại tổng quan sản phẩm sửa lỗi + Sprint (29/06/2023 -> 30/06/2023): kiểm tra file báo cáo, chỉnh sửa thay đổi có 11 Phân cơng cơng việc: - Cơng việc chung: + Phân tích yêu cầu + Khảo sát trang web + Tìm hiểu cơng nghệ + Viết báo cáo • Công việc riêng: + Mai Long Thành: front-end, UX/UI design, tối ưu hóa website + Nguyễn Thiện Sua: back-end 10 Báo cáo cuối kì Đồ án Trang hướng dẫn người dùng tự thêm sản phẩm Trang hướng dẫn Trang danh sách yêu thích Trang danh sách theo dõi 10 Trang danh sách địa điểm theo dõi Trang xem danh sách sản phẩm yêu thích người dùng Trang xem danh sách sản phẩm theo dõi người dùng Trang xem danh sách địa điểm mà người dùng nhập 6.3 Mơ tả hình Trang chủ STT Biến cố Xử lý 46 Báo cáo cuối kì Đồ án Thanh tìm kiếm Nhập từ khóa cần tìm kiếm Chọn “Tìm kiếm” Chuyển sang hình tìm kiếm Trang tìm kiếm 47 Báo cáo cuối kì Đồ án STT Biến cố Xử lý Chọn sản phẩm Chuyển san hình thơng tin sản phẩm Chọn “Sắp xếp” Chọn loại xếp (Tăng/giảm) cập nhật lại danh sách sản phẩm xếp Chọn trang Chuyển sang sản phẩm danh sách pagination Chọn số lượng page Đổi danh sách hiển thị số lượng số lượng page Chọn logo website Quay hình Chọn “trang chủ” Quay hình Màn hình thơng tin sản phẩm 48 Báo cáo cuối kì Đồ án 49 Báo cáo cuối kì Đồ án STT Biến cố Xử lý Chọn “Tới nơi bán Điều hướng đến website thương mại có bán sp với giá rẻ rẻ nhất” so với sàn so sánh Chọn “Tới nơi bán” Điều hướng đến website thương mại tương ứng có bán sp Chọn Logo Quay lại trang chủ Chọn “Trang chủ” Quay lại trang chủ Trang đăng nhập 50 Báo cáo cuối kì Đồ án STT Biến cố Xử lý Chọn “Register now” Điều hướng đến trang đăng ký Chọn “Login” Điều hướng đến trang chủ website 2.1 Chưa nhập đủ field Thông báo lỗi, không cho phép đăng nhập 2.2 Nhập sai email/password Thông báo lỗi, không cho phép đăng nhập Trang đăng ký 51 Báo cáo cuối kì Đồ án STT Biến cố Xử lý Chọn Login Điều hướng đến trang đăng nhập Chọn “Sign up” Điều hướng đến trang đăng nhập 2.1 Chưa nhập đủ field Thông báo lỗi, không cho phép đăng ký 2.2 Nhập email trùng Thông báo lỗi, không cho phép đăng ký Trang hướng dẫn 52 Báo cáo cuối kì Đồ án Trang danh sách u thích STT Biến cố Xử lý 53 Báo cáo cuối kì Đồ án Chọn “Hủy yêu thích” Loại bỏ sản phẩm yêu thích khỏi danh sách Chọn “Tên sản phẩm” Điều hướng đến website thương mại tương ứng có bán sp Trang danh sách theo dõi STT Biến cố Bật “Kích hoạt” Xử lý Gửi thơng báo sản phẩm đến email người dùng đạt mức giá mong muốn Tắt “Kích hoạt ” Tắt tất thông báo sản phẩm đến email người dùng Bật “tự động đặt hàng” Tự động đặt hàng sản phẩm đến giá mong muốn Tắt “tự động đặt hàng” Tắt tự động đặt hàng Trang danh sách địa 54 Báo cáo cuối kì Đồ án STT Biến cố Xử lý Chọn “Lưu” Lưu địa vào danh sách địa 1.1 Điền thiếu field Không lưu địa vào danh sách địa Chọn “xóa” Xóa địa khỏi danh sách địa PHÁT TRIỂN VÀ CÀI ĐẶT ỨNG DỤNG Sau thiết kế đầy đủ mơ hình kiến trúc, bảng sở liệu giao diện ứng với chức năng, nhóm tiến hành push code lên github đồ án cài đặt website theo quy mô hệ thống – website so sánh giá 7.1 Môi trường phát triển ứng dụng • Hệ điều hành: Windows 10,11 55 Báo cáo cuối kì Đồ án • Ngơn ngữ: ReactJS, HTML,CSS, Java • Hệ quản trị sở liệu: MySQL • Cơng cụ chạy ứng dụng: Visual studio code 7.2 Mơi trường triển khai ứng dụng • Hệ điều hành: Windows/ Linux/ MacOSX (bởi website) • RAM: 1GB • Mơi trường chạy hệ thống: trình duyệt web Microsoft Egde, Chrome (khuyến khích), Firefox,… 7.3 Kết đánh giá Vì trình triển khai, phát triển website thử nghiệm hầu hết trình duyệt web đại FireFox, CocCoc, Edge, Chrome, Nên qua giai đoạn thử nghiệm, website cho kết tích cực y lúc phát triển KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 8.1 Kết luận Đánh giá tiến độ thực đề tài Thời gian Hoạt động Tháng 2/2023 - Lập nhóm, nhận đề tài, xác định quy trình phát triển website: mơ - Tháng 3/2023 hình Agile - Xác định rõ yêu cầu, đặt mục tiêu, đối tượng nghiên cứu, tạo list task Trello cách thức hoạt động nhóm Tháng 3/2023 - Đọc tài liệu trước đó, khảo sát trạng, khảo sát trang - Tháng 4/2023 web sẵn có thị trường - Đưa so sánh, tìm hướng nghiên cứu cải thiện tốn 56 Báo cáo cuối kì Đồ án - Phân tích, đặc tả use case, mơ hình hóa u cầu phần mềm (state, class, activity, collaboration, sequence), thiết kế CSDL ban đầu, phác thảo giao diện, bắt đầu viết báo cáo Tháng 4/2023 - Thiết kế CSDL, phân công công việc ứng theo chức - Tháng 5/2023 đề - Thiết kế ngày cải thiện giao diện Tháng 5/2023 - Tập trung cài đặt môi trường, kiểm tra luồng chạy - Tháng 6/2023 chức - Thử nghiệm, kiểm thử hoàn thiện website, báo cáo 8.2 Kết đạt Sau trình nghiên cứu thực hiện, phát triển đề tài, sau nhóm chúng em đạt mục tiêu đề ra, đáp ứng yêu cầu tốn cần phải giải Ngồi ra, chúng em cịn nâng cao thêm chức nghiệp vụ, kiến thức chuyên ngành Kiến thức: • Nghiên cứu kỹ thuật lazyloading • Nghiên cứu Selenium • Nghiên cứu MySQL • Nghiên cứu cách call API với useQuery • Nghiên cứu cách phân quyền với JWT • Mơ hình Client – server • Mơ hình phát triển nhanh Agile • Biết cách sử dụng react hook form Kỹ năng: • Hiểu rõ mơ hình client – server phát triển website 57 Báo cáo cuối kì Đồ án • Xử dụng Reactjs để thiết kế front-end • Tiếp xúc với kỹ hook nâng cao Reactjs framework • Làm việc nhóm phân chia thời gian, cơng việc • Sử dụng sở liệu phổ biến MySQL • Học cách thức tổ chức, nghiên cứu toán, đề tài 8.3 Điểm đặc sắc đề tài Đề tài khó lại hay Khi mà yêu cầu đề tài đặt hướng việc nghiên cứu đến công nghệ phổ biến Ngồi việc phát triển tìm cách lấy liệu sàn thương mại khác đặc sắc lớn đề tài này, lẽ vấn đề so sánh giá, chất lượng sản phẩm nhu cầu thiếu từ trước đến người tiêu dùng, đề tài hoàn toàn bắt kịp với thời đại đưa toán lớn để nghiên cứu 8.4 Hướng phát triển Website đáp ứng chức Tuy nhiên, tương lai để mang lại thuận tiện tiếp cận nhiều khách hàng khó tính khác, nhóm chúng em dự định phát triển thêm số chức sau: • Tiếp tục nâng cao chất lượng UI UX • Mở rộng quy mô website • Hỗ trợ đa ngơn ngữ • Responsive hình smartphone, tablet,… TÀI LIỆU THAM KHẢO Tiếng Việt 58 Báo cáo cuối kì Đồ án ANDY_NGO, Phút Tìm Hiểu Về Mơ Hình Client - Server (codelearn.io) Hồng Thị Vân Anh, Luận Văn Khóa luận Xây dựng website thương mại điện tử cho doanh nghiệp tư nhân thương mại dịch vụ việt quang dựa tảng Opencar (thuvienluanvan.net), Đại học Huế khoa hệ thống thông tin kinh tế 2016 Kỹ thuật lazyloading: https://codelearn.io/sharing/ky-thuat-lazy-loadingimages Tiếng Anh Reactjs: https://reactjs.org ASP.NET core: Get started with ASP.NET Core MVC | Microsoft Learn MySQL: MySQL :: MySQL Documentation, Javascript: JavaScript Tutorial (w3schools.com) Selenium: https://www.selenium.dev/ TanStack: https://tanstack.com/query/v4 JWT: https://jwt.io Website Website so sánh giá, tìm kiếm sản phẩm giá rẻ, So sánh, tìm kiếm sản phẩm giá rẻ uy tín tốt | websosanh.vn Website so sánh giá nhiều phân loại sản phẩm, So sánh giá (sosanhgia.com) BẢNG PHÂN CÔNG CÔNG VIỆC STT Họ tên – MSSV Công việc giao 59 Báo cáo cuối kì Đồ án Mai Long Thành • Thiết kế UX/UI - 19522232 • Nghiên cứu đồ thị hóa liệu sản phẩm sàn thương mại • Nghiên cứu tương tác hình chi tiết sản phẩm, hình chính, hình tìm kiếm Nguyễn Thiện Sua - 19522144 • Nghiên cứu chức xếp sản phẩm • Thực báo cáo • Viết tài liệu báo cáo • Thực kiểm thử • Nghiên cứu cách tối ưu sourcecode • Thực cơng việc back-end • Nghiên cứu lấy api sàn thương mại • Nghiên cứu tổng hợp thơng tin sản phẩm • Nghiên cứu chức nhận ưu đãi khuyến • Thiết kế, hồn thiện CSDL • Viết báo cáo • Thực báo cáo • Thực kiểm thử 60