HTML, CSS, JavaScript Y OpenWeatherMap-Explorando el Clima a Través del Desarrollo Web

Crear una Aplicación del Clima con JavaScript Puro: Un Viaje Paso a Paso

¡Bienvenido a este emocionante viaje donde aprenderemos a construir una aplicación web que te permitirá consultar la temperatura actual de cualquier ciudad del mundo! En este tutorial, nos sumergiremos en los fundamentos de HTML, CSS y JavaScript para crear una aplicación atractiva y funcional que aprovecha la API del clima de OpenWeatherMap.

¿Qué vamos a aprender?

Conceptos Básicos: HTML, CSS, y JavaScript: Antes de sumergirnos en la creación de nuestra aplicación del clima, es esencial comprender los lenguajes que utilizaremos. HTML (HyperText Markup Language) proporciona la estructura de nuestra página, CSS (Cascading Style Sheets) le da estilo y presenta una apariencia atractiva, mientras que JavaScript agrega la interactividad y permite la comunicación con APIs externas.

APIs: ¿Qué son y por qué son importantes?

API significa Interfaz de Programación de Aplicaciones y actúa como un puente que permite que diferentes aplicaciones se comuniquen entre sí. En nuestro caso, la API del clima nos proporciona datos climáticos actualizados que podemos integrar en nuestra aplicación. ¿El beneficio? Accedemos a información precisa sin tener que almacenarla nosotros mismos.

¿Qué es la API del Clima de OpenWeatherMap?

OpenWeatherMap ofrece una API del clima que brinda acceso a datos meteorológicos detallados de prácticamente cualquier ubicación en el planeta. Puedes obtener información sobre la temperatura actual, la humedad, la velocidad del viento y más. En este tutorial, aprenderemos cómo consumir esta API utilizando JavaScript puro y cómo presentar estos datos de manera atractiva en nuestra aplicación web.

Paso 1: Configuración del Proyecto

Antes de sumergirnos en la codificación, necesitamos asegurarnos de tener una clave de API de OpenWeatherMap. Esta clave es esencial para autenticarnos y acceder a los datos climáticos proporcionados por la API. Aquí te dejo una guía paso a paso sobre cómo obtener tu propia clave:

1.1 Regístrate en OpenWeatherMap (https://openweathermap.org/)

  1. Dirígete al sitio web de OpenWeatherMap: https://home.openweathermap.org/
  2. Haz clic en «Sign Up» o «Sign In» si ya tienes una cuenta. Si es tu primera vez, deberás crear una cuenta registrándote con tu dirección de correo electrónico.
  3. Después de iniciar sesión, accede a tu panel de control o dashboard.

1.2 Accede a la Sección de Claves de API

Dentro del panel de control, busca la sección que se llama «API keys» o «Claves de API».

  1. https://home.openweathermap.org/api_keys
  2. Al entrar veras los siguientes datos.
  3. Key, Name, Status, Actions, [Create key]

Si aún no tienes una clave, busca la opción para generar una nueva clave de API. Si ya tienes una, asegúrate de que esté activa y copia esa clave.

1.3 Copia tu Clave de API

Una vez que hayas generado o seleccionado una clave de API, cópiala. Esta clave es como una contraseña que utilizaremos en nuestro código para autenticarnos y acceder a la información del clima.
¡Listo! Ahora tienes tu clave de API de OpenWeatherMap, y estás listo para incorporarla en nuestro proyecto y comenzar a construir nuestra aplicación del clima. ¡Sigamos al siguiente paso del tutorial!

Paso 2: Estructura HTML

Creamos la estructura básica de nuestro documento HTML:

 

Paso 3: Codigo de la Estructura HTML


<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Agregar enlaces a las hojas de estilo y la biblioteca de iconos Font Awesome -->
    <!-- ... -->
</head>

<body>

    <div class="container">
        <h1>Consulta el Clima</h1>
        <input type="text" id="inputCiudad" placeholder="Ingresa la ciudad">
        <button onclick="obtenerTemperatura()" id="botonVerClima">Ver Clima</button>
        <p id="infoClima"></p>
    </div>

    <!-- Agregar enlaces a scripts JS al final del cuerpo del documento -->
    <!-- ... -->

</body>

</html>

Paso 3: Estilos CSS

Añadimos estilos CSS para darle un aspecto agradable a nuestra aplicación:

/* … (Estilos CSS) … */

En el codigo, tenemos un archivo style.css, en el vamos a explicar todo lo que tenemos y como lo aplicamos para ver nuestra aplicacion con el estilo que tiene:

COFIGO CSS:

CODIGO CSS:

<style>
        body {
            background-image: radial-gradient(circle, #ffcc00, #ff6600);
            background-image: radial-gradient(circle, #66ffcc, #ff33cc);

            text-align: center;
            padding: 50px;
        }

        /*
        body {
            background: radial-gradient(circle at center, #ffe6e6 0%, #ffcccb 20%, #ffd700 40%, #90ee90 70%, #ffffff 100%);
        
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        */
        .container {
            width: 70%;
            height: 100%;
            margin: 0 auto;
            text-align: center;
        }

        h1 {
            color: blue;
            font-size: 35px;
            font-weight: 700;
            text-align: center;
            margin: 20px;
            padding-top: 40px;
        }

        p {
            color: rgb(255, 225, 0);
            font-size: 35px;
            font-weight: 700;
            text-align: center;
            margin: 20px;
            padding-top: 40px;
        }

        #inputCiudad {
            padding: 8px;
            margin: 20px;
            margin-bottom: 10px;
            text-align: center;
            color: rgb(255, 77, 0);
            font-weight: 700;
            font-size: 35px;
        }

        #botonVerClima {
            padding: 8px 20px;
            font-size: 20px;
            background-color: greenyellow;
        }

        #infoClima {
            font-size: 25px;
            color: black;
            background-color: yellow;
            padding: 10px;
            margin-top: 20px;
        }
