API Notes:
Here is our Github repo.
We created a RESTful Python api using FastAPI to receive orders from the website and make them available to the ESP8266 on our machine.
The website routes can be seen here.
The reason to create this api is that we needed a way for our website and machine to be able to communicate in an asynchronous way. If the machine is making an order, we do not want it to miss an order if it is placed before the current one finishes.
The main code can be found here, and the tests are located here.
The API was implemented with 2 routes, a home / route and a /order route. The home route is used to display a welcome message. The /order route has two methods that can be called on it: GET and POST. Posting to /order is used by our website to post new orders. Example payloads can be found here. When an order is posted it is checked against our Payload class then stored in our orders order queue. This queue is local and not persistent. The queue ensures that the oldest order to go in is the first one to go out. To retrieve an order a GET request can be sent to /order. This removes the latest item from the queue and sends it as json data. If no orders are present an empty message is sent.
To make future updates simpler our four kinds of ramen flavors and toppings are assigned to a, b, c, and d. If we need to update a flavor in our machine, we can simply change the front end website and leave the current a, b, c, d in the rest of our pipeline the same.
Ordering Website
We decided to build an Order app in ReactJS since most of the team’s learning goals were to learn this specific Javascript framework. We started off with creating simple components that added functionality (like a homepage leading to an order page, and an order page having options to be able to choose certain flavors and options). Once we had some functionality down, we were able to go in and update the UI of the page, revamping the experience for our users. Lastly, we integrated the API that we created to our ‘Submit’ button on our Order app, and we tested the fetch and post methods to our vending machine.
Check out our github repo here.
Website Design
The UI Design was built on Figma. We were able to quickly generate a design and use Figma’s CSS property to quickly build out the UI of our order app.
Links to Github Repos
Noodle Order Handler
Noodle Controller
Cup Noodle React App
Cup Noodle API
