HCI Project

System Introduction The system is an online health and fitness tracking service, that enables users to keep detailed track of their consumption of different kinds of food components: Protein Fat Carbohydrates Energy Water Sugars With these pieces of information, a user can build an informed summary of their consumption of various things, and work towards healthy goals.

Architecture Server Architecture: Rust / Rocket https://rocket.rs/ Web framework for server applications Implements REST API for Database access Done through a lightweight implementation, ORM available but not used Client Architecture: HTML/CSS/Javascript Vue https://vuejs.org/ Component driven architecture Consolidated single file MVC Two way data binding Client side API interactions

Server Functions (1) The full code for the client and server is available online at https://github.com/LLBlumire/uni-hci main begins the web server by launching rocket. HciDataConn establishes the database connection based on a config file entry, shown at the bottom. It also attaches two routes to the API, which are shown on the following slides.

Server Functions (2) The api_foods api is exposed on /foods, and queries the database for the full list of foods available, this is then used to in future query their composition.

Sever Functions (3) api_food_by_id queries the database for a food based on its identifier, which can be found by querying foods. It then returns the full information and composition of the food, filtering to only the contents we care about.

Client Functions (1) The Vue instance is initialized and configured to talk to the router, which is also configured to be aware of each route and its corresponding component object.

Client Functions (2) (App.vue) logout interfaces with the stubbed user functionality by simply unsetting the active user. getDateNumber and getDateFromNumber provide conversions from ISO 8601 date strings to the internal date representation used in javascript, and the format used within the object model.

Client Functions (3) (App.vue) gramExpand converts a food information block with a given number of grams into and a number of grams consumed into a converted version with the total grams/calories consumed. addFoodInfo combines two different food information blocks by adding them together.

Client Functions (4) (App.vue) foodCreateDateTotalConsumption computes the total amount of food consumed on a given date, and populates the data model with it. isLoggedIn is a simply stubbed method to detect if a user is logged in. innerConsumed is used by a watcher to update The totalConsumption model.

Client Functions (5) (App.vue) Watch innerConsumed to update the model with its consumption values whenever food is consumed. Listen for a update-user event to signal modifications to the user model.

Client Functions (6) (FoodInfoBox.vue) Compute food data based on known values, including upscaling based on the number of grams known to have been consumed, as well as hooking into custom input interfaces and providing a sensible unknown default in case of failure states.

Client Functions (7) (FoodInfoBox.vue) Adds new food to the users object model, properly updating values through watchers as it goes, and emitting the final change to bubble up to the top and then be propagated back down to keep all components synchronized.

Client Functions (8) (FoodSearch.vue) foodKeys returns a list of each food. On component creation, all the foods are queried and stored. When a search is resolved, a signal is emitted to then bubble down the updated resolution and display resolved values in a different component.

Client Functions (9) (Home.vue) Synchronises the displayed FoodInfoBox component with the component found by its child search FoodSearch.

Client Functions (10) (Login.vue) When a user logs in, set their log in the user then redirect them to the status page.

Client Functions (11) (Status.vue) Computes and shows the total food consumption, as well as each food entry consumed on any given day.

Client Functions (12) (Submit.vue) Synchronises the selected date, but otherwise dispatches to FoodInfoBox to perform food adding.

Screenshots The home screen provides a quick means of searching for the contents of a food.

Logging in prevents a username and password interface, which for the purposes of prototyping accepts any username and password. Screenshots (2)

Screenshots (3) Once logged in, the user is redirected to the Status page, on which foods can be entered, total food consumption can be tracked for any given day, and food can still be searched, as on the main page which now supports adding food to the current day (to add to previous days, the date picker on the status page must be used)

Screenshots (4) The submit page enables adding an entirely custom food to the system.