Category: Kayla’s Status Reports

This week, I mainly worked on testing for the web app. This includes making api requests for the search, new recipe, and recipe recommendation features and checking the functionality of these apis as well as the latency of these calls as well as providing various ingredient inputs and validating the recipe recommendations that were generated. I also researched how Alena and I would implement the feature where a user selects a recipe within the web app and this recipe gets sent to the glasses and audio output. The approach I am currently looking to use is to set up a server on Alena’s end, running with Flask where this server can serve HTTP requests which will come from the web app when a recipe is selected in the web app. We have not yet implemented this, so that is behind our schedule, but I was able to do the web app testing instead this week so we will work on this feature next week instead of doing testing.

This week I updated the search functionality such that all recipes from the search results will be displayed in the UI in two columns with however many rows are necessary to show all recipes, and the user can scroll through the rows. This involved changing the frontend code as well as the data structure of the recipes so that they can be displayed in the UI in the described format. I also updated the ingredient recommendation algorithm to parse ingredients and isolate just the ingredient name by ignoring measurement terms and other extraneous words such as “fine” and “or.” For example, this would reduce “1 sugar pumpkin, halved from top to bottom, seeds and pulp removed” to “sugar pumpkin.” This change was made because the original algorithm checked that the user-given ingredient was a substring of the recipe ingredient, but that led to false positives where “sugar” would be a substring of the ingredient, but is not the ingredient name, so this parsing will increase the accuracy of the recommendations. I also added a button on each recipe card which the user would be able to click to select that recipe to cook. Next week, I will integrate this feature with Alena so that when a user selects a recipe to cook, the web app sends the recipe information to the glasses and voice commands.

I learned about SQL databases and how to use them. I did not have prior experience using databases, but I was able to learn via youtube tutorials, tech blogs that compare different databases and provide tutorials on how to set up and use them, and specifically the postgreSQL documentation, which helped me integrate the database into this particular web app. I’ve found that researching on the Internet and watching/reading about someone else doing it first help me learn and use new technologies and concepts.

Code

Search feature

This past week I finished implementing APIs in the web app backend which are called from the frontend to access the database to search and add recipes. I also created a “New Recipe” form to the UI which the user can fill out to upload a new recipe to the database and added routing between the web app home page and the page with this new recipe form. I also set up a local PostgreSQL database instance and wrote code in the web scrapers and the backend APIs to create tables and add and retrieve recipe data from a PostgreSQL database. I also worked with Alena to integrate the web app with the voice commands and audio output by setting up APIs and using a Python interface within Alena’s code. This integration allows Alena to send voice command data from the user, such as ingredients, to the web app, and the web app can access the database and relay recipe information to be used in audio output. Next week, I will set up the web app and the database hosted on a Raspberry Pi and finish up the search feature to display search results in the UI.

I will test the web app latency using Chrome DevTools, which collects data such as DNS lookup time, time to first byte, and frontend rendering time in Network, Performance, and Lighthouse categories. The measurements collected by Chrome DevTools will allow us to verify the web app latency requirement. Additionally, for the recipe recommendation requirement of 95% or more recipe recommendations consisting only of ingredients explicitly listed by the user, I will include unit tests for the recipe recommendation function. These tests will provide the recommendation function with a list of ingredients and a category and will sift through the recipe recommendations returned to verify this accuracy requirement.

Web app repo

This week I implemented web scraping for a different recipe website, America’s Test Kitchen. We will be scraping recipes from America’s Test Kitchen instead of Allrecipes because the recipe urls for America’s Test Kitchen are all the same except each recipe has a unique number on the end of the url, which allows for automated scraping of every recipe available on the website, whereas this is not possible with Allrecipes. This is a bit behind what I wanted to have, but tomorrow our team will meet to work on integration together, and during the week I will work on storing and retrieving data from the database. I also hope to update the web app UI to use America’s Test Kitchen recipes and implement the search feature. Code will be the deliverable.

The code for web scraping America’s Test Kitchen is here

This week, I gathered 80+ recipe URLs from Allrecipes.com, with at least 20 recipes in each category of breakfast, lunch, dinner, and dessert and completed the code to connect to the database via the AWS VPC endpoint and store and query recipe data. The recipes are stored in four different tables (one for each category), and each row in the table represents a different recipe, with the columns containing recipe details such as ingredients, title, and execution steps. All interactions with the database are done using a PostgreSQL client from the node-postgres module for NodeJS. I also began implementing the UI for the web app using the Material UI react libraries. So far, I’ve only made the visual elements of the UI, with hardcoded recipe cards displayed, and I will begin implementing routing and interactive elements, such as a form for users to add their own recipes, in the UI next week. The progress is back on schedule.

UI demo

Github repo (frontend code is in the client/src/pages directory, backend is in server/index.js)

This week I created a PostgreSQL database in Amazon Relational Database Service and pushed initial code for connecting to the database from the web app backend and putting recipe data into the database. This progress is slightly behind what I hoped to finish this week, as I was hoping to verify that the web app correctly stores data in the database, but I will complete that tomorrow, and I will also finish collecting 80 recipe URLs to web scrape and store the extracted recipe data in the database. Next week, I hope to have completed database querying code and a populated database with at least 80 recipes divided into breakfast, lunch, dinner, and dessert categories. I also hope to implement the recipe recommendation algorithm.

What did you personally accomplish this week on the project?

Last week I implemented web scraping by parsing HTML files retrieved from Allrecipes.com, and I worked on the design report with my team.

Is your progress on schedule or behind? If you are behind, what actions will be taken to catch up to the project schedule?

The progress is on schedule.

What deliverables do you hope to complete in the next week?

Next week, I aim to set up the database and begin storing the web scraped recipes in the database.

This week I began implementing the web scraping and continued researching and planning the web app implementation as a whole. The progress is on schedule so far, and next week I will work more on the design report and continue the web scraping implementation.

Here is the repo for the web app code

This week I fleshed out the design for the web app and set up the project repo with a nodeJS/expressJS backend and a React frontend. The progress is on schedule, and next week’s deliverables will hopefully include some web scraping code.

Web app design diagram

This week I created mockups for the web app UI using the Figma design tool as well as researched implementation options and their details for the different components of the web app, including the database, hosting, and web scraping. My progress is on schedule with the tasks laid out in the Gantt chart, and next week I will work on replicating the UI mockups and setting up AWS hosting infrastructure for the web app, with frontend code as a deliverable.

UI mockups

Web app research notes