</style>

Paso 4: Lógica JavaScript

Ahora, implementamos la lógica en JavaScript para obtener la temperatura de la API del clima:


 <script>
            // Esta función se activa cuando se presiona el botón "Ver Clima"
            function obtenerTemperatura() {
                // Obtiene el valor ingresado en el campo de texto 'inputCiudad'
                const ciudad = document.getElementById('inputCiudad').value;

                // Clave de API proporcionada por OpenWeatherMap
                const api_key = 'PON TU API AQUI'; // Reemplaza 'TU_API_KEY' con tu propia clave de API de OpenWeatherMap

                // URL de la API que proporciona la información del clima para una ciudad específica
                const url = `http://api.openweathermap.org/data/2.5/weather?q=${ciudad}&appid=${api_key}&units=metric`;

                // Realiza una solicitud GET a la API utilizando fetch
                fetch(url)
                    // Maneja la respuesta de la API
                    .then(response => {
                        // Verifica si la respuesta de la API es exitosa
                        if (!response.ok) {
                            // Si hay un error en la respuesta, lanza un error
                            throw new Error('Error al obtener los datos del clima');
                        }
                        // Si la respuesta es exitosa, devuelve los datos en formato JSON
                        return response.json();
                    })
                    // Maneja los datos JSON recibidos
                    .then(data => {
                        // Extrae la temperatura actual de los datos recibidos
                        const temperature = data.main.temp;

                        // Muestra la información del clima en el elemento HTML 'infoClima'
                        const infoClima = document.getElementById('infoClima');
                        infoClima.innerHTML = `La temperatura actual en ${ciudad} es: <span style="color: black; font-size: 25px;">${temperature} grados Celsius</span>`;
                    })
                    // Maneja cualquier error que pueda ocurrir durante la solicitud a la API
                    .catch(error => {
                        // Muestra un mensaje de error en caso de un problema durante la solicitud
                        console.error('Hubo un error:', error);
                        const infoClima = document.getElementById('infoClima');
                        infoClima.innerText = 'Hubo un error al obtener la información del clima';
                        infoClima.style.backgroundColor = 'red';
                    });
            }
        </script>

Paso 5: Obtener la Clave de API:

Expliquemos cada parte del código en detalle en los siguientes pasos del tutorial. Antes de ejecutar el código, necesitarás obtener tu propia clave de API de OpenWeatherMap. Esta clave te permite acceder a su información meteorológica. Reemplaza ‘TU API KEY’ con tu clave personalizada en la línea const api_key = ‘TU_API_KEY’;.

Paso 6: Haciendo la Solicitud a la API:

