Phoenix LiveView to MQTT to ESP8266
HTML-код
- Опубликовано: 11 ноя 2024
- 6 years in the making, always itching at the back of my mind, guilt tripping me that I should make it. Finally with Phoenix, web framework for #Elixir, all the pieces have come together, just how I would like it.
I bought the led strip around 2014. Bought the #Esp8266 board in 2015. All the other parts were bought in between them. Early in my instagram you saw me play around with led lights, and that was a slow, slow steps towards tonight.
Why was it so slow? Even if I could solve the UI part to be on the web page, I could not even fathom how to go from my local computer to hosting somewhere so I can control it anywhere I am. This is already a step back from the original goal of creating a mobile app, because that is just icing on a cake that needed to be made with ingredients which weren't there. Yet.
Until 2020, my idea and mental roadblock was as follows.
Esp8266 would communicate through MQTT.
Web server would connect the color picker choosing event, convert values, talk to MQTT.
But it has to be a single page app. Sooo React, and then create the simplest web server like NodeJS via Express.
None of that seemed enticing. I mean this is a hobby activity. Do I really want to create a frontend code stack for React, make API calls to a server, which would have to be hosted by itself while frontend is gonna have to be built ans its raw assets deployed? And what about the env vars and the deployment procendure, can it be replicatable? So many hacks all around. Ew.
In the year of coronavirus, 2020, I learned Elixir. And its web framework, Phoenix.
What you saw uses no React. It is fully managed by Phoenic Liveview, which creates a websocket and does DOM diffing on the socket, so users feel as if it is SPA. However it isn't. I used the Pickr library for color picking UI. Then some other buttons. Yup, one code stack. One deployment via a tooling from Elixir. Correct way of splitting dev and prod environment. All of this given as a standard for any Phoenix project.
Phoenix and Elixir makes deployment a breeze. Because of the ease I am using a free tier GCP compute machine to host it in an Ubuntu server.
Also as an aside.. it was fun making a debouncer out of a GenServer! Albeit a rudimentary one.