Tìm hiểu cách xây dựng website bán đồng hồ bằng React JS và ASP.NET Core API

Khám phá công nghệ React JS, ASP.NET Core API và hướng dẫn xây dựng website bán đồng hồ hiệu quả, tối ưu hóa trải nghiệm người dùng.

• Tác giả: Nguyễn Đức Hòa
• Người hướng dẫn: TS. Huỳnh Xuân Phụng
• Trường học: Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Tìm hiểu về công nghệ React JS, ASP.NET Core API và xây dựng website bán đồng hồ
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2022
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Xây dựng website bán đồng hồ

Xây dựng website bán đồng hồ là một trong những ứng dụng thực tế của công nghệ web hiện đại. Trong bối cảnh thương mại điện tử phát triển mạnh mẽ, việc tạo ra một nền tảng bán hàng trực tuyến không chỉ giúp doanh nghiệp tiếp cận khách hàng rộng rãi mà còn tối ưu hóa quy trình quản lý sản phẩm và đơn hàng. Website thương mại điện tử được xây dựng với các chức năng cơ bản như đăng ký, đăng nhập, quản lý giỏ hàng, thanh toán trực tuyến, và quản lý sản phẩm. Điều này đòi hỏi sự kết hợp giữa thiết kế website và lập trình web để tạo ra một giao diện người dùng thân thiện và hiệu quả.

1.1. Thiết kế website

Thiết kế website là bước đầu tiên trong quá trình xây dựng một nền tảng thương mại điện tử. Giao diện người dùng cần được thiết kế sao cho dễ sử dụng, trực quan và đáp ứng được nhu cầu của khách hàng. Các yếu tố như bố cục, màu sắc, và cách trình bày thông tin sản phẩm đóng vai trò quan trọng trong việc thu hút và giữ chân người dùng. Giao diện người dùng cần được tối ưu hóa để đảm bảo trải nghiệm mua sắm mượt mà và hiệu quả.

1.2. Lập trình web

Lập trình web là quá trình phát triển các chức năng cốt lõi của website. Sử dụng ngôn ngữ lập trình như C# và framework React, các lập trình viên có thể xây dựng các tính năng như đăng nhập, quản lý giỏ hàng, và thanh toán trực tuyến. Phát triển ứng dụng web đòi hỏi sự kết hợp giữa front-end và back-end để đảm bảo tính đồng bộ và hiệu suất của hệ thống.

II. Công nghệ React JS và ASP

React JS và ASP.NET Core API là hai công nghệ hàng đầu được sử dụng trong việc phát triển các ứng dụng web hiện đại. React JS là một thư viện JavaScript mạnh mẽ, giúp xây dựng giao diện người dùng động và hiệu quả. Trong khi đó, ASP.NET Core API là một framework phát triển back-end, cung cấp các công cụ để xây dựng các dịch vụ web và API mạnh mẽ. Sự kết hợp giữa hai công nghệ này cho phép tạo ra các ứng dụng web có hiệu suất cao và dễ dàng mở rộng.

2.1. Framework React

Framework React là một trong những công cụ phổ biến nhất để phát triển giao diện người dùng. Với cấu trúc component-based, React cho phép các nhà phát triển tạo ra các giao diện động và dễ dàng tái sử dụng. Phát triển phần mềm với React giúp tối ưu hóa quy trình làm việc và cải thiện hiệu suất của ứng dụng.

2.2. ASP.NET Core API

ASP.NET Core API là một framework mạnh mẽ để xây dựng các dịch vụ web và API. Với khả năng xử lý các yêu cầu HTTP và tích hợp với các cơ sở dữ liệu, API cho website được phát triển với ASP.NET Core có thể đáp ứng các nhu cầu phức tạp của các ứng dụng thương mại điện tử. Tích hợp API giữa front-end và back-end là yếu tố quan trọng để đảm bảo tính đồng bộ và hiệu suất của hệ thống.

III. Tối ưu hóa SEO và bảo mật website

Tối ưu hóa SEO và bảo mật website là hai yếu tố không thể thiếu trong việc phát triển một website thương mại điện tử thành công. Tối ưu hóa SEO giúp cải thiện thứ hạng của website trên các công cụ tìm kiếm, từ đó thu hút nhiều khách hàng tiềm năng hơn. Trong khi đó, bảo mật website đảm bảo rằng thông tin của khách hàng và dữ liệu giao dịch được bảo vệ an toàn, tránh các rủi ro về an ninh mạng.

3.1. Tối ưu hóa SEO

