Week 13-Week 14
ZHANG HANYUAN(0363727)
Application Design 2 | BDCM | Taylor's University
Final
INSTRUCTION
Create the container. Click ‘Create New’ on the official FlutterFlow website and select a blank project.
Project Name: GSCMovies app
Firebase Configuration: Need storage, must connect to Firebase (Google's backend database). Enable Firestore Database and Storage (for storing images) according to the doc and youtube instructions given by Mr Rafiz.
2.UI Layout
At the heart of FlutterFlow is the Widget Tree. The process of building a page involves dragging the components on the left to the mobile canvas in the middle.It's like building blocks.
3.Add pictures
You need to download the images you need, then transfer them to Media Assets, and then put the URL of the image you need on each page.
4.Backend Data Binding
If you think of Firebase as a ‘warehouse’, then Backend Query is the ‘mover’. It's only when you move the data from the warehouse to the building blocks (UI components) that the app actually runs.
This section is the key to transforming the app from a ‘static drawing’ to a ‘dynamic application’. To make your blog post logic smoother, we can combine Firebase's data structure design with FlutterFlow's front-end binding depth.
Before binding, we need to make sure that the data format (Schema) has been built in Firebase.
Once you're done, you'll see that you've only drawn one Article Card, but in Test Mode, the app automatically clones and lists 10, 20, or more articles based on the number of articles in the Firebase database.
5. Pages and structure
I created a total of 22 pages
6.Final Result
A link to the web page has been generated and Mr Razif has been set up as the editor.
The page that comes up after a successful click on the link
Reflection
At first, I thought that as long as the UI was pretty, it would be fine, but when I really started to tune the Firebase database, I encountered a huge challenge. Faced with multiple collections such as gscmovie-app, users, etc., how to achieve real-time and accurate Atomic Increment calculation of the shopping cart amount after clicking the ‘Add’ button is not just a simple matter of clicking the button, but also involves the logic of building the app state management. It's not just about clicking a button, it's about building the logic of App State. From Design Freedom to Framework Constraints In Figma, I can place any pixel I want, but in the initial stage of FlutterFlow, I found that the official NavBar could not directly reproduce my design. I found that the official NavBar couldn't directly reproduce my design. I was frustrated by this tool's limitation of creative moments. Layouts that were perfect in the web preview were often overflowing or misaligned in the live simulation. The countless fine-tuning of parameters to achieve a silky-smooth switch between a movie poster and a ticketing page made me realise the importance of responsive design in cross-platform applications. I learned how to build a film ticketing application that is both aesthetically pleasing and commercially logical. In the future, I plan to further introduce API integration and try to access real payment interfaces, so that this work can go from a demo to a real production environment.
Comments
Post a Comment