Now that we have seen the interfaces between the different layers of the web development stack, we can visualize the overall architecture of the system:

We can now see a high-level overview of all the components discussed so far. The interfaces between each layer discussed in the previous sections are now represented by the boundaries between each block in the diagram (Public APIs, STDOUT, and Database queries). The system will work as follows:

• The server application running on the Raspberry Pi interfaces with the rest of the components.
• It starts the program to get sensor values from the Pi and reads its output through STDOUT.
• Every time the server application receives a new value, it stores it in memory as well as in the database. The in-memory value is replaced every time a new value is received from the sensor.
• The client views and interacts with the application by calling APIs exposed by the server:
  • The API to get the current value returns the value that is currently stored in the memory of the server application
  • The API to get historical values has the server query the database and return its results