Advertisement
  1. Web Design
  2. HTML

Crea una aplicación meteorológica simple con JavaScript puro

by
Read Time:16 minsLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

En el tutorial de hoy, aprenderemos cómo crear una aplicación meteorológica simple pero totalmente funcional con JavaScript puro. Tenemos muchas cosas interesantes que cubrir, así que coge una taza de café ¡y comencemos!

Lo que vamos a construir

Este es un video introductorio que ejemplifica la funcionalidad de la aplicación que vamos a crear:

Aquí está la demostración en CodePen para que la bifurques y juegues con ella:

Nota: Este tutorial asume que estás familiarizado con AJAX, una técnica esencial para el front-end. Si apenas estás comenzando, consulta esta serie.

1. Colocando los andamios de la aplicación

Antes de comenzar a crear nuestra aplicación, hay algunas cosas que debemos tener en cuenta.

Encuentra una API de meteorología

Primero lo primero, tenemos que encontrar un proveedor que nos permita incorporar sus datos meteorológicos en nuestra aplicación. Afortunadamente, existen varios proveedores diferentes para desarrollar aplicaciones meteorológicas. La mayoría de ellos incluyen un paquete gratuito junto con suscripciones prémium cuyos niveles dependen de los servicios o características.

En nuestro caso vamos a usar OpenWeatherMap, una de las opciones gratuitas más populares. Para aprovechar sus capacidades, primero debemos registrarnos para obtener una clave API:

Register for an APIRegister for an APIRegister for an API

Este servicio viene con diferentes paquetes. Como puedes ver en la imagen a continuación, el de inicio (gratuito) permite 60 llamadas por minuto, lo que se adapta a nuestras necesidades:

The available packages for the OpenWeatherMap APIThe available packages for the OpenWeatherMap APIThe available packages for the OpenWeatherMap API

Entonces, antes de continuar, por favor asegúrate de haberte registrado para obtener una clave API. Más adelante incluiremos esa clave en nuestro script.

Ten en cuenta que la mejor manera de probar la aplicación es bifurcando la demostración de CodePen e incluyendo tu propia clave. Si todos compartimos la misma clave, la aplicación probablemente no funcionará debido a los límites en las llamadas a la API.

Encuentra iconos de meteorología

A continuación, para los propósitos de este tutorial vamos a necesitar un conjunto de iconos de meteorología. Vale la pena señalar que OpenWeatherMap viene con su propio conjunto de iconos y les echaremos un vistazo. Sin embargo, iremos un paso más adelante y usaremos algunos personalizados.

Una vez más, aprovecharemos la biblioteca de Envato Elements y descargaremos un paquete de iconos vectoriales de meteorología:

The custom weather icons were going to use from Envato ElementsThe custom weather icons were going to use from Envato ElementsThe custom weather icons were going to use from Envato Elements
Los iconos de meteorología personalizados de Envato Elements que vamos a usar

2. Define el marcado de la página

Vamos a definir dos secciones.

La primera sección incluirá un encabezado, un formulario de búsqueda y un elemento span vacío. Este elemento se volverá visible con un mensaje apropiado bajo ciertas condiciones. Específicamente, si no hay datos meteorológicos disponibles para una ciudad solicitada o si ya se conocen los datos de esta ciudad.

La segunda sección incluirá una lista de ciudades. Esta no contendrá ninguna ciudad de forma predeterminada. Pero, a medida que comenzamos a buscar el clima para una ciudad específica, y si hay datos meteorológicos disponibles, se agregará un elemento de lista correspondiente (ciudad) a la lista desordenada.

Este es el marcado inicial de la página:

Nota: En nuestra demostración de CodePen, el atributo autofocus del campo de búsqueda no funcionará. De hecho arrojará el siguiente error, el cual puedes ver si abres la consola de tu navegador:

The cross-origin error due to the autofocus attributeThe cross-origin error due to the autofocus attributeThe cross-origin error due to the autofocus attribute

Sin embargo, si ejecutas esta aplicación localmente (no como un proyecto de CodePen), este problema no existirá.

Y aquí está el marcado asociado con un elemento de la lista que vamos a generar de forma dinámica a través de JavaScript:

3. Especifica algunos estilos básicos

Con el marcado para la aplicación listo, vamos a seguir adelante con el CSS. El primer paso, como siempre, es especificar algunas variables CSS y estilos comunes de restablecimiento:

4. Establece los estilos principales

Ahora discutamos los estilos principales de nuestra aplicación.

Estilos de la sección #1

Primero agregaremos algunos estilos sencillos a los elementos de la primera sección.

En pantallas medianas y más grandes (>700px), el diseño debería verse así:

The layout of the first section on large screensThe layout of the first section on large screensThe layout of the first section on large screens

En pantallas más pequeñas, los elementos del formulario se separarán en dos líneas:

The layout of the first section on small screensThe layout of the first section on small screensThe layout of the first section on small screens

