Mostrar probabilidad de lluvia por hora

Oct 13, 2025 by talynt.org 7 views

Inicio parte 2/2: Implementación de la Aplicación de Pronóstico del Tiempo

En la primera parte de esta serie, exploramos la planificación y diseño de la aplicación de pronóstico del tiempo. En esta segunda parte, nos enfocaremos en la implementación de la aplicación, cubriendo los detalles técnicos y funcionales que hacen que la aplicación sea una herramienta útil y atractiva para los usuarios.

Obtener datos de la API

La aplicación debe consumir los datos de WeatherAPI, una API de pronóstico del tiempo que proporciona información detallada sobre la temperatura, la lluvia, el viento y otros factores meteorológicos. Para obtener estos datos, la aplicación debe realizar una petición a la API con la ciudad del usuario o su geolocalización.

// Obtener datos de la API
fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${ciudad}`)
  .then(response => response.json())
  .then(data => {
    // Procesar los datos obtenidos
    const temperaturaActual = data.current.temp_c;
    const pronosticoDiario = data.forecast.forecastday;
    // ...
  })
  .catch(error => console.error('Error al obtener datos de la API:', error));

La aplicación debe actualizar los datos en tiempo real cuando el usuario seleccione una nueva ubicación. Para lograr esto, podemos utilizar la función fetch para realizar una petición a la API cada vez que el usuario cambie de ubicación.

Mostrar pronóstico diario con gráfico de temperatura

El pronóstico diario es una de las características más importantes de la aplicación. Se muestra una gráfica de líneas que representa la evolución de la temperatura durante la semana. La gráfica debe incluir la temperatura máxima y mínima para cada día, así como un punto y una etiqueta que resalten la temperatura actual dentro del gráfico.

// Mostrar pronóstico diario con gráfico de temperatura
const pronosticoDiario = data.forecast.forecastday;
const temperaturaActual = data.current.temp_c;
const gráfico = document.getElementById('gráfico');

// Crear el gráfico
const ctx = gráfico.getContext('2d');
const gráficoData = {
  labels: pronosticoDiario.map(día => día.date),
  datasets: [{
    label: 'Temperatura',
    data: pronosticoDiario.map(día => día.day.avgtemp_c),
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgba(255, 99, 132, 1)',
    borderWidth: 1
  }]
};
const gráficoOptions = {
  title: {
    display: true,
    text: 'Pronóstico diario de temperatura'
  },
  scales: {
    yAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'Temperatura (°C)'
      }
    }]
  }
};

// Dibujar el gráfico
new Chart(ctx, {
  type: 'line',
  data: gráficoData,
  options: gráficoOptions
});

La aplicación debe mostrar la temperatura máxima y mínima para cada día, así como un punto y una etiqueta que resalten la temperatura actual dentro del gráfico. Al deslizar el dedo sobre el gráfico, se muestra información detallada del día seleccionado.

Mostrar probabilidad de lluvia por hora

La probabilidad de lluvia es otra característica importante de la aplicación. Se presenta una sección con barras horizontales que indican la probabilidad de lluvia para las próximas horas. Cada barra representa un rango horario (por ejemplo, 7 PM, 8 PM, 9 PM, 10 PM). El color de la barra cambia de intensidad según el porcentaje de lluvia.

// Mostrar probabilidad de lluvia por hora
const probabilidadLluvia = data.forecast.forecastday;
const gráfico = document.getElementById('gráfico');

// Crear el gráfico
const ctx = gráfico.getContext('2d');
const gráficoData = {
  labels: probabilidadLluvia.map(día => día.date),
  datasets: [{
    label: 'Probabilidad de lluvia',
    data: probabilidadLluvia.map(día => día.day.precipprob),
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    borderColor: 'rgba(54, 162, 235, 1)',
    borderWidth: 1
  }]
};
const gráficoOptions = {
  title: {
    display: true,
    text: 'Probabilidad de lluvia por hora'
  },
  scales: {
    yAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'Probabilidad de lluvia (%)'
      }
    }]
  }
};

// Dibujar el gráfico
new Chart(ctx, {
  type: 'bar',
  data: gráficoData,
  options: gráficoOptions
});

La aplicación debe mostrar el porcentaje exacto de probabilidad de lluvia en el lado derecho de cada barra.

Mostrar horarios de amanecer y atardecer

Los horarios de amanecer y atardecer son características importantes de la aplicación. Se presentan dos tarjetas informativas en la parte inferior de la vista:

Amanecer 🌙 con la hora exacta de salida del sol.
Atardecer ☀️ con la hora exacta en que el sol se oculta.

La aplicación debe indicar el tiempo transcurrido desde el amanecer y cuánto falta para el atardecer.

// Mostrar horarios de amanecer y atardecer
const amanecer = data.current.sunrise;
const atardecer = data.current.sunset;
const tiempoTranscurrido = new Date() - new Date(amanecer);
const tiempoFaltante = new Date(atardecer) - new Date();

// Mostrar el tiempo transcurrido y faltante
const tiempoTranscurridoElement = document.getElementById('tiempo-transcurrido');
const tiempoFaltanteElement = document.getElementById('tiempo-faltante');

tiempoTranscurridoElement.textContent = `Tiempo transcurrido desde el amanecer: ${tiempoTranscurrido / 1000 / 60 / 60} horas`;
tiempoFaltanteElement.textContent = `Tiempo faltante hasta el atardecer: ${tiempoFaltante / 1000 / 60 / 60} horas`;

Navegación y Funcionalidad Extra

La aplicación debe incluir varias funcionalidades adicionales para mejorar la experiencia del usuario.

Almacenamiento de preferencias

La aplicación debe recordar la última ciudad consultada con localStorage. El usuario puede seleccionar una ciudad favorita para que siempre se cargue al abrir la app.

// Almacenamiento de preferencias
const ciudadFavorita = localStorage.getItem('ciudadFavorita');

if (ciudadFavorita) {
  // Cargar la ciudad favorita
  fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${ciudadFavorita}`)
    .then(response => response.json())
    .then(data => {
      // Procesar los datos obtenidos
      const temperaturaActual = data.current.temp_c;
      const pronosticoDiario = data.forecast.forecastday;
      // ...
    })
    .catch(error => console.error('Error al obtener datos de la API:', error));
}

