Aplicação com módulo wifi ESP32 GPS Neo-6m, Micropython, Firebase e React

As aplicações IoT (Internet das Coisas) estão cada vez mais populares, e o esp32, um microcontrolador poderoso e versátil, tem se destacado nesse cenário. Vamos explorar como criar uma aplicação IoT inovadora utilizando o esp32 em conjunto com um módulo gps neo-6m, micropython e react. Essa aplicação será capaz de localizar a posição GPS e enviar os dados para o Firebase, integrando tudo em uma interface web interativa feita com React.

Requisitos

Para esta aplicação, utilizamos diversos componentes tecnológicos importantes.

1 – Microcontrolador Esp32 Primeiro, o ESP32, um microcontrolador de baixo custo com Wi-Fi e Bluetooth integrados, ideal para projetos IoT devido à sua capacidade de processamento e conectividade.

2 – Módulo GPS Neo-6m Depois, utilizamos o Módulo GPS Neo-6m que oferece uma solução de posicionamento precisa e confiável, perfeito para rastreamento e navegação.

3 – Micropython Programamos o esp32 com Micropython, uma implementação de Python que roda em microcontroladores, simplificando o desenvolvimento com uma linguagem familiar e poderosa.

4 – Firebase Realtime Para armazenar e gerenciar os dados de localização, usamos o Firebase, uma plataforma de desenvolvimento de aplicativos móveis e web com diversos serviços, incluindo um banco de dados NoSQL em tempo real.

5 – React.js Por fim, construímos a interface de usuário com React, uma biblioteca JavaScript para a construção de interfaces de usuário, conhecida por sua eficiência e flexibilidade.

1° Configurando o ESP32 com Micropython

Para configurar o ESP32 para rodar Micropython, vamos usar a IDE Thonny, uma ferramenta amigável para iniciantes.

Baixe e instale a IDE Thonny.
Conecte o ESP32 ao seu computador via USB.
Abra a IDE Thonny. Vá em “Ferramentas” > “Configurações” e selecione a aba “Interpretação“. No campo “Escolher Interpretação“, selecione “MicroPython (ESP32)” e configure a porta serial correspondente ao seu ESP32.
Ainda na aba “Interpretação“, clique em “Instalar ou atualizar o firmware“. Siga as instruções na tela para instalar o firmware do Micropython no ESP32. Você pode baixar o firmware mais recente no site oficial do Micropython.
Após a instalação do firmware, você deve ver a REPL do Micropython na IDE Thonny.

2° Conectando o Módulo GPS ao ESP32

Conecte o módulo GPS Neo-6m ao ESP32 conforme o diagrama abaixo:

VCC do módulo GPS -> 3.3V do ESP32
GND do módulo GPS -> GND do ESP32
RX do módulo GPS -> GPIO17 do ESP32
TX do módulo GPS -> GPIO16 do ESP32

3° Código Micropython para Receber Dados GPS

Aqui está o código Micropython para configurar o módulo GPS e receber dados, o link com a biblioteca para download estada no final desse artigo. Abra a IDE Thonny e copie o seguinte código:

# boot.py - Código para configurar o ESP32 e receber dados do GPS

from machine import UART
import time
from micropyGPS import MicropyGPS
import network
import ujson
import ufirebase as firebase

uart = UART(2, baudrate=9600, tx=16, rx=17)
sta_if = network.WLAN(network.STA_IF)
my_gps = MicropyGPS()

def dms_to_dd(degrees, minutes, direction):
    dd = float(degrees) + float(minutes) / 60
    if direction == 'S' or direction == 'W':
        dd *= -1
    return dd

# Carregar configurações do Wi-Fi
with open('config.json') as f:
    config = ujson.load(f)
    ssid = config['wifi2']['ssid']
    senha = config['wifi2']['password']

def verifica_wiffi():
    if not sta_if.isconnected():
        sta_if.active(True)
        sta_if.connect(ssid, senha)
        print("Conectando Wifi")
        while not sta_if.isconnected():
            print(".", end="")
            time.sleep(0.1)
        print("\nWi-Fi Conectado.")
        time.sleep(1)

firebase.setURL("https://<SET-DB-FIREBASE-LINK>")

ultima_localizacao = {'latitude': None, 'longitude': None}
ultimo_envio = time.time()

while True:
    if uart.any():
        data = uart.readline()
        for char in data:
            my_gps.update(chr(char))

        latitude = dms_to_dd(my_gps.latitude[0], my_gps.latitude[1], my_gps.latitude[2])
        longitude = dms_to_dd(my_gps.longitude[0], my_gps.longitude[1], my_gps.longitude[2])
        print('\nCoordenadas Tratadas: ', latitude, longitude, '\n')

        # Verifica se as coordenadas são diferentes das últimas enviadas e não são zero
        if (latitude, longitude) != (ultima_localizacao['latitude'], ultima_localizacao['longitude']) and (latitude, longitude) != (0, 0):
            # Verifica se passaram 2 ou mais segundos desde o último envio
            if time.time() - ultimo_envio >= 1:
                verifica_wiffi()
                try:
                    data_json = ujson.dumps({
                        "latitude": latitude,
                        "longitude": longitude,
                        "identificacao": "AAA12345BBB54321"
                    })
                    firebase.put("Dados3/GPS", data_json)
                    ultima_localizacao['latitude'] = latitude
                    ultima_localizacao['longitude'] = longitude
                    ultimo_envio = time.time()
                    print("Dados enviados para o Firebase.")
                except Exception as e:
                    print("Erro ao enviar para o Firebase:", e)

    time.sleep(1.5)

