Xây dựng trang đặt đồ ăn trực tuyến

Đồ án tốt nghiệp ngành CNTT: Xây dựng trang đặt đồ ăn trực tuyến - ĐH Quản lý và Công nghệ Hải Phòng

• Tác giả: Hoàng Việt Trung
• Người hướng dẫn: ThS. Vũ Phạm Minh Hiển
• Trường học: Trường Đại học Quản lý và Công nghệ Hải Phòng
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Xây dựng trang đặt đồ ăn trực tuyến
• Loại tài liệu: Đồ án tốt nghiệp
• Năm xuất bản: 2025
• Địa điểm: Hải Phòng

Tóm tắt

I. Tổng quan đồ án xây dựng trang đặt đồ ăn trực tuyến tại HPU

Đồ án tốt nghiệp ngành Công nghệ thông tin tại Trường Đại học Quản lý và Công nghệ Hải Phòng tập trung giải quyết nhu cầu thương mại điện tử ẩm thực. Sinh viên Hoàng Việt Trung thực hiện đề tài dưới sự hướng dẫn khoa học của Thạc sĩ Vũ Phạm Minh Hiển. Mục tiêu cốt lõi là phát triển nền tảng đặt đồ ăn trực tuyến đa kênh. Hệ thống phục vụ đồng thời ba nhóm đối tượng gồm người tiêu dùng, cơ sở kinh doanh ăn uống và quản trị viên hệ thống. Nền tảng cho phép tìm kiếm món ăn nhanh chóng theo khu vực địa lý. Khách hàng lựa chọn thực đơn phong phú từ nhiều cửa hàng khác nhau trên cùng một giao diện. Các giao dịch diễn ra minh bạch, an toàn và chính xác. Giải pháp này giúp doanh nghiệp F&B mở rộng tệp khách hàng tiềm năng. Mô hình vận hành số hóa cắt giảm chi phí trung gian cho các quán ăn địa phương. Đề tài khẳng định năng lực ứng dụng kiến thức lập trình chuyên sâu vào bài toán thực tế của sinh viên.

1.1. Bối cảnh và tính cấp thiết của đề tài

Thị trường dịch vụ ăn uống chuyển dịch mạnh mẽ sang môi trường kỹ thuật số. Người dân đô thị ngày càng ưa chuộng hình thức đặt thức ăn giao tận nơi. Thói quen này tiết kiệm thời gian di chuyển trong nhịp sống bận rộn. Tuy nhiên, nhiều hàng quán truyền thống gặp trở ngại khi tự xây dựng giải pháp công nghệ riêng biệt. Chi phí đầu tư hạ tầng phần mềm thường rất tốn kém. Do đó, một nền tảng trực tuyến tập trung là giải pháp tối ưu. Hệ thống giúp kết nối các nhà hàng nhỏ lẻ với mạng lưới khách hàng rộng lớn. Dự án nghiên cứu tại Đại học Quản lý và Công nghệ Hải Phòng đáp ứng đúng xu thế chuyển đổi số này. Nghiên cứu mang lại giá trị thực tiễn cao cho cộng đồng và doanh nghiệp.

1.2. Mục tiêu nghiên cứu và phạm vi triển khai

Đồ án hướng tới thiết kế một hệ thống thương mại điện tử hoàn chỉnh. Nền tảng tích hợp đầy đủ công năng từ tìm kiếm, tạo giỏ hàng đến thanh toán. Người mua dễ dàng theo dõi trạng thái món ăn theo thời gian thực. Đối với chủ quán, hệ thống cung cấp công cụ đăng ký kinh doanh và quản lý menu khoa học. Doanh thu của nhà hàng được thống kê trực quan bằng biểu đồ số liệu. Quản trị viên đóng vai trò phê duyệt hồ sơ đối tác và giám sát vận hành toàn cục. Đề tài được hoàn thiện với sự đồng hành chuyên môn từ Công ty TNHH Máy tính Đông Phong. Phạm vi ứng dụng tập trung giải quyết bài toán đặt món ăn thực tế tại địa bàn thành phố Hải Phòng.

II. Phân tích yêu cầu đồ án xây dựng trang đặt đồ ăn trực tuyến

Quá trình xây dựng phần mềm đòi hỏi sự phân tích yêu cầu nghiệp vụ chặt chẽ. Hệ thống đặt món ăn trực tuyến xử lý luồng công việc phức tạp giữa nhiều chủ thể. Khách hàng mong muốn tìm kiếm món ăn nhanh chóng và kiểm tra đơn hàng trực quan. Chủ nhà hàng cần theo dõi biến động doanh thu, cập nhật bảng giá và tiếp nhận thực đơn linh hoạt. Quản trị viên cần công cụ kiểm duyệt thông tin nhà hàng và kiểm soát nội dung hệ thống. Việc quản lý phân quyền nếu lỏng lẻo sẽ gây xung đột dữ liệu nghiêm trọng. Bên cạnh đó, tốc độ phản hồi của giao diện ảnh hưởng trực tiếp đến hành vi đặt món. Các trang web thương mại điện tử thường đối mặt với tình trạng gián đoạn giao dịch khi lượng truy cập tăng vọt. Sự thiếu đồng bộ giữa trạng thái đơn hàng của người mua và bếp chế biến gây ra trải nghiệm tiêu cực. Phân tích use case chi tiết giúp định hình luồng xử lý chuẩn xác. Các tác nhân tương tác nhịp nhàng nhờ kiến trúc dữ liệu phân định rõ ràng. Mỗi chức năng đều được đặc tả cẩn thận nhằm giảm thiểu sai sót kỹ thuật.

2.1. Phân tích yêu cầu chức năng theo từng tác nhân

Hệ thống phân tách quyền hạn thành ba nhóm tác nhân rõ rệt. Nhóm khách hàng thực hiện đăng ký, đăng nhập tài khoản cá nhân, xem thực đơn và thêm món ăn vào giỏ. Khách hàng có thể nhập địa chỉ nhận hàng, xác nhận phương thức thanh toán và kiểm tra lịch sử mua sắm. Chủ nhà hàng có quyền thiết lập thông tin cơ sở kinh doanh, tạo danh mục thực đơn và điều chỉnh giá bán. Họ chủ động quản lý trạng thái chuẩn bị món ăn hoặc từ chối đơn hàng khi hết nguyên liệu. Quản trị viên nắm quyền lực cao nhất trong hệ thống quản lý. Họ phê duyệt yêu cầu mở gian hàng, khóa tài khoản vi phạm chính sách và theo dõi tổng thể doanh thu toàn sàn.

