API OpenWeatherMap
Datos meteorológicos en tiempo real
Integración con OpenWeatherMap para mostrar información del clima actual.
OpenWeatherMap API
Datos meteorológicos en tiempo real para la terminal
Esta integración utiliza la API real de OpenWeatherMap para obtener datos climáticos en tiempo real específicamente de Ica, Perú. Se implementa principalmente en la terminal interactiva del portafolio mediante el comandoweather
, proporcionando información meteorológica actualizada con datos de respaldo en caso de error de API. La implementación incluye 15 emojis específicos para diferentes condiciones climáticas y conversión automática de Kelvin a Celsius.
Características
Temperatura Actual
Temperatura en tiempo real con sensación térmica incluida
Condiciones Climáticas
Descripción detallada del clima actual con emojis visuales
Datos de Viento
Velocidad del viento convertida automáticamente a km/h
Humedad
Porcentaje de humedad relativa del ambiente
Integración Terminal
Comando 'weather' disponible en la terminal interactiva
TypeScript
Interfaces tipadas para todos los datos meteorológicos
Interface de Datos
// Interface para los datos del clima
export interface WeatherData {
main: {
temp: number; // Temperatura en Kelvin
humidity: number; // Humedad en porcentaje
feels_like: number; // Sensación térmica en Kelvin
};
weather: {
main: string; // Condición principal (Clear, Clouds, Rain, etc.)
description: string; // Descripción detallada
icon: string; // Código del icono
}[];
wind: {
speed: number; // Velocidad del viento en m/s
};
name: string; // Nombre de la ciudad
sys: {
country: string; // Código del país
};
}
Funciones Disponibles
// 3 funciones principales implementadas en weatherApi.ts
// 1. getWeatherForIca() - Función principal para datos climáticos
// Consulta específicamente Ica, Perú usando OpenWeatherMap API
const weather = await getWeatherForIca();
// Retorna: WeatherData | { error: string }
// 2. kelvinToCelsius(kelvin: number) - Conversor de temperatura
// Convierte automáticamente de Kelvin a Celsius con redondeo
const tempCelsius = kelvinToCelsius(305.15); // => 32°C
// 3. getWeatherEmoji(weatherCode: string) - Emojis visuales
// Mapea 15 condiciones climáticas a emojis específicos
const emoji = getWeatherEmoji('Clear'); // => ☀️
const emoji = getWeatherEmoji('Rain'); // => 🌧️
const emoji = getWeatherEmoji('Snow'); // => ❄️
// Ejemplo real de implementación completa:
import { getWeatherForIca, kelvinToCelsius, getWeatherEmoji } from '@/lib/weatherApi';
const weatherInfo = await getWeatherForIca();
if ('error' in weatherInfo) {
console.error('Error API:', weatherInfo.error);
// Manejo de error con datos de respaldo
} else {
const temp = kelvinToCelsius(weatherInfo.main.temp);
const feelsLike = kelvinToCelsius(weatherInfo.main.feels_like);
const condition = weatherInfo.weather[0].main;
const description = weatherInfo.weather[0].description;
const emoji = getWeatherEmoji(condition);
const windKmh = Math.round(weatherInfo.wind.speed * 3.6);
console.log(`${emoji} ${description} - ${temp}°C`);
console.log(`Sensación térmica: ${feelsLike}°C`);
console.log(`Humedad: ${weatherInfo.main.humidity}%`);
console.log(`Viento: ${windKmh} km/h`);
}
Configuración
1Obtener API Key de OpenWeatherMap
1. Ve a OpenWeatherMap API
2. Crea una cuenta gratuita
3. Obtén tu API key desde el dashboard
4. El plan gratuito incluye 1,000 llamadas por día
2Configurar Variable de Entorno
# Variables de entorno necesarias (.env.local)
NEXT_PUBLIC_OPENWEATHER_API_KEY=tu_api_key_aqui
⚠️ Nota: Usa NEXT_PUBLIC_
porque la función se ejecuta en el cliente (terminal interactiva).
Ejemplo de Uso
// Implementación real completa utilizada en el proyecto
import {
getWeatherForIca,
getWeatherEmoji,
kelvinToCelsius,
WeatherData
} from '@/lib/weatherApi';
// Obtener datos meteorológicos para Ica, Perú
async function fetchWeatherData() {
const weatherData = await getWeatherForIca();
if ('error' in weatherData) {
// Manejo de errores específicos implementado
console.error('Error de API:', weatherData.error);
// Datos de respaldo utilizados en la terminal
return {
emoji: '☀️',
description: 'Soleado',
temp: 28,
humidity: 45,
windSpeed: 12,
offline: true,
errorMessage: weatherData.error
};
} else {
// Procesamiento de datos reales de OpenWeatherMap
const tempC = kelvinToCelsius(weatherData.main.temp);
const feelsLikeC = kelvinToCelsius(weatherData.main.feels_like);
const emoji = getWeatherEmoji(weatherData.weather[0].main);
const windKmh = Math.round(weatherData.wind.speed * 3.6);
console.log(`${emoji} ${weatherData.weather[0].description} - ${tempC}°C`);
console.log(`Sensación térmica: ${feelsLikeC}°C`);
console.log(`Humedad: ${weatherData.main.humidity}%`);
console.log(`Viento: ${windKmh} km/h`);
console.log(`Ciudad: ${weatherData.name}, ${weatherData.sys.country}`);
return {
emoji,
description: weatherData.weather[0].description,
temp: tempC,
feelsLike: feelsLikeC,
humidity: weatherData.main.humidity,
windSpeed: windKmh,
city: weatherData.name,
country: weatherData.sys.country,
offline: false
};
}
}
// Uso en contexto real (como en TerminalContext.tsx)
fetchWeatherData().then(result => {
if (result.offline) {
console.log(`⚠️ Modo offline: ${result.errorMessage}`);
}
console.log(`${result.emoji} ${result.temp}°C`);
});
Integración en Terminal
// Integración en la Terminal (TerminalContext.tsx)
else if (cmd === "weather") {
setLoading(true);
// Importar módulo de clima dinámicamente
import("@/lib/weatherApi").then(async (weatherModule) => {
try {
const weatherData = await weatherModule.getWeatherForIca();
if ("error" in weatherData) {
// Mostrar datos offline con error
setHistory(prev => [...prev, {
command: fullCmd,
output: (
<div className="space-y-2">
<p className="text-emerald-300">🌤️ Clima en Ica, Perú:</p>
<div className="bg-neutral-800 p-3 rounded">
<p className="text-yellow-300">☀️ Soleado - 28°C</p>
<p className="text-gray-300 text-sm">
Humedad: 45% | Viento: 12 km/h
</p>
<div className="mt-3 p-2 bg-red-900/30 border border-red-700 rounded">
<p className="text-red-400 text-xs font-semibold">
⚠️ API Status: {weatherData.error}
</p>
</div>
</div>
</div>
)
}]);
} else {
// Mostrar datos en tiempo real
const tempC = weatherModule.kelvinToCelsius(weatherData.main.temp);
const emoji = weatherModule.getWeatherEmoji(weatherData.weather[0].main);
setHistory(prev => [...prev, {
command: fullCmd,
output: (
<div className="space-y-2">
<p className="text-emerald-300">🌤️ Clima en tiempo real - Ica, Perú:</p>
<div className="bg-neutral-800 p-3 rounded">
<div className="flex items-center gap-2">
<span className="text-2xl">{emoji}</span>
<p className="text-yellow-300 font-semibold">
{weatherData.weather[0].description} - {tempC}°C
</p>
</div>
<p className="text-gray-300 text-sm mt-2">
Sensación térmica: {weatherModule.kelvinToCelsius(weatherData.main.feels_like)}°C
</p>
<p className="text-gray-300 text-sm">
Humedad: {weatherData.main.humidity}% |
Viento: {Math.round(weatherData.wind.speed * 3.6)} km/h
</p>
</div>
</div>
)
}]);
}
} catch (error) {
console.error('Error:', error);
} finally {
setLoading(false);
}
});
}
Sistema de Emojis Climáticos
// 15 emojis implementados para condiciones climáticas
// Mapeo exacto usado en getWeatherEmoji()
const weatherEmojiMap = {
'Clear': '☀️', // Cielo despejado
'Clouds': '☁️', // Nuboso
'Rain': '🌧️', // Lluvia
'Drizzle': '🌦️', // Llovizna
'Thunderstorm': '⛈️', // Tormenta eléctrica
'Snow': '❄️', // Nieve
'Mist': '🌫️', // Niebla ligera
'Smoke': '🌫️', // Humo
'Haze': '🌫️', // Neblina
'Dust': '🌫️', // Polvo
'Fog': '🌫️', // Niebla densa
'Sand': '🌫️', // Arena
'Ash': '🌫️', // Ceniza volcánica
'Squall': '🌬️', // Ráfaga de viento
'Tornado': '🌪️' // Tornado
// Default: '🌡️' para condiciones no mapeadas
};
// Función real implementada:
export function getWeatherEmoji(weatherCode: string): string {
return weatherEmojiMap[weatherCode] || '🌡️';
}
Endpoints de la API
// Endpoint real utilizado en getWeatherForIca()
const API_BASE = 'https://api.openweathermap.org/data/2.5';
const CITY = 'Ica,pe'; // Ciudad fija: Ica, Perú
const LANG = 'es'; // Idioma: Español
// URL completa construida dinámicamente:
const apiUrl = `${API_BASE}/weather?q=${CITY}&appid=${apiKey}&lang=${LANG}`;
// Ejemplo real:
// https://api.openweathermap.org/data/2.5/weather?q=Ica,pe&appid=YOUR_KEY&lang=es
// Códigos de error manejados:
// 401: API key inválida
// 404: Ciudad no encontrada
// 429: Límite de llamadas excedido
// 500: Error del servidor OpenWeatherMap
Manejo de Errores y Datos de Respaldo
// Manejo completo de errores implementado en getWeatherForIca()
try {
const response = await fetch(apiUrl);
if (!response.ok) {
// Error 401: API key inválida
if (response.status === 401) {
return {
error: 'API key inválida. Necesitas obtener una nueva clave en https://openweathermap.org/api'
};
}
// Otros errores HTTP
throw new Error(`Error ${response.status}: ${response.statusText}`);
}
const data: WeatherData = await response.json();
return data;
} catch (error) {
console.error('Error obteniendo datos del clima:', error);
return {
error: 'No se pudo conectar con la API. Verifica tu conexión a internet.'
};
}
// Verificación de API key
if (!apiKey) {
return {
error: 'API key no configurada. Verifica tu archivo .env'
};
}
// Datos de respaldo en terminal cuando hay error:
// ☀️ Soleado - 28°C
// Humedad: 45% | Viento: 12 km/h
// ⚠️ API Status: [error message]
Información de la API
Plan Gratuito OpenWeatherMap
- • 1,000 llamadas por día
- • Datos actuales del clima
- • Actualización cada 10 minutos
- • No requiere tarjeta de crédito
- • Soporte para 200,000+ ciudades
Datos Específicos de Ica
- • Temperatura actual y sensación térmica
- • Descripción en español (lang=es)
- • Humedad relativa del desierto
- • Velocidad del viento (convertida a km/h)
- • Coordenadas: Ica, Perú (pe)
Implementación Específica del Proyecto
Configuración Fija:
- • Ciudad:
Ica,pe
- • Idioma:
es
(Español) - • Unidades: Kelvin → Celsius automático
- • Viento: m/s → km/h automático
Integración Terminal:
- • Comando:
weather
- • Carga asíncrona con loading state
- • Fallback automático en caso de error
- • Display visual con emojis
Demo en Vivo - Terminal Interactiva
La implementación real está integrada en la terminal interactiva del portafolio. El comando weather
consulta los datos climáticos actuales de Ica, Perú usando OpenWeatherMap API con manejo automático de errores.
✅ Cuando la API funciona correctamente:
⚠️ Cuando hay problemas con la API:
Flujo de Datos en Tiempo Real
weather
en terminal@/lib/weatherApi
getWeatherForIca()
con loading stateq=Ica,pe&lang=es
Documentación Técnica Completa
Explora la documentación completa del portafolio, incluyendo arquitectura, sistema de terminal, componentes y guías de desarrollo.
Ver Documentación Completa¿Necesitas ayuda con la implementación??
Contáctame para soporte personalizado y optimización de tu integración.