Tối ưu hóa SEO là quá trình cải thiện khả năng hiển thị của website trên các công cụ tìm kiếm như Google. Các kỹ thuật SEO bao gồm tối ưu hóa từ khóa, cải thiện tốc độ tải trang, và tạo nội dung chất lượng. Công nghệ web hiện đại cung cấp các công cụ và kỹ thuật để giúp các nhà phát triển tối ưu hóa SEO một cách hiệu quả.

3.2. Bảo mật website

Bảo mật website là yếu tố quan trọng để đảm bảo an toàn cho thông tin của khách hàng và dữ liệu giao dịch. Các biện pháp bảo mật bao gồm mã hóa dữ liệu, xác thực người dùng, và bảo vệ chống lại các cuộc tấn công mạng. Phát triển ứng dụng web với các tiêu chuẩn bảo mật cao giúp xây dựng niềm tin với khách hàng và bảo vệ doanh nghiệp khỏi các rủi ro an ninh.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT. 8 Ngôn ngữ C# là gì?. 8 Đặc trưng của ngôn ngữ. 8 Nhược điểm của C# .NET Core là gì?.

9 Sơ lược về lịch sử ASP. 10 Ưu điểm của ASP. 10 Phát triển client-side. 11 Sự khác biệt quan trọng giữa ASP.NET với ASP.

12 Nhược điểm. 13 Ant design là gì?. 14 Unit of work. FPT Recommend Flatform.

15 CHƯƠNG 2: MÔ TẢ YÊU CẦU. Tổng quan quy trình nghiệp vụ. Quy trình quản lí đơn hàng. Các bước thực hiện.

Quy trình người dùng mua hàng. Các bước thực hiện. Quy trình giám sát kho. Các bước thực hiện.

Quy trình quản lí kho. Các bước thực hiện. 20 CHƯƠNG 3: TỔNG QUAN. Khảo sát hiện trạng.

Ma trận quyền. Giả thiết và ràng buộc. 30 CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG. Phân tích hệ thống và danh sách chức năng.

Chức năng phía Khách hàng. Chức năng phía Nhân viên, quản trị viên. Chức năng phía Quản trị viên. Thiết kế dữ liệu.

Mô hình cơ sở dữ liệu. 46 CHƯƠNG 5: ĐẶC TẢ CÁC CHỨC NĂNG. Chức năng đăng nhập. Mô tả Usecase.

Lược đồ hoạt động. Lược đồ tuần tự. Giao diện đăng nhập. Quy tắc nghiệp vụ.

Chức năng đăng ký. Mô tả Usecase. Lược đồ hoạt động. Lược đồ tuần tự.

Giao diện đăng kí. Quy tắc nghiệp vụ. Chức năng quên mật khẩu. Mô tả Usecase.

Lược đồ hoạt động. Lược đồ tuần tự. Giao diện Quên mật khẩu. Quy tắc nghiệp vụ.

Chức năng thanh toán. Mô tả Usecase. Lược đồ hoạt động. Lược đồ tuần tự.

Giao diện trang thanh toán. Quy tắc nghiệp vụ. Chức năng thêm giỏ hàng. Mô tả Usecase.

Lược đồ hoạt động. Lược đồ tuần tự. Giao diện thêm giỏ hàng. Quy tắc nghiệp vụ.

Chức năng bình luận. Mô tả Usecase. Lược đồ hoạt động. Lược đồ tuần tự.

Giao diện Chức năng bình luận. Quy tắc nghiệp vụ. Chức năng thay đổi thông tin. Mô tả Usecase.

Lược đồ hoạt động. Giao diện Cập nhật thông tin. Quy tắc nghiệp vụ. Chức năng xem lịch sử mua hàng.

Mô tả Usecase. Lược đồ hoạt động. Lược đồ tuần tự. Giao diện Lịch sử mua hàng.

Chức năng quản lí tài khoản khách hàng. Mô tả Usecase. Lược đồ hoạt động. Lược đồ tuần tự.

Giao diện Quản lí tài khoản khách hàng. Quy tắc nghiệp vụ. Chức năng quản lí tài khoản nhân viên. Mô tả Usecase.

Lược đồ hoạt động. Lược đồ tuần tự. Giao diện Quản lí tài khoản nhân viên. Quy tắc nghiệp vụ.

Chức năng quản lí đơn hàng. Mô tả Usecase. Lược đồ hoạt động. Lược đồ tuần tự.

Quy tắc nghiệp vụ. Chức năng thống kê theo sản phẩm. Mô tả Usecase. Lược đồ hoạt động.

Giao diện Thống kê theo sản phẩm. Quy tắc nghiệp vụ. Chức năng quản lí đồng hồ. Mô tả Usecase.

Lược đồ hoạt động. Lược đồ tuần tự. Giao diện Quản lí đồng hồ. Quy tắc nghiệp vụ.