Estos son los estilos asociados:

Estilos de la sección #2

Usaremos CSS Grid para acomodar los elementos de la lista. Recuerda que cada elemento de la lista representará a una ciudad. Su ancho dependerá del tamaño de la pantalla.

En pantallas grandes (>1000px) tendremos un diseño de cuatro columnas.

The unordered list layout on large screensThe unordered list layout on large screensThe unordered list layout on large screens

Luego, en pantallas medianas (>700px y ≤1000px) un diseño de tres columnas, en pantallas pequeñas (>500px y ≤700px) un diseño de dos columnas, y finalmente en pantallas extra pequeñas (≤500px) todos los elementos estarán apilados.

Estos son los estilos correspondientes:

Cada columna se verá como una tarjeta con una sombra inferior que se agregará a través del pseudoelemento ::after.

Dentro de la tarjeta colocaremos información meteorológica sobre la ciudad solicitada. Esto vendrá de nuestra solicitud, aparte de los iconos. Esos iconos, que como se mencionó anteriormente se obtuvieron de Envato Elements, mostrarán las condiciones climáticas actuales de esta ciudad y coincidirán con los iconos equivalentes de OpenWeatherMap.

The card layout

A continuación puedes ver una parte del CSS necesario para este diseño:

5. Agrega JavaScript

En este punto, estamos listos para crear la funcionalidad principal de nuestra aplicación. ¡Vamos a hacerlo!

Al enviar el formulario

Cada vez que un usuario envíe el formulario presionando la tecla Enter o el botón Submit (Enviar), haremos dos cosas:

  1. Detener el envío del formulario, para así evitar volver a cargar la página.
  2. Recuperar el valor que está contenido en el campo de búsqueda.

Este es el código inicial:

A continuación, verificaremos si hay elementos de lista (ciudades) dentro de la segunda sección.

Realiza una solicitud AJAX

Comenzaremos asumiendo que la lista está vacía. Dicho eso, nunca ha ejecutado ninguna solicitud AJAX en el pasado. En tal caso, ejecutaremos una solicitud a la API de OpenWeatherMap y enviaremos los siguientes parámetros:

  1. El nombre de la ciudad (por ejemplo, Atenas) o el nombre de la ciudad junto con el código del país separados por coma (por ejemplo, Atenas, gr), que será el valor del campo de búsqueda.
  2. La clave API. Nuevamente, debes usar tu propia clave para evitar errores inesperados debido a los límites en las llamadas a la API.
  3. La unidad de temperatura de la ciudad solicitada. En nuestro caso usaremos Celsius.

Con todo lo anterior en mente y siguiendo la documentación de la API, nuestro URL de solicitud debería verse más o menos así:

Tenemos muchas opciones para realizar la solicitud AJAX. Podemos usar la simple y antigua API XMLHttpRequest, la API Fetch, que es más nueva, o incluso una biblioteca de JavaScript como jQuery y Axios. Para este ejemplo usaremos la API Fetch.

Para obtener los datos deseados tenemos que hacer lo siguiente:

  • Enviar el URL al que queremos acceder al método fetch().
  • Este método devolverá una "Promesa" que contendrá la respuesta (un objeto Response). Pero esta no será la respuesta real, sino solamente una respuesta HTTP. Para obtener los datos de la respuesta en el formato JSON deseado (este es el formato de datos predeterminado de OpenWeatherMap), utilizaremos el método json() del objeto Response.
  • Este método devolverá otra "Promesa". Cuando se cumpla, los datos estarán disponibles para su manipulación.
  • Si por alguna razón la solicitud no tiene éxito, aparecerá un mensaje apropiado en la pantalla.

Entonces nuestra solicitud AJAX se vería más o menos así:

Consejo: En lugar de encadenar instrucciones then(), pudimos haber usado el enfoque más nuevo y legible async/await para la solicitud AJAX..

An example of the response dataAn example of the response dataAn example of the response data

Aquí hay dos cosas que tenemos que discutir:

  1. Si ves nuevamente la imagen de la respuesta mostrada anteriormente, notarás que la API devuelve un código icon (por ejemplo, "50d") que contiene las condiciones climáticas actuales para la ciudad elegida. En base a este código, podemos construir el URL del icono y mostrarlo en la tarjeta mediante la etiqueta img.
  2. Dentro del elemento .city-name de cada elemento de la lista, agregaremos el atributo data-name con el valor cityName,countryCode (por ejemplo, Madrid, es). Más adelante usaremos este valor para evitar solicitudes duplicadas.

Restablece las cosas

Por último, después de la solicitud AJAX limpiaremos el contenido del elemento .msg, el valor del campo de búsqueda, y también asignaremos el foco a ese campo:

¡Excelente trabajo, amigos! Acabamos de crear la primera versión de nuestra aplicación. Cuando coloques tu propia clave API y busques una ciudad, deberás ver un diseño de tarjetas similar a ese:

