Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML

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

by
Difficulty:IntermediateLength:LongLanguages:

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

Final 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 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 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 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 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:


2. 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 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 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 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 data
    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.. .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..
.msg, el valor del campo de búsqueda, y también asignaremos el foco a ese campo::

The unordered list layout with the default icons
Mapping the custom icons with the original ones
Identical list items
buscador de OpenWeatherMap, veremos estos resultados::

Cities that share the same name
    data-name sean iguales al valor del campo de búsqueda.e.
<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.e.

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


<¡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.s.

    solicitud AJAX para recuperar los datos meteorológicos de sus ciudades más cercanas.s. Firebase.>. Highcharts.js para crear un meteograma que ofrezca un pronóstico del tiempo. Si lo haces, este tutorial podría ser de ayuda.p. API de Flickr para presentar una lista de fotos de cada ciudad como una galería en un lightbox.y.

Advertisement
Advertisement
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.