Chức năng tìm kiếm và lọc sản phẩm. Lược đồ hoạt động. Lược đồ hoạt động. Lược đồ tuần tự.

Giao diện Tìm kiếm và lọc sản phẩm. Quy tắc nghiệp vụ. Sử dụng chatbot. Mô tả Usecase.

Lược đồ hoạt động. Lược đồ tuần tự. Giao diện Chatbot. Quy tắc nghiệp vụ.

Recommend sản phẩm. Mô tả Usecase. Lược đồ hoạt động. Lược đồ tuần tự.

Giao diện Recommend sản phẩm. Quy tắc nghiệp vụ. Đánh giá sản phẩm. Mô tả Usecase.

Lược đồ hoạt động. Lược đồ tuần tự. Giao diện Đánh giá sản phẩm. Quy tắc nghiệp vụ.

151 CHƯƠNG 6: QUẢN LÍ DỰ ÁN VÀ TIẾN ĐỘ. Quản lí rủi ro. Xác định rủi ro. Mức độ ảnh hưởng.

Phương án xử lí dự kiến. Kế hoạch quản lí. 153 CHƯƠNG 7: CÀI ĐẶT VÀ KIỂM THỬ. Công nghệ sử dụng:.

Phần mềm sử dụng:. Hướng dẫn cài đặt:. Đường dẫn trang quản trị viên, nhân viên:. Đường dẫn website.

159 PHẦN KẾT LUẬN. Những kết quả đạt được. Nhược điểm. Hướng phát triển.

168 TÀI LIỆU THAM KHẢO. 171 LỜI CẢM ƠN Được sự phân công khoa Công Nghệ Thông Tin, Trường Đại Học Sư Phạm Kỹ Thuật TPHCM, sau hơn bốn tháng chúng em đã hoàn thành Khóa luận tốt nghiệp Công nghệ phần mềm năm 2022. Em xin chân thành cảm ơn Thầy – Huỳnh Xuân Phụng, người đã tận tình giảng dạy, chi tiết để em có đủ kiến thức và vận dụng chúng vào bài Khóa luận tốt nghiệp này. Mặc dù thầy bận công tác nhưng không ngần ngại chỉ dẫn chúng em, định hướng đi cho em, để chúng em hoàn thành tốt nhiệm vụ.

Tuy nhiên vì kiến thức chuyên môn còn hạn chế và bản thân còn thiếu sót nhiều kinh nghiệm thực tiễn nên nội dung của báo cáo không tránh khỏi những sai sót, chúng em rất mong nhận sự góp ý, chỉ bảo và phê bình từ phía Thầy hướng dẫn – Huỳnh Xuân Phụng và Thầy phản biện – TS. Lê Vĩnh Thịnh để bài khóa luận tốt nghiệp được hoàn thiện hơn. Nhóm thực hiện xin chân thành cảm ơn Nhóm sinh viên thực hiện: Nguyễn Đức Hòa Lê Trần Đức Huy TÓM TẮT Website thương mại điện tử đã không còn quá xa lạ với mọi người nhất là trong thời đại công nghệ phát triển như hiện nay. Vì sao web thương mại điện tử lại được ưa chuộng đến thế? Đầu tiên không thể không nhắc đến sự tiện lợi, bạn có thể mua hàng mọi lúc mọi nơi qua đồng hồ và được vận chuyển đến tận nhà mà không cần phải đi đến cửa hàng.

Trên những web thương mại điện tử đa phần đều thể hiện rõ hàng hình ảnh, giá cả, thông tin sản phẩm rất chi tiết rõ ràng và xử lý đơn hàng cũng rất nhanh và chính xác. Điều đó tạo cho khách hàng sự hài lòng, thoải mái khi mua hàng. Với lí do đó, nhóm em quyết định chọn đề tài xây dựng một trang web thương mại điện tử, cụ thể là một trang web bán đồng hồ. Trang web cơ bản có đủ những chức năng chính như đăng ký, đăng nhập, đặt hàng, khôi phục mật khẩu, tìm kiếm, quản lý của admin dù còn nhiều hạn chế.

Website có một số chức năng: Phía khách hàng:  Đăng nhập  Đăng ký  Khôi phục mật khẩu  Gửi góp ý  Đặt hàng  Quản lý thông tin cá nhân  Đánh giá sản phẩm  Chức năng chatbot  Chức năng recommend sản phẩm  Chương trình giảm giá Phía Admin:  Đăng nhập  Quản lý đồng hồ  Quản lý thương hiệu  Quản lý đơn hàng  Quản lý tài khoản  Quản lý mã giảm giá  Quản lý góp ý  Thống kê Những công cụ được sử dụng:  Giao diện: HTML, CSS, JavaScript  Chức năng: C#  Cơ sở dữ liệu: SQL Server  Chatbot: Rasa chatbot, Facebook  Recommend sản phẩm: FPT Recommend PHỤ LỤC BẢNG Bảng 1: Bảng lịch sử cập nhật. 1 Bảng 2: Sự khác nhau quan trọng giữa ASP.NET với ASP. 11 Bảng 3: Bảng ma trận quyền. 28 Bảng 4: Giả thiết, ràng buộc, rủi ro.