The unordered list layout with the default iconsThe unordered list layout with the default iconsThe unordered list layout with the default icons

Esta es la demostración relacionada en CodePen:

Agrega iconos personalizados

Ahora personalicemos un poco la apariencia de nuestra aplicación. Vamos a reemplazar los iconos PNG predeterminados de OpenWeatherMap con los SVGs que descargamos anteriormente de Envato Elements.

Para hacer esto, he cargado todos los iconos nuevos a CodePen (a través del Asset Manager, o gestor de recursos, ya que soy un miembro PRO) y he cambiado sus nombres para que coincidan con los nombres y las condiciones climáticas de los iconos originales, de esta manera:

Mapping the custom icons with the original onesMapping the custom icons with the original onesMapping the custom icons with the original ones

Después, en el código, solo tenemos que cambiar la ruta del icono:

Evita las solicitudes duplicadas

Todavía hay algo que tenemos que arreglar. Hasta ahora, cuando realizamos una solicitud AJAX exitosa se crea un elemento de lista. Dicho eso, la lista puede contener múltiples elementos de lista idénticos haciendo referencia a la misma ciudad, de esta forma:

Identical list itemsIdentical list itemsIdentical list items

Esa es una mala experiencia para el usuario, así que asegurémonos de que únicamente se active una sola solicitud para una ciudad específica.

Pero antes de eso, hay otra cosa que debemos tomar en consideración. El mismo nombre de ciudad puede existir en más de un país. Por ejemplo, si buscamos "Athens ("Atenas") en el buscador de OpenWeatherMap, veremos estos resultados:

Cities that share the same nameCities that share the same nameCities that share the same name

Con todo lo anterior en mente, vamos a escribir un poco de código que garantizará que únicamente se ejecute una sola solicitud por ciudad y por país:

Déjame explicarte qué acciones suceden aquí:

  1. Nuevamente durante el manejo del envío, antes de hacer una solicitud AJAX, verificamos si la lista desordenada está vacía o no. Si no está vacía, eso significa que ya se ha ejecutado al menos una solicitud AJAX exitosa.
  2. A continuación, verificamos si hay algún elemento en la lista cuyo nombre de ciudad o el valor de su atributo data-name sean iguales al valor del campo de búsqueda.
  3. Si es así, eso significa que el usuario ya conoce el clima de esta ciudad, por lo que no es necesario realizar otra solicitud AJAX. Las siguientes acciones serán mostrarles un mensaje relacionado, limpiar el valor del campo de búsqueda y asignarle el foco.

Nota #1: Según he notado, en caso de que busques una ciudad con un máximo de dos letras que no sean representantes de ningún código de país (por ejemplo Atenas, aa), la API no devolverá nada. Por otro lado, si buscas una ciudad junto con al menos tres letras que tampoco sean representantes de ningún código de país (por ejemplo Atenas, aaaa), la API ignorará la parte después de la coma y devolverá todas las ciudades llamadas como la primera parte (por ejemplo, Atenas).

Nota #2: Para este ejercicio tampoco cubriremos el caso especial en el que un país contiene más de una ciudad con el mismo nombre (por ejemplo, Atenas en EE. UU.). Entonces, por ejemplo, si un usuario busca "Atenas, us" solamente aparecerá una ciudad en la pantalla y no más. Para cubrir el escenario ideal, los usuarios deberían saber de alguna manera el ID de la ciudad (por ejemplo, tal vez podemos ponerlos a la disposición del usuario con un menú desplegable) y buscar en base a eso en vez de buscar en base a su nombre.

¡Excelente trabajo, amigos! Acabamos de crear nuestra aplicación. Echemos un vistazo:

Conclusión

¡Y hemos terminado! Este fue realmente un recorrido bastante largo, pero espero que lo hayas disfrutado y que te haya ayudado a mejorar tus habilidades en el front-end.

Una vez más, ¡no olvides poner tu propia clave para probar la aplicación en producción!

Como recordatorio, veamos nuevamente cómo funciona la aplicación:

Como siempre, ¡muchas gracias por leer!

Los siguientes pasos

Hay muchas cosas que puedes hacer para extender la funcionalidad de esta aplicación. Estas son algunas ideas:

  • Usa la geolocalización para obtener la ubicación del usuario, y luego realiza una solicitud AJAX para recuperar los datos meteorológicos de sus ciudades más cercanas.
  • Usa localStorage para conservar los datos anteriores, o incluso una base de datos en tiempo real como Firebase.
  • Usa una biblioteca de gráficos como Highcharts.js para crear un meteograma que ofrezca un pronóstico del tiempo. Si lo haces, este tutorial podría ser de ayuda.
  • Usa una API de imágenes como la API de Flickr para presentar una lista de fotos de cada ciudad como una galería en un lightbox.

Si hay algo más que quieras ver como extensión de una aplicación, ¡dímelo en los comentarios a continuación!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.