2.2. Đặc tả use case đăng nhập và xác thực bảo mật

Use case đăng nhập đóng vai trò chốt chặn kiểm soát truy cập trên website. Quy trình bắt đầu khi người dùng gửi thông tin email và mật khẩu qua giao diện. Tầng giao diện frontend kiểm tra sơ bộ tính hợp lệ của dữ liệu đầu vào. Hệ thống gửi yêu cầu xác thực về máy chủ backend nhằm đối chiếu thông tin trong cơ sở dữ liệu. Trường hợp thông tin không trùng khớp, hệ thống hiển thị thông báo từ chối đăng nhập. Ngược lại, máy chủ cấp phát phiên làm việc an toàn thông qua chuỗi token mã hóa. Dựa vào vai trò giải mã từ token, ứng dụng điều hướng khách hàng tới trang chủ hoặc chuyển quản trị viên tới trang quản trị. Toàn bộ thông tin nhạy cảm đều được mã hóa chặt chẽ.

III. Giải pháp công nghệ đồ án xây dựng trang đặt đồ ăn trực tuyến

Đề tài áp dụng các công nghệ lập trình web hiện đại nhằm xây dựng hệ thống bền vững. Nền tảng React.js giữ vai trò trung tâm trong quá trình phát triển giao diện phía máy khách. Công nghệ Single Page Application đem lại trải nghiệm mượt mà không cần tải lại toàn bộ trang. Việc cấu trúc các thành phần giao diện độc lập giúp mã nguồn dễ bảo trì và nâng cấp. Kiến trúc luồng dữ liệu một chiều của React giúp việc quản lý trạng thái dữ liệu luôn đồng nhất. Ứng dụng tích hợp Context API kết hợp React Hooks để kiểm soát dữ liệu toàn cục. Thông tin xác thực người dùng và dữ liệu giỏ hàng được đồng bộ hóa tức thì giữa các màn hình. Thư viện Axios đảm nhiệm việc gửi các yêu cầu HTTP tới máy chủ backend. Dữ liệu thực đơn và hóa đơn được phản hồi nhanh chóng dưới định dạng JSON tiêu chuẩn. Thư viện React Router DOM điều hướng các trang chức năng linh hoạt mà không gây trễ giao diện. Mô hình thiết kế module hóa này tạo nền móng vững chắc cho khả năng mở rộng dịch vụ sau này.

3.1. Xây dựng giao diện với React.js và Component tái sử dụng

Giao diện người dùng được thiết kế dựa trên tư duy component hóa của thư viện React.js. Các khối hiển thị như thẻ nhà hàng, danh sách món ăn, thanh điều hướng và cửa sổ bật lên được đóng gói độc lập. Cú pháp JSX giúp mã nguồn mô tả giao diện trực quan và gắn kết chặt chẽ với logic JavaScript. Kỹ thuật tái sử dụng component giúp tiết kiệm thời gian phát triển và bảo đảm tính đồng bộ về mặt mỹ thuật. Bên cạnh đó, việc sử dụng các Hook tiêu chuẩn như useState và useEffect tối ưu hóa việc quản lý vòng đời dữ liệu trên từng màn hình. Nhờ vậy, tốc độ kết xuất hình ảnh đạt hiệu suất cao, mang lại trải nghiệm tương tác liền mạch cho người dùng.

3.2. Quản lý trạng thái và giao tiếp API qua Axios

Quản lý trạng thái toàn cục là yếu tố sống còn đối với một ứng dụng thương mại điện tử. Hệ thống triển khai React Context API để hình thành các không gian dữ liệu dùng chung. AuthContext chịu trách nhiệm lưu trữ phiên đăng nhập và quyền hạn của từng tài khoản. CartContext bảo đảm việc cập nhật số lượng món ăn và tính toán tổng tiền luôn chính xác trên mọi trang. Thư viện Axios được cấu hình tập trung để thực hiện các yêu cầu giao tiếp với hệ thống máy chủ backend. Mọi phản hồi dữ liệu hoặc mã lỗi mạng đều được bộ chặn Axios xử lý kịp thời. Cơ chế này bảo đảm dữ liệu truyền tải thông suốt, đồng thời gia tăng tính bảo mật cho hệ thống.

IV. Kết luận và ứng dụng đồ án xây dựng trang đặt đồ ăn trực tuyến

Đồ án tốt nghiệp hoàn thành xuất sắc các mục tiêu nghiên cứu và giải pháp công nghệ đã đề ra. Website chứng minh tính khả thi cao khi vận hành thử nghiệm trong môi trường bán thực tế. Nền tảng kết nối liền mạch giữa khách hàng, đơn vị ẩm thực và quản trị viên vận hành. Người tiêu dùng đặt món ăn thuận tiện chỉ qua vài thao tác chuột đơn giản. Nhà hàng tối ưu hóa doanh thu nhờ bảng điều khiển quản lý trực quan và chính xác. Ban quản trị dễ dàng kiểm soát các hoạt động kinh doanh trên toàn sàn. Dự án thể hiện rõ năng lực chuyên môn và tư duy phân tích của sinh viên ngành Công nghệ thông tin. Sản phẩm không chỉ đáp ứng yêu cầu học thuật của nhà trường mà còn mang giá trị thương mại rõ nét. Trong giai đoạn kế tiếp, hệ thống có thể tích hợp cổng thanh toán trực tuyến và công nghệ định vị GPS. Đề tài mở ra tiềm năng ứng dụng thực tế rộng mở cho ngành dịch vụ ẩm thực tại Hải Phòng.

4.1. Hiệu quả ứng dụng thực tiễn trong ngành F B

Website đóng góp phương thức kinh doanh số hóa hữu hiệu cho các nhà hàng ẩm thực. Các chủ hộ kinh doanh không cần đầu tư chi phí lớn để xây dựng máy chủ riêng. Nền tảng hỗ trợ hiển thị hình ảnh món ăn trực quan, giúp tăng tỷ lệ chốt đơn hàng mỗi ngày. Quy trình xử lý đơn hàng từ khâu tiếp nhận đến bàn giao diễn ra minh bạch và giảm thiểu sai sót. Dữ liệu bán hàng được lưu trữ hệ thống hóa, hỗ trợ chủ quán đánh giá sở thích khách hàng chuẩn xác. Việc số hóa toàn diện tạo điều kiện cho các doanh nghiệp ăn uống địa phương nâng cao sức cạnh tranh trên thị trường hiện đại.

4.2. Hướng phát triển và nâng cấp hệ thống tương lai

