Create application for finding and ordering food drink from restaurant cafeteria around user

Trang 1 TECHNOLOGY AND EDUCATIONHO CHI MINH CITY UNIVERSITY OF GRADUATION THESIS INFORMATION TECHNOLOGY CREATE APPLICATION FOR FINDING AND ORDERING FOOD/DRINK FROM RESTAURANT/CAFETERIA

INTRODUCTION TO THE TOPIC

Reason for choosing topic

In our previous summary, we outlined our intention to leverage our acquired knowledge and skills to develop an Ecommerce app that fulfills essential requirements.

Beside, we want to test some technology on our app to make it smarter and improve user experience.

Objectives of research

- Research on Flutter technology to create a friendly user interface

- Research on Javascript and Restful API to code Backend for application

- Research on Ecommerce Bussiness to build bussiness logics for application

- Research on Google Map APIs to get the distance between two place, then show the path to go from a place to another.

Market Survey

+ Search bar on the top of the screen under advertisements banner

+ Service modes are in the center of the screen, can be scrolled right to left

+ List of products is placed at the bottom of the screen, can be scrolled right to left

+ Users can easily focus on the search bar and what service they want to use

+ Users have to scroll down to see the list of products, which, sometimes is their concern

+ Map UI is in the center of this screen

The input area occupies nearly half of the screen, allowing users to select their desired destination, while the map above visually highlights their chosen location.

+ It has a function that allow users to note the detail about their destination

+ Users can note detail about their destination so that the driver will have a more exactly imagination about where he or she will go

+ Map UI don’t show the direction from user’s place to the destination, sometimes, knowing the path make people feel comfortable

+ Require User position as soon as user run the app

+ Helping application run smoothly and efficiently as it have a function to calculate distance from user to the place serve food/drink

+ The Screen show a list of products from top to bottom, can be scrolled in the same direction

+ Products are sorted ascending by distance to user

+ User can focus on nearby places

+ Some products which are unrank or at low rank maybe sort on top

* Note: Different users may see advantages as disadvantages and vice versa

+ Search bar is on the top of this screen

+ Service modes and banners are placed below

+ Make users focus on the search bar and what services are served

+ Placing lots of banners may cause users feel annoyed

+ Design as same as Grab Map (page 11), but don’t have function to note detail about destination

+ The screen feel more compact

+ Map UI don’t show the direction from user’s place to the destination, sometimes, knowing the path make people feel comfortable.

Bussiness Survey

1.4.1 Process of Registing New Store on Ecommerce System

We conducted research on how enterprises can register their stores to join eCommerce platforms like GrabFood and ShopeeFood, discovering similarities in their registration processes.

With GrabFood, to become a bussiness partner, that means, Enterprises need to:

- Fill in information on website, at url: https://www.grab.com/vn/merchant/food/ [1]

- Then, they will be consulted by the consulting staff to finish the register process [2]

- After that, they will need to send their “menu” to GrabFood so that they can have their online menu designed [3]

Figure 7: Register new store process

Similar to this process, if Enterprises want to become a bussiness partner with

ShopeeFood, they will need to:

- Fill in some information on the website [4]

- Then, they need to define some specific information like Phone number, Address,

Name of Store, Specific meal (optional), Tax code, some pictures of Store’s View, Parking fee (if shipper nedd to pay for that when they go to pick the order) [5]

- Finally, ShopeeFood will contaxt them to sign the contract [6]

After finishing these process, Enterprise will get their account to access the system

In conclusion, it is essential for enterprises to undergo a thorough validation process before receiving their accounts, distinguishing them from regular users Additionally, we must establish an agreement regarding the shipping fees to ensure a smooth transaction.

1.4.2 Order receipt and delivery process

Continuing with Shopee, we have defined the order receipt and delivery process that we can use in our project

Firstly, when an order is placed, Enterprises will need to go check on the application to see what are being ordered [7]

Users can either confirm or reject the order; if they choose to reject, they must document the reason for their decision Conversely, if they confirm the order, the next step is to select a shipper for delivery.

Shippers can now easily identify orders that are awaiting delivery Upon seeing the order on their screen, they can promptly confirm their availability to complete the delivery.

After they have delivered the order, they will need to confirm that this order is completed on application [11]

This research reveals that the entire process, from registering a new store to delivering orders to customers, is highly complex Due to our limited knowledge and techniques, fully implementing this process is not feasible; however, we are committed to maximizing our efforts to implement as much of it as possible.

Overall Descriptor

The Finding Restaurant/Cafeteria Application is designed to assist users in discovering information about nearby dining options, including routes, pricing, product descriptions, and user reviews This app focuses on searchable items within a 2km radius of the user's location, making it easier to compare and choose from multiple options.

The Finding Restaurant/Cafeteria Application is an application that is combined from the idea of finding your way on Google Map and an Ecommerce Application

