{"id":74,"date":"2022-05-09T22:52:27","date_gmt":"2022-05-09T22:52:27","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/zhaom\/?p=74"},"modified":"2022-05-11T22:19:49","modified_gmt":"2022-05-11T22:19:49","slug":"cs-467-_week-7","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/zhaom\/2022\/05\/09\/cs-467-_week-7\/","title":{"rendered":"CS 467 _Week 7"},"content":{"rendered":"\n

Welcome to week 7 of my capstone project at OSU. Let\u2019s recap on our progress in building the UI for the Citizen Science app. We have talked about 6 screens for the mobile app, which means I have 3 more screens to blog about. In week 4, I blogged about the Registration screen and Login screen. Week 5\u2019s blog talked about the Landing screen and the Join Project screen. Last week (6) was about the Project Explanation and Manage Observations Screen. Let\u2019s finish up with the last 3 UIs for our mobile app.\u00a0<\/p>\n\n\n\n

Since we are not limiting the number of observation questions that the teacher would like their students to submit on the mobile app, our team decided to add the DisplayLabelsScreen to focus on displaying the questions and data type of the current project. This updated design made the Project Explanation screen cleaner as the UI focused on displaying the project\u2019s image, project name, project description, \u201cRead Project Requirements\u201d button, and \u201cManage Observations\u201d button. Clicking on the Read Project Requirements button routes user to the project questions screen. This screen consists of an app bar, a scrollable linear array of the List Tile widget as the primary content of the scaffold, and a floating action button. The app bar has the icon button with the back arrow that pops the user back to the Project Explanation screen when pressed. We used the ListTile to display each of the current project\u2019s questions as the primary content of the list tile (title), and the question type as additional content (subtitle). We added padding on all sides and used the material design divider between the list tiles to visually differentiate each of the questions and their associate question types. We added the \u201cManage Observations\u201d floating button to make it easier for the user to start working on their observations. Without this button on this screen, the user would need to go back to the Project Explanation screen and click on the \u201cManage Observations\u201d button there. <\/p>\n\n\n\n

The user can access the Add Observation screen by clicking on the Add Observation button on the Manage Observations screen. The focus of the Add Observation screen is to prompt the user to enter and submit their observations for the project. In other words, the screen displays the question and provides an appropriate input field to capture the user\u2019s entry, and a submit button. We used the Form class to group multiple form field widgets [1]. We used the SingleChildScrollView so that the form can be scrolled vertically so that we can make sure all of the questions and input fields are being displayed in single-column format. We designed the UI to look like a card with the rounded upper left and upper right corners. We simplified the screen without the app bar and placed the close icon that allows the user to close the Add Observation screen if they want to exit out or discard their inputs. We set the screen\u2019s background to our theme\u2019s background color (turquoise) so we can emphasize the white-colored card. Our minimum viable product did not include a save button. The Add Observation card displays the text \u201cAdd Observation\u201d and the eyes emoji at the top of our container. We show the current project\u2019s name so that the user doesn\u2019t have to remember which project they are working on. The Submit Fuschia-colored button is located at the bottom of the form. Clicking the submit button writes the user\u2019s input data to our project\u2019s Firestore data collection named \u2018observations\u2019. Upon successful completion, we pop the Add Observation screen off the navigator, which routes the user back to the Mange Observation screen. So that the user can easily add another observation, edit, or delete their existing observations on the project. <\/p>\n\n\n\n

When the user clicks on the blue-colored edit icon on n the observation tile displayed on the Manage Observations screen, it routes the user to the Observation Details screen. The observation details screen has the same layout as the Add Observation screen. We bolded the text \u201cUpdate My Observation\u201d with a sparkle emoji to inform the user that they are about to Update their observation. The Submit button is now the \u201cSubmit Update\u201d Fuschia-colored button located at the bottom of the screen. When the user clicks on the \u201cSubmit Update\u201d button, we use the update() method to merge the data from the updated fields with the existing document data [2].  <\/p>\n\n\n\n

We now have a functional MVP that meets the requirements for a cross-platform mobile app that enables students to collect observations for a Citizen Science project. We kept our UI simple for all of our project\u2019s required screens. There is still some more work to polish the UI, but we are ahead of schedule. Our team is working on one of our stretch goals for the app to support students in taking pictures and uploading pictures with their observations. <\/p>\n\n\n\n

<\/p>\n\n\n\n