Resources + Ideas Thread for Command

[HyunjoonJeon]

The command subsystem, which is connected to the control subsystem, allows users to control the rover remotely through a web browser or an app. This thread is used for recording the process of the command subsystem.

Useful Links:

• Tutorial on how to create a MERN stack: https://medium.com/swlh/how-to-create-your-first-mern-mongodb-express-js-react-js-and-node-js-stack-7e8b20463e66
• Detailed API reference for the React component class definition: https://reactjs.org/docs/react-component.html
• Tutorial on how to create a web server in node.js with the http protocol: https://www.digitalocean.com/community/tutorials/how-to-create-a-web-server-in-node-js-with-the-http-module

Functional Requirements

To be updated as time goes

• [ ] Create a web or mobile dashboard to control the rover remotely and receive information from the different subsystems.
• [ ] A web application using node js and mongodb as backend and react js as frontend to communicated with the rover.

[HyunjoonJeon]

Project Log 14/5

Spent around 2 hours reading about the HTTP protocol which allows communication between the web server and the web browser: Clients connect to the server, make a request and wait for a response from the server. The HTTP protocol is a stateless protocol, meaning that the server does not store any state or data between requests. HTTP requires reliable connection where data does not get randomly lost so usually TCP/IP is used as the transport layer protocol.

HTTP request methods

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

• GET: The GET method requests a representation of the specified resource. Requests using GET should only retrieve data.
• HEAD: The HEAD method asks for a response identical to that of a GET request, but without the response body.
• POST: The POST method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server.
• PUT: The PUT method replaces all current representations of the target resource with the request payload.
• DELETE: The DELETE method deletes the specified resource.
• CONNECT: The CONNECT method establishes a tunnel to the server identified by the target resource.
• OPTIONS: The OPTIONS method is used to describe the communication options for the target resource.
• TRACE: The TRACE method performs a message loop-back test along the path to the target resource.
• PATCH: The PATCH method is used to apply partial modifications to a resource.

HTTP response status codes

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

• Informational responses 100-199
• Successful responses 200-299
• Redirects 300-399
• Client errors 400-499
• Server errors 500-599

[HyunjoonJeon]

Project log 17/5

Spent an hour reading on how a web server can be created with ESP32 and a website using HTML and CSS: https://electropeak.com/learn/create-a-web-server-w-esp32/ 1-2 hours on getting familiarised with the HTML commands. The commands are well organised in this sheet: https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf A meeting with the group has led to the conclusion that ESP32 has a lot to handle on its own so having a separate web server which can communicate with ESP32 over the HTTP protocol would be a better idea.

[HyunjoonJeon]

Project log 18/5

Spent 1-2 hours to create and understand a basic web server written in Node.js which communicates with the website i.e. respond to an HTTP request. The server has two main objects: req and res. The req object is used when someone makes a request from the website and the res object is used to send data back to the website. The web server sets the HTTP response status code (200 means that the request succeeded) and sends data back to the web browser. It is important to note that the data has to be in string so JSON.stringify() function is used to convert the object data format into string.

Spent 1-2 hours looking at the React app code given by Georgios to check the structure of a web application written in nodejs and react. The website has components as an object with a state. A detailed API reference for the React component class can be found here: https://reactjs.org/docs/react-component.html