- View location markings and directions on the map

- Features related to user accounts: edit user information, change password, forget password

1.5.3 User classes and layer-by-layer characteristics

Users of the system are classified into 5 categories based on functionality and a number of identifying characteristics:

To access the app, users must register for an account If you already have an account but have forgotten your password, you can easily reset it using the Forgot Password feature.

- User class: can use all the main features of the application

- Admin (Manager/Supervisor) class: can monitor the accounts that have been created, locked and unlocked, view product information, and use all the features of the User

- Enterprise class: can add, edit product information and delete products, can use all features of the User

- Shipper class: can get the order from Enterpirses, and confirm when the order is completed

Note: The Admin layer is only capable of viewing, locking and unlocking User accounts, adding Business accounts, and is not capable of controling any other data

- Environment: Smartphone with Android operating system

- Image storage support: Firebase Storage

- Show and interact with maps: Google Map APIs

- An internet connection is required

- Need permission to access user location

THEORETICAL BASIS

NodeJS

Node.js is a server-side platform built on Google Chrome's JavaScript Engine (V8 Engine) Node.js was developed by Ryan Dahl in 2009 and its latest version is v0.10.36

Node.js is a powerful platform based on Chrome's JavaScript runtime, designed for creating fast and scalable network applications Its event-driven, non-blocking I/O model ensures that it remains lightweight and efficient, making it ideal for data-intensive, real-time applications that operate across multiple devices.

Node.js is an open-source, cross-platform runtime environment designed for building server-side and networking applications It allows developers to write applications in JavaScript, which can be executed on various operating systems, including OS X, Microsoft Windows, and Linux.

Node.js also provides a rich library of various JavaScript modules which simplifies the development of web applications using Node.js to a great extent

Node.js = Runtime Environment + JavaScript Library

Following are some of the important features that make Node.js the first choice of software architects

Node.js utilizes an asynchronous and event-driven architecture, where all APIs are non-blocking This means that a Node.js server does not wait for an API to return data; instead, it proceeds to the next API call The event notification mechanism in Node.js ensures that the server receives responses from previous API calls efficiently.

• Very Fast − Being built on Google Chrome's V8 JavaScript Engine,

Node.js library is very fast in code execution

Node.js operates on a single-threaded model with event looping, allowing it to handle requests in a non-blocking manner This unique event-driven architecture significantly enhances scalability compared to traditional servers, which rely on a limited number of threads to manage incoming requests As a result, Node.js can efficiently serve a larger volume of requests than conventional servers like Apache HTTP Server.

• No Buffering − Node.js applications never buffer any data These applications simply output the data in chunks

• License − Node.js is released under the MIT license

Discover an extensive compilation of projects, applications, and companies utilizing Node.js on the GitHub wiki, featuring prominent names such as eBay, General Electric, GoDaddy, Microsoft, PayPal, Uber, Wikipedia, Yahoo!, and Yammer, among others This resource highlights the diverse range of industries and use cases where Node.js can be effectively implemented.

Following are the areas where Node.js is proving itself as a perfect technology partner

• Data Intensive Real-time Applications (DIRT)

2.1.5 Where Not to Use Node.js?

It is not advisable to use Node.js for CPU intensive applications.

Flutter

Developing a mobile application is a complex task, with various frameworks available for this purpose Android offers a native framework utilizing the Java language, while iOS provides a native framework based on Objective-C and Swift.

To develop an application that supports both iOS and Android, developers must code in two different languages and frameworks To address this challenge, mobile frameworks are available that facilitate cross-platform development, ranging from simple HTML-based hybrid frameworks using HTML for the user interface and JavaScript for application logic to more complex language-specific frameworks that convert code to native applications Despite their varying levels of complexity, these frameworks often face significant disadvantages, with slow performance being a primary drawback.

Flutter is a high-performance framework built on the Dart language, which enhances efficiency by rendering the user interface directly on the operating system's canvas instead of relying on the native framework.

Flutter provides a wide array of pre-built widgets that facilitate the creation of modern applications These widgets are specifically optimized for mobile environments, making the design process as straightforward as crafting HTML.

Flutter applications are fundamentally built as widgets, which support both animations and gestures The underlying application logic utilizes reactive programming, allowing widgets to optionally maintain a state When the state of a widget changes, Flutter automatically compares the old and new states, ensuring a seamless and efficient update process.

21 render the widget with only the necessary changes instead of re-rendering the whole widget

We shall discuss the complete architecture in the coming chapters

Flutter framework offers the following features to developers −

• Uses Dart programming language and it is very easy to learn

• Beautiful and fluid user interfaces

• Runs same UI for multiple platforms

Flutter provides stunning and customizable widgets that ensure high performance for exceptional mobile applications, catering to diverse custom needs and requirements Additionally, it offers numerous other benefits that enhance the development experience.

