AtmoSync es una aplicación fullstack para monitorear temperatura y humedad en tiempo real desde dispositivos IoT (ESP32 + DHT11/DHT22). Incluye un backend con Node.js/Express, una base de datos MongoDB Atlas y una interfaz moderna con React/Vite.
- Características
- Objetivos del Proyecto
- Integrantes
- Contexto Académico
- API REST
- Arduino / ESP32
- Autenticación
- Dashboard Web
- Visualización de Datos con Chart.js
- Base de Datos Utilizada
- Control del LED desde el Dashboard
- Sobre Nosotros
- Comunicación entre el ESP32 y la API REST
- Creación de la API REST con Express
- Envío y Recepción de Datos JSON
- Autenticación de usuarios con registro e inicio de sesión
- API REST para recepción de datos de sensores IoT
- Control de actuadores (LED)
- Dashboard con gráficas en tiempo real
- Base de datos MongoDB Atlas
- Comunicación entre ESP32 y API REST
- Implementar comunicación entre dispositivos IoT y una API REST
- Monitorear temperatura y humedad en tiempo real
- Almacenar datos en una base de datos NoSQL
- Visualizar datos mediante dashboards interactivos
- Richard Montes
- Diego Barrios
- Ronald Pradilla
Proyecto desarrollado aplicando conceptos de:
- APIs REST
- Comunicación HTTP
- Bases de datos NoSQL
- Desarrollo frontend y backend
- Internet de las Cosas (IoT)
Base URL:
http://localhost:5000POST /sensor
Content-Type: application/json
{
"temperatura": 25.5,
"humedad": 65.2
}Respuesta exitosa:
{ "ok": true }GET /lecturasRespuesta:
[
{
"_id": "507f1f77bcf86cd799439012",
"temperatura": 25.5,
"humedad": 65.2
}
]| Método | Endpoint | Descripción |
|---|---|---|
| GET | /prueba |
Verificar conexión |
| POST | /register |
Registrar usuario |
| POST | /login |
Iniciar sesión |
| POST | /sensor |
Guardar lectura |
| GET | /lecturas |
Obtener lecturas |
| POST | /led |
Cambiar estado LED |
| GET | /led |
Obtener estado LED |
En este apartado observamos el sensor DHT11 conectado a la placa ESP32 utilizada en el proyecto.
El sensor lee los valores de temperatura y humedad para enviarlos hacia la API REST desarrollada con Node.js y Express.
#include <WiFi.h>
#include <HTTPClient.h>
#include <DHT.h>
#define LEDPIN 2
#define DHTPIN 4
#define DHTTYPE DHT11
La interfaz de registro permite crear nuevas cuentas dentro de la plataforma AtmoSync.
Cuando el usuario completa el formulario, React realiza una petición POST hacia /register.
fetch("http://127.0.0.1:5000/register", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
email,
username,
password
})
});
La interfaz de inicio de sesión permite autenticar usuarios utilizando correo y contraseña.
Mensajes posibles:
Usuario no existeContraseña incorrectaCompleta todos los campos
La interfaz web fue desarrollada con React + Vite y permite visualizar en tiempo real los datos enviados desde el ESP32.
El dashboard muestra:
- Temperatura actual
- Humedad actual
- Gráficas dinámicas
- Historial de lecturas
- Indicadores de estado
- Control remoto del LED conectado al ESP32
El dashboard obtiene nuevas lecturas automáticamente cada 3 segundos utilizando setInterval.
useEffect(() => {
const obtenerDatos = () => {
fetch("http://localhost:5000/lecturas")
.then(res => res.json())
.then(data => setDatos(data));
};
obtenerDatos();
const interval = setInterval(obtenerDatos, 3000);
return () => clearInterval(interval);
}, []);
Para representar gráficamente los datos de temperatura y humedad en tiempo real, se implementó la librería Chart.js junto con react-chartjs-2.
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
} from 'chart.js';fetch("http://192.168.1.77:5000/lecturas")Los datos son obtenidos desde el backend y actualizados automáticamente.
const temperaturaData = {
labels: datos.map((_, index) => `Lectura ${index + 1}`),
datasets: [
{
label: 'Temperatura °C',
data: datos.map(item => item.temperatura),
},
],
};<Line data={temperaturaData} />
El proyecto utiliza MongoDB Atlas para almacenar las lecturas del sensor.
Cada documento contiene:
_idtemperaturahumedad
También existe una colección para almacenar los usuarios registrados.
Dentro del dashboard se encuentra el apartado para controlar el LED conectado al ESP32.
POST /led
Content-Type: application/json
{
"estado": true
}true→ enciende LEDfalse→ apaga LED
GET /ledRespuesta:
{
"estado": true
}
El LED puede controlarse remotamente desde la aplicación web.
En esta sección se presenta información sobre los desarrolladores y tecnologías utilizadas.
Tecnologías principales:
- React
- Vite
- Node.js
- Express.js
- MongoDB Atlas
- ESP32
- Sensor DHT11 / DHT22
- Chart.js
- API REST
- HTTP
- JSON
- Arduino IDE
El ESP32 obtiene los datos del sensor DHT11 y los prepara para ser enviados mediante HTTP.
Los datos son convertidos a formato JSON.
String json = "{\"temperatura\":" + String(temp) + ",\"humedad\":" + String(hum) + "}";Luego son enviados mediante un POST hacia /sensor.
El ESP32 también realiza una petición GET al endpoint /led.
httpLED.begin("http://192.168.1.77:5000/led");
const express = require('express');
const app = express();La variable app representa la aplicación principal creada con Express.
Luego se crea el endpoint /sensor utilizando el método POST.
app.post('/sensor', async (req, res) => {
En esta parte del proyecto se convierten los datos del sensor a formato JSON para que la API pueda reconocerlos correctamente.
Luego el ESP32 envía la información al backend mediante una petición HTTP POST.
Finalmente el dashboard consulta los datos desde /lecturas para visualizarlos en tiempo real mediante gráficas y tablas.