APPLICATION DESIGN 2 - TASK 2: HYBRID LO-FIDELITY MOBILE APP DEVELOPMENT
13/05/2026 - 19/06/2026 (Week 4 - Week 9)
Madeline Ordelia Tjahjadi (0376920)
Bachelor of Design in Creative Media
Task 2: Hybrid Lo-Fidelity Mobile App Development
Table Of Contents
1. Lectures
2. Instructions
3. Process Work
4. Feedback
5. Reflection
1. Lectures
Week 4
This week we learn how to create firebase integration
Figure 1.1: Firebase integration.
Week 5
This week we learn how to create and update document in Flutterflow, based on
this tutorial given in mytimes.
Figure 1.2: Field created in Firestore schema.
Week 7
After we know how to do create and update, we want to read and delete the
document we create. Based on the tutorial given in Mytimes, below is the
outcome:
Figure 1.3: Read and delete tutorial.
2. Instructions
3. Process Work
The objective of this task is to integrate a CRUD page into our application
and create login and sign-up pages.
First I create the login and sign-up page first. On class we will learn how to
make it work using the firebase.
Figure 3.1: Login page progress.
Figure 3.2: Creating schema in Firebase.
For my CRUD page, the core flow revolves around ticket purchasing. For the
Create, users can purchase a ticket, so they will be choosing the
showtimes date and time. For Read, successfully purchase tickets will
be displayed on a 'My Tickets' page, taking data directly from Firestore.
Since a ticket purchase is a one-time action, updating a ticket doesn't make
sense; instead, I created an 'Edit profile' page for the
Update, allowing users to modify their signup details like name,
phone number, and email. Finally, for Delete, users will have the
ability to cancel or remove their purchased tickets.
For one of my create pages, I use radio button just like the
tutorial. For the select seat, I only make some of the seats works and I use
choice chips. Their mechanism is quite similar so it's easier to use
than button. Similar to showtimes and select seat page, I use
count controller to let user add how many food they want. To make all
the date created and updated in Firestore, I call it in the button before
goes to another page.
Figure 3.3: Radio button used for selection.
Figure 3.4: Choice chips used to select seats.
Figure 3.5: Count controller to add fnb.
Figure 3.6: Action added on button.
To read the data, I added query to the 'Checkout and pay' page
so the text widget can display the newly created data. Not just in this
page, I also added query and page parameter to all of the
Create pages.
Figure 3.7: Added query.
To allow data deletion from the 'My Ticket' page, I created a cancel
button that triggers an action to delete document from the ticket
reference.
Figure 3.8: Cancel button in 'My Ticket' page.
Figure 3.9: Action added in the button.
Lastly, for the Update, users can modify their information on the
'Edit profile' page. This updates the Firestore document with any changes
mode to the data originally created during sign-up.
Figure 3.10: Edit profile page with the action added on the save button.
Below is the PDF of step by step journey from sign-up until the CRUD
operations:
Figure 3.11: Task 2: Hybrid Lo-Fi Mobile App Development (PDF).
4. Feedback
Week 4
I created the log in page and sign up, but I have problem with the color
after I test it. However, my log in The login and sign-up pages are working
perfectly. However, after testing them, I ran into a small issue with the
colors that I need to fix.
Week 5
I fixed the color issue by using my own custom colors instead of
FlutterFlow's defaults, and I also turned off dark mode. I also consulted on
how I'm going to set up the CRUD pages for my cinema app.
Week 7
I have an issue with the document creation process. Whenever I attempt to
create a document, it creates a new row of data instead of updating the
existing one.
Week 8
Fixed the issue by updating the data after I create on the first page.
5. Reflection
Working on this task was incredibly stressful. It is an entirely new application for both us and our lecturer. While it's a good project for learning Firebase integration, implementing it is quite tricky. Along the way, I encountered so many errors and even a problem to test it; I had to rebuild and run the app every time i wanted to test a change, which meant waiting for another five minutes each time. It felt like every time I successfully fixed one feature, a new issue would pop up, which was exhausting.
However, because this task covered the login, sign-up and core CRUD pages, we have cleared the toughest parts before moving on to the next task. After all, once I figured out the workflow and got the initial setup working, building the rest of the pages became easier. In conclusion, working using this app requires a lot of patience, especially for beginners, but once you understand the logic, it becomes quite manageable to use.
Comments
Post a Comment