• Dart has a large repository of software packages which lets you to extend the capabilities of your application

• Developers need to write just a single code base for both applications (both Android and iOS platforms) Flutter may to be extended to other platform as well in the future

• Flutter needs lesser testing Because of its single code base, it is sufficient if we write automated tests once for both the platforms

• Flutter’s simplicity makes it a good candidate for fast development Its customization capability and extendibility makes it even more powerful

• With Flutter, developers has full control over the widgets and its layout

• Flutter offers great developer tools, with amazing hot reload

Despite its many advantages, flutter has the following drawbacks in it −

• Since it is coded in Dart language, a developer needs to learn new language (though it is easy to learn)

In Flutter, the user interface and logic are often intertwined, unlike modern frameworks that aim to separate them However, this can be addressed through effective coding practices and the implementation of high-level modules to achieve a clear distinction between the UI and application logic.

• Flutter is yet another framework to create mobile application Developers are having a hard time in choosing the right development tools in hugely populated segment.

MongoDB

The manual describes key concepts in MongoDB such as:

MongoDB offers both local and cloud-hosted deployment options:

MongoDB provides two versions for locally hosted deployments: the free and open-source MongoDB Community edition, and the MongoDB Enterprise edition, which is available through the MongoDB Enterprise Advanced subscription The Enterprise version offers extensive support and includes advanced features tailored for businesses, such as LDAP and Kerberos integration, on-disk encryption, and auditing capabilities.

• MongoDB Atlas is a hosted MongoDB Enterprise service option in the cloud which requires no installation overhead and offers a free tier to get started

In MongoDB, a record is represented as a document, which consists of pairs of fields and values These documents resemble JSON objects and can contain various data types, including nested documents, arrays, and arrays of documents.

The advantages of using documents are:

• Documents correspond to native data types in many programming languages

• Embedded documents and arrays reduce need for expensive joins

• Dynamic schema supports fluent polymorphism

2.3.2 Collections/Views/On-Demand Materialized Views

MongoDB stores documents in collections Collections are analogous to tables in relational databases

In addition to collections, MongoDB supports:

• Read-only Views (Starting in MongoDB 3.4)

• On-Demand Materialized Views (Starting in MongoDB 4.2)

MongoDB provides high performance data persistence In particular,

• Support for embedded data models reduces I/O activity on database system

• Indexes support faster queries and can include keys from embedded documents and arrays

The MongoDB Query API supports read and write operations (CRUD) as well as:

• Text Search and Geospatial Queries

MongoDB's replication facility, called replica set, provides:

A replica set is a group of MongoDB servers that maintain the same data set, providing redundancy and increasing data availability

MongoDB provides horizontal scalability as part of its core functionality:

• Sharding distributes data across a cluster of machines

Starting from version 3.4, MongoDB introduces the ability to create data zones based on the shard key, allowing for efficient data management In a balanced cluster, MongoDB ensures that reads and writes associated with a specific zone are directed exclusively to the relevant shards within that zone For more detailed information, refer to the Zones manual page.

2.3.3.5 Support for Multiple Storage Engines

MongoDB supports multiple storage engines:

• WiredTiger Storage Engine (including support for Encryption at Rest)

In addition, MongoDB provides pluggable storage engine API that allows third parties to develop storage engines for MongoDB

SYSTEM ANALYSIS AND DESIGN

Usecase Specification

Description User logged in to the system

Actor(s): User, Admin, Enterprise, Shipper

User has already created an account in the system

If logged in successfully: The user is authenticated and the system displays the selectable functions.

If login failed: The system is inaccessible to the user.

Use case starts when a user needs to perform some function of the system that needs to authenticate access

1 The system displays a window for the user to enter the email and password

2 User enters email and password, press “Login”

3 Email and password authentication system

4 The system defines the user's role

5 The system opens the home screen and opens the user's accessible functions.

If the user entered the wrong email or password The following tasks are performed:

1 The system describes the reason for the wrong authentication

2 The system notes the user logging in again

3 When the user re-enter the email and password, step 3 in Basic flow is performed.

Description Users who register a system account

The user does not have an account in the system yet.

If registration successful: The system notifies the successful registration, the user is given an account by the system.

If registration is unsuccessful: The system notifies the user of the failure to register, the user must register again

Use case starts when the user does not have an account that needs to perform the registration function

1 The system displays a window for the user to enter their full name, password, email, phone number, address.

2 User enters full name, password, email, phone number, address.

3 Authentication system of full name, password, email, phone number, address.

4 The system determines the information entered by the user.

5 The system sends the authentication code to the email to the user

6 The user enters the authentication code,the system saves the account for the user to access the system.

If the user entered the wrong or the authentication code is wrong The following tasks are performed:

