ADV-C43

FOOD ORDERING NATIVE

APP

What was our GOAL for this MODULE?

The goal was to build their own food ordering app that can be used by the eatery owners to
take their business digital and allow the customers to order the food using the app.

What did we ACHIEVE in the class TODAY?

● We finished the 50% coding part for the Menu screen of the User app.
● Fetched the list of items from the Firebase
● Displayed the items on the screen
● Updated the quantity of the items before placing the order

Which CONCEPTS/CODING did we cover today?

● Initialized the global variables
● Added Code for the Menu Screen Initialization
● Added Code for Data Changes in the Firebase
● Added Code for the Menu Selection by the User
● Added Code When the User Clicks on the Add Sign
● Added Code When the User Clicks on the Subtract Sign

© 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-C43

How did we DO the activities?

Code & Explanation

CODE FOR THE “Menu” SCREEN of the User App

The objective here is to ensure that the user is able to see the menu and could place the
order by selecting the items from the menu.

Once the user selects the item, it would show the price of the item and option to choose the
quantity. Once all the things were done, the user could place the order. And the app would
update the things on firebase realtime database.

Output of Menu 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.
 ADV-C43

Output when we choose any item:

© 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-C43

Below code is 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-C43

© 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-C43

1. Initialize all the global variables: We initialized the variables priceList and nameList
to store the empty list of prices and names of all the dishes, which were saved in the
firebase. We set the variables as an empty list.

Once the user confirmed the dishes, we needed to store details of the dishes such as
their names, total quantities, and the total prices in empty global variables. Thus, we
declared three empty global variables with names - finalDishList, finalQuantityList,
and finalPriceList.

2. Added Code for the Menu Screen Initialization: When the Menu screen gets
initialized, we added code to set the ProjectBucket name “price” of the Firebase
database. Then added the code to store all the names, prices and quantities inside
the global variables - finalDishList, finalPriceList, and finalQuantityList from
TinyDB.

© 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-C43

*Here price is the bucket name that we choose while creating the firebase realtime
database.
*TinyDB- Tiny Database is used to save the data for your project so that we can use
that data in all the other screens also.

➢ Go to the Menu Block and choose the following block before dropping it on the
screen:

➢ We set the firebase database projectBucket value to the bucket name

(“price”):

➢ We stored all the names, prices and quantities inside the global variables -
finalDishList, finalPriceList, and finalQuantityList. These values are already
saved in the Tiny database which we have done in the Screen1 of the User
App in the last class.

Choose the “set to” block from Variable block and attach it to the following
block from the TinyDb1 block to get the value:

© 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-C43

● Here tag was attached to string and name accordingly that we

selected while saving the data in TinyDB.
● Here the value was attached to the string and its value was set to NA.

In the same way, we had done for all the variables such as finalDishList,
finalPriceList, and finalQuantityList:

3. Added Code for Data Changes in the Firebase: When the data changes in the
firebase, we update the changes in global nameList and priceList variables.

● We selected the “when FirebaseDB1.DataChanged” block from the

FirebaseDb1 block:

● We updated the details in nameList:

© 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-C43

➢ Here, we selected the nameList variable and attached it to the list.

➢ We set the index value as 1.
➢ And attached the tag to the item.

*The Data in the firebase stored in tag:value format:

So, Fried Rice (dish name) is a tag and 200 (dish price) is a value. We
stored the dish name in nameList and dish price in priceList.

● In the same way, we wrote the code to update the changes in the priceList:

● Initially in the Menu screen, we made only ListView1 visible in which we

displayed the name of the dishes that are saved in the global nameList:

© 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-C43

4. Added Code for the Menu Selection by the User: When the user selected any of the
list items from the menu then we had done changes in the component visibility and
added functionalities to them.
● First, we initialized the variable selectedDishPrice to save the price of the
selected dish.

● Once the user picks any of the items from the Menu list then we hide the
ListView1 block.
➢ Set the ListView1 visibility to false.

➢ In the same way, we made the quantitySection block Visible because

users want to choose the quantity of the dish:

➢ Set the text value of selectedDish to selection of the ListView:

© 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-C43

➢ Set the quantity Text to 0 value. This is because everytime a new dish has
been selected the value of quantity should get zero.

➢ Set the value of global selectedDishPrice to the respective price of the

item that is selected by the user.

➢ Set the Text of the price to global SelectedDishPrice and assign the value
that we get after joining the string “Cost of the Dish is Rs: ” and the value
that we get from global selectedDishPrice.

© 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-C43

5. Added Code when the User Clicks on the Add Sign: Once we clicked on the add
sign, it increased the quantity value by 1 and set the price of the selected dish
according to the quantity chosen by the user.
● We increased the quantity Text value by 1:

● Set the text of price. For this, drag and drop “set price Text to” command from
the price Block and assign the value that we get after joining the string “Rs. ”
with the quantity text that multiplies with the variable global
selectedDishPrice that holds the price of the selected dish.

● Check the condition whether the quantity Text > 0. If this is true, then enable
the confirmDish button otherwise it is disabled.

© 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-C43

6. Added Code when the User Clicks on the Subtract Sign: In the same way, we did
the coding for the sub block. Once we click on the subtract sign, it decreases the
quantity value by 1 and sets the price of the selected dish according to the quantity
chosen by the user.
● We decreased the quantity Text value by 1.

● Set the text of price. For this, drag and drop “set price Text to” command from
the price Block and assign the value that we get after joining the string “Rs. ”
with the quantity Text that multiplies with the variable global
selectedDishPrice that holds the price of the selected dish.

© 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-C43

● We check the condition whether the quantity Text < 1, then only:
○ Made the ListView1 Visible again.
○ quantitySection Invisible.
○ Disable the confirmDish button.

What’s NEXT?
In the next class, we will complete the coding for the “Confirm this dish” and “Don’t want
this dish back to menu” buttons of the Menu screen of the User App. We will also create a
function “cartSummary” and call it inside the necessary blocks.

© 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.