Description :
Ce dépôt contient un tutoriel détaillé sur l'utilisation des données d'une API externe dans une application Flask. Vous y trouverez les étapes nécessaires pour configurer votre environnement, effectuer des requêtes vers une API externe, traiter les données reçues et les intégrer dans votre application Flask.
À la fin, vous construirez une application web qui récupère les données météorologiques d'une API et les affiche sur une page web.
Contenu :
- Flask-API-Integration-Tutorial
Prérequis :
- Connaissances de base en Python
- Environnement de développement configuré
Flask est un micro-framework web en Python qui permet de développer des applications web de manière rapide et flexible. Il est conçu pour être léger et minimaliste, offrant les fonctionnalités essentielles pour créer des applications, comme le routage des URL et la gestion des requêtes, tout en permettant aux développeurs de choisir leurs propres outils et bibliothèques pour des fonctionnalités avancées. Flask utilise le langage Python et est apprécié pour sa simplicité et sa modularité, ce qui le rend particulièrement adapté aux projets de petite à moyenne échelle ou aux prototypes.
Pour commencer, nous allons initialiser le projet sur notre machine et configurer notre environnement en suivant les étapes suivantes :
-
Création du dossier qui contiendra notre application Flask :
mkdir Flask-API-Integration-Tutorial
-
Initialisation d'un environnement virtuel Python :
python -m venv venv
Pour activer l'environnement virtuel, tapez la commande suivante :
source venv/bin/activateUne fois l'environnement virtuel configuré, nous allons installer les dépendances nécessaires pour notre projet.
-
Installation des dépendances et bibliothèques : Tout d'abord, installons notre dépendance principale, Flask :
pip install flask
-
Vérification des fonctionnalités : Créons un fichier
app.pyavec le contenu suivant :from flask import Flask app = Flask(__name__) @app.route("/") def index(): return "Hello World !"
from flask import Flask: Cette ligne permet d'importerFlask, le framework web.app = Flask(__name__): On initialiseappcomme instance de Flask.Flask(__name__)permet à l'application de se repérer dans le dossier de notre projet.@app.route("/"): Ce décorateur indique à Flask d'appeler cette fonction lorsque la route/est activée.
Pour tester si tout fonctionne correctement, lancez la commande suivante :
flask run
OpenWeatherMap propose une API gratuite qui permet d'accéder aux données météorologiques de certaines régions de notre planète, et c'est celle que nous allons utiliser pour cet exemple.
Elle impose quelques restrictions :
- 60 appels API par minute et 5000 par jour dans son plan gratuit.
- La création d'un compte est nécessaire pour l'utiliser.
Pour créer un compte, rendez-vous sur le site OpenWeatherMap à l'adresse suivante : https://openweathermap.org/.
Une fois sur le site, cliquez sur le bouton Sign In.
Si vous n'avez pas encore de compte, cliquez sur Create an Account pour en créer un.
Remplissez le formulaire pour créer votre compte.
Connectez-vous, puis cliquez sur API Key pour obtenir votre clé API, nécessaire pour accéder aux données.
Copiez cette clé API pour l'utiliser dans la suite du tutoriel.
Essayez d'ouvrir l'URL suivante dans votre navigateur, en remplaçant <API Key> par votre clé API :
http://api.openweathermap.org/data/2.5/weather?q=London,uk&units=metric&appid=<API Key>
Vous devriez obtenir un résultat comme suit :
Maintenant que nous pouvons accéder aux données via HTTP et l'URL de l'API, voyons comment les utiliser dans du code Python.
Le JSON est une structure de données similaire aux dictionnaires Python, ce qui facilite son utilisation. Python dispose de bibliothèques pour traiter le JSON depuis une URL :
urllib: Permet de télécharger les données contenues dans l'URL.json: Permet de parser les données JSON en un dictionnaire Python.
Ces deux bibliothèques sont intégrées à Python et n'ont donc pas besoin d'être installées.
Pour commencer, importons les bibliothèques nécessaires :
import json
import urllibEnsuite, créons la fonction pour récupérer les données :
def get_weather(query):
api_url = "http://api.openweathermap.org/data/2.5/weather?q={}&units=metric&appid=<API Key>"
query = urllib.parse.quote(query)
url = api_url.format(query)
data = urllib.request.urlopen(url).read()
parsed = json.loads(data)
weather = None
if 'weather' in parsed:
weather = {
'description': parsed['weather'][0]['description'],
'temperature': parsed['main']['temp'],
'city': parsed['name'],
'country': parsed['sys']['country']
}
return weatherquery = urllib.parse.quote(query): Cette ligne convertitqueryen un format compatible URL.url = api_url.format(query):format()permet de substituer{}parquerydans l'URL.data = urllib.request.urlopen(url).read(): Télécharge les données de l'URL.parsed = json.loads(data): Convertit les données JSON de l'API en un dictionnaire Python.
N'oubliez pas de remplacer <API Key> par votre clé API.
Maintenant que nous sommes capables de récupérer les données de l'API sous forme de dictionnaire Python, nous devrions pouvoir les afficher dans une page web HTML. Pour cela, nous allons utiliser le moteur de template Jinja.
Jinja est un moteur de templates utilisé dans le développement web, surtout avec le framework Flask. Il permet de générer des pages HTML dynamiques en mélangeant du code HTML avec des variables et des expressions Python. En gros, Jinja agit comme un "intermédiaire" qui intègre les données Python dans les pages HTML.
Et comme Jinja est déjà intégré dans Flask, nous n'avons pas besoin de l'installer dans notre environnement. Les étapes suivantes vous montreront comment utiliser Jinja pour notre projet.
Pour commencer, créez un dossier dans notre projet nommé templates, puis, dans ce dossier, créez un fichier .html nommé home.html qui contiendra le code suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather</title>
</head>
<body>
</body>
</html>NB : Il est important que le dossier contenant nos fichiers .html s'appelle templates pour qu'il soit reconnu par Jinja.
Ensuite, nous devons faire en sorte qu'à chaque lancement du serveur, notre page web soit affichée. Rendez-vous dans le fichier app.py et importez une fonction de Flask qui nous permettra de le faire :
from flask import Flask, render_templateModifiez ensuite la fonction index pour qu'elle renvoie notre page HTML :
def index():
return render_template("home.html")Une fois le serveur lancé, vous devriez obtenir le résultat suivant :
Ceci étant fait, notre objectif reste tout de même de pouvoir visualiser nos données sur notre page. Pour cela, passons à la dernière étape :
Pour que nos données soient accessibles sur notre page, nous devons les passer comme arguments à la fonction render_template :
def index():
return render_template(
"home.html",
weather=get_weather("London,Uk")
)- La fonction
render_templatedans Flask permet de générer une page HTML en utilisant un template Jinja et de l’envoyer en réponse au client (navigateur). Elle fait deux choses principales
Nous pouvons maintenant accéder à nos données sur notre page web. Il ne reste plus qu'à bien les organiser :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather</title>
</head>
<body>
<h1>Weather</h1>
<h2>Current Weather</h2>
<p>
City:
<b>{{ weather.city }} | {{ weather.country }}</b>
</p>
<p>{{ weather.description }} | {{ weather.temperature }}℃</p>
</body>
</html>Si vous redémarrez le serveur, votre page web devrait ressembler à ceci :
Pour aller plus loin, vous pouvez permettre aux utilisateurs de rechercher une ville spécifique : On va mettre à la disposition des utilisateurs un formulaire qui leur permettra de saisir les villes qu'ils souhaitent, puis nous récupérerons les informations saisies pour effectuer des requêtes API afin de récupérer les données météo de la ville choisie par l'utilisateur.
Dans home.html :
<form>
<input type="text" name="city" id="city" placeholder="Search">
<input type="submit" value="Submit">
</form>Pour récupérer les requêtes faites par un formulaire HTML, Flask met à notre disposition la fonction request. Nous allons donc devoir l'importer.
Dans app.py :
from flask import Flask, render_template, requestdef index():
city = request.args.get('city')
if not city:
city = "London,Uk"
return render_template(
"home.html",
weather=get_weather(city)
)city = request.args.get('city'):request.args.get('city')permet de récupérer la requête entrée dans le formulaire. Nous stockons ensuite ces informations dans la variablecity.
Dans ce tutoriel, nous avons exploré comment intégrer et afficher des données d'une API dans une application Flask. En suivant chaque étape, nous avons :
- Récupéré des données via une API et les avons traitées sous forme de dictionnaire Python.
- Utilisé Jinja pour afficher ces données dynamiquement dans une page HTML.
- Créé un formulaire pour permettre aux utilisateurs de rechercher des informations en fonction de leurs besoins.
En maîtrisant ces bases, vous êtes désormais en mesure de créer des interfaces interactives et personnalisées pour vos utilisateurs, en affichant des informations dynamiques et en les organisant de manière claire.
Pour aller plus loin : vous pourriez explorer l'ajout de CSS et JavaScript pour styliser et améliorer l'expérience utilisateur, ou même ajouter des fonctionnalités de cache pour rendre l'application plus performante.