Week 4

Code Progress

This past week was filled with coding progress for the Zorzal team! After some initial progress last week with the conversion to a vertical layout, Kristy and Alice have become more comfortable with making larger changes to the web app. 

As a team, we have also become more comfortable with creating local emulators for Google Firebase and a helpful tool called ngrok, an application that allows us to send our localhost to other devices. Firebase emulators allow us to make initial changes to the database, such as changing checkpoint names to Spanish, and ngrok enables us to share locally hosted web apps during development to different devices. These tools allow us to ensure that 1) our changes to the web app are truly mobile compatible on Android and Apple devices, and 2) our changes to the database do not interfere with the way different pages of our web app are linked together.

As for changing the layout of the app, we have converted most of the other pages to follow a similar vertical structure as the Quick Scan pages. 

​First, all of our Forms pages have been converted to better fit a phone screen. Previously, some of the labels over-flowed the text entry box. To solve this issue and to prevent a cramped look, we implemented changes that would move each text entry to be below their labels. 

For the aggregate page, we implemented similar changes and also rearranged elements to make the page easier to use. We reworded and moved the “Create Lot” button to be below the table. This is because each additional box that is added to the lot is listed in the table below the UID. Moving the “Complete Lot” button below the table 1) prevents misclicking the “Complete Lot” button instead of the “Add to Lot”, and 2) makes more intuitive sense. 

 Finally, our team moved the Checkpoint Selector sidebar to the top of the page. This was for two reasons. One, Kristy and Alice had hypothesized that the main reason our web app did not fit on a mobile screen was because of this non-collapsible sidebar – most of the pages fit perfectly within phone screens if you scrolled to the right and hid the sidebar. Two, none of our team members knew how to navigate the web app at first glance – we thought that having one vertical Checkpoint Selector, and one horizontal “sub”-action selector was confusing. Ultimately, we turned the Checkpoint Selector into a scrollable tab, made the font larger, and changed the colors of the selected page to better differentiate the two scrollable tabs. ​