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ử

TỔNG QUAN BÁO CÁO TÊN ĐỀ TÀI: Xây dựng 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ử.. => Với những vấn đề trên, chúng em quyết định lựa chọn đề tài xây dựng

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

-🙞🙜🕮🙞🙜 -BÁO CÁO ĐỒ ÁN 1 – 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

Mai Long Thành 19522232

Thủ Đức, tháng 9 năm 2022

LỜI CẢM ƠN

Lời đầu tiên, nhóm tác giả xin chân thành cảm ơ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 nhóm trong suốt thời gian qua Những kiến thức mà thầy cô đã truyền đạt là nền tảng quan trọng để nhóm có thể hoàn thành đề tài này

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 cô đã tận tình hướng dẫn và tạo điều kiện tốt nhất cho nhóm hoàn thành đề tài này Những lời động viên, góp ý chân tình của cô là động lực quí báu

để nhóm vượt qua những khó khăn khi tìm hiểu và thực hiện đề tài Trong thời gian qua, nhóm tác giả đã cố gắng vận dụng những kiến thức nền tảng đã học, kết hợp học hỏi và tìm hiểu công nghệ mới để ứng dụng xây dựng đề tài môn học Tuy nhiên trong quá trình thực hiện, do kiến thức và kinh nghiệm còn nhiều hạn chế, khó tránh khỏi những thiếu sót Chính vì vậy, nhóm tác giả rất mong nhận được sự góp ý từ quí thầy cô để nhóm hoàn thiện thêm những kiến thức mà nhóm đã học tập, làm hành trang quí báu cho nhóm trong công việc sau này

Sau cùng, nhóm tác giả xin kính chúc quý thầy cô ở khoa Công nghệ phần mềm và cô Huỳnh Hồ Thị Mộng Trinh thật dồi dào sức khỏe, niềm tin để tiếp tục thực hiện sứ mệnh cao đẹp của mình là truyền đạt kiến thức cho thế hệ mai sau Xin chân thành cảm ơn quí thầy cô !

Nhóm tác giả

NHẬN XÉT (Của giáo viên hướng dẫn)

TỔNG QUAN BÁO CÁO TÊN ĐỀ TÀI: Xây dựng 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ử

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:

1 Lý do chọn đề tài

- Máy tính, laptop đang dần trở nên phổ biến trong cuộc sống với giá thành ngày càng có xu hướng giảm Hơn nữa, mức thu nhập của mọi người tăng cao, nên ai cũng có thể sở hữu một chiếc máy tính, laptop để phục vụ công việc của mình

- Hiện nay để tìm mua một laptop thì sẽ có rất nhiều sàn thương mại điện tử buôn bán với giá thành khác nhau Do đó người mua sẽ khá là mơ hồ trong việc lựa chọn điểm mua với giá thành hợp lý nhất

- Cũng đã từng là khách hàng loay hoay trong 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õ và mong muốn tìm kiếm được giải pháp để giải quyết được tình trạng đó Chúng em quyết định chọn đề tài này để giúp những người có nhu cầu mua laptop hoặc phụ kiện máy tính có thể xem xét giá cả sản phẩm trên tất cả sàn thương mại và lựa chọn mua với giá hợp lý nhất

Hiện trạng các trang web so sánh hiện nay:

+ Giao diện khó dùng cho những người mới tiếp xúc với thiết bị công nghệ

+ Thiếu một số tính năng cần thiết

+ Các tính năng quan trọng chưa thực sự nổi bật

+ Chưa cho thấy sự thay đổi giá thành sản phẩm

+ Màu sắc không thu hút

=> Với những vấn đề trên, chúng em quyết định lựa chọn đề tài xây dựng 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ử

để tiến hành nghiên cứu và xây dựng

2 Mục tiêu đề ra

- Xây dựng website giải quyết các vấn đề sau:

+ Có biểu đồ đường thể hiện tỉ lệ lên xuống của 1 sản phẩm trên nhiều sàn (3 sàn thương mại)

+ Xem biến động giá

+ Xem tháng giảm giá nhiều nhất

+ Tìm giá tốt nhất cho sản phẩm

+ Lọc sản phẩm

+ Nhận tin khuyến mãi

