Application Design II / Task 3
WEEK5-WEEK7
NAME: JIN RONG
I.D: 0361701
COURSE: Application Design II / Bachelor of Design (Honors) in Creative Media
Application Design II / Task 3
INSTRUCTION
LECTURES
Week 8: Google Map Integration and Debugging
We learned how to integrate Google Maps in FlutterFlow. By adding the
Google Map Widget, we set the zoom level, style, and markers of the map.
Mr. Razif also guided us on how to generate and configure the Maps API key
and solve the problem of map loading errors. This process helped us
understand how the map component connects with the backend data to realize
interactive map functions.
Week 9: Product Page and Shopping Cart Development
We developed the product browsing page, detail page, and "Add to Cart"
function of the e-commerce application. To do this, we created a product
database in Firebase Firestore, set the required fields and collections,
and linked the data with the FlutterFlow front end to dynamically read and
display product content from the database. The implementation of this
function enhanced our understanding of data structure and application
function integration.
flutterflow
Now that Task 2 is complete, we'll move on to the next phase—bringing
these ideas to life.
In this task, I'll create working micro- and macro-interactions, as well
as animated elements for my app. These will move beyond static visual
concepts to real, functional, dynamic assets that can be directly
integrated into the final build.
Love Collection
Purpose: To provide intuitive and engaging visual feedback when users turn
the collection switch on or off, making the operation more responsive and
enjoyable, thereby enhancing the overall user experience.
Visual Innovation: The toggle button uses a smooth sliding animation
accompanied by a color gradient or a subtle bounce effect. When the
collection state is on, the heart icon transitions from wireframe to
solid, with a slight enlargement and rebound effect; when off, the
animation plays in reverse. This design not only allows users to clearly
perceive the state change but also aligns with the app's clean, modern
visual style.
Registration Page
From the login page, users can enter the registration page, where they can
fill in their name, email, phone number, and other information to create a
new account.
During this MVP phase, the registration interface remains clean and
simple, with no micro-animations added to prioritize functionality
stability and ease of use.
When users click the "Register" button, the app will navigate them back to
the login page with a smooth upward slide-up transition. From there, users
can complete the login process using their newly registered email and
password. Clicking the "Login" button will redirect them to the homepage.
This iterative flow simulates the user journey of a real app, from
registration to authentication, and then to the main functional interface,
ensuring a smooth and logical experience.
Next, I set up the backend data structure using Firebase Firestore and
integrated it into FlutterFlow.
I created three main collections: User Accounts, Movie Ticket Orders, and
Theater Seats.
The User Accounts collection stores basic user information, such as email,
UID, display name, and avatar.
The Movie Ticket Orders collection records information about movie tickets
purchased by users, including the movie title, theater, showtime, selected
seat list, price per seat, quantity, and total order value.
The Theater Seats collection stores the seating layout and occupancy
status for each show, allowing for real-time updates of sold and available
seats.
These structured collections enable the app to implement features such as
account login and management, real-time seat locking, and ticket price
calculation, ensuring a smooth ticket purchase process and supporting a
scalable experience.
REFLECTIONS
During this phase, I not only completed the data structure construction
and integration of Firebase Firestore, but also implemented the front-end
and back-end connection in FlutterFlow.
This step truly made me realize that "data structure" doesn't exist in
isolation; it must be closely integrated with interface interactions and
user operations to form a complete functional closed loop.
In FlutterFlow, I set up data binding and dynamic display for three
collections: User Account, Movie Ticket Orders, and Theater Seats. For
example:
Upon account login, the user's account information is automatically
retrieved and displayed in the profile;
When selecting a movie and showtime, the seat status is read from the
Theater Seats collection in real time and dynamically updated in the UI;
When submitting an order, the user's selected seat and the calculated
ticket price are written to the Movie Ticket Orders collection and
immediately reflected in the database.
Throughout the process, I encountered issues such as incorrect data
reference paths and ineffective field binding. However, through continuous
debugging and documentation, I gradually mastered FlutterFlow's data
binding logic and Firestore's dynamic query methods.
This made me realize that only by maintaining a consistent design approach
across the front-end and back-end can we avoid repeated revisions and
improve development efficiency.
评论
发表评论