Welcome back to all things vuetiful! This week I worked on the registration of the boards. So here’s how it works. As the user powers up the board and connects it to his or her PC through USB, the board would act as a HID-Keyboard that automatically types out an encrypted payload containing all its meta data, such as board serial number, model name, self generated public key, MAC address, IPv4 and IPv6 addresses.
To actually capture the simulated key presses from the board, the user would first have to specify to the application that it wants to register a new board. There is an “add” button for this purpose:
Once the “add” button is clicked, a textbox area would be prompted, which is where the user would plug in the board and they would see the encrypted payload being typed out.
A newline character is added at the end of the typed out payload, which is like an “Enter” key being pressed to indicate that the board has finished typing. The front end application would then send a POST request to the back end, with the encrypted payload in the request body, where the board’s meta data would be saved to the database. Upon successful creation in the database, the server would respond with a 201 status code as well as the decrypted payload in the response body. When that happens, a snackbar message appears at the top to indicate that the registration was successful, and an image of the board would finally appear under the “Registered Boards” section.
On the other hand, if the server responds with a 4XX or 5XX status code or there were some network issues, an appropriate error message would appear at the top as well.
In future versions, there would be no need for the textbox at all. The application could globally listen to key presses, hence the board should type out some specific key sequences that the application expects as indication that the board registration is taking place. By doing this, the user could just plug in their board, wait for a few seconds or so and the board would automatically register itself with the application.
There is a dropdown for each of the registered boards, to display information of the board like in this case, the model name and its IPv4 address if there’s any.
Although I have not done so, the user should be able to distinguish each of its registered boards by giving it a custom name, as showing the image of the board itself is not enough to tell the difference. Later on, I would need to be able to let the users delete their board when it is no longer in use and also have some indication to determine if the board is up and running, which can be done by pinging to each of the registered boards using their respective IP addresses and check if there is some response.
That concludes the chapter for this week. One thing I learned about front end development is that time should not be spend too much on the layout of the user interface, but rather the functionality should be given the implementation priority. The layout of the user interface would always change, it will never be constant. It is actually difficult to build a front end interface that gives the optimum user experience on first attempt. Therefore, companies like Netflix would often have to implement some variations of the front end interface and have some measurement to determine which variation yields the best user experience. This is how A/B testing is. Since I’m the only one working on this application, I should do what I can to implement the functionalities first then worry about the design and layout, or at least for the first version, have some design that makes sense although not having the most “wow” factor. All in all, functionality is the most important. With this in mind, I hope that it would push me to finish my project by the end of this month. Time management again would play a crucial role in this.
0 Comments