1 The system describes the reason for the wrong authentication and the wrong information

2 The system notes that the user re-registers

3 When the user re-enters the wrong credentials, step 1 in Basic flow is performed.

Description User forgot the password of the registered account

If the correct email is entered: The system will send a password change email to

If login failed: The notification system does not exist email

Use case starts when the user enters in the field filled in the registered email

2 The user enters the email in the box

4 The system sends an email containing otp to the registered email Every 60 seconds 1 time

5 Fill in the “Otp” ,“New password” and “Re-enter new password” boxes

6 Select “Confirm” and return to the login page

1 The system returns the message that the email could not be found

Table 4: Usecase Show Home Screen

Description View suggested , nearly products

Pre-conditions The user accesses the application and login

If logged in successfully: HomeScreen will be show

If login failed: System error message

Flow of events The user login and system will direct to Home Screen

The user login and system will direct to Home Screen

1 The system displays 4 products lists (around 10km)

2 Users can choose the product in the list to see the information about that product

If the system cannot retrieve the data The following tasks are performed:

1 The system describes the reason for the data retrieval failure.

2 The system notifies the user of a system error

3 The user selects other options, step 3 in Basic flow is performed.

Description User logged out of the system

Actor(s): Customer, Admin, Enterprise, Shipper

Pre-conditions Logged in users in the app

If logged out successfully: Returns to the login page and returns to Guest status

Use case starts when the user selects the "Logout" function on the menu bar

1 The system displays the button for the user to choose to log out

3 The system deletes the session

4 Exit the app, return to the login page

Table 6: Usecase Show Product Detail

The user accesses the application.User successfully logged in to the system

User access to “Enterprise’s information” and click a product in products list of enterprise to show Product’s information

1 The system displays Product’s information

2 "Back" to return Enterprise Screen

If the system fails to cancel

1 The system describes why failed

Description User wants to change password for account

Actor(s): User, Admin, Enterprise, Shipper

The user accesses the application.

User successfully changed password: System successfully notified User change password failed: System message failed

User access to "Account screen" and click “Security”to change password

3 The system displays “Old password” form, enter “New password”, enter “Re-enter new password”

If the system fails to change the password

1 The system describes the reasons for not changing

2 The system informs the user about the error

3 The user selects other options to proceed in return, step 1 in Basic flow is performed.

Description User updated account information

User updated information successfully: Notification system successful

User update information failed: System message failed

User access to "Account Screen" and click “Personal Information” to update personal information

2 User selects the information to be changed (full name, address, phone number, gender, date of birth) and enters the information

3 User select "Save" to save the information, return to the home page

If the system fails to save the information

1 1 The system describes why the change information could not be saved

3 The user selects other options to proceed with the update, step 1 in Basic flow is performed.

Description Show Chart and evaluations list of product

User access to “Enterprise’s information” and click a product in products list of enterprise to show Product’s information.

User access to “Enterprise’s information” and click a product in products list of enterprise to show Product’s information Then click to “Đánh giá sản phẩm” to show evaluations

1 The system displays Chart and evaluations list of product

2 "Back" to return Product’s information Screen

Description Users want to evaluate product

The user accesses the application and logged in

User statistics success: The system displays data User statistics failed: The system shows no data yet

User access to "Account screen" and click “Order”to see orders list and click an order in list to see the detail

User access to "Account screen" and click “Order” Then click an order in the list and click “Evaluate” icon to redirect to evaluations screen

1 System displays list of orders

2 The system displays order’s detail

5 Chart and Evaluations list updates

If the system is unable to compile statistics

1 The system of describing the reasons for not being able to compile statistics

3 When the user selects other options

Description Users want to edit evaluation

The user accesses the application and logged in

User statistics success: The system displays data User statistics failed: The system shows no data yet

User access to "Account screen" and click “Order”to see orders list and click an order in list to see the detail

User access to "Account screen" and click “Order” Then click an order in the list and click “Evaluate” icon to redirect to evaluations screen

5 Chart and Evaluations list updates

Description User type name of product in search box in search screen to find the product

Pre-conditions The user logged in

If the search is successful: The system returns the found products list

If the search for the tour is unsuccessful: The system informs you that the product was not found

Use case starts when user type in search box to find product

2 The user enters the product name in the search box

If the tour does not exist

1 The system returns the message that no results were found

3.1.2.13 Usecase Add Product to Cart

Table 13: Usecase Add Product to Cart

Description Add product to cart

User successfully adds the product to cart

User access to “Enterprise’s information” and click a product in products list of enterprise to show Product’s information

User access to “Enterprise’s information” and click a product in products list of enterprise to show Product’s information Then click to “Thêm vào giỏ” to show evaluations

1 The system add that product to user’s cart

