IoT Full-Stack com IA: Do JS à API Python

A Orquestra da Tecnologia Moderna

A tecnologia avança em um ritmo alucinante, e o verdadeiro diferencial de um profissional de destaque não está mais em dominar uma única ferramenta, mas em saber orquestrar um ecossistema completo de soluções. Na celebração dos 5 anos do DIO PRO, mergulhamos no conceito de "Formações" para explorar exatamente isso: como a sinergia entre diferentes tecnologias pode criar um impacto real e inovador.

Neste artigo, vamos embarcar em uma jornada prática e completa: a construção de um sistema de monitoramento de água em tempo real. O desafio? Construir uma aplicação web interativa que se comunicasse com um protótipo de hardware, um microcontrolador ESP32. A particularidade: o protótipo deveria rodar em um ambiente 100% virtual, o simulador Wokwi, exigindo uma arquitetura criativa para a comunicação em tempo real.

Esta não é uma exploração teórica; é um case de estudo real que nos guiará por quatro pilares tecnológicos:

• Construiremos a interface com JavaScript.
• Desenvolveremos o cérebro da operação com uma API em Python.
• Contextualizaremos a camada de hardware com os fundamentos de Java.
• E usaremos o ChatGPT como nosso co-piloto de IA, que diminuiu drasticamente nosso tempo de desenvolvimento.

Prepare-se para ir além dos tutoriais isolados. Vamos construir, conectar e inovar, mostrando na prática como as formações em tecnologia, quando integradas, se transformam em soluções poderosas.

Pilar 1: A Interface de Comando com JavaScript

Toda grande solução começa com a experiência do usuário. Nosso primeiro passo foi construir um painel de controle (dashboard) que fosse, ao mesmo tempo, intuitivo e funcional. A escolha natural para essa tarefa foi o trio clássico do front-end: HTML, CSS e JavaScript puro.

Nosso objetivo era criar uma Single-Page Application (SPA) que pudesse:

• Exibir o nível da água em tempo real através de uma barra de progresso.
• Mostrar o status da bomba e do registro de entrada (ligado/desligado).
• Permitir ao usuário ligar ou desligar esses componentes com botões.
• Ter um design limpo, responsivo e com um tema escuro.

O JavaScript foi o responsável por manipular o DOM, atualizando dinamicamente os elementos da tela sem a necessidade de recarregar a página. A comunicação com o back-end foi planejada usando a função fetch, preparando o terreno para a integração com nossa futura API.

Nesta fase, o ChatGPT já entrou em ação. Com um simples prompt, pedimos: "Crie o código CSS com Tailwind para um card de status que tenha um efeito de brilho ('glow') verde quando ativo e vermelho quando inativo." Em segundos, tínhamos um código elegante que acelerou drasticamente o design.

[Screenshot do dashboard finalizado em modo escuro, mostrando a barra de nível da água, os status e os botões de comando.]

Pilar 2: A API Python, a Ponte para o Mundo Virtual

Com o front-end pronto, o grande desafio era: como conectar nosso site a um ESP32 que só existia dentro do simulador Wokwi? A resposta foi construir uma API em Python para servir como intermediária.

Escolhemos Python pelo seu ecossistema robusto e pela simplicidade do framework Flask para criar APIs rapidamente. A arquitetura de comunicação foi a parte mais criativa:

1. O ESP32, dentro do Wokwi, foi programado em C++ para, a cada segundo, fazer uma requisição HTTP POST para um endpoint da nossa API, enviando seu status atual (nível do sensor, estado da bomba).
2. A API Python recebia esses dados e os armazenava em uma variável global simples, mantendo sempre o último estado conhecido do hardware.(a API era toda a lógica do nosso sistema de segurança, para evitar queima da bomba, transborde da água etc.)
3. O front-end JavaScript, por sua vez, a cada segundo, fazia uma requisição HTTP GET para a nossa API para obter esse último estado e atualizar o dashboard.

