Month: May 2022

We are near the end of my capstone project! We have our MVP ready, and I get to enjoy cleaning up our code and testing our Citizen Science mobile app. My teammates are amazing and now I get to do some more styling and I have time to work on our style guide. So I’ve spent the last week standardizing our buttons and interactive elements based on the Material Design guide. With my remaining budgeted time for this project, I’ll look into Material Theming and be supportive to my teammates in finishing the MVP for the website.

I’m less than 2 weeks away from graduating. My younger self would not have believed that I ended up with a CS degree. However, my younger self would be delighted that I’m choosing my own path. I would now tell my younger self that it’s okay to be lost along the way and those lost moments ended up being motivations. I’m grateful that I got to work in healthcare administration, nonprofit boards, public health advisory, health equity strategic planning, and volunteer management. The past decade of experiences and connections led me on international trips in improving health through nutrition. I got to visit villages in Nepal, Indonesia, and the Philippines with healthcare providers and community health champions. It took me three trips to Nepal to understand what it means to empower people halfway around the world. It starts with spending time with the people on the ground and listening to their stories. Through those stories, I get to glean about their interests and aspirations. I remember feeling empowered by the female community volunteers who asked if I can teach them how to use a laptop because of the presentation that we showed at a meeting about the importance of nutrition in pregnancy. She showed me her bag filled with flipcharts, pamphlets, and her own training materials. She told me that she traveled to the city and got all the written materials to teach her village. Sometimes, she had to walk a long distance to teach people. Back then, I wasn’t even good with design and tech tools for education. But I knew I wanted to do something about it because my family has always valued education.

Since 2010, I accepted various volunteering opportunities with the international nonprofit to figure out digital solutions to improve health through nutrition for Nepal, Indonesia, the Philippines, and Guatemala. Along the way, I come to realize that I enjoy coding and I’m fascinated by design. I’ve become more curious about how we can use technology for good, especially tools for community health volunteers and nonprofits to deliver quality and accessible health education. It’s also more than technology, it’s about the people and their communities. So a CS degree is another beginning for me. Now with time and resources on hand, I’m looking into recruiting more talents to join the Global Nutrition Empowerment tech team.

Thank you. Dhan’yavāda. Salamat. Terima Kashih. Gracias.

M: Z

Welcome to week 7 of my capstone project at OSU. Let’s 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’s blog talked about the Landing screen and the Join Project screen. Last week (6) was about the Project Explanation and Manage Observations Screen. Let’s finish up with the last 3 UIs for our mobile app. 

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’s image, project name, project description, “Read Project Requirements” button, and “Manage Observations” 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’s 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 “Manage Observations” 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 “Manage Observations” button there. 

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’s 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’s background to our theme’s 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 “Add Observation” and the eyes emoji at the top of our container. We show the current project’s name so that the user doesn’t 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’s input data to our project’s Firestore data collection named ‘observations’. 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. 

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 “Update My Observation” with a sparkle emoji to inform the user that they are about to Update their observation. The Submit button is now the “Submit Update” Fuschia-colored button located at the bottom of the screen. When the user clicks on the “Submit Update” button, we use the update() method to merge the data from the updated fields with the existing document data [2].  

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’s 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. 

• Resources:
  1. Form class – widgets library – Dart API. 
  2. Add data to Cloud Firestore | Firebase Documentation

Continuing from last week’s post, once the student joined the project successfully by entering the project code that they got from the teacher. The student can view project details by navigating to the Project Explanation screen. In our initial prototype, we intended the Explanation screen to display relevant project information (project name, project description, and observation questions that the teacher wants the student to answer). The design strives for a simple interface; the UI displays relevant project information to help the user understands how her/his observation can contribute to the project. We have our custom Fushia-colored button at the bottom of the screen to prompt the user to start their project observations. Clicking on this button routes the user to the Manage Observation screen. We could route the user to add the Add Observation screen directly. We decided to implement the Manage Observation route. This is because we can group relevant actions that are important to the user, such as adding new observations, editing observations, and deleting an observation on the user’s Mange Observation screen. Our team discussed early on that the entity-relationship between the Student and Observation entities is one-to-many. One student can have multiple observations.

Our app’s Project Explanation Screen shows a Scaffold with an app bar and a body. The app bar shows the home icon (route user to the landing screen), the screen name (inform the user where they are on the app), and a log-out icon. The body of the explanation screen is a container that contained a Listview of widgets. The linear array of widgets includes the close button icon, our custom ExplanationCard widget, and a button widget. The ExplanationCard widget makes it easy for us to style the explanation card, and we can pass the project name and the description of the project to this card’s constructor. We have a button to display the “Manage Observations” as the button title, and it routes the user to the Manage Observations screen when tapped.

The Mange Observations Screen displays all of the observations that the student has submitted on his/her project. The simple app bar is displayed at the top of the Scaffold. In the body of the Scaffold, we wrap the close icon button, our custom explanation card, and our getBody widget in a ListView. To make our screen a bit more stylish, we wrap the ListView in a container so that we can decorate it by rounding the corners for the top left and top right. We can also set the margin on the top so that the container appears like a simple card. We use our custom Explanation card to display the project name so that the students know which project they are managing their observations. The getBody widget returns a StreamBuilder so that our UI can be rebuilt from the latest snapshots of a Stream. This way, we can access our project’s observations collection on Firebase Firestore, and we can query the data by descending date so that the student’s observations are displayed with the most recent submission on top. Our build strategy returns the ListView builder, and we display each of the user’s observation data in our ObservationCard widget in a linear and scrollable array. Our ObservationCard includes a title, subtitle, a blue icon button for editing, and a red icon button for deleting. When the user clicks on the edit icon, it routes the user to the Observation Detail screen. When the user clicks on the delete icon, we have an AlertDialog to confirm the deletion by showing a message “Are you sure you want to delete this observation?” We included a TextButton for “Cancel” and a TextButton for “Yes, Delete.” When the user clicks on the cancel button, we use Navigator.of(context).pop() to route the user back to the Manage Observations screen. If the user clicks on “Yes, Delete” then our onPressed function deletes the observation document from our Project’s Firestore database. We also route the user back to the Manage Observation screen. If the student doesn’t have any observations submitted on the project, we return a Text widget that prompts the student to “Tap the Add Observation button to add a first observation.”

Not too bad right? That is it for this week’s blog. I’ll blog about our Observation Details screen next week then.

M:Z

Resource: 

1. Scaffold class – material library – Dart API 
2. ModalRoute class – widgets library – Dart API 
3. MaterialButton class – material library – Dart API 
4. StreamBuilder class – widgets library – Dart API 
5. https://api.flutter.dev/flutter/dart-async/Stream-class.html 
6. showDialog function – material library – Dart API 
7. AlertDialog class – material library – Dart API