The UI - the user's first encounter

The user interface (UI) is, quite literally, the part that acts as the interface between our user and our application. It is the only direct point of contact that the user will have with our app (unless they decide to get creative).

Here is a brief summary of what we want our user interface to do:

• Be accessible from a wide variety of devices anywhere in the World (as much as possible)
• Show the user the current temperature and humidity reading
• Show the history of the temperature and humidity for the last week
• Have the ability to view temperature and humidity details for any point in time in the past
• Update the temperature shown to the user as soon as a new reading is obtained

Satisfying the first requirement means that we have to choose a platform to develop, which requires the least effort to access and install. The obvious choice for this is HTML5:

• HTML5 runs on almost any device you can think of: on mobile and tablet browsers, on the desktop, and even on the Raspberry Pi
• It does not require any installation to run our application on a mobile device, unlike the native apps on the app store

Besides being omnipresent, developing on HTML5 and the web has other benefits:

• There is no need to develop for each operating system. You develop once, and it runs everywhere.
• There are tools available to port any app you develop for the web to native mobile applications (such as Cordova: https://cordova.apache.org/) and even desktop applications (such as the Electron framework: https://electron.atom.io/)

The second point requires that we have some sort of access to the temperature reading. In this case, we will leave it to the server (API layer) to provide us with this information (which we will cover in a bit).

The third and fourth point tell us to show a certain amount of historical data, with the option given to the user of changing the time period of the data shown. This means we cannot simply show temperature and humidity readings as and when they come. We have to record them as well. Again, this is not the job of the UI, and we will leave this task for the layers further down the stack. What we should do in this layer is display this information intuitively.

The last point has to do with introducing a real-time component. This can be harder than it seems, as we will see in the next section.