Automatización del hogar mediante el portal cautivo: 9 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:42

Aquí, crearemos un proyecto muy interesante de automatización del hogar basado en el portal cautivo utilizando nodeMCU desde cero. Entonces, comencemos.

Paso 1: Declaraciones iniciales

Declare los pines IO de nodeMCU para realizar acciones, archivos de encabezado y código para crear un servidor DNS … mostrado en la imagen …

Paso 2: Código HTML para el front-end, es decir. Página de inicio de sesión

Como se muestra en la imagen, declare el código html dentro de una variable de cadena que enviamos al usuario final para la validación del código de acceso.

* Para capturar los datos ingresados por el usuario aquí, estamos usando el panel de anclaje y la etiqueta href

* Básicamente, la etiqueta Anchor se usa para agregar otra página web dentro de la página web y la etiqueta href define el destino del enlace.

* Pero, aquí estamos recibiendo los datos ingresados por el usuario dentro del campo Código de acceso a través de Anchor Pane y etiqueta href …

cómo, mencionaré dos métodos para captar la entrada de la interfaz web hasta el final de nuestros programadores.

Paso 3: Uso de los métodos WebServer.arg () y WebServer.on ()

Como mencioné en el paso anterior, les diré dos métodos diferentes.

1) Utilizando el método webServer.arg ():

Aquí, especificamos el atributo de enfoque automático junto con el elemento como se muestra en la imagen, lo que hace el enfoque automático es que es un atributo booleano cuando es verdadero significa presente, asegura que el elemento de entrada se enfoque cuando se carga la página.

y luego, llamamos al método args () en el objeto del servidor. Este método devolverá el número de parámetros de consulta que se pasaron en HTTP y aplicará declaraciones condicionales para realizar acciones en consecuencia.

2) Mediante el uso de un atributo href:

Aquí, especificamos nuestros elementos de control (como botones) dentro y asignamos una cadena, carácter, enlace que desea validar usando declaraciones condicionales y luego llamamos webServer.on () para recibir la entrada para la validación.

Como se muestra..

Paso 4: Si el usuario escribe credenciales incorrectas

Lo que hice, simplemente cambie el código de la página de inicio de sesión existente y agregue un nuevo encabezado informando que el usuario ingresó una credencial incorrecta.

Primero, valide la credencial si es incorrecta, dirija al usuario a la nueva página de inicio de sesión editada que muestra un mensaje de error.

Como se muestra..

Paso 5: Cómo agregar una imagen a su página web …

Es muy simple, porque aquí no estamos almacenando nuestras imágenes en un almacenamiento físico por lo que proporcionamos una ruta para buscar esa imagen que solemos hacer en el caso de una página html.

así que lo que hacemos es simplemente convertir nuestras imágenes a base64 y pegarlas en el código de nuestra página como se muestra.

Paso 6: Qué componentes necesitamos …

1) - nodeMCU

2) - Arduino IDE para flashear nodeMCU

3) -cables de puente (F-2-F)

4) -Módulo de relé

5) -Un teléfono inteligente o computadora portátil habilitado para WiFi para probar

Paso 7: Conexiones …

Agregue el módulo de relé a los pines IO declarados en el código.

Conecte el relé a los equipos eléctricos que desee controlar como se muestra en la imagen.

Paso 8: Ahora prueba y disfruta …

Paso 9: El código está aquí …

Por favor escriba sus valiosos comentarios.