User access to “Enterprise’s information” and click a product in products list of enterprise to show Product’s information.

User access to “Enterprise’s information” and click a product in products list of enterprise to show Product’s information Then click to “Map” icon to show Path

1 The system displays Path that connect beetween user’s location and enterprise’s location

Description System show User’s carts List

Pre-conditions The user accesses the application and logged in

Post-conditions User statistics success: The system displays data

User statistics failed: The system shows no data yet

Flow of events User access to "Account screen" and click “Cart”to see cart’s detail

User access to "Account screen" and click “Cart”

1 System displays list of enterprise cart

2 User selects a enterpise in the list to show cart’s detail

3 The system displays the detail of cart

Description User place order from user’s cart

Post-conditions Place order successfully: Notification system successful

Place order failed: System message failed

Flow of events User access to "Account screen" and click “Cart” to see cart’s detail and click “place order” to place order

User access to "Account screen" and click “Cart” and click

“place order” to place order

1 System displays list of enterprise cart

2 User selects a enterprise in the list to show cart’s detail

3 The system displays the detail of cart

4 The system processes the order and save the order

Table 17: Usecase Show Order List

Description System show User’s orders List

Flow of events User access to "Account screen" and click “Order”to see orders list

User access to "Account screen" and click “Order”

1 System displays two lists of orders

2 The system displays orders list

3.1.2.18 Usecase Delete Product from cart

Table 18: Usecase Delete Product from cart

Name Delete Product form Cart

Description User deletes product from cart

Pre-conditions The user accesses the application and logged

Post-conditions User successfully evaluated: The notification system has been deleted successfully

User review failed: Error message system could not be deleted

User access to Cart’s detail

1 The system displays the list of Products

2 User selects “Delete” icon on top right corner of item in list product

3 The system will delete product from user’s cart

4 The system updates the cart

If the user entered incorrect or unauthenticated information The following tasks are performed:

2 The system notes the user perform the operation again

3 When the user retakes, step 5 in Basic flow is performed

Table 19: Usecase Increase Product’s amount

Description User Increase product’s amount in cart

2 User selects “Increase” icon on right corner of item in list product

3 The system will increase product’s amount in user’s cart

Table 20: Usecase Decrease Product’s amount

Description User Decrease product’s amount in cart

2 User selects “Decrease” icon on right corner of item in list product

3 The system will decrease product’s amount in user’s cart

Table 21: Usecase Delete Enterprise Cart

Description User deletes enterprise cart from carts list

User access to Carts List

1 The system displays the list of Cart

2 User pull left the item in list and click “Delelte” Icon

3 The system will delete enterprise cart from carts list

4 The system updates the cart list

Table 22: Usecase Show order’s detail

Description System show the order in User’s orders List

Flow of events User access to "Account screen" and click “Order”to see orders list and click an order in list to see the detail

User access to "Account screen" and click “Order” Then click an order in the list

3.1.2.23 Usecase Show Side Bar Menu

Table 23: Usecase Show side bar menu

Name Show Side Bar Menu

Description Enterprise and Shipper want to see Functions list

Post-conditions Successfully: The successful notification system

Flow of events Log In by Enterprise and Shipper account

1 1 The system displays the list of Functions in side bar menu

If the information is not authentic The following tasks are performed:

2 The system notes the user entering and re-selecting the information

3 When the user enters and re-selects the wrong credentials, step 3 in Basic flow is performed

Description Enterprise and Shipper want to see their information

Flow of events Log In by Enterprise and Shipper account

Access to Home screen and click “Information”

1 The system displays the list of Functions in side bar menu

2 The system shows information of enterprise or shipper

3.1.2.25 Usecase Show Confirm Order List

Table 25: Usecase Show confirm order list

Name Show Confirm Order List

Description Enterprise want to see their confirm order list

Flow of events Log In by Enterprise account

Access to Home screen and click “Confirm order”

2 The system shows confirm order list

3.1.2.26 Usecase Show Unconfirm Order List

Table 26: Usecase Show unconfirm order list

Name Show Unconfirm Order List

Description Enterprise want to see their unconfirm order list

Access to Home screen and click “Unconfirm order”

2 The system shows unconfirm order list

3.1.2.27 Usecase Show Detail of Order Enterprise

Table 27: Usecase Show detail of order enterprise

Name Show Detail of Order Enterprise

Description Enterprise want to see their confirm order list

Access to Home screen and click “Unconfirm order” or

“Confirm order” and click an item in list

2 The system shows unconfirm order list or confirm order list

3 The system shows detail of the order

Description Enterprise want to confirm user’s order

Access to Home screen and click “Confirm order” and click an item in list Then choose “shipper” and click “Confirm”

2 The system shows confirm order list

3 The system shows detail of the order

4 The system processes order, save and transfer the order to shipper

Table 29: Usecase Show enterprise’s products

