Báo cáo đồ án 1 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: 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ủ Đức, tháng năm 2022 Báo cáo cuối kì Đồ án 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 q trình thực hiện, kiến thức kinh nghiệm 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 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ả iii Báo cáo cuối kì Đồ án NHẬN XÉT (Của giáo viên hướng dẫn) iv Báo cáo cuối kì Đồ á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 v Báo cáo cuối kì Đồ án TỔNG QUAN BÁO CÁO TÊ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ử 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 05/09/2022 đến hết ngày 31/12/2022 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ử buôn 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 vi Báo cáo cuối kì Đồ án => 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 Mục tiêu đề - Xây dựng website giải vấn đề sau: + 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 + Tìm giá tốt cho sản phẩm + Lọc sản phẩm + Nhận tin khuyến Phạm vi, quy mô - Môi trường, platform: website - Phạm vi chức năng: ● Biểu đồ đường thể tỉ lệ lên xuống sản phẩm nhiều sàn (giới hạn số lượng sàn): ○ Có số liệu chi tiết ○ Hiển thị rõ lên xuống giá sản phẩm sàn thương mại theo tháng ○ Hiển thị giá sản phẩm bán nhiều sàn thương mại, (mỗi sàn thương mại thể đường vẽ màu khác nhau) ● Tìm giá tốt cho sản phẩm ○ Hiển thị danh sách sàn thương mại có bán sản phẩm theo giá thấp tới cao vii Báo cáo cuối kì Đồ án ● Lọc sản phẩm ○ Lọc sản phẩm theo số tiền, phân loại, ● 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 ● Biến động giá sản phẩm ○ Biểu đồ thể giá sản phẩm ngày (cách tiếng cập nhật giá Đố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 hoà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 viii Báo cáo cuối kì Đồ án Kết mong đợi: - Hoàn thiện website đáp ứng đầy đủ mục tiêu đề - Trang web thực xác 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ử Kế hoạch làm việc: - Thời gian thực hiện: Từ ngày 05/09/2022 đến hết ngày 31/12/2022 - Quy trình làm việc lên kế hoạch triển khai sau: + Giai đoạn (5/9/2022 - 24/10/2022): Hoàn thiện sơ front end chức Giai đoạn gồm sprint: + Sprint (5/9/2022 -> 12/9/2022): tìm hiểu cơng nghệ, khảo sát trang web liên quan + Sprint (14/9/2022 -> 16/9/2022): phân tích yêu cầu + Sprint (17/9/2022 -> 24/9/2022): xây dựng CSDL, xử lý ngôn ngữ tự nhiên + Sprint (25/9/2022 -> 24/10/2022): xây dựng website, xây dựng server, xây dựng số chức + Giai đoạn (25/10/2022 - 25/12/2022): Tiếp tục hồn thiện chức cịn lại triển khai viết báo cáo Giai đoạn gồm sprint: ix Báo cáo cuối kì Đồ án + Sprint (25/10/2022 -> 21/12/20220: 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/12/2022 -> 25/12/2022): Triển khai sản phẩm, viết báo cáo + Giai đoạn (26/12/2022 - 31/12/2022) Kiểm tra lỗi hoàn thiện sản phẩm Giai đoạn gồm sprint: + Sprint (26/12/2022 -> 28/12/2022): Kiểm tra lại tổng quan sản phẩm sửa lỗi + Sprint (29/12/2022 -> 31/12/2022): kiểm tra file báo cáo, chỉnh sửa thay đổi có 10 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 + Xây dựng CSDL + Viết báo cáo - Công việc riêng: + Mai Long Thành: front-end, UX/UI design + Nguyễn Thiện Sua: back-end x Báo cáo cuối kì Đồ án 3.4 Collaboration diagram Sắp xếp danh sách sản phẩm 24 Báo cáo cuối kì Đồ án THIẾT KẾ KIẾN TRÚC Sau phân tích toán, chúng em bắt đầu thiết kế, xây dựng hệ thống thành giải pháp thực thi Mô hình thiết kế chi tiết xem xét đến vấn đề kỹ thuật Các lớp giải vấn đề như: sở liệu (database), giao diện người dùng (user interface), Một số lớp phát bổ sung Để xây dựng website so sánh chúng em xây dựng chương trình dựa mơ hình Client – Server 4.1 Kiến trúc tổng thể Mơ hình client – server: - Front - end: đóng vai trị GUI tương tác với user, nhận liệu từ phía Back-end để hiển thị cho người dùng - Back - end (ASP.NET core): đóng vai trị cầu nối yêu cầu người dùng từ phía front-end nhận liệu từ server phản hồi Front–end, back–end kết hợp với tạo nên cấu trúc client hồn chỉnh - Database (MySQL): đóng vai trị Server phục vụ, có chức nhận request từ client, qua back - end, xử lý, cập nhật thay đổi hệ Quản Trị Cơ Sở Dữ Liệu, trả liệu cho client 25 Báo cáo cuối kì Đồ án 4.2 Kiến trúc thành phần Website (client) • Front-end: viết dựa Reactjs, sử dụng html, css kết hợp với ngơn ngữ Javascript • Back-end: viết dựa framework ASP.NET core, ngơn ngữ C# • API: đóng vai trị cầu nối giúp giao tiếp phần front – end back – end MySQL MySQL hệ thống quản trị sở liệu mã nguồn mở, hoạt động dựa theo mơ hình client – server Các máy khách tải MySQL truy cập trực tiếp phiên online để sử dụng Cách vận hành mơi trường MySQL: MySQL tạo bảng để lưu trữ liệu, định nghĩa liên quan bảng Client gửi yêu cầu SQL lệnh đặc biệt MySQL Ứng dụng server phản hồi thông tin trả kết máy client 26 Báo cáo cuối kì Đồ án THIẾT KẾ DỮ LIỆU 5.1 Sơ đồ logic 5.2 Mô tả sơ đồ logic Bảng Product STT Tên thuộc tính id name ItemURL ImageURL Kiểu Ràng buộc Char(36) PK Longtext Longtext Longtext Ý nghĩa/ghi Khóa Tên sản phẩm URL item URL ảnh Bảng Notifications STT Tên thuộc tính Kiểu Ràng buộc Id Char(36) PK FK ProductId Char(36) Email Char(255) Username Longtext Price Double 27 Ý nghĩa/ghi Khóa ID sản phẩm Email user Tên user Giá yêu cầu Báo cáo cuối kì Đồ án Bảng PriceFluctuations STT Tên thuộc tính Kiểu Ràng buộc id Char(36) PK FK ProductId Char(36) Price Double UpdateDate Datetime(6) 28 Ý nghĩa/ghi Khóa ID sản phẩm Giá sản phẩm Thời gian cập nhật Báo cáo cuối kì đồ án THIẾT KẾ GIAO DIỆN 6.1 Sơ đồ hình 6.2 Danh sách hình STT Màn hình Chức Trang chủ Nhập thơng tin cá nhân, tạo tài khoản Trang tìm kiếm Trang hiển thị sản phẩm phù hợp với keyword Trang thông tin sản phẩm Các trang web khác Hiển thị thông tin sản phẩm, thông tin so sánh, biểu đồ giá Điều hướng đến website thương mại sản phẩm 6.3 Mô tả hình Trang chủ 29 Báo cáo cuối kì đồ án STT Biến cố Xử lý 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 30 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 31 Báo cáo cuối kì đồ án 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 32 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ủ 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 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 • Ngôn ngữ: ReactJS, HTML,CSS, Java • Hệ quản trị sở liệu: MySQL 33 Báo cáo cuối kì đồ án • 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 8/2022 - Lập nhóm, nhận đề tài, xác định quy trình phát triển website: mơ - Tháng 9/2022 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 9/2022 - Đọc tài liệu trước đó, khảo sát trạng, khảo sát trang - Tháng 10/2022 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 - 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 34 Báo cáo cuối kì đồ án Tháng 10/2022 - Thiết kế CSDL, phân công công việc ứng theo chức - Tháng 11/2022 đề - Thiết kế ngày cải thiện giao diện Tháng 11/2022 - Tập trung cài đặt môi trường, kiểm tra luồng chạy - Tháng 12/2022 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 toá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 Reactjs • Nghiên cứu ASP.NET core • Nghiên cứu MySQL • Nghiên cứu cách lấy API • Nghiên cứu cách lấy liệu từ website khác • Mơ hình Client – server • Mơ hình phát triển nhanh Agile • Biết vịng đời request Kỹ năng: • Hiểu rõ mơ hình client – server phát triển website • 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 35 Báo cáo cuối kì đồ án 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 Ngoà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 • Tối ưu nhớ • Thêm chức tự động đặt hàng • Thêm chức lọc nâng cao TÀI LIỆU THAM KHẢO Tiếng Việt 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 36 Báo cáo cuối kì đồ án dựa tảng Opencar (thuvienluanvan.net), Đại học Huế khoa hệ thống thông tin kinh tế 2016 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) 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 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 • 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ử 37 Báo cáo cuối kì đồ án Nguyễn Thiện Sua - 19522144 • 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ử 38 ... khuất mắt giá sản phẩm sàn thương mại có phân vân giá sản phẩm rẻ nhất, nhóm chúng em định chọn đề tài ? ?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Ử” (đồ án ThS Huỳnh... (w3schools.com) 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)... 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