En el código JavaScript, la URL de la API se construye combinando la ciudad ingresada por el usuario y la clave de API. Explica cómo se construye esta URL utilizando la plantilla de cadena (const url = ‘http://api.openweathermap.org/data/2.5/weather?q=${ciudad}&appid=${api_key}&units=metric’;) y cómo se realiza la solicitud GET utilizando fetch.

Paso 7: Manejo de la Respuesta de la API:

Explica cómo se maneja la respuesta de la API una vez que se recibe. Mostrar cómo se verifica si la respuesta es exitosa (if (!response.ok) { throw new Error(‘Error al obtener los datos del clima’); }) y luego cómo se extrae la temperatura de la respuesta JSON (const temperature = data.main.temp;).

Paso 8: Mostrar la Información en la Interfaz de Usuario:

Describe cómo se actualiza dinámicamente el contenido HTML para mostrar la temperatura en la interfaz de usuario. Puedes mencionar cómo se utiliza getElementById para encontrar el lugar donde se mostrará la temperatura (const infoClima = document.getElementById(‘infoClima’);) y cómo se actualiza el contenido utilizando innerHTML (infoClima.innerHTML = ‘La temperatura actual en ${ciudad} es: <span style=»color: black; font-size: 25px;»>${temperature} grados Celsius</span>’;).

Paso 9: Estilos Responsivos:


/* Media queries para diferentes tamaños de pantalla */
@media screen and (max-width: 768px) {

/* Estilos para pantallas más pequeñas */
.container {
width: 80%;
}

h1 {
font-size: 28px;
}
p {
color: rgb(255, 225, 0);
font-size: 25px;
font-weight: 700;
text-align: center;
margin: 20px;
padding-top: 40px;
}
#inputCiudad {
padding: 8px;
margin: 20px;
margin-bottom: 10px;
text-align: center;
color: rgb(255, 77, 0);
font-weight: 700;
font-size: 35px;
}

#botonVerClima {
font-size: 16px;
}

#infoClima {
font-size: 20px;
}
}

@media screen and (max-width: 480px) {
/* Estilos para pantallas aún más pequeñas */
.container {
width: 90%;
}

h1 {
font-size: 24px;
}

#inputCiudad {
display: flex;
justify-content: space-between; /* Centra horizontalmente y agrega espacio a ambos lados */
font-size: 16px;
width: 80%;
text-align: center;
}

#botonVerClima {
font-size: 25px;
}

#infoClima {
font-size: 18px;
}
}

EXPLICACION:

body: Define los estilos para el cuerpo de la página. Establece un fondo con un gradiente radial que cambia de colores dependiendo del tamaño de la pantalla. Además, alinea el texto al centro y agrega un espacio de 50px alrededor del contenido.

.container: Establece estilos para un contenedor que envuelve el contenido principal. Le asigna un ancho del 70% de la pantalla y lo centra horizontalmente.

h1 y p: Definen el estilo para los encabezados y párrafos respectivamente. Cambian el color, el tamaño de fuente, el peso y el espaciado para que se vean atractivos y legibles.

#inputCiudad: Establece el estilo para un campo de entrada de texto. Define el tamaño de fuente, el espaciado, el color y la alineación.

#botonVerClima: Define el estilo para un botón que se utilizará para ver el clima. Ajusta el tamaño del texto y el color de fondo.

#infoClima: Establece el estilo para mostrar la información del clima. Define el tamaño de fuente, el color de texto y el color de fondo para destacar la información.

Luego, vienen las secciones de Media Queries que ajustan los estilos según el tamaño de la pantalla:

@media screen and (max-width: 768px): Aquí se aplican estilos específicos para pantallas más pequeñas, como tabletas. Reduce el tamaño del contenedor, los encabezados, el tamaño de fuente y hace ajustes en el botón y la información del clima.

@media screen and (max-width: 480px): Estos estilos son para pantallas aún más pequeñas, como teléfonos móviles. Reducen aún más el tamaño del contenedor, encabezados, tamaño de fuente y hacen que el campo de entrada de ciudad sea más flexible y el botón y la información del clima sean más grandes y legibles.

Veamos como ha quedado la App

Conclusión

En esta emocionante travesía, hemos construido una aplicación web simple pero poderosa que nos permite conocer la temperatura actual de cualquier ciudad. Hemos utilizado la combinación de HTML, CSS y JavaScript para dar vida a esta maravillosa aplicación del clima.

HTML nos permitió crear la estructura básica de la página, desde el campo de entrada para la ciudad hasta las secciones donde mostramos la información del clima. Con CSS, dimos estilo y vida a cada elemento, jugando con colores, tamaños de fuente y diseños responsivos para garantizar una experiencia visual atractiva en diferentes dispositivos.

Luego, JavaScript se convirtió en el verdadero motor detrás de la aplicación. Nos permitió interactuar con el usuario, capturar la ciudad ingresada, realizar solicitudes a la API de OpenWeatherMap y mostrar dinámicamente la temperatura en la interfaz de usuario.

Para mejorar aún más esta aplicación, podríamos considerar algunas mejoras como agregar más detalles climáticos, como la sensación térmica o la velocidad del viento. También podríamos implementar un pronóstico extendido o agregar imágenes representativas del clima. Además, podríamos trabajar en una interfaz aún más atractiva y funcional, quizás permitiendo la selección de unidades de temperatura o mostrando información histórica, incluso agregar una lista de paises y poder seleccionarlo directamente en el listado etc.

Comparte este Contenido en tus Redes Sociales

Deja un comentario