Đồ án xây dựng ứng dụng so sánh giá và tự động mua hàng trên các sàn tmđt (các thiết bị điện tử)

1 LỜI CẢM ƠN Lời đầu tiên, chúng em xin gửi lời cảm ơn chân thành đến quý thầy cô 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 chúng em suốt thời gian qua Kiến thức mà quý thầy cô chia sẻ tảng quan trọng giúp chúng em hoàn thành đề tài Chúng em muốn bày tỏ lòng biết ơn đế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 chúng em hoàn thành đề tài Những lời động viên góp ý chân tình từ động lực quý giá giúp chúng em vượt qua khó khăn trình tìm hiểu thực đề tài Trong thời gian vừa qua, chúng em nỗ lực áp dụng kiến thức tảng học, học hỏi nghiên cứu công nghệ để xây dựng đề tài môn học Tuy nhiên, kiến thức kinh nghiệm cịn hạn chế, khơng tránh khỏi thiếu sót Vì vậy, chúng em mong nhận góp ý từ q thầy để hồn thiện thêm kiến thức mà chúng em học, trở thành tảng quý báu cho công việc chúng em tương lai Cuối cùng, chúng em xin kính chúc quý thầy cô khoa Công nghệ Phần mềm cô Huỳnh Hồ Thị Mộng Trinh sức khỏe dồi niềm tin để tiếp tục sứ mệnh cao đẹp truyền đạt kiến thức cho hệ mai sau Chân thành cảm ơn thầy cô! Thành phố Hồ Chí Minh, tháng năm 2023 Nhóm sinh viên thực NHẬN XÉT CỦA GIẢNG VIÊN ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… MỤC LỤC CHƯƠNG TỔNG QUAN ĐỀ TÀI 1.1 Giới thiệu chung 1.1.1 Tên đề tài 1.1.2 Lý chọn đề tài 1.2 Khảo sát số trang web có .5 1.2.1 Một số website tương tự thị trường .6 1.2.2 Nhận xét 1.3 Mục tiêu đề 1.4 Phạm vi, quy mô 1.5 Đối tượng nghiên cứu 1.5.1 Lý Thuyết 1.5.2 Thực tiễn .9 1.6 Phương pháp thực 10 1.7 Nền tảng công nghệ 10 1.8 Kết mong đợi .10 1.9 Kế hoạch thực .10 CHƯƠNG CƠ SỞ LÝ THUYẾT 12 2.1 Cheerio 12 2.2 BeautifulSoup 14 2.3 Flutter 16 2.4 NodeJS 17 2.4.1 NodeJS gì? 17 2.4.2 Cách NodeJS hoạt động 18 2.4.3 Cách NodeJS hoạt động 18 2.5 ExpressJS 19 2.5.1 ExpressJS gì? 19 2.5.2 Tính ExpressJS 19 2.6 ExpressJS 20 2.6.1 MongoDB gì: 20 2.6.2 Ưu điểm MongoDB: 21 CHƯƠNG PHÂN TÍCH ĐẶC TẢ YÊU CẦU 22 3.1 Usecase, đặc tả Usecase 22 3.1.1 Sơ đồ usecase 22 3.1.2 Đặc tả Usecase 22 3.2 Sequence Diagram 33 3.2.1 Tìm kiếm sản phẩm 33 3.2.2 Xem thông tin chi tiết sản phẩm 34 3.2.3 Tạo Order 35 3.3 Activity Diagram 35 CHƯƠNG THIẾT KẾ KIẾN TRÚC .36 4.1 Kiến trúc tổng thể 36 4.2 Kiến trúc phần 37 4.2.1 Kiến trúc FE .37 4.2.2 Kiến trúc BE 39 CHƯƠNG THIẾT KẾ DỮ LIỆU 39 5.1 Database 39 5.2 Mô tả 40 CHƯƠNG THIẾT KẾ GIAO DIỆN 42 6.1 Sơ đồ liên kết hình 42 6.2 Danh sách hình 42 6.2.1 Trang chủ 42 6.2.1.1 Màn hình 42 6.2.1.2 Mô tả hình 43 6.2.2 Màn hình danh sách sản phẩm 44 6.2.2.1 Màn hình 44 6.2.2.2 Mơ tả hình 44 6.2.3 Chi tiết sản phẩm 46 6.2.3.1 Màn hình 46 6.2.3.2 Mô tả hình 46 6.2.4 Màn hình khuyến 48 6.2.4.1 Màn hình 48 6.2.4.2 Mơ tả hình 48 CHƯƠNG HƯỚNG PHÁT TRIỂN VÀ CÀI ĐẶT 49 7.1 Môi trường phát triển ứng dụng 49 7.2 Môi trường triển khai ứng dụng 49 7.3 Kết đánh giá 49 7.4 Hướng phát triển 49 CHƯƠNG KẾT LUẬN 51 8.1 Kết đạt 51 8.2 Điểm đặc sắc đề tài 51 TÀI LIỆU THAM KHẢO 53 BẢNG PHÂN CÔNG CÔNG VIỆC 54 MỤC LỤC ẢNH Hình 1.1 Website websosanh.vn Hình 1.2 shopping.google.com Hình 1.3 sosanhgia.com Hình 2.1 Logo Cheerio 12 Hình 2.2 Github Cheerio 13 Hình 2.3 Một số selectors syntax Cheerio 13 Hình 2.4 Một số ví dụ Beautiful Soup 16 Hình 2.5 Logo Flutter 16 Hình 2.6 Logo NodeJS 18 Hình 2.7 Logo NodeJS 20 Hình 3.1 Sơ đồ Usecase 22 Hình 3.2 Sequence Diagram tìm kiếm sản phẩm 33 Hình 3.3 Sequence Diagram xem thông tin chi tiết sản phẩm 34 Hình 3.4 Sequence Diagram tạo Order 35 Hình 3.5 Activity Diagram nhận báo giá 36 Hình 4.1 Mơ hình kiến trúc tổng thể 36 Hình 4.2 Mơ tả kiến trúc FE 37 Hình 5.1 Database .40 Hình 6.1 Sơ đồ liên kết hình 42 Hình 6.2 Màn hình trang chủ 43 Hình 6.3 Màn hình danh sách sản phẩm 44 Hình 6.4 Màn hình chi tiết sản phẩm 46 Hình 6.5 Màn hình khuyến 48 MỤC LỤC BẢNG Bảng so sánh số UI chức website so sánh giá Danh sách Usecase .22 UC1: Tìm kiếm sản phẩm 23 UC2: Lọc sản phẩm 24 UC3: Sắp xếp sản phẩm .25 UC4: Sắp xếp giá tăng dần 26 UC5: Sắp xếp giá giảm dần 28 UC6: Xem thông tin sản phẩm .29 UC7: So sánh giá 30 UC8: Xem chi tiết kỹ thuật 31 UC9: Xem biểu đồ biến động 32 Mô tả thành phần hệ thống: 38 Bảng mô tả Order 40 Bảng mô tả Product 40 Bảng mô tả ArrayPriceProduct 41 Bảng mơ tả hình trang chủ 43 Bảng mơ tả hình danh sách sản phẩm 44 Bảng mô tả hình chi tiết sản phẩm .46 Bảng mơ tả hình khuyến 48 NỘI DUNG ĐỒ ÁN CHƯƠNG 1.1 TỔNG QUAN ĐỀ TÀI Giới thiệu chung DANH SÁCH THÀNH VIÊN NHÓM Tên thành viên MSSV Ngô Quang Vũ 20520866 Mai Phạm Quốc Hưng 20521366 1.1.1 Tên đề tài XÂY DỰNG ỨNG DỤNG SO SÁNH GIÁ VÀ TỰ ĐỘNG MUA HÀNG TRÊN CÁC SÀN TMĐT (CÁC THIẾT BỊ ĐIỆN TỬ) 1.1.2 - Lý chọn đề tài Đề tài xây dựng website so sánh giá bán laptop thiết bị điện sàn thương mại điện tử bọn em lựa chọn với nhiều lý Trước hết, laptop, điện thoại di động, hay thiết bị điện tử ngày trở nên phổ biến sống hàng ngày Hiện cá nhân bạn học sinh sinh viên hay người làm sở hữu hay chí nhiều sản phẩm điện tử Nên nhu cầu mua hàng thiết bị điện tử cao phát triển Internet dẫn đến xu hướng mua hàng mua hàng online sản thương mại điện tử trở nên phổ biến - Tuy nhiên, việc tìm kiếm sản phẩm ưng ý với giá hợp lý sàn thương mại điện tử trở nên phức tạp Hiện nay, có nhiều sàn TMĐT bán loại sản phẩm hay chí sản sàn TMĐT có nhiều gian hàng bán sản phẩm với mức giá khác nhau, làm cho người mua bối rối việc lựa chọn điểm mua với giá phù hợp - Nhận thấy tình trạng mong muốn tìm giải pháp để giải vấn đề Do đó, chúng em định 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ử Mục tiêu chúng em giúp người mua dễ dàng xem xét giá sản phẩm tất sàn TMĐT lựa chọn mua với giá hợp lý - Hiện tại, trang web so sánh giá có thường gặp số hạn chế: ● Giao diện khó sử dụng, đặc biệt người tiếp xúc với thiết bị cơng nghệ ● Các tính quan trọng cần thiết chưa bật chưa cho thấy thay đổi giá thành sản phẩm ● Hơn nữa, màu sắc trang web thường không thu hút người dùng - Với vấn đề trên, chúng em định xây dựng trang web so sánh giá bán laptop phụ kiện với giao diện thân thiện, dễ sử dụng người dùng Chúng em tập trung vào việc phát triển tính quan trọng hiển thị giá cạnh tranh từ sàn TMĐT khác cung cấp thông tin chi tiết sản phẩm để người dùng đưa định mua hàng thơng minh - Bên cạnh đó, chúng em thiết kế giao diện trực quan thu hút để tạo hứng thú cho người dùng sử dụng trang web chúng em - Với đề tài này, chúng em hy vọng đóng góp vào việc giải vấn đề mua sắm laptop phụ kiện với giá thành hợp lý, đồng thời mang lại trải nghiệm mua sắm thuận tiện tiết kiệm thời gian cho người dùng 1.2 Khảo sát số trang web có 1.2.1 Một số website tương tự thị trường Hình 1.1 Website websosanh.vn Hình 1.2 shopping.google.com STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/ghi ProductID Char(36) PK Khóa ProductPrice Char(36) FK Khóa ngoại ProductName Char(127) Tên sản phẩm ProductImage Char(255) Ảnh mô tả sản phẩm LinkProduct Char(127) Link sản phẩm Bảng mơ tả ArrayPriceProduct STT Tên thuộc tính Kiểu Ràng buộc Char(36) PK ProductPriceID Price Double Date DateTime Ý nghĩa/ghi Khóa Giá sản phẩm Thời gian cập nhật giá 41 CHƯƠNG 6.1 Sơ đồ liên kết hình Hình 6.1 6.2 THIẾT KẾ GIAO DIỆN Sơ đồ liên kết hình Danh sách hình 6.2.1 Trang chủ 6.2.1.1 Màn hình 42 Hình 6.2 6.2.1.2 Màn hình trang chủ Mơ tả hình Bảng mơ tả hình trang chủ STT Thành phần Chức Thanh tìm kiếm Tìm kiếm sản phẩm 43 Item ưu đãi Hiển thị ưu đãi sàn 6.2.2 Màn hình danh sách sản phẩm 6.2.2.1 Màn hình Hình 6.3 6.2.2.2 Màn hình danh sách sản phẩm Mơ tả hình Bảng mơ tả hình danh sách sản phẩm STT Thành phần Chức Button quay lại Quay lại hình trước Thanh tìm kiếm Tìm kiếm sản phẩm 44 Item sản phẩm Hiển thị item sản phẩm Button Lọc Lọc danh sách sản phẩm Button Sắp xếp Sắp xếp danh sách sản phẩm Range giá Chọn khoảng giá mong muốn Button Hoàn thành Xác nhận lọc sản phẩm theo khoảng giá chọn Item xếp Chọn thứ tự xếp Button Hoàn thành Xác nhận xếp sản phẩm theo thứ tự mong muốn 45 6.2.3 Chi tiết sản phẩm 6.2.3.1 Màn hình Hình 6.4 6.2.3.2 Màn hình chi tiết sản phẩm Mơ tả hình Bảng mơ tả hình chi tiết sản phẩm STT Thành phần Chức Button quay lại Quay lại hình trước Button yêu thích u thích sản phẩm 46 Hình ảnh sản phẩm Hiển thị thumbnail sản phẩm Text tên sản phẩm Hiển thị tên sản phẩm Text giá sale sản phẩm Hiển thị giá sale sản phẩm Text giá gốc sản phẩm Hiển thị giá gốc sản phẩm Button nhận thông báo Chọn giá mong muốn để ứng dụng gửi thông báo Tab thông tin Hiển thị mục sản phẩm Item giá Hiển thị giá nơi bán sàn khác 47 6.2.4 Màn hình khuyến 6.2.4.1 Màn hình Hình 6.5 6.2.4.2 Màn hình khuyến Mơ tả hình Bảng mơ tả hình khuyến STT Thành phần Chức Item ưu đãi Hiển thị ưu đãi sàn 48 CHƯƠNG HƯỚNG PHÁT TRIỂN VÀ CÀI ĐẶT Sau hồn thiện 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 triển khai website so sánh giá theo quy mô hệ thống 7.1 Môi trường phát triển ứng dụng - Hệ điều hành: Windows 10, Mac - Ngôn ngữ: Flutter, NodeJS, Javascript - Hệ quản trị sở liệu: MongoDB - 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: Android, IOS - RAM: 1GB - Môi trường chạy hệ thống: trình duyệt web Microsoft Edge, Chrome (khuyến khích), Firefox,… 7.3 Kết đánh giá Ứng dụng có chức ứng dụng so sánh giá, chức hoạt động xác ổn định Tuy nhiên ứng dụng thiếu sót chức 7.4 - Hướng phát triển Phát triển tính năng: ● Tối ưu hóa chức tìm kiếm ● Thêm data từ sàn TMĐT khác ● Tự động add mã giảm giá cho sản phẩm (đưa giá tốt có) ● Thêm chatbox hỗ trợ - Phát triển công nghệ: ● Phát triển tảng web ● Nâng cấp UI/UX ● Tối ưu hóa tốc độ tải 49 ● Tăng bảo mật ● Thêm phân quyền 50 CHƯƠNG 8.1 KẾT LUẬN Kết đạt - Sau trình nghiên cứu thực hiện, chúng em vui mừng thông báo đạt mục tiêu đề đề 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ử - Chúng em thành công việc phát triển chức tính cần thiết để giải tốn tìm kiếm so sánh giá người dùng Người dùng dễ dàng tìm kiếm sản phẩm, so sánh giá từ sàn thương mại điện tử khác lựa chọn mua với giá hợp lý - Ngoài ra, chúng em nâng cao thêm kiến thức chuyên ngành trình thực đề tài - Kiến thức: ● Nghiên cứu Flutter ● Nghiên cứu NodeJS ● Nghiên cứu MongoDB ● Nghiên cứu framework ● Nghiên cứu cách lấy liệu từ website khác ● Mơ hình Client – server ● Biết vịng đời request - Kỹ năng: ● Hiểu rõ mơ hình client – server phát triển website ● Sử dụng Flutter để thiết kế front-end ● Làm việc nhóm phân chia thời gian, cơng việc ● Sử dụng MongoDB ● Học cách thức tổ chức, nghiên cứu toán, đề tài 8.2 Điểm đặc sắc đề tài - Đề tài khai thác vấn đề crawl khai thác liệu trang web lĩnh vực quan trọng lĩnh vực khai thác liệu trí tuệ nhân tạo 51 Nó tập trung vào việc tự động thu thập trích xuất thơng tin từ trang web để phân tích sử dụng cho mục đích khác - Crawl q trình tự động thu thập thông tin từ trang web cách qua liên kết truy xuất trang liên quan Q trình bao gồm việc tải nội dung trang web, phân tích cấu trúc trang, trích xuất liệu lưu trữ vào sở liệu - Khai thác liệu trình trích xuất thơng tin quan trọng từ liệu thu thập từ trang web Quá trình bao gồm việc áp dụng kỹ thuật công cụ để trích xuất thơng tin cần thiết từ liệu khơng có cấu trúc chuyển đổi thành liệu có cấu trúc hữu ích cho việc phân tích sử dụng - Đề tài khai thác ứng dụng vào nhiều lĩnh vực khác Ví dụ, lĩnh vực thương mại điện tử, việc crawl khai thác liệu từ trang web bán hàng giúp phân tích xu hướng mua sắm, so sánh giá đánh giá sản phẩm Trong lĩnh vực tin tức phương tiện truyền thông, việc crawl khai thác liệu từ trang web tin tức giúp phân tích dự đoán xu hướng tác động kiện - Để thực đề tài này, cần sử dụng kỹ thuật công nghệ web scraping, xử lý ngơn ngữ tự nhiên, máy học trí tuệ nhân tạo Các công cụ thư viện phổ biến Scrapy, BeautifulSoup, Selenium, NLTK TensorFlow sử dụng để thực nhiệm vụ crawl khai thác liệu 52 TÀI LIỆU THAM KHẢO [1] Trang chủ NodeJS: Documentation | Node.js (nodejs.org) [2] ExpressJS: Express web framework (Node.js/JavaScript) - Learn web development | MDN (mozilla.org) [3] NodeJS gì? Những điều nên biết NodeJS bạn cần biết năm 2022 (niithanoi.edu.vn) [4] NodeJS gì? Tổng quan kiến thức Node.JS từ A-Z (vietnix.vn) [5] Expressjs gì? Tại nên sử dụng Expressjs lập trình? (itnavi.com.vn) [6] MongoDB gì? Cơ sở liệu phi quan hệ (viblo.asia) [7] Cheerio: cheerio - npm (npmjs.com) [8] Gửi mail với NodeJS: NodeJS viết API gửi Email với OAuth2 Nodemailer - Trung Quân (trungquandev.com) [9] Beautifulsoup: Beautiful Soup Documentation — Beautiful Soup 4.4.0 documentation (beautiful-soup-4.readthedocs.io) [10] Trang chủ flutter: https://docs.flutter.dev/ [11] Thư viện quản lí state: https://bloclibrary.dev/#/ [12] https://www.youtube.com/watch?v=duvldqNOcTk&list=PLFcgubjtcw5U-Y6 z1gpR02ebF-jyLoyga 53 BẢNG PHÂN CƠNG CƠNG VIỆC STT Họ Tên - MSSV Phân cơng Ngô Quang Vũ - 20520866 ● 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 báo giá sản phẩm Mai Phạm Quốc Hưng 20521366 ● Thiết kế, hoàn thiện CSDL ● Viết báo cáo ● Thực báo cáo ● Thực kiểm thử ● Thiết kế UX/UI ● Viết ứng dụng demo ● 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 ● 54 Thực báo cáo 55 ● Viết tài liệu báo cáo ● Thực kiểm thử