Dessa forma, criamos uma ponte de comunicação em tempo real com o mundo virtual.

O ChatGPT foi crucial aqui. Usamos o prompt: "Crie um servidor Flask em Python com dois endpoints: um '/status' (GET) que retorna um JSON com o estado atual, e um '/comando' (POST) que recebe um comando e o armazena." Isso nos deu 90% da base da nossa API pronta em menos de um minuto.

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# O estado central continua a ser a única fonte da verdade.
estado = {
"nivel": 2,
"nivelMaximo": 4,
"nivelMinimo": 1,
"bomba": False,
"registro": False,
"fluxo": 0,
"manutencao": False,
"modo_bomba": "auto"
}

@app.route('/')
def home():
return "API do sistema de automação predial v3.0 - Pronta para apresentação!"

# ROTA DE LEITURA (PARA O SITE) - Permanece igual
# O site continua a ler daqui para atualizar a interface.
@app.route('/status', methods=['GET'])
def get_current_status():
return jsonify({
  "nivel": estado["nivel"],
  "bomba": 1 if estado["bomba"] else 0,
  "registro": 1 if estado["registro"] else 0,
  "fluxo": estado["fluxo"],
  "manutencao": 1 if estado["manutencao"] else 0
})

# ROTA DE COMANDO (PARA O SITE) - Permanece igual
# O site continua a enviar os comandos do utilizador para cá.
@app.route('/comando', methods=['GET'])
def handle_comando_site():
if 'manutencao' in request.args:
  estado['manutencao'] = (request.args.get('manutencao') == 'on')
  if estado['manutencao']:
    estado['bomba'] = False
    estado['registro'] = False
    estado['modo_bomba'] = 'manual'

if not estado['manutencao']:
  if 'registro' in request.args:
    estado['registro'] = (request.args.get('registro') == 'on')
    estado['modo_bomba'] = 'auto'
    if not estado['registro']:
      estado['bomba'] = False

  if 'bomba' in request.args:
    estado['modo_bomba'] = 'manual'
    comando_bomba_on = (request.args.get('bomba') == 'on')
    if comando_bomba_on and estado['fluxo'] > 0 and estado['registro']:
      estado['bomba'] = True
    else:
      estado['bomba'] = False

# Esta rota agora só confirma que o comando foi recebido.
return jsonify({"status": "comando recebido"}), 200


# NOVA ROTA DE SINCRONIZAÇÃO (PARA O ESP32)
# O ESP32 chama esta rota para enviar o seu estado e receber ordens na mesma chamada.
@app.route('/sync', methods=['GET'])
def sync_esp32():
# 1. Recebe os dados dos sensores
if 'nivel' in request.args:
  estado['nivel'] = int(request.args.get('nivel'))
if 'fluxo' in request.args:
  estado['fluxo'] = int(request.args.get('fluxo'))

# 2. Executa a lógica de automação com os dados frescos
if not estado['manutencao'] and estado['modo_bomba'] == 'auto':
  if estado['fluxo'] == 0:
    estado['bomba'] = False
  else:
    if estado['nivel'] <= estado['nivelMinimo']:
      estado['bomba'] = True
    elif estado['nivel'] >= estado['nivelMaximo']:
      estado['bomba'] = False

# 3. Retorna as ordens finais para o ESP32 na mesma resposta.
return jsonify({
  "bomba": 1 if estado["bomba"] else 0,
  "registro": 1 if estado["registro"] else 0,
  "manutencao": 1 if estado["manutencao"] else 0
})


if __name__ == '__main__':
app.run(host='0.0.0.0', port=8080)

[IMAGEM 3: Screenshot da tela do Wokwi, com o código do ESP32 de um lado e o Monitor Serial do outro, mostrando as mensagens de "Sincronizando dados para a API..." ele não vai estar sincronizando pois tirei o print em fase de testes mas já é totalmente funcional hoje]