Hệ thống sở hữu tiềm năng mở rộng rất lớn về mặt tính năng kỹ thuật. Định hướng nâng cấp bao gồm tích hợp các cổng thanh toán điện tử như VNPay, MoMo và thẻ quốc tế. Đội ngũ phát triển có thể bổ sung thuật toán trí tuệ nhân tạo để gợi ý món ăn theo sở thích cá nhân. Tính năng định vị bản đồ vệ tinh giúp người mua theo dõi đường đi của tài xế theo thời gian thực. Bên cạnh đó, việc xây dựng phiên bản ứng dụng di động trên nền tảng React Native sẽ tối ưu hóa trải nghiệm người dùng trên điện thoại thông minh. Những cải tiến này sẽ hoàn thiện hệ sinh thái dịch vụ, tạo sức hút mạnh mẽ cho thị trường giao nhận đồ ăn.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Đồ án tốt nghiệp "Xây dựng trang Đặt đồ ăn trực tuyến" do sinh viên Hoàng Việt Trung (Mã sinh viên: 2212102021, Lớp: CT2601) thực hiện tại Khoa Công nghệ thông tin, Trường Đại học Quản lý và Công nghệ Hải Phòng, dưới sự hướng dẫn của ThS. Vũ Phạm Minh Hiển và cán bộ phản biện là ThS. Vũ Trọng Chiến. Đề tài được giao ngày 06/10/2025 và hoàn thành ngày 27/12/2025; địa điểm thực tập tốt nghiệp tại Công ty TNHH Máy tính Đông Phong.

Về bối cảnh thực tiễn, trong giai đoạn công nghệ số phát triển mạnh mẽ, các hoạt động thương mại và dịch vụ trực tuyến trở thành xu hướng tất yếu của xã hội hiện đại. Nhu cầu đặt đồ ăn trực tuyến ngày càng gia tăng do tính chất tiện lợi và nhanh chóng. Tuy nhiên, theo khảo sát thực tế của tác giả, hầu hết các hệ thống đặt đồ ăn hiện có trên thị trường phục vụ riêng cho một nhà hàng hoặc một chuỗi cố định, gây cản trở cho người dùng khi muốn đối chiếu giá cả, thực đơn và chất lượng món ăn giữa nhiều nhà hàng khác nhau. Xuất phát từ hạn chế đó, việc xây dựng một hệ sinh thái website cho phép nhiều nhà hàng cùng tham gia hoạt động song song là giải pháp cần thiết nhằm kết nối trực tiếp khách hàng, chủ cơ sở kinh doanh ẩm thực và đơn vị quản trị.

Mục tiêu nghiên cứu của đồ án bao gồm bốn nội dung trọng tâm:

1. Xây dựng một hệ thống website hỗ trợ nhiều nhà hàng hoạt động cùng lúc, cho phép người dùng đặt món ăn trực tuyến.
2. Thiết kế giao diện thân thiện, hiện đại và dễ sử dụng cho cả người dùng, chủ nhà hàng và quản trị viên.
3. Cung cấp đầy đủ các chức năng: quản lý tài khoản, giỏ hàng, đơn hàng, món ăn, thống kê và phê duyệt đăng ký nhà hàng.
4. Đảm bảo tính bảo mật thông tin, toàn vẹn dữ liệu và khả năng mở rộng trong tương lai.

Đối tượng nghiên cứu của đề tài là hệ thống website thương mại điện tử phục vụ đặt đồ ăn trực tuyến, tập trung vào ba nhóm tác nhân chính: Khách hàng (bao gồm khách vãng lai và thành viên đã đăng ký), Chủ nhà hàng (Owner) và Quản trị viên hệ thống (Admin). Phạm vi nghiên cứu về mặt nghiệp vụ bao gồm: tìm kiếm và tra cứu thực đơn; quản lý giỏ hàng và đặt hàng; quản lý thực đơn, đơn hàng và doanh thu của nhà hàng; kiểm duyệt tài khoản, nhà hàng và giám sát toàn bộ hệ thống. Phạm vi kỹ thuật giới hạn trong mô hình Client - Server trao đổi dữ liệu qua giao thức HTTP/HTTPS với định dạng JSON thông qua kiến trúc RESTful API.

Cơ sở lý thuyết và phương pháp

Đồ án xây dựng dựa trên các nền tảng lý thuyết và công nghệ phát triển ứng dụng web hiện đại:

• Kiến trúc Client – Server: Hệ thống phân tách độc lập giữa phần mềm máy khách (giao diện tương tác người dùng) và phần mềm máy chủ (xử lý logic nghiệp vụ và dữ liệu). Client không kết nối trực tiếp vào cơ sở dữ liệu mà giao tiếp trung gian qua các điểm cuối (endpoint) RESTful API.
• Frontend (Tầng hiển thị): Xây dựng bằng thư viện React.js theo mô hình Single Page Application (SPA), tận dụng cơ chế Virtual DOM để tối ưu hóa hiệu năng tái dựng giao diện. Hệ thống áp dụng React Router DOM (BrowserRouter, Routes, Route, Link, cùng các hook useNavigate, useParams, useLocation) để điều hướng URL không cần tải lại trang. Việc quản lý trạng thái toàn cục (global state) được thực hiện thông qua Context API kết hợp hook useContext, bao gồm AuthContext (trạng thái đăng nhập và phân quyền vai trò) và CartContext (danh sách món ăn, số lượng và giá trị giỏ hàng). Thư viện Axios được dùng để thực hiện các yêu cầu HTTP (GET, POST, PUT, DELETE).
• Backend (Tầng logic nghiệp vụ): Triển khai trên môi trường thực thi Node.js sử dụng framework Express.js theo kiến trúc MVC biến thể cho RESTful API. Hệ thống áp dụng cơ chế chuỗi Middleware để tiền xử lý yêu cầu HTTP: isAuth kiểm tra xác thực định danh thông qua JSON Web Token (JWT); isAdmin và isOwner kiểm soát phân quyền truy cập tài nguyên; thư viện CORS giải quyết truy cập tài nguyên chéo nguồn giữa client và server.
• Cơ sở dữ liệu (Tầng dữ liệu): Sử dụng hệ quản trị cơ sở dữ liệu quan hệ MySQL kết hợp công cụ ánh xạ quan hệ - đối tượng (ORM) Sequelize để định nghĩa mô hình (Model) và thực thi các thao tác CRUD dữ liệu. Mật khẩu người dùng được mã hóa trước khi lưu trữ vào hệ thống.
• Phương pháp nghiên cứu: Tác giả áp dụng phương pháp khảo sát thực nghiệm các hệ thống dịch vụ giao đồ ăn thực tế trong nước (GrabFood, ShopeeFood, Baemin) và mô hình quốc tế (Uber Eats, DoorDash, Zomato); phương pháp phân tích và thiết kế hệ thống hướng đối tượng (OOAD) sử dụng chuẩn mô hình hóa UML (biểu đồ use case, biểu đồ tuần tự, lược đồ EER); phương pháp kiểm thử hộp đen (Black Box Testing).