Description Enterprise want to see their products

Access to Home screen and click “Products List”

2 The system shows products of enterprise

3.1.2.30 Usecase Show Enterprise Product Detail

Table 30: Usecase Show product’s detail

Name Show Enterprise Product Detail

Description Enterprise want to see their product’s detail

Access to Home screen and click “Products List” and click an item in the list

3 The system shows product’s detail

3.1.2.31 Usecase Show Evaluation of Product in Enterprise

Table 31: Usecase Show evaluation of product in enterprise

Name Show Evaluation of Product in Enterprise

Description Enterprise want to see their product’s evaluations

Access to Home screen and click “Products List” and click an item in the list Then click “Evaluations”

3 The system shows product’s detail

4 The system shows chart and evaluations list of that product

3.1.2.32 Usecase Open/Close Mode Confirm Order

Table 32: Usecase Open/Close mode confirm order

Name Open/Close Mode Confirm Order

Description Shippers want to confirm order to ship to user

Flow of events Log In by Shipper account

Access to Home screen and click “Open Mode” or “Close Mode”

2 The system shows shipper’s request to nearly enterprise

Table 33: Usecase Manage received Order

Description Shippers manage received order

Flow of events Log In by Shipper account

Access to Home screen and click “Received Order”

2 The system shows Order’s detail

Description Users add Enterprise to the system

Added successfully: The notification system has added successfully Add failed: Error message system could not add

User access to Enterprise list

1 1 The system displays a list of the Enterprise

3 The system displays a window for the user to enter

4 User input and selection of name, details, type, logo

5 System of checking names, details, types and logos

6 The system saves the Enterprise's information to the system

2 The system notes the user entering and re-selecting the information.

3 When the user enters and re-selects the wrong credentials, step 3 in Basic flow is performed.

Table 35: Usecase Usecase Add Product

Description The user add new product

Corrected successfully: The notification system has been updated successfully

Fix failed: System message could not be updated

User access to Product list

1 1 The system displays a list of Products

2 User selects “Add new Product”

3 The system displays a window for the user to add

4 User input name, details, types, price, images

5 System check names, details, types, price, images

6 The system saves the Product's information to the system

If the user enters and selects false or unauthenticated information The following tasks are performed:

2 The system notes the user entering and selecting the remaining information

Description The user edit product information

Corrected successfully: The notification system has been updated successfully

Fix failed: System message could not be updated

User access to Product list

2 1 The system displays a list of Products

2 User selects “Edit” at Product

3 The system displays a window for the user to edit

4 User input name, details, types, price, images

5 System check names, details, types, price, images

6 The system saves the Product's information to the system

If the user enters and selects false or unauthenticated information The following tasks are performed:

2 The system notes the user entering and selecting the remaining information

Sequence Schema

Figure 15: Sequence Show Home Screen

Figure 16: Sequence Show Product Detail

Database specification

A user is assigned a unique ID generated by MongoDB, along with essential details such as name, phone number, account name, password, email, gender, and date of birth The user's activity status and role are also recorded, with the default role set to 0 (User ) upon account creation In case of a forgotten password, the OTP code will be refreshed, and users can receive up to three alerts.

88 every time the alert is issued and when more than 3 times, the account will be locked

A product in our system is defined by several key attributes, including an automatically generated ID from MongoDB, an enterprise ID (eID), name, price, description, and a point value Additionally, it features a review section and two arrays for storing images and categories To manage product lifecycle, there is also a variable that indicates whether the product has been marked as "deleted."

- Type includes id (created automatically thanks to mongoDB) and type name

- Each Product will be able to have one or more categories, each of which may belong to more than one Product

- Each Product will be able to have multiple photos

Users have the ability to rate individual products, with each product featuring multiple reviews from various users Each user can submit ratings for multiple products, but is limited to one review per product The evaluation data is organized in a table that includes automatically generated IDs from MongoDB, along with user IDs, usernames, product IDs, scores, reviews, and timestamps of the reviews.

Users can place orders that require confirmation from both an enterprise and a shipper Initially, the order status is set to 0 (Waiting to be confirmed) The enterprise then searches for a nearby shipper, assigns them to the order, and confirms it Once confirmed, the shipper can see the order and also confirm it, changing the status to 1 (On the way) Finally, when the order is delivered, the shipper confirms completion, updating the status to 2 (Completed).

Description of tables

No Attributes Type Meaning Notes

1 _id ObjectId Product ID Primary key

2 eID string Enterprise Id of product Reference Key

3 price number Price of product

6 score number Score of product

7 name string Name of product

9 description string Description of product

1 _id ObjectId User ID Primary key

2 gender number Gender of user

3 otp string OTP Code Hashed for security

4 lat number Lat of location

5 lng number Long of location

6 role number Role of User

