This week I worked on connecting the Jetson to the web app, as well as finishing one page of the front end for the demo. I finished writing the server code for the Jetson and constructed json data to send from the jetson to the server, and then to the front end. However, I encountered several different issues with it. One of the first issues that I noticed was that when trying to console.log the returned json on the front end, the only thing that was printing was “undefined”. I wasn’t sure whether the issue was with the fetch request from the front end, or if it was from the backend, so I temporarily took out the server in the middle, and just tried to fetch the json data from the jetson to the front end directly. When that didn’t work, I tried just making curl requests to the jetson’s server directly and pinging it to make sure that I was able to get a response. This still did not work for me, so I asked my team members to try connecting to the jetson’s server using the url aswell. When they were able to easily connect, I realized that the problem was probably with my laptop. After some initial research, I had to go into my firewall and allow for connections specifically for the jetson’s ip address, as well as the port that it was running on, which allowed me to successfully curl the data from the jetson, but still gave a “cors no-access-allowed” error when trying to retrieve data from the front end. This required me to enable cors, which added in the correct Access-Control-Allow-Origin header to allow my app to make cross-origin requests. Once there were no errors showing up in console, I still saw that the recieved json response was still empty, so I printed out the json response that the jetson was sending the server, and saw that when the server first starts, it recieves the correct json response from the jetson, but any subsequent calls would just be empty. I realized that this was because of the way that I was calling my fetchData function, so I changed my server.js logic so that the fetchData function would be called within app.get, which allowed for the correct data to be fetched everytime I made a fetch request from the front end, and also turned the app.get function into an async function so that it waits for a response from the jetson.
Once I was able to get the communication between the jetson and the app working, I wrote code within my app to take the json responses and rearrange it in formats that made it easily accessible when trying to use the data from graphs. I created new context for weekly data and daily data and passed it into the chart component that I had already made, allowing for the data to be displayed correctly.
I think that I am pretty much on track for my schedule. The only thing left I would like to do before the demo is to actually pass in real data from the cv instead of stubbed data, which I am planning on working on tomorrow. I also think that improvements can be made on the page so that it looks prettier and more cohesive, but I think that is something that I can work on within the last few weeks of the project once everything else has been settled. One thing that I’m concerned about is that since we have yet to implement the weight sensor, the current data computations are being made with just the number of items being processed. I’m fairly certain that once we do have the weight sensor working, it won’t be too hard to integrate that into the existing code, but it might be a little unpredictable.
At the end of tomorrow, I want to be able to send real data from the jetson to the front end. In the following week, I also want to be able to finish the page of the web app where users can look for recycling facts and tips.
For verification, I plan to first write unit test cases for all of the components within my app, such as the graph, the buttons, and the fetchData function, the buttons, and the different context being created. The unit test cases are mostly to make sure that everything that is supposed to show up on the screen are showing up 100% of the time, and that inputs to those components are being correctly reflected. These test cases should be passing 100% of the time. Afterwards, I will write interaction test cases for the fetchData functions and the context, as well as the context and the graphs, showing how data being passed into one component will correctly display in another component that it’s been connected to. Finally, I will implement full testing of the app, from opening and loading it, as well as fetching data when necessary, with different users and asking them about ease of use, and how the app looks so that I can make improvements based on other sources.