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.
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.
Para obtener la ubicación del usuario utilicé navigator.geolocation.getCurrentPosition. Esto toma 3 parámetros, que son, en orden:
El fragmento de código es este:
Con eso ya lo tenía. Ahora, cuando VueJS me informara que la aplicación había sido montada, llamaba a esa función.
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í:
Lo de this.cargandoClima es para mostrar la animación de “cargando” en el botón de la esquina inferior derecha.
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:
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é:
Para terminar, hice que se pudiera cambiar entre grados F y C. Aquí el código:
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.
Al final de todo, quedó bien. Y no fue mucho trabajo terminarla.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.