1 TÓM TẮT ĐỒ ÁN Đồ án chủ yếu xây dựng ứng dụng đặt món ăn cho phép người dùng đặt món ăn từ các nhà hàng trực tuyến nhưng thay vì chọn món ăn hoàn chỉnh thì người dùng có thể chọn các t
CHƯƠNG 1: GIỚI THIỆU
Mô tả đề tài
• “Fastfood ingredient selection online application” là một ứng dụng cho phép người dùng đặt món ăn nhanh từ các nhà hàng và cho phép người dùng có thể tự do lựa chọn các thành phần cho món ăn phù hợp với nhu cầu của bản thân Ứng dụng này cung cấp cho người dùng danh sách các nhà hàng, cùng với menu và giá cả của các món ăn (cùng với thành phần của chúng) Người dùng có thể dễ dàng tìm kiếm, đặt món ăn, và theo dõi đơn hàng của mình.
Lý do chọn đề tài
• Ứng dụng đặt món ăn là một mô hình kinh doanh mới nổi trong những năm gần đây, và đang ngày càng trở nên phổ biến Thị trường đặt món ăn qua ứng dụng đang phát triển nhanh chóng, với sự tham gia của nhiều doanh nghiệp lớn và nhỏ Do đó, việc nghiên cứu về ứng dụng đặt món ăn có tính cấp thiết cao, nhằm đáp ứng nhu cầu tìm hiểu và giải quyết các vấn đề của ứng dụng đặt món ăn
• Ứng dụng đặt món ăn có tác động trực tiếp đến đời sống của người dân, giúp người dùng tiết kiệm thời gian và công sức, tăng sự lựa chọn, và tiết kiệm tiền
Do đó, việc nghiên cứu về ứng dụng đặt món ăn có tính thực tiễn cao, nhằm góp phần phát triển ứng dụng đặt món ăn, mang lại lợi ích cho người dùng và các doanh nghiệp liên quan
• Nghiên cứu về ứng dụng đặt món ăn có thể ứng dụng trong nhiều lĩnh vực, chẳng hạn như kinh doanh, công nghệ thông tin, và marketing Do đó, việc nghiên cứu về ứng dụng đặt món ăn có tính ứng dụng cao, giúp các doanh nghiệp và tổ chức có thể phát triển các ứng dụng đặt món ăn hiệu quả hơn
• Cụ thể, đối với cá nhân em, việc chọn đề tài ứng dụng đặt món ăn là do em quan tâm đến lĩnh vực công nghệ thông tin và marketing Em thấy rằng ứng dụng đặt món ăn là một ứng dụng công nghệ có nhiều tiềm năng phát triển, và có tác động tích cực đến đời sống của người dân Do đó, em muốn nghiên cứu sâu hơn về ứng dụng đặt món ăn, để hiểu rõ hơn về các vấn đề của ứng dụng, và đề xuất các giải pháp để phát triển ứng dụng đặt món ăn hiệu quả hơn
• Ngoài ra, em cũng thấy rằng đây là một đề tài có tính ứng dụng cao Các nghiên cứu về ứng dụng đặt món ăn có thể được ứng dụng trong việc phát triển các ứng dụng đặt món ăn mới, hoặc cải thiện các ứng dụng đặt món ăn hiện có Do đó, em hy vọng rằng những nghiên cứu của mình sẽ góp phần phát triển ứng dụng đặt món ăn, mang lại lợi ích cho người dùng và các doanh nghiệp liên quan.
Phạm vi nghiên cứu
- Ứng dụng gồm những tính năng chính như: o Chức năng đăng nhập/đăng ký o Quản lý thông tin cửa hàng o Quản lý thông tin khách hàng, các món ăn yêu thích o Tìm kiếm và xem chi tiết thông tin sản phẩm, cửa hàng o Quản lý thông tin sản phẩm và thành phần của chúng o Thêm vào giỏ hàng, đặt món, thanh toán o Đánh giá món ăn
- Ứng dụng này là ứng dụng di động được xây dựng dựa trên công nghệ React Native cho giao diện di động và backend cho ứng dụng này là Nodejs
- Xây dựng cơ sở dữ liệu cho ứng dụng một cách triệt để
- Sử dụng Apollo server để tạo API cho phần backend, và dùng Graphql để gọi API từ backend
- Tạo chức năng thanh toán bằng Stripe
Đối tượng nghiên cứu
Các công nghệ sử dụng:
- Front-end: React Native, Graphql API, react-native-elements, react-native-maps
- Back-end: Nodejs, Apollo Server, PostgreSQL, PrismaORM, Firebase
Authentication, Cloudinary, Stripe Đối tượng nghiên cứu trong phạm vi đề tài bao gồm:
- Người có nhu cầu tìm kiếm và đặt món ăn/thành phần theo nhu cầu của bản thân
- Người có nhu cầu kinh doanh những món ăn nhanh và thành phần của chúng
- Người quản trị (admin) là duy nhất, là người sở hữu ứng dụng này và có khả năng quản lý các tài khoản và xử lý vi phạm.
Phương pháp nghiên cứu
- Tìm hiểu quy trình chi tiết của việc đặt món, từ việc đặt món hàng đến cách quản lý những đơn đặt hàng
- Tham khảo cách thức làm việc của những ứng dụng đặt món nổi bật hiện nay như: Foody, ShopeeFood…
- Tham khảo và tiếp nhận ý kiến đóng góp từ GVHD để từ đó chỉnh sửa và hoàn thiện sản phầm hơn.
CÔNG NGHỆ SỬ DỤNG
React Native
• React Native là một framework phát triển ứng dụng di động đa nền tảng cho phép các nhà phát triển tạo ứng dụng cho iOS và Android bằng JavaScript và React Nó được phát triển bởi Facebook và phát hành vào năm 2015 React Native đã trở nên phổ biến nhờ khả năng tạo ra các ứng dụng hiệu suất cao với giao diện và cảm giác như ứng dụng gốc
• Các tính năng chính của React Native: o Phát triển đa nền tảng: Viết một lần, chạy trên cả iOS và Android o Hiệu suất gốc: Ứng dụng có cảm giác và hiệu suất như ứng dụng gốc o Hot reloading: Xem các thay đổi được phản ánh trong ứng dụng gần như ngay lập tức, giúp tăng tốc quá trình phát triển o Cộng đồng lớn: Lợi ích từ một loạt tài nguyên, thư viện và hỗ trợ
• React Native sử dụng một mô hình "tích hợp gốc" để tạo các ứng dụng di động Điều này có nghĩa là nó sử dụng các thành phần gốc của nền tảng để tạo giao diện người dùng của ứng dụng
1 Các nhà phát triển viết mã bằng JavaScript và React
2 React Native dịch mã thành các thành phần gốc cho từng nền tảng
3 Các thành phần gốc hiển thị giao diện người dùng của ứng dụng trên thiết bị
• React Native có một kiến trúc đơn giản, bao gồm ba thành phần chính: o Luồng JavaScript: Chạy mã JavaScript và giao tiếp với các mô-đun gốc o Các mô-đun gốc: Cung cấp quyền truy cập vào các tính năng dành riêng cho nền tảng như camera, GPS, v.v o Cầu: Giúp tạo điều kiện giao tiếp giữa luồng JavaScript và các mô-đun gốc
• React Native đã được sử dụng để xây dựng một số ứng dụng phổ biến, bao gồm: o Facebook
• React Native cung cấp một số lợi thế so với các công nghệ phát triển ứng dụng di động khác, bao gồm: o Phát triển nhanh hơn: Phát triển đa nền tảng và hot reloading giúp tiết kiệm thời gian o Hiệu suất gốc: Ứng dụng có cảm giác và hiệu suất như ứng dụng gốc o Cộng đồng lớn: Truy cập tài nguyên, thư viện và hỗ trợ o Tiết kiệm chi phí: Phát triển cho cả hai nền tảng với mã cơ sở duy nhất
• React Native cũng có một số hạn chế, bao gồm: o Phức tạp: Có thể phức tạp hơn để học hơn so với phát triển gốc truyền thống o Truy cập hạn chế vào các tính năng gốc: Một số tính năng gốc có thể không khả dụng hoặc không được hỗ trợ đầy đủ o Gỡ lỗi có thể là một thách thức: Gỡ lỗi có thể khó khăn hơn do bản chất đa nền tảng của khung.
Nodejs, Heroku
• Heroku là một nền tảng đám mây như một dịch vụ (PaaS) cho phép các nhà phát triển xây dựng, triển khai và quản lý các ứng dụng web và di động Nó cung cấp một loạt các tính năng và dịch vụ, bao gồm: o Tự động hóa triển khai: Heroku tự động triển khai các ứng dụng của bạn lên đám mây khi bạn thực hiện thay đổi o Quản lý cơ sở hạ tầng: Heroku quản lý cơ sở hạ tầng của bạn, chẳng hạn như máy chủ, bộ nhớ và lưu trữ o Scale-on-demand: Heroku có thể tự động mở rộng ứng dụng của bạn để đáp ứng nhu cầu của người dùng o Công cụ phát triển: Heroku cung cấp các công cụ phát triển, chẳng hạn như trình quản lý gói và trình gỡ lỗi
• Heroku hoạt động bằng cách cung cấp một nền tảng đám mây cho phép các nhà phát triển xây dựng, triển khai và quản lý các ứng dụng web và di động Các nhà phát triển sử dụng các công cụ và dịch vụ của Heroku để tạo ứng dụng của họ, sau đó Heroku tự động triển khai ứng dụng lên đám mây
• Heroku sử dụng một mô hình "phần mềm như dịch vụ" (SaaS) để cung cấp các dịch vụ của mình Điều này có nghĩa là các nhà phát triển chỉ cần trả tiền cho các dịch vụ mà họ sử dụng
• Heroku cung cấp một số lợi thế so với các nền tảng đám mây khác, bao gồm: o Sẵn sàng sử dụng: Heroku cung cấp một nền tảng sẵn sàng sử dụng, giúp các nhà phát triển có thể bắt đầu xây dựng ứng dụng của họ ngay lập tức
9 o Tự động hóa: Heroku tự động triển khai các ứng dụng của bạn lên đám mây và tự động mở rộng ứng dụng của bạn để đáp ứng nhu cầu của người dùng o Dễ sử dụng: Heroku cung cấp một giao diện người dùng trực quan giúp các nhà phát triển dễ dàng quản lý các ứng dụng của họ
• Heroku cũng có một số nhược điểm, bao gồm: o Chi phí: Heroku có thể tốn kém hơn các nền tảng đám mây khác o Khả năng tùy chỉnh: Heroku cung cấp ít khả năng tùy chỉnh hơn các nền tảng đám mây khác o Đối tượng: Heroku phù hợp nhất cho các ứng dụng web và di động nhỏ đến trung bình.
Graphql, Apollo Server
• Apollo Server là một triển khai máy chủ GraphQL mã nguồn mở được xây dựng trên Node.js Nó cung cấp một loạt các tính năng và dịch vụ giúp việc xây dựng các API GraphQL trở nên dễ dàng và nhanh chóng hơn
• Apollo Server được đặc trưng bởi các tính năng sau: o Tương thích với GraphQL: Apollo Server tuân thủ hoàn toàn các tiêu chuẩn GraphQL o Tính hiệu quả: Apollo Server được thiết kế để hiệu quả về mặt tài nguyên và có thể xử lý nhiều truy vấn cùng một lúc o Khả năng mở rộng: Apollo Server có thể được mở rộng để đáp ứng nhu cầu của các ứng dụng lớn
10 o Cộng đồng lớn: Apollo Server có một cộng đồng lớn và tích cực hỗ trợ các nhà phát triển
• Apollo Server đã được sử dụng bởi một số công ty lớn, bao gồm: o Airbnb o The New York Times o Mozilla o Spotify o Twitter
• Apollo Server hoạt động bằng cách cung cấp một API GraphQL cho phép khách hàng truy vấn dữ liệu API này sử dụng một mô hình "tuyên bố" để truy vấn dữ liệu Điều này có nghĩa là khách hàng cung cấp một tuyên bố mô tả dữ liệu họ cần API sau đó sẽ trả về dữ liệu chính xác theo tuyên bố đó
• Apollo Server có một kiến trúc đơn giản, bao gồm ba thành phần chính: o Engine: Engine là thành phần chính của Apollo Server Nó chịu trách nhiệm xử lý các truy vấn GraphQL và trả về dữ liệu o Resolvers: Resolvers là các hàm được sử dụng để lấy dữ liệu từ cơ sở dữ liệu hoặc các nguồn khác o Schema: Schema là định nghĩa cho các loại dữ liệu và mối quan hệ giữa chúng
• Apollo Server cung cấp một số lợi thế so với các triển khai máy chủ GraphQL khác, bao gồm:
11 o Tương thích với GraphQL: Apollo Server tuân thủ hoàn toàn các tiêu chuẩn GraphQL Điều này có nghĩa là các ứng dụng khách GraphQL có thể tương tác với bất kỳ API GraphQL được triển khai bởi Apollo Server o Tính hiệu quả: Apollo Server được thiết kế để hiệu quả về mặt tài nguyên và có thể xử lý nhiều truy vấn cùng một lúc Điều này có thể giúp cải thiện hiệu suất của các ứng dụng GraphQL o Khả năng mở rộng: Apollo Server có thể được mở rộng để đáp ứng nhu cầu của các ứng dụng lớn Điều này có thể giúp các ứng dụng GraphQL phát triển theo thời gian o Cộng đồng lớn: Apollo Server có một cộng đồng lớn và tích cực hỗ trợ các nhà phát triển Điều này có nghĩa là có nhiều tài nguyên có sẵn để giúp các nhà phát triển học cách sử dụng Apollo Server và giải quyết các vấn đề
• Apollo Server cũng có một số nhược điểm, bao gồm: o Học hỏi: Apollo Server có thể khó học hơn các triển khai máy chủ
GraphQL khác o Hỗ trợ: Apollo Server vẫn còn là một công nghệ mới, vì vậy có thể không có nhiều hỗ trợ cho nó như các triển khai máy chủ GraphQL khác.
Firebase Authentication
• Firebase Authentication là một dịch vụ xác thực được cung cấp bởi Firebase, một nền tảng phát triển ứng dụng di động và web của Google Nó cho phép các nhà phát triển dễ dàng thêm xác thực người dùng vào ứng dụng của họ mà không cần phải xây dựng và quản lý cơ sở hạ tầng xác thực của riêng họ
• Các tính năng chính của Firebase Authentication bao gồm:
12 o Hỗ trợ nhiều nhà cung cấp xác thực: Firebase Authentication hỗ trợ nhiều nhà cung cấp xác thực, bao gồm email và mật khẩu, số điện thoại,
Google, Facebook, Twitter, GitHub, và nhiều nhà cung cấp khác o Xác thực không cần máy chủ: Firebase Authentication sử dụng xác thực không cần máy chủ, điều này có nghĩa là các nhà phát triển không cần phải triển khai và quản lý máy chủ xác thực của riêng họ o SDK dễ sử dụng: Firebase Authentication cung cấp các SDK dễ sử dụng cho các nền tảng phổ biến, bao gồm iOS, Android, Web và Unity o Quản lý người dùng: Firebase Authentication cung cấp các tính năng để quản lý người dùng, chẳng hạn như tạo, xóa và cập nhật người dùng o Bảo mật: Firebase Authentication sử dụng các biện pháp bảo mật mạnh mẽ để bảo vệ dữ liệu người dùng
• Cách thức hoạt động của Firebase Authentication:
1 Người dùng đăng nhập bằng một nhà cung cấp xác thực: Người dùng chọn nhà cung cấp xác thực và cung cấp thông tin đăng nhập của họ
2 Firebase Authentication xác thực người dùng: Firebase Authentication xác thực thông tin đăng nhập của người dùng với nhà cung cấp xác thực
3 Firebase Authentication tạo một token xác thực: Nếu xác thực thành công, Firebase Authentication sẽ tạo một token xác thực Token này có thể được sử dụng để xác thực người dùng trong các yêu cầu tiếp theo
4 Ứng dụng lưu trữ token xác thực: Ứng dụng lưu trữ token xác thực trong bộ nhớ cục bộ hoặc trong cơ sở dữ liệu
5 Ứng dụng sử dụng token xác thực để xác thực các yêu cầu: Khi ứng dụng cần thực hiện một yêu cầu thay mặt cho người dùng, nó sẽ bao gồm token xác thực trong yêu cầu
6 Firebase Authentication xác thực token: Firebase Authentication xác thực token xác thực và xác định người dùng được liên kết với token
• Ưu điểm của Firebase Authentication: o Dễ sử dụng: Firebase Authentication rất dễ sử dụng và thiết lập o Hỗ trợ nhiều nhà cung cấp xác thực: Firebase Authentication hỗ trợ nhiều nhà cung cấp xác thực, giúp người dùng dễ dàng đăng nhập bằng tài khoản mà họ đã có o Xác thực không cần máy chủ: Firebase Authentication sử dụng xác thực không cần máy chủ, giúp giảm bớt gánh nặng cho các nhà phát triển o Bảo mật: Firebase Authentication sử dụng các biện pháp bảo mật mạnh mẽ để bảo vệ dữ liệu người dùng
• Nhược điểm của Firebase Authentication: o Giới hạn về số lượng người dùng: Firebase Authentication có giới hạn về số lượng người dùng miễn phí o Phụ thuộc vào Firebase: Firebase Authentication phụ thuộc vào nền tảng Firebase, điều này có thể hạn chế khả năng tùy chỉnh.
Cloudinary
• Cloudinary là một nền tảng quản lý hình ảnh và video đám mây cung cấp các dịch vụ lưu trữ, phân phối, chỉnh sửa và tối ưu hóa hình ảnh và video cho các ứng dụng web và di động Nó được sử dụng bởi các công ty lớn như Airbnb, The New York Times và Spotify
• Cloudinary cung cấp một loạt các tính năng và dịch vụ, bao gồm:
14 o Lưu trữ hình ảnh và video: Cloudinary cung cấp khả năng lưu trữ hình ảnh và video với dung lượng không giới hạn o Phân phối hình ảnh và video: Cloudinary cung cấp khả năng phân phối hình ảnh và video với tốc độ cao và khả năng phục hồi cao o Chỉnh sửa hình ảnh và video: Cloudinary cung cấp một loạt các công cụ chỉnh sửa hình ảnh và video, bao gồm cắt, xoay, thay đổi kích thước, chỉnh sửa màu sắc và thêm hiệu ứng o Tối ưu hóa hình ảnh và video: Cloudinary cung cấp các công cụ tối ưu hóa hình ảnh và video để cải thiện hiệu suất và giảm kích thước tệp
• Cloudinary có một số lợi thế so với các nền tảng quản lý hình ảnh và video khác, bao gồm: o Dễ sử dụng: Cloudinary cung cấp một giao diện người dùng trực quan và một API dễ sử dụng o Tính linh hoạt: Cloudinary cung cấp một loạt các tính năng và dịch vụ để đáp ứng nhu cầu của các ứng dụng khác nhau o Khả năng mở rộng: Cloudinary có thể được mở rộng để đáp ứng nhu cầu của các ứng dụng lớn
• Cloudinary hoạt động bằng cách cung cấp một API cho phép bạn tải lên, lưu trữ, phân phối, chỉnh sửa và tối ưu hóa hình ảnh và video
• Để sử dụng Cloudinary, bạn cần tạo một tài khoản Cloudinary và nhận một API key Sau đó, bạn có thể sử dụng API key này để truy cập các dịch vụ của Cloudinary
• Cloudinary có một kiến trúc đơn giản, bao gồm ba thành phần chính:
15 o API: API là thành phần chính của Cloudinary Nó cung cấp các phương thức để tải lên, lưu trữ, phân phối, chỉnh sửa và tối ưu hóa hình ảnh và video o Dịch vụ: Dịch vụ là các dịch vụ mà Cloudinary cung cấp Chúng bao gồm lưu trữ, phân phối, chỉnh sửa và tối ưu hóa hình ảnh và video o Cơ sở hạ tầng: Cơ sở hạ tầng là nơi lưu trữ hình ảnh và video của bạn
• Cloudinary cung cấp một số lợi thế so với các nền tảng quản lý hình ảnh và video khác, bao gồm: o Dễ sử dụng: Cloudinary cung cấp một giao diện người dùng trực quan và một API dễ sử dụng Điều này làm cho nó trở thành một lựa chọn tốt cho các nhà phát triển không có kinh nghiệm về quản lý hình ảnh và video o Tính linh hoạt: Cloudinary cung cấp một loạt các tính năng và dịch vụ để đáp ứng nhu cầu của các ứng dụng khác nhau Điều này làm cho nó trở thành một lựa chọn tốt cho các ứng dụng từ nhỏ đến lớn o Khả năng mở rộng: Cloudinary có thể được mở rộng để đáp ứng nhu cầu của các ứng dụng lớn Điều này làm cho nó trở thành một lựa chọn tốt cho các ứng dụng có lưu lượng truy cập cao
• Cloudinary cũng có một số nhược điểm, bao gồm: o Chi phí: Cloudinary có thể tốn kém hơn các nền tảng quản lý hình ảnh và video khác o Khả năng tùy chỉnh: Cloudinary cung cấp một số tùy chỉnh, nhưng có thể không đủ cho các ứng dụng có yêu cầu cụ thể.
THIẾT KẾ HỆ THỐNG
Phân tích hệ thống
• Mô hình hệ thống: Mô hình hệ thống của ứng dụng là mô hình client-server Mô hình này cho phép máy khách và máy chủ giao tiếp với nhau một cách hiệu quả
• Kiến trúc hệ thống: Kiến trúc hệ thống của ứng dụng đặt món ăn có thể được thiết kế theo mô hình ba tầng Mô hình này bao gồm các tầng sau: o Tầng ứng dụng: Tầng ứng dụng chịu trách nhiệm tương tác với người dùng và gửi các yêu cầu đến máy chủ o Tầng logic: Tầng logic chịu trách nhiệm xử lý các yêu cầu từ máy khách và trả về phản hồi o Tầng dữ liệu: Tầng dữ liệu chịu trách nhiệm lưu trữ dữ liệu của hệ thống
• Các thành phần của hệ thống: Các thành phần chính của hệ thống ứng dụng đặt món ăn bao gồm: o Máy khách: Máy khách là ứng dụng được cài đặt trên thiết bị của người dùng o Máy chủ: Máy chủ chịu trách nhiệm xử lý các yêu cầu từ máy khách và trả về phản hồi o Cơ sở dữ liệu: Cơ sở dữ liệu lưu trữ dữ liệu của hệ thống, chẳng hạn như danh sách cửa hàng, món ăn, đơn đặt hàng, v.v o API: API cung cấp các dịch vụ cho máy khách
• Các yêu cầu kỹ thuật: Các yêu cầu kỹ thuật của hệ thống ứng dụng đặt món ăn có thể bao gồm các yêu cầu sau:
17 o Yêu cầu về bảo mật: Hệ thống phải được thiết kế để bảo vệ dữ liệu người dùng và thông tin thanh toán o Yêu cầu về khả năng mở rộng: Hệ thống phải có thể mở rộng để đáp ứng nhu cầu của người dùng o Yêu cầu về hiệu suất: Hệ thống phải có hiệu suất cao để đáp ứng nhu cầu của người dùng
• Các thách thức: Hệ thống ứng dụng đặt món ăn phải đối mặt với một số thách thức, chẳng hạn như: o Bảo mật: Hệ thống phải được thiết kế để bảo vệ dữ liệu người dùng và thông tin thanh toán khỏi bị truy cập trái phép o Khả năng mở rộng: Hệ thống phải có thể mở rộng để đáp ứng nhu cầu của người dùng o Hiệu suất: Hệ thống phải có hiệu suất cao để đáp ứng nhu cầu của người dùng
• Ứng dụng đặt thức ăn nhanh sẽ có hai loại người dùng sử dụng chính: khách hàng đặt món và chủ cửa hàng bán thức ăn nhanh Ngoài ra sẽ có người quản trị (administrator) là người sở hữu ứng dụng này, có thể theo dõi và xử lý vi phạm của những người dùng trên
• Về phía khách hàng đặt món: o Khách hàng sẽ có thể vào ứng dụng và xem, tìm kiếm những món ăn được hiển thị từ nhiều cửa hàng khác nhau Những món ăn này có thể hiển thị theo danh mục khác nhau, có thể tìm kiếm theo giá cả khác nhau o Khách hàng có thể chọn riêng những thành phần của món ăn được chọn o Sau khi chọn được món ăn cần mua, khách hàng có thể thêm vào giỏ hàng và tiến hành đặt món và thanh toán Sau khi đặt món khách hàng có thể có lựa chọn để đánh giá món ăn để đưa ra những quyết định khách
18 quan nhất Những đơn hàng được đặt sẽ đưa vào thông tin liên quan đến lịch sử giao dịch o Khách hàng còn có thể cập nhật các thông tin liên lạc cá nhân để tiết kiệm thời gian khi tiến hành đặt món o Các món ăn có thể được khách hàng đánh dấu vào danh sách yêu thích để có thể dễ dàng tìm lại một cách nhanh chóng
• Về phía cửa hàng: o Chủ cửa hàng có thể quản lý, cập nhật thông tin món ăn liên quan trong cửa hàng của mình, quản lý các món ăn theo một số danh mục nhất định, quản lý các thành phần của món ăn o Sau khi khách hàng đặt món, trạng thái đơn hàng sẽ được chuyển sang cho cửa hàng tương ứng Cửa hàng có thể chọn đơn hàng để xử lý và giao đến cho khách hàng Sau khi cập nhật từng trạng thái của đơn hàng thì hệ thống sẽ thông báo đến cho người dùng từng thay đổi
• Về phía người quản trị: o Người quản trị sẽ có thể quản lý thông tin các tài khoản của các người dùng o Khi khách hàng hoặc cửa hàng bị báo cáo hoặc gửi báo cáo vi phạm từ người dùng khác, người quản trị có thể xem thông tin báo cáo vi phạm và có thể tạm dừng hoạt động của người dùng vi phạm.
Thiết kế hệ thống
• Client: Máy khách chịu trách nhiệm tương tác với người dùng và gửi các yêu cầu đến máy chủ Triển khai giao diện với React Native
• Server: Máy chủ chịu trách nhiệm xử lý các yêu cầu từ máy khách và trả về phản hồi Máy chủ bao gồm các thành phần chính sau:
• Cơ sở dữ liệu: PostgreSQL Sử dụng PrismaORM để hỗ truy vấn cơ sở dữ liệu dễ dàng Cơ sở dữ liệu sẽ được lưu trên cloud bằng dịch vụ của AWS là AWS RDS
• API: Dùng Apollo Server để tạo API endpoint từ backend và dùng GraphQL để truy vấn API được tạo từ backend
• Luồng hoạt động: Luồng hoạt động của hệ thống ứng dụng đặt món ăn có thể được mô tả như sau:
1 Người dùng mở ứng dụng và chọn/tìm kiếm món ăn
2 Ứng dụng gửi yêu cầu đến máy chủ để lấy thông tin món ăn của cửa hàng
3 Máy chủ trả về thông tin món ăn cho ứng dụng
4 Ứng dụng hiển thị thông tin món ăn cho người dùng
5 Người dùng chọn món ăn và đặt hàng (có thể thêm vào giỏ hàng)
6 Ứng dụng gửi yêu cầu đến máy chủ để tạo đơn đặt hàng
7 Máy chủ tạo đơn đặt hàng và trả về phản hồi cho ứng dụng
8 Ứng dụng hiển thị thông báo cho người dùng về trạng thái đơn đặt hàng.
Sơ đồ UseCase
Cấm/gỡ cấm tài khoản
Xem thông tin danh sách báo cáo
Xem báo cáo của tài khoản
Xem món ăn Tìm kiếm món ăn Đặt hàng
Quản lý phương thức thanh toán Quản lý món ăn yêu thích Đánh giá
Tạo cửa hàng Đổi sang tài khoản cửa hàng
Quản lý sản phẩm Quản lý đơn hàng
Xem đánh giá của sản phẩm
Quản lý thông tin cá nhân
Báo cáo vi phạm Đăng ký
Hình 3.3.4 Usecase chung của User và Shop
Đặt mua Đánh giá User
Thanh toán Xem lịch sử đơn hàng
Hình 3.3.4 Usecase về đặt hàng
1 Administator Người quản trị là người sở hữu của ứng dụng này và là tài khoản duy nhất Dùng để quản lý thông tin tài khoản người dùng khác và xử lý vi phạm
2 User Người dùng được cung cấp tính năng đặt món và tìm kiếm thông tin món ăn hoặc có thể tạo tài khoản “Shop” để kinh doanh
3 Shop Nguời dùng được cung cấp khả năng để quản lý cửa hàng, sản phẩm và danh sách đơn hàng để phục vụ người dùng
1 Xem món ăn Usecase này cho phép người dùng xem thông tin chi tiết của món ăn
2 Tìm kiếm món ăn Usecase này cho phép người dùng xem danh sách và tìm kiếm món ăn phù hợp
3 Quản lý giỏ hàng Usecase này cho phép người dùng quản lý thông tin giỏ hàng, bao gồm CRUD
4 Đặt hàng Usecase này cho phép người dùng tiến hàng đặt hàng, xem thông tin đơn hàng trước khi xác nhận đặt hàng
5 Đánh giá Usecase này cho phép người dùng đánh giá món ăn của một cửa hàng nào đó Mỗi người dùng chỉ có thể đánh giá cửa hàng một lần
6 Quản lý món ăn yêu thích
Usecase này cho phép người dùng quản lý danh sách các món ăn được thêm vào yêu thích
7 Quản lý phương thức thanh toán
Usecase này cho phép người dùng thanh toán trực tuyến
8 Tạo cửa hàng Usecase này cho phép người dùng tạo tài khoản cửa hàng
9 Đổi sang tài khoản cửa hàng
Usecase này cho phép người dùng đổi sang tài khoản cửa hàng để quản lý
10 Đăng nhập Usecase này cho phép người dùng đăng nhập vào hệ thống
11 Đăng ký Usecase này cho phép người dùng tạo tài khoản để đăng nhập vào hệ thống
12 Báo cáo vi phạm Usecase này cho phép người dùng báo cáo vi phạm của người dùng khác để xử lý
13 Quản lý thông tin cá nhân
Usecase này cho phép người dùng quản lý các thông tin cá nhân như tên, địa chỉ, số điện thoại Bao gồm CRUD
14 Quản lý sản phẩm Usecase này cho phép người dùng quản lý danh sách món ăn
15 Xem đánh giá sản phẩm
Usecase này cho phép người dùng xem chi tiết danh sách đánh giá của sản phẩm
16 Quản lý đơn hàng Usecase này cho phép người dùng quản lý danh sách các đơn hàng được đặt
17 Quản lý tài khoản Usecase này cho phép người dùng quản lý thông tin toàn bộ tài khoản của hệ thống
18 Cấm/gỡ cấm tài khoản
Usecase này cho phép người dùng hạn chế một tài khoản nào đó
19 Xem báo cáo của tài khoản
Usecase này cho phép người dùng xem báo cáo của tài khoản nào đó
20 Xem thông tin danh sách báo cáo
Usecase này cho phép người dùng xem thông tin danh sách của toàn bộ báo cáo vi phạm được gửi đến
21 Xem lịch sử đơn hàng
Usecase này cho phép người dùng xem thông tin lịch sử đơn hàng
22 Thanh toán Usecase này cho phép người dùng chọn phương thức thanh toán
23 Huỷ đơn hàng Usecase này cho phép người dùng huỷ bỏ đơn hàng hiện có
24 Quản lý đơn hàng Usecase này cho phép người dùng quản lý danh sách đơn hàng hiện có
Description Usecase này cho phép người dùng xem thông tin chi tiết của món ăn
Trigger Người dùng chọn vào một món ăn để vào màn hình thông tin chi tiết món ăn đó
Pre-condition Người dùng đăng nhập vào hệ thống
Post-condition Người dùng được xem thông tin chi tiết món ăn
Name Tìm kiếm món ăn
Description Usecase này cho phép người dùng xem danh sách và tìm kiếm món ăn phù hợp
Trigger Người dùng vào màn hình tìm kiếm và nhập thông tin phù hợp
Pre-condition Người dùng đăng nhập vào hệ thống
Post-condition Người dùng được xem thông tin món ăn cần tìm
Name Quản lý giỏ hàng
Description Usecase này cho phép người dùng quản lý thông tin giỏ hàng, bao gồm CRUD
Trigger - Người dùng vào màn hình giỏ hàng để xem danh sách giỏ hàng
- Người dùng vào màn hình chi tiết món ăn để thêm món ăn vào giỏ hàng
Pre-condition Người dùng đăng nhập vào hệ thống
Post-condition Người dùng có thể quản lý, lưu lại thông tin món ăn cần mua
Description Usecase này cho phép người dùng tiến hàng đặt hàng, xem thông tin đơn hàng trước khi xác nhận đặt hàng
Trigger Người dùng bấm đặt hàng từ màn hình giỏ hàng
Pre-condition - Người dùng đăng nhập vào hệ thống
Post-condition Người dùng có thể tiến hành đặt hàng và xác nhận đơn hàng
Description Usecase này cho phép người dùng đánh giá món ăn của một cửa hàng nào đó Mỗi người dùng chỉ có thể đánh giá cửa hàng một lần
Trigger Người dùng vào màn hình chi tiết giỏ hàng và chọn đánh giá
Pre-condition - Người dùng đăng nhập vào hệ thống
Post-condition Người dùng có thể tiến hành đánh giá món ăn
Name Quản lý món ăn yêu thích
Description Usecase này cho phép người dùng quản lý danh sách các món ăn được thêm vào yêu thích
Trigger - Người dùng vào trang cá nhân của tài khoản để xem thông tin các món ăn yêu thích
- Người dùng vào màn hình chi tiết món ăn và bấm vào yêu thích để thêm mới món ăn yêu thích
Pre-condition - Người dùng đăng nhập vào hệ thống
Post-condition Người dùng có thể tiến hành lưu món ăn vào danh sách yêu thích
Name Quản lý phương thức thanh toán
Description Usecase này cho phép người dùng thanh toán trực tuyến
Trigger Người dùng vào màn hình đặt hàng
Pre-condition - Người dùng đăng nhập vào hệ thống
- Người dùng tiến hành đặt hàng và chọn thanh toán trực tuyến
Post-condition Người dùng có thể thanh toán món ăn đã đặt
Description Usecase này cho phép người dùng tạo tài khoản cửa hàng
Trigger Người dùng vào màn hình trang cá nhân và nhấn tạo cửa hàng
Pre-condition - Người dùng đăng nhập vào hệ thống
- Người dùng chưa có tài khoản cửa hàng
Post-condition Người dùng tạo tài khoản cửa hàng thành công
Name Đổi sang tài khoản cửa hàng
Description Usecase này cho phép người dùng đổi sang tài khoản cửa hàng để quản lý
Trigger Người dùng vào màn hình trang cá nhân và đổi tài khoản sang cửa hàng
Pre-condition - Người dùng đăng nhập vào hệ thống
- Người dùng có tài khoản cửa hàng
Post-condition Người dùng đổi sang tài khoản cửa hàng thành công
Description Usecase này cho phép người dùng đăng nhập vào hệ thống
Trigger Người dùng truy cập vào ứng dụng
Pre-condition - Người dùng chưa đăng nhập vào hệ thống
Post-condition Người dùng đăng nhập vào hệ thống thành công
Description Usecase này cho phép người dùng tạo tài khoản để đăng nhập vào hệ thống
Trigger Người dùng truy cập vào ứng dụng
Pre-condition - Người dùng chưa đăng nhập vào hệ thống
- Người dùng chưa có tài khoản
- Thông tin đăng ký hợp lệ
Post-condition Người dùng đăng ký tài khoản thành công
Name Báo cáo vi phạm
Description Usecase này cho phép người dùng báo cáo vi phạm của người dùng khác để xử lý
Trigger Người dùng bấm vào tài khoản báo cáo vi phạm
Pre-condition - Người dùng đăng nhập vào hệ thống
Post-condition Người dùng tạo báo cáo vi phạm thành công
Name Quản lý thông tin cá nhân
Description Usecase này cho phép người dùng quản lý các thông tin cá nhân như tên, địa chỉ, số điện thoại Bao gồm CRUD
Trigger Người dùng bấm vào màn hình trang cá nhân tài khoản
Pre-condition - Người dùng đăng nhập vào hệ thống
Post-condition Người dùng có thể xem, chỉnh sửa thông tin cá nhân
Name Quản lý sản phẩm
Description Usecase này cho phép người dùng quản lý danh sách món ăn Bao gồm CRUD
Trigger Người dùng truy cập vào màn hình quản lý sản phẩm
Pre-condition - Người dùng đăng nhập vào hệ thống
- Người dùng đăng nhập với vai trò là Shop
Post-condition Người dùng có thể CRUD sản phẩm
Name Xem đánh giá sản phẩm
Description Usecase này cho phép người dùng xem chi tiết danh sách đánh giá của sản phẩm
Trigger Người dùng truy cập vào màn hình chi tiết món ăn và bấm vào xem đánh giá
Pre-condition - Người dùng đăng nhập vào hệ thống
Post-condition Người dùng có thể xem danh sách các đánh giá của một sản phẩm
Name Quản lý đơn hàng
Description Usecase này cho phép người dùng quản lý danh sách các đơn hàng được đặt
Trigger Người dùng truy cập vào màn hình quản lý đơn hàng
Pre-condition - Người dùng đăng nhập vào hệ thống
- Người dùng đăng nhập với vai trò là Shop
Post-condition Người dùng có thể xem danh sách các đơn hàng và thay đổi trạng thái của đơn hàng
Name Quản lý tài khoản
Description Usecase này cho phép người dùng quản lý thông tin toàn bộ tài khoản của hệ thống
Trigger Người dùng truy cập vào màn hình quản lý tài khoản
Pre-condition - Người dùng đăng nhập vào hệ thống
- Người dùng đăng nhập với vai trò là Admin
Post-condition Người dùng có thể xem danh sách các tài khoản và thông tin chi tiết báo cáo vi phạm của tài khoản
Name Cấm/gỡ cấm tài khoản
Description Usecase này cho phép người dùng hạn chế một tài khoản nào đó
Trigger Người dùng truy cập vào màn hình quản lý tài khoản và bấm vào một tài khoản cần cấm và bấm Cấm tài khoản
Pre-condition - Người dùng đăng nhập vào hệ thống
- Người dùng đăng nhập với vai trò là Admin
Post-condition Người dùng có thể cấm/gỡ cấm một tài khoản
Name Xem báo cáo của tài khoản
Description Usecase này cho phép người dùng xem báo cáo của tài khoản nào đó
Trigger Người dùng truy cập vào màn hình quản lý tài khoản và bấm vào một tài khoản
Pre-condition - Người dùng đăng nhập vào hệ thống
- Người dùng đăng nhập với vai trò là Admin
Post-condition Người dùng có thể xem danh sách những báo cáo vi phạm hoặc bị báo cáo bởi tài khoản khác
Name Xem thông tin danh sách báo cáo
Description Usecase này cho phép người dùng xem thông tin danh sách của toàn bộ báo cáo vi phạm được gửi đến
Trigger Người dùng truy cập vào màn hình quản lý danh sách báo cáo
Pre-condition - Người dùng đăng nhập vào hệ thống
- Người dùng đăng nhập với vai trò là Admin
Post-condition Người dùng có thể xem toàn bộ danh sách những báo cáo vi phạm được gửi đến
Name Xem lịch sử đơn hàng
Description Usecase này cho phép người dùng xem thông tin lịch sử đơn hàng
Trigger Người dùng truy cập vào màn hình lịch sử đơn hàng
Pre-condition - Người dùng đăng nhập vào hệ thống
Post-condition Người dùng có thể xem lịch sử đơn hàng được đặt
Description Usecase này cho phép người dùng chọn phương thức thanh toán
Trigger Người dùng truy cập vào màn hình đặt hàng và tiến hành đặt hàng
Pre-condition - Người dùng đăng nhập vào hệ thống
Post-condition Người dùng có thể chọn phương thức thanh toán phù hợp
Description Usecase này cho phép người dùng huỷ bỏ đơn hàng hiện có
Trigger Người dùng truy cập vào màn hình danh sách đơn hàng
Pre-condition - Người dùng đăng nhập vào hệ thống
- Đơn hàng đang ở trạng thái “Pending”
Post-condition Người dùng có thể huỷ bỏ đơn hàng lần này
Name Quản lý đơn hàng
Description Usecase này cho phép người dùng quản lý danh sách đơn hàng hiện có
Trigger Người dùng truy cập vào màn hình danh sách đơn hàng
Pre-condition - Người dùng đăng nhập vào hệ thống
- Người dùng đăng nhập với vai trò Shop
Post-condition Người dùng có thể xem chi tiết, đổi trạng thái đơn hàng
Thiết kế cơ sở dữ liệu
Hình 3.4.1 Mô hình ERD của hệ thống
• Người dùng cần phải có tài khoản để truy cập vào hệ thống Mỗi tài khoản của người dùng sẽ có một mã duy nhất để phân biệt Trong thông tin tài khoản gồm email, vai trò của người dùng, thời gian tạo/cập nhật tài khoản
• Mỗi khách hàng sẽ có một mã duy nhất để phân biệt Khách hàng bao gồm những thông tin như tên, số điện thoại, địa chỉ, … Khách hàng sẽ có thể quản lý các thông tin liên quan đến việc đặt hàng, các thông tin liên lạc cá nhân, giỏ hàng, các món yêu thích
• Mỗi cửa hàng cũng sẽ có một mã duy nhất để phân biệt Cửa hàng sẽ có thông tin của một người dùng quản lý cửa hàng đó, ngoài ra còn có thông tin liên quan đến địa chỉ của cửa hàng Cửa hàng sẽ quản lý các sản phẩm trong kho, xử lý các trạng thái đơn hàng, cập nhật thông tin của cửa hàng
• Mỗi món ăn sẽ có một mã phân biệt và các thông tin liên quan như: tên, mô tả, giá, loại, kích thước (nhỏ, vừa, lớn,…), điểm số trung bình được đánh giá bởi người dùng
• Mỗi đơn hàng có một mã duy nhất để phân biệt Mỗi đơn hàng bao gồm: mã khách hàng sở hữu, địa chỉ giao hàng, tổng giá, ghi chú (nếu có), ngày tạo, ngày cập nhật, ngày giao hàng Đơn hàng bao gồm nhiều đơn hàng chi tiết nhỏ chứa thông tin về những sản phẩm và số lượng của đơn hàng đó Mỗi đơn hàng chi tiết thuộc về chỉ một đơn hàng
• Mỗi giỏ hàng sẽ có một mã duy nhất để phân biệt Mỗi giỏ hàng cũng sẽ gồm những thông tin tương tự như đơn hàng nhưng những thông tin này chỉ lưu tạm thời trong tài khoản, khi người dùng đặt hàng thì những sản phẩm trong giỏ hàng này sẽ được xoá
3.4.2 Cấu trúc bảng dữ liệu
Bảng 3.4.2.1 Account – Tài khoản người dùng
ImageUri Đường dẫn uri của hình ảnh
BackgroundImageUri Đường dẫn uri của hình ảnh nền DefaultAddress Địa chỉ mặc định accountID Mã tài khoản loginAs Vai trò khi đăng nhập (User, Shop,
Admin) Bảng 3.4.2.2 User – Người dùng
ShopAddress Địa chỉ cửa hàng
ImageUri Đường dẫn uri của hình ảnh userID Mã người dùng
Role Quyền của người dùng (khách hàng, chủ của hàng, admin) CreateAt Thời gian tạo
UpdateAt Thời gian cập nhật
Status Trạng thái tài khoản (Cấm/Chưa cấm)
ImageUri Đường dẫn uri của hình ảnh
AverageRating Lượng đánh giá trung bình
UpdateAt Thời gian cập nhật subcategoryID Mã danh mục phụ mà sản phẩm thuộc về
ID Mã danh mục phụ
Title Tên danh mục phụ
Description Mô tả categoryID Mã kho sản phẩm
Bảng 3.4.2.5 ProductSubcategory – Danh mục phụ của sản phẩm trong kho
ImageUri Đường dẫn uri của hình ảnh shopId Mã cửa hàng
Bảng 3.4.2.6 ProductCategory – Kho sản phẩm
Title Tên tag productID Mã sản phẩm
Bảng 3.4.2.7 ProductTag – Kho sản phẩm
ID Mã giỏ hàng userID Mã khách hàng sở hữu giỏ hàng
ID Mã giỏ hàng chi tiết
Title Tên danh mục phụ
Amount Số lượng sản phẩm productSizeID Mã size sản phẩm cartID Mã giỏ hàng
Bảng 3.4.2.9 CartProduct – Giỏ hàng chi tiết
ID Mã đơn hàng chi tiết
Count Số lượng sản phẩm
UpdateAt Thời gian cập nhật
DeliveryAddress Địa chỉ giao hàng
Status Trạng thái đơn hàng
Commentary Ghi chú từ khách hàng DeliveredAt Thời gian giao hàng
39 productSizeID Mã size sản phẩm userID Mã khách hàng
Bảng 3.4.2.10 OrderProduct – Đơn hàng chi tiết
Comment Bình luận đánh giá
UpdateAt Thời gian cập nhật productID Mã sản phẩm được đánh giá userID Mã người đánh giá
Field Name Descriptions productID, userID
Mã người dùng CreateAt Thời gian tạo
UpdateAt Thời gian cập nhật
Bảng 3.4.2.12 Favourite – Sản phẩm yêu thích
Title Tên danh mục phụ
FullPrice Mô tả productId Mã sản phẩm
Bảng 3.4.2.13 ProductSize – Size sản phẩm
UpdateAt Thời gian cập nhật accountReportedId Mã tài khoản bị báo cáo
Bảng 3.4.2.14 ReportAccount – Danh sách report
UpdateAt Thời gian cập nhật reporterId Mã tài khoản báo cáo vi phạm accountReportId Mã report
Bảng 3.4.2.15 ReportAccountDetails – Danh sách report
ID Mã thành phần của món ăn
ImageUri Đường dẫn hình ảnh
Price Giá cả của thành phần productId Mã sản phẩm
Bảng 3.4.2.16 ProductIngredients – Các thành phần của món ăn
XÂY DỰNG ỨNG DỤNG
Flow màn hình
Hình 4.1.1 Flow màn hình của ứng dụng
Danh sách màn hình
4.2.1 Màn hình đăng nhập, đăng ký
Hình 4.2.1.1a Màn hình đăng nhập
Hình 4.2.1.1b Màn hình đăng ký
- Khi mở ứng dụng, nếu người dùng chưa đăng nhập thì sẽ vào màn hình đăng nhập Người dùng cần nhập đúng thông tin email và password để đăng nhập vào hệ thống
- Nếu người dùng chưa có tài khoản có thể chuyển sang màn hình đăng ký để tiến hành tạo tài khoản mới
- Màn hình hiển thị danh sách các món ăn cho người dùng
- Các thông tin của sản phẩm bao gồm tên sản phẩm, tên cửa hàng, mô tả, giá cả, điểm đánh giá trung bình
Hình 4.2.3.1 Màn hình tìm kiếm
- Màn hình hiển thị kết quả tìm kiếm từ theo tên sản phẩm
- Các thông tin của sản phẩm bao gồm tên sản phẩm, tên cửa hàng, mô tả, giá cả, điểm đánh giá trung bình
4.2.4 Màn hình chi tiết món ăn
Hình 4.2.4.1a Màn hình chi tiết món ăn (khách hàng)
Hình 4.2.4.1b Màn hình chi tiết món ăn (khách hàng)
Hình 4.2.4.1c Màn hình chi tiết món ăn (cửa hàng)
- Màn hình hiển thị thông tin chi tiết món ăn Màn hình này hiển thị khi bấm vào món ăn bất kì từ màn hình danh sách món ăn
- Trước khi thêm vào giỏ hàng, người dùng có thể chọn mua các thành phần khác nhau của sản phẩm đó, kích cỡ hoặc số lượng sản phẩm
- Khi người dùng đăng nhập bằng tài khoản khách hàng sẽ hiển thị thông tin như hình 4.2.4.1a và 4.2.4.1b Người dùng có thể chọn thành phần của sản phẩm bằng cách bấm vào thành phần tương ứng (bấm lần nữa vào thành phần đã chọn để huỷ chọn)
- Khi người dùng đăng nhập bằng tài khoản cửa hàng sẽ hiển thị thông tin như hình 4.2.4.1c
Hình 4.2.5.1a Màn hình reviews trống
49 Hình 4.2.5.1b Màn hình reviews (khách hàng)
Hình 4.2.5.1c Màn hình reviews (cửa hàng)
- Màn hình reviews được hiển thị sau khi bấm vào nút xem reviews từ màn hình chi tiết món ăn
- Với người dùng khách hàng thì có thể thêm reviews và mỗi khách hàng chỉ thêm reviews được một lần
- Với người dùng là cửa hàng thì có thể xem reviews và không thể thêm reviews cho sản phẩm của chính mình
4.2.6 Màn hình chỉnh sửa món ăn
Hình 4.2.6.1a Màn hình chỉnh sửa món ăn
51 Hình 4.2.6.1b Màn hình thêm size cho sản phẩm
Hình 4.2.6.1c Màn hình thêm danh mục cho sản phẩm
52 Hình 4.2.6.1d Màn hình thêm tag cho sản phẩm
Hình 4.2.6.1e Màn hình thêm thành phần cho sản phẩm
- Màn hình này hiển thị khi bấm vào chỉnh sửa món ăn ở màn hình chi tiết món ăn (khi người dùng đăng nhập với tư cách Shop)
- Người dùng có thể chỉnh sửa các thông tin món ăn như hình 4.2.6.1.a Ngoài ra còn có thể thêm các thông tin khác cho sản phẩm như size (hình 4.2.6.1b), danh mục sản phẩm (hình 4.2.6.1c), tag (hình 4.2.6.1d), thành phần của món ăn (hình 4.2.6.1e)
4.2.7 Màn hình danh mục sản phẩm của cửa hàng
Hình 4.2.7.1a Màn hình danh mục sản phẩm cửa hàng
Hình 4.2.7.1b Màn hình thêm mới sản phẩm
- Màn hình hiển khi đăng nhập với tư cách Shop
- Màn hình danh mục sản phẩm (hình 4.2.7.1a) hiển thị các sản phẩm có trong Shop theo từng danh mục đã thêm trước đó
- Khi bấm vào thêm sản phẩm sẽ hiển thị màn hình thêm sản phẩm như hình 4.2.7.1b
4.2.8 Màn hình giỏ hàng và đặt hàng
Hình 4.2.8.1a Màn hình giỏ hàng
56 Hình 4.2.8.1b Màn hình xác nhận đơn hàng
Hình 4.2.8.1c Màn hình hoàn tất đơn hàng
57 Hình 4.2.8.1d Màn hình danh sách đơn hàng của khách hàng
Hình 4.2.8.1e Màn hình chi tiết đơn hàng của cửa hàng
Hình 4.2.8.1f Màn hình chi tiết đơn hàng của khách hàng
- Màn hình giỏ hàng hiển thị danh sách các sản phẩm được người dùng thêm vào giỏ hàng
- Khi có sản phẩm trong giỏ hàng thì có thể tiến hành đặt hàng và chờ cửa hàng xác nhận
- Trước khi cửa hàng xác nhận đơn hàng, khách hàng có thể huỷ đơn hàng
- Ở màn hình chi tiết đơn hàng của cửa hàng, cửa hàng có thể báo cáo khách hàng bằng nút (!) màu đỏ để gửi đến báo cáo vi phạm từ khách hàng
4.2.9 Màn hình quản lý đơn hàng của cửa hàng
Hình 4.2.9.1a Màn hình chi tiết đơn hàng của cửa hàng (trạng thái “Pending”)
Hình 4.2.9.1b Màn hình chi tiết đơn hàng của cửa hàng (trạng thái “On the way”)
Hình 4.2.9.1c Màn hình danh sách đơn hàng của cửa hàng
- Màn hình chi tiết đơn hàng của cửa hàng hiển thị chi tiết của đơn hàng cùng với trạng thái
- Chủ cửa hàng có thể thay đổi trạng thái đơn hàng như hình 4.2.9.1a và 4.2.9.1b
4.2.10 Màn hình thông tin tài khoản
Hình 4.2.10.1a Màn hình thông tin tài khoản khách hàng (khi chưa tạo tài khoản cửa hàng)
Hình 4.2.10.1b Màn hình thông tin tài khoản khách hàng (khi đã tạo tài khoản cửa hàng)
62 Hình 4.2.10.1c Màn hình thông tin tài khoản cửa hàng
Hình 4.2.10.1d Màn hình chỉnh sửa thông tin khách hàng
Hình 4.2.10.1e Màn hình chỉnh sửa thông tin cửa hàng
- Màn hình hiển thị thông tin chi tiết tài khoản của cửa hàng hoặc khách hàng
4.2.11 Màn hình liên quan đến cảnh báo vi phạm và thông báo
Hình 4.2.11.1a Màn hình danh sách tài khoản
Hình 4.2.11.1b Màn hình chi tiết tài khoản (khi chưa cấm)
65 Hình 4.2.11.1c Màn hình chi tiết tài khoản (khi bị cấm)
Hình 4.2.11.1d Màn hình danh sách vi phạm của tài khoản
66 Hình 4.2.11.1e Màn hình chi tiết báo cáo vi phạm của tài khoản
Hình 4.2.11.1f Màn hình danh sách toàn bộ báo cáo vi phạm
67 Hình 4.2.11.1g Màn hình khi tài khoản bị cấm đăng nhập vào hệ thống
Hình 4.2.11.1h Màn hình thông báo
- Khi đăng nhập với tư cách là Administator, người dùng có thể xem danh sách tài khoản trong hệ thống và xem những vi phạm của họ
- Ngoài ra, Administator còn có thể cấm hoặc gỡ cấm một tài khoản nào đó được chọn.
TỔNG KẾT
Ưu điểm
- Sử dụng công nghệ được đông đảo cộng đồng sử dụng nên có hạn chế được nhiều khó khăn không mong muốn
- Giao diện đơn giản dễ sử dụng, thân thiện với người dùng
- Server được deploy có thể chạy ứng dụng dễ dàng
- Do thời gian hạn chế nên còn một số tính năng chưa được hoàn thiện
- Ứng dụng chạy vẫn chưa thật sự mượt mà
- Quản lý bảo mật còn kém
- Khắc phục và cải thiện những nhược điểm kể trên
- Tái cấu trúc source code dễ đọc dễ hiểu hơn
- Phát triển tính năng Recommend system vào hệ thống
- Phát triển mạnh tính năng tìm kiếm
Front-end: https://github.com/phamnhutdanh/fastfood-ingredients-selection
Back-end: https://github.com/phamnhutdanh/food-app-server