Kỹ thuật kiểm thử hộp đen sử dụng	Mục đích áp dụng trong đồ án
Phân vùng tương đương (Equivalence Partitioning)	Chia dữ liệu đầu vào thành các nhóm hợp lệ và không hợp lệ để giảm số ca kiểm thử
Phân tích giá trị biên (Boundary Value Analysis)	Kiểm tra các giá trị tại điểm biên và cận biên của trường nhập liệu
Bảng quyết định (Decision Table Testing)	Xác định tổ hợp điều kiện đầu vào và hành động phản hồi tương ứng của hệ thống
Chuyển trạng thái (State Transition Testing)	Kiểm thử quy trình chuyển đổi vòng đời của đơn hàng và trạng thái duyệt nhà hàng
Đoán lỗi (Error Guessing)	Dự đoán các sai sót nhập liệu thường gặp dựa trên kinh nghiệm thực tế
Kiểm thử khám phá (Exploratory Testing)	Tự do khám phá hành vi ứng dụng mà không cần kịch bản cố định trước
Kiểm thử hồi quy (Regression Testing)	Đảm bảo tính ổn định của các chức năng cũ khi cập nhật mã nguồn mới

Thiết kế và triển khai

Hệ thống được thiết kế theo kiến trúc 3 tầng phân tách rõ rệt: Presentation Layer (React.js), Business Logic Layer (Node.js/Express.js) và Data Access Layer (MySQL).

Tầng dữ liệu được chuẩn hóa thành các bảng quan hệ liên kết qua khóa chính và khóa ngoại, phản ánh nghiệp vụ thương mại điện tử đa nhà hàng:

Tên bảng CSDL	Chức năng lưu trữ và mối quan hệ
users	Lưu trữ định danh, tên, email, mật khẩu đã mã hóa, số điện thoại, địa chỉ và vai trò truy cập (Khách hàng, Chủ nhà hàng, Admin)
restaurants	Thông tin các cơ sở ẩm thực: tên nhà hàng, địa chỉ, giờ mở cửa, ảnh đại diện, trạng thái phê duyệt; liên kết với tài khoản chủ sở hữu
menu_items	Danh sách món ăn thuộc từng nhà hàng: tên món, mô tả, đơn giá, hình ảnh món ăn; liên kết khóa ngoại với bảng restaurants
cart_items	Lưu trữ dữ liệu giỏ hàng của người dùng: mã món ăn, số lượng chọn mua, đơn giá tại thời điểm đưa vào giỏ
orders	Thông tin đơn đặt hàng tổng: mã khách hàng, mã nhà hàng, tổng tiền, địa chỉ giao nhận, trạng thái đơn hàng, phương thức thanh toán
order_items	Chi tiết các món ăn nằm trong từng đơn hàng cụ thể: liên kết với bảng orders và bảng menu_items

Hệ thống đặc tả các chỉ số yêu cầu phi chức năng phục vụ vận hành:

• Bảo mật: Xác thực phiên làm việc thông qua token JWT, kiểm soát phân quyền nghiêm ngặt giữa ba vai trò; mã hóa dữ liệu mật khẩu người dùng trước khi ghi vào cơ sở dữ liệu.
• Sao lưu và phục hồi: Có cơ chế sao lưu dự phòng định kỳ các bảng dữ liệu cốt lõi và phục hồi nguyên vẹn khi xảy ra sự cố.
• Tính khả dụng: Hệ thống thiết kế đảm bảo khả năng hoạt động liên tục 24/7.
• Hiệu năng và độ tải: Thời gian phản hồi cho các tác vụ tải trang, duyệt thực đơn, thao tác giỏ hàng dưới 3 giây; hệ thống đáp ứng tải đồng thời khoảng 50 người dùng truy cập thao tác cùng lúc mà không xảy ra tình trạng trễ hay tắc nghẽn.
• Khả năng tương thích: Ứng dụng vận hành đồng bộ trên các trình duyệt web gồm Google Chrome, Cốc Cốc và Mozilla Firefox.

Nội dung chính theo từng chương

Chương I: Cơ sở lý thuyết

Nội dung chương I tập trung giới thiệu và làm rõ nền tảng lý thuyết của các công nghệ phần mềm được áp dụng trong đồ án:

• Phân tích mô hình kiến trúc phân tán Client – Server, cơ chế giao tiếp thông qua giao thức HTTP/HTTPS, và vai trò của định dạng dữ liệu JSON trong việc trao đổi thông tin.
• Trình bày kiến trúc thư viện React.js, bao gồm khái niệm Virtual DOM, cấu trúc component, cú pháp JSX, luồng dữ liệu một chiều (One-Way Data Binding), cơ chế React Hooks, thư viện React Router điều hướng trang SPA, và Context API để quản trị biến toàn cục.
• Giới thiệu môi trường Node.js với mô hình hướng sự kiện không chặn I/O; framework Express.js hỗ trợ quản lý endpoint RESTful API, cấu trúc thư mục MVC (Model - View - Controller), và chuỗi hàm trung gian Middleware.
• Trình bày hệ quản trị cơ sở dữ liệu quan hệ MySQL, nguyên lý hoạt động của ORM Sequelize, và cơ chế bảo mật xác thực bằng JWT, phân quyền truy cập, cùng chính sách CORS.
• Trình bày khái niệm, nguyên tắc, ưu nhược điểm của phương pháp kiểm thử hộp đen (Black Box Testing) và các kỹ thuật thiết kế ca kiểm thử phần mềm.

Chương II: Phân tích đặc tả chức năng của hệ thống

Chương II thiết lập danh mục yêu cầu hệ thống, phân tích tác nhân và xây dựng mô hình ca sử dụng (Use Case):

