ADV-C42

FOOD ORDERING NATIVE

APP

What was our GOAL for this MODULE?

The goal was to learn to build a food ordering app which can be used by eatery owners to
take their business digital while customers will be able to order using the same app. We
learned to sketch the user journey while building the frontend and backend database.

What did we ACHIEVE in the class TODAY?

● Added the code for the Update Menu screen.
● Stored the Food item details in the Firebase db.
● Displayed the food items from the Firebase to the Menu list.

Which CONCEPTS/CODING did we cover today?

● Added Labels component
● Added Buttons component
● Added TextBox component
● Added Listview component
● Added FirebaseDB component

© 2021 - BYJU’S Future School.

Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
 ADV-C42

How did we DO the activities?

Code & Explanation

CODE FOR THE “UpdateMenu” SCREEN of the Admin App

The objective here was to get the user input, store it in the database, and display it on the
app.

Below code was covered in this class:

© 2021 - BYJU’S Future School.

Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
 ADV-C42

1. Declared a variable to store the food names and its prices: We declared a variable
food_item which refers to menu items containing the food name and its price. We set
this variable to be an empty list.

2. Wrote code to set the ProjectBucket name of the Firebase database: When the
UpdateMenu screen gets initialized (that is opened) - we added code to set the
ProjectBucket name of the Firebase database.

You can think of ProjectBucket/StorageBucket as a folder which holds the

Tags and Values in a Key value pair.
● Tags - This refers to the name of a food item.
● Values- This refers to the price of the food item.

Here, price is the Bucket which holds the Tags and Values in a Tag (Food item name)
Value (Food item price) pair.

➔ Code for setting the ProjectBucket name when the UpdateMenu screen is

opened (Initialized)

© 2021 - BYJU’S Future School.

Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
 ADV-C42

3. Got data from the Firebase database: We added code to get all the data from the
firebase database. This makes sure that all the Menu items are displayed.

➔ We got the block from the

section.
And inside this function, we added code to add all the menu items and their
respective prices in a list variable that we created earlier named food_item.
We joined the tag (food name) and value (food price) together and then stored
it in the list.
Example:
1. Food item:
- Name: Burger
- Price: 250
2. Food item:
- Name: Paneer 65
- Price: 300
These food items will be stored in the list in the below manner:
[ “Burger : 250” , “Paneer 65 : 300” ]

➔ Then we selected the code block from the

section.
This code block stores the food name (from tag of the price Bucket) and food
price (from the value of the price Bucket) in the food_item list at the first (1st)
index position.

© 2021 - BYJU’S Future School.

Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
 ADV-C42

➔ Then we selected the tag variable from the DataChanged block. Click on the
tag. It gives you a code block to get the tag variable and set the tag variable
to a value. Since we wanted to use the tag name from the Firebase database,
we dragged the get tag code block to get the tag name.

➔ Similarly, we can get the value variable from the DataChanged block.

➔ Then as we wanted to display this list of menu items and their prices in the
ListViewer, we set the ListViewer Elements to this variable .

© 2021 - BYJU’S Future School.

Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
 ADV-C42

4. Got the user inputs and stored it in the database: We got the food name and food
price from the user and stored these in the Firebase database on click of the Add
Food Details button.
As we wanted to do this on click of the Add Food Details button, we got the on click
function for the add_food_details button.

So when a user clicks on the Add Food Details button, we get the food item name
and price from the respective text boxes and store these in the Firebase database.
The data in the Firebase database is stored in Tag (key) and Value pair. Therefore, we
stored the food item name as the tag and its price as the value.

This data is stored inside the price Bucket as price is the current active Bucket.

© 2021 - BYJU’S Future School.

Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
 ADV-C42

So, here we have completed the first part of today's activity.

Then we started creating the “User App” of the Food Ordering System which the customers
used to order food.
We added code to Screen1:

1. We defined finalDishList, finalQuantityList, finalPriceList variables with

empty lists:

- finalDishList: We stored the final list of dishes in the finalDishList

variable.
- finalQuantityList: We stored the final list of quantity of the dishes in
the finalQuantityList variable.
- finalPriceList: We stored the list of prices of the respective food item in
the finalPriceList variable.

2. Since we wanted to use these variables across all the screens of this
application, therefore we stored these variables in TinyDB. On click of the
Place Order button, we stored these variables in TinyDB and redirected the
user to the Menu screen.
➔ To store the data in TinyDB, we used the

code block from the

section. Here-

© 2021 - BYJU’S Future School.

Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
 ADV-C42

- In the below code, we are basically calling the TinyDB1

component and inside it we store the values using .StoreValue
function, like this:

➔ TinyDB also stores the value in Tag and Value pair just like the
Firebase database.
So, here inside the tag, we stored the finalDishList as a text, which is
basically a list name.
then inside the valueToStore variable, we stored the values of this list
in terms of name.
Therefore, we set the tag name to finalDishList and stored the
finalDishList variable in it.

➔ Similarly, we stored finalQuantityList.

So, here inside the tag, we stored the finalQuantityList as a text, which
is basically a list name.
Then inside the valueToStore variable, we stored the values of this list
in terms of quantity stored in the finalQuantityList variable.

And inside the finalPriceList variable in TinyDB1, inside the tag, we

stored the finalPriceList as a text, which is basically a list name.
Then, inside the valueToStore variable, we stored the values of this list
in terms of Price stored in the finalPriceList variable.

© 2021 - BYJU’S Future School.

Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
 ADV-C42

➔ Then, we wrote code to redirect the user to the Menu screen. To

redirect the user to a different screen, we used the

code block from the

section and assign the name of the screen to which we want to
redirect the user which is Menu.

© 2021 - BYJU’S Future School.

Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
 ADV-C42

Design output of Menu Screen (User App)

© 2021 - BYJU’S Future School.

Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.
 ADV-C42

What’s Next?
In the next class, we will add the functionality of fetching the items from the Firebase
database and display the items on the screen.

© 2021 - BYJU’S Future School.

Note: This document is the original copyright of BYJU’S Future School.
Please don't share, download or copy this file without permission.