3 Phạm vi, quy mô

- Môi trường, platform: website

- Phạm vi chức năng:

● Biểu đồ đường thể hiện tỉ lệ lên xuống của 1 sản phẩm trên nhiều sàn (giới hạn số lượng sàn):

○ Có số liệu chi tiết

○ Hiển thị rõ sự lên xuống của giá sản phẩm trên 1 sàn thương mại theo từng tháng

○ Hiển thị giá của sản phẩm được bán trên nhiều sàn thương mại, (mỗi một sàn thương mại sẽ được thể hiện bằng 1 đường

vẽ màu khác nhau)

● Tìm giá tốt nhấ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 nhất tới cao nhất

● 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 mãi

○ Thông báo tự động khi có flash sale của 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ể hiện giá sản phẩm trong ngày (cách 3 tiếng cập nhật giá

4 Đối tượng sử dụng: Tất cả người dùng có nhu cầu muốn so sánh giá và tìm

mua laptop và phụ kiện máy tính

5 Phương pháp thực hiện:

- Phương pháp làm việc: Làm việc nhóm 2 thành viên thông qua cả 2 phương thức online và offline dưới sự hướng dẫn của 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 của đối tượng người dùng

+ Nghiên cứu tài liệu các công nghệ liên quan

+ Kiểm tra, tham khảo các website khác để tối ưu hóa trang web

6 Nền tảng công nghệ:

- Front-end: html, css, javascript, ReactJS

- Back-end: ASP.NET core

- Database: MySQL

7 Kết quả mong đợi:

- Hoàn thiện được website đáp ứng đầy đủ mục tiêu đề ra

- Trang web có thể thực hiện chính xác yêu cầu của khách hàng

- Trang web có khả năng tương tác với người dùng với mức độ ổn định

- Các chức năng của website hoạt động đúng đắn, chính xác, dễ sử dụng

8 Hướng phát triển:

- Trang blog

- Thêm ngôn ngữ tiếng Anh

- Liên kết đến các 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 hơn

- Tổng hợp voucher của các sàn thương mại điện tử

9 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 được lên kế hoạch triển khai như sau:

+ Giai đoạn 1 (5/9/2022 - 24/10/2022): Hoàn thiện được sơ bộ front -

end và chức năng cơ bản Giai đoạn này gồm 4 sprint:

+ Sprint 1 (5/9/2022 -> 12/9/2022): tìm hiểu công nghệ, khảo sát các trang web liên quan

+ Sprint 2 (14/9/2022 -> 16/9/2022): phân tích yêu cầu

+ Sprint 3 (17/9/2022 -> 24/9/2022): xây dựng CSDL, xử lý ngôn ngữ tự nhiên

+ Sprint 4 (25/9/2022 -> 24/10/2022): xây dựng website, xây dựng server, xây dựng một số chức năng cơ bản

+ Giai đoạn 2 (25/10/2022 - 25/12/2022): Tiếp tục hoàn thiện các

chức năng còn lại và triển khai viết báo cáo Giai đoạn này gồm 2 sprint:

+ Sprint 5 (25/10/2022 -> 21/12/20220: hoàn thiện các chức năng còn lại ở giai đoạn 1, tìm và sửa lỗi trong quá trình xây dựng chức năng

+ Sprint 6 (22/12/2022 -> 25/12/2022): Triển khai sản phẩm, viết báo cáo

+ Giai đoạn 3 (26/12/2022 - 31/12/2022) Kiểm tra lỗi và hoàn thiện sản phẩm Giai đoạn này gồm 2 sprint:

+ Sprint 7 (26/12/2022 -> 28/12/2022): Kiểm tra lại tổng quan sản phẩm và sửa lỗi

+ Sprint 8 (29/12/2022 -> 31/12/2022): kiểm tra file báo cáo, chỉnh sửa hoặc thay đổi nếu 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

MỤC LỤC

TỔNG QUAN VỀ ĐỀ TÀI 1

1.1 Mô tả bài toán và xác định yêu cầu 1

1.2 Khảo sát hiện trạng 2

Hiện trạng tổ chức 2

Hiện trạng tin học 2

1.3 Khảo sát một số trang web hiện có 3

Website websosanh.vn 3

Website sosanhgia.com 4

1.4 Mục tiêu đề tài 5

1.5 Đối tượng nghiên cứu 5

1.5.1 Lý Thuyết 5

1.5.2 Thực Tiễn 5

1.6 Các bước nghiên cứu 5

1.7 Bố cục đề tài 6

CƠ SỞ LÝ THUYẾT 6

2.1 ASP.NET core 6

2.2 MySQL 10 2.3 ReactJS 11 2.4 Javascript 12

PHÂN TÍCH ĐẶC TẢ YÊU CẦU 12

3.1 Usecase, đặc tả usecase 12

Sơ đồ usecase 12

Đặc tả usecase 13

3.2 Sequence diagram 22

Tìm kiếm sản phẩm 22

3.3 Activity diagram 23

3.3.1 Nhận ưu đãi khuyến mãi 23

3.4 Collaboration diagram 24

Sắp xếp danh sách sản phẩm 24

THIẾT KẾ KIẾN TRÚC 25

4.1 Kiến trúc tổng thể 25

4.2 Kiến trúc từng thành phần 26

Website (client) 26

MySQL 26

THIẾT KẾ DỮ LIỆU 27

5.1 Sơ đồ logic 27

5.2 Mô tả sơ đồ logic 27

THIẾT KẾ GIAO DIỆN 29

6.1 Sơ đồ các màn hình 29

6.2 Danh sách các màn hình 29

6.3 Mô tả các màn hình 29

Trang chủ 29

Trang tìm kiếm 30

Màn hình thông tin sản phẩm 32

PHÁT TRIỂN VÀ CÀI ĐẶT ỨNG DỤNG 33

7.1 Môi trường phát triển ứng dụng 33

7.2 Môi trường triển khai ứng dụng 34

7.3 Kết quả đánh giá 34

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 34

8.1 Kết luận 34

8.2 Kết quả đạt được 35

8.3 Điểm đặc sắc của đề tài 36

8.4 Hướng phát triển 36

TÀI LIỆU THAM KHẢO 36

BẢNG PHÂN CÔNG CÔNG VIỆC 37

TỔNG QUAN VỀ ĐỀ TÀI 1.1 Mô tả bài toán và xác định yêu cầu

Khi nhắc tới các sản phẩm hay thiết bị điện tử, chắc hẳn đã không còn quá xa lạ với mọi người trong thời đại 4.0 này Chúng ta có thể thấy rằng khắp mọi nơi trên thế giới, đã mọc lên muôn vàn cửa hàng bán các thiết bị điện tử, các website cho phép mua sản phẩm trực tuyến giao dịch xuyên quốc gia Ở Việt Nam cũng vậy, nhu cầu về các thiết bị công nghệ cũng không hề thấp, thế nhưng vấn đề ở chỗ, các website, sàn thương mại mọc lên như nấm, cùng 1 sản phẩm nhưng lại có mức giá chênh lệch khác nhau, điều này khiến cho người dùng phân vân về việc lựa chọn sàn thương mại nào với mức giá phù hợp nhất

Nhận thấy nhu cầu về mua các sản phẩm công nghệ ngày càng lớn, tuy nhiên người dùng vẫn còn nhiều khuất mắt về giá sản phẩm trên các sàn thương mại hiện có

và phân vân về giá sản phẩm rẻ nhất, cho nên nhóm chúng em đã quyết đị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 được ThS Huỳnh Hồ Thị Mộng Trinh nắm vai trò giảng viên hướng dẫn)

Nền tảng dễ dàng tiếp cận người dùng và tối ưu hoá trên nhiều thiết bị nhất vẫn

là Website – khi mà cả điện thoại và máy tính đều đồng bộ được mà không tiêu tốn bao nhiêu tài nguyên của máy, nhóm chúng em quyết định triển khai ứng dụng trên

môi trường web – xây dựng một website giá trên các sàn thương mại mang tên là TopSoSanh

Các vấn đề cần phải xử lý trong website mà đề tài đặt ra là:

STT Tên yêu cầu Khía cạnh

6 Điều hướng đến các trang sản phẩm trên sàn thương mại User

Ngày nay, cùng với sự phát triển của nền công nghiệp 4.0, các trang web điện

tử đã không còn quá xa lạ, hơn thế nữa các trang website còn dễ dàng đồng bộ trên cả máy tính lẫn điện thoại giúp người dùng thuận tiện và thoải mái sử dụng, chỉ cần có

internet thì người dùng có thể xem chi tiết các sản phẩm, thông số cũng như phản hồi

mà không cần ra tận cửa hàng, show room Nắm bắt được xu thế thị trường,

TopSoSanh được phát triển trên nền tảng website dễ dàng cho việc xem đánh giá, so

sánh giá sản phẩm

1.3 Khảo sát một số trang web hiện có

Website websosanh.vn

Tổng quan

Trang web websosanh.vn giới thiệu các sản phẩm công nghệ, thiết bị điện tử

đến nhiều đối tượng khách hàng, sử dụng giao diện thuần html, css

Các chức năng chính

• Xem chi tiết sản phẩm

• Lấy mã giảm giá từ các sàn thương mại

• Giao diện đơn giản, rối mắt

• Sản phẩm chưa có tính chuyên nghiệp

• Cách phối màu chưa làm nổi bật lên chủ thể

• Chức năng so sánh giá chưa thực sự nổi bật

Website sosanhgia.com

Tổng quan

Trang web sosanhgia.com hiển thị thông tin sản phẩm, so sánh giá của nhiều

mặt hàng sản phẩm từ đồ gia dụng, thời trang đến các thiết bị công nghệ hướng đến

nhiều đối tượng khách hàng, sử dụng giao diện html, css cơ bản để xây dựng

Hạn chế

• Giao diện quá đơn giản, chưa đẹp, tương đối xấu

• Lựa chọn màu sắc tối giản, không có đặc sắc

• Hiệu ứng hover chưa làm nổi bật lên chủ thể

• Chức năng so sánh giá chưa thực sự nổi bật

• Chưa có chức năng thông báo ưu đãi

1.4 Mục tiêu đề tài

Mục tiêu đề tài là nghiên cứu các thuật toán, công nghệ và thực hiện các khảo sát về hiện trạng, về nhu cầu của người dùng từ đó đưa ra giải pháp giúp giải quyết các vấn đề mà đề tài đặt ra nhầm cải thiện, tạo nên một website so sánh giá các sản phẩm công nghệ hoàn chỉnh – tối ưu hoá về mọi mặt, mang lại một sản phẩm chất lượng

1.5 Đối tượng nghiên cứu

1.5.1 Lý Thuyết

1 Nghiên cứu lập trình web

2 Nghiên cứu ngôn ngữ lập trình Javascript

3 Nghiên cứu framework front-end ReactJS

4 Nghiên cứu MySQL

1.5.2 Thực Tiễn

1 Xây dựng ứng dụng gồm client, server

2 Xây dựng website bằng tiếng Việt

3 Xây dựng đồ thị bằng dữ liệu có sẵn

4 Lấy thông tin, dữ liệu, giá trên các sàn thương mại điện tử

5 Tự động cập nhật giá sản phẩm sau một thời gian cụ thể

6 Tự động gửi mail khi có ưu đãi khuyến mãi

1.6 Các bước nghiên cứu

• Phân tích yêu cầu

• Lựa chọn công nghệ

• Nghiên cứu cơ sở lý thuyết dựa trên công nghệ đã chọn

• Áp dụng lý thuyết vào xây dựng ứng dụng thực tiễn

• Kiểm tra, tham khảo các ứng dụng khác để tối ưu hóa ứng dụng

1 Giới thiệu

Trước khi xuất hiện ASP.NET core, khi nhắc tới NET chúng ta thường

nghĩ đến Mã Nguồn đóng, Only Window, Build with Visual Studio Nhưng sau

khi cho ra mắt ASP.NET CORE 1, Microsoft đã thay đổi hoàn toàn suy nghĩ

của chúng ta:

• Open source Microsoft đã open source NET và public trên github để

thu hút các lập trình viên cũng như tận dùng sức mạnh của cộng đồng

• Build for Windows, Mac, or Linux: có lẽ khoảng vài năm trước ít ai

nghĩ chuyện này có thể xảy ra nhưng bây giờ, Microsoft đã rất thân thiện với linux và NET run with linux chính là một minh chứng rõ nét

• Visual Studio Code không còn gắn chặt với Visual studio, ASP.NET CORE bây giờ có thể viết với Visual studio code (free) trên cả Window, Linux và Mac

2 ASP.NET core là gì ?

ASP.NET Core là một nền tảng mã nguồn mở, cross-platform

framework cho việc xây dựng và kết nối các ứng dụng web hiện đại chẳng hạn như ứng dụng web, Internet of Thing, Mobile Backend - Web API

ASP.NET Core cung cấp một kiến trúc để tối ưu hóa việc xây dựng các

ứng dụng đám mây (microsoft azure) hoặc các ứng dụng độc lập Bạn có thế phát triển ứng dụng ASP.NET Core đa nên tảng(Window, Mac, Linux), với mã nguồn mở tại Github

3 Cách triển khai 1 project ASP.Net core

1 Tạo web app Mở Visual studion chọn new Project hoặc file -> new -> Project

2 Chọn ASP.NET Core Web Application (.NET Core) và nhập tên cho project -> click OK

3 Chọn Web application, bỏ check Host in the cloud và click OK

4 Visual studio sẽ sinh cho bạn một project với ASP.NET MVC, NET Core và sử dụng theme default Ấn F5 để build project

4 MVC trong ASP.NET core

Model-View-Controller (MVC) là mô hình kiến trúc xây dựng ứng dụng tách ra làm ba phần chính riêng biệt Model, View và Controller MVC giúp bạn xây dựng ứng dụng dễ dàng bảo trì, cập nhật hơn các ứng dụng truyền thống

• Model: là các class đại diện cho dữ liệu và logic để thực thi nghiệp vụ của dữ liệu đó Thông thường, mỗi model sẽ đại diện cho một table trong database

• View: là thành phần hiển thị giao diện người dùng (UI) của ứng dụng Nhìn chung, view sẽ hiển thị dữ liệu từ model

• Controller: Có nhiệm vụ xử lý các request từ trình duyệt (Get, Post, PUT ) và sau đó trả về các data tương ứng cho view

MVC giúp bạn tách biệt các phần của ứng dụng(input logic, business logic,

và UI logic) và cung cấp kết nối giữa các lớp này Sự tách biệt này giúp bạn dễ dàng quản lý những ứng dụng phức tạp vì nó cho phép bạn làm việc trên một phần và không ảnh hưởng đến những phần khác

2.2 MySQL

MySQL là một hệ quản trị cơ sở dữ liệu có mã nguồn mở phổ biến nhất thế giới

và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng Bởi lẽ đây là một hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích

rất mạnh Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên internet Người dùng có thể tải về MySQL miễn phí từ trang chủ

MySQLcó nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS,

2.3 ReactJS

ReactJS là một thư viện JavaScript mã nguồn mở được thiết kế bởi Facebook để

tạo ra những ứng dụng web hấp dẫn, nhanh và hiệu quả với mã hóa tối thiểu Mục

đích cốt lõi của ReactJS không chỉ khiến cho trang web phải thật mượt mà còn phải

nhanh, khả năng mở rộng cao và đơn giản

Sức mạnh của nó xuất phát từ việc tập trung vào các thành phần riêng lẻ Chính vì

vậy, thay vì làm việc trên toàn bộ ứng dụng web, ReactJS cho phép một developer có

thể phá vỡ giao diện người dùng phức tạp thành các thành phần đơn giản hơn

2.4 Javascript

Javascript được phát tiển bởi Brendan Eich tại hãng truyền thông Netscape với tên

đầu tiên là Mocha Sau đó, đổi tên thành LiveScript và cuối cùng là JavaSript được sử dụng phổ biến tới thời điểm bây giờ

JavaScript là ngôn ngữ lập trình website phổ biến hiện nay, nó được tích hợp và nhúng vào HTML giúp website trở nên sống động hơn JavaScript đóng vai trò như là

một phần của trang web, thực thi cho phép Client-side script từ phía người dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động

PHÂN TÍCH ĐẶC TẢ YÊU CẦU 3.1 Usecase, đặc tả usecase

Sơ đồ usecase