Với lòng biết ơn sâu sắc và tình cảm chân thành cho phép em gửi lời cảm ơn chân thành đến với 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
CƠ SỞ LÝ THUYẾT
TELEGRAM BOT
2.1 KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ
2.2 MÔ TẢ BÀI TOÁN VÀ XÁC ĐỊNH YÊU CẦU
2.3 MÔ HÌNH HÓA YÊU CẦU
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU
4.2 KIẾN TRÚC CỦA CHƯƠNG TRÌNH
4.3 CÁC CHỨC NĂNG CỦA WEBSITE ĐÃ ĐƯỢC CÀI ĐẶT THÀNH CÔNG
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC
4 DANH MỤC TÀI LIỆU THAM KHẢO
Gặp giáo viên hướng dẫn để đề xuất đề tài Chuẩn bị môi trường làm việc (cài đặt công cụ, tạo dự án, v.v.)
Khảo sát các website bán laptop hiện nay Tìm hiểu Firebase storage
Hoàn thiện các chức năng: Thêm ảnh 360 độ cho sản phẩm, thêm mục xem thông tin chi tiết cho sản phẩm
Cập nhật lại lược đồ ER, lược đồ quan hệ, cơ sở dữ liệu mức vật lý với việc bổ sung thêm bảng wishlist
Hoàn thiện chức năng thêm sản phẩm vào danh sách các sản phẩm yêu thích
Tìm hiểu web speech API và chatGPT Hoàn thiện chức năng tìm kiếm bằng giọng nói và chatGPT
Tìm hiểu Firebase realtime database Hoàn thiện chức năng chat realtime giữa admin với customer
Hoàn thiện chức năng quản lý user
Tìm hiểu Google OAuth Hoàn thiện chức năng đăng nhập bằng tài khoản Google
Bổ sung thêm chức năng filter và sort sản phẩm
Viết báo cáo Kiểm thử và sửa lỗi chương trình
Tp Hồ Chí Minh, ngày tháng năm 2023
Người viết đề cương Ý kiến của giáo viên hướng dẫn
(ký và ghi rõ họ tên)
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
2 MỤC ĐÍCH VÀ NHIỆM VỤ CỦA ĐỀ TÀI 2
3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 2
5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 3
6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 3
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 5
CHƯƠNG 2: KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ VÀ MÔ HÌNH HÓA YÊU CẦU 39
2.1 KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ 39
2.2 MÔ TẢ BÀI TOÁN VÀ XÁC ĐỊNH YÊU CẦU 43
2.3 MÔ HÌNH HÓA YÊU CẦU 45
CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE BÁN
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 78
CHƯƠNG 4: TỔ CHỨC VÀ CÀI ĐẶT CHƯƠNG TRÌNH 98
4.2 KIẾN TRÚC CỦA CHƯƠNG TRÌNH 99
4.3 CÁC CHỨC NĂNG CỦA WEBSITE ĐÃ ĐƯỢC CÀI ĐẶT THÀNH CÔNG 105
CHƯƠNG 5: KIỂM THỬ PHẦN MỀM 112
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 120
DANH MỤC TÀI LIỆU THAM KHẢO 122
Hình 1-1: Kiến trúc Spring Boot [2] 6
Hình 1-2: Khái niệm của Json Web Token [3] 8
Hình 1-3: Ví dụ sơ đồ hoạt động Json Web Token [3] 8
Hình 1-4: Thành phần trong Json Web Token [3] 9
Hình 1-6: Thêm Dependencies cho Spring Project [2] 12
Hình 1-7: Thêm dependency vào file pom 13
Hình 1-9: Lỗi giới hạn mail 14
Hình 1-10: Giao diện bảo mật của gmail 15
Hình 1-11: Bật xác minh 2 bước và chọn mật khẩu ứng dụng 16
Hình 1-12: Tạo mật khẩu ứng dụng 16
Hình 1-13: Mật khẩu được tạo thành công 17
Hình 1-14: Cấu hình port email ở back end 17
Hình 1-16: DOM chỉ render lại nơi bị thay đổi [4] 19
Hình 1-17: Các state dùng chung được lưu vào Redux store [5] 20
Hình 1-19: Cách thức hoạt động của ResfulAPI [7] 24
Hình 1-20: Giao diện chat GPT 25
Hình 1-21: Giao diện tạo API key trên OpenAI [8] 26
Hình 1-22: Lưu API key vào biến môi trường 26
Hình 1-23: Những component cho chat box 26
Hình 1-24: Gọi đến API của OpenAI 27
Hình 1-25: Tạo project trên Firebase thành công [9] 27
Hình 1-27: Ví dụ function đọc dữ liệu chat trên database 29
Hình 1-29: Gọi function onValue trên node account user id 29
Hình 1-30: Đăng ký tài khoản business trên Paypal 30
Hình 1-31: Điền thông tin để tạo tài khoản Paypal business 31
Hình 1-32: Paypal gợi ý xác thực khi đăng ký thành công 31
Hình 1-33: Điền các thông tin cá nhân để xác thực tài khoản Paypal 32
Hình 1-34: Điền các thông tin doanh nghiệp để xác thực tài khoản Paypal 33
Hình 1-35: Vào môi trường developer của Paypal 34
Hình 1-38: Client ID và Secret key được sinh ra [10] 35
Hình 1-39: Lưu key vào source code 35
Hình 2-1: Giao diện trang chủ ViettelStore 39
Hình 2-2: Giao diện trang chi tiết sản phẩm ViettelStore 40
Hình 2-3: Giao diện trang chủ NguyenKim 40
Hình 2-4: Giao diện trang sản phẩm NguyenKim 41
Hình 2-5: Giao diện trang chủ PhucAnh 41
Hình 2-6: Giao diện trang sản phẩm PhucAnh 42
Hình 2-7: Giao diện trang chủ thegioididong 42
Hình 2-8: Giao diện trang sản phẩm thegioididong 43
Hình 2-9: Lược đồ Usecase tổng quát 45
Hình 2-10: Sơ đồ use case chi tiết quản trị viên 46
Hình 2-11: Sơ đồ use case chi tiết cho khách hàng 47
Hình 2-12: Sơ đồ use case chi tiết cho khách 48
Hình 2-13: Lược đồ tuần tự đăng ký tài khoản 65
Hình 2-14: Lược đồ tuần tự xem chi tiết sản phẩm 65
Hình 2-15: Lược đồ tuần tự tìm kiếm sản phẩm 66
Hình 2-16: Lược đồ tuần tự đăng nhập 66
Hình 2-17: Lược đồ tuần tự đăng xuất 67
Hình 2-18: Lược đồ tuần tự xem tình trạng đơn hàng 67
Hình 2-19: Lược đồ tuần tự đánh giá sản phẩm 68
Hình 2-20: Lược đồ tuần tự đặt mua sản phẩm 68
Hình 2-21: Lược đồ tuần tự cập nhập giỏ hàng 69
Hình 2-22: Lược đồ tuần tự xóa giỏ hàng 69
Hình 2-23: Lược đồ tuần tự hủy đơn hàng 70
Hình 2-24: Lược đồ tuần tự thêm sản phẩm 70
Hình 2-25: Lược đồ tuần tự thêm nhà cung cấp 71
Hình 2-26: Lược đồ tuần tự thêm tin tức 71
Hình 2-27: Lược đồ tuần tự hủy đơn hàng 72
Hình 2-28: Lược đồ tuần tự xác nhận đơn hàng 72
Hình 2-29: Lược đồ tuần tự duyệt đơn hàng 73
Hình 2-31: Lược đồ tuần tự thanh toán Paypal 73
Hình 2-33: Lược đồ tuần tự đổi mật khẩu 74
Hình 2-34: Lược đồ tuần tự cập nhật thông tin tài khoản 74
Hình 2-35: Lược đồ tuần tự quên mật khẩu 75
Hình 2-36: Lược đồ tuần tự login Google 75
Hình 2-37: Lược đồ tuần tự thêm sản phẩm yêu thích 76
Hình 3-1: Lược đồ ER biểu diễn các thành phần dữ liệu của hệ thống 78
Hình 3-2: Cơ sở dữ liệu mức vật lý 87
Hình 3-4: Wireframe trang sản phẩm 88
Hình 3-5: Wireframe trang chi tiết sản phẩm 89
Hình 3-6: Wireframe trang giỏ hàng 89
Hình 3-7: Wireframe trang thông tin đặt hàng 90
Hình 3-8: Wireframe trang liên hệ 90
Hình 3-9: Wireframe trang tin tức 91
Hình 3-10: Wireframe trang chi tiết tin tức 91
Hình 3-11: Wireframe trang chủ admin 92
Hình 3-12: Wireframe trang đơn hàng mới 92
Hình 3-13: Wireframe trang đơn hàng đã duyệt 93
Hình 3-14: Wireframe trang đơn hàng đang giao 93
Hình 3-15: Wireframe trang đơn hàng đã giao 94
Hình 3-16: Wireframe trang đơn hàng đã hủy 94
Hình 3-17: Wireframe trang quản lý người dùng 95
Hình 3-18: Wireframe trang chỉnh sửa người dùng 95
Hình 3-19: Wireframe trang quản lý sản phẩm 96
Hình 3-20: Wireframe trang quản lý nhà cung cấp 96
Hình 3-21: Wireframe trang quản lý tin tức 97
Hình 4-1: Kiến trúc tổ chức source backend 99
Hình 4-2: Kiến trúc tổ chức source backend 99
Hình 4-3: Kiến trúc tổ chức source front end admin 101
Hình 4-4: Kiến trúc tổ chức thư mục public front end admin 102
Hình 4-5: Kiến trúc tổ chức thư mục src front end admin 103
Hình 4-6: Kiến trúc tổ chức source front end customer 103
Hình 4-7: Kiến trúc tổ chức thư mục public front end customer 104
Hình 4-8: Kiến trúc tổ chức thư mục src front end customer 105
Hình 4-9: Giao diện trang chủ customer 107
Hình 4-10: Giao diện Đăng nhập 107
Hình 4-11: Giao diện trang danh sách sản phẩm 108
Hình 4-12: Giao diện trang giỏ hàng 109
Hình 4-13: Giao diện trang đặt hàng 109
Hình 4-14: Giao diện dashboard của admin 110
Hình 4-15: Giao diện quản lý đơn hàng 110
Hình 4-16: Giao diện quản lý sản phẩm 110
Hình 4-17: Giao diện quản lý nhà cung cấp 111
Hình 4-18: Giao diện quản lý tin tức 111
Bảng 2-1: Mô tả Usecase đăng ký tài khoản 48
Bảng 2-2: Mô tả Usecase xem chi tiết sản phẩm 49
Bảng 2-3: Mô tả Usecase tìm kiếm sản phẩm 49
Bảng 2-4: Mô tả Usecase đăng nhập 50
Bảng 2-5: Mô tả Usecase xem tình trạng đơn hàng 51
Bảng 2-6: Mô tả Usecase đánh giá sản phẩm 52
Bảng 2-7: Mô tả Usecase đặt mua sản phẩm 53
Bảng 2-8: Mô tả Usecase cập nhật giỏ hàng 54
Bảng 2-9: Mô tả Usecase xóa giỏ hàng 55
Bảng 2-10: Mô tả Usecase hủy đơn hàng (Khách hàng) 56
Bảng 2-11: Mô tả Usecase thêm sản phẩm 56
Bảng 2-12: Mô tả Usecase thêm nhà cung cấp 58
Bảng 2-13: Mô tả Usecase thêm tin tức 59
Bảng 2-14: Mô tả Usecase hủy đơn hàng 59
Bảng 2-15: Mô tả Usecase duyệt đơn hàng 60
Bảng 2-16: Mô tả Usecase xác nhận đơn hàng đã giao 61
Bảng 2-17: Mô tả Usecase thống kê 62
Bảng 2-18: Mô tả Usecase thanh toán Paypal 62
Bảng 2-19: Mô tả Usecase quản lý User 63
Bảng 3-1: Chi tiết dữ liệu bảng NEW 79
Bảng 3-2: Chi tiết dữ liệu bảng SUPPLIER 80
Bảng 3-3: Chi tiết dữ liệu bảng PRODUCT 80
Bảng 3-4: Chi tiết dữ liệu bảng ACCOUNT 82
Bảng 3-5: Chi tiết dữ liệu bảng CART 84
Bảng 3-6: Chi tiết dữ liệu bảng WISHLIST 84
Bảng 3-7: Chi tiết dữ liệu bảng ORDERS 85
Bảng 3-8: Chi tiết dữ liệu bảng ORDER_DETAIL 85
Bảng 3-9: Chi tiết dữ liệu bảng REVIEWS 86
Bảng 5-1: Bảng thực hiện kiểm thử 113
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Bước vào thế kỷ 21, sự phát triển mạnh mẽ của khoa học công nghệ đã định hình một thế giới mới, với Công nghệ Thông tin đóng vai trò dẫn đầu và góp phần quan trọng trong sự phát triển chung Trong những năm gần đây, vai trò của hệ thống thông tin trong doanh nghiệp ngày càng trở nên quan trọng và mạnh mẽ Như một phần của lĩnh vực Công nghệ thông tin, Công nghệ web đang phát triển và lan rộng nhanh chóng nhờ vào những lợi ích to lớn mà nó mang lại cho cộng đồng Và đó là lý do chúng em đã chọn đề tài "Xây dựng website bán laptop", nhằm tìm hiểu và đề xuất những giải pháp tối ưu để hỗ trợ các doanh nghiệp cửa hàng muốn kinh doanh laptop và các sản phẩm máy tính xách tay Bằng cách sử dụng nền tảng công nghệ web và thương mại điện tử, việc bán laptop thông qua website sẽ mang lại nhiều lợi ích và thuận lợi cho các công ty sản xuất laptop nói chung và các cửa hàng phân phối nói riêng Điều này bao gồm việc tăng độ nổi tiếng và tên tuổi của các công ty và cửa hàng trên môi trường mạng toàn cầu (như MSI, ACER, DELL, LENOVO ), mở cửa 24/24 cho quá trình kinh doanh, giảm chi phí quảng cáo truyền thống như tiếp thị, quảng cáo dễ dàng qua các nền tảng đa phương tiện, và dễ dàng giao tiếp và trao đổi thông tin với khách hàng
Website bán laptop giúp doanh nghiệp cung cấp cho khách hàng các lựa chọn linh hoạt và tiện lợi trong việc tìm mua sản phẩm Khách hàng có thể dễ dàng tìm hiểu và xem thông tin chi tiết về sản phẩm, từ đó lựa chọn những chiếc laptop với thông số kỹ thuật phù hợp và giá cả phù hợp với khả năng tài chính của mình Đối với các hãng sản xuất và cửa hàng đại lý, website thương mại bán laptop cũng mang lại tiện ích trong việc cập nhật và quản lý thông tin cho website, và dễ dàng tương tác với khách hàng
Nhóm chúng em mong muốn đóng góp vào sự phát triển và các lợi ích đã đề cập bằng cách áp dụng kiến thức đã học vào thực tế và xây dựng một website bán laptop với đầy đủ các chức năng để đáp ứng nhu cầu sử dụng của người dùng Đó là lý do chính mà nhóm chúng em quyết định thực hiện đề tài "Tìm hiểu công nghệ Spring Boot, React
JS và xây dựng ứng dụng Website bán laptop"
2 MỤC ĐÍCH VÀ NHIỆM VỤ CỦA ĐỀ TÀI
Mục đích của nhóm khi thực hiện đề tài:
Rèn luyện kỹ năng tổng hợp các kiến thức viết luận văn
Rèn luyện tính tự chủ và tinh thần làm việc nhóm
Có được sản phẩm đầu ra là website bán laptop với các chức năng cơ bản
Có hiểu biết cơ bản về các công nghệ Spring Boot, ReactJs ,MySQL
Mục đích của đề tài:
Tiếp cận khách hàng mới và tăng chuyển đổi thành khách hàng tiềm năng
Cung cấp cho khách hàng cơ hội mua hàng và sử dụng dịch vụ với sự trợ giúp của hệ thống thanh toán online mà không cần rời khỏi nhà
Cung cấp các thông tin hoặc thông báo cho khách hàng, đối tác, nhân viên về các hoạt động của công ty và phạm vi dịch vụ , sản phẩm được cung cấp
Nhiệm vụ của đề tài:
Nghiên cứu các công nghệ sử dụng trong đề tài như Spring Boot, ReactJs
Nghiên cứu tổng quan, ưu điểm và nhược điểm của các website bán laptop tương tự trên Internet
Phân tích, thiết kế hệ thống website bán laptop
Cài đặt website bán laptop với các chức năng cơ bản như: Xác thực tài khoản người dùng qua mail, quản lý giỏ hàng, tìm kiếm sản phẩm, xem sản phẩm mới nhất, nổi bật nhất và sản phẩm bán chạy, xem chi tiết sản phẩm và các sản phẩm liên quan
3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU Đối tượng nghiên cứu:
Trong phạm vi đề tài này, đối tượng nghiên cứu tập trung vào nhu cầu sử dụng của các cửa hàng bán laptop, linh kiện và các cửa hàng nhỏ tương tự Mục tiêu là giúp các tổ chức này quản lý sản phẩm một cách dễ dàng và hiệu quả, cũng như tạo điều kiện cho họ tiếp cận khách hàng một cách thuận tiện Đồng thời, hệ thống sẽ giúp cửa
3 hàng thông báo các chương trình khuyến mãi đến khách hàng một cách nhanh chóng mà không cần phải gặp gỡ trực tiếp để quảng cáo
Nghiên cứu tập trung vào việc xây dựng hệ thống các RESTful API và sử dụng Spring Boot để hỗ trợ việc truy xuất dữ liệu một cách chính xác và nhanh chóng nhất
Sử dụng cơ sở dữ liệu MySQL để lưu trữ dữ liệu của cửa hàng MySQL là một hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, hoạt động trên nhiều hệ điều hành và cung cấp một loạt các hàm tiện ích mạnh mẽ MySQL có khả năng mở rộng và xử lý lượng dữ liệu lớn nếu cần thiết
Về phần giao diện người dùng, nhóm nghiên cứu sử dụng ReactJS và các thư viện hỗ trợ để xây dựng và xử lý giao diện cho người dùng cuối ReactJS tạo ra một DOM ảo cho riêng nó, nơi các thành phần thực sự tồn tại Điều này giúp cải thiện hiệu suất ReactJS cũng tính toán những thay đổi cần cập nhật lên DOM và chỉ thực hiện những thay đổi đó, giúp tránh những thao tác không cần thiết trên DOM và giảm thiểu chi phí xử lý
Nghiên cứu, đọc hiểu tài liệu liên quan đến các công nghệ sử dụng trên sách báo và các nguồn Google , Youtube, GitHub, ChatGPT
Khảo sát các website bán laptop thực tế
Tham khảo ý kiến đóng góp của giáo viên hướng dẫn
Thảo luận làm việc nhóm
5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
Xây dựng được một website bán laptop có những chức năng cơ bản của một trang thương mại điện tử
6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Việc xây dựng website này đã áp dụng thành tựu của công nghệ thông tin vào lĩnh vực thương mại, mang lại nhiều lợi ích và tiện ích cho các hãng sản xuất và cửa hàng
4 Website này cung cấp cho khách hàng thông tin chi tiết và chính xác về các sản phẩm, giúp họ dễ dàng tiếp cận và tìm hiểu về các sản phẩm laptop
Một trong những ưu điểm quan trọng của website này là đảm bảo an ninh thông tin cá nhân của khách hàng và cho phép họ mua hàng trực tuyến mà không cần phải đến cửa hàng trực tiếp Đồng thời, website này cũng giúp các hãng sản xuất và cửa hàng phân phối dễ dàng quảng bá hình ảnh của mình và tiếp cận khách hàng thông qua nhiều phương tiện và nền tảng khác nhau
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 SPRING BOOT FRAMEWORK
Spring Boot là một phần mở rộng của Spring Framework, được thiết kế nhằm giúp các lập trình viên loại bỏ bước cấu hình phức tạp mà Spring yêu cầu Nó được phát triển bằng ngôn ngữ Java và thuộc hệ sinh thái của Spring Framework
1.1.2 Lịch sử phát triển Spring Boot?
Phiên bản đầu tiên của Spring Boot, phiên bản 1.0.0, ra đời vào tháng 10 năm 2012 để đáp ứng yêu cầu tính năng trong Spring jira Từ đó, Spring Boot đã trải qua một quá trình phát triển liên tục với sự cải tiến và phát hành hàng loạt các phiên bản mới, mang lại nhiều lợi ích hữu ích cho người dùng
Hiện tại, phiên bản cao nhất của Spring Boot là Spring Boot 2.6.6, được phát hành vào ngày 04 tháng 2022
1.1.3 Tại sao lại sử dụng Spring Boot?
Spring Boot nên được sử dụng vì:
- Spring Boot sử dụng phương pháp Dependency Injection, giúp quản lý các phụ thuộc giữa các thành phần trong ứng dụng một cách dễ dàng và linh hoạt
KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ VÀ MÔ HÌNH HÓA YÊU CẦU
MÔ HÌNH HÓA YÊU CẦU
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU
4.2 KIẾN TRÚC CỦA CHƯƠNG TRÌNH
4.3 CÁC CHỨC NĂNG CỦA WEBSITE ĐÃ ĐƯỢC CÀI ĐẶT THÀNH CÔNG
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC
4 DANH MỤC TÀI LIỆU THAM KHẢO
Gặp giáo viên hướng dẫn để đề xuất đề tài Chuẩn bị môi trường làm việc (cài đặt công cụ, tạo dự án, v.v.)
Khảo sát các website bán laptop hiện nay Tìm hiểu Firebase storage
Hoàn thiện các chức năng: Thêm ảnh 360 độ cho sản phẩm, thêm mục xem thông tin chi tiết cho sản phẩm
Cập nhật lại lược đồ ER, lược đồ quan hệ, cơ sở dữ liệu mức vật lý với việc bổ sung thêm bảng wishlist
Hoàn thiện chức năng thêm sản phẩm vào danh sách các sản phẩm yêu thích
Tìm hiểu web speech API và chatGPT Hoàn thiện chức năng tìm kiếm bằng giọng nói và chatGPT
Tìm hiểu Firebase realtime database Hoàn thiện chức năng chat realtime giữa admin với customer
Hoàn thiện chức năng quản lý user
Tìm hiểu Google OAuth Hoàn thiện chức năng đăng nhập bằng tài khoản Google
Bổ sung thêm chức năng filter và sort sản phẩm
Viết báo cáo Kiểm thử và sửa lỗi chương trình
Tp Hồ Chí Minh, ngày tháng năm 2023
Người viết đề cương Ý kiến của giáo viên hướng dẫn
(ký và ghi rõ họ tên)
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
2 MỤC ĐÍCH VÀ NHIỆM VỤ CỦA ĐỀ TÀI 2
3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 2
5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 3
6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 3
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 5
CHƯƠNG 2: KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ VÀ MÔ HÌNH HÓA YÊU CẦU 39
2.1 KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ 39
2.2 MÔ TẢ BÀI TOÁN VÀ XÁC ĐỊNH YÊU CẦU 43
2.3 MÔ HÌNH HÓA YÊU CẦU 45
CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE BÁN
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 78
CHƯƠNG 4: TỔ CHỨC VÀ CÀI ĐẶT CHƯƠNG TRÌNH 98
4.2 KIẾN TRÚC CỦA CHƯƠNG TRÌNH 99
4.3 CÁC CHỨC NĂNG CỦA WEBSITE ĐÃ ĐƯỢC CÀI ĐẶT THÀNH CÔNG 105
CHƯƠNG 5: KIỂM THỬ PHẦN MỀM 112
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 120
DANH MỤC TÀI LIỆU THAM KHẢO 122
Hình 1-1: Kiến trúc Spring Boot [2] 6
Hình 1-2: Khái niệm của Json Web Token [3] 8
Hình 1-3: Ví dụ sơ đồ hoạt động Json Web Token [3] 8
Hình 1-4: Thành phần trong Json Web Token [3] 9
Hình 1-6: Thêm Dependencies cho Spring Project [2] 12
Hình 1-7: Thêm dependency vào file pom 13
Hình 1-9: Lỗi giới hạn mail 14
Hình 1-10: Giao diện bảo mật của gmail 15
Hình 1-11: Bật xác minh 2 bước và chọn mật khẩu ứng dụng 16
Hình 1-12: Tạo mật khẩu ứng dụng 16
Hình 1-13: Mật khẩu được tạo thành công 17
Hình 1-14: Cấu hình port email ở back end 17
Hình 1-16: DOM chỉ render lại nơi bị thay đổi [4] 19
Hình 1-17: Các state dùng chung được lưu vào Redux store [5] 20
Hình 1-19: Cách thức hoạt động của ResfulAPI [7] 24
Hình 1-20: Giao diện chat GPT 25
Hình 1-21: Giao diện tạo API key trên OpenAI [8] 26
Hình 1-22: Lưu API key vào biến môi trường 26
Hình 1-23: Những component cho chat box 26
Hình 1-24: Gọi đến API của OpenAI 27
Hình 1-25: Tạo project trên Firebase thành công [9] 27
Hình 1-27: Ví dụ function đọc dữ liệu chat trên database 29
Hình 1-29: Gọi function onValue trên node account user id 29
Hình 1-30: Đăng ký tài khoản business trên Paypal 30
Hình 1-31: Điền thông tin để tạo tài khoản Paypal business 31
Hình 1-32: Paypal gợi ý xác thực khi đăng ký thành công 31
Hình 1-33: Điền các thông tin cá nhân để xác thực tài khoản Paypal 32
Hình 1-34: Điền các thông tin doanh nghiệp để xác thực tài khoản Paypal 33
Hình 1-35: Vào môi trường developer của Paypal 34
Hình 1-38: Client ID và Secret key được sinh ra [10] 35
Hình 1-39: Lưu key vào source code 35
Hình 2-1: Giao diện trang chủ ViettelStore 39
Hình 2-2: Giao diện trang chi tiết sản phẩm ViettelStore 40
Hình 2-3: Giao diện trang chủ NguyenKim 40
Hình 2-4: Giao diện trang sản phẩm NguyenKim 41
Hình 2-5: Giao diện trang chủ PhucAnh 41
Hình 2-6: Giao diện trang sản phẩm PhucAnh 42
Hình 2-7: Giao diện trang chủ thegioididong 42
Hình 2-8: Giao diện trang sản phẩm thegioididong 43
Hình 2-9: Lược đồ Usecase tổng quát 45
Hình 2-10: Sơ đồ use case chi tiết quản trị viên 46
Hình 2-11: Sơ đồ use case chi tiết cho khách hàng 47
Hình 2-12: Sơ đồ use case chi tiết cho khách 48
Hình 2-13: Lược đồ tuần tự đăng ký tài khoản 65
Hình 2-14: Lược đồ tuần tự xem chi tiết sản phẩm 65
Hình 2-15: Lược đồ tuần tự tìm kiếm sản phẩm 66
Hình 2-16: Lược đồ tuần tự đăng nhập 66
Hình 2-17: Lược đồ tuần tự đăng xuất 67
Hình 2-18: Lược đồ tuần tự xem tình trạng đơn hàng 67
Hình 2-19: Lược đồ tuần tự đánh giá sản phẩm 68
Hình 2-20: Lược đồ tuần tự đặt mua sản phẩm 68
Hình 2-21: Lược đồ tuần tự cập nhập giỏ hàng 69
Hình 2-22: Lược đồ tuần tự xóa giỏ hàng 69
Hình 2-23: Lược đồ tuần tự hủy đơn hàng 70
Hình 2-24: Lược đồ tuần tự thêm sản phẩm 70
Hình 2-25: Lược đồ tuần tự thêm nhà cung cấp 71
Hình 2-26: Lược đồ tuần tự thêm tin tức 71
Hình 2-27: Lược đồ tuần tự hủy đơn hàng 72
Hình 2-28: Lược đồ tuần tự xác nhận đơn hàng 72
Hình 2-29: Lược đồ tuần tự duyệt đơn hàng 73
Hình 2-31: Lược đồ tuần tự thanh toán Paypal 73
Hình 2-33: Lược đồ tuần tự đổi mật khẩu 74
Hình 2-34: Lược đồ tuần tự cập nhật thông tin tài khoản 74
Hình 2-35: Lược đồ tuần tự quên mật khẩu 75
Hình 2-36: Lược đồ tuần tự login Google 75
Hình 2-37: Lược đồ tuần tự thêm sản phẩm yêu thích 76
Hình 3-1: Lược đồ ER biểu diễn các thành phần dữ liệu của hệ thống 78
Hình 3-2: Cơ sở dữ liệu mức vật lý 87
Hình 3-4: Wireframe trang sản phẩm 88
Hình 3-5: Wireframe trang chi tiết sản phẩm 89
Hình 3-6: Wireframe trang giỏ hàng 89
Hình 3-7: Wireframe trang thông tin đặt hàng 90
Hình 3-8: Wireframe trang liên hệ 90
Hình 3-9: Wireframe trang tin tức 91
Hình 3-10: Wireframe trang chi tiết tin tức 91
Hình 3-11: Wireframe trang chủ admin 92
Hình 3-12: Wireframe trang đơn hàng mới 92
Hình 3-13: Wireframe trang đơn hàng đã duyệt 93
Hình 3-14: Wireframe trang đơn hàng đang giao 93
Hình 3-15: Wireframe trang đơn hàng đã giao 94
Hình 3-16: Wireframe trang đơn hàng đã hủy 94
Hình 3-17: Wireframe trang quản lý người dùng 95
Hình 3-18: Wireframe trang chỉnh sửa người dùng 95
Hình 3-19: Wireframe trang quản lý sản phẩm 96
Hình 3-20: Wireframe trang quản lý nhà cung cấp 96
Hình 3-21: Wireframe trang quản lý tin tức 97
Hình 4-1: Kiến trúc tổ chức source backend 99
Hình 4-2: Kiến trúc tổ chức source backend 99
Hình 4-3: Kiến trúc tổ chức source front end admin 101
Hình 4-4: Kiến trúc tổ chức thư mục public front end admin 102
Hình 4-5: Kiến trúc tổ chức thư mục src front end admin 103
Hình 4-6: Kiến trúc tổ chức source front end customer 103
Hình 4-7: Kiến trúc tổ chức thư mục public front end customer 104
Hình 4-8: Kiến trúc tổ chức thư mục src front end customer 105
Hình 4-9: Giao diện trang chủ customer 107
Hình 4-10: Giao diện Đăng nhập 107
Hình 4-11: Giao diện trang danh sách sản phẩm 108
Hình 4-12: Giao diện trang giỏ hàng 109
Hình 4-13: Giao diện trang đặt hàng 109
Hình 4-14: Giao diện dashboard của admin 110
Hình 4-15: Giao diện quản lý đơn hàng 110
Hình 4-16: Giao diện quản lý sản phẩm 110
Hình 4-17: Giao diện quản lý nhà cung cấp 111
Hình 4-18: Giao diện quản lý tin tức 111
Bảng 2-1: Mô tả Usecase đăng ký tài khoản 48
Bảng 2-2: Mô tả Usecase xem chi tiết sản phẩm 49
Bảng 2-3: Mô tả Usecase tìm kiếm sản phẩm 49
Bảng 2-4: Mô tả Usecase đăng nhập 50
Bảng 2-5: Mô tả Usecase xem tình trạng đơn hàng 51
Bảng 2-6: Mô tả Usecase đánh giá sản phẩm 52
Bảng 2-7: Mô tả Usecase đặt mua sản phẩm 53
Bảng 2-8: Mô tả Usecase cập nhật giỏ hàng 54
Bảng 2-9: Mô tả Usecase xóa giỏ hàng 55
Bảng 2-10: Mô tả Usecase hủy đơn hàng (Khách hàng) 56
Bảng 2-11: Mô tả Usecase thêm sản phẩm 56
Bảng 2-12: Mô tả Usecase thêm nhà cung cấp 58
Bảng 2-13: Mô tả Usecase thêm tin tức 59
Bảng 2-14: Mô tả Usecase hủy đơn hàng 59
Bảng 2-15: Mô tả Usecase duyệt đơn hàng 60
Bảng 2-16: Mô tả Usecase xác nhận đơn hàng đã giao 61
Bảng 2-17: Mô tả Usecase thống kê 62
Bảng 2-18: Mô tả Usecase thanh toán Paypal 62
Bảng 2-19: Mô tả Usecase quản lý User 63
Bảng 3-1: Chi tiết dữ liệu bảng NEW 79
Bảng 3-2: Chi tiết dữ liệu bảng SUPPLIER 80
Bảng 3-3: Chi tiết dữ liệu bảng PRODUCT 80
Bảng 3-4: Chi tiết dữ liệu bảng ACCOUNT 82
Bảng 3-5: Chi tiết dữ liệu bảng CART 84
Bảng 3-6: Chi tiết dữ liệu bảng WISHLIST 84
Bảng 3-7: Chi tiết dữ liệu bảng ORDERS 85
Bảng 3-8: Chi tiết dữ liệu bảng ORDER_DETAIL 85
Bảng 3-9: Chi tiết dữ liệu bảng REVIEWS 86
Bảng 5-1: Bảng thực hiện kiểm thử 113
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Bước vào thế kỷ 21, sự phát triển mạnh mẽ của khoa học công nghệ đã định hình một thế giới mới, với Công nghệ Thông tin đóng vai trò dẫn đầu và góp phần quan trọng trong sự phát triển chung Trong những năm gần đây, vai trò của hệ thống thông tin trong doanh nghiệp ngày càng trở nên quan trọng và mạnh mẽ Như một phần của lĩnh vực Công nghệ thông tin, Công nghệ web đang phát triển và lan rộng nhanh chóng nhờ vào những lợi ích to lớn mà nó mang lại cho cộng đồng Và đó là lý do chúng em đã chọn đề tài "Xây dựng website bán laptop", nhằm tìm hiểu và đề xuất những giải pháp tối ưu để hỗ trợ các doanh nghiệp cửa hàng muốn kinh doanh laptop và các sản phẩm máy tính xách tay Bằng cách sử dụng nền tảng công nghệ web và thương mại điện tử, việc bán laptop thông qua website sẽ mang lại nhiều lợi ích và thuận lợi cho các công ty sản xuất laptop nói chung và các cửa hàng phân phối nói riêng Điều này bao gồm việc tăng độ nổi tiếng và tên tuổi của các công ty và cửa hàng trên môi trường mạng toàn cầu (như MSI, ACER, DELL, LENOVO ), mở cửa 24/24 cho quá trình kinh doanh, giảm chi phí quảng cáo truyền thống như tiếp thị, quảng cáo dễ dàng qua các nền tảng đa phương tiện, và dễ dàng giao tiếp và trao đổi thông tin với khách hàng
Website bán laptop giúp doanh nghiệp cung cấp cho khách hàng các lựa chọn linh hoạt và tiện lợi trong việc tìm mua sản phẩm Khách hàng có thể dễ dàng tìm hiểu và xem thông tin chi tiết về sản phẩm, từ đó lựa chọn những chiếc laptop với thông số kỹ thuật phù hợp và giá cả phù hợp với khả năng tài chính của mình Đối với các hãng sản xuất và cửa hàng đại lý, website thương mại bán laptop cũng mang lại tiện ích trong việc cập nhật và quản lý thông tin cho website, và dễ dàng tương tác với khách hàng
Nhóm chúng em mong muốn đóng góp vào sự phát triển và các lợi ích đã đề cập bằng cách áp dụng kiến thức đã học vào thực tế và xây dựng một website bán laptop với đầy đủ các chức năng để đáp ứng nhu cầu sử dụng của người dùng Đó là lý do chính mà nhóm chúng em quyết định thực hiện đề tài "Tìm hiểu công nghệ Spring Boot, React
JS và xây dựng ứng dụng Website bán laptop"
2 MỤC ĐÍCH VÀ NHIỆM VỤ CỦA ĐỀ TÀI
Mục đích của nhóm khi thực hiện đề tài:
Rèn luyện kỹ năng tổng hợp các kiến thức viết luận văn
Rèn luyện tính tự chủ và tinh thần làm việc nhóm
Có được sản phẩm đầu ra là website bán laptop với các chức năng cơ bản
Có hiểu biết cơ bản về các công nghệ Spring Boot, ReactJs ,MySQL
Mục đích của đề tài:
Tiếp cận khách hàng mới và tăng chuyển đổi thành khách hàng tiềm năng
Cung cấp cho khách hàng cơ hội mua hàng và sử dụng dịch vụ với sự trợ giúp của hệ thống thanh toán online mà không cần rời khỏi nhà
Cung cấp các thông tin hoặc thông báo cho khách hàng, đối tác, nhân viên về các hoạt động của công ty và phạm vi dịch vụ , sản phẩm được cung cấp
Nhiệm vụ của đề tài:
Nghiên cứu các công nghệ sử dụng trong đề tài như Spring Boot, ReactJs
Nghiên cứu tổng quan, ưu điểm và nhược điểm của các website bán laptop tương tự trên Internet
Phân tích, thiết kế hệ thống website bán laptop
Cài đặt website bán laptop với các chức năng cơ bản như: Xác thực tài khoản người dùng qua mail, quản lý giỏ hàng, tìm kiếm sản phẩm, xem sản phẩm mới nhất, nổi bật nhất và sản phẩm bán chạy, xem chi tiết sản phẩm và các sản phẩm liên quan
3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU Đối tượng nghiên cứu:
Trong phạm vi đề tài này, đối tượng nghiên cứu tập trung vào nhu cầu sử dụng của các cửa hàng bán laptop, linh kiện và các cửa hàng nhỏ tương tự Mục tiêu là giúp các tổ chức này quản lý sản phẩm một cách dễ dàng và hiệu quả, cũng như tạo điều kiện cho họ tiếp cận khách hàng một cách thuận tiện Đồng thời, hệ thống sẽ giúp cửa
3 hàng thông báo các chương trình khuyến mãi đến khách hàng một cách nhanh chóng mà không cần phải gặp gỡ trực tiếp để quảng cáo
Nghiên cứu tập trung vào việc xây dựng hệ thống các RESTful API và sử dụng Spring Boot để hỗ trợ việc truy xuất dữ liệu một cách chính xác và nhanh chóng nhất
Sử dụng cơ sở dữ liệu MySQL để lưu trữ dữ liệu của cửa hàng MySQL là một hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, hoạt động trên nhiều hệ điều hành và cung cấp một loạt các hàm tiện ích mạnh mẽ MySQL có khả năng mở rộng và xử lý lượng dữ liệu lớn nếu cần thiết
Về phần giao diện người dùng, nhóm nghiên cứu sử dụng ReactJS và các thư viện hỗ trợ để xây dựng và xử lý giao diện cho người dùng cuối ReactJS tạo ra một DOM ảo cho riêng nó, nơi các thành phần thực sự tồn tại Điều này giúp cải thiện hiệu suất ReactJS cũng tính toán những thay đổi cần cập nhật lên DOM và chỉ thực hiện những thay đổi đó, giúp tránh những thao tác không cần thiết trên DOM và giảm thiểu chi phí xử lý
Nghiên cứu, đọc hiểu tài liệu liên quan đến các công nghệ sử dụng trên sách báo và các nguồn Google , Youtube, GitHub, ChatGPT
Khảo sát các website bán laptop thực tế
Tham khảo ý kiến đóng góp của giáo viên hướng dẫn
Thảo luận làm việc nhóm
5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
Xây dựng được một website bán laptop có những chức năng cơ bản của một trang thương mại điện tử
6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Việc xây dựng website này đã áp dụng thành tựu của công nghệ thông tin vào lĩnh vực thương mại, mang lại nhiều lợi ích và tiện ích cho các hãng sản xuất và cửa hàng
4 Website này cung cấp cho khách hàng thông tin chi tiết và chính xác về các sản phẩm, giúp họ dễ dàng tiếp cận và tìm hiểu về các sản phẩm laptop
Một trong những ưu điểm quan trọng của website này là đảm bảo an ninh thông tin cá nhân của khách hàng và cho phép họ mua hàng trực tuyến mà không cần phải đến cửa hàng trực tiếp Đồng thời, website này cũng giúp các hãng sản xuất và cửa hàng phân phối dễ dàng quảng bá hình ảnh của mình và tiếp cận khách hàng thông qua nhiều phương tiện và nền tảng khác nhau
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 SPRING BOOT FRAMEWORK
Spring Boot là một phần mở rộng của Spring Framework, được thiết kế nhằm giúp các lập trình viên loại bỏ bước cấu hình phức tạp mà Spring yêu cầu Nó được phát triển bằng ngôn ngữ Java và thuộc hệ sinh thái của Spring Framework
1.1.2 Lịch sử phát triển Spring Boot?
Phiên bản đầu tiên của Spring Boot, phiên bản 1.0.0, ra đời vào tháng 10 năm 2012 để đáp ứng yêu cầu tính năng trong Spring jira Từ đó, Spring Boot đã trải qua một quá trình phát triển liên tục với sự cải tiến và phát hành hàng loạt các phiên bản mới, mang lại nhiều lợi ích hữu ích cho người dùng
Hiện tại, phiên bản cao nhất của Spring Boot là Spring Boot 2.6.6, được phát hành vào ngày 04 tháng 2022
1.1.3 Tại sao lại sử dụng Spring Boot?
Spring Boot nên được sử dụng vì:
- Spring Boot sử dụng phương pháp Dependency Injection, giúp quản lý các phụ thuộc giữa các thành phần trong ứng dụng một cách dễ dàng và linh hoạt
PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE BÁN
THIẾT KẾ WIREFRAME ADMIN
4.2 KIẾN TRÚC CỦA CHƯƠNG TRÌNH
4.3 CÁC CHỨC NĂNG CỦA WEBSITE ĐÃ ĐƯỢC CÀI ĐẶT THÀNH CÔNG
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC
4 DANH MỤC TÀI LIỆU THAM KHẢO
Gặp giáo viên hướng dẫn để đề xuất đề tài Chuẩn bị môi trường làm việc (cài đặt công cụ, tạo dự án, v.v.)
Khảo sát các website bán laptop hiện nay Tìm hiểu Firebase storage
Hoàn thiện các chức năng: Thêm ảnh 360 độ cho sản phẩm, thêm mục xem thông tin chi tiết cho sản phẩm
Cập nhật lại lược đồ ER, lược đồ quan hệ, cơ sở dữ liệu mức vật lý với việc bổ sung thêm bảng wishlist
Hoàn thiện chức năng thêm sản phẩm vào danh sách các sản phẩm yêu thích
Tìm hiểu web speech API và chatGPT Hoàn thiện chức năng tìm kiếm bằng giọng nói và chatGPT
Tìm hiểu Firebase realtime database Hoàn thiện chức năng chat realtime giữa admin với customer
Hoàn thiện chức năng quản lý user
Tìm hiểu Google OAuth Hoàn thiện chức năng đăng nhập bằng tài khoản Google
Bổ sung thêm chức năng filter và sort sản phẩm
Viết báo cáo Kiểm thử và sửa lỗi chương trình
Tp Hồ Chí Minh, ngày tháng năm 2023
Người viết đề cương Ý kiến của giáo viên hướng dẫn
(ký và ghi rõ họ tên)
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
2 MỤC ĐÍCH VÀ NHIỆM VỤ CỦA ĐỀ TÀI 2
3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 2
5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 3
6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 3
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 5
CHƯƠNG 2: KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ VÀ MÔ HÌNH HÓA YÊU CẦU 39
2.1 KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ 39
2.2 MÔ TẢ BÀI TOÁN VÀ XÁC ĐỊNH YÊU CẦU 43
2.3 MÔ HÌNH HÓA YÊU CẦU 45
CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE BÁN
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 78
CHƯƠNG 4: TỔ CHỨC VÀ CÀI ĐẶT CHƯƠNG TRÌNH 98
4.2 KIẾN TRÚC CỦA CHƯƠNG TRÌNH 99
4.3 CÁC CHỨC NĂNG CỦA WEBSITE ĐÃ ĐƯỢC CÀI ĐẶT THÀNH CÔNG 105
CHƯƠNG 5: KIỂM THỬ PHẦN MỀM 112
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 120
DANH MỤC TÀI LIỆU THAM KHẢO 122
Hình 1-1: Kiến trúc Spring Boot [2] 6
Hình 1-2: Khái niệm của Json Web Token [3] 8
Hình 1-3: Ví dụ sơ đồ hoạt động Json Web Token [3] 8
Hình 1-4: Thành phần trong Json Web Token [3] 9
Hình 1-6: Thêm Dependencies cho Spring Project [2] 12
Hình 1-7: Thêm dependency vào file pom 13
Hình 1-9: Lỗi giới hạn mail 14
Hình 1-10: Giao diện bảo mật của gmail 15
Hình 1-11: Bật xác minh 2 bước và chọn mật khẩu ứng dụng 16
Hình 1-12: Tạo mật khẩu ứng dụng 16
Hình 1-13: Mật khẩu được tạo thành công 17
Hình 1-14: Cấu hình port email ở back end 17
Hình 1-16: DOM chỉ render lại nơi bị thay đổi [4] 19
Hình 1-17: Các state dùng chung được lưu vào Redux store [5] 20
Hình 1-19: Cách thức hoạt động của ResfulAPI [7] 24
Hình 1-20: Giao diện chat GPT 25
Hình 1-21: Giao diện tạo API key trên OpenAI [8] 26
Hình 1-22: Lưu API key vào biến môi trường 26
Hình 1-23: Những component cho chat box 26
Hình 1-24: Gọi đến API của OpenAI 27
Hình 1-25: Tạo project trên Firebase thành công [9] 27
Hình 1-27: Ví dụ function đọc dữ liệu chat trên database 29
Hình 1-29: Gọi function onValue trên node account user id 29
Hình 1-30: Đăng ký tài khoản business trên Paypal 30
Hình 1-31: Điền thông tin để tạo tài khoản Paypal business 31
Hình 1-32: Paypal gợi ý xác thực khi đăng ký thành công 31
Hình 1-33: Điền các thông tin cá nhân để xác thực tài khoản Paypal 32
Hình 1-34: Điền các thông tin doanh nghiệp để xác thực tài khoản Paypal 33
Hình 1-35: Vào môi trường developer của Paypal 34
Hình 1-38: Client ID và Secret key được sinh ra [10] 35
Hình 1-39: Lưu key vào source code 35
Hình 2-1: Giao diện trang chủ ViettelStore 39
Hình 2-2: Giao diện trang chi tiết sản phẩm ViettelStore 40
Hình 2-3: Giao diện trang chủ NguyenKim 40
Hình 2-4: Giao diện trang sản phẩm NguyenKim 41
Hình 2-5: Giao diện trang chủ PhucAnh 41
Hình 2-6: Giao diện trang sản phẩm PhucAnh 42
Hình 2-7: Giao diện trang chủ thegioididong 42
Hình 2-8: Giao diện trang sản phẩm thegioididong 43
Hình 2-9: Lược đồ Usecase tổng quát 45
Hình 2-10: Sơ đồ use case chi tiết quản trị viên 46
Hình 2-11: Sơ đồ use case chi tiết cho khách hàng 47
Hình 2-12: Sơ đồ use case chi tiết cho khách 48
Hình 2-13: Lược đồ tuần tự đăng ký tài khoản 65
Hình 2-14: Lược đồ tuần tự xem chi tiết sản phẩm 65
Hình 2-15: Lược đồ tuần tự tìm kiếm sản phẩm 66
Hình 2-16: Lược đồ tuần tự đăng nhập 66
Hình 2-17: Lược đồ tuần tự đăng xuất 67
Hình 2-18: Lược đồ tuần tự xem tình trạng đơn hàng 67
Hình 2-19: Lược đồ tuần tự đánh giá sản phẩm 68
Hình 2-20: Lược đồ tuần tự đặt mua sản phẩm 68
Hình 2-21: Lược đồ tuần tự cập nhập giỏ hàng 69
Hình 2-22: Lược đồ tuần tự xóa giỏ hàng 69
Hình 2-23: Lược đồ tuần tự hủy đơn hàng 70
Hình 2-24: Lược đồ tuần tự thêm sản phẩm 70
Hình 2-25: Lược đồ tuần tự thêm nhà cung cấp 71
Hình 2-26: Lược đồ tuần tự thêm tin tức 71
Hình 2-27: Lược đồ tuần tự hủy đơn hàng 72
Hình 2-28: Lược đồ tuần tự xác nhận đơn hàng 72
Hình 2-29: Lược đồ tuần tự duyệt đơn hàng 73
Hình 2-31: Lược đồ tuần tự thanh toán Paypal 73
Hình 2-33: Lược đồ tuần tự đổi mật khẩu 74
Hình 2-34: Lược đồ tuần tự cập nhật thông tin tài khoản 74
Hình 2-35: Lược đồ tuần tự quên mật khẩu 75
Hình 2-36: Lược đồ tuần tự login Google 75
Hình 2-37: Lược đồ tuần tự thêm sản phẩm yêu thích 76
Hình 3-1: Lược đồ ER biểu diễn các thành phần dữ liệu của hệ thống 78
Hình 3-2: Cơ sở dữ liệu mức vật lý 87
Hình 3-4: Wireframe trang sản phẩm 88
Hình 3-5: Wireframe trang chi tiết sản phẩm 89
Hình 3-6: Wireframe trang giỏ hàng 89
Hình 3-7: Wireframe trang thông tin đặt hàng 90
Hình 3-8: Wireframe trang liên hệ 90
Hình 3-9: Wireframe trang tin tức 91
Hình 3-10: Wireframe trang chi tiết tin tức 91
Hình 3-11: Wireframe trang chủ admin 92
Hình 3-12: Wireframe trang đơn hàng mới 92
Hình 3-13: Wireframe trang đơn hàng đã duyệt 93
Hình 3-14: Wireframe trang đơn hàng đang giao 93
Hình 3-15: Wireframe trang đơn hàng đã giao 94
Hình 3-16: Wireframe trang đơn hàng đã hủy 94
Hình 3-17: Wireframe trang quản lý người dùng 95
Hình 3-18: Wireframe trang chỉnh sửa người dùng 95
Hình 3-19: Wireframe trang quản lý sản phẩm 96
Hình 3-20: Wireframe trang quản lý nhà cung cấp 96
Hình 3-21: Wireframe trang quản lý tin tức 97
Hình 4-1: Kiến trúc tổ chức source backend 99
Hình 4-2: Kiến trúc tổ chức source backend 99
Hình 4-3: Kiến trúc tổ chức source front end admin 101
Hình 4-4: Kiến trúc tổ chức thư mục public front end admin 102
Hình 4-5: Kiến trúc tổ chức thư mục src front end admin 103
Hình 4-6: Kiến trúc tổ chức source front end customer 103
Hình 4-7: Kiến trúc tổ chức thư mục public front end customer 104
Hình 4-8: Kiến trúc tổ chức thư mục src front end customer 105
Hình 4-9: Giao diện trang chủ customer 107
Hình 4-10: Giao diện Đăng nhập 107
Hình 4-11: Giao diện trang danh sách sản phẩm 108
Hình 4-12: Giao diện trang giỏ hàng 109
Hình 4-13: Giao diện trang đặt hàng 109
Hình 4-14: Giao diện dashboard của admin 110
Hình 4-15: Giao diện quản lý đơn hàng 110
Hình 4-16: Giao diện quản lý sản phẩm 110
Hình 4-17: Giao diện quản lý nhà cung cấp 111
Hình 4-18: Giao diện quản lý tin tức 111
Bảng 2-1: Mô tả Usecase đăng ký tài khoản 48
Bảng 2-2: Mô tả Usecase xem chi tiết sản phẩm 49
Bảng 2-3: Mô tả Usecase tìm kiếm sản phẩm 49
Bảng 2-4: Mô tả Usecase đăng nhập 50
Bảng 2-5: Mô tả Usecase xem tình trạng đơn hàng 51
Bảng 2-6: Mô tả Usecase đánh giá sản phẩm 52
Bảng 2-7: Mô tả Usecase đặt mua sản phẩm 53
Bảng 2-8: Mô tả Usecase cập nhật giỏ hàng 54
Bảng 2-9: Mô tả Usecase xóa giỏ hàng 55
Bảng 2-10: Mô tả Usecase hủy đơn hàng (Khách hàng) 56
Bảng 2-11: Mô tả Usecase thêm sản phẩm 56
Bảng 2-12: Mô tả Usecase thêm nhà cung cấp 58
Bảng 2-13: Mô tả Usecase thêm tin tức 59
Bảng 2-14: Mô tả Usecase hủy đơn hàng 59
Bảng 2-15: Mô tả Usecase duyệt đơn hàng 60
Bảng 2-16: Mô tả Usecase xác nhận đơn hàng đã giao 61
Bảng 2-17: Mô tả Usecase thống kê 62
Bảng 2-18: Mô tả Usecase thanh toán Paypal 62
Bảng 2-19: Mô tả Usecase quản lý User 63
Bảng 3-1: Chi tiết dữ liệu bảng NEW 79
Bảng 3-2: Chi tiết dữ liệu bảng SUPPLIER 80
Bảng 3-3: Chi tiết dữ liệu bảng PRODUCT 80
Bảng 3-4: Chi tiết dữ liệu bảng ACCOUNT 82
Bảng 3-5: Chi tiết dữ liệu bảng CART 84
Bảng 3-6: Chi tiết dữ liệu bảng WISHLIST 84
Bảng 3-7: Chi tiết dữ liệu bảng ORDERS 85
Bảng 3-8: Chi tiết dữ liệu bảng ORDER_DETAIL 85
Bảng 3-9: Chi tiết dữ liệu bảng REVIEWS 86
Bảng 5-1: Bảng thực hiện kiểm thử 113
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Bước vào thế kỷ 21, sự phát triển mạnh mẽ của khoa học công nghệ đã định hình một thế giới mới, với Công nghệ Thông tin đóng vai trò dẫn đầu và góp phần quan trọng trong sự phát triển chung Trong những năm gần đây, vai trò của hệ thống thông tin trong doanh nghiệp ngày càng trở nên quan trọng và mạnh mẽ Như một phần của lĩnh vực Công nghệ thông tin, Công nghệ web đang phát triển và lan rộng nhanh chóng nhờ vào những lợi ích to lớn mà nó mang lại cho cộng đồng Và đó là lý do chúng em đã chọn đề tài "Xây dựng website bán laptop", nhằm tìm hiểu và đề xuất những giải pháp tối ưu để hỗ trợ các doanh nghiệp cửa hàng muốn kinh doanh laptop và các sản phẩm máy tính xách tay Bằng cách sử dụng nền tảng công nghệ web và thương mại điện tử, việc bán laptop thông qua website sẽ mang lại nhiều lợi ích và thuận lợi cho các công ty sản xuất laptop nói chung và các cửa hàng phân phối nói riêng Điều này bao gồm việc tăng độ nổi tiếng và tên tuổi của các công ty và cửa hàng trên môi trường mạng toàn cầu (như MSI, ACER, DELL, LENOVO ), mở cửa 24/24 cho quá trình kinh doanh, giảm chi phí quảng cáo truyền thống như tiếp thị, quảng cáo dễ dàng qua các nền tảng đa phương tiện, và dễ dàng giao tiếp và trao đổi thông tin với khách hàng
Website bán laptop giúp doanh nghiệp cung cấp cho khách hàng các lựa chọn linh hoạt và tiện lợi trong việc tìm mua sản phẩm Khách hàng có thể dễ dàng tìm hiểu và xem thông tin chi tiết về sản phẩm, từ đó lựa chọn những chiếc laptop với thông số kỹ thuật phù hợp và giá cả phù hợp với khả năng tài chính của mình Đối với các hãng sản xuất và cửa hàng đại lý, website thương mại bán laptop cũng mang lại tiện ích trong việc cập nhật và quản lý thông tin cho website, và dễ dàng tương tác với khách hàng
Nhóm chúng em mong muốn đóng góp vào sự phát triển và các lợi ích đã đề cập bằng cách áp dụng kiến thức đã học vào thực tế và xây dựng một website bán laptop với đầy đủ các chức năng để đáp ứng nhu cầu sử dụng của người dùng Đó là lý do chính mà nhóm chúng em quyết định thực hiện đề tài "Tìm hiểu công nghệ Spring Boot, React
JS và xây dựng ứng dụng Website bán laptop"
2 MỤC ĐÍCH VÀ NHIỆM VỤ CỦA ĐỀ TÀI
Mục đích của nhóm khi thực hiện đề tài:
Rèn luyện kỹ năng tổng hợp các kiến thức viết luận văn
Rèn luyện tính tự chủ và tinh thần làm việc nhóm
Có được sản phẩm đầu ra là website bán laptop với các chức năng cơ bản
Có hiểu biết cơ bản về các công nghệ Spring Boot, ReactJs ,MySQL
Mục đích của đề tài:
Tiếp cận khách hàng mới và tăng chuyển đổi thành khách hàng tiềm năng
Cung cấp cho khách hàng cơ hội mua hàng và sử dụng dịch vụ với sự trợ giúp của hệ thống thanh toán online mà không cần rời khỏi nhà
Cung cấp các thông tin hoặc thông báo cho khách hàng, đối tác, nhân viên về các hoạt động của công ty và phạm vi dịch vụ , sản phẩm được cung cấp
Nhiệm vụ của đề tài:
Nghiên cứu các công nghệ sử dụng trong đề tài như Spring Boot, ReactJs
Nghiên cứu tổng quan, ưu điểm và nhược điểm của các website bán laptop tương tự trên Internet
Phân tích, thiết kế hệ thống website bán laptop
Cài đặt website bán laptop với các chức năng cơ bản như: Xác thực tài khoản người dùng qua mail, quản lý giỏ hàng, tìm kiếm sản phẩm, xem sản phẩm mới nhất, nổi bật nhất và sản phẩm bán chạy, xem chi tiết sản phẩm và các sản phẩm liên quan
3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU Đối tượng nghiên cứu:
Trong phạm vi đề tài này, đối tượng nghiên cứu tập trung vào nhu cầu sử dụng của các cửa hàng bán laptop, linh kiện và các cửa hàng nhỏ tương tự Mục tiêu là giúp các tổ chức này quản lý sản phẩm một cách dễ dàng và hiệu quả, cũng như tạo điều kiện cho họ tiếp cận khách hàng một cách thuận tiện Đồng thời, hệ thống sẽ giúp cửa
3 hàng thông báo các chương trình khuyến mãi đến khách hàng một cách nhanh chóng mà không cần phải gặp gỡ trực tiếp để quảng cáo
Nghiên cứu tập trung vào việc xây dựng hệ thống các RESTful API và sử dụng Spring Boot để hỗ trợ việc truy xuất dữ liệu một cách chính xác và nhanh chóng nhất
Sử dụng cơ sở dữ liệu MySQL để lưu trữ dữ liệu của cửa hàng MySQL là một hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, hoạt động trên nhiều hệ điều hành và cung cấp một loạt các hàm tiện ích mạnh mẽ MySQL có khả năng mở rộng và xử lý lượng dữ liệu lớn nếu cần thiết
Về phần giao diện người dùng, nhóm nghiên cứu sử dụng ReactJS và các thư viện hỗ trợ để xây dựng và xử lý giao diện cho người dùng cuối ReactJS tạo ra một DOM ảo cho riêng nó, nơi các thành phần thực sự tồn tại Điều này giúp cải thiện hiệu suất ReactJS cũng tính toán những thay đổi cần cập nhật lên DOM và chỉ thực hiện những thay đổi đó, giúp tránh những thao tác không cần thiết trên DOM và giảm thiểu chi phí xử lý
Nghiên cứu, đọc hiểu tài liệu liên quan đến các công nghệ sử dụng trên sách báo và các nguồn Google , Youtube, GitHub, ChatGPT
Khảo sát các website bán laptop thực tế
Tham khảo ý kiến đóng góp của giáo viên hướng dẫn
Thảo luận làm việc nhóm
5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
Xây dựng được một website bán laptop có những chức năng cơ bản của một trang thương mại điện tử
6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Việc xây dựng website này đã áp dụng thành tựu của công nghệ thông tin vào lĩnh vực thương mại, mang lại nhiều lợi ích và tiện ích cho các hãng sản xuất và cửa hàng
4 Website này cung cấp cho khách hàng thông tin chi tiết và chính xác về các sản phẩm, giúp họ dễ dàng tiếp cận và tìm hiểu về các sản phẩm laptop
Một trong những ưu điểm quan trọng của website này là đảm bảo an ninh thông tin cá nhân của khách hàng và cho phép họ mua hàng trực tuyến mà không cần phải đến cửa hàng trực tiếp Đồng thời, website này cũng giúp các hãng sản xuất và cửa hàng phân phối dễ dàng quảng bá hình ảnh của mình và tiếp cận khách hàng thông qua nhiều phương tiện và nền tảng khác nhau
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 SPRING BOOT FRAMEWORK
Spring Boot là một phần mở rộng của Spring Framework, được thiết kế nhằm giúp các lập trình viên loại bỏ bước cấu hình phức tạp mà Spring yêu cầu Nó được phát triển bằng ngôn ngữ Java và thuộc hệ sinh thái của Spring Framework
1.1.2 Lịch sử phát triển Spring Boot?
Phiên bản đầu tiên của Spring Boot, phiên bản 1.0.0, ra đời vào tháng 10 năm 2012 để đáp ứng yêu cầu tính năng trong Spring jira Từ đó, Spring Boot đã trải qua một quá trình phát triển liên tục với sự cải tiến và phát hành hàng loạt các phiên bản mới, mang lại nhiều lợi ích hữu ích cho người dùng
Hiện tại, phiên bản cao nhất của Spring Boot là Spring Boot 2.6.6, được phát hành vào ngày 04 tháng 2022
1.1.3 Tại sao lại sử dụng Spring Boot?
Spring Boot nên được sử dụng vì:
- Spring Boot sử dụng phương pháp Dependency Injection, giúp quản lý các phụ thuộc giữa các thành phần trong ứng dụng một cách dễ dàng và linh hoạt
TỔ CHỨC VÀ CÀI ĐẶT CHƯƠNG TRÌNH
CÁC CHỨC NĂNG CỦA WEBSITE ĐÃ ĐƯỢC CÀI ĐẶT THÀNH CÔNG
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC
4 DANH MỤC TÀI LIỆU THAM KHẢO
Gặp giáo viên hướng dẫn để đề xuất đề tài Chuẩn bị môi trường làm việc (cài đặt công cụ, tạo dự án, v.v.)
Khảo sát các website bán laptop hiện nay Tìm hiểu Firebase storage
Hoàn thiện các chức năng: Thêm ảnh 360 độ cho sản phẩm, thêm mục xem thông tin chi tiết cho sản phẩm
Cập nhật lại lược đồ ER, lược đồ quan hệ, cơ sở dữ liệu mức vật lý với việc bổ sung thêm bảng wishlist
Hoàn thiện chức năng thêm sản phẩm vào danh sách các sản phẩm yêu thích
Tìm hiểu web speech API và chatGPT Hoàn thiện chức năng tìm kiếm bằng giọng nói và chatGPT
Tìm hiểu Firebase realtime database Hoàn thiện chức năng chat realtime giữa admin với customer
Hoàn thiện chức năng quản lý user
Tìm hiểu Google OAuth Hoàn thiện chức năng đăng nhập bằng tài khoản Google
Bổ sung thêm chức năng filter và sort sản phẩm
Viết báo cáo Kiểm thử và sửa lỗi chương trình
Tp Hồ Chí Minh, ngày tháng năm 2023
Người viết đề cương Ý kiến của giáo viên hướng dẫn
(ký và ghi rõ họ tên)
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
2 MỤC ĐÍCH VÀ NHIỆM VỤ CỦA ĐỀ TÀI 2
3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 2
5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 3
6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 3
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 5
CHƯƠNG 2: KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ VÀ MÔ HÌNH HÓA YÊU CẦU 39
2.1 KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ 39
2.2 MÔ TẢ BÀI TOÁN VÀ XÁC ĐỊNH YÊU CẦU 43
2.3 MÔ HÌNH HÓA YÊU CẦU 45
CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE BÁN
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 78
CHƯƠNG 4: TỔ CHỨC VÀ CÀI ĐẶT CHƯƠNG TRÌNH 98
4.2 KIẾN TRÚC CỦA CHƯƠNG TRÌNH 99
4.3 CÁC CHỨC NĂNG CỦA WEBSITE ĐÃ ĐƯỢC CÀI ĐẶT THÀNH CÔNG 105
CHƯƠNG 5: KIỂM THỬ PHẦN MỀM 112
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 120
DANH MỤC TÀI LIỆU THAM KHẢO 122
Hình 1-1: Kiến trúc Spring Boot [2] 6
Hình 1-2: Khái niệm của Json Web Token [3] 8
Hình 1-3: Ví dụ sơ đồ hoạt động Json Web Token [3] 8
Hình 1-4: Thành phần trong Json Web Token [3] 9
Hình 1-6: Thêm Dependencies cho Spring Project [2] 12
Hình 1-7: Thêm dependency vào file pom 13
Hình 1-9: Lỗi giới hạn mail 14
Hình 1-10: Giao diện bảo mật của gmail 15
Hình 1-11: Bật xác minh 2 bước và chọn mật khẩu ứng dụng 16
Hình 1-12: Tạo mật khẩu ứng dụng 16
Hình 1-13: Mật khẩu được tạo thành công 17
Hình 1-14: Cấu hình port email ở back end 17
Hình 1-16: DOM chỉ render lại nơi bị thay đổi [4] 19
Hình 1-17: Các state dùng chung được lưu vào Redux store [5] 20
Hình 1-19: Cách thức hoạt động của ResfulAPI [7] 24
Hình 1-20: Giao diện chat GPT 25
Hình 1-21: Giao diện tạo API key trên OpenAI [8] 26
Hình 1-22: Lưu API key vào biến môi trường 26
Hình 1-23: Những component cho chat box 26
Hình 1-24: Gọi đến API của OpenAI 27
Hình 1-25: Tạo project trên Firebase thành công [9] 27
Hình 1-27: Ví dụ function đọc dữ liệu chat trên database 29
Hình 1-29: Gọi function onValue trên node account user id 29
Hình 1-30: Đăng ký tài khoản business trên Paypal 30
Hình 1-31: Điền thông tin để tạo tài khoản Paypal business 31
Hình 1-32: Paypal gợi ý xác thực khi đăng ký thành công 31
Hình 1-33: Điền các thông tin cá nhân để xác thực tài khoản Paypal 32
Hình 1-34: Điền các thông tin doanh nghiệp để xác thực tài khoản Paypal 33
Hình 1-35: Vào môi trường developer của Paypal 34
Hình 1-38: Client ID và Secret key được sinh ra [10] 35
Hình 1-39: Lưu key vào source code 35
Hình 2-1: Giao diện trang chủ ViettelStore 39
Hình 2-2: Giao diện trang chi tiết sản phẩm ViettelStore 40
Hình 2-3: Giao diện trang chủ NguyenKim 40
Hình 2-4: Giao diện trang sản phẩm NguyenKim 41
Hình 2-5: Giao diện trang chủ PhucAnh 41
Hình 2-6: Giao diện trang sản phẩm PhucAnh 42
Hình 2-7: Giao diện trang chủ thegioididong 42
Hình 2-8: Giao diện trang sản phẩm thegioididong 43
Hình 2-9: Lược đồ Usecase tổng quát 45
Hình 2-10: Sơ đồ use case chi tiết quản trị viên 46
Hình 2-11: Sơ đồ use case chi tiết cho khách hàng 47
Hình 2-12: Sơ đồ use case chi tiết cho khách 48
Hình 2-13: Lược đồ tuần tự đăng ký tài khoản 65
Hình 2-14: Lược đồ tuần tự xem chi tiết sản phẩm 65
Hình 2-15: Lược đồ tuần tự tìm kiếm sản phẩm 66
Hình 2-16: Lược đồ tuần tự đăng nhập 66
Hình 2-17: Lược đồ tuần tự đăng xuất 67
Hình 2-18: Lược đồ tuần tự xem tình trạng đơn hàng 67
Hình 2-19: Lược đồ tuần tự đánh giá sản phẩm 68
Hình 2-20: Lược đồ tuần tự đặt mua sản phẩm 68
Hình 2-21: Lược đồ tuần tự cập nhập giỏ hàng 69
Hình 2-22: Lược đồ tuần tự xóa giỏ hàng 69
Hình 2-23: Lược đồ tuần tự hủy đơn hàng 70
Hình 2-24: Lược đồ tuần tự thêm sản phẩm 70
Hình 2-25: Lược đồ tuần tự thêm nhà cung cấp 71
Hình 2-26: Lược đồ tuần tự thêm tin tức 71
Hình 2-27: Lược đồ tuần tự hủy đơn hàng 72
Hình 2-28: Lược đồ tuần tự xác nhận đơn hàng 72
Hình 2-29: Lược đồ tuần tự duyệt đơn hàng 73
Hình 2-31: Lược đồ tuần tự thanh toán Paypal 73
Hình 2-33: Lược đồ tuần tự đổi mật khẩu 74
Hình 2-34: Lược đồ tuần tự cập nhật thông tin tài khoản 74
Hình 2-35: Lược đồ tuần tự quên mật khẩu 75
Hình 2-36: Lược đồ tuần tự login Google 75
Hình 2-37: Lược đồ tuần tự thêm sản phẩm yêu thích 76
Hình 3-1: Lược đồ ER biểu diễn các thành phần dữ liệu của hệ thống 78
Hình 3-2: Cơ sở dữ liệu mức vật lý 87
Hình 3-4: Wireframe trang sản phẩm 88
Hình 3-5: Wireframe trang chi tiết sản phẩm 89
Hình 3-6: Wireframe trang giỏ hàng 89
Hình 3-7: Wireframe trang thông tin đặt hàng 90
Hình 3-8: Wireframe trang liên hệ 90
Hình 3-9: Wireframe trang tin tức 91
Hình 3-10: Wireframe trang chi tiết tin tức 91
Hình 3-11: Wireframe trang chủ admin 92
Hình 3-12: Wireframe trang đơn hàng mới 92
Hình 3-13: Wireframe trang đơn hàng đã duyệt 93
Hình 3-14: Wireframe trang đơn hàng đang giao 93
Hình 3-15: Wireframe trang đơn hàng đã giao 94
Hình 3-16: Wireframe trang đơn hàng đã hủy 94
Hình 3-17: Wireframe trang quản lý người dùng 95
Hình 3-18: Wireframe trang chỉnh sửa người dùng 95
Hình 3-19: Wireframe trang quản lý sản phẩm 96
Hình 3-20: Wireframe trang quản lý nhà cung cấp 96
Hình 3-21: Wireframe trang quản lý tin tức 97
Hình 4-1: Kiến trúc tổ chức source backend 99
Hình 4-2: Kiến trúc tổ chức source backend 99
Hình 4-3: Kiến trúc tổ chức source front end admin 101
Hình 4-4: Kiến trúc tổ chức thư mục public front end admin 102
Hình 4-5: Kiến trúc tổ chức thư mục src front end admin 103
Hình 4-6: Kiến trúc tổ chức source front end customer 103
Hình 4-7: Kiến trúc tổ chức thư mục public front end customer 104
Hình 4-8: Kiến trúc tổ chức thư mục src front end customer 105
Hình 4-9: Giao diện trang chủ customer 107
Hình 4-10: Giao diện Đăng nhập 107
Hình 4-11: Giao diện trang danh sách sản phẩm 108
Hình 4-12: Giao diện trang giỏ hàng 109
Hình 4-13: Giao diện trang đặt hàng 109
Hình 4-14: Giao diện dashboard của admin 110
Hình 4-15: Giao diện quản lý đơn hàng 110
Hình 4-16: Giao diện quản lý sản phẩm 110
Hình 4-17: Giao diện quản lý nhà cung cấp 111
Hình 4-18: Giao diện quản lý tin tức 111
Bảng 2-1: Mô tả Usecase đăng ký tài khoản 48
Bảng 2-2: Mô tả Usecase xem chi tiết sản phẩm 49
Bảng 2-3: Mô tả Usecase tìm kiếm sản phẩm 49
Bảng 2-4: Mô tả Usecase đăng nhập 50
Bảng 2-5: Mô tả Usecase xem tình trạng đơn hàng 51
Bảng 2-6: Mô tả Usecase đánh giá sản phẩm 52
Bảng 2-7: Mô tả Usecase đặt mua sản phẩm 53
Bảng 2-8: Mô tả Usecase cập nhật giỏ hàng 54
Bảng 2-9: Mô tả Usecase xóa giỏ hàng 55
Bảng 2-10: Mô tả Usecase hủy đơn hàng (Khách hàng) 56
Bảng 2-11: Mô tả Usecase thêm sản phẩm 56
Bảng 2-12: Mô tả Usecase thêm nhà cung cấp 58
Bảng 2-13: Mô tả Usecase thêm tin tức 59
Bảng 2-14: Mô tả Usecase hủy đơn hàng 59
Bảng 2-15: Mô tả Usecase duyệt đơn hàng 60
Bảng 2-16: Mô tả Usecase xác nhận đơn hàng đã giao 61
Bảng 2-17: Mô tả Usecase thống kê 62
Bảng 2-18: Mô tả Usecase thanh toán Paypal 62
Bảng 2-19: Mô tả Usecase quản lý User 63
Bảng 3-1: Chi tiết dữ liệu bảng NEW 79
Bảng 3-2: Chi tiết dữ liệu bảng SUPPLIER 80
Bảng 3-3: Chi tiết dữ liệu bảng PRODUCT 80
Bảng 3-4: Chi tiết dữ liệu bảng ACCOUNT 82
Bảng 3-5: Chi tiết dữ liệu bảng CART 84
Bảng 3-6: Chi tiết dữ liệu bảng WISHLIST 84
Bảng 3-7: Chi tiết dữ liệu bảng ORDERS 85
Bảng 3-8: Chi tiết dữ liệu bảng ORDER_DETAIL 85
Bảng 3-9: Chi tiết dữ liệu bảng REVIEWS 86
Bảng 5-1: Bảng thực hiện kiểm thử 113
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Bước vào thế kỷ 21, sự phát triển mạnh mẽ của khoa học công nghệ đã định hình một thế giới mới, với Công nghệ Thông tin đóng vai trò dẫn đầu và góp phần quan trọng trong sự phát triển chung Trong những năm gần đây, vai trò của hệ thống thông tin trong doanh nghiệp ngày càng trở nên quan trọng và mạnh mẽ Như một phần của lĩnh vực Công nghệ thông tin, Công nghệ web đang phát triển và lan rộng nhanh chóng nhờ vào những lợi ích to lớn mà nó mang lại cho cộng đồng Và đó là lý do chúng em đã chọn đề tài "Xây dựng website bán laptop", nhằm tìm hiểu và đề xuất những giải pháp tối ưu để hỗ trợ các doanh nghiệp cửa hàng muốn kinh doanh laptop và các sản phẩm máy tính xách tay Bằng cách sử dụng nền tảng công nghệ web và thương mại điện tử, việc bán laptop thông qua website sẽ mang lại nhiều lợi ích và thuận lợi cho các công ty sản xuất laptop nói chung và các cửa hàng phân phối nói riêng Điều này bao gồm việc tăng độ nổi tiếng và tên tuổi của các công ty và cửa hàng trên môi trường mạng toàn cầu (như MSI, ACER, DELL, LENOVO ), mở cửa 24/24 cho quá trình kinh doanh, giảm chi phí quảng cáo truyền thống như tiếp thị, quảng cáo dễ dàng qua các nền tảng đa phương tiện, và dễ dàng giao tiếp và trao đổi thông tin với khách hàng
Website bán laptop giúp doanh nghiệp cung cấp cho khách hàng các lựa chọn linh hoạt và tiện lợi trong việc tìm mua sản phẩm Khách hàng có thể dễ dàng tìm hiểu và xem thông tin chi tiết về sản phẩm, từ đó lựa chọn những chiếc laptop với thông số kỹ thuật phù hợp và giá cả phù hợp với khả năng tài chính của mình Đối với các hãng sản xuất và cửa hàng đại lý, website thương mại bán laptop cũng mang lại tiện ích trong việc cập nhật và quản lý thông tin cho website, và dễ dàng tương tác với khách hàng
Nhóm chúng em mong muốn đóng góp vào sự phát triển và các lợi ích đã đề cập bằng cách áp dụng kiến thức đã học vào thực tế và xây dựng một website bán laptop với đầy đủ các chức năng để đáp ứng nhu cầu sử dụng của người dùng Đó là lý do chính mà nhóm chúng em quyết định thực hiện đề tài "Tìm hiểu công nghệ Spring Boot, React
JS và xây dựng ứng dụng Website bán laptop"
2 MỤC ĐÍCH VÀ NHIỆM VỤ CỦA ĐỀ TÀI
Mục đích của nhóm khi thực hiện đề tài:
Rèn luyện kỹ năng tổng hợp các kiến thức viết luận văn
Rèn luyện tính tự chủ và tinh thần làm việc nhóm
Có được sản phẩm đầu ra là website bán laptop với các chức năng cơ bản
Có hiểu biết cơ bản về các công nghệ Spring Boot, ReactJs ,MySQL
Mục đích của đề tài:
Tiếp cận khách hàng mới và tăng chuyển đổi thành khách hàng tiềm năng
Cung cấp cho khách hàng cơ hội mua hàng và sử dụng dịch vụ với sự trợ giúp của hệ thống thanh toán online mà không cần rời khỏi nhà
Cung cấp các thông tin hoặc thông báo cho khách hàng, đối tác, nhân viên về các hoạt động của công ty và phạm vi dịch vụ , sản phẩm được cung cấp
Nhiệm vụ của đề tài:
Nghiên cứu các công nghệ sử dụng trong đề tài như Spring Boot, ReactJs
Nghiên cứu tổng quan, ưu điểm và nhược điểm của các website bán laptop tương tự trên Internet
Phân tích, thiết kế hệ thống website bán laptop
Cài đặt website bán laptop với các chức năng cơ bản như: Xác thực tài khoản người dùng qua mail, quản lý giỏ hàng, tìm kiếm sản phẩm, xem sản phẩm mới nhất, nổi bật nhất và sản phẩm bán chạy, xem chi tiết sản phẩm và các sản phẩm liên quan
3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU Đối tượng nghiên cứu:
Trong phạm vi đề tài này, đối tượng nghiên cứu tập trung vào nhu cầu sử dụng của các cửa hàng bán laptop, linh kiện và các cửa hàng nhỏ tương tự Mục tiêu là giúp các tổ chức này quản lý sản phẩm một cách dễ dàng và hiệu quả, cũng như tạo điều kiện cho họ tiếp cận khách hàng một cách thuận tiện Đồng thời, hệ thống sẽ giúp cửa
3 hàng thông báo các chương trình khuyến mãi đến khách hàng một cách nhanh chóng mà không cần phải gặp gỡ trực tiếp để quảng cáo
Nghiên cứu tập trung vào việc xây dựng hệ thống các RESTful API và sử dụng Spring Boot để hỗ trợ việc truy xuất dữ liệu một cách chính xác và nhanh chóng nhất
Sử dụng cơ sở dữ liệu MySQL để lưu trữ dữ liệu của cửa hàng MySQL là một hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, hoạt động trên nhiều hệ điều hành và cung cấp một loạt các hàm tiện ích mạnh mẽ MySQL có khả năng mở rộng và xử lý lượng dữ liệu lớn nếu cần thiết
Về phần giao diện người dùng, nhóm nghiên cứu sử dụng ReactJS và các thư viện hỗ trợ để xây dựng và xử lý giao diện cho người dùng cuối ReactJS tạo ra một DOM ảo cho riêng nó, nơi các thành phần thực sự tồn tại Điều này giúp cải thiện hiệu suất ReactJS cũng tính toán những thay đổi cần cập nhật lên DOM và chỉ thực hiện những thay đổi đó, giúp tránh những thao tác không cần thiết trên DOM và giảm thiểu chi phí xử lý
Nghiên cứu, đọc hiểu tài liệu liên quan đến các công nghệ sử dụng trên sách báo và các nguồn Google , Youtube, GitHub, ChatGPT
Khảo sát các website bán laptop thực tế
Tham khảo ý kiến đóng góp của giáo viên hướng dẫn
Thảo luận làm việc nhóm
5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
Xây dựng được một website bán laptop có những chức năng cơ bản của một trang thương mại điện tử
6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Việc xây dựng website này đã áp dụng thành tựu của công nghệ thông tin vào lĩnh vực thương mại, mang lại nhiều lợi ích và tiện ích cho các hãng sản xuất và cửa hàng
4 Website này cung cấp cho khách hàng thông tin chi tiết và chính xác về các sản phẩm, giúp họ dễ dàng tiếp cận và tìm hiểu về các sản phẩm laptop
Một trong những ưu điểm quan trọng của website này là đảm bảo an ninh thông tin cá nhân của khách hàng và cho phép họ mua hàng trực tuyến mà không cần phải đến cửa hàng trực tiếp Đồng thời, website này cũng giúp các hãng sản xuất và cửa hàng phân phối dễ dàng quảng bá hình ảnh của mình và tiếp cận khách hàng thông qua nhiều phương tiện và nền tảng khác nhau
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 SPRING BOOT FRAMEWORK
Spring Boot là một phần mở rộng của Spring Framework, được thiết kế nhằm giúp các lập trình viên loại bỏ bước cấu hình phức tạp mà Spring yêu cầu Nó được phát triển bằng ngôn ngữ Java và thuộc hệ sinh thái của Spring Framework
1.1.2 Lịch sử phát triển Spring Boot?
Phiên bản đầu tiên của Spring Boot, phiên bản 1.0.0, ra đời vào tháng 10 năm 2012 để đáp ứng yêu cầu tính năng trong Spring jira Từ đó, Spring Boot đã trải qua một quá trình phát triển liên tục với sự cải tiến và phát hành hàng loạt các phiên bản mới, mang lại nhiều lợi ích hữu ích cho người dùng
Hiện tại, phiên bản cao nhất của Spring Boot là Spring Boot 2.6.6, được phát hành vào ngày 04 tháng 2022
1.1.3 Tại sao lại sử dụng Spring Boot?
Spring Boot nên được sử dụng vì:
- Spring Boot sử dụng phương pháp Dependency Injection, giúp quản lý các phụ thuộc giữa các thành phần trong ứng dụng một cách dễ dàng và linh hoạt
KIỂM THỬ PHẦN MỀM
THỰC HIỆN KIỂM THỬ
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC
4 DANH MỤC TÀI LIỆU THAM KHẢO
Gặp giáo viên hướng dẫn để đề xuất đề tài Chuẩn bị môi trường làm việc (cài đặt công cụ, tạo dự án, v.v.)
Khảo sát các website bán laptop hiện nay Tìm hiểu Firebase storage
Hoàn thiện các chức năng: Thêm ảnh 360 độ cho sản phẩm, thêm mục xem thông tin chi tiết cho sản phẩm
Cập nhật lại lược đồ ER, lược đồ quan hệ, cơ sở dữ liệu mức vật lý với việc bổ sung thêm bảng wishlist
Hoàn thiện chức năng thêm sản phẩm vào danh sách các sản phẩm yêu thích
Tìm hiểu web speech API và chatGPT Hoàn thiện chức năng tìm kiếm bằng giọng nói và chatGPT
Tìm hiểu Firebase realtime database Hoàn thiện chức năng chat realtime giữa admin với customer
Hoàn thiện chức năng quản lý user
Tìm hiểu Google OAuth Hoàn thiện chức năng đăng nhập bằng tài khoản Google
Bổ sung thêm chức năng filter và sort sản phẩm
Viết báo cáo Kiểm thử và sửa lỗi chương trình
Tp Hồ Chí Minh, ngày tháng năm 2023
Người viết đề cương Ý kiến của giáo viên hướng dẫn
(ký và ghi rõ họ tên)
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
2 MỤC ĐÍCH VÀ NHIỆM VỤ CỦA ĐỀ TÀI 2
3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 2
5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 3
6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 3
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 5
CHƯƠNG 2: KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ VÀ MÔ HÌNH HÓA YÊU CẦU 39
2.1 KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ 39
2.2 MÔ TẢ BÀI TOÁN VÀ XÁC ĐỊNH YÊU CẦU 43
2.3 MÔ HÌNH HÓA YÊU CẦU 45
CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE BÁN
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 78
CHƯƠNG 4: TỔ CHỨC VÀ CÀI ĐẶT CHƯƠNG TRÌNH 98
4.2 KIẾN TRÚC CỦA CHƯƠNG TRÌNH 99
4.3 CÁC CHỨC NĂNG CỦA WEBSITE ĐÃ ĐƯỢC CÀI ĐẶT THÀNH CÔNG 105
CHƯƠNG 5: KIỂM THỬ PHẦN MỀM 112
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 120
DANH MỤC TÀI LIỆU THAM KHẢO 122
Hình 1-1: Kiến trúc Spring Boot [2] 6
Hình 1-2: Khái niệm của Json Web Token [3] 8
Hình 1-3: Ví dụ sơ đồ hoạt động Json Web Token [3] 8
Hình 1-4: Thành phần trong Json Web Token [3] 9
Hình 1-6: Thêm Dependencies cho Spring Project [2] 12
Hình 1-7: Thêm dependency vào file pom 13
Hình 1-9: Lỗi giới hạn mail 14
Hình 1-10: Giao diện bảo mật của gmail 15
Hình 1-11: Bật xác minh 2 bước và chọn mật khẩu ứng dụng 16
Hình 1-12: Tạo mật khẩu ứng dụng 16
Hình 1-13: Mật khẩu được tạo thành công 17
Hình 1-14: Cấu hình port email ở back end 17
Hình 1-16: DOM chỉ render lại nơi bị thay đổi [4] 19
Hình 1-17: Các state dùng chung được lưu vào Redux store [5] 20
Hình 1-19: Cách thức hoạt động của ResfulAPI [7] 24
Hình 1-20: Giao diện chat GPT 25
Hình 1-21: Giao diện tạo API key trên OpenAI [8] 26
Hình 1-22: Lưu API key vào biến môi trường 26
Hình 1-23: Những component cho chat box 26
Hình 1-24: Gọi đến API của OpenAI 27
Hình 1-25: Tạo project trên Firebase thành công [9] 27
Hình 1-27: Ví dụ function đọc dữ liệu chat trên database 29
Hình 1-29: Gọi function onValue trên node account user id 29
Hình 1-30: Đăng ký tài khoản business trên Paypal 30
Hình 1-31: Điền thông tin để tạo tài khoản Paypal business 31
Hình 1-32: Paypal gợi ý xác thực khi đăng ký thành công 31
Hình 1-33: Điền các thông tin cá nhân để xác thực tài khoản Paypal 32
Hình 1-34: Điền các thông tin doanh nghiệp để xác thực tài khoản Paypal 33
Hình 1-35: Vào môi trường developer của Paypal 34
Hình 1-38: Client ID và Secret key được sinh ra [10] 35
Hình 1-39: Lưu key vào source code 35
Hình 2-1: Giao diện trang chủ ViettelStore 39
Hình 2-2: Giao diện trang chi tiết sản phẩm ViettelStore 40
Hình 2-3: Giao diện trang chủ NguyenKim 40
Hình 2-4: Giao diện trang sản phẩm NguyenKim 41
Hình 2-5: Giao diện trang chủ PhucAnh 41
Hình 2-6: Giao diện trang sản phẩm PhucAnh 42
Hình 2-7: Giao diện trang chủ thegioididong 42
Hình 2-8: Giao diện trang sản phẩm thegioididong 43
Hình 2-9: Lược đồ Usecase tổng quát 45
Hình 2-10: Sơ đồ use case chi tiết quản trị viên 46
Hình 2-11: Sơ đồ use case chi tiết cho khách hàng 47
Hình 2-12: Sơ đồ use case chi tiết cho khách 48
Hình 2-13: Lược đồ tuần tự đăng ký tài khoản 65
Hình 2-14: Lược đồ tuần tự xem chi tiết sản phẩm 65
Hình 2-15: Lược đồ tuần tự tìm kiếm sản phẩm 66
Hình 2-16: Lược đồ tuần tự đăng nhập 66
Hình 2-17: Lược đồ tuần tự đăng xuất 67
Hình 2-18: Lược đồ tuần tự xem tình trạng đơn hàng 67
Hình 2-19: Lược đồ tuần tự đánh giá sản phẩm 68
Hình 2-20: Lược đồ tuần tự đặt mua sản phẩm 68
Hình 2-21: Lược đồ tuần tự cập nhập giỏ hàng 69
Hình 2-22: Lược đồ tuần tự xóa giỏ hàng 69
Hình 2-23: Lược đồ tuần tự hủy đơn hàng 70
Hình 2-24: Lược đồ tuần tự thêm sản phẩm 70
Hình 2-25: Lược đồ tuần tự thêm nhà cung cấp 71
Hình 2-26: Lược đồ tuần tự thêm tin tức 71
Hình 2-27: Lược đồ tuần tự hủy đơn hàng 72
Hình 2-28: Lược đồ tuần tự xác nhận đơn hàng 72
Hình 2-29: Lược đồ tuần tự duyệt đơn hàng 73
Hình 2-31: Lược đồ tuần tự thanh toán Paypal 73
Hình 2-33: Lược đồ tuần tự đổi mật khẩu 74
Hình 2-34: Lược đồ tuần tự cập nhật thông tin tài khoản 74
Hình 2-35: Lược đồ tuần tự quên mật khẩu 75
Hình 2-36: Lược đồ tuần tự login Google 75
Hình 2-37: Lược đồ tuần tự thêm sản phẩm yêu thích 76
Hình 3-1: Lược đồ ER biểu diễn các thành phần dữ liệu của hệ thống 78
Hình 3-2: Cơ sở dữ liệu mức vật lý 87
Hình 3-4: Wireframe trang sản phẩm 88
Hình 3-5: Wireframe trang chi tiết sản phẩm 89
Hình 3-6: Wireframe trang giỏ hàng 89
Hình 3-7: Wireframe trang thông tin đặt hàng 90
Hình 3-8: Wireframe trang liên hệ 90
Hình 3-9: Wireframe trang tin tức 91
Hình 3-10: Wireframe trang chi tiết tin tức 91
Hình 3-11: Wireframe trang chủ admin 92
Hình 3-12: Wireframe trang đơn hàng mới 92
Hình 3-13: Wireframe trang đơn hàng đã duyệt 93
Hình 3-14: Wireframe trang đơn hàng đang giao 93
Hình 3-15: Wireframe trang đơn hàng đã giao 94
Hình 3-16: Wireframe trang đơn hàng đã hủy 94
Hình 3-17: Wireframe trang quản lý người dùng 95
Hình 3-18: Wireframe trang chỉnh sửa người dùng 95
Hình 3-19: Wireframe trang quản lý sản phẩm 96
Hình 3-20: Wireframe trang quản lý nhà cung cấp 96
Hình 3-21: Wireframe trang quản lý tin tức 97
Hình 4-1: Kiến trúc tổ chức source backend 99
Hình 4-2: Kiến trúc tổ chức source backend 99
Hình 4-3: Kiến trúc tổ chức source front end admin 101
Hình 4-4: Kiến trúc tổ chức thư mục public front end admin 102
Hình 4-5: Kiến trúc tổ chức thư mục src front end admin 103
Hình 4-6: Kiến trúc tổ chức source front end customer 103
Hình 4-7: Kiến trúc tổ chức thư mục public front end customer 104
Hình 4-8: Kiến trúc tổ chức thư mục src front end customer 105
Hình 4-9: Giao diện trang chủ customer 107
Hình 4-10: Giao diện Đăng nhập 107
Hình 4-11: Giao diện trang danh sách sản phẩm 108
Hình 4-12: Giao diện trang giỏ hàng 109
Hình 4-13: Giao diện trang đặt hàng 109
Hình 4-14: Giao diện dashboard của admin 110
Hình 4-15: Giao diện quản lý đơn hàng 110
Hình 4-16: Giao diện quản lý sản phẩm 110
Hình 4-17: Giao diện quản lý nhà cung cấp 111
Hình 4-18: Giao diện quản lý tin tức 111
Bảng 2-1: Mô tả Usecase đăng ký tài khoản 48
Bảng 2-2: Mô tả Usecase xem chi tiết sản phẩm 49
Bảng 2-3: Mô tả Usecase tìm kiếm sản phẩm 49
Bảng 2-4: Mô tả Usecase đăng nhập 50
Bảng 2-5: Mô tả Usecase xem tình trạng đơn hàng 51
Bảng 2-6: Mô tả Usecase đánh giá sản phẩm 52
Bảng 2-7: Mô tả Usecase đặt mua sản phẩm 53
Bảng 2-8: Mô tả Usecase cập nhật giỏ hàng 54
Bảng 2-9: Mô tả Usecase xóa giỏ hàng 55
Bảng 2-10: Mô tả Usecase hủy đơn hàng (Khách hàng) 56
Bảng 2-11: Mô tả Usecase thêm sản phẩm 56
Bảng 2-12: Mô tả Usecase thêm nhà cung cấp 58
Bảng 2-13: Mô tả Usecase thêm tin tức 59
Bảng 2-14: Mô tả Usecase hủy đơn hàng 59
Bảng 2-15: Mô tả Usecase duyệt đơn hàng 60
Bảng 2-16: Mô tả Usecase xác nhận đơn hàng đã giao 61
Bảng 2-17: Mô tả Usecase thống kê 62
Bảng 2-18: Mô tả Usecase thanh toán Paypal 62
Bảng 2-19: Mô tả Usecase quản lý User 63
Bảng 3-1: Chi tiết dữ liệu bảng NEW 79
Bảng 3-2: Chi tiết dữ liệu bảng SUPPLIER 80
Bảng 3-3: Chi tiết dữ liệu bảng PRODUCT 80
Bảng 3-4: Chi tiết dữ liệu bảng ACCOUNT 82
Bảng 3-5: Chi tiết dữ liệu bảng CART 84
Bảng 3-6: Chi tiết dữ liệu bảng WISHLIST 84
Bảng 3-7: Chi tiết dữ liệu bảng ORDERS 85
Bảng 3-8: Chi tiết dữ liệu bảng ORDER_DETAIL 85
Bảng 3-9: Chi tiết dữ liệu bảng REVIEWS 86
Bảng 5-1: Bảng thực hiện kiểm thử 113
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Bước vào thế kỷ 21, sự phát triển mạnh mẽ của khoa học công nghệ đã định hình một thế giới mới, với Công nghệ Thông tin đóng vai trò dẫn đầu và góp phần quan trọng trong sự phát triển chung Trong những năm gần đây, vai trò của hệ thống thông tin trong doanh nghiệp ngày càng trở nên quan trọng và mạnh mẽ Như một phần của lĩnh vực Công nghệ thông tin, Công nghệ web đang phát triển và lan rộng nhanh chóng nhờ vào những lợi ích to lớn mà nó mang lại cho cộng đồng Và đó là lý do chúng em đã chọn đề tài "Xây dựng website bán laptop", nhằm tìm hiểu và đề xuất những giải pháp tối ưu để hỗ trợ các doanh nghiệp cửa hàng muốn kinh doanh laptop và các sản phẩm máy tính xách tay Bằng cách sử dụng nền tảng công nghệ web và thương mại điện tử, việc bán laptop thông qua website sẽ mang lại nhiều lợi ích và thuận lợi cho các công ty sản xuất laptop nói chung và các cửa hàng phân phối nói riêng Điều này bao gồm việc tăng độ nổi tiếng và tên tuổi của các công ty và cửa hàng trên môi trường mạng toàn cầu (như MSI, ACER, DELL, LENOVO ), mở cửa 24/24 cho quá trình kinh doanh, giảm chi phí quảng cáo truyền thống như tiếp thị, quảng cáo dễ dàng qua các nền tảng đa phương tiện, và dễ dàng giao tiếp và trao đổi thông tin với khách hàng
Website bán laptop giúp doanh nghiệp cung cấp cho khách hàng các lựa chọn linh hoạt và tiện lợi trong việc tìm mua sản phẩm Khách hàng có thể dễ dàng tìm hiểu và xem thông tin chi tiết về sản phẩm, từ đó lựa chọn những chiếc laptop với thông số kỹ thuật phù hợp và giá cả phù hợp với khả năng tài chính của mình Đối với các hãng sản xuất và cửa hàng đại lý, website thương mại bán laptop cũng mang lại tiện ích trong việc cập nhật và quản lý thông tin cho website, và dễ dàng tương tác với khách hàng
Nhóm chúng em mong muốn đóng góp vào sự phát triển và các lợi ích đã đề cập bằng cách áp dụng kiến thức đã học vào thực tế và xây dựng một website bán laptop với đầy đủ các chức năng để đáp ứng nhu cầu sử dụng của người dùng Đó là lý do chính mà nhóm chúng em quyết định thực hiện đề tài "Tìm hiểu công nghệ Spring Boot, React
JS và xây dựng ứng dụng Website bán laptop"
2 MỤC ĐÍCH VÀ NHIỆM VỤ CỦA ĐỀ TÀI
Mục đích của nhóm khi thực hiện đề tài:
Rèn luyện kỹ năng tổng hợp các kiến thức viết luận văn
Rèn luyện tính tự chủ và tinh thần làm việc nhóm
Có được sản phẩm đầu ra là website bán laptop với các chức năng cơ bản
Có hiểu biết cơ bản về các công nghệ Spring Boot, ReactJs ,MySQL
Mục đích của đề tài:
Tiếp cận khách hàng mới và tăng chuyển đổi thành khách hàng tiềm năng
Cung cấp cho khách hàng cơ hội mua hàng và sử dụng dịch vụ với sự trợ giúp của hệ thống thanh toán online mà không cần rời khỏi nhà
Cung cấp các thông tin hoặc thông báo cho khách hàng, đối tác, nhân viên về các hoạt động của công ty và phạm vi dịch vụ , sản phẩm được cung cấp
Nhiệm vụ của đề tài:
Nghiên cứu các công nghệ sử dụng trong đề tài như Spring Boot, ReactJs
Nghiên cứu tổng quan, ưu điểm và nhược điểm của các website bán laptop tương tự trên Internet
Phân tích, thiết kế hệ thống website bán laptop
Cài đặt website bán laptop với các chức năng cơ bản như: Xác thực tài khoản người dùng qua mail, quản lý giỏ hàng, tìm kiếm sản phẩm, xem sản phẩm mới nhất, nổi bật nhất và sản phẩm bán chạy, xem chi tiết sản phẩm và các sản phẩm liên quan
3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU Đối tượng nghiên cứu:
Trong phạm vi đề tài này, đối tượng nghiên cứu tập trung vào nhu cầu sử dụng của các cửa hàng bán laptop, linh kiện và các cửa hàng nhỏ tương tự Mục tiêu là giúp các tổ chức này quản lý sản phẩm một cách dễ dàng và hiệu quả, cũng như tạo điều kiện cho họ tiếp cận khách hàng một cách thuận tiện Đồng thời, hệ thống sẽ giúp cửa
3 hàng thông báo các chương trình khuyến mãi đến khách hàng một cách nhanh chóng mà không cần phải gặp gỡ trực tiếp để quảng cáo
Nghiên cứu tập trung vào việc xây dựng hệ thống các RESTful API và sử dụng Spring Boot để hỗ trợ việc truy xuất dữ liệu một cách chính xác và nhanh chóng nhất
Sử dụng cơ sở dữ liệu MySQL để lưu trữ dữ liệu của cửa hàng MySQL là một hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, hoạt động trên nhiều hệ điều hành và cung cấp một loạt các hàm tiện ích mạnh mẽ MySQL có khả năng mở rộng và xử lý lượng dữ liệu lớn nếu cần thiết
Về phần giao diện người dùng, nhóm nghiên cứu sử dụng ReactJS và các thư viện hỗ trợ để xây dựng và xử lý giao diện cho người dùng cuối ReactJS tạo ra một DOM ảo cho riêng nó, nơi các thành phần thực sự tồn tại Điều này giúp cải thiện hiệu suất ReactJS cũng tính toán những thay đổi cần cập nhật lên DOM và chỉ thực hiện những thay đổi đó, giúp tránh những thao tác không cần thiết trên DOM và giảm thiểu chi phí xử lý
Nghiên cứu, đọc hiểu tài liệu liên quan đến các công nghệ sử dụng trên sách báo và các nguồn Google , Youtube, GitHub, ChatGPT
Khảo sát các website bán laptop thực tế
Tham khảo ý kiến đóng góp của giáo viên hướng dẫn
Thảo luận làm việc nhóm
5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
Xây dựng được một website bán laptop có những chức năng cơ bản của một trang thương mại điện tử
6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Việc xây dựng website này đã áp dụng thành tựu của công nghệ thông tin vào lĩnh vực thương mại, mang lại nhiều lợi ích và tiện ích cho các hãng sản xuất và cửa hàng
4 Website này cung cấp cho khách hàng thông tin chi tiết và chính xác về các sản phẩm, giúp họ dễ dàng tiếp cận và tìm hiểu về các sản phẩm laptop
Một trong những ưu điểm quan trọng của website này là đảm bảo an ninh thông tin cá nhân của khách hàng và cho phép họ mua hàng trực tuyến mà không cần phải đến cửa hàng trực tiếp Đồng thời, website này cũng giúp các hãng sản xuất và cửa hàng phân phối dễ dàng quảng bá hình ảnh của mình và tiếp cận khách hàng thông qua nhiều phương tiện và nền tảng khác nhau
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 SPRING BOOT FRAMEWORK
Spring Boot là một phần mở rộng của Spring Framework, được thiết kế nhằm giúp các lập trình viên loại bỏ bước cấu hình phức tạp mà Spring yêu cầu Nó được phát triển bằng ngôn ngữ Java và thuộc hệ sinh thái của Spring Framework
1.1.2 Lịch sử phát triển Spring Boot?
Phiên bản đầu tiên của Spring Boot, phiên bản 1.0.0, ra đời vào tháng 10 năm 2012 để đáp ứng yêu cầu tính năng trong Spring jira Từ đó, Spring Boot đã trải qua một quá trình phát triển liên tục với sự cải tiến và phát hành hàng loạt các phiên bản mới, mang lại nhiều lợi ích hữu ích cho người dùng
Hiện tại, phiên bản cao nhất của Spring Boot là Spring Boot 2.6.6, được phát hành vào ngày 04 tháng 2022
1.1.3 Tại sao lại sử dụng Spring Boot?
Spring Boot nên được sử dụng vì:
- Spring Boot sử dụng phương pháp Dependency Injection, giúp quản lý các phụ thuộc giữa các thành phần trong ứng dụng một cách dễ dàng và linh hoạt
![Hình 1-2: Khái niệm của Json Web Token [3] - tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop](https://media.store123doc.com/figures/005/778/hinh-khai-niem-cua-json-web-token-5778022.webp)
![Hình 1-16: DOM chỉ render lại nơi bị thay đổi [4] - tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop](https://media.store123doc.com/figures/005/778/hinh-dom-render-thay-doi-5778024.webp)
![Hình 1-18: Khái niệm restful [7] - tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop](https://media.store123doc.com/figures/005/778/hinh-khai-niem-restful-5778025.webp)
