Aprender la API en JavaScript: una guía para principiantes
Palabras clave: API en JavaScript, conceptos básicos de API, trabajo con fetch.
Introducción
En esta lección, nos familiarizaremos con el concepto de API (Application Programming Interface) y aprenderemos a trabajar con él en JavaScript. Aprenderás qué es una API, por qué es necesaria, cómo enviar solicitudes, procesar respuestas e integrar datos en tu aplicación. Como ejemplo, obtendremos datos meteorológicos utilizando la API gratuita OpenWeatherMap. 🌥 Esto te permitirá dominar el trabajo con servicios externos en la práctica y familiarizarte con las tecnologías modernas de desarrollo web.
¿Qué es una API?
Una API es una interfaz que permite que tu aplicación interactúe con otros servicios o programas. Por ejemplo, una API puede ayudarte a:
Conocer el tiempo en tiempo real.
Recibir los tipos de cambio actuales.
Buscar imágenes, vídeos u otra información.
Para trabajar con la API, generalmente se requiere:
Métodos HTTP ("GET" para recibir datos, "POST" para enviar datos, etc.).
Formato JSON — la mayoría de las API devuelven datos en este formato.
URL API es la dirección a la que se envían las solicitudes.
Clave API (a veces), que confirma tu identidad.
Las API se utilizan en todas partes, desde aplicaciones móviles hasta servicios web complejos. Comprender las API es un paso importante en el desarrollo de habilidades de desarrollo web.
Qué haremos
Crearemos una aplicación JavaScript simple que enviará una solicitud a la API de OpenWeatherMap y mostrará la temperatura en la ciudad seleccionada. ⛅ Nuestro proyecto incluye:
Desarrollo de una interfaz HTML para la interacción con el usuario.
Escribir código JavaScript para procesar solicitudes y respuestas.
Gestión de errores para la comodidad del usuario.
Preparación
Crea un archivo HTML con la estructura básica de la página. Este archivo será la base de nuestra aplicación.
Regístrate en el sitio web OpenWeatherMap y obtén una clave API gratuita. Sin ella, las solicitudes de API no funcionarán.
Asegúrate de que tu navegador admita funciones modernas de JavaScript, como
fetch()yasync/await.
Código de la aplicación: estructura HTML y ejemplo de JavaScript para la API
HTML: Vamos a crear una interfaz para introducir la ciudad y mostrar la temperatura.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Погода</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
input {
padding: 10px;
font-size: 16px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
p {
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>🌤 Узнать погоду</h1>
<input type="text" id="city" placeholder="Enter city">
<button id="getWeather">Получить погоду</button>
<p id="weatherResult"></p>
<script src="script.js"></script>
</body>
</html>JavaScript:
Escribiremos el código para obtener datos meteorológicos.
const apiKey = 'YOUR_API_KEY';
// Obtener elementos de HTML
const cityInput = document.getElementById('city');
const getWeatherButton = document.getElementById('getWeather');
const weatherResult = document.getElementById('weatherResult');
// Función para obtener el tiempo
async function getWeather() {
const city = cityInput.value.trim(); // Obtenemos la ciudad introducida
if (!city) {
weatherResult.textContent = 'Enter the city name! ❌';
return;
}
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
try {
const response = await fetch(url); // Enviando solicitud
if (!response.ok) {
throw new Error('City not found ⚠');
}
const data = await response.json(); // Obtenemos una respuesta en formato JSON
const temperature = data.main.temp; // Extracción de la temperatura
const description = data.weather[0].description; // Descripción del tiempo
// Mostrando el resultado
weatherResult.textContent = `The temperature in ${city} is now ${temperature} ℃, ${description}.`;
} catch (error) {
weatherResult.textContent = error.message;
}
}
// Añadir un controlador de eventos
getWeatherButton.addEventListener('click', getWeather);Explicación del código
Estructura HTML:
El campo de entrada para la ciudad ("input") y el botón ("button") permiten al usuario interactuar con la aplicación.
El párrafo ("p") se utiliza para mostrar el resultado.
Conexión JavaScript:
El archivo «script.js» describe toda la lógica de trabajo con la API.
Función getWeather():
Obtiene la ciudad introducida desde el campo de entrada.
Genera una URL para una solicitud de API.
Utiliza
fetch()para enviar una solicitud.Procesa la respuesta y extrae la temperatura de los datos.
Datos adicionales:
También extraemos la descripción del tiempo para obtener un resultado más detallado.
Tratamiento de errores:
Si no se encuentra la ciudad o se produce un error de red, el usuario ve el mensaje correspondiente.
Añadir un evento:
La función se inicia al hacer clic en el botón "Obtener el tiempo".
Inicio de la aplicación
Guarda los archivos "index.html" y "script.js" en la misma carpeta.
Abre el archivo "index.html" en el navegador.
Introduce el nombre de la ciudad y haz clic en «Obtener el tiempo». 🌇
Conclusiones
¡Ahora ya sabes cómo trabajar con la API en JavaScript! Has dominado los conceptos básicos de las solicitudes HTTP, has aprendido a usar fetch y has obtenido una idea de cómo interactuar con servicios externos. Este conocimiento te ayudará a crear aplicaciones modernas y profundizar tu comprensión de JavaScript. 🚀
Además, aprendiste los conceptos básicos de los formatos de datos, como JSON, y adquiriste experiencia en el manejo de errores al interactuar con las API. Estas habilidades son la base para trabajar con tecnologías avanzadas en el desarrollo web.
Si quieres seguir aprendiendo programación, prueba la aplicación "Kodik". ¡En ella encontrarás lecciones claras y fascinantes para principiantes! 🌐