Pilar 3: A Visão de Futuro e os Fundamentos de Java

Nossa simulação no Wokwi rodou código C++/Arduino, que é comum para prototipagem. Mas, e se este fosse um sistema industrial, crítico e de larga escala? Aqui, os fundamentos de Java encontram seu espaço no mundo do IoT.

Em sistemas embarcados robustos, linguagens como Java (usando plataformas como Java Embedded ou Java ME) são frequentemente utilizadas por suas características de segurança, portabilidade e gerenciamento de memória. Os princípios de Orientação a Objetos de Java permitem criar firmwares mais organizados e escaláveis.

Nossa arquitetura foi projetada para ser agnóstica ao hardware. A API Python não se importa se quem está enviando os dados é um ESP32 simulado em Wokwi ou um controlador industrial rodando um sistema robusto em Java. Essa camada de abstração é um dos princípios mais importantes da engenharia de software e mostra como os fundamentos de diferentes linguagens se complementam.

[Diagrama de Arquitetura completo, mostrando o fluxo: [Usuário] -> [JS Frontend] -> [Python API] -> [Wokwi/ESP32 ou Java/Hardware Real].]

Pilar 4: ChatGPT, o Catalisador de Inovação

Falar que o ChatGPT "ajudou" seria um eufemismo. Ele atuou como um co-piloto, um parceiro de programação que nos permitiu focar na lógica do negócio em vez de gastar tempo com código repetitivo ou pesquisa de sintaxe.

O tempo de desenvolvimento foi drasticamente reduzido porque o usamos para:

• Gerar Boilerplate: Criou a estrutura inicial do servidor Flask e o esqueleto do HTML.
• Escrever Funções Complexas: Desenvolveu a função de validação de senha em tempo real na tela de cadastro do nosso site.
• Debugar Código: Ajudou a resolver um problema chato de CORS (Cross-Origin Resource Sharing) que impedia nosso JavaScript de se comunicar com a API Python.
• Criar Snippets de CSS: Como mencionado, gerou o código do Tailwind CSS para efeitos visuais.
• Documentar o Projeto: Ao final, pedimos: "Crie um README.md para este projeto", e ele gerou uma documentação clara e profissional.

A automação de tarefas com o ChatGPT não é sobre substituir o desenvolvedor, mas sobre potencializá-lo.

Conclusão: A Sinfonia das Formações

Nossa jornada começou com um desafio: construir uma aplicação full-stack para um hardware virtual. Ao final, não apenas construímos a solução, mas também provamos o poder de uma formação multidisciplinar. Vimos o JavaScript dar vida à interface, o Python orquestrar a comunicação, o Java nos dar uma visão de futuro para a robustez do hardware, e o ChatGPT acelerar todo o processo como um catalisador de produtividade.

O futuro do desenvolvimento não pertence a uma única linguagem, mas àqueles que conseguem, como um maestro, reger uma orquestra de tecnologias para criar soluções inovadoras.

E você? Que outra arquitetura ou tecnologia você usaria para conectar um front-end a uma simulação como o Wokwi? Compartilhe suas ideias e vamos aprender juntos nos comentários!

Projeto e Referências

• [LINK: Confira o site em funcionamento e interaja com a simulação aqui!]

Como Acessar a Demonstração:

Login: SENAI4.0
Senha: carecacabuloso

• Observação Importante: Como esta é uma simulação, a API Python que conecta o site ao hardware virtual não fica ativa 24/7 devido a custos de hospedagem. Se você gostaria de testar o projeto ao vivo, por favor, entre em contato comigo que terei o maior prazer em ativá-la para você!
• [LINK: Acesse o código-fonte completo do Frontend, da API e da simulação no wokwi!]
• Referências:
• Documentação oficial do Python Flask
• MDN Web Docs para JavaScript
• Documentação do Wokwi Simulator
• Plataforma OpenAI ChatGPT
• Como esse sistema funciona? Lógica por trás e muito mais!