Différences

Ci-dessous, les différences entre deux révisions de la page.

--- meteo_3eme_seance [2025/06/22 11:23] – [Génération simple d’une page HTML avec une f-string] admin
+++ meteo_3eme_seance [2025/06/23 07:15] (Version actuelle) – [Génération simple d’une page HTML avec une f-string] admin
@@ Ligne 203: / Ligne 203: @@
 <code>
-html = f"""
+    html = f"""
-<h1>Données météo locales</h1>
+    <h1>Données météo locales</h1>
-<ul>
+    <ul>
-  <li>Date et heure : {date_heure}</li>
+      <li>Date et heure : {date_heure}</li>
-  <li>Température : {temperature} °C</li>
+      <li>Température : {temperature} °C</li>
-  <li>Humidité : {humidity} %</li>
+      <li>Humidité : {humidity} %</li>
-  <li>Point de rosée : {point_de_rosee} °C</li>
+      <li>Point de rosée : {point_de_rosee} °C</li>
-  <li>Humidex : {humidex}</li>
+      <li>Humidex : {humidex}</li>
-</ul>
+    </ul>
-"""
+    """
 else:
-   html = "<p>Erreur de lecture du capteur.</p>"
+    html = "<p>Erreur de lecture du capteur.</p>"
+</code>
+Nous créons **une chaîne de caractères contenant du HTML**, dans laquelle nous insérons directement **les valeurs des variables Python** (température, humidité, etc.).
+<note>
+**La balise h1** sert à afficher titre de niveau 1.
+**La balise ul** sert à afficher une liste à puce, **les balises li** correspondent aux éléments de la liste.
+**La balise p** sert à afficher un paragraphe.
+</note>
+====Pourquoi le f devant la chaîne ?====
+Le f signifie que c’est une **f-string** (ou formatted string literal en anglais).
+Cela permet d’écrire **des variables à l’intérieur de la chaîne** entre des accolades {}.
+C’est une **méthode claire et moderne pour mélanger texte et variables** dans une même ligne.
+====Et si la lecture échoue ?====
+<code>
+else:
+    html = "<p>Erreur de lecture du capteur.</p>"
+</code>
+Ce code gère le cas où le capteur ne renvoie pas de valeurs valides. Dans ce cas, on prépare un message simple à afficher sur la page web.
+====Démarrage de l'application et affichage de la page web====
+<code>
+return render_template_string(html)
+</code>
+Ce code indique à Flask d'**afficher le HTML généré comme contenu de la page web**.
+<code>
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, debug=True)
+</code>
+Ce code permet de lancer l'application :
+  * **host='0.0.0.0'** : rend l'application accessible sur le réseau.
+  * **port=5000** : port utilisé pour acceder au site.
+Page app.py :
+<code>
+#importations
+from flask import Flask, render_template_string
+from capteur import (
+    lire_donnees_capteur,
+    calculer_point_de_rosee,
+    calculer_humidex,
+    recuperer_date_heure
+)
+# Définition de l'application Flask
+app = Flask(__name__)
+@app.route('/')
+def index():
+    humidity, temperature = lire_donnees_capteur()
+    if humidity is not None and temperature is not None:
+        point_de_rosee = calculer_point_de_rosee(temperature, humidity)
+        humidex = calculer_humidex(temperature, point_de_rosee)
+        date_heure = recuperer_date_heure()
+        html = f"""
+        <h1>Données météo locales</h1>
+        <ul>
+            <li>Date et heure : {date_heure}</li>
+            <li>Température : {temperature} °C</li>
+            <li>Humidité : {humidity} %</li>
+            <li>Point de rosée : {point_de_rosee} °C</li>
+            <li>Humidex : {humidex}</li>
+        </ul>
+        """
+    else:
+        html = "<p>Erreur de lecture du capteur.</p>"
+    return render_template_string(html)
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, debug=True)
 </code>