Application Design II / TASK 2: Hybrid Lo-Fidelity Mobile App Development
Daphne Lai Yu Cheng / 0366380
DST 61004 / Application Design II / Bachelor of Design (Honours) in Creative Media / Taylors' University
LECTURES
INSTRUCTIONS
Task 2: Hybrid Lo-Fidelity Mobile App Development
Figure 1.1 Task 2 Brief
For task 2, I decided to use the application's main flow to create CRUD which is
- Create a new order
- View the list of orders
- Edit an existing drink's information
- Cancel or delete an order
For the user authentication, I first created 2 pages, Sign Up and Sign In page.
Sign Up:
1) Name
2) E-mail Address
3) Password
Sign In:
1) E-mail Address
2) Password
Figure 1.2
After creating the pages, I set up the Firebase and Firestore, created a schema for users. Every time a user signs up or signs in, the Firebase and Firestore data manager will keep a record of the user data.
Figure 1.3
If a returning user tries to sign up or register using an existing account in the application, there will be an error mentioning that the account is already in use, this is to ensure that there is no repetition in user data.
When a user keys in their details wrong, there will be an error indicating that the details keyed in are incorrect.
%20-%20Google%20Docs%20-%20Google%20Chrome%203_8_2026%204_42_26%20AM.png)
Figure 1.4
2) Database Integration / CRUD Operations (Firebase):
Note: The Read and Update operations are closely connected within the flow. Therefore, some steps and screenshots may be repeated between these sections to clearly demonstrate the continuous process of viewing and modifying an order.
Create - Create a new order
For create, I created a collection for cart and key in the field name and data type.
Figure 1.5
After the collection is done, I created a beverage details page that displays the details of the beverages after users choose the beverage they want to order and customise their beverages based on the ice level, sugar level and toppings.
Figure 1.6
There will be an Add to Cart and Place Order button where the order data will be sent to the Firebase to be stored when users click it.
Figure 1.7
- Read - View the list of orders
Figure 1.8
Users can change the quantity of beverages using the - and + button. To make it work, the buttons need to have the update page state action then add a field which is the quantity integer, select the update type as increment/decrement and insert the value. Minus button is -1 and plus button is 1.
Figure 1.9
1) Placing texts and setting variables for the texts according to their respective categories. Drink name, Price and Quantity. This setup lets user’s orders store a record in Firebase and also let users read their orders in the cart page.
2) Price changes as users change the drink quantity.
3) The quantity of drinks changes when users click on the - and + buttons.
Figure 1.10
After users click the Add to Cart button, they are directed to the cart page. The cart page retrieves the order data stored in Firestore and displays the user's selected drink name, price, quantity and customisation options. This allows users to view and check their existing order before making further changes.
Figure 1.11
Update - Edit an existing drink's information
In the cart page, there is an edit icon button which allows users to be directed back to the beverage details page to modify their choices. An action is assigned for the button to navigate back to the drink details page.
Figure 1.12
Users can change the quantity of beverages using the - and + button. To make it work, the buttons need to have the update page state action then add a field which is the quantity integer, select the update type as increment/decrement and insert the value. Minus button is -1 and plus button is 1.
1) Price changes as users change the drink quantity.
2) The quantity of drinks changes when users click on the - and + buttons.
For the add to cart button in the drink details page, there are 2 conditional actions. For updating the beverage order, it uses TRUE = Update document and the cart collection is selected as the reference to update. Next, I added the fields that need to be updated which are quantity, ice level, sugar level, toppings and price.
This shows the overall process of modifying an existing order. After users click the edit icon, they can reselect their customisation options and quantity. When the Add to Cart button is clicked again, the existing order document in Firestore is updated with the new selections.
.jpg)
Figure 1.16
Delete - Cancel or delete an order
For delete, I assigned the backend call delete document action for the trashcan icon button, the order in cart page will be deleted when users click on it.
Figure 1.17
This is the overall look of when orders are deleted when users click on the trashcan icon button.
Figure 1.18
Once an order is deleted, the corresponding document is also removed from the Firestore cart collection.
Figure 1.19
SUBMISSION
-
Comments
Post a Comment