ADV-C44
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?
● Added functionality for going back to Menu
● Added functionality for confirming the food item
● Created the cartSummary function
Which CONCEPTS/CODING did we cover today?
● We used the click event block of the button component.
● We used a set visible block of the component.
● We used the set enabled block of the component.
● We used the logical blocks to add the true or false logic
● We used add to list block.
● We created a procedure and used a call procedure block.
● We used text block,maths block, join block
● We used if then and for loop blocks.
How did we DO the activities?
1) Added code to go back to main 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-C44
2) Added the functionality of confirming the dish:
3) Initialized the variable cartSummaryText and set its value to empty:
4) Added the functionality for calculating the price of the food items based on
the quantity and displaying in the Cart Summary section:
© 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-C44
Started adding code for the backToMenu button:
1) We declared the cartSummary function.
2) Then we used the backToMenu click code block:
3) As we have to show the list of food items basically, we set the visibility of the
Listview1 to true. Here is how the code looks like:
4) Then, as we have to navigate back to the menu, we set the quantitySection
as false
© 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-C44
5) We also wanted our confirmDish button to be disabled, which means it
should not be clickable.
Added functionality for confirming the Dish
When we clicked on the confirmDish button, the food items which we selected
should get added in the list view in a particular format:
1) Then we used the backToMenu click code block confirmDish:
2) On clicking the confirmDish button, the items on the list are added. For this,
we visited the Lists section:
© 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-C44
3) And selected the following block:
4) Then we placed it under the confirmDish block like this:
5) Then we specify the list name inside which we have to add the items. This list
name we have already defined earlier, which is global finalDishList
6) Then, we specified the item name which we have to add inside the list. So, we
updated the label component, which is the selectedDish, like this:
© 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-C44
7) Once we add the items to the list, we have to add the quantity of items.
8) Then we had to add the price of the item. For that, again we selected the
following block:
9) We selected the “get global finalPriceList” block and attached it to the “add
items to list list” block. Then we selected the “get global selectedDishPrice”
block and attached it to the item section. After we had added the above
blocks, the code looked like this:
© 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-C44
10)Once the dish is added we need to show the menu list:
11) Then as we had to confirm the dish, we don’t want to show the
quantitySection enabled. Thus, we set the visibility of the quantitySection to
false like this:
We used here “set quantitySection Visible to” and “false” blocks.
12)Then we set the confirmDish button Enabled to false, as we dont want the
button to be clickable:
© 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-C44
Here we used “set confirmDish Enabled to” and “false” blocks.
13)Then, once all the Dishes are selected and the quantity is confirmed, we have
to place the order. So, we set the visibility of “order_button_alignment”
component to “true” like this:
Here we used “set order_button_alignment Visible to” and “true” blocks.
14)Then, we called the cartSummary function, which calculated the total price,
© 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-C44
depending upon the items and quantity selected:
Here, we used the “call cartSummary” block.
Added functionality for the CartSummary
1) We initialized an empty variable named cartSummaryText.
2) Inside cartSummary function we set the itemSummary to empty
3) Then, we set the “set global cartSummary Text to” to empty like this:
© 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-C44
Here, we used “set global cartSummaryText to” and empty text blocks.
4) Then we checked whether the items in list finalDishList are present and not
empty, by checking the condition to be false.
5) Then we fetched each item of the list using the for loop. For this we selected
the following block from the Control section in the Blocks section:
6) Then we visited the Lists section and attached the following block to the “to“
part:
7) Then as we had to go through all the elements of the finalDishList, so we
dragged and dropped the following block to the code:
© 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-C44
We got this by hovering on the following block, which we initialized at the
beginning of the code, and selected the desired block:
The code after adding the above elements looked like this:
8) Then we set the cartSummaryText to the selected dish from the finalDishList
at the given index referred by number variable. For this, we dragged and
dropped “set global cartSummaryText to” block inside the for loop:
We got this block here, where we initialized at the beginning of the code:
© 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-C44
9) Then we dragged and dropped the join block from the Text section under the
Blocks. Then we attached it to the “set global cartSummaryText to” block.
10)Then again we dragged and dropped the following block from the Lists
section under the Blocks. And attached it to the join block:
11) Then we attached the following block to the list part:
12) We got this block by hovering on the following block, which we have
initialized at the beginning of the code, and selected the desired block:
13) Then we set the index of the list as the number variable using the following
block:
14)We got this “get number” block from the number variable in the for loop as
© 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-C44
shown in the below code :
Here is how the code looked after adding the above blocks:
15)Then we joined the quantity for this by adding the text “Quantity” and fetched
the final quantity of the food from the list at a given index referred by number.
For this, we visited the Text section and selected the empty variable block.
Renamed the text as “Quantity”:
16)Again we dragged and dropped the following block from the Lists section
under the Blocks, and attached it to the join block:
17)So this list block had two parts, first as list, to which we attached the “get
© 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-C44
global finalQuantityList” block:
We got this block from the following block which we have initialized at the
start of the code:
18)In the second part of the list block, we attached the “get number” block:
We got this block by hovering on the number variable in the for loop as
shown in the below block:
Then the code looked like this:
© 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-C44
19) Then we added the price of the items depending on the quantity of food
item selected. So we got the total price of the selected food item by
multiplying the quantity of the food item with the price of each.
20)For this,we dragged and dropped the empty variable block block from the
Text section and updated it to “Price Rs: “:
21)Then we dragged and dropped the following block from the Math block:
This is because we had to multiply the dish price with the quantity of dish
selected.
22)Then inside the first empty block, we attached the following block from the
Lists section under the 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.
ADV-C44
23)Then to this list block, first we attached the “get global finalPriceList” block:
We got this by hovering on the following block, which we had initialized at the
beginning of the code, and selected the desired block:
24)Then to the second part (index), we attached the “get number” block:
We got this block by hovering on the number variable in the for loop as
shown in the below block:
25)Then in the second empty block of the Math block we attached the following
block from the Lists section under the 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.
ADV-C44
26)And to this list, in the first part we attached the “get global finalQuantityList”
block:
We got this by hovering on the following block, which we had initialized at the
beginning of the code, and selecting the desired block:
27)Then to the second part (index), we attached the “get number” block:
We got this block by hovering on the number variable in the for loop as
shown in the below block:
After we have added the above blocks, the code now looks like this:
© 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-C44
28) Then we added a next line component, which displayed the food items
with their quantity and price one below the other, like this:
29)Then we get the value of the cartSummaryText and assigned that value to
itemSummary like this:
© 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-C44
30)As we had to place the order, we set the visibility of order_button_alignment
component to true like this:
31)Now, we enabled the placeOrder button by setting it to true:
© 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-C44
What’s NEXT?
In the next class, we will add the functionality for clearChat and placeOrder button
and design and code the OrderPlace screen of the 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.
