APPLICATION DESIGN 2 / TASK 2
╎Gwendalyn Firly Bong / 0374580
╎Bachelor of Design (Honours) in Creative Media
╎Application Design 2 / Task 2
TABLE OF CONTENTS
I. Instructions
II. Lectures
III. Progress
IV. Feedback
V. Reflection
I. INSTRUCTIONS
II. LECTURES
III. PROGRESS
For this task, we were told to create a CRUD (Create, Read, Update, and Delete) process, along with a signup and delete page for our app on Flutterflow.
Because we were still starting to learn this app, I was quite confused about what to do. I decided to try creating the design first using simple widgets, but it ended up creating a lot of errors. After consulting with the teacher, I decided to keep the design simple and focus more on making the app work first.
Figure 1.1: Sign Up Page
I followed the teacher's suggestions and first used a template to create the signup page. I added an extra text field for the name. For the login page, I just duplicated this page and adjusted it accordingly.
Figure 1.2: User Schema
However, because I used a template, there are a lot of elements inside the User schema that I don't understand, and removing them causes a lot of errors. I decided to avoid using templates moving on.
Additionally, I had an issue where upon launching the app, both the signup and login pages wouldn't appear. Turns out, this was because the app already detected me as logged in. To make it work, I added a logout button in the profile page, just to reset the process.
Figure 1.1: Sign Up Page
I followed the teacher's suggestions and first used a template to create the signup page. I added an extra text field for the name. For the login page, I just duplicated this page and adjusted it accordingly.
Figure 1.2: User Schema
Additionally, I had an issue where upon launching the app, both the signup and login pages wouldn't appear. Turns out, this was because the app already detected me as logged in. To make it work, I added a logout button in the profile page, just to reset the process.
Moving on, I started to work on the CRUD process. Since my app is an e-commerce platform, the process revolves around purchasing an item. However, I followed the teacher's suggestions and made a profile page for the Update process. Here are the specific actions:- Create: Choosing a specific item and adding it to the cart.
- Read: The app reads whatever item the user chooses and adds it to the cart/checkout page.
- Update: Updating the user's details on the profile page.
- Delete: Deletes the user's chosen items in the cart page.
- Create: Choosing a specific item and adding it to the cart.
- Read: The app reads whatever item the user chooses and adds it to the cart/checkout page.
- Update: Updating the user's details on the profile page.
- Delete: Deletes the user's chosen items in the cart page.
Figure 1.3: Create
For the Create process, I made a button at the bottom of the specific item's page. I then added a Create Document action and created a new schema.
Figure 1.4: CartItems Schema for Create
Figure 1.5: Read
I used a list view for the Read part, and connected it to the query collection and the schema I had made previously for the Create part.
Figure 1.6: Delete
For the delete part, I just added a delete document action on the X button. I encountered an issue here where, upon launching the app, the section gets deleted, but comes back after a few seconds. To fix this, I just adjusted the permissions for the Delete section in the Firestore rules.
Figure 1.7: Firestore Rules
Lastly, I created a new profile page for the Update process. This part was relatively simple. I duplicated my original Signup page and changed the action to update the document instead of creating a document.
Figure 1.8: Update Profile
Here is the detailed explanation of how the app flow works.
Figure 1.9: Final Document
Figure 1.3: Create
For the Create process, I made a button at the bottom of the specific item's page. I then added a Create Document action and created a new schema.
Figure 1.4: CartItems Schema for Create
Figure 1.5: Read
Figure 1.6: Delete
For the delete part, I just added a delete document action on the X button. I encountered an issue here where, upon launching the app, the section gets deleted, but comes back after a few seconds. To fix this, I just adjusted the permissions for the Delete section in the Firestore rules.
Figure 1.7: Firestore Rules
Lastly, I created a new profile page for the Update process. This part was relatively simple. I duplicated my original Signup page and changed the action to update the document instead of creating a document.
Figure 1.8: Update Profile
Comments
Post a Comment