ReactJS Firebase esp8266 Nodemcu Led RGB Frontend

ReactJS con Firebase controlando un Led RGB. Sobre un Nodemcu esp8266 Arduino

Veremos como implementar un pequeño sistema que nos permita manipular/cambiar los colores de nuestro Led RGB conectado a un esp8266 haciendo uso de ReactJS y Firebase Database Realtime para almacenar los estados de cada valor R, G y B.

Necesitamos una placa ESP8266 NodeMCU que podemos conseguir desde este link

Tarjeta de Desarrollo, Nueva Versión ESP8266 NodeMCU Lua CP2102 Internet WiFi Things Development Board Open Source Serial Wireless Module Funciona Muy Bien con Arduino IDE/Micropython

También necesitaremos un led rgb que podemos conseguir aquí

Diodos LED de 3 mm de EDGELEC con parte superior redonda de 29 mm de largo + 100 resistencias (para DC 6 - 13 V) incluidas/bombillas ultrabrillantes con diodo emisor de luz, Classic, [B

También necesitamos una protoboard que podemos conseguir aquí

tresd print tech Protoboard 830 PTS Transparente (2 Piezas)

Antes de iniciar a seguir los pasos, muy seguramente necesiten instalar los drivers para que pueda detectar su placa ESP8266. Les dejo un video en el que explico paso a paso como realizarlo: https://youtu.be/GfiKXFGO0g8

Tenemos que tener instalado nuestro IDE de Arduino, nos vamos a Gestor de librerías e instalamos

Firebase ESP8266 Client

Ahora tenemos que crear un nuevo proyecto, le ponemos el nombre que queramos.

El código completo lo puedes descargar aquí: Proyecto Arduino

La conexión con el wifi la realizamos con el siguiente código:

El SSID y PASSWORDWIFI lo reemplazamos por el nombre de nuestra red wifi y nuestra contraseña de red respectivamente.

El código para conectar con Firebase es el siguiente: Tenemos dos niveles en nuestra base de datos de Firebase que podemos observar con la instrucción de código Firebase.getInt(firebaseData, "/led/b")

Para obtener el link de nuestro proyecto hay que crear un proyecto nuevo(nombre cualquiera) en Firebase, posteriormente nos dirigimos a Realtime Database y ahí creamos una nueva base de datos con el nombre que haga referencia a nuestro sistema react-firebase-esp8266 y le agregamos los dos niveles que tenemos indicados, de la siguiente manera;

Nuestra api key que necesitamos la encontramos en la configuración de nuestro proyecto. La copiamos y la pegamos en nuestro código de nuestro proyecto de Arduino.

La conexión en nuestra placa esp8266 está de la siguiente manera: nuestro led RGB puede ser ánodo común o cátodo común, depende de esto solo tenemos que conectar el segundo pin de izquierda a derecha a tierra o a voltaje según sea el caso, sino sabemos cual tenemos podemos intercambiar a tierra y voltaje para saberlo.

La letra G en la tarjeta significa Tierra. El R va conectado al pin D3, el G al pin D2 y el B al pin D4.

La conexión se ve así:

Hasta aquí ya terminamos de configurar nuestra base de datos y nuestra placa esp8266 junto a nuestro proyecto de Arduino. Si nosotros modificamos manualmente los valores de la base de datos, veremos que el led cambia de color, pero la idea no es cambiar los valores directamente desde la base de datos, sino mas bien de una aplicación web responsiva que pueda accederse desde una computadora o un movil.

Básicamente nuestra aplicación tendrá unos botones en los que se pintarán los valores actuales de cada valor RGB nadamás. También tendrá unos spiners o ranges que permitirán cambiar los valores en la base de datos de Firebase.

Para continuar con el tutorial hay que tener instalado NodeJS y NPM, en Windows sólo hay que instalar NodeJS desde la pagina oficial y nos descargará un instalador y dar siguiente siguiente...

Una vez instalado NodeJS podemos instalar la aplicación de ReacJS con el siguiente comando

Crearemos nuestro proyecto de ReacJS con la aplicación de CLI create-react-app.

Abrimos nuestro IDE Visual Studio Code y abrimos el proyecto creado.

Tendremos una estructura básica de un proyecto en ReactJS. Nosotros crearemos una carpeta llamada components dentro de src/ y en la ruta principal del proyecto colocaremos un nuevo archivo js llamado config.js que contendrá la configuración para hacer la conexión a firebase. Nuestra carpeta de components tendrá todos los componentes necesarios para hacer funcionar nuestra app. Recordemos que ReactJS está orientado a componentes. Cada componente hace una función en especifico.

También tenemos que instalar varias librerías para nuestro proyecto, como bootstrap y firebase

Recomiendo utilizar PowerShell para estos comandos.

Ya tenemos todo lo necesario para poder correr nuestra app.

Abrimos nuestro config.js para poner el código necesario para la conexión con firebase.

Esta configuración la podemos encontrar en:

Ahora pasamos al código de ReactJS

El archivo principal(para nosotros) que nos pintará la interfaz es App.js

Lo editaremos y lo dejaremos como el siguiente

En otras palabras, App.js vendría siendo el componente padre, al que se le agregarán los otros componentes hijos. Vemos que le agregamos el componente <LedList />. Digamos que App.js le pasa el control a dicho componente para que siga con el ciclo de renderizado. En App.js sólo agregamos una navbar y un texto.

Pasamos a <LedList /> que sólo nos trae los valores RGB de la base de datos.

Importamos las librerías necesarias.

Extraemos los valores RGB del path="led" de nuestra base de datos. Los valores nos los regresa en un arreglo es decir, un arreglo con tres posiciones [0],[1],[2]

Los valores recogidos en el arreglo se los pasamos al componente <PintaLeds items={this.state.values}/>

Recibe los valores y se los asigna a r,g,b(son estados locales).

Creamos un método handleCallBack(rr,gg,bb) que nos permita cambiar los valores de r,g,b locales.

Pintamos los botones con los valores actuales recibidos desde el componente anterior.

Ahora usamos el componente <ChangeValues parentCallBack={this.handleCallBack} />

Básicamente le estamos diciendo que le pasamos el método al que accederá para cambiar los valores locales.

Se usa type="set" para indicar que se cambiarán los datos del path="led/" con los valores locales actuales de ValR,ValG,ValB que están cambiando cada vez que se mueve un spiner o range.