7 isWarned number Number of warned

8 isActived boolean Account is actived ?

13 phone string Phone Number 10 digits

14 dateofBirth date Date of birth

15 searchHistory array Search history of

16 orderHistory array Order history of

1 _id ObjectId CART id Primary key

2 userID string User id Reference key

3 cartDetail array List item in enterprise cart

4 totalPrice number Total of cart

5 ListEnterpriseID array List enterprise id

1 _id ObjectId Type ID Primary key

2 type string Name of type

1 _id ObjectId Order id Primary key

2 userID string User id Reference key

3 name string Name of user

4 phone string Phone number of user

5 lat number Lat of location

6 lat number Long of location

8 enterpriseID string Enterprise ID Reference key

9 location string Specify the location of user

10 enterpriseNam e string Name of enterprise

11 discount number Discount of order

12 totalPrice number Total of order

13 status number Status of order

14 shipperID string Shipper’s Id Reference key

1 _id ObjectId Evaluate ID Primary key

3 uID string Id of user Reference

4 pID string Id of product Reference

5 comment string Comment of user

IMPLEMENTATION AND TESTING

Implementation

1 Textbutton Click to redirect to Sign up

3 TextFormField Type the information of login

4 Textbutton Click to redirect to Forgot Screen

6 Button Click to Login with Google

2 List suggested Products List products

3 List nearby Products List products

4 BottomNavigationBar Click to redirect to diferent

1 TextFormField Type name of product which you want to find

2 Button Click to search product by name

3 List searching Products List products

1 Button Click to back page

2 Box Information Show the information of enterprise

3 List Products of enterprise List products

3 Box Information Show the information of enterprise

4 Button selection Click to change size of product

5 Button Click to redirect to Map Page

6 Button Click to redirect to Evaluate Page

7 Button Click to add product to cart

2 Text Show distance of path

3 Google Map Show direction between the enterprise and user

1 List Buttons Click to redirect to different page

2 List Buttons Click to redirect to different page

3 TextFormField Information Show and edit the information of user

4 Button Click to save change

Figure 35: List of enterprise carts

Table 51: List of enterprise carts

2 ListView List of enterprise cart

2 Box Information Information of cart

3 Box Information Information of cart

4 List View List products in cart

5 Button Click to place order

2 TabView Click to change tab

3 List View List orders of user

2 Box Information Information of order

1 Form Comment Form to add and edit

Figure 40: Home page of enterprise

Table 56: Home page of enterprise

1 Box information Information of enterprise

2 SideBar Menu Funtions of enterprise

4.1.15 Detail of not confirm order

Figure 41: Detail of not confirm order

Table 57: Detail of not confirm order

1 Box information Information of order

2 Dropdown Click to choose a shipper

3 ListView List products of order

4 Button Click to confirm the order

Figure 42: List of enterprise’s products

Table 58: List of enterprise’s products

2 ListView List products of enterprise

Figure 43: Home page of shipper

Table 59: Home page of shipper

1 Box information Information of shipper

2 SideBar Menu Funtions of shipper

Figure 44: Detail of shipper’s order

Table 60: Detail of shipper’s order

5 ListView List products of the order

6 Button Click to finish the order

Testing

In this project, we employ the black box testing method to evaluate the application's key functionalities The primary benefit of black box testing lies in its effectiveness for assessing extensive code segments and core system functions, making it ideal for swift software development The specific functions targeted for testing include:

No User Profile Functions Descriptions

Guest Login Check the notifies of the application when the user fills in the login form and presses the “Login” button

Check the notifies of the application when the user presses the "Forgot Password" button and fills in the form

User Place Order Check order after user place

4.2.2.1.Results of the "Login" function test

Table 62: Test results of "Login" function

No Descriptions Steps for testing

Check the response of the app when the user enters the correct login information

The user successfully logs into the app and navigates to the home page as ever Pass

Check the app's response when the user enters incorrect username information

- Enter the password to Press the

“Invalid email or password” as ever Pass

Check the notifies of the application when the user enters empty username and password

“Empty email or password” as ever Pass

4.2.2.2.Test results of "Forgot password" function

Table 63: Test results of "Forgot password" function

No Descriptions Steps for testing Test data Expected result

Check the notifies of the app when the user enters the correct information

- Click the "Forgot Password" button at the login page

The user is sent an OTP code to the Email and notify

Check the app's countdown when the user click

- Click the "Forgot Password" button at the login page

Button countdow n 60 seconds and cant click as ever Pass

Check the notifies of the application when the user does not enter information

- Click the "Forgot Password" button at login

An error message appears above the

“new password empty” as ever Pass

4.2.2.3.Test results of "Place Order" function

Table 64: Test results of "Place Order" function

Steps for testing Test data Expected result

Check the notifies of the app when the user place order by