• Định nghĩa 4 nhóm tác nhân tham gia hệ thống:
  1. Khách hàng vãng lai: Xem danh sách nhà hàng, tra cứu thực đơn, tìm kiếm món ăn nhưng chưa có quyền đặt hàng.
  2. Người dùng (Khách hàng đã đăng nhập): Quản lý giỏ hàng, tạo đơn hàng, quản lý hồ sơ cá nhân, xem lịch sử đơn hàng, gửi đăng ký trở thành chủ nhà hàng.
  3. Chủ nhà hàng (Owner): Cập nhật thông tin quán, quản lý danh mục món ăn (thêm, sửa, xóa thực đơn), theo dõi và cập nhật trạng thái đơn đặt hàng, xem thống kê doanh thu nội bộ của nhà hàng.
  4. Quản trị viên (Admin): Phê duyệt hồ sơ đăng ký mở nhà hàng mới, kiểm duyệt món ăn, quản lý danh sách tài khoản người dùng, vô hiệu hóa/kích hoạt tài khoản, xem báo cáo thống kê tổng thể toàn hệ thống.
• Xây dựng biểu đồ use case tổng quát và các biểu đồ phân rã chi tiết cho từng nghiệp vụ: Đăng ký, Đăng nhập, Tìm kiếm nhà hàng/thực đơn, Quản lý giỏ hàng, Đặt món, Quản lý hồ sơ cá nhân, Đăng ký làm nhà hàng, Quản lý đơn hàng, Quản lý người dùng, Quản lý nhà hàng, Phê duyệt nhà hàng, Kiểm duyệt món ăn.
• Đặc tả chi tiết từng use case bao gồm: độ phức tạp, tác nhân thực hiện, tiền điều kiện, hậu điều kiện (thành công/thất bại), kịch bản chính và luồng sự kiện thay thế khi xảy ra lỗi nhập liệu hoặc lỗi hệ thống.

Chương III: Thiết kế chức năng và cơ sở dữ liệu

Nội dung chương III chuyển hóa các yêu cầu phân tích thành tài liệu thiết kế kỹ thuật cụ thể:

• Xây dựng hệ thống biểu đồ tuần tự (Sequence Diagram) mô tả luồng tương tác giữa Người dùng, Giao diện (Frontend), Bộ điều khiển (Controller/Backend) và Cơ sở dữ liệu cho các chức năng: Đăng nhập, Đăng ký, Tìm kiếm và xem chi tiết nhà hàng, Quản lý giỏ hàng, Đặt hàng, Xem và hủy đơn hàng, Cập nhật thông tin tài khoản, Đăng ký mở nhà hàng, Quản lý đơn hàng của chủ quán, Phê duyệt hồ sơ nhà hàng và Quản lý người dùng của quản trị viên.
• Thiết kế cơ sở dữ liệu chi tiết qua lược đồ quan hệ thực thể mở rộng (EER) và mô hình quan hệ; chi tiết hóa cấu trúc dữ liệu của các bảng gồm users, restaurants, menu_items, orders, order_items, cart_items với đầy đủ các thuộc tính, kiểu dữ liệu, ràng buộc khóa chính (PK) và khóa ngoại (FK).

Chương IV: Kiểm thử và triển khai website

Chương IV trình bày các bước cài đặt hệ thống, kịch bản kiểm thử và các giao diện thực nghiệm:

• Thiết lập môi trường hệ thống: Cài đặt tầng dữ liệu MySQL; cấu hình tầng logic nghiệp vụ Business Logic Layer trên nền Express.js; triển khai tầng giao diện Presentation Layer với React.js qua trình quản lý gói NPM và môi trường lập trình VSCode.
• Phân tích và xây dựng bảng test case chi tiết theo phương pháp hộp đen cho từng chức năng chính (đăng ký tài khoản, đăng nhập, tìm kiếm, thao tác giỏ hàng, đặt hàng, quản lý thực đơn, duyệt nhà hàng).
• Thực thi kiểm thử và tổng hợp bảng kết quả test ghi nhận trạng thái hoạt động thực tế của từng ca kiểm thử.
• Mô tả chi tiết hình ảnh giao diện thực tế của hệ thống sau khi triển khai: màn hình đăng nhập, đăng ký, trang chủ danh sách nhà hàng, trang chi tiết thực đơn, giỏ hàng, chi tiết đơn đặt hàng, giao diện quản lý thực đơn, thêm mới món ăn, quản lý đơn hàng cho chủ quán, giao diện trang quản lý và phê duyệt nhà hàng, trang quản trị tài khoản người dùng, trang kiểm duyệt thực đơn và biểu đồ thống kê dành cho Admin.

Chương V: Kết luận

Chương V tổng kết toàn bộ kết quả đạt được từ quá trình nghiên cứu và thực hiện đề tài tốt nghiệp, đồng thời tự nhìn nhận những mặt hạn chế còn tồn đọng và định hướng các nội dung cần phát triển, mở rộng trong tương lai.

Kết quả và đóng góp

Về kết quả triển khai, tác giả đã hoàn thành việc xây dựng ứng dụng web đặt đồ ăn trực tuyến theo đúng các tiêu chí thiết kế ban đầu:

• Triển khai thành công hệ thống hỗ trợ mô hình đa nhà hàng, phân tách rõ ràng giao diện và quyền hạn thao tác cho ba nhóm người dùng: Khách hàng, Chủ nhà hàng và Quản trị viên.
• Xây dựng hoàn chỉnh hệ thống RESTful API kết nối giữa React.js và Node.js/Express.js, đồng bộ dữ liệu vào hệ quản trị MySQL thông qua ORM Sequelize.
• Triển khai đầy đủ các khối chức năng nghiệp vụ cơ bản: xác thực phân quyền với JWT; tra cứu và tìm kiếm nhà hàng/thực đơn; quản lý giỏ hàng và tạo đơn hàng; quản lý danh mục món ăn và cập nhật trạng thái xử lý đơn; hệ thống phê duyệt hồ sơ đăng ký kinh doanh và kiểm duyệt món ăn phía Admin; trang hiển thị báo cáo thống kê đơn hàng.
• Hoàn thành bộ tài liệu phân tích hệ thống hoàn chỉnh với các biểu đồ UML chuẩn hóa (Use case, Sequence, EER) và thực thi kiểm thử chức năng bằng phương pháp kiểm thử hộp đen.

Về giải pháp và đóng góp, đồ án đã hiện thực hóa một mô hình kiến trúc phần mềm phân tầng rõ ràng, ứng dụng kỹ thuật quản lý trạng thái bằng Context API gọn nhẹ thay cho các thư viện phức tạp bên ngoài như Redux. Về mặt học thuật và thực tiễn, đề tài cung cấp một giải pháp mã nguồn mở hoàn chỉnh phục vụ nghiên cứu và giảng dạy, có khả năng triển khai độc lập cho các đơn vị kinh doanh ẩm thực quy mô vừa và nhỏ, khắc phục rào cản mã nguồn đóng của các nền tảng thương mại quy mô lớn trên thị trường như GrabFood hay ShopeeFood.

