Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jpbarbatic/webapp/llms.txt

Use this file to discover all available pages before exploring further.

El widget del tiempo es un componente JavaScript independiente que consulta la API pública de el-tiempo.net y renderiza una tarjeta meteorológica completa directamente en el navegador del usuario. Todo el ciclo de vida —petición a la API, transformación de datos y generación de HTML— ocurre en el cliente, sin ninguna intervención del servidor PHP.

​
Arquitectura del widget

El widget está implementado en el archivo public/assets/weather-widget.js como una clase ES6 WeatherWidget. Es completamente autocontenida: no depende de jQuery ni de ninguna otra librería JavaScript externa. La única dependencia de presentación es la hoja de estilos Weather Icons (weather-icons.min.css), que se carga mediante un CDN, y assets/weather.css para estilos de layout propios del proyecto. 
WeatherWidget
├── constructor(containerSelector, options)   → configura el widget
├── load()                                    → petición fetch a la API (async)
├── render()                                  → genera y escribe el HTML principal
├── renderHourlyForecast()                    → bloque de horas del día en curso
├── renderDailyForecast()                     → bloque de próximos días
├── getWeatherIcon(code)                      → traduce código de cielo a clase CSS
├── getSkyDescription(codigo)                 → traduce código de cielo a texto
├── formatDate(dateStr)                       → formatea fecha en español
├── getFirstValue(value)                      → normaliza valores que pueden ser array
├── renderLoading()                           → muestra spinner mientras carga
└── renderError(msg)                          → muestra mensaje de error

​
Constructor y opciones

constructor(containerSelector, options = {})
ParámetroTipoDescripción
containerSelectorstringSelector CSS del elemento HTML donde se renderizará el widget (p. ej. '#weather-widget'). Si el elemento no existe en el DOM, el constructor registra un error en consola y aborta.
optionsobjectObjeto de configuración opcional.
options.provinciastringCódigo numérico de la provincia según la codificación de el-tiempo.net. Valor por defecto: '29' (Málaga).
options.municipiostringCódigo numérico del municipio. Valor por defecto: '29094' (Málaga capital).
Internamente, el constructor también inicializa this.data = null —donde se almacenará la respuesta de la API— y carga el mapa completo de iconos this.weatherIcons (ver sección Mapeo de iconos). Si el selector no coincide con ningún elemento del DOM, el widget registra el siguiente mensaje en consola y no realiza ninguna acción adicional: 
❌ No se encontró el contenedor: #weather-widget

​
Inicialización

El widget se inicializa en html/dashboard/dashboard.script.php mediante una IIFE (función auto-invocada) para evitar contaminar el ámbito global con la variable widget: 
<script src="assets/weather-widget.js"></script>

<script>
  (function() {
    const widget = new WeatherWidget('#weather-widget', {
      provincia: '29',
      municipio: '29094'
    });
    widget.load();
  })();
</script>
La llamada a widget.load() dispara la petición a la API. Mientras se recibe la respuesta, el método renderLoading() muestra un spinner de Bootstrap en el contenedor.

​
Llamada a la API

El método load() construye la URL de la API concatenando los códigos de provincia y municipio configurados: 
async load() {
  try {
    this.renderLoading();

    const url = `https://api.el-tiempo.net/json/v3/provincias/${this.provincia}/municipios/${this.municipio}`;
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`Error HTTP: ${response.status}`);
    }

    this.data = await response.json();
    console.log('✅ Datos cargados correctamente');
    console.log('📊 Estructura:', this.data);
    this.render();
  } catch (err) {
    console.error('❌ Error:', err);
    this.renderError(err.message);
  }
}
ElementoDetalle
Endpointhttps://api.el-tiempo.net/json/v3/provincias/{provincia}/municipios/{municipio}
Método HTTPGET
Formato de respuestaJSON
La respuesta JSON de la API contiene, entre otros, los siguientes campos que el widget consume:
Campo JSONUso en el widget
municipio.NOMBRENombre del municipio mostrado en la cabecera
municipio.NOMBRE_PROVINCIANombre de la provincia
temperatura_actualTemperatura actual en °C
stateSky.id / stateSky.descriptionCódigo e identificador textual del estado del cielo
temperaturas.max / temperaturas.minTemperaturas máxima y mínima del día
humedadPorcentaje de humedad relativa
vientoVelocidad del viento en km/h
precipitacionPrecipitación en mm
pronostico.hoyObjeto con arrays hora a hora: temperatura, estado_cielo, prob_precipitacion
proximos_diasArray de objetos con previsión para los próximos días
origin.productorFuente de los datos (habitualmente AEMET)