Modo Oscuro / Claro

El usuario puede alternar entre:

Modo claro (fondos claros).
Modo oscuro (fondos oscuros).

La configuración se guarda automáticamente en localStorage.

// Modo Oscuro / Claro
const modoOscuro = localStorage.getItem('modoOscuro');

if (modoOscuro === 'true') {
  // Activar el modo oscuro
  document.body.classList.add('modo-oscuro');
} else {
  // Desactivar el modo oscuro
  document.body.classList.remove('modo-oscuro');
}

Carga optimizada de datos

La aplicación debe mostrar un indicador de carga mientras se obtienen los datos. Si hay un error con la API, aparece un mensaje de error en la interfaz en lugar de dejar la pantalla en blanco.

// Carga optimizada de datos
const indicadorCarga = document.getElementById('indicador-carga');

fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${ciudad}`)
  .then(response => response.json())
  .then(data => {
    // Procesar los datos obtenidos
    const temperaturaActual = data.current.temp_c;
    const pronosticoDiario = data.forecast.forecastday;
    // ...
  })
  .catch(error => {
    // Mostrar un mensaje de error
    indicadorCarga.textContent = 'Error al obtener datos de la API';
  });

En resumen, la implementación de la aplicación de pronóstico del tiempo requiere una combinación de técnicas y funcionalidades para proporcionar una experiencia del usuario atractiva y útil. La aplicación debe consumir datos de la API, mostrar pronóstico diario con gráfico de temperatura, probabilidad de lluv
Preguntas y Respuestas sobre la Aplicación de Pronóstico del Tiempo

En la primera parte de esta serie, exploramos la planificación y diseño de la aplicación de pronóstico del tiempo. En la segunda parte, nos enfocamos en la implementación de la aplicación, cubriendo los detalles técnicos y funcionales que hacen que la aplicación sea una herramienta útil y atractiva para los usuarios.

A continuación, presentamos una serie de preguntas y respuestas que abordan algunas de las dudas más comunes sobre la aplicación de pronóstico del tiempo.

Pregunta 1: ¿Cómo funciona la aplicación de pronóstico del tiempo?

Respuesta: La aplicación de pronóstico del tiempo consume datos de la API de pronóstico del tiempo, que proporciona información detallada sobre la temperatura, la lluvia, el viento y otros factores meteorológicos. La aplicación procesa estos datos y los muestra en una interfaz de usuario atractiva y fácil de usar.

Pregunta 2: ¿Cuáles son las características principales de la aplicación de pronóstico del tiempo?

Respuesta: Las características principales de la aplicación de pronóstico del tiempo incluyen:

Pronóstico diario con gráfico de temperatura
Probabilidad de lluvia por hora
Horarios de amanecer y atardecer
Almacenamiento de preferencias
Modo Oscuro / Claro
Carga optimizada de datos

Pregunta 3: ¿Cómo se almacenan las preferencias del usuario?

Respuesta: Las preferencias del usuario se almacenan en localStorage, lo que permite que la aplicación recuerde la última ciudad consultada y la ciudad favorita del usuario.

Pregunta 4: ¿Cómo se activa y desactiva el modo oscuro?

Respuesta: El modo oscuro se activa y desactiva mediante la configuración de localStorage. Si el usuario selecciona el modo oscuro, la aplicación lo activará automáticamente.

Pregunta 5: ¿Qué pasa si hay un error con la API?

Respuesta: Si hay un error con la API, la aplicación mostrará un mensaje de error en la interfaz de usuario en lugar de dejar la pantalla en blanco.

Pregunta 6: ¿Cómo se actualiza la aplicación con nuevos datos?

Respuesta: La aplicación se actualiza con nuevos datos mediante la petición de datos a la API de pronóstico del tiempo. La aplicación procesa estos datos y los muestra en la interfaz de usuario.

Pregunta 7: ¿Es la aplicación de pronóstico del tiempo compatible con dispositivos móviles?

Respuesta: Sí, la aplicación de pronóstico del tiempo es compatible con dispositivos móviles y puede ser utilizada en teléfonos inteligentes y tabletas.

Pregunta 8: ¿Cómo se puede personalizar la aplicación de pronóstico del tiempo?

Respuesta: La aplicación de pronóstico del tiempo puede ser personalizada mediante la configuración de localStorage. El usuario puede seleccionar la ciudad favorita, activar o desactivar el modo oscuro y más.

Pregunta 9: ¿Qué pasa si el usuario no tiene conexión a Internet?

Respuesta: Si el usuario no tiene conexión a Internet, la aplicación mostrará un mensaje de error en la interfaz de usuario. La aplicación no podrá obtener nuevos datos y mostrarlos en la interfaz de usuario.

Pregunta 10: ¿Cómo se puede obtener ayuda y soporte técnico para la aplicación de pronóstico del tiempo?

Respuesta: El usuario puede obtener ayuda y soporte técnico para la aplicación de pronóstico del tiempo mediante el contacto con el equipo de desarrollo o a través de la documentación oficial de la aplicación.

En resumen, la aplicación de pronóstico del tiempo es una herramienta útil y atractiva que proporciona información detallada sobre la temperatura, la lluvia, el viento y otros factores meteorológicos. La aplicación es compatible con dispositivos móviles y puede ser personalizada mediante la configuración de localStorage. Si tienes alguna pregunta o necesitas ayuda, no dudes en contactar con el equipo de desarrollo o a través de la documentación oficial de la aplicación.