Hạn chế và hướng nghiên cứu tiếp

Căn cứ theo nội dung đồ án và biên bản nhận xét của giảng viên phản biện ThS. Vũ Trọng Chiến, hệ thống còn tồn tại các mặt hạn chế sau:

• Chức năng đặt đơn hàng chưa hoàn thiện đầy đủ: hệ thống hiện tại mới chỉ áp dụng phương thức thanh toán khi nhận hàng (COD), chưa tích hợp các cổng thanh toán trực tuyến (như thẻ ngân hàng, ví điện tử).
• Hệ thống chưa hỗ trợ tính năng gom đơn hàng từ nhiều nhà hàng khác nhau trong cùng một lượt đặt mua.
• Chưa có tính năng đánh giá, bình luận và xếp hạng món ăn/nhà hàng từ phía khách hàng.
• Tính năng tìm kiếm còn ở mức cơ bản; hệ thống chưa có chức năng theo dõi trạng thái di chuyển của đơn hàng (tracking) theo thời gian thực.
• Giao diện người dùng ở mức cơ bản, chưa đạt mức độ chuyên nghiệp cao; kiểm thử phần mềm chưa được thực hiện toàn diện trên các tập dữ liệu tải lớn.

Về hướng nghiên cứu tiếp theo, đồ án xác định các nội dung nâng cấp:

• Nghiên cứu tích hợp các cổng thanh toán điện tử trực tuyến nhằm đa dạng hóa phương thức thanh toán.
• Bổ sung hệ thống định vị và theo dõi lộ trình đơn hàng theo thời gian thực.
• Xây dựng module đánh giá, chấm điểm và phản hồi chất lượng món ăn/dịch vụ.
• Nghiên cứu ứng dụng trí tuệ nhân tạo (AI) và học máy (Machine Learning) để xây dựng hệ thống gợi ý món ăn thông minh dựa trên hành vi người dùng tương tự các nền tảng Uber Eats hay DoorDash; tối ưu hóa hiệu năng cơ sở dữ liệu để phục vụ lượng truy cập lớn.

Giá trị tham khảo

Đồ án tốt nghiệp là tài liệu tham khảo phù hợp cho sinh viên chuyên ngành Công nghệ thông tin, Kỹ thuật phần mềm và các lập trình viên đang tiếp cận quy trình xây dựng ứng dụng web thương mại điện tử theo ngăn xếp công nghệ React.js – Node.js – Express.js – MySQL.

Các nội dung có giá trị tham khảo nổi bật bao gồm:

• Quy trình phân tích hướng đối tượng (OOAD) với hệ thống biểu đồ use case tổng quát và biểu đồ use case phân rã chi tiết cho bài toán sàn thương mại điện tử đa người bán (multi-vendor).
• Mô hình thiết kế cơ sở dữ liệu quan hệ chuẩn hóa xử lý mối quan hệ giữa tài khoản, nhà hàng, thực đơn, giỏ hàng và chi tiết đơn đặt hàng.
• Phương pháp cấu trúc hệ thống Backend Express theo mô hình MVC, cơ chế xây dựng RESTful API và chuỗi Middleware bảo mật kết hợp xác thực JWT.
• Tài liệu quy trình thiết kế và thực thi kịch bản kiểm thử hộp đen với các kỹ thuật phân tích giá trị biên và phân vùng tương đương.

Câu hỏi thường gặp

1. Hệ thống phân chia quyền truy cập giữa các nhóm người dùng như thế nào?
Hệ thống sử dụng cơ chế token JWT kết hợp các Middleware tại tầng Backend: isAuth kiểm tra trạng thái đăng nhập hợp lệ của phiên làm việc; isOwner xác minh quyền quản trị đối với thông tin thực đơn và đơn hàng thuộc nhà hàng sở hữu; isAdmin cấp quyền cao nhất để phê duyệt nhà hàng, kiểm duyệt món ăn và khóa/mở tài khoản người dùng trên toàn hệ thống.

2. Quá trình trao đổi dữ liệu giữa Frontend (React.js) và Backend (Node.js/Express) diễn ra ra sao?
Frontend và Backend hoạt động độc lập và giao tiếp thông qua giao thức HTTP/HTTPS với định dạng dữ liệu JSON. Phía Frontend dùng thư viện Axios để gửi các yêu cầu RESTful API (GET, POST, PUT, DELETE). Phía Backend cấu hình middleware CORS để cho phép tiếp nhận yêu cầu từ tên miền client, xử lý logic nghiệp vụ và trả về dữ liệu JSON để React.js cập nhật trực tiếp lên giao diện người dùng.

3. Cơ sở dữ liệu của đồ án được cấu trúc từ các bảng dữ liệu chính nào?
Hệ thống sử dụng cơ sở dữ liệu MySQL gồm sáu bảng dữ liệu cốt lõi: users (tài khoản người dùng), restaurants (thông tin nhà hàng), menu_items (món ăn trong thực đơn), cart_items (chi tiết giỏ hàng người dùng), orders (thông tin đơn hàng tổng quát) và order_items (danh sách món ăn chi tiết trong từng đơn).

4. Những hạn chế kỹ thuật lớn nhất của hệ thống được hội đồng phản biện chỉ ra là gì?
Theo nhận xét của ThS. Vũ Trọng Chiến, hệ thống chưa tích hợp cổng thanh toán trực tuyến (chỉ dùng thanh toán COD), chưa hỗ trợ đặt đơn từ nhiều nhà hàng cùng lúc, thiếu chức năng đánh giá/bình luận món ăn, chưa có cơ chế theo dõi đơn hàng theo thời gian thực, giao diện chưa chuyên nghiệp và chưa kiểm thử chịu tải trên quy mô dữ liệu lớn.

5. Hệ thống đặt ra những chỉ tiêu phi chức năng cụ thể nào về hiệu năng phục vụ?
Theo đặc tả tại Chương II, hệ thống yêu cầu thời gian phản hồi cho các thao tác thông thường (như duyệt trang, xem thực đơn, cập nhật giỏ hàng) phải dưới 3 giây; đồng thời hệ thống phải đảm bảo khả năng phục vụ đồng thời tối thiểu khoảng 50 người dùng truy cập thao tác mà không bị chậm hoặc gián đoạn.

Kết luận

