Introducción

Hace algún tiempo dejé los “estudios” que estaba realizando en freecodecamp.org. Recuerdo que me frustré porque no pude terminar la app que mostraba el clima en la ubicación del usuario. Eso fue porque quería que quedara perfecta.

El tiempo pasó y lo olvidé, pero apenas lo retomé. Y aunque no quedó perfecta, quedó.

Por eso hoy vengo a explicar cómo la hice y qué cosas utiliza. No es un tutorial, porque me llevaría mucho tiempo explicar el funcionamiento de cada cosa. Será como un repaso.

App final

Si quieres ver el resultado final, aquí lo dejo. Puedes analizar el código fuente a tu gusto 🙂

No pude incrustarlo, aquí dejo el link: Ver resultado final

Por cierto, no te mostrará nada si es que no le das permiso de obtener tu ubicación o si no puede obtenerla.

Librerías que utiliza

• VueJS 2.5
• Vuetify 1
• Iconos y fuentes de Google
• Iconos de Weather Icons

Obteniendo ubicación

Para obtener la ubicación del usuario utilicé navigator.geolocation.getCurrentPosition. Esto toma 3 parámetros, que son, en orden:

1. Función callback si todo va bien. Es decir, si el usuario acepta darnos su ubicación y si es que se puede determinar la ubicación.
2. Función callback si algo sale mal. Esto pasa si el usuario no quiere dar permisos para acceder a la ubicación, o si el dispositivo no tiene algo para determinar la ubicación.
3. Objeto con opciones. A este objeto le ponemos propiedades como el tiempo de espera máximo, si queremos una alta precisión y otra cosa que no recuerdo bien.

El fragmento de código es este:

pedirUbicacion() {
   if("geolocation" in navigator){
    navigator.geolocation.getCurrentPosition(
    
    ubicacion =>{
     let coordenadas = ubicacion.coords;
     this.cargandoClima = true;
     fetch(`https://fcc-weather-api.glitch.me/api/current?lat=${coordenadas.latitude}&lon=${coordenadas.longitude}`)
     .then(respuesta => {
      return respuesta.json();
     })
     .then(datosClima => {
      this.clima = datosClima;
      this.dialogo = true;
      console.log(datosClima);
     })
     .finally(() => {
      this.cargandoClima = false;
     });
    }, 
    () => {
     alert("No pude obtener tu ubicación. Intenta más tarde.")
    },
    {
     enableHighAccuracy: true,
    }
    );
   }else alert("Lo siento, tu navegador no tiene soporte para obtener tu ubicación")
  } 

Con eso ya lo tenía. Ahora, cuando VueJS me informara que la aplicación había sido montada, llamaba a esa función.

Obteniendo clima

Para obtener el clima utilicé la API que freecodecamp proporciona. Creo que no es muy precisa pero igual funciona. Dicha API devuelve en formato JSON el clima, la temperatura, el lugar y una imagen. Uno sólo le manda la latitud y longitud obtenidas en el paso anterior.

Para hacer la petición, utilicé fetch, que ya viene incluida en las nuevas versiones de Javascript. El código queda así:

fetch(`https://fcc-weather-api.glitch.me/api/current?lat=${coordenadas.latitude}&lon=${coordenadas.longitude}`)
.then(respuesta => {
  return respuesta.json();
})
.then(datosClima => {
  this.clima = datosClima;
  this.dialogo = true;
  console.log(datosClima);
})
.finally(() => {
  this.cargandoClima = false;
});

Lo de this.cargandoClima es para mostrar la animación de “cargando” en el botón de la esquina inferior derecha.

Iconos y estimación de la hora del día

El icono cambia dependiendo del clima. Si llueve, muestra un icono de lluvia. Si está despejado, también. Pero aparte de eso, muestra una luna o un sol. Para estimar la hora, utilicé esto:

esDeDia(){
 let horaDelDia = (new Date()).getHours();
 return horaDelDia >= 7 && horaDelDia <= 19;
}

Según yo, sería de día si la hora actual (del 0 al 23) está entre 7 y 19. Es decir, desde las 7 de la mañana hasta las 7 de la noche.

Y para los iconos, como ya dije, utilicé la librería Weather icons. Dicha librería provee iconos con un sol y una luna; es decir, para el día y la noche. Entonces haciendo uso de lo que me devolvía el clima, hice un switch para componer el icono. Este es el código que utilicé:

icono(){
  let clase = {
    'wi': true,
    'display-4': true
  },
  esDeDia = this.esDeDia(),
  icono = "";
  switch (this.clima.weather[0].main.toLowerCase()) {
    case 'clouds':
      icono = esDeDia ? 'wi-day-cloudy' : 'wi-night-cloudy';
      break;
    case 'clear':
      icono = esDeDia ? 'wi-day-sunny' : 'wi-night-clear';
      break;
    case 'drizzle':
      icono = esDeDia ? 'wi-day-rain-mix' : 'wi-night-rain-mix';
      break;
    case 'rain':
      icono = esDeDia ? 'wi-day-rain' : 'wi-night-rain';
      break;
    case 'snow':
      icono = esDeDia ? 'wi-day-snow' : 'wi-night-snow';
      break;
    case 'thunderstorm':
      icono = esDeDia ? 'wi-day-thunderstorm' : 'wi-night-thunderstorm';
      break;
    }
  clase[icono] = true;
  return clase;
}

Conversión de grados Celsius a Fahrenheit

Para terminar, hice que se pudiera cambiar entre grados F y C. Aquí el código:

aFahrenheit(celsius){
  return celsius * 9 / 5 + 32;
}

No programé la conversión de F a C, porque la API da la temperatura en Celsius. Así que sólo tenía que convertir a Fahrenheit, y si el usuario quería Celsius, no hacía nada, mostraba los originales.

Conclusión

Al final de todo, quedó bien. Y no fue mucho trabajo terminarla.