1. Trang chủ
  2. » Luận Văn - Báo Cáo

Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop

122 8 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Nội dung

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 2424 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.

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THÔNG TIN LỜI CẢM ƠN Lời nhóm xin phép gửi lời cảm ơn chân thành sâu sắc nhất tới thầy Nguyễn Thành Sơn, giảng viên tận tình dạy tạo điều kiện giúp đỡ đề tài nhóm q trình học tập, nghiên cứu hoàn thành đề tài tiểu luận chuyên ngành Với lịng biết ơn sâu sắc 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 kiện cho nhóm thực đề tài học tập, phát triển tảng kiến thức sâu sắc Mặc dù cố gắng nhiều, tiểu luận khơng tránh khỏi thiếu sót, nên nhóm thực để tài mong nhận thơng cảm, dẫn, giúp đỡ đóng góp ý kiến quý thầy cô Chúng em xin chân thành cảm ơn! Và sau cùng, chúng em kính chúc quý thầy, quý cô dồi sức khỏe thành công MỤC LỤC MỤC LỤC Danh mục hình ảnh .9 Danh mục bảng 13 PHẦN 1: MỞ ĐẦU 14 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 14 MỤC ĐÍCH VÀ NHIỆM VỤ CỦA ĐỀ TÀI 15 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 15 PHƯƠNG PHÁP NGHIÊN CỨU 16 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 16 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 16 BỐ CỤC BÀI TIỂU LUẬN 17 PHẦN 2: NỘI DUNG 18 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 18 SPRING BOOT FRAMEWORK 18 ReactJS 29 My SQL 32 Post Man 33 RESTFUL API 33 ChatGPT 34 Chat RealTime 36 Paypal payment 38 Telegram Bot 45 CHƯƠNG 2: KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ VÀ MƠ HÌNH HĨA U CẦU 48 KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ 48 MƠ TẢ BÀI TỐN VÀ XÁC ĐỊNH U CẦU 52 MƠ HÌNH HĨA YÊU CẦU 54 CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE BÁN LAPTOP 83 Thiết kế sở liệu 83 Thiết kế wireframe customer 92 Thiết kế Wireframe Admin .96 CHƯƠNG 4: TỔ CHỨC VÀ CÀI ĐẶT CHƯƠNG TRÌNH 102 Mơi trường cài đặt 102 Kiến trúc chương trình 103 Các chức website cài đặt thành công .108 CHƯƠNG 5: KIỂM THỬ PHẦN MỀM 115 Kế hoạch kiểm thử 115 Mục tiêu kiểm thử 115 Phương pháp kiểm thử 115 Công cụ kiểm thử 116 Thực kiểm thử .116 PHẦN 3: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 121 Những kết đạt 121 Ưu điểm 121 Nhược điểm 121 Hướng phát triển 122 PHẦN 4: TÀI LIỆU THAM KHẢO 122 Danh mục hình ảnh Hình 1-1: Kiến trúc Spring Boot 19 Hình 1-2: Khái niệm Json Web Token 20 Hình 1-3: Ví dụ sơ đồ hoạt động Json Web Token 21 Hình 1-4: Thành phần Json Web Token 22 Hình 1-5: Spring Initializer 24 Hình 1-6: Thêm Dependencies cho Spring Project 25 Hình 1-7: Thêm dependency vào file pom 26 Hình 1-8: Class EmailService 26 Hình 1-9: Lỗi giới hạn mail 27 Hình 1-10: Giao diện bảo mật gmail 27 Hình 1-11: Bật xác minh bước chọn mật ứng dụng 28 Hình 1-12: Tạo mật ứng dụng 28 Hình 1-13: Mật tạo thành cơng 29 Hình 1-14: Cấu hình port email back end 29 Hình 1-15: Logo React JS 30 Hình 1-16: DOM render lại nơi bị thay đổi 30 Hình 1-17: Các state dùng chung lưu vào Redux store 31 Hình 1-18: Khái niệm restful 34 Hình 1-19: Cách thức hoạt động ResfulAPI 34 Hình 1-20: Giao diện chat GPT 35 Hình 1-21: Giao diện tạo API key OpenAI 35 Hình 1-22: Lưu API key vào biến mơi trường 35 Hình 1-23: Những component cho chat box 36 Hình 1-24: Gọi đến API OpenAI 36 Hình 1-25: Tạo project Firebase thành cơng 37 Hình 1-26: Tệp firebaseConfig.js 37 Hình 1-27: Ví dụ function đọc liệu chat database 38 Hình 1-28: Gọi function writeUserChatData 38 Hình 1-29: Gọi function onValue node account user id 38 Hình 1-30: Đăng ký tài khoản business Paypal 39 Hình 1-31: Điền thơng tin để tạo tài khoản Paypal business 39 Hình 1-32: Paypal gợi ý xác thực đăng ký thành cơng 40 Hình 1-33: Điền thông tin cá nhân để xác thực tài khoản Paypal 41 Hình 1-34: Điền thơng tin doanh nghiệp để xác thực tài khoản Paypal 42 Hình 1-35: Vào mơi trường developer Paypal 43 Hình 1-36: Tạo app 43 Hình 1-37: Chọn platform 44 Hình 1-38: Client ID Secret key sinh 44 Hình 1-39: Lưu key vào source code 44 Hình 1-40: Tìm kiếm BotFather 46 Hình 1-41: Gửi /newbot 47 Hình 2-1: Giao diện trang chủ ViettelStore 48 Hình 2-2: Giao diện trang chi tiết sản phẩm ViettelStore 49 Hình 2-3: Giao diện trang chủ NguyenKim 49 Hình 2-4: Giao diện trang sản phẩm NguyenKim 50 Hình 2-5: Giao diện trang chủ PhucAnh 50 Hình 2-6: Giao diện trang sản phẩm PhucAnh 51 Hình 2-7: Giao diện trang chủ thegioididong 51 Hình 2-8: Giao diện trang sản phẩm thegioididong 52 Hình 2-9: Lược đồ Usecase tổng quát 54 Hình 2-10: Sơ đồ use case chi tiết quản trị viên 55 Hình 2-11: Sơ đồ use case chi tiết cho khách hàng 56 Hình 2-12: Sơ đồ use case chi tiết cho khách 56 Hình 2-13: Lược đồ đăng ký tài khoản 71 Hình 2-14: Lược đồ xem chi tiết sản phẩm 72 Hình 2-15: Lược đồ tìm kiếm sản phẩm 72 Hình 2-16: Lược đồ đăng nhập 73 Hình 2-17: Lược đồ đăng xuất 73 Hình 2-18: Lược đồ xem tình trạng đơn hàng 74 Hình 2-19: Lược đồ đánh giá sản phẩm 74 Hình 2-20: Lược đồ đặt mua sản phẩm 75 Hình 2-21: Lược đồ cập nhập giỏ hàng 75 Hình 2-22: Lược đồ xóa giỏ hàng 76 Hình 2-23: Lược đồ hủy đơn hàng 76 Hình 2-24: Lược đồ thêm sản phẩm 77 Hình 2-25: Lược đồ thêm nhà cung cấp 77 Hình 2-26: Lược đồ thêm tin tức 78 Hình 2-27: Lược đồ hủy đơn hàng 78 Hình 2-28: Lược đồ xác nhận đơn hàng 79 Hình 2-29: Lược đồ duyệt đơn hàng 79 Hình 2-30: Lược đồ thống kê 79 Hình 2-31: Lược đồ tốn Paypal 80 Hình 2-32: Lược đồ sửa địa giap hàng 80 Hình 2-33: Lược đồ đổi mật 80 Hình 2-34: Lược đồ cập nhật thông tin tài khoản 81 Hình 2-35: Lược đồ quên mật 81 Hình 2-36: Lược đồ login Google 82 Hình 2-37: Lược đồ thêm sản phẩm u thích 82 Hình 3-1: Lược đồ ER biểu diễn thành phần liệu hệ thống 83 Hình 3-2: Cơ sở liệu mức vật lý 91 Hình 3-3: Wireframe trang chủ 92 Hình 3-4: Wireframe trang sản phẩm 92 Hình 3-5: Wireframe trang chi tiết sản phẩm 93 Hình 3-6: Wireframe trang giỏ hàng 93 Hình 3-7: Wireframe trang thơng tin đặt hàng 94 Hình 3-8: Wireframe trang liên hệ 94 Hình 3-9: Wireframe trang tin tức 95 Hình 3-10: Wireframe trang chi tiết tin tức 95 Hình 3-11: Wireframe trang chủ admin 96 Hình 3-12: Wireframe trang đơn hàng 96 Hình 3-13: Wireframe trang đơn hàng duyệt 97 Hình 3-14: Wireframe trang đơn hàng giao 97 Hình 3-15: Wireframe trang đơn hàng giao 98 Hình 3-16: Wireframe trang đơn hàng hủy 98 Hình 3-17: Wireframe trang quản lý người dùng 99 Hình 3-18: Wireframe trang chỉnh sửa người dùng 99 Hình 3-19: Wireframe trang quản lý sản phẩm 100 Hình 3-20: Wireframe trang quản lý nhà cung cấp 100 Hình 3-21: Wireframe trang quản lý tin tức 101 Hình 3-22: Wireframe trang chat 101 Hình 4-1: Kiến trúc tổ chức source backend 103 Hình 4-2: Kiến trúc tổ chức source backend 103 Hình 4-3: Kiến trúc tổ chức source front end admin 105 Hình 4-4: Kiến trúc tổ chức thư mục public front end admin 105 Hình 4-5: Kiến trúc tổ chức thư mục src front end admin 106 Hình 4-6: Kiến trúc tổ chức source front end customer 106 Hình 4-7: Kiến trúc tổ chức thư mục public front end customer 107 Hình 4-8: Kiến trúc tổ chức thư mục src front end customer 108 Hình 4-9: Giao diện trang chủ customer 109 Hình 4-10: Giao diện Đăng nhập 110 Hình 4-11: Giao diện trang danh sách sản phẩm 111 Hình 4-12: Giao diện trang giỏ hàng 112 Hình 4-13: Giao diện trang đặt hàng 112 Hình 4-14: Giao diện dashboard admin 113 Hình 4-15: Giao diện quản lí đơn hàng 113 Hình 4-16: Giao diện quản lí sản phẩm 113 Hình 4-17: Giao diện quản lí nhà cung cấp 114 Hình 4-18: Giao diện quản lí tin tức 114 Danh mục bảng Bảng 2-1: Mô tả Usecase đăng kí tài khoản 57 Bảng 2-2: Mơ tả Usecase xem chi tiết sản phẩm 57 Bảng 2-3: Mô tả Usecase tìm kiếm sản phẩm 58 Bảng 2-4: Mơ tả Usecase đăng nhập 59 Bảng 2-5: Mơ tả Usecase xem tình trạng đơn hàng 60 Bảng 2-6: Mô tả Usecase đánh giá sản phẩm 60 Bảng 2-7: Mô tả Usecase đặt mua sản phẩm 61 Bảng 2-8: Mô tả Usecase cập nhật giỏ hàng 62 Bảng 2-9: Mơ tả Usecase xóa giỏ hàng 63 Bảng 2-10: Mô tả Usecase hủy đơn hàng (Khách hàng) 63 Bảng 2-11: Mô tả Usecase thêm sản phẩm 64 Bảng 2-12: Mô tả Usecase thêm nhà cung cấp 65 Bảng 2-13: Mô tả Usecase thêm tin tức 66 Bảng 2-14: Mô tả Usecase hủy đơn hàng 67 Bảng 2-15: Mô tả Usecase duyệt đơn hàng 67 Bảng 2-16: Mô tả Usecase xác nhận đơn hàng giao 68 Bảng 2-17: Mô tả Usecase thống kê 68 Bảng 2-18: Mơ tả Usecase tốn Paypal 69 Bảng 2-19: Mô tả Usecase quản lý User 70 Bảng 2-20: Trả lời chat 70 Bảng 3-1: Chi tiết liệu bảng NEW 84 Bảng 3-2: Chi tiết liệu bảng SUPPLIER 84 Bảng 3-3: Chi tiết liệu bảng PRODUCT 85 Bảng 3-4: Chi tiết liệu bảng ACCOUNT 87 Bảng 3-5: Chi tiết liệu bảng CART 88 Bảng 3-6: Chi tiết liệu bảng WISHLIST 88 Bảng 3-7: Chi tiết liệu bảng ORDERS 88 Bảng 3-8: Chi tiết liệu bảng ORDER_DETAIL 89 Bảng 3-9: Chi tiết liệu bảng REVIEWS 89 Bảng 5-1: Bảng thực kiểm thử 116 PHẦN 1: MỞ ĐẦU TÍNH CẤP THIẾT CỦA ĐỀ TÀI Bước vào kỷ 21, phát triển mạnh mẽ khoa học công nghệ định hình giới mới, với Cơng nghệ Thơng tin đóng vai trị dẫn đầu góp phần quan trọng phát triển chung Trong năm gần đây, vai trị hệ thống thơng tin doanh nghiệp ngày trở nên quan trọng mạnh mẽ Như phần lĩnh vực Công nghệ thông tin, Công nghệ web phát triển lan rộng nhanh chóng nhờ vào lợi ích to lớn mà mang lại cho cộng đồng Và lý chúng em chọn đề tài "Xây dựng website bán laptop", nhằm tìm hiểu đề xuất giải pháp tối ưu để hỗ trợ doanh nghiệp cửa hàng muốn kinh doanh laptop sản phẩm máy tính xách tay Bằng cách sử dụng tảng công nghệ web thương mại điện tử, việc bán laptop thông qua website mang lại nhiều lợi ích thuận lợi cho cơng ty sản xuất laptop nói chung cửa hàng phân phối nói riêng Điều bao gồm việc tăng độ tiếng tên tuổi công ty cửa hàng môi trường mạng toàn cầu (như MSI, ACER, DELL, LENOVO ), mở cửa 24/24 cho q trình kinh doanh, giảm chi phí quảng cáo truyền thống tiếp thị, quảng cáo dễ dàng qua tảng đa phương tiện, dễ dàng giao tiếp 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 lựa chọn linh hoạt tiện lợi việc tìm mua sản phẩm Khách hàng dễ dàng tìm hiểu xem thơng tin chi tiết sản phẩm, từ lựa chọn laptop với thông số kỹ thuật phù hợp giá phù hợp với khả tài Đối với hãng sản xuất cửa hàng đại lý, website thương mại bán laptop mang lại tiện ích việc cập nhật quản lý thông tin cho website, 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 phát triển lợi ích đề cập cách áp dụng kiến thức học vào thực tế xây dựng website bán laptop với đầy đủ chức để đáp ứng nhu cầu sử dụng người dùng Đó lý mà nhóm chúng em định thực đề tài "Tìm hiểu cơng nghệ Spring Boot, React JS xây dựng ứng dụng Website bán laptop" Hình 4-11: Giao diện trang danh sách sản phẩm Hình 4-12: Giao diện trang giỏ hàng Hình 4-13: Giao diện trang đặt hàng Hình 4-14: Giao diện dashboard admin Hình 4-15: Giao diện quản lí đơn hàng Hình 4-16: Giao diện quản lí sản phẩm Hình 4-17: Giao diện quản lí nhà cung cấp Hình 4-18: Giao diện quản lí tin tức CHƯƠNG 5: KIỂM THỬ PHẦN MỀM Kế hoạch kiểm thử 1.1 Trong phạm vi kiểm thử Nhóm em tiến hành kiểm kiểm thử phần mềm chủ yếu mặt logic, luận lý chức sau: - Chức xác thực tài khoản: o Đăng nhập o Đăng ký tài khoản o Chức xác thực tài khoản 1.2 - Chức tìm kiếm sản phẩm: - Chức quản lý giỏ hàng - Chức quản lý đơn hàng Ngoài phạm vi kiểm thử - Giao diện thân thiện thao tác cho chức có thân thiện dễ sử dụng hay không - Độ ổn định trang web tốc độ load trang Mục tiêu kiểm thử Trước kiểm thử, cần xác định thông tin dự án thành phần chức kiểm thử khơng kiểm thử Sau đó, liệt kê yêu cầu kiểm thử, chọn chiến lược kiểm thử phù hợp ước lượng tài nguyên chi phí Cuối cùng, tạo tài liệu liên quan sau hoàn thành kiểm thử Phương pháp kiểm thử 3.1 Tổng quan phương pháp kiểm thử sử dụng đề tài Kiểm thử hộp đen tập trung vào việc kiểm tra giá trị đầu vào đầu hệ thống mà không quan tâm đến cách thức hoạt động bên Nó đánh giá chất lượng hệ thống dựa kết cuối 3.2 Các loại test(Levels Test) Unit Test phương pháp kiểm thử đơn vị thành phần đơn lẻ phần mềm để xác định tính xác kết chúng Integration Test phương pháp kiểm thử tích hợp module chức riêng lẻ để đảm bảo tích hợp xác tương tác chúng System Test phương pháp kiểm thử toàn hệ thống, bao gồm tất chức thành phần, để đảm bảo hệ thống hoạt động xác đáp ứng yêu cầu kiểm thử 3.3 Các mục tiêu test Đảm bảo chức hoạt động yêu cầu đề Công cụ kiểm thử - Google Chrome - Eclipse - MySQL - Postman - VsCode Môi trường test: Hệ điều hành Windows 11 Thực kiểm thử Bảng 5-1: Bảng thực kiểm thử S T T Mô tả Kiểm thử chức đăng ký tài khoản - Nhập đầy đủ thông tin đăng ký Kiểm thử chức đăng nhập - Nhập đầy đủ thông tin đăng nhập Các bước thực - Nhấn nút Đăng ký Kết mong đợi Kết thực tế Trạng thái Thông báo đăng ký thành công chuyển sang trang đăng nhập Thông báo đăng ký thành công chuyển sang trang đăng nhập Đạt Thông báo đăng nhập thành công chuyển sang trang chủ Thông báo đăng nhập thành công chuyển sang trang chủ Đạt - Kiểm tra email đăng kí nhập vào xác thực - Nhấn nút Đăng nhập Kiểm thử chức đăng xuất - Chọn Đăng xuất Đăng xuất thành công Đăng xuất thành cơng Đạt Kiểm thử chức tìm kiếm sản phẩm - Chọn tên sản vào tìm kiếm Hiển thị sản phẩm muốn tìm kiếm Đạt - Chọn Tìm kiếm Hiển thị sản phẩm muốn tìm kiếm Kiểm thử chức xem chi tiết sản phẩm - Chọn vào sản phẩm muốn xem chi tiết Hiển thị chi tiết thông tin sản phẩm Hiển thị chi tiết thông tin sản phẩm Đạt Kiểm thử chức đặt mua sản phẩm - Chọn vào sản phẩm muốn mua sau nhấn thêm vào giỏ hàng Hệ thống thông báo thêm thành công Hệ thống thông báo thêm thành công Đạt Kiểm thử chức cập nhật giỏ hàng - Thay đổi số Số lượng sản lượng sản phẩm tăng theo phẩm thêm vào yêu cầu giỏ thêm mong muốn Số lượng sản phẩm tăng theo yêu cầu Đạt Kiểm thử chức đặt hàng toán - Chọn sản phẩm muốn mua giỏ Hệ thống thông báo đặt hàng thành công Hệ thống thông báo đặt hàng thành công Đạt Hệ thống hiển thị đơn hàng trạng thái đơn hàng Hệ thống hiển thị Đạt đơn hàng trạng thái đơn hàng - Chọn Đặt hàng - Nhập đầy đủ thông người nhận - Nhấp tiếp tục mua hàng Kiểm thử chức xem chi tiết đơn hàng - Chọn Đơn mua - Tùy chọn trạng thái 10 Kiểm thử chức hủy đơn hàng khách hàng - Chọn đơn mua - Chọn trạng thái Chưa duyệt Đơn hàng hủy Đơn hàng hủy Đạt - Chọn đơn hàng muốn hủy bỏ - Chọn Hủy bỏ 11 Kiểm thử chức xóa giỏ hàng - Chọn sản phẩm muốn xóa Hệ thống xóa Hệ thống xóa sản phẩm khỏi sản phẩm khỏi giỏ hàng giỏ hàng Đạt 12 Kiểm thử chức xem tình đơn hàng - Chọn Đơn mua Hệ thống hiển thị đơn hàng trạng thái đơn hàng Hệ thống hiển thị đơn hàng trạng thái đơn hàng Đạt 13 Kiểm thử chức thêm nhà cung cấp - Đăng nhập tài khoản quản trị viên Hệ thống thêm nhà cung cấp thông báo thêm thành công Hệ thống thêm nhà cung cấp thông báo thêm thành công Đạt Hệ thống thêm tin tức thông báo thêm thành công Hệ thống thêm tin tức thông báo thêm thành công Đạt - Chọn xóa - Chọn quản lí nhà cung cấp - Chọn thêm nhà cung cấp - Nhập đầy đủ thông tin muốn nhà cung cấp - Chọn Thêm 14 Kiểm thử chức thêm tin tức - Đăng nhập tài khoản quản trị viên - Chọn quản lí tin tức - Nhập đầy đủ thông tin tin tức - Chọn Thêm 15 Kiểm thử chức sửa tin tức - Đăng nhập tài khoản quản trị viên - Chọn quản lí tin tức Hệ thống thay đổi tin tức vừa sửa thông báo sửa thành công Hệ thống thay đổi tin tức vừa sửa thông báo sửa thành công Đạt Hệ thống thêm sản phẩm thông báo thêm thành công Hệ thống thêm sản phẩm thông báo thêm thành công Đạt Hệ thống thay đổi sản phẩm vừa sửa thông báo sửa thành công Đạt - Chọn vào tin tức muốn sửa - Chọn vào Sửa - Nhập đầy đủ thông tin muốn sửa tin tức - Chọn Hoàn tất 16 Kiểm thử chức thêm sản phẩm - Đăng nhập tài khoản quản trị viên - Chọn quản lý sản phẩm - Chọn vào thêm sản phẩm - Nhập đầy đủ thông tin sản phẩm - Chọn vào Thêm 17 Kiểm thử chức sửa sản phẩm - Đăng nhập tài khoản quản trị viên Hệ thống thay đổi sản phẩm vừa sửa thơng - Chọn quản lí sản báo sửa thành công phẩm - Chọn vào sản phẩm muốn sửa - Chọn vào Sửa - Nhập đầy đủ thông tin muốn sửa sản phẩm - Chọn Hoàn tất 18 Kiểm thử chức duyệt đơn hàng - Đăng nhập tài khoản quản trị viên - Chọn quản lý đơn hàng Hệ thống thông báo duyệt đơn hàng thành công Hệ thống thông báo duyệt đơn hàng thành công Đạt Hệ thống thông báo xác nhận đơn hàng giao thành công Hệ thống thông báo xác nhận đơn hàng giao thành công Đạt Hệ thống thông báo hủy đơn hàng thành công Hệ thống thông báo hủy đơn hàng thành công Đạt Hệ thống hiển thị doanh thu đơn hàng đặt Hệ thống hiển thị doanh thu đơn hàng đặt Đạt - Chọn trạng thái đơn chưa duyệt - Chọn sản phẩm muốn duyệt - Chọn Duyệt 19 Kiểm thử chức xác nhận đơn hàng giao - Đăng nhập tài khoản quản trị viên - Chọn quản lý đơn hàng - Chọn trạng thái đơn duyệt - Chọn sản phẩm muốn xác nhận - Chọn Xác nhận 20 Kiểm thử chức hủy đơn hàng - Đăng nhập tài khoản quản trị viên - Chọn quản lý đơn hàng - Chọn trạng thái đơn chưa duyệt - Chọn sản phẩm muốn hủy - Chọn Hủy bỏ 21 Kiểm thử chức thống kê - Đăng nhập tài khoản quản trị viên - Thống kê doanh thu tháng đơn hàng PHẦN 3: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Những kết đạt Nắm vững kiến thức công nghệ hệ quản trị sở liệu sử dụng đề tài, bao gồm Spring Boot, React, JSON Web Token, Postman Rest API Điều đảm bảo bạn có đủ kiến thức để triển khai thành công dự án website bán laptop làm việc hiệu công việc liên quan Vận dụng kiến thức học vào thực tế để xây dựng thành công website bán laptop với chức Sử dụng Spring Boot React để xây dựng phần back-end front-end website, sử dụng JSON Web Token để quản lý xác thực phân quyền người dùng, sử dụng Postman để kiểm thử xác nhận tính đắn API Restful Rèn luyện kỹ làm việc độc lập làm việc nhóm Trong q trình xây dựng dự án website bán laptop, bạn có hội làm việc độc lập để nghiên cứu triển khai công nghệ chức Đồng thời, bạn cần làm việc nhóm để phối hợp, chia sẻ kiến thức giải vấn đề phát sinh Phát triển kỹ linh hoạt vị trí ngành Công nghệ thông tin BA (Business Analyst), Tester, Dev (Developer), Điều cho phép bạn tham gia vào vai trị khác quy trình phát triển phần mềm làm việc với công nghệ công cụ khác để đáp ứng yêu cầu mục tiêu dự án Ưu điểm - Luồng xử lý chức thông dụng hay sử dụng website thương mại tiếng Shopee, Tiki, … nên thân thiện với người dùng Giao diện thân thiện dễ nhìn, dễ sử dụng Chat tương tác người dung , chat GPT Kiến trúc mã nguồn rõ ràng, dễ bảo trì mở rộng tương lai Sử dụng JSON Web Token để tăng tính bảo mật cho hệ thống web Website có số chức bật như: o Zoom hình ảnh sản phẩm o Tương tác qua mail với người dùng xác thực tài khoản sử dụng, thay đổi mật … Nhược điểm - Responsive chưa tốt - Chưa có chức cho bên thứ (shiper) - Tìm kiếm cịn hạn chế - Hình ảnh sản phẩm đa dạng, Hướng phát triển - Khắc phục nhược điểm nêu thêm số chức bật khác mà số website thương mại có như: o Ảnh sản phẩm dạng 3D, có video hình ảnh o Hệ thống gợi ý sản phẩm cho người dùng o Tìm kiếm thơng tin sản phẩm theo nhiều tiêu chí o Có chương trình kiện áp mã giảm giá PHẦN 4: TÀI LIỆU THAM KHẢO _ Link tham khảo MySql ● https://dev.mysql.com/doc/refman/8.0/en/what-is-mysql.html ● https://www.oreilly.com/library/view/understanding-mysql-internals/059600957 7/ch01.html ● https://www.tecmint.com/what-is-mysql-how-does-mysql-work/ ● https://wiki.matbao.net/mysql-la-gi-huong-dan-toan-tap-ve-mysql/#thuat-ngu-th uong-gap-cua-mysql _ Link tham khảo Spring boot ● https://openplanning.net/11267/huong-dan-lap-trinh-spring-boot-cho-nguoi-moi -bat-dau ● Tạo project Spring boot: ● https://viblo.asia/p/tao-du-an-spring-boot-dau-tien-gDVK2L0wlLj ● https://techmaster.vn/posts/36698/loi-ich-va-han-che-cua-viec-su-dung-spring-b oot ● https://devk2x.com/java/spring-framework/03-spring-boot-architecture/ _ Link tham khảo JWT ● https://viblo.asia/p/securing-spring-boot-with-jwt-bJzKm14rK9N ● https://topdev.vn/blog/jwt-la-gi/ ● https://teky.edu.vn/blog/jwt-la-gi/ _ Link tham khảo React JS ● https://wiki.tino.org/cach-thuc-hoat-dong-cua-reactjs/ ● https://viblo.asia/p/reactjs-la-gi-nhung-dieu-can-biet-ve-reactjsc-djeZ1GJo5Wz ● https://openplanning.net/12115/gioi-thieu-ve-react#:~:text=React%20(Hay%20 ReactJS%2C%20React.,s%C6%B0%20ph%E1%BA%A7n%20m%E1%BB%8 1m%20t%E1%BA%A1i%20Facebook _ Link tham khảo JSX ● https://reactjs.org/docs/introducing-jsx.html _ Link tham khảo Redux ● https://viblo.asia/p/redux-co-ban-m68Z00JdZkG ● https://itnavi.com.vn/blog/redux-la-gi ● https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers ● https://redux.js.org/tutorials/fundamentals/part-4-store _ Link tham khảo postman : ● https://itnavi.com.vn/blog/postman-la-gi ● https://vietnix.vn/postman-la-gi/ ● https://abcdonline.vn/postman-la-gi/ 126