Đồ án tốt nghiệp "Xây dựng trang Đặt đồ ăn trực tuyến" của sinh viên Hoàng Việt Trung đã hoàn thành các nhiệm vụ nghiên cứu và phát triển một nền tảng web đa nhà hàng hoàn chỉnh dựa trên ngăn xếp React.js, Node.js, Express.js và MySQL. Hệ thống đã hiện thực hóa đầy đủ các luồng chức năng phân quyền cơ bản cho Khách hàng, Chủ nhà hàng và Quản trị viên theo đúng đặc tả phân tích thiết kế hệ thống thông tin. Mặc dù vẫn còn những hạn chế về phương thức thanh toán trực tuyến, tính năng đánh giá và khả năng xử lý dữ liệu quy mô lớn, đồ án đáp ứng tốt các yêu cầu học thuật của một khóa luận kỹ sư công nghệ thông tin và cung cấp cơ sở thực tiễn rõ ràng cho các hướng phát triển mở rộng tiếp theo.

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

CHƯƠNG I: CƠ SỞ LÝ THUYẾT 1. Mô hình Client – Server trong phát triển web Ảnh 1.1: Mô hình Client – Server-Data Trong lĩnh vực phát triển phần mềm nói chung và lập trình web nói riêng, mô hình Client – Server là một kiến trúc cơ bản và phổ biến nhất. Kiến trúc này phân chia rõ ràng vai trò giữa hai thành phần chính: Client (máy khách) và Server (máy chủ), giúp hệ thống hoạt động hiệu quả, linh hoạt và dễ dàng mở rộng. - Client (Máy khách): Là phía người dùng tương tác trực tiếp, trong dự án này chính là trình duyệt web mà người dùng sử dụng để truy cập website.

Client có nhiệm vụ gửi yêu cầu (request) đến Server thông qua giao thức HTTP/HTTPS. Giao diện người dùng của dự án được phát triển bằng công nghệ ReactJS, kết hợp với HTML, CSS và JavaScript để tạo ra trải nghiệm tương tác và linh hoạt. - Server (Máy chủ): Là nơi xử lý logic nghiệp vụ, tương tác với cơ sở dữ liệu và phản hồi lại các yêu cầu từ Client. Trong dự án này, Server được xây dựng bằng Node.js và framework Express.

Server chịu trách nhiệm xử lý các yêu-cầu như xác thực người dùng, quản lý nhà hàng, xử lý đơn đặt hàng và truy vấn dữ liệu từ cơ sở dữ liệu. Khái niệm về mô hình Client – Server Mô hình Client – Server là một mô hình phân tán, trong đó Client là bên gửi yêu cầu dịch vụ và Server là bên cung cấp dịch vụ đó. Khi người dùng thực hiện một hành động trên website (ví dụ: xem danh sách nhà hàng, đăng nhập, đặt món ăn), các hành động đó sẽ được trình duyệt (Client) gửi dưới dạng yêu cầu HTTP tới Server. Sau khi nhận và xử lý yêu cầu, Server sẽ gửi phản hồi (response) về cho Client, thường dưới dạng dữ liệu JSON.

Client sẽ nhận dữ liệu này và sử dụng nó để cập nhật giao diện, hiển thị thông tin tương ứng cho người dùng. Một đặc điểm quan trọng của mô hình này là Client không trực tiếp truy cập vào cơ sở dữ liệu. Toàn bộ tương tác với dữ liệu đều phải thông qua các API do Server cung cấp, giúp đảm bảo tính bảo mật, toàn vẹn và quản lý dữ liệu một cách tập trung. Vai trò và chức năng của Client Client là phần giao diện người dùng (UI – User Interface), nơi người dùng tương tác trực tiếp với hệ thống.

Trong dự án này, phần Client được xây dựng bằng React.js – một thư viện JavaScript mạnh mẽ để xây dựng các giao diện người dùng có tính tương tác cao. - Các chức năng chính của Client trong dự án bao gồm: • Hiển thị giao diện thân thiện, cho phép người dùng xem danh sách nhà hàng, thực đơn, và quản lý giỏ hàng. • Gửi các yêu cầu HTTP đến Server khi người dùng thực hiện các hành động như đăng nhập, đặt hàng, hoặc tìm kiếm. Các phương thức phổ biến được dùng là GET, POST, PUT, DELETE.

• Nhận dữ liệu (thường ở dạng JSON) từ Server và cập nhật lại giao diện một cách linh hoạt mà không cần tải lại trang. • Thực hiện điều hướng giữa các trang (ví dụ: từ trang chủ đến trang chi tiết nhà hàng), quản lý trạng thái của ứng dụng (state), và xử lý các sự kiện từ người dùng. - Với việc sử dụng công nghệ Single Page Application (SPA), ứng dụng chỉ tải trang một lần duy nhất và sau đó cập nhật nội dung một cách linh hoạt, mang đến trải nghiệm mượt mà và nhanh chóng cho người dùng. Vai trò và chức năng của Server Server là nơi tiếp nhận, xử lý các yêu cầu từ Client và gửi phản hồi tương ứng.

Trong dự án này, Server được xây dựng bằng Node.js kết hợp với framework Express. - Các chức năng chính của Server bao gồm: • Xử lý logic nghiệp vụ (business logic) như: xử lý đăng ký/đăng nhập, quản lý gi-ỏ hàng, tạo và quản lý đơn hàng, phê duyệt nhà hàng mới. • Quản lý và tương tác với cơ sở dữ liệu (thêm, sửa, xóa, truy vấn dữ liệu liên quan đến người dùng, nhà hàng, món ăn, đơn hàng). • Cung cấp các API theo tiêu chuẩn RESTful để Client có thể dễ dàng giao tiếp và sử dụng tài nguyên.

• Bảo mật hệ thống bằng các phương pháp xác thực (authentication) để xác định danh tính người dùng và phân quyền (authorization) để kiểm soát quyền truy cập tài nguyên (ví dụ: chỉ Admin mới có quyền duyệt nhà hàng). • Xử lý việc tải lên và lưu trữ các tệp tin (uploads) như hình ảnh đại diện của nhà hàng hoặc món ăn. - Server hoạt động trên một cổng (port) riêng, liên tục lắng nghe các yêu cầu HTTP đến và gửi phản hồi dữ liệu về cho Client. Nguyên lý hoạt động - Server hoạt động trên một cổng (port) riêng, liên tục lắng nghe các yêu cầu HTTP đến và gửi phản hồi dữ liệu về cho Client.

