Apprendre l'API JavaScript : Guide pour les débutants
Mots clés : API JavaScript, bases de l'API, travail avec fetch.
Introduction
Dans ce tutoriel, nous allons nous familiariser avec le concept d'API (Application Programming Interface) et apprendre à travailler avec elle en JavaScript. Vous apprendrez ce qu'est une API, pourquoi elle est nécessaire, comment envoyer des requêtes, traiter les réponses et intégrer des données dans votre application. À titre d'exemple, nous allons obtenir des données météorologiques à l'aide de l'API gratuite OpenWeatherMap. 🌥 Cela vous permettra de maîtriser le travail avec des services externes dans la pratique et de vous familiariser avec les technologies modernes de développement Web.
Qu'est-ce qu'une API ?
Une API est une interface qui permet à votre application d'interagir avec d'autres services ou programmes. Par exemple, l'API peut vous aider à :
Connaître la météo en temps réel.
Recevoir les taux de change actuels.
Rechercher des images, des vidéos ou d'autres informations.
Pour travailler avec l'API, il faut généralement :
Méthodes HTTP (« GET » pour recevoir des données, « POST » pour envoyer des données, etc.).
Format JSON — la plupart des API renvoient des données dans ce format.
URL API — c'est l'adresse à laquelle les demandes sont envoyées.
Clé API (parfois), qui confirme votre identité.
Les API sont utilisées partout, des applications mobiles aux services Web complexes. Comprendre les API est une étape importante dans le développement des compétences en développement Web.
Ce que nous allons faire
Nous allons créer une application JavaScript simple qui enverra une requête à l'API OpenWeatherMap et affichera la température dans la ville sélectionnée. ⛅ Notre projet comprend :
Développement d'une interface HTML pour l'interaction avec l'utilisateur.
Écriture du code JavaScript pour le traitement des requêtes et des réponses.
Traitement des erreurs pour la commodité de l'utilisateur.
Préparation
Créez un fichier HTML avec la structure de base de la page. Ce fichier sera la base de notre application.
Inscrivez-vous sur le site OpenWeatherMap et obtenez une clé API gratuite. Sans elle, les requêtes API ne fonctionneront pas.
Assurez-vous que votre navigateur prend en charge les fonctionnalités JavaScript modernes telles que
fetch()etasync/await.
Code d'application : structure HTML et exemple JavaScript pour l'API
HTML: Créons une interface pour saisir la ville et afficher la température.
<!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:
Écrivons le code pour obtenir des données météorologiques.
const apiKey = 'YOUR_API_KEY';
// Obtenir des éléments à partir de HTML
const cityInput = document.getElementById('city');
const getWeatherButton = document.getElementById('getWeather');
const weatherResult = document.getElementById('weatherResult');
// Fonction pour obtenir la météo
async function getWeather() {
const city = cityInput.value.trim(); // Nous obtenons la ville saisie
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); // Nous envoyons une demande
if (!response.ok) {
throw new Error('City not found ⚠');
}
const data = await response.json(); // Nous obtenons une réponse au format JSON
const temperature = data.main.temp; // Nous extrayons la température
const description = data.weather[0].description; // Description de la météo
// Affichage du résultat
weatherResult.textContent = `The temperature in ${city} is now ${temperature} ℃, ${description}.`;
} catch (error) {
weatherResult.textContent = error.message;
}
}
// Ajout d'un gestionnaire d'événements
getWeatherButton.addEventListener('click', getWeather);Explication du code
Structure HTML :
Le champ de saisie de la ville (« input ») et le bouton (« button ») permettent à l'utilisateur d'interagir avec l'application.
Le paragraphe (« p ») sert à afficher le résultat.
Connexion JavaScript :
Le fichier « script.js » décrit toute la logique de travail avec l'API.
Fonction getWeather() :
Obtient la ville saisie dans le champ de saisie.
Forme une URL pour une requête API.
Utilise
fetch()pour envoyer une demande.Traite la réponse et extrait la température des données.
Données supplémentaires :
Nous extrayons également la description de la météo pour un résultat plus détaillé.
Traitement des erreurs :
Si la ville n'est pas trouvée ou si une erreur réseau s'est produite, l'utilisateur voit le message correspondant.
Ajout d'un événement :
La fonction est lancée en cliquant sur le bouton « Obtenir la météo ».
Lancement de l'application
Enregistrez les fichiers « index.html » et « script.js » dans un dossier.
Ouvrez le fichier « index.html » dans le navigateur.
Entrez le nom de la ville et cliquez sur « Obtenir la météo ». 🌇
Conclusions
Vous savez maintenant comment travailler avec l'API JavaScript ! Vous avez maîtrisé les bases des requêtes HTTP, appris à utiliser fetch et obtenu une idée de l'interaction avec les services externes. Ces connaissances vous aideront à créer des applications modernes et à approfondir votre compréhension de JavaScript. 🚀
De plus, vous avez appris les bases de l'utilisation de formats de données tels que JSON et avez acquis de l'expérience dans la gestion des erreurs lors de l'interaction avec l'API. Ces compétences sont la base pour travailler avec des technologies avancées dans le développement Web.
Si vous souhaitez continuer à apprendre la programmation, essayez l'application « Kodik ». Vous y trouverez des leçons claires et passionnantes pour les débutants ! 🌐