​
Renderizado

Una vez recibida la respuesta, render() construye una tarjeta Bootstrap con cuatro secciones:
1

Cabecera de la tarjeta

Muestra el nombre del municipio y la provincia, el icono del estado actual del cielo y la temperatura en tiempo real en formato display-3.
2

Métricas rápidas

Cuatro tarjetas métricas (metric-card) con: temperatura máxima/mínima, humedad, velocidad del viento y precipitación.
3

Pronóstico por horas (renderHourlyForecast)

Franja deslizable horizontal que muestra cada hora restante del día en curso, desde la hora actual hasta las 23:00. Cada celda incluye la hora, el icono del cielo, la temperatura y, si es mayor que 0, la probabilidad de precipitación.
4

Pronóstico para los próximos días (renderDailyForecast)

Cuadrícula responsiva (Bootstrap row g-3) con una tarjeta por día. Cada tarjeta muestra la fecha formateada en español (es-ES), el icono, la descripción del cielo, las temperaturas máxima y mínima y la probabilidad de lluvia.

​
Mapeo de iconos

El método getWeatherIcon(code) traduce el código numérico de estado del cielo de el-tiempo.net a la clase CSS correspondiente de la librería Weather Icons. Algunos ejemplos representativos:
CódigoClase CSSDescripción
11wi-day-sunnyDespejado (día)
11nwi-night-clearDespejado (noche)
14wi-cloudyNuboso
21wi-fogNiebla
33wi-rainNuboso con lluvia
35wi-thunderstormCubierto con tormenta
53wi-snowNieve
Si el código recibido no existe en el mapa, el método devuelve la clase de reserva wi-thermometer. Esta misma lógica aplica para el bloque de horas y para los días siguientes.

​
Ejemplo de uso

El siguiente fragmento reproduce exactamente la inicialización que aparece en html/dashboard/dashboard.script.php y puede reutilizarse en cualquier otra vista que incluya los mismos assets: 
<!-- Assets requeridos (html/dashboard/dashboard.css.php) -->
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/css/weather-icons.min.css">
<link href="assets/weather.css" rel="stylesheet">

<!-- Contenedor donde se renderizará el widget -->
<div id="weather-widget" class="mb-5"></div>

<!-- Script del widget e inicialización -->
<script src="assets/weather-widget.js"></script>
<script>
  (function() {
    const widget = new WeatherWidget('#weather-widget', {
      provincia: '29',   // Código de provincia (el-tiempo.net)
      municipio: '29094' // Código de municipio (el-tiempo.net)
    });
    widget.load();
  })();
</script>
Para mostrar el tiempo de otra localidad, solo es necesario cambiar los valores de provincia y municipio por los códigos correspondientes de el-tiempo.net.
El widget requiere conexión a Internet en el momento de la carga de la página para contactar con api.el-tiempo.net. Si la petición falla (servidor no disponible, código de estado HTTP distinto de 2xx o error de red), el método renderError() sustituye el spinner por un mensaje de alerta de Bootstrap con la descripción del error. No existe caché local ni mecanismo de reintento automático.

Build docs developers (and LLMs) love

Get started for freeTalk to us