Explicação do código python:

Importações e Configuração Inicial:
1. from machine import UART: Importa a biblioteca UART para comunicação serial.
2. import time, network, ujson, ufirebase: Importa bibliotecas necessárias para gerenciamento de tempo, conexão Wi-Fi, manipulação de JSON e comunicação com Firebase.
3. from micropyGPS import MicropyGPS: Importa a biblioteca micropyGPS para lidar com dados do GPS.
Configuração do UART e Wi-Fi:
1. uart = UART(2, baudrate=9600, tx=16, rx=17): Configura o UART para comunicação com o módulo GPS, definindo a taxa de transmissão e os pinos GPIO.
2. sta_if = network.WLAN(network.STA_IF): Configura a interface Wi-Fi do ESP32.
3. my_gps = MicropyGPS(): Cria uma instância do objeto MicropyGPS.
Função dms_to_dd:
1. Converte coordenadas de graus, minutos e segundos (DMS) para graus decimais (DD).
Configuração do Wi-Fi:
1. Carrega as configurações de Wi-Fi a partir do arquivo config.json.
2. A função verifica_wiffi conecta ao Wi-Fi se não estiver conectado.
Configuração do Firebase:
1. Define a URL do Firebase onde os dados serão enviados.
Loop Principal:
1. Verifica se há dados disponíveis no UART.
2. Atualiza o objeto my_gps com os dados recebidos.
3. Converte as coordenadas para graus decimais.
4. Verifica se as coordenadas são diferentes das últimas enviadas e não são zero.
5. Verifica se passaram 2 segundos desde o último envio.
6. Envia os dados para o Firebase se as condições forem atendidas.
7. Aguarda 1.5 segundos antes de repetir o loop.

4° Criando a Interface Web com React.js

Para exibir os dados de localização em uma interface web, usaremos React.js. Já adicionamos o código principal em Page.jsx para buscar e exibir os dados do Firebase.

import { useEffect, useState } from 'react';
import { GoogleMap, Marker, useLoadScript } from '@react-google-maps/api';
import { initializeApp } from "firebase/app";
import { getDatabase, ref, onValue } from 'firebase/database';

const firebaseConfig = {
  apiKey: "SUA_API_KEY_AQUI",
  authDomain: "SEU_DOMINIO_AQUI",
  databaseURL: "SUA_DATABASE_URL_AQUI",
  projectId: "SEU_PROJECT_ID_AQUI",
  storageBucket: "SEU_STORAGE_BUCKET_AQUI",
  messagingSenderId: "SEU_MESSAGING_SENDER_ID_AQUI",
  appId: "SEU_APP_ID_AQUI"
};

initializeApp(firebaseConfig);

export { Page }
const Page = () => {
  const [location, setLocation] = useState({ lat: -22.9068, lng: -43.1729 }); // Coordenadas padrão
  
  const { isLoaded } = useLoadScript({ googleMapsApiKey: "SUA_GOOGLE_MAPS_API_KEY_AQUI" });
  
  useEffect(() => {
    const db = getDatabase();
    const gpsRef = ref(db, 'Dados3/GPS');
    
    onValue(gpsRef, (snapshot) => {
      let data = snapshot.val();
      if (typeof data === 'string') {
        try {
          data = JSON.parse(data);
        } catch (error) {
          console.error('Erro ao analisar os dados:', error);
          return;
        }
      }
      if (data) {
        const newLocation = {
          lat: parseFloat(data.latitude),
          lng: parseFloat(data.longitude)
        };
        console.log("newLocation", newLocation);
        if (!isNaN(newLocation.lat) && !isNaN(newLocation.lng)) {
          setLocation(newLocation);
        }
      }
    });

    return () => {
      // Código para desligar event listener, se necessário
    };
  }, []);

  if (!isLoaded) return(<div>Carregando mapa...</div&gt)
return (
    <GoogleMap
      mapContainerStyle={{ width: '100%', height: '400px' }}
      center={location}
      zoom={18}
    >
      <Marker key={1+location.lat} title='AAAAA' position={location} visible={true} />
    </GoogleMap>
  );
};

Explicação do código:

Configuração do Firebase:
1. initializeApp(firebaseConfig): Inicializa o aplicativo Firebase com a configuração fornecida.
Hook useEffect:
1. Conecta ao banco de dados Firebase.
2. Configura um event listener para os dados do GPS.
3. Atualiza o estado location com a nova localização sempre que os dados mudarem no Firebase.
Hook useLoadScript:
1. Carrega a biblioteca de mapas do Google.
Renderização do Mapa:
1. Verifica se a biblioteca de mapas do Google foi carregada.
2. Renderiza o mapa e o marcador de acordo com a localização atual.

Conclusão

Com este guia, criamos uma aplicação IoT completa que utiliza um ESP32 para capturar dados de localização GPS e enviá-los para o Firebase. Em seguida, exibimos esses dados em uma interface web interativa usando React.js. Esta aplicação pode ser expandida e personalizada para atender a diversas necessidades de rastreamento e monitoramento em tempo real.