Arduino management interface using React
Prod'hom, Loïc (2020)
Prod'hom, Loïc
2020
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2020052613662
https://urn.fi/URN:NBN:fi:amk-2020052613662
Tiivistelmä
The objective of this thesis is to develop a web interface to manage and control Arduino
devices. This project is commissioned by my former employer, the Geneva School of Business Administration, and aims to deliver a user-friendly interface that could potentially be
used in lectures.
The thesis is structured into two main parts:
The first part is largely theoretical and lays the groundwork to understanding the key concepts of this project, as well as the technology used for communication: the MQTT protocol.
A subchapter is dedicated to describing the MQTT protocol in detail, as well as its key components: the broker, the publisher and the subscriber. The last subchapter of that section
explains why exploration of an Arduino-hosted RESTful architecture was ultimately discontinued for this project in favour of the lightweight MQTT protocol.
The second part follows the practical implementation of the project, beginning with the creation of the data structure on the Arduinos and the early mock-ups of the user interface. It
then details the implementation of the Mosca broker, followed by implementation of a JavaScript publisher for testing purposes, as well as implementation of an Express API to link
front-end to the broker, and finally of the implementation of the React interface itself.
This application is complete, and its source code can be found on the provided GitHub repositories (see Appendix 1). This thesis document has been written in a didactic style to
help anyone looking for a way to manage such devices for their own projects, or simply
looking to implement MQTT communication for their React applications in an environment
with limited bandwidth.
devices. This project is commissioned by my former employer, the Geneva School of Business Administration, and aims to deliver a user-friendly interface that could potentially be
used in lectures.
The thesis is structured into two main parts:
The first part is largely theoretical and lays the groundwork to understanding the key concepts of this project, as well as the technology used for communication: the MQTT protocol.
A subchapter is dedicated to describing the MQTT protocol in detail, as well as its key components: the broker, the publisher and the subscriber. The last subchapter of that section
explains why exploration of an Arduino-hosted RESTful architecture was ultimately discontinued for this project in favour of the lightweight MQTT protocol.
The second part follows the practical implementation of the project, beginning with the creation of the data structure on the Arduinos and the early mock-ups of the user interface. It
then details the implementation of the Mosca broker, followed by implementation of a JavaScript publisher for testing purposes, as well as implementation of an Express API to link
front-end to the broker, and finally of the implementation of the React interface itself.
This application is complete, and its source code can be found on the provided GitHub repositories (see Appendix 1). This thesis document has been written in a didactic style to
help anyone looking for a way to manage such devices for their own projects, or simply
looking to implement MQTT communication for their React applications in an environment
with limited bandwidth.