Automação residencial usando portal cativo: 9 etapas

2025 Autor: John Day | [email protected]. Última modificação: 2025-01-23 15:03

Aqui, vamos criar um projeto muito interessante de automação residencial baseada no Captive Portal usando nodeMCU do zero. Então, vamos começar..

Etapa 1: declarações iniciais

Declare os pinos IO de nodeMCU para executar a ação, arquivos de cabeçalho e código para a criação do servidor DNS.. mostrado na imagem..

Etapa 2: Código Html para Front-End, ou seja, Página de login

Conforme mostrado na imagem, declare o código html dentro de uma variável de string que enviamos ao usuário final para validação do código de acesso.

* Para capturar os dados inseridos pelo usuário aqui, estamos usando o painel de âncora e a tag href

* Basicamente, a tag Anchor é usada para adicionar outra página da web dentro da página e a tag href define o destino do link.

* Mas aqui estamos recebendo os dados inseridos pelo usuário no campo Código de Acesso por meio do Painel de Âncora e tag href …

como, vou mencionar sobre dois métodos de capturar a entrada da interface da web para o nosso fim de programador de meios.

Etapa 3: Uso dos métodos WebServer.arg () e WebServer.on ()

Como, mencionei na etapa anterior, vou te dizer dois métodos diferentes..

1) Usando o método webServer.arg ():

Aqui, especificamos o atributo autofocus junto com o elemento como mostrado na imagem, o que o autofoco faz é ser um atributo booleano quando verdadeiro significa que presente ele garante que o elemento de entrada seja focalizado quando a página for carregada.

e, em seguida, chamamos o método args () no objeto do servidor. Este método retornará o número de parâmetros de consulta que foram passados no HTTP e aplicará instruções condicionais para executar as ações de acordo.

2) Usando um atributo href:

Aqui, especificamos nossos elementos de controle (como botões) dentro e atribuímos uma string, char, link que você deseja validar usando instruções condicionais e, em seguida, chamamos webServer.on () para receber a entrada para validação.

Como mostrado..

Etapa 4: se o usuário digitar credenciais erradas

O que eu fiz, simplesmente alterar o código da página de login existente e adicionar um novo cabeçalho informando que o usuário inseriu uma credencial errada.

Primeiro valide a credencial, se estiver errada, direcione o usuário para a nova página de login editada mostrando mensagem de erro.

Como mostrado..

Etapa 5: como adicionar uma imagem à sua página da web

É muito simples, porque aqui não estamos armazenando nossas imagens em um armazenamento físico para que possamos fornecer um caminho para buscar aquela imagem que normalmente fazemos no caso de uma página html.

então o que fazemos é simplesmente converter nossas imagens em base64 e colá-las em nosso código de página, conforme mostrado..

Etapa 6: quais componentes precisamos

1) - nodeMCU

2) - Arduino IDE para atualizar o nodeMCU

3) fios de jumper (F-2-F)

4) Módulo de relé

5) -Um smartphone ou laptop habilitado para WiFi para testar

Etapa 7: Conexões

Adicione o módulo de relé aos pinos IO declarados no código.

Conecte o relé aos equipamentos elétricos que deseja controlar, conforme mostrado na imagem.

Etapa 8: agora teste e aproveite

Etapa 9: o código está aqui

Por favor, escreva seus valiosos comentários.