Eric Spencer

projects

 _____      _        ____
| ____|_ __(_) ___  / ___| _ __   ___ _ __   ___ ___ _ __
|  _| | '__| |/ __| \___ \| '_ \ / _ \ '_ \ / __/ _ \ '__|
| |___| |  | | (__   ___) | |_) |  __/ | | | (_|  __/ |
|_____|_|  |_|\___| |____/| .__/ \___|_| |_|\___\___|_|
                          |_|                             

---

← back to index

COMP322 Final Project Reflection

COMP322 final-project reflection.

---

Eric Spencer + Matthew Caballero December 14, 2024 COMP 322/422 Reflection

Reflections on HealthUp!

Abstract

HealthUp! is an application for improving a user's information about their own health. Users can log the nutritional information of foods and track their workouts.

Repository (without keys)

GitHub Repository

The iOS version of the app does not work. Before downloading and running the app, see the bolded text in "Testing & Iterative Design."

• Mid-project demo: YouTube Short
• Final-project demo: YouTube Short

[Repeated Links:] GitHub Repository Mid-Project Demo Final-Project Demo

Final Presentation

C322 Fit Slides

Table of Contents

1. Title & Abstract
2. Table of Contents
3. Project Participants
4. Project Narrative

• Original Project Idea
• Inspiration

1. Initial UI Concepts

• Navigation Hierarchy

1. Design Specifications
2. Testing & Iterative Design
3. Screenshots Throughout Development
4. Roadblocks
5. Conclusion

Presentation Slides

Team

Eric Spencer

• Commits: 82
• Additions: 58,800
• Deletions: 38,916

Main contributions:

• NutritionScreen.js
• Barcode Scanner
• API usages

Also worked on:

• Presentations
• Npm dependencies
• Getting the app to compile with npm dependencies
• User Context
• FitnessScreen.js
• HomeScreen.js
• MainTabs.js (removed)
• NutritionScreen.js
• JournalScreen.js
• User.js (not used)
• UserContext.js
• UserInfoScreen.js
• UserSettingsScreen.js (removed)

Matthew Caballero

• Commits: 22
• Additions: 2,466
• Deletions: 526

Main contributions:

• CurrentWorkoutScreen.js
• UserSettingsScreen.js
• WorkoutDiary.js
• Firebase integration
• UI layout design & implementation

Also worked on:

• Presentations
• Npm dependencies
• Exercises transferring between screens

Project Narrative

The goal is to simplify the experience of people trying to improve their physical health. A macronutrient tracker records what a user eats. Barcodes can be scanned with the camera to retrieve nutritional information for a product, which is then added to the tracker. A workout diary keeps track of sets and reps for each exercise, and a workout can be created from a list of recommended exercises.

Original project idea

A user signs in with an email address and is assigned a UserID. Any action performed in the app is correlated with that user in the Firebase database, so the data exists across different logins on different devices. After signing in, the user is met with three options: Nutrition, Workouts, and Journal. The first two write to the third. Adding a workout or a food entry updates the journal, where the user tracks it. The user is meant to see the email address they are signed in as. Each screen offers its own set of actions.

Inspiration

MyFitnessPal requires a subscription to use the barcode feature; HealthUp! makes it free. Matt had ideas for a workout app, and the two ideas were combined into HealthUp!

Initial UI concepts

Navigation hierarchy

[Insert Navigation Hierarchy image here]

Design specifications

• WelcomeScreen.js shows the title of the app and navigates to the sign in screen.
• SignInScreen.js handles log in and sign up, and navigates to the home screen after a successful login.
• HomeScreen.js contains navigation options to the nutrition, workout, journal, and profile screens.
• NutritionScreen.js and /Barcode search for a specific food. A button logs the time and nutrients of that food to the journal. A barcode can be scanned instead, which searches for the food automatically.
• WorkoutScreen.js in /WorkoutDiary searches for workouts from the fitness screen, or takes entries typed in directly. Once the list exists, an in-app timer runs the workout, and CurrentWorkoutScreen.js switches between workouts.
• FitnessScreen.js searches for exercises by muscle type, for a user who is having trouble finding exercises to do.
• JournalScreen.js displays logged workouts and nutrition. It represents most of the user's data in the database.
• UserInfoScreen.js, the profile screen, shows account information such as username, email, and weight.

Additional note: Outside the welcome and login screens, the color scheme stays consistent and minimal, which keeps attention on logging nutrition and exercises rather than on bright colors.

Testing & iterative design

This section covers the main branch of the repository. Tracing the diverging branches, and when they stopped being worked on, would have been too confusing. In one instance the main branch overwrote the preceding branch because of bad Android and iOS files that differed significantly from an original "npm init app" setup. In early October the branch was replaced with a new repo, while the barcode_working branch retains the original commit history.

An earlier personal app project, which included mentions of "dailyTask", was later overwritten. Most commits were attempts to get the app to compile on the emulator, which was difficult. Real development began on October 4 with the creation of "comp322application."

The barcode functionality came first, which turned out to be a mistake for several reasons. The npm installations did not cooperate when several packages were managed at once, likely because of the system configuration. About a month and a half went into debugging Android and iOS files instead of JavaScript. After Thanksgiving, progress on the problematic branch was abandoned and work restarted on the working branch.

Technical changes:

• gradle.properties: added VisionCamera_enableCodeScanner=true
• AndroidManifest.xml: added the Android permissions for Camera and Record_audio, the latter being optional
• Changed generated files in workspace.xml, deviceStreaming.xml, and vcs.xml, which may have contributed to build errors
• Integrated a working BarcodeScanner.js, not just a simulated "type a barcode in" functionality
• Added react-native-vision-camera to package.json

Subsequent commits were purely changes in JavaScript. The development process amounted to three months of light work and one week of intense progress, and npm package problems tended to resolve at the very last minute.

The last working version on the main branch is just before the barcode functionality was implemented. Commit "12117df" compiles correctly, while commit "f2c2812" fails. The workaround was to pull the first commit, compile the app, then pull again and refresh the JavaScript.

After commit "f2c2812," the changes were:

• Updating gradle.properties with VisionCamera_enableCodeScanner=true
• Adding the necessary permissions to AndroidManifest.xml
• Modifying generated configuration files
• Integrating a functional BarcodeScanner.js
• Adding react-native-vision-camera to the package dependencies

Later commits continue the app's development. Recurring problems included git errors, such as accidentally pushing node modules, and refreshing the JavaScript on the emulator.

Roadblocks

• JournalScreen.js was supposed to have better data representation.
• The timer was intended to support custom time input.
• A custom workout list, letting users select from lists such as arms day or legs day, was planned but not completed.
• User Settings could have displayed more data.
• There is no way to stay signed into the app; a login is required each time.
• The only way to sign out of the app is to restart it.
• MainTabs, which allowed users to remain on one screen after logging in, was removed because of an npm package dependency.
• Barcode functionality depends on the data available in Nutritionix's database. A barcode on a European candy did not register.
• Logging weight and height in User Settings, to derive a more accurate DV% in NutritionScreen by applying a multiplier to the API call, was intended but not built.

Conclusion

The project was a way to learn React Native development in an academic environment, along with project management and meeting tight deadlines. A more refined timeline and more effort on design and user experience would have been beneficial. The delivered app works and fulfilled about 95% of the original vision.