Tìm hiểu công nghệ Error! Bookmark not defined 1 ReactJS là gì
Hệ sinh thái của React
React JS thường được mô tả như là một thư viện JavaScript Đôi khi là cả một framework JavaScript Vậy cụ thể nó là gì? Hay là cả hai?
Nhóm chuyên môn ở Skillcrush định nghĩa React JS là một thư viện JavaScript, không phải một framework
Sự khác biệt giữa thư viện JavaScript như React và các framework JavaScript như Angular nằm ở cách thức áp dụng mã Các developer sử dụng mã từ thư viện cho các lệnh cụ thể, trong khi framework tạo ra một cấu trúc cho trang web hoặc ứng dụng và cung cấp các khu vực dành riêng cho mã của framework Để hình dung dễ hơn, có thể coi mã từ thư viện JavaScript như đồ nội thất trang trí cho một ngôi nhà đã được xây, trong khi framework giống như một bản mẫu để xây dựng ngôi nhà.
React JS thường bị hiểu nhầm là một framework do hệ sinh thái mạnh mẽ và khả năng mở rộng lớn của nó Thực tế, React JS là một thư viện JavaScript rất linh hoạt, cho phép người dùng xây dựng website và giao diện ứng dụng web một cách hiệu quả.
Snippet của React code và các thành phần (như các block của React code, dùng để tạo các phần cụ thể của giao diện người dùng)
Có thể sử dụng JSX để trực tiếp tác động vào DOM
Một Virtual DOM, giúp cải thiện đáng kể hiệu năng website
React JS là một thư viện mã nguồn mở, cho phép người dùng tải xuống và sửa đổi miễn phí Nhờ đó, kích thước của thư viện này có thể mở rộng đáng kể với nhiều tiện ích và add-on đa dạng.
Đặc trưng cơ bản của ReactJS
Trước đây, việc thay đổi thành phần trên web yêu cầu thao tác trực tiếp với DOM, nhưng với sự phát triển của ReactJS và công nghệ Virtual DOM, vấn đề này đã được cải thiện đáng kể Virtual DOM giúp ứng dụng hoạt động ổn định và mượt mà, ngay cả khi cần thay đổi liên tục trên các trang web lớn với nhiều thành phần phức tạp Hơn nữa, ReactJS sử dụng cú pháp mở rộng JSM cho Javascript, giúp đơn giản hóa quy trình phát triển web, mang lại hiệu quả cao hơn và độ chính xác tốt hơn.
Lý do nên chọn reactjs
ReactJS là một framework dễ học và tiếp cận, được cộng đồng đánh giá cao Với nguồn tài liệu phong phú và hướng dẫn chi tiết, bất kỳ ai cũng có thể làm quen và thành thạo ReactJS nếu có đam mê và dành thời gian nghiên cứu.
Dựa trên tài liệu đã cung cấp, việc tìm hiểu và thực hành không quá khó khăn Nếu bạn đã có nền tảng về Javascript, bạn có thể bắt đầu chỉ sau vài ngày ngắn ngủi để nắm bắt các kiến thức liên quan.
Tái sử dụng nhiều thành phần
ReactJS nổi bật với việc tập trung vào tầng view, nơi mà các thành phần chính của ứng dụng được xây dựng dưới dạng component Mỗi chức năng trong ReactJS được phân chia thành các component riêng biệt, giúp tối ưu hóa hiệu suất và khả năng tái sử dụng Điều này không chỉ giảm thiểu tình trạng lặp mã, mà còn nâng cao tính hiệu quả trong quá trình phát triển ứng dụng.
Nhiều công cụ hỗ trợ
Một trong những lợi ích nổi bật của ReactJS là sự đa dạng của các công cụ hỗ trợ, bao gồm công cụ kiểm tra tối ưu ứng dụng và công cụ debug Khi được sử dụng hợp lý, những công cụ này giúp quá trình phát triển web và ứng dụng trở nên hiệu quả, nhanh chóng và đơn giản hơn.
Cộng đồng người dùng đông đảo
ReactJS phát triển mạnh mẽ và phổ biến, giúp người dùng dễ dàng tìm kiếm hỗ trợ khi cần thiết Việc tra cứu thông tin để giải đáp thắc mắc cũng trở nên đơn giản hơn Cộng đồng phát triển đông đảo cùng với thư viện tối ưu sẽ hỗ trợ người dùng ứng dụng ReactJS hiệu quả hơn.
5 Tương lai phát triển của ReactJS
Facebook và nhóm phát triển ReactJS cam kết nâng cao hiệu quả của ReactJS, điều này trở nên quan trọng khi đối thủ như VueJS đang cạnh tranh mạnh mẽ Dưới đây là những mong đợi mà người dùng hy vọng sẽ được cải tiến trong các phiên bản tiếp theo của ReactJS.
Cộng đồng ReactJS trông đợi phương pháp render mới Ví dụ, ReactJS team có thể xây dựng thêm cú pháp phân đoạn vào JSX mà không cần key
Các nhà phát triển đang mong đợi sự cải tiến trong quy trình xử lý lỗi của ReactJS Trước đây, khi gặp lỗi runtime trong quá trình render, ReactJS xử lý một cách không hiệu quả, buộc developer phải refresh trang Trong phiên bản hiện tại, lỗi vẫn được đưa vào các component hoặc lifecycle method, điều này giúp ngăn chặn việc render dữ liệu lỗi, nhưng lại không mang lại trải nghiệm người dùng tốt.
Tương lai phát triển của ReactJS
Tăng cường server-side rendering trong ReactJS phiên bản mới nhất đã cải thiện tốc độ và hỗ trợ streaming tốt hơn Tuy nhiên, tính năng này vẫn chủ yếu mang tính quảng bá và chưa đạt hiệu quả thực sự trong việc tối ưu hóa hiệu suất.
Sử dụng ReactJS để xây dựng ứng dụng thương mại điện tử
Chương 1: Tổng Quan
Website bán rượu trực tuyến Luxy Wine
STT Họ và tên MSSV
Chương 2: Cơ sở lý thuyết
ReactJS: Như đã giới thiệu trước đó, ReactJS là một thư viện có rất nhiều ưu điểm cho việc lập trình ứng dụng Web
NodeJS là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine Nó được xây dựng để chạy trên server
JavaScript là ngôn ngữ lập trình hướng sự kiện, cho phép xử lý các sự kiện non-blocking trên server Nhờ vào đặc điểm này, website sử dụng Node.js có khả năng đáp ứng đồng thời một lượng lớn người dùng mà không bị gián đoạn.
Express.js, hay còn gọi là Express js hoặc Express js, là một framework mã nguồn mở miễn phí dành cho Node.js Framework này giúp thiết kế và xây dựng các ứng dụng web một cách đơn giản và nhanh chóng.
Express.js, với yêu cầu duy nhất là sử dụng ngôn ngữ lập trình JavaScript, giúp lập trình viên dễ dàng xây dựng các ứng dụng web và API Là một khuôn khổ của Node.js, Express.js cung cấp nhiều mã code đã được viết sẵn, hỗ trợ tối đa cho công việc của các nhà phát triển.
Express.js giúp lập trình viên dễ dàng phát triển ứng dụng web đơn lẻ, nhiều trang hoặc kết hợp Với dung lượng nhẹ, Express.js hỗ trợ tổ chức ứng dụng web theo kiến trúc MVC một cách hiệu quả Để sử dụng Express.js, người dùng cần có kiến thức về JavaScript và HTML.
Express.js là một công nghệ quan trọng trong việc quản lý ứng dụng web, thuộc ngăn xếp phần mềm MEAN Thư viện JavaScript của Express.js hỗ trợ lập trình viên phát triển ứng dụng web một cách nhanh chóng và hiệu quả Ngoài ra, Express.js còn giúp nâng cao các chức năng của Node.js, mang lại trải nghiệm lập trình tốt hơn.
MongoDB là hệ quản trị cơ sở dữ liệu NoSQL mã nguồn mở, đa nền tảng, được phát triển bằng ngôn ngữ C++ Dữ liệu trong MongoDB được lưu trữ dưới dạng tài liệu (Document), với cấu trúc bao gồm các cặp giá trị và trường tương tự như đối tượng JSON.
Firebase Storage là dịch vụ lý tưởng để lưu trữ và quản lý nội dung do người dùng ứng dụng tạo ra, bao gồm hình ảnh, video và các loại tệp dữ liệu khác.
Firebase Storage cung cấp API an toàn cho việc tải lên và tải xuống tệp từ ứng dụng của bạn, giúp bạn không phải lo lắng về chất lượng đường truyền mạng.
Firebase Storage được xây dựng trên nền tảng Google Cloud Platform nên có nhiều lợi thế.
Chương 3: Phân tích và thiết kế hệ thống
1 Danh sách tính năng
Stt Tên tính năng Use case
1 Đăng nhập Xác thực người dùng
6 Xem thông tin cá nhân Quản lý thông tin cá nhân
7 Chỉnh sửa thông tin cá nhân
8 Xem chi tiết đơn hàng
9 Xem lịch sử mua hàng
10 Xem sản phẩm rượu Xem sản phẩm, tin tức
11 Xem sản phẩm đặc biệt
12 Xem sản phẩm phụ kiện
14 Xem chi tiết tin tức
15 Xem chi tiết sản phẩm
16 Xem giỏ hàng Quản lý giỏ hàng
17 Thêm sản phẩm vào giỏ hàng
18 Sửa sản phẩm trong gió hàng
19 Xóa sản phẩm trong giỏ hàng
20 Tiến hành đặt hàng Mua hàng
22 Thêm sản phẩm Quản lý sản phẩm
25 Thêm tài khoản Quản lý tài khoản
28 Thêm đơn hàng Quản lý đơn hàng
31 Thêm tin tức Quản lý tin tức
34 Thêm voucher Quản lý khuyến mãi
37 Sửa banner Quản lý banner
STT Tên Actor Ý nghĩa/Ghi chú
1 Khách Khách hàng, người dùng chưa đăng ký tài khoản
2 Người dùng Khách hàng, người dùng đã đăng ký tài khoản
3 Quản trị viên Người quản trị, quản lý trang web, quản lý cửa hàng
2.2 Usecase xác thực người dùng 2.2.1 Usecase đăng ký tài khoản
Tên yêu cầu Đăng ký tài khoản
Mô tả Đăng ký tài khoản người dùng
Tác nhân Khách Điều kiện trước Chưa đăng nhập Điều kiện sau Trạng thái hệ thống sau khi đăng kí tài khoản
Luồng xử lý chính 1 Truy cập vào đường dẫn /dang-ky
2 Người dùng điền các thông tin: email, mật khẩu, xác nhận mật khẩu, họ và tên, giới tính, ngày sinh
3 Hệ thống xác nhận các trường dữ liệu hợp lệ
4 Hệ thống thêm 1 document vào database
5 Ứng dụng thông báo đăng ký thành công, chuyển người dùng đến trang đăng nhập
Luồng xử lý phụ I Thông tin đăng ký không chính xác: Tài khoản đã tồn tại
1 Hệ thống thông báo tài khoản đã tồn tại
2 Hệ thống yêu cầu nhập lại thông tin đăng ký
Tên yêu cầu Đăng nhập
Mô tả Đăng nhập tài khoản để sử dụng
Tác nhân Người dùng, Quản trị viên Điều kiện trước Chưa đăng nhập Điều kiện sau Đăng nhập thành công
Luồng xử lý chính 1 Truy cập vào đường dẫn /dang-nhap
2 Người dùng điền các thông tin: email, mật khẩu
3 Hệ thống xác nhận có trường dữ liệu hợp lệ
4 Thông báo đăng nhập thành công, chuyển đến trang chủ
Luồng xử lý phụ 1 Hệ thống thông báo nếu có lỗi
Tên yêu cầu Quên mật khẩu
Để lấy lại mật khẩu, người dùng cần xác nhận mã bí mật được gửi tới email đăng ký tài khoản Quá trình này yêu cầu người dùng chưa đăng nhập và kết quả là có thể đặt lại mật khẩu một cách dễ dàng Quản trị viên cũng có thể hỗ trợ trong quá trình này.
Luồng xử lý chính 1 Truy cập vào đường dẫn /quen-mat-khau
4 Hệ thống gửi email chứa mã xác nhận đến cho người dùng
5 Người dùng xác nhận mã trong màn hình tiếp theo
6 Hệ thống xác nhận mật mã
7 Người dùng nhập mật khẩu và xác nhận mật khẩu mới
Luồng xử lý phụ I Mã bí mật không chính xác quá 3 lần
1 Hệ thống từ chối việc đặt lại mật khẩu
Tên yêu cầu Đăng nhập
Mô tả Người dùng đổi mật khẩu theo nhu cầu sử dụng
Tác nhân Người dùng, Quản trị viên Điều kiện trước Đã đăng nhập Điều kiện sau Thông tin mật khẩu trong database được thay đổi
Luồng xử lý chính 1 Người dùng đã đăng nhập vào hệ thống
2 Chọn vào ảnh đại diện trên thanh header
4 Điền mật khẩu hiện tại, mật khẩu mới, xác nhận mật khẩu mới
6 Ứng dụng thông báo đổi mật khẩu thành công Luồng xử lý phụ Hệ thống thông báo nếu có lỗi
2.3 Usecase quản lý thông tin cá nhân
Tên yêu cầu Quản lý thông tin cá nhân
Người dùng có thể quản lý thông tin cá nhân của mình, bao gồm việc xem và chỉnh sửa các thông tin cá nhân, lịch sử mua hàng cũng như chi tiết đơn hàng Để thực hiện các hành động này, người dùng cần đăng nhập vào hệ thống Sau khi hoàn tất, hành động sẽ được thực hiện thành công.
Luồng xử lý chính I Xem thông tin cá nhân, lịch sử mua hàng
1 Chọn vào ảnh đại diện trên thanh header
2 Chọn xem thông tin tài khoản
3 Hệ thống trả về dữ liệu thông tin tài khoản
II Chỉnh sửa thông tin cá nhân
1 Chọn vào ảnh đại diện trên thanh header
2 Chọn xem thông tin tài khoản
3 Hệ thống trả về dữ liệu thông tin tài khoản
4 Người dùng thay đổi thông tin ở trong các khung input
5 Người dùng ấn cập nhật
6 Hệ thống kiểm tra dữ liệu, thực hiện thay đổi csdl nếu dữ liệu hợp lệ
III Xem chi tiết đơn hàng
1 Chọn vào ảnh đại diện trên thanh header
2 Chọn xem thông tin tài khoản
3 Hệ thống trả về dữ liệu thông tin tài khoản
4 Người dùng ấn vào 1 dòng trong bảng lịch sử mua hàng
5 Hệ thống trả về dữ liệu chi tiết của đơn hàng vừa chọn
Luồng xử lý phụ Hệ thống thông báo nếu có lỗi
2.4 Xem sản phẩm, tin tức
Tên yêu cầu Xem sản phẩm, tin tức
Người dùng có thể truy cập vào các trang liên quan đến Rượu, combo khuyến mãi, phụ kiện và tin tức để tìm hiểu thông tin về sản phẩm và các tin tức mới nhất Khi chọn một sản phẩm hoặc tin tức, họ sẽ được xem thông tin chi tiết về nội dung đó.
Tác nhân Khách, Người dùng, Quản trị viên Điều kiện trước Khống có Điều kiện sau Xem được thông tin sản phẩm/ tin tức
Luồng xử lý chính I Xem các sản phẩm/tin tức có trong cửa hàng
1 Vào giao diện chính của ứng dụng
2 Chọn vào các tab Rượu/ Combo sản phẩm đặc biệt/ Phụ kiện/ Tin tức để xem danh sách các sản phẩm
3 Hệ thống trả về danh sách
II Lọc sản phẩm rượu/ combo khuyến mãi
1 Truy cập vào giao diện của tab rượu/ combo khuyến mãi
2 Chọn các bộ lọc để lọc ra các sản phẩm cần tìm
3 Hệ thống trả về các sản phẩm như đã lọc III Xem chi tiết sản phẩm/ tin tức
1 Truy cập vào các trang danh sách sản phẩm/tin tức
2 Chọn vào 1 sản phẩm/ tin tức
3 Hệ thống trả về dữ liệu chi tiết của các sản phẩm/ tin tức
Luồng xử lý phụ Hệ thống thông báo nếu xảy ra lỗi
Tên yêu cầu Quản lý giỏ hàng
Mô tả Người dùng điều chỉnh các sản phẩm có trong giỏ hàng trước khi thực hiện đặt hàng Tác nhân Khách, Người dùng, Quản trị viên
22 Điều kiện trước Không có Điều kiện sau Điều chỉnh giỏ hàng thành công
Luồng xử lý chính I Thêm sản phẩm vào giỏ hàng từ màn hình danh sách sản phẩm
1 Người dùng truy cập vào trang danh sách các sản phẩm rượu/ combo khuyến mãi/ phụ kiện
2 Hệ thống trả về danh sách các sản phẩm
3 Người dùng di chuột lên thẻ sản phẩm
4 Người dùng ấn vào nút biểu tượng giỏ hàng
5 Hệ thống thực hiện lưu thông tin giỏ hàng vào csdl nếu đã đăng nhập, nếu chưa đăng nhập thực hiện lưu vào cookies
II Thêm sản phẩm vào giỏ hàng từ màn hình chi tiết sản phẩm
1 Người dùng truy cập vào trang chi tiết sản phẩm rượu/combo khuyến mãi/ phụ kiện
2 Hệ thống trả về thông tin chi tiết sản phẩm
3 Người dùng ấn chọn số lượng, sau đó ấn vào nút thêm vào giỏ hàng
4 Hệ thống thực hiện lưu thông tin giỏ hàng vào csdl nếu đã đăng nhập, nếu chưa đăng nhập thực hiện lưu vào cookies
1 Người dùng chọn vào icon giỏ hàng phía trên thanh header
2 Hệ thống trả về danh sách sản phẩm trong csdl và cookies
IV Chỉnh sửa/ Xóa sản phẩm khỏi giỏ hàng
1 Tại màn hình giỏ hàng, người dùng thay đổi thông tin số lượng sản phẩm/ xóa sản phẩm
2 Hệ thống ghi nhận thay đổi vào csdl và cookies Luồng xử lý phụ Hệ thống thông báo nếu xảy ra lỗi
Tên yêu cầu Mua hàng
Người dùng đã đăng nhập tiến hành đặt hàng và xác nhận thông tin để mua sản phẩm Các tác nhân liên quan trong quy trình này bao gồm Khách, Người dùng và Quản trị viên.
24 Điều kiện sau Thực hiện thành công hành động
Luồng xử lý chính I Tiến hành đặt hàng từ giỏ hàng
1 Tại giỏ hàng, ấn vào nút tiến hành đặt hàng
2 Hệ thống yêu cầu người dùng nhập thông tin cho đơn hàng mới gồm toàn bộ sản phẩm có trong giỏ hàng
3 Người dùng nhập vào thông tin giao hàng
4 Người dùng chọn hình thức thanh toán
6 Hệ thống lưu lại 1 document về đơn hàng vừa đặt
II Tiến hành đặt hàng từ trang chi tiết sản phẩm
1 Tại trang chi tiết sản phẩm, ấn mua ngay
2 Hệ thống yêu cầu người dùng nhập thông tin cho đơn hàng mới cho sản phẩm vừa chọn
3 Người dùng nhập thông tin giao hàng
4 Người dùng chọn hình thức thanh toán
6 Hệ thống lưu lại 1 document về đơn hàng vừa đặt
III Thanh toán đơn hàng bằng momo
Tại trang thực hiện đặt hàng, người dùng chọn vào thanh toàn bằng momo
Hệ thống chuyển hướng sang màn hình chứa mã
QR momo để quét mã thanh toán Người dùng thực hiện quét mã
Hệ thống lưu thêm đơn hàng với trạng thái đã xác nhận, đã thanh toán
IV Áp dụng khuyến mãi cho đơn hàng
1 Tại trang đặt hàng, người dùng nhập mã khuyến mãi và ấn xác nhận
2 Hệ thống kiểm tra mã giảm giá, kiểm tra điều kiện sử dụng mã
Luồng xử lý phụ Hệ thống thông báo nếu có lỗi
Tên yêu cầu Quản lý sản phẩm
Mô tả Quản trị viên thực hiện các thao tác trên sản phẩm, thay đổi, thêm, xóa
Tác nhân Quản trị viên Điều kiện trước Đã đăng nhập, truy cập vào giao diện quản lý với đường dẫn
/quan-ly Điều kiện sau Thực hiện thành công hành động
Luồng xử lý chính I Quản lý danh sách sản phẩm
1 Người dùng chọn tab quản lý sản phẩm hoặc truy cập: /quan-ly/san-pham
2 Hệ thống trả về danh sách sản phẩm
3 Người dùng thực hiện tìm kiếm sản phẩm
4 Hệ thống trả về kết quả tương ứng với tất cả các trường thông tin
1 Tại màn hình quản lý danh sách sản phẩm, ấn nút thêm sản phẩm
2 Điền các thông tin, ấn lưu
3 Hệ thống kiểm tra tính đúng đắn của bộ dữ liệu, thực hiện lưu xuống csdl nếu dữ liệu hợp lệ
4 Thông báo thêm sản phẩm thành công, chuyển hướng đến màn hình quản lý danh sách sản phẩm
1 Tại màn hình quản lý danh sách sản phẩm, ấn vào 1 dòng trong danh sách
2 Chuyển hướng đến màn hình chi tiết sản phẩm
4 Hệ thống chuyển hướng tới giao diện chỉnh sửa
6 Hệ thống kiếm tra tính đúng đắn của dữ liệu, lưu thay đổi vào csdl nếu dữ liệu hợp lệ
7 Hệ thống chuyển hướng về giao diện chi tiết sản phẩm
1 Truy cập đến giao diện quản lý chi tiết sản phẩm
3 Hệ thống thực hiện xóa sản phẩm và các dữ liệu liên quan
4 Hệ thống chuyển hướng đến giao diện quản lý danh sách sản phẩm
Luồng xử lý phụ Hệ thống thông báo nếu có lỗi
Tên yêu cầu Quản lý tài khoản
Mô tả Quản trị viên thực hiện các thao tác trên tài khoản, thay đổi, thêm, xóa, sửa
Tác nhân Quản trị viên Điều kiện trước Đã đăng nhập, truy cập vào giao diện quản lý với đường dẫn
28 Điều kiện sau Thực hiện thành công hành động
Luồng xử lý chính I Quản lý danh sách tài khoản
1 Người dùng chọn tab quản lý tài khoản hoặc truy cập: /quan-ly/tai-khoan
2 Hệ thống trả về danh sách tai-khoan
3 Người dùng thực hiện tìm kiếm tài khoản
4 Hệ thống trả về kết quả tương ứng với tất cả các trường thông tin
1 Tại màn hình quản lý danh sách tài khoản, ấn nút thêm tài khoản
2 Điền các thông tin, ấn lưu
3 Hệ thống kiểm tra tính đúng đắn của bộ dữ liệu, thực hiện lưu xuống csdl nếu dữ liệu hợp lệ
4 Thông báo thêm tài khoản thành công, chuyển hướng đến màn hình quản lý danh sách tài khoản III Sửa tài khoản
1 Tại màn hình quản lý danh sách tài khoản, ấn vào 1 dòng trong danh sách
2 Chuyển hướng đến màn hình chi tiết tài khoản
4 Hệ thống chuyển hướng tới giao diện chỉnh sửa
6 Hệ thống kiếm tra tính đúng đắn của dữ liệu, lưu thay đổi vào csdl nếu dữ liệu hợp lệ
7 Hệ thống chuyển hướng về giao diện chi tiết tài khoản
1 Truy cập đến giao diện quản lý chi tiết tài khoản
3 Hệ thống thực hiện xóa tài khoản và các dữ liệu liên quan
4 Hệ thống chuyển hướng đến giao diện quản lý danh sách tài khoản
Luồng xử lý phụ Hệ thống thông báo nếu có lỗi
Tên yêu cầu Quản lý đơn hàng
Mô tả Quản trị viên thực hiện các thao tác trên đơn hàng, thay đổi, thêm, xóa
Tác nhân Quản trị viên Điều kiện trước Đã đăng nhập, truy cập vào giao diện quản lý với đường dẫn
30 Điều kiện sau Thực hiện thành công hành động
Luồng xử lý chính I Quản lý danh sách đơn hàng
1 Người dùng chọn tab quản lý hóa đơn hoặc truy cập: /quan-ly/hoa-don
2 Hệ thống trả về danh sách đơn hàng
3 Người dùng thực hiện tìm kiếm/ lọc đơn hàng
4 Hệ thống trả về kết quả tương ứng với tất cả các trường thông tin
1 Tại màn hình quản lý danh sách hóa đơn, ấn nút thêm hóa đơn
2 Điền các thông tin, ấn lưu
3 Hệ thống kiểm tra tính đúng đắn của bộ dữ liệu, thực hiện lưu xuống csdl nếu dữ liệu hợp lệ
4 Thông báo thêm hóa đơn thành công, chuyển hướng đến màn hình quản lý danh sách hóa đơn III Sửa hóa đơn
8 Tại màn hình quản lý danh sách hóa đơn, ấn vào 1 dòng trong danh sách
9 Chuyển hướng đến màn hình chi tiết hóa đơn
11 Hệ thống chuyển hướng tới giao diện chỉnh sửa
13 Hệ thống kiếm tra tính đúng đắn của dữ liệu, lưu thay đổi vào csdl nếu dữ liệu hợp lệ
14 Hệ thống chuyển hướng về giao diện chi tiết hóa đơn
5 Truy cập đến giao diện quản lý chi tiết hóa đơn
7 Hệ thống thực hiện xóa hóa đơn và các dữ liệu liên quan
8 Hệ thống chuyển hướng đến giao diện quản lý danh sách hóa đơn
V Xác nhận các hóa đơn thanh toán bằng thẻ ngân hàng
1 Tại màn hình quản lý danh sách hóa đơn, ấn xác nhận thanh toán
2 Hệ thống mở modal danh sách các đơn hàng cần xác nhận
3 Thực hiện ấn nút xác nhận thanh toán/ xóa yêu cầu thanh toán đơn hàng
4 Hệ thống thực hiện thay đổi trên csdl Luồng xử lý phụ Hệ thống thông báo nếu có lỗi
Tên yêu cầu Quản lý Tin tức
Mô tả Quản trị viên thực hiện các thao tác trên Tin tức, thay đổi, thêm, xóa
Tác nhân Quản trị viên Điều kiện trước Đã đăng nhập, truy cập vào giao diện quản lý với đường dẫn
/quan-ly Điều kiện sau Thực hiện thành công hành động
Luồng xử lý chính I Quản lý danh sách Tin tức
1 Người dùng chọn tab quản lý Tin tức hoặc truy cập: /quan-ly/tin-tuc
2 Hệ thống trả về danh sách Tin tức
3 Người dùng thực hiện tìm kiếm Tin tức
4 Hệ thống trả về kết quả tương ứng với tất cả các trường thông tin
1 Tại màn hình quản lý danh sách Tin tức, ấn nút thêm Tin tức
2 Điền các thông tin, ấn lưu
3 Hệ thống kiểm tra tính đúng đắn của bộ dữ liệu, thực hiện lưu xuống csdl nếu dữ liệu hợp lệ
4 Thông báo thêm Tin tức thành công, chuyển hướng đến màn hình quản lý danh sách Tin tức III Sửa Tin tức
1 Tại màn hình quản lý danh sách Tin tức, ấn vào
2 Chuyển hướng đến màn hình chi tiết Tin tức
4 Hệ thống chuyển hướng tới giao diện chỉnh sửa
6 Hệ thống kiếm tra tính đúng đắn của dữ liệu, lưu thay đổi vào csdl nếu dữ liệu hợp lệ
7 Hệ thống chuyển hướng về giao diện chi tiết Tin tức
1 Truy cập đến giao diện quản lý chi tiết Tin tức
3 Hệ thống thực hiện xóa Tin tức và các dữ liệu liên quan
4 Hệ thống chuyển hướng đến giao diện quản lý danh sách Tin tức
Luồng xử lý phụ Hệ thống thông báo nếu có lỗi
Tên yêu cầu Quản lý khuyến mãi
Mô tả Quản trị viên thực hiện các thao tác trên khuyến mãi, thay đổi, thêm, xóa
Tác nhân Quản trị viên Điều kiện trước Đã đăng nhập, truy cập vào giao diện quản lý với đường dẫn
/quan-ly Điều kiện sau Thực hiện thành công hành động
Luồng xử lý chính I Quản lý danh sách khuyến mãi
1 Người dùng chọn tab quản lý khuyến mãi hoặc truy cập: /quan-ly/khuyen-mai
2 Hệ thống trả về danh sách khuyến mãi
3 Người dùng thực hiện tìm kiếm khuyến mãi
4 Hệ thống trả về kết quả tương ứng với tất cả các trường thông tin
1 Tại màn hình quản lý danh sách khuyến mãi, ấn
2 Điền các thông tin, ấn lưu
3 Hệ thống kiểm tra tính đúng đắn của bộ dữ liệu, thực hiện lưu xuống csdl nếu dữ liệu hợp lệ
4 Thông báo thêm khuyến mãi thành công, chuyển hướng đến màn hình quản lý danh sách khuyến mãi
1 Tại màn hình quản lý danh sách khuyến mãi, ấn vào 1 dòng trong danh sách
2 Chuyển hướng đến màn hình chi tiết khuyến mãi
4 Hệ thống chuyển hướng tới giao diện chỉnh sửa
6 Hệ thống kiếm tra tính đúng đắn của dữ liệu, lưu thay đổi vào csdl nếu dữ liệu hợp lệ
7 Hệ thống chuyển hướng về giao diện chi tiết khuyến mãi
1 Truy cập đến giao diện quản lý chi tiết khuyến mãi
3 Hệ thống thực hiện xóa khuyến mãi và các dữ liệu liên quan
4 Hệ thống chuyển hướng đến giao diện quản lý danh sách khuyến mãi
Luồng xử lý phụ Hệ thống thông báo nếu có lỗi
Tên yêu cầu Quản lý banner
Mô tả Quản trị viên thực hiện các thao tác trên banner, thay đổi, thêm, xóa
Tác nhân Quản trị viên Điều kiện trước Đã đăng nhập, truy cập vào giao diện quản lý với đường dẫn
/quan-ly Điều kiện sau Thực hiện thành công hành động
Luồng xử lý chính I Quản lý danh sách banner
1 Người dùng chọn tab quản lý banner hoặc truy cập: /quan-ly/banner
2 Hệ thống trả về danh sách banner
3 Người dùng thực hiện tìm kiếm banner
4 Hệ thống trả về kết quả tương ứng với tất cả các trường thông tin
1 Tại màn hình quản lý danh sách banner, ấn vào
2 Chuyển hướng đến màn hình chi tiết banner
4 Hệ thống chuyển hướng tới giao diện chỉnh sửa
6 Hệ thống kiếm tra tính đúng đắn của dữ liệu, lưu thay đổi vào csdl nếu dữ liệu hợp lệ
7 Hệ thống chuyển hướng về giao diện chi tiết banner
Luồng xử lý phụ Hệ thống thông báo nếu có lỗi
3 Sơ đồ liên kết màn hình (Site map)
4 Sơ đồ hoạt động
Sơ đồ hoạt động đăng nhập
Sơ đồ hoạt động đăng ký
Sơ đồ hoạt động thêm sản phẩm vào giỏ hàng
Sơ đồ hoạt động đặt hàng
Sơ đồ hoạt động xem sản phẩm
Sơ đồ hoạt động xem tin tức/ blog
Sơ đồ hoạt động thêm sản phẩm mới
Sơ đồ hoạt động thêm tin tức/blog
Sơ đồ hoạt động xem/ sửa đơn hàng
Sơ đồ hoạt động xem/ sửa danh sách sản phẩm
Sơ đồ hoạt động xóa sản phẩm
Sơ đồ hoạt động xem/ xóa tài khoản
• Thiết kế cơ sở dữ liệu:
STT Tên collections dữ liệu
1 users Danh sách tài khoản người dùng và tài khoản admin
2 voucher Danh sách các voucher khuyến mãi
3 receipts Danh sách các hóa đơn / đơn hàng
4 news Danh sách các bài đăng tin tức/ blogs
5 products Danh sách các sản phẩm của shop
6 banners Danh sách các hình ảnh, banner trong các trang
7 emailtokens Lưu trữ token hỗ trợ cho việc verify email của tài khoản a Chi tiết collections users
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 email String Bắt buộc, duy nhất
2 name String Bắt buộc Họ và tên
3 password String Bắt buộc Mật khẩu người dùng
5 phone String Bắt buộc Số điện thoại người dùng
6 gender Number Bắt buộc Giới tính, 1: Nam, 2: Nữ, 3:
7 role String Bắt buộc Vai trò của người dùng, ‘user’ và ‘admin’
8 emailVerified Boolean Đã xác nhận email hay chưa
9 address Array Danh sách địa chỉ giao hàng của người dùng, là mảng object với các trường là: district, province, ward, description, name, phone
10 avatar String Đường dẫn lưu trữ ảnh giao diện của người dùng
11 birthday Date Ngày sinh của người dùng
12 cart Array Là giỏ hàng, chứa mảng các object gồm 2 thuộc tính là product và quantity
13 receipts Array Mảng lưu trữ id của các hóa đơn b Chi tiết collections vouchers STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 name String Bắt buộc Tên của voucher
2 avtURL String Ảnh đại diện của voucher
3 code String Bắt buộc Code áp dụng của voucher
5 description String Mô tả cho voucher
6 amount Number Bắt buộc Số lượng tính cho khuyến mãi
7 type Number Bắt buộc Loại khuyến mãi, 1: số tiền, 2: phần trăm
8 limit Number Số tiền khuyến mãi tối đa
9 receipt Array Danh sách id của các đơn hàng đã áp mã
10 isEnable Boolean Bắt buộc Trạng thái đang kích hoạt hay không
11 quantity Number Bắt buộc Số lượt sử dụng còn lại
12 exp Date Ngày hết hạn khuyến mãi
13 isPublics Boolean Bắt buộc Khuyến mãi có hiển thị trên trang thông báo khuyến mãi hay không
14 condition Object Điều kiện được áp dụng khuyến mãi: c Chi tiết collections receipts STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 receiver String Id của người tạo đơn hàng, nếu đơn hàng được tạo bởi người chưa đăng nhập sẽ để trống
2 receiver Object Thông tin nhận hàng: name, phone, province, district, ward, description, note
3 profit Number Bắt buộc Lợi nhuận của đơn hàng
5 voucher String Id của voucher áp dụng cho đơn hàng
6 cart Array Bắt buộc Mảng chứa object các sản phẩm đã mua
7 totalPrice Number Bắt buộc Tổng doanh thu của đơn hàng
8 status Number Trạng thái đơn hàng: 0: bị hủy,
1: chờ xác nhận, 2: đã xác nhận, 3: đang giao 4: đã nhận hàng, 6: boom hàng
9 payMethod Number Phương thức thanh toán: 1: tiền mặt, 2: Momo, 3: thẻ.ngân hàng
10 shippingUnit String Đơn vị vận chuyển
11 shippingCode String Mã vận đơn
14 condition Object Điều kiện được áp dụng khuyến mãi: d Chi tiết bản news STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 avtUrl String Bắt buộc Thumbnail của tin
2 title String Bắt buộc Tiêu đề của tin
3 description String Bắt buộc Đoạn mô tả ngắn của bản tin
5 views Number Bắt buộc Số lượt xem tin
6 content String Bắt buộc Mã HTML cho nội dung của bài viết e Chi tiết collection products STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 name String Tên sản phẩm
2 sku String Mã SKU của sản phẩm
3 aboutProduct String Bắt buộc Thông tin thêm về sản phẩm
5 avtURL String Đường dẫn ảnh hiển thị của sản phẩm
6 imgURLs Array Bắt buộc Mảng chứa các đường dẫn của ảnh sản phẩm
7 quantity Number Bắt buộc Số lượng còn lại
8 importPrice Number Giá nhập sản phẩm
9 originPrice Number Giá bán nguyên bản
10 price Number Giá bán thực tế
11 temperature Object Nhiệt độ tối đa và tối thiểu cho việc sử dụng sản phẩm rượu, minimum: tối thiểu, maximum: tối đa
14 color String Màu sắc sản phẩm rượu, gồm red, pink và white
15 foods String Danh sách tên các món ăn origin String Xuất xứ( Quốc gia) producer String Nhà sản xuất concentrationP ercent
The article provides essential details about wine, including its alcohol concentration (in %), volume (in ml), vintage year, sugar content (in %), expiration date, and product type, which is categorized as "wine."
Boolean Có là sản phẩm đặc biệt hay không isNewProduct Boolean Có là sản phẩm mới hay không
50 hasSold Number Đã bán bao nhiêu sản phẩm isSaleProduct Boolean Có đang sale hay không
Hệ thống được phát triển theo mô hình MVC a Các thành phần trong hệ thống
Thành phần chính Diễn giải
Model Chứa resources - lưu trữ toàn bộ dữ liệu của ứng dụng Bộ phận này là một cầu nối giữa 2 thành phần bên dưới là
View trong MVC là giao diện người dùng, nơi cung cấp thông tin dữ liệu thông qua các thao tác truy vấn như tìm kiếm Người dùng có thể dễ dàng truy cập và tương tác với dữ liệu thông qua các trang web.
Controller là bộ phận chịu trách nhiệm xử lý các yêu cầu từ người dùng thông qua giao diện (view) và cung cấp dữ liệu phù hợp Ngoài ra, Controller còn có vai trò kết nối với model để đảm bảo tính hiệu quả trong việc quản lý dữ liệu.
STT Thành phần Diễn giải
1 Browser Trình duyệt phía người dùng
2 Web Server Khi người dùng gõ vào trình duyệt, thì nó sẽ request lên Web
3 Routes Nó map request đến vào Controller Action và tạo ra URL đầu ra tương ứng với Controller action
Dispatcher là nơi tiếp nhận yêu cầu đầu tiên từ khách hàng, sau đó chuyển tiếp yêu cầu đó đến các controller tương ứng Đồng thời, Dispatcher cũng đóng vai trò là điểm cuối cùng để trả về kết quả cho khách hàng.
Giao diện 5 View là phần thiết kế dành cho người sử dụng, cho phép người dùng truy cập và lấy thông tin dữ liệu từ MVC thông qua các thao tác truy vấn như tìm kiếm hoặc thông qua các trang web.
6 Model Chứa resources - lưu trữ toàn bộ dữ liệu của ứng dụng Bộ phận này là một cầu nối giữa 2 thành phần bên dưới là View và Controller
7.2 Giao diện trang danh sách rượu:
7.3 Giao diện trang danh sách sản phẩm đặc biệt
7.4 Giao diện trang phụ kiện
7.5 Giao diện trang khuyến mãi
7.6 Giao diện trang tin tức
7.7 Giao diện trang chi tiết tin tức
7.8 Giao diện trang chi tiết sản phẩm
7.9 Giao diện trang giỏ hàng
7.10 Giao diện trang thanh toán
7.11 Giao diện trang đăng nhập
7.12 Giao diện trang cá nhân
7.13 Giao diện chi tiết đơn hàng (user)
7.15 Giao diện tra cứu đơn hàng
7.16 Giao diện quản lý sản phẩm
7.17 Giao diện chi tiết sản phẩm
7.18 Giao diện thêm, chỉnh sửa sản phẩm
7.19 Giao diện quản lý hóa đơn
7.20 Giao diện chi tiết hóa đơn
7.21 Giao diện chỉnh sửa địa chỉ nhận hàng
7.22 Giao diện chỉnh sửa giỏ hàng (Bước 1)
7.23 Giao diện chỉnh sửa giỏ hàng (Bước 2)
7.24 Giao diện chỉnh sửa trạng thái đơn hàng
7.25 Giao diện tạo đơn hàng (Bước 1)
7.26 Giao diện tạo đơn hàng ( Bước 2)
7.27 Giao diện tạo đơn hàng (Bước 3)
7.28 Giao diện xác nhận thanh toán
7.29 Giao diện quản lý voucher
7.30 Giao diện chi tiết voucher
7.31 Giao diện sửa, xóa voucher
7.32 Giao diện quản lý bài viết
7.33 Giao diện thêm, chỉnh sửa bài viết
7.34 Giao diện quản lý banner
7.2 Giao diện chi tiết banner
7.3 Giao diện quản lý người dùng
7.4 Giao diện chỉnh sửa, thêm người dùng
7.6 Giao diện chọn khoảng thời gian
7.7 Giao diện tùy chỉnh khoảng thời gian
Link ảnh drive: https://drive.google.com/drive/folders/1GN9bynCk6oyQz1AnmAd0FItJ9Oj23FBo
Chương 4: Tổng kết
Nhóm đã áp dụng thành công ReactJS để phát triển ứng dụng web, đồng thời sử dụng Redux-thunk cho quản lý trạng thái, giúp tối ưu hóa hiệu suất Ngoài ra, việc sử dụng NodeJS cũng được triển khai hiệu quả trong dự án này.
ReactJS, nhóm cũng đã có thể làm việc với MongoDb và Firebase storage để quản lý dữ liệu của ứng dụng
Nhóm không chỉ tích lũy kiến thức và kinh nghiệm về ReactJS mà còn mở rộng hiểu biết về nghiệp vụ thông qua nghiên cứu ứng dụng Nhờ đó, nhóm tự tin phát triển các dự án khác sử dụng công nghệ này, đặc biệt là ReactJS.
Source code của đồ án được nhóm quản lý ở 2 đường dẫn github sau:
- https://github.com/hacThe/LuxyWine-FE
- https://github.com/hacThe/LuxyWine-BE
- Một số quy trình nghiệp vụ trong khâu quản lý còn chưa được hoàn thiện
- Giao diện chưa thực sự tối ưu cho nhiều thiết bị, responsive chỉ mang tính tương đối
- Chưa test kĩ các tính năng
- Hoàn thành đầy đủ, chi tiết các vấn đề nghiệp vụ trọng tâm
- Chỉnh sửa giao diện responsive hoàn hảo cho tất cả các thiết bị
- Thực hiện các nghiệp vụ Digital Maketting, tối ưu hóa các công cụ tìm kiếm cho trang web
4.1 Đối với người sử dụng:
Giao diện : https://luxy-wine-7ijtn2uzl-hacthe.vercel.app/trang-chu
Tài khoản admin: hienthe.473@gmail.com / a11111111 Đường dẫn quản lý: https://luxy-wine-7ijtn2uzl-hacthe.vercel.app/quan-ly/dashboard
4.2 Đối với lập trình viên:
− Clone repository: https://github.com/hacThe/LuxyWine-FE
− Tạo thư mục env với nội dung
− Cài đặt các thư viện: npm install
− Khởi chạy ứng dụng: npm start
− Clone repository: https://github.com/hacThe/LuxyWine-BE
− Tạo thư mục env với nội dung:
− MONGODB_URI=mongodb+srv://admin:
FbMg02FyxIUfB0HX@luxywine.f1fdn.mongodb.net/myFirstDatabase?retr yWrites=true&w=majority
− Cài đặt các thư viện: npm install
− Khởi chạy ứng dụng: npm start
5 Bảng phân công công việc
STT Tên công việc Thành viên
1 Chuẩn bị, lên kế hoạch x x
2 Khảo sát, đặc tả yêu cầu x x
6 Chức năng người dùng (Front end) x
7 Chức năng quản lý (Front end) x
9 Kiểm tra và sửa lỗi x x
10 Viết và tổng hợp báo cáo x x
Tỷ lệ công việc phân công 50% 50%