• Người dùng thực hiện thao tác trên giao diện, ví dụ: nhấn nút "Thêm vào giỏ hàng" cho một món ăn. • Client (ReactJS) sẽ tạo một yêu cầu HTTP (cụ thể là phương thức POST) chứa thông tin về món ăn đó và gửi đến Server.js/Express) nhận yêu cầu, xác thực người dùng, sau đó thực hiện xử lý logic: tìm thông tin người dùng và món ăn, rồi thêm món ăn đó vào giỏ hàng tương ứng trong cơ sở dữ liệu. 15 • Sau khi xử lý xong, Server gửi lại một phản hồi HTTP (HTTP response), thường kèm theo dữ liệu giỏ hàng đã được cập nhật ở định dạng JSON. • Client nhận phản hồi này và cập nhật lại giao diện người dùng, ví dụ: cập nhật số lượng sản phẩm trên biểu tượng giỏ hàng.

Ưu điểm của mô hình Client – Server - Tính phân tách rõ ràng: Tách biệt hoàn toàn giữa giao diện (Frontend) và phần xử lý logic (Backend), giúp cho việc phát triển, bảo trì và nâng cấp từng phần trở nên độc lập và dễ dàng hơn. - Tái sử dụng cao: Backend API được xây dựng có thể phục vụ cho nhiều loại Client khác nhau trong tương lai (ví dụ: ứng dụng di động, ứng dụng desktop) mà không cần xây dựng lại logic. - Dễ mở rộng (Scalability): Khi hệ thống có nhiều người dùng hơn, chúng ta có thể dễ dàng nâng cấp hiệu năng của Server (scale-up) hoặc triển khai thêm nhiều máy chủ (scale-out) mà không ảnh hưởng đến Client. - Bảo mật tập trung: Toàn bộ dữ liệu và logic nghiệp vụ quan trọng được quản lý tập trung tại Server, giúp việc kiểm soát truy cập và bảo vệ dữ liệu trở nên hiệu quả hơn.js Khái niệm React.js (hay React) là một thư viện JavaScript mã nguồn mở do Facebook phát triển, ra mắt lần đầu vào năm 2013.

React được sử dụng để xây dựng giao diện người dùng (UI) cho các ứng dụng web. Thay vì thao tác trực tiếp với DOM (Document Object Model) của trình duyệt, React sử dụng một cơ chế gọi là Virtual DOM để tối ưu hóa hiệu suất và tốc độ cập nhật giao diện. React không phải là một framework toàn diện như Angular, mà chỉ tập trung vào lớp View (giao diện) trong mô hình MVC, cho phép lập trình viên dễ dàng tạo ra các thành phần giao diện có khả năng tái sử dụng cao. 16 Đặc điểm nổi bật của React.js − Virtual DOM: React tạo ra một bản sao của DOM thật trong bộ nhớ.

Khi trạng thái (state) của một component thay đổi, React sẽ tính toán sự khác biệt và chỉ cập nhật những phần cần thiết trên DOM thật, giúp ứng dụng hoạt động nhanh và mượt mà hơn. − Kiến trúc dựa trên Component: Giao diện trong React được chia thành các thành phần (component) độc lập và có thể tái sử dụng. Mỗi component quản lý trạng thái riêng, giúp mã nguồn trở nên rõ ràng, dễ quản lý và bảo trì. − JSX (JavaScript XML): Là một phần mở rộng của JavaScript, cho phép viết mã trông giống HTML ngay trong các tệp JavaScript.

JSX giúp việc mô tả giao diện trở nên trực quan và dễ hiểu hơn. − Ràng buộc dữ liệu một chiều (One-Way Data Binding): Dữ liệu trong React chảy theo một chiều, từ component cha xuống các component con. Luồng dữ liệu này giúp việc theo dõi và gỡ lỗi trở nên dễ dàng hơn. − Hooks: Kể từ phiên bản 16.8, Hooks (ví dụ: useState, useEffect, useContext) cho phép sử dụng state và các tính năng khác của React trong các function component mà không cần viết class component.

Ứng dụng của React trong chuyên đề Trong dự án website nhà hàng này, React.js được sử dụng để: − Xây dựng toàn bộ giao diện người dùng, bao gồm các trang như: Trang chủ, Trang chi tiết nhà hàng, Giỏ hàng, Đăng nhập, Đăng ký, Trang thông tin người dùng, và các trang quản lý dành cho Chủ nhà hàng và Admin. − Tạo ra các component có khả năng tái sử dụng cao như: Header, Footer, RestaurantCard (thẻ nhà hàng), MenuItemCard (thẻ món ăn), Sidebar (thanh điều hướng bên), Modal (hộp thoại)… − Sử dụng thư viện Axios để gửi yêu cầu HTTP và nhận dữ liệu từ Backend API. − Sử dụng React Router DOM (react-router-dom) để xử lý việc điều hướng, chuyển trang trong ứng dụng. 17 − Quản lý trạng thái toàn cục của ứng dụng, chẳng hạn như thông tin người dùng đang đăng nhập (AuthContext) và dữ liệu giỏ hàng (CartContext) bằng Context API và hook useContext.

React Router Khái niệm React Router là một thư viện định tuyến (routing) tiêu chuẩn cho các ứng dụng React. Nó cho phép xây dựng các ứng dụng đơn trang (SPA) với trải nghiệm điều hướng mượt mà như một trang web đa trang truyền thống. Bằng cách đồng bộ giao diện người dùng với URL của trình duyệt, React Router giúp quản lý việc di chuyển giữa các component khác nhau mà không cần tải lại trang. Cách hoạt động React Router theo dõi sự thay đổi của URL trong trình duyệt, sau đó ánh xạ các đường dẫn (path) này với các component React tương ứng đã được cấu hình để hiển thị.

Nó sử dụng History API của trình duyệt để quản lý lịch sử điều hướng, cho phép người dùng sử dụng các nút back/forward một cách tự nhiên Các thành phần chính được sử dụng trong dự án: − <BrowserRouter>: Component bao bọc toàn bộ ứng dụng để kích hoạt chức năng định tuyến. − <Routes>: Component dùng để nhóm các định nghĩa <Route>. − <Route>: Định nghĩa một tuyến đường, ánh xạ một path (đường dẫn URL) tới một element (component) cụ thể. − Link>: Component thay thế cho thẻ <a> truyền thống, cho phép chuyển hướng giữa các trang mà không gây tải lại trang.

− Các Hooks: useNavigate() để điều hướng theo lập trình, useParams() để lấy các tham số động từ URL (ví dụ: ID của nhà hàng), và useLocation() để truy cập thông tin về URL hiện tại.