This week, we explored the fundamentals of Interface and Application Programming by designing a mobile application capable of communicating with an ESP32 microcontroller. Through this assignment, we learned how to create graphical user interfaces, implement Bluetooth communication, and connect digital interactions with physical devices, opening new possibilities for our final project development.
For this week's assignment, we first defined the functionality that we wanted our application to have. Thinking about our final project, we are interested in combining architecture with an interactive lighting system that can be controlled through a mobile application. The main objective of this exercise was to develop an app capable of remotely controlling a set of LEDs through a simple interface, allowing the user to activate the lighting system directly from a smartphone.
To develop the application, we selected MIT App Inventor, a free and accessible online platform for mobile app development. Since application programming is outside our professional background, we found this software particularly useful because of its intuitive interface and educational approach. The platform allows users to design, test, and program applications directly through a web browser while supporting different screen sizes and mobile devices.
App Inventor also provides a flexible environment for developing a custom graphical interface. We were able to modify colors, typography, labels, buttons, and graphic elements according to the visual identity of the application. This allowed us to create a simple and functional interface adapted to the needs of the project.
To create the application, we first selected the target device, in this case an Android smartphone. We then added the required interface elements, including buttons, text labels, and graphic components, by simply dragging and positioning them on the workspace. This process made it possible to rapidly prototype the graphical user interface before moving to the programming stage.
For the programming stage, MIT App Inventor uses a visual block-based programming environment. Instead of writing code manually, logic is created by connecting functional blocks. In our case, we programmed the application to establish a Bluetooth connection with the ESP32 and send commands when the user presses the control button.
Once the mobile interface was completed, we programmed the ESP32 to receive Bluetooth commands from the application. When the main button is activated, the microcontroller executes a sequence in which three LEDs turn on consecutively, remaining active for approximately three seconds each. This communication workflow is similar to what we plan to implement in our final project, where lighting elements will respond to commands generated from a mobile application.
Finally, we installed the application on an Android smartphone, connected the electronic circuit, established the Bluetooth connection, and tested the complete system to verify the communication between the mobile application and the ESP32.
Conclusions
This assignment introduced us to the process of mobile application development, an area that was completely new to me. Beyond the programming aspect, I particularly enjoyed designing the graphical interface and defining the visual identity of the application. The experience demonstrated how user interaction, interface design, and electronics can be integrated into a single system.
From my perspective as an architect and architecture teacher, I see significant potential in the use of mobile applications for controlling and interacting with built environments. For example, similar technologies could be applied to wayfinding and navigation systems in complex buildings such as hospitals, universities, or transportation hubs, where digital interfaces could help users navigate spaces more efficiently while interacting with smart architectural elements.