Ngày đăng: 02/11/2023, 20:37

HÌNH ẢNH LIÊN QUAN

Hình 1-4: Thành phần trong Json Web Token - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 1 4: Thành phần trong Json Web Token (Trang 18)
Hình 1-16: DOM chỉ render lại nơi bị thay đổi - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 1 16: DOM chỉ render lại nơi bị thay đổi (Trang 26)
Hình 1-17: Các state dùng chung được lưu vào Redux store - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 1 17: Các state dùng chung được lưu vào Redux store (Trang 27)
Hình 1-18: Khái niệm restful - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 1 18: Khái niệm restful (Trang 31)
Hình 1-32: Paypal gợi ý xác thực khi đăng ký thành công - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 1 32: Paypal gợi ý xác thực khi đăng ký thành công (Trang 37)
Hình 1-33: Điền các thông tin cá nhân để xác thực tài khoản Paypal - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 1 33: Điền các thông tin cá nhân để xác thực tài khoản Paypal (Trang 38)
Hình 1-34: Điền các thông tin doanh nghiệp để xác thực tài khoản Paypal - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 1 34: Điền các thông tin doanh nghiệp để xác thực tài khoản Paypal (Trang 39)
Hình 1-41: Gửi /newbot - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 1 41: Gửi /newbot (Trang 44)
Hình 2-6: Giao diện trang sản phẩm PhucAnh - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 2 6: Giao diện trang sản phẩm PhucAnh (Trang 48)
Hình 2-8: Giao diện trang sản phẩm thegioididong - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 2 8: Giao diện trang sản phẩm thegioididong (Trang 49)
Hình 2-9: Lược đồ Usecase tổng quát - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 2 9: Lược đồ Usecase tổng quát (Trang 51)
Hình 2-10: Sơ đồ use case chi tiết quản trị viên - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 2 10: Sơ đồ use case chi tiết quản trị viên (Trang 52)
Hình 2-11: Sơ đồ use case chi tiết cho khách hàng - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 2 11: Sơ đồ use case chi tiết cho khách hàng (Trang 53)
Hình 2-14: Lược đồ tuần tự xem chi tiết sản phẩm - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 2 14: Lược đồ tuần tự xem chi tiết sản phẩm (Trang 69)
Hình 2-16: Lược đồ tuần tự đăng nhập - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 2 16: Lược đồ tuần tự đăng nhập (Trang 70)
Hình 2-18: Lược đồ tuần tự xem tình trạng đơn hàng - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 2 18: Lược đồ tuần tự xem tình trạng đơn hàng (Trang 71)
Hình 2-20: Lược đồ tuần tự đặt mua sản phẩm - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 2 20: Lược đồ tuần tự đặt mua sản phẩm (Trang 72)
Hình 2-24: Lược đồ tuần tự thêm sản phẩm - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 2 24: Lược đồ tuần tự thêm sản phẩm (Trang 74)
Hình 2-26: Lược đồ tuần tự thêm tin tức - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 2 26: Lược đồ tuần tự thêm tin tức (Trang 75)
Hình 2-28: Lược đồ tuần tự xác nhận đơn hàng - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 2 28: Lược đồ tuần tự xác nhận đơn hàng (Trang 76)
Hình 2-34: Lược đồ tuần tự cập nhật thông tin tài khoản - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 2 34: Lược đồ tuần tự cập nhật thông tin tài khoản (Trang 78)
Hình 2-36: Lược đồ tuần tự login Google - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 2 36: Lược đồ tuần tự login Google (Trang 79)
Hình 3-2: Cơ sở dữ liệu mức vật lý - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 3 2: Cơ sở dữ liệu mức vật lý (Trang 88)
Hình 3-5: Wireframe trang chi tiết sản phẩm - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 3 5: Wireframe trang chi tiết sản phẩm (Trang 90)
Hình 3-17: Wireframe trang quản lý người dùng - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 3 17: Wireframe trang quản lý người dùng (Trang 96)
Hình 4-9: Giao diện trang chủ customer - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 4 9: Giao diện trang chủ customer (Trang 106)
Hình 4-10: Giao diện Đăng nhập - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 4 10: Giao diện Đăng nhập (Trang 107)
Hình 4-11: Giao diện trang danh sách sản phẩm - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 4 11: Giao diện trang danh sách sản phẩm (Trang 108)
Hình 4-12: Giao diện trang giỏ hàng - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 4 12: Giao diện trang giỏ hàng (Trang 109)
Hình 4-17: Giao diện quản lí nhà cung cấp - Tìm hiểu spring boot và react js ứng dụng xây dựng website bán laptop
Hình 4 17: Giao diện quản lí nhà cung cấp (Trang 111)

TỪ KHÓA LIÊN QUAN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w