Trang 1 Hội nghị Khoa học trẻ lần 5 năm 2023YSC2023-ỈUHYSC5.F011XÂY DựNG ỨNG DỤNG QUẢN LÝ ĐẶT MÓN ATFOOD - TẠI HỆ THỐNG NHÀ HÀNG MỌC QUÁN TRÊN THIẾT BỊ ĐI ĐỘNGTRẦN THỊ ANH THI1, NGUYỄN T
Hội nghị Khoa học trẻ lần 5 năm 2023(YSC2023)-ỈUH YSC5.F011 XÂY DựNG ỨNG DỤNG QUẢN LÝ ĐẶT MÓN ATFOOD - TẠI HỆ THỐNG NHÀ HÀNG MỌC QUÁN TRÊN THIẾT BỊ ĐI ĐỘNG TRẦN THỊ ANH THI1, NGUYỄN THÁI AN1, ĐINH THỊ PHƯƠNG THẢO1 faculty ofInformation Technology, Industrial University ofHo Chi Minh City tranthianhthi@iuh.edu.vn, ngụyenthaianSỈ ỉ0200Ỉ@gmail.com, diinhphuongthao@gmail.com Tóm tat Với sự phát triển của công nghệ cũng như trong giai đoạn chuyển đổi số, những nghiệp vụ quản lý sẽ được hiển khai trên máy tính cũng như các thiết bị di động Những hệ thống này hiện đã góp phần rất lớn trong quá trình phát hiển của các doanh nghiệp Chúng được biết đến là các chương trình ứng dụng chạy trên nền tảng Web hay di động Công cụ ATFood mà chúng tôi đề xuất cũng là một ứng dụng hỗ trợ việc quản lý các nghiệp vụ tại nhà hàng Mộc quán ATFood sẽ có đầy đủ các chức năng và dịch vụ của một nhà hàng huyền thống ATFood cung cấp các báo cáo và thống kê tự động về doanh thu, mức độ sử dụng, và các chỉ số kinh doanh quan trọng khác Người dùng có thể đặt hàng trực tuyến qua ứng dụng di động và hệ thống sẽ tự động ghi nhận và xử lý đơn hàng một cách chính xác Điều này giúp giảm thiểu sai sót hong quá trình đặt hàng và tăng tính linh hoạt cho khách hàng, giao diện sẽ thiết kế đơn giản, dễ làm quen để nhắm đến tat cả đối tượng người dùng ATFood được xây dựng hên nền tảng công nghệ như Visual Studio, Google Cloud, Figma sự kết hợp của các công nghệ này đảm bảo tính bảo mật, khả năng mở rộng và hiệu suất cao cho ứng dụng Hiện công cụ đã hiển khai trên nền tảng Desktop, Mobile và Web, giúp cho việc giao dịch của khách hàng sẽ dễ dàng hơn Trong tương lai, công cụ sẽ mở rộng các tính năng cũng như bổ sung các mô hình dịch vụ như khách sạn, siêu thị để đáp ứng nhu cầu đa dạng của các doanh nghiệp trong ngành nhà hàng và du lịch Từ khóa Business service, Cloud, Web application, Desktop BUILDING AN ORDER MANAGEMENT APPLICATION FOR ATFOOD RESTAURANT SYSTEM ON MOBILE DEVICES - AT MOC QUAN RESTAURANT Abstract With the advancement of technology and die digital transformation era, management tasks are being implemented on computers as well as mobile devices These systems have greatly contributed to the development of businesses They are known as web-based or mobile applications The proposed tool, ATFood, is an application designed to support die management operations of Moc Quan restaurant ATFood will encompass all the functions and services of a traditional restaurant Its interface will be designed to be simple and user-friendly, targeting a wide range of users ATFood is built on technology platforms such as Visual Studio, Google Cloud, and Figma The combination of these technologies ensures security, scalability, and high performance for die application Currently, die tool has been deployed on desktop, mobile, and web platforms, making customer transactions more convenient In the future, the tool will expand its features and incorporate additional service models such as hotels and supermarkets, to cater to die diverse needs of businesses in the restaurant and tourism industry ATFood provides automatic reports and statistics on revenue, usage rates, and other important business indicators Users can place orders online through the mobile application, and die system will automatically record and process orders accurately This helps minimize errors in the ordering process and increases flexibility for customers Overall, ATFood stands out with its comprehensive features, user-friendly interface, and the utilization of advanced technologies, creating a modern and efficient management tool for die restaurant industry Keywords Business service, Cloud, Web application, Desktop © 2023 Trường Đại học Công nghiệp Thành phố Hồ Chí Minh 133 Hội nghị Khoa học trẻ ỉần 5 năm 2023(YSC2023)-ỈUH 1 GIỚI THIỆU Hiện nay, việc đặt món qua ứng dụng đã trở thành một xu hướng phổ biến, mang lại sự tiện lợi và tiết kiệm thời gian cho khách hàng Các ứng dụng đặt món phổ biến như GrabFood, Now.vn, Foody, và OpenTable đã giúp người dùng dễ dàng đặt món từ nhiều nhà hàng và quán ăn khác nhau Tuy nhiên, các công cụ hiện tại cũng đối mặt với một số thách thức và khó khăn Quản lý đơn hàng từ nhiều nguồn khác nhau và đảm bảo thực phẩm đến đúng thời gian và địa điểm là một vấn đề phức tạp Đồng thời, việc đồng bộ thông tin giữa nhà hàng và khách hàng có thể gặp phải sai sót và hiểu lầm, ảnh hưởng đến hải nghiệm của khách hàng Ngoài ra, khả năng đáp ứng nhu cầu đặt món đa dạng và tùy chỉnh của khách hàng cũng là một thách thức đối với các công cụ hiện tại Với những thách thức và khó khăn này, ATFOOD ra đời nhằm giải quyết những vấn đề hên ATFOOD hứa hẹn cung cấp một giải pháp hiệu quả để quản lý quá hình đặt món, từ việc đồng bộ thông tin chính xác giữa nhà hàng và khách hàng, đến khả năng đáp ứng đa dạng và tùy chỉnh của nhu cầu đặt món Với ATFOOD, việc quản lý đặt món sẽ trở nên thuận tiện, chính xác và mang lại hải nghiệm tốt hơn cho cả nhà hàng và khách hàng 2 CÁC CÔNG NGHẸ LIÊN QUAN 2.1 React Native React Native được phát hiển bởi Facebook, là một framework di động mã nguồn mở được thiết kế đặc biệt để xây dựng ứng dụng di động native cho ĨOS và Android bằng cách sử dụng JavaScript như ngôn ngữ lập hình Nó sử dụng thư viện ReactJS để tạo giao diện người dùng trên các nền tảng di động khác nhau Với React Native, nhà phát hiển có thể tích hợp trực tiếp framework vào các ứng dụng di động ĨOS hoặc Android hiện có hoặc xây dựng hoàn toàn các ứng dụng native mới từ đầu Hiện nay, React Native được sử dụng rộng rãi hong các ứng dụng di động phổ biến như Facebook, Instagram, Pinterest, Skype và nhiều ứng dụng khác [1] 2.2 React JS ReactJS là một thư viện JavaScript mã nguồn mở được phát hiển bởi Facebook Nó tập hung vào việc xây dựng giao diện người dùng (UI) tương tác và linh hoạt cho các ứng dụng web ReactJS sử dụng mô hình phát hiển UI dựa trên các thành phần, giúp dễ dàng quản lý và tái sử dụng mã nguồn React! s cũng hưởng lợi từ cộng đồng phát hiển mạnh mẽ và sôi nổi, cùng với nhiều công cụ hỗ trợ, giúp phát triển ứng dụng web nhanh chóng và hiệu quả Với khả năng tái sử dụng thành phần và hiệu suất tot, ReactJS đã hở thành một hong những công nghệ phổ biến nhất trong phát hiển giao diện người dùng [2] 2.3 Firebase Fhebase là một nền tảng dịch vụ dựa hên đám mây được thiết kế để hỗ hợ phát triển nhanh các ứng dụng web và di động Nó cung cấp một loạt các tính năng cho phép nhà phát hiển xây dựng và triển khai các ứng dụng chất lượng cao một cách nhanh chóng và dễ dàng Firebase cung cấp một bộ công cụ và dịch vụ toàn diện giúp tối ưu quỵ trình phát triển, giúp nhà phát triển tập hung vào việc tạo ra các ứng dụng xuất sắc Khả năng mở rộng linh hoạt và tích hợp mượt mà với các dịch vụ Google Cloud khác làm cho Firebase trở thành một lựa chọn phổ biến để xây dựng các ứng dụng web và di động mạnh mẽ và đa chức năng [3] 3 PHÂN TÍCH HẸ THỐNG 3.1 Sơ đồ tổng quát Các vai trò người dùng sử dụng trong hệ thống ATFOOD bao gồm khách hàng, nhân viên, nhân viên giao hàng, nhân viên nhà bếp và quản lý nhà hàng Một số chức năng chính dành cho khách hàng bao gồm đặt hàng, đặt chỗ và gửi tin nhắn Ngoài ra, có các tính năng khác nhau để hỗ trợ quản lý nhà hàng, giúp việc giám sát và theo dõi tiến trình đặt hàng trở nên dễ dàng Các chức năng của ứng dụng được trình bày trong Hình 1 134 © 2023 Trường Đại học Công nghiệp Thành phố Hồ Chí Minh Hội nghị Khoa học trẻ lần 5 nám 2023(YSC2023)-ỈUH Hình 1: Sơ đồ tổng quát 3.2 So’ đồ lớp Dựa trên việc phân tích và thiết kế tồng quan, chúng tôi đã tạo ra lược đồ lớp cho ứng dụng quản lý đật món ATFOOD Lược đồ lớp là một công cụ quan trọng để hiểu cấu trúc của hệ thống, bao gồm các lớp và mối quan hệ giữa các lớp ứng dụng tập trung vào các chức năng chính như đặt món, thanh toán và lịch sử đật hàng của người dùng Vì vậy, chúng tôi đã xác định các lớp quan trọng như sau: Table, Orders, messages, Cart, OrdersHistory, Sơ đồ lóp thiết kế của ứng dụng quản lý đặt món ATFOOD chi tiết các lóp và đối tượng được sử dụng trong hệ thống Sơ đồ lớp này cung cấp một cấu trúc rõ ràng và tổ chức hiệu quả cho ứng dụng, giúp cho việc phát triển và bảo trì dễ dàng hơn Chi tiết về các lớp và đối tượng đã được chúng tôi trình bày chi tiết trong sơ đồ lớp thiết kế, có thể tham khảo trong Hình 2 Với sơ đồ lóp thiết kế này, chúng tôi đã xây dựng một cấu trúc rõ ràng rà tổ chức hiệu quả để phát triển và bảo trì ứng dụng quản lý đặt món ATFOOD Đồng thòi, sơ đồ lóp cũng cung cấp khả năng mở rộng và tùy chỉnh trong tương lai, giúp cho ứng dụng có thể phát triển theo thời gian một cách linh hoạt và hiệu quả © 2023 Trường Đại học Công nghiệp Thành phố Hồ Chí Minh 135 Hội nghị Khoa học trẻ lân 5 năm 2023(YSC2023)-ỈUH coupon Drink Meat Fish soup - amount Number ia stmg ta String Id: smnạ Id: Stang coupon Numoer describe- Stnno - describe: Stmo - describe: SMrnc • deserroe Stang - name: strife - name: string -came string - name Stang -name string - price: Number -price Number - price: Number - Drice Number -0 - denominations string - denominations Stang - denominators string -denominations string - status Stang - status, string -status: String - status String -1'132» Stung _ -image, suing _ -Image, str ng - image, string *eddTdCartO -aCdToCarti' ♦adơToCartO ’adcToCartO users Message orders messages - UKJ Stang ■ tó: sung - content suing - name string nvName String sender!d: stnnc -emãl String iaiderfia 'trọ - phone Number -nvPhone Number - address, siring -nvid String - sencfefPtwrie I -senderName String -stabs String ’handeEditName) - senderPhone strrg - line Timestamp ■’handieEditPtioneO -statusRoom suing - nvhtamẹ: string ThandteEdilMaii;: ♦hand ieEfSlAtJdrecsO ♦handfeltemPre$$< nvpnonQ- Number -nvid: String lS5i? V Holiday News - date Timestamp Discount - h?.rr« String - name- String - name- string - name sting -desCitation string - description- string - number Number -description String - image string - image string - ptione NcriTte - image string -collection string - ccnõcbon String - status stnng -collection String - amount Number *0 *0 thandteBookTabỉeO -t-handieSeiveTalileo ordors History Kitchen CQOKinfl Cart ♦handteCancefTatteO - foodDetais: List' Items* address Stang - address: string address String ♦decreaseQuanUtyO Table History - coupon: Number - coupon: Number - coupon: Numoer ♦deieteitemo - dale Timestamp - createdAt- Timestamo - crefltedAt Timestamp -crealedAt Timestamp ■‘■caicuiateDomryPncsi) - name, suing -cuslomerName Strug - customerNa me string - custcmetName string ‘caicuiateĩotaiPrce • - cuitomeiPbone Number - oustomefPhcne Number - customeiPrione Number ■‘totelPriced number Numoer - debvetypf.ee Number - detveryPlica Number - dehveryFiice Number *covponPriceO - phono: Number - imagasiams Stang imageststus Stang ■tsendOrderi) - status- Stang imagestatus: Stang - items: LisKood - - amount: Number - Items: List’Food* - payment- Stang items: Let Orders Cnvnm.er +0 - status Stang pay ment: Stang payment: string - lolalprice Numbei - status String -coupon Number Stan -status Stang - uid String - totelPrice Number - crealeoAt Timestamp - name Stang -totaPrice Number - nsndieKi-cner.StatusUpcaie' -uid String - customaName Sl'cg - phone: Number - ud Siring ’ handleKitchen BackStsftK Updated ‘ han đieCookingSiatuSUpdate () - email: StnnG - deHvetyTime Timestamp »handteCooKingBackStatusUpdatei ‘ customerPbona Number • password string - timshedAt: Timestamp Delivery* deiiveryPnce Number - taaiNV Siring to Delivenng ■ rmpgeStatuc: string ♦upcate.AiiccJ ectior.-it-t j:i I - address string - items List-Feed* -coupon Num»i address String - payment string - coupon- Number -status String •zrsatedAt Timostamp - createdAt Timestamp - totaPiice Number custcrr-erttómo: string - customerNarne String - uxt String - custcmerPnone Number - custornerPhcne Number - deftveryPrice- Number - imageStatus suing denveryFnce: Numbỡ’ - items LiskFood? imageStatus suing - payment String Items: LtstaFood> - status Siltag - pay ment str.ng toiaipnco- Number - status String uid Stang -totalPrice Number Than đleOeiiverySi al IISu pda te() -utdStang -nandieDeiivwyAddiessSearaX) ■* han die Deliver/SiatusUpđateô rhardleDelfver^adtStatiisUpdater) Notification History Orders - address Strirag -address string - address- string -coupon Number -coupon Number -coupon Number - createdAL Timestamp - createdAt Timestamp - created At Timestamp - customsrr-tamc: string - - custoffiorName suing customcrNamG Strug - customs rPncne Number - customcrPhone Numbe' - delivery Price: Number customorpnone: Numbôr - imsgeStfltus string deiYeryPnoe: Number dtfiverypnce Number - items L'rstsFood? imageStatus Smog - imageStetus: string -payment Stang -’terns: Li5t -items LteKFood* -status Siring -payment siring -payment string - totalPncc: Number -status string -status String -Uid Stang -loiaiPnce Number - -did suing _ iolaiPnco: Numoor deltveryTirr.e Timestamp UXJ Stang - tinishedAt Timestamp *0 - NobStatus: strjig -updaiedA! Timestamp - FmshReason Stang - FimshAt Tmestamp - deliveryTime Timestamp Hình 2: Sơ đồ lớp 13Ố © 2023 Trường Đại học Công nghiệp Thành phố Hồ Chí Minh Hội nghị Khoa học trẻ lần 5 năm 2023(YSC2023)-IƯH 4 KẾT QUẢ HIỆN THỰC 4.1 Cấu hình phần cứng, phần mềm Đê cấu hình server cho ứng dụng ATFOOD, chúng tôi sử dụng Fuebase Hosting đề cung cấp một môi truờng phục vụ ứng dụng web (reactjs) và ứng dụng di động (reactnative) Chúng tôi tạo một dự án Firebase, sau đó tải lên mã nguồn ứng dụng lên Firebase Hosting Việc này cho phép ứng dụng đuợc phục vụ trực tiếp từ domain của chúng tôi, đồng thời tự động quàn lý và triển khai các phiên bản mới Bên cạnh đó, Firebase Realtime Database đuợc sử dụng đê lưu trữ và đồng bộ dữ liệu của ứng dụng ATFOOD Dữ liệu như danh sách món ăn, thông tin người dùng và tin nhắn sẽ được lưu trữ trong cơ sở dữ liệu này Chúng tôi sử dụng API của Firebase đế giao tiếp với cơ sở dữ liệu trực tiếp từ ứng dụng Tất cả các cấu hình và tương tác với Firebase được thực hiện thông qua các phiên bản SDK của Fứebase cho reactnative và reactjs Điều này cho phép chúng tôi dễ dàng kết nối và tương tác với Firebase trong quá trình phát triển và triển khai ứng dụng ATFOOD 4.2 Màn hình hiện thực Đê thuận tiện và dễ dàng sử dụng ứng dụng, giao diện đặt món trên ứng dụng ATFOOD được thiết kế đon giản và thân thiện với người dùng Với chỉ vài cú chạm, khách hàng có thê dễ dàng đặt hàng, xem danh sách món và tìm kiếm các món ăn yêu thích Tiền được giám: Tống giá tiên 40.607 vnd 162.428 vnd Xác nhận đơn ■] Hình 3 Giao diện thực hiện chức năng đặt hàng trên ứng dụng ATFOOD • Ớ màn hình danh sách món ăn cho phép khách hàng xem thông tin món và tìm kiếm món ăn: - Thanh tìm kiếm cho phép người dùng nhập và tìm kiếm món ăn yêu thích - Người dùng bấm chọn để xem thông tin chi tiết món ăn • Khi người dùng chọn xem thông tin món ăn, hệ thống sẽ chuyển tới màn hình chi tiết món ăn đó: - Thanh điều chỉnh giúp người dùng có thể tăng giảm số lượng món - O ghi chú cho phép người dùng nhập một số lưu ý đặc biệt cho món ăn trước khi cho vào giỏ hàng - Nút “Add to Cart” có chức năng thêm thông tin món ăn vào giỏ hàng - Nút biêu tượng giỏ hàng, người dùng bấm chọn để xem thông tin chi tiết giỏ hàng • Khi người dùng chọn xem thông tin giỏ hàng, hệ thống chuyển tới màn hình giỏ hàng: - Thanh điều chỉnh cho phép cho người dùng tăng giảm số lượng món hoặc xóa món ăn đó ra khỏi giỏ hàng - Nút “Mã giảm giá” cho phép người dùng xem và chọn mã giảm giá áp dụng cho đon hàng © 2023 Trường Đại học Cồng nghiệp Thành phố Hồ Chí Minh 137 Hội nghị Khoa học trẻ lần 5 năm 2023(YSC2023)-IƯH Nút “Hình thức thanh toán” cho phép người dùng xem và chọn phương thức thanh toán cho đon hàng Nút “Xác nhận đon” có chức năng đặt hàng gửi thông tin đon hàng tới cho nhà hàng Khi khách hàng bấm chọn “Xác nhận đơn”, hệ thống sẽ chuyển đến màn hình chi tiết đon hàng Chi tiẽt Tờ* kMdl hừr^j An SOTkhàcl-tứnợ 0972011733 Ihã 9