29 Bảng 5: Chức năng phía khách hàng. 36 Bảng 6: Chức năng phía nhân viên, quản trị viên. 40 Bảng 7: Chức năng phía Quản trị viên. 42 Bảng 8: Bảng User.

46 Bảng 9: Bảng Role. 47 Bảng 10: Bảng User_Role. 48 Bảng 11: Bảng User_Role. 48 Bảng 12: Bảng Brand.

50 Bảng 13: Bảng Water resistance. 50 Bảng 14: Bảng Size. 51 Bảng 15: Bảng Material. 51 Bảng 16: Bảng Energy.

52 Bảng 17: Bảng SubImages. 52 Bảng 18: Bảng Cart. 53 Bảng 19: Bảng Order. 54 Bảng 20: Bảng OrderDetail.

55 Bảng 21: Bảng Vouchers. 56 Bảng 22: Bảng Comment. 57 Bảng 23: Bảng Rate. 58 Bảng 24: Bảng User tracking.

59 Bảng 25: Bảng use case Đăng nhập. 60 Bảng 26: Giao diện trang Đăng nhập. 63 Bảng 27: Mô tả giao diện đăng nhập Admin. 63 Bảng 28: Giao diện trang Đăng ký.

68 Bảng 29: Bảng usecase Quên mật khẩu. 69 Bảng 30: Bảng usecase Thanh toán. 73 Bảng 31: Giao diện giỏ hàng. 79 Bảng 32: Giao diện Checkout.

79 Bảng 33: Giao diện Thanh toán. 80 Bảng 34: Bảng usecase Thêm giỏ hàng. 82 Bảng 35: Giao diện Xem sản phẩm. 86 Bảng 36: Giao diện chi tiết sản phẩm.

87 Bảng 37: Giao diện giỏ hàng. 89 Bảng 38: Bảng usecase Bình Luận. 90 Bảng 39: Bảng usecase Thay đổi thông tin. 94 Bảng 40: Giao diện Cập nhật thông tin.

98 Bảng 41: Bảng usecase Lịch sử mua hàng. 99 Bảng 42: Giao diện Lịch sử mua hàng. 101 Bảng 43: Giao diện đơn hàng chi tiết. 102 Bảng 44: Chức năng quản lí tài khoản khách hàng.

102 Bảng 45: Mô tả giao diện quản lý tài khoản. 105 Bảng 46: Chức năng thêm tài khoản nhân viên. 106 Bảng 47: Chức năng quản lí đơn hàng. 110 Bảng 48: Mô tả giao diện quản lý đơn hàng.

114 Bảng 49: Mô tả giao diện sửa trạng thái đơn hàng và chi tiết đơn hàng. 114 Bảng 50: Thống kê theo sản phẩm. 115 Bảng 51: Mô tả giao diện thống kê doanh thu theo tháng. 119 Bảng 52: Giao diện thống kê doanh thu theo thời gian.

120 Bảng 53: Thêm đồng hồ mới. 121 Bảng 54: Chỉnh sửa thông tin sản phẩm đồng hồ. 122 Bảng 55: Xóa sản phẩm. 124 Bảng 56: Mô tả giao diện quản lý đồng hồ.

130 Bảng 57: Mô tả giao diện thêm đồng hồ. 131 Bảng 58: Mô tả giao diện sửa đồng hồ. 133 Bảng 59: Tìm kiếm và lọc sản phẩm. 135 Bảng 60: Giao diện Xem sản phẩm.

138 Bảng 61: Chức năng Chatbot. 139 Bảng 62: Mô tả usecase Recommend. 143 Bảng 63: Chức năng đánh giá sản phẩm. 148 Bảng 64: Bảng mô tả nhiệm vụ.

155 Bảng 65: Test Case hệ thống. 159 Bảng 66: Bảng so sánh. 169 PHỤ LỤC HÌNH Hình 1: Mô tả cấu trúc Unit of Work. 15 Hình 2: Tổng quan quy trình nghiệp vụ.

17 Hình 3: Hình ảnh website Watchshop. 22 Hình 4: Trang chủ website đồng hồ Hải Triều. 24 Hình 5: Trang web FridaysShopping. 25 Hình 6: Sơ đồ tổng quan trang người dùng.

26 Hình 7: Sơ đồ tổng quan trang quản lí.