- Click the "Place Order" button at the cart’s detail page

- Choose payment methods to place order

Direct to payment vnpay page

“success” after entering payment information as ever Pass

Check the notifies of the app when the user place order by

- Click the "Place Order" button at the cart’s detail page

- Choose payment methods to place order

CONCLUSION

Results

After almost a semester of work, the team successfully launched a simple way-finding application that could meet the key features of the set requirements

Despite its potential, the application currently falls short compared to earlier versions, primarily due to the team's limited experience, particularly in Front-end development with Flutter Gaining additional expertise will enhance the team's ability to successfully complete the project.

Archivements

After working to complete the project, the team has achieved some results such as:

- Complete the product on time, the product can work normally, can use some key features

- Learn and be able to apply Google Map APIs to the project map

- Nodejs, MongoDB and Flutter can be used to program a complete mobile application

- The interface of the program is quite user-friendly according to the personal opinions of the group.

Drawbacks

In addition to the results achieved, the group still has many limitations such as:

- The ability of each member of the team has not been properly evaluated and the difficulty of coding the Front-end section makes the project limited and not practical

- The software still does not have enough features such as missing review management features (browse, delete reviews)

- The ability of the software to operate depends directly on the quality of network transmission because of data storage on MongoDB and Firebase

- The user experience has not been optimized.

Future Works

To enhance the program's effectiveness, it is essential to implement additional review management features, such as the ability to browse and delete unsatisfactory reviews Furthermore, prioritizing design improvements will significantly boost user experience.

When registering a new store on platforms like GrabFood and Shopee Food, it's essential to follow specific business logic to ensure a smooth operation The registration process typically involves creating an account, filling in necessary business information, and complying with platform requirements Once registered, the order receipt process requires efficient management of incoming orders, ensuring accuracy in order details to enhance customer satisfaction Finally, establishing a reliable delivery process is crucial, as it directly impacts customer experience and retention By adhering to these steps, businesses can optimize their presence on food delivery platforms and drive sales effectively.

[12] Node.js – Introduction: Node.js - Introduction (tutorialspoint.com)

[13] Flutter – Introduction: Flutter - Introduction (tutorialspoint.com)

[14] Introduction to MongoDB: Introduction to MongoDB — MongoDB Manual

The Google Maps API documentation provides essential guidelines for integrating maps into web applications, offering a simple JavaScript implementation Developers can find valuable resources, including tutorials and examples, on various platforms like Clue Mediator and YouTube, which demonstrate how to effectively use Google Maps in ReactJS By leveraging these resources, developers can enhance their applications with interactive mapping features, improving user experience and engagement.

It seems that this video doesn't have a transcript, please try another video.

Plant App - Flutter UI - Speed Code - YouTube

Plant-App-Flutter-UI/body.dart at master ã abuanwar072/Plant-App-Flutter-UI

#4.3 Flutter Navigate to a new screen and back Use WillPopScope and Perform Push and Pop operations - YouTube

- HTTP request (fetch API) document:

Flutter: Fetch Image from the Back-End through Rest API | Image Rest API integration Profile Page#30 - YouTube

How to authenticate and login users in Flutter from a rest Api - mundaneCode

HTTP Requests with Flutter (API) - YouTube

[Flutter] Login Screen with HTTP Post Request | SnippetCoder |

LEARN.CODE.CREATE | HD Video - YouTube

HTTP Requests with Flutter (API) - YouTube

[Flutter] Login Screen with HTTP Post Request | SnippetCoder |

LEARN.CODE.CREATE | HD Video - YouTube

- Google Map API flutter documentation :

Restrict and rename API key – APIs & Services – My First Project – Google Cloud Platform dart - Google map in flutter doesn't appear - Stack Overflow

Flutter Google Maps API Tutorial | Markers, Polylines, & Directions API - YouTube Share some Google Maps API Key used for Website (www.ieuit.com)

- How to set markers : Creating a route calculator using Google Maps in Flutter |

To calculate the distance between markers in Flutter, you can create a route calculator using Google Maps, which allows for precise navigation and distance measurement By leveraging the latitude and longitude of the current location, you can retrieve complete address details, enhancing the user experience in your application For detailed guidance on implementation, refer to resources like Codemagic Blog and Stack Overflow, which provide valuable insights and code examples.

- Using Alan AI to build a Voice Assistant:

Building a Voice Assistant in Flutter Apps - YouTube

Tiêu đề	Create Application for Finding and Ordering Food/Drink from Restaurant/Cafeteria around User
Tác giả	Pham Duy Lap, Dinh Minh Thien
Người hướng dẫn	Le Vinh Thinh, PhD
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Graduation Thesis
Năm xuất bản	2022
Thành phố	Ho Chi Minh City

Định dạng
Số trang	132
Dung lượng	7,64 MB