Projet : Serveur méteo

Projet : Serveur méteo

pdf : pour impression

Serveur méteo #

L’objectif de ce mini projet est de mettre en oeuvre ce que vous avez appris concernant les IHM sur le web, Flask ainsi que l’utilisation d’une api très simple.

Présentation du projet #

Le principe est de créer :

  • une page web (html, css) avec 2 vues
  • un serveur web en Python avec Flask qui sert deux pages (formulaire, résultat de la requête)
  • Le serveur communique avec openweathermap et intègre la météo de la ville choisie au résultat

Utilisation #

  • L’utilisateur se connecte via le navigateur sur votre site
  • Il remplit un formulaire demandant une ville, par exemple : Lille
  • Votre serveur redirige l’utilisateur vers une page contenant l’information : Temp : 12.3°C etc.

Comparaison avec le formulaire obtenu à la fin du cours #

Très peu de nouveautés !

  • Votre serveur transforme la réponse au formulaire en une requête API pour openweathermap
  • Il envoie la question
  • openweathermap renvoie des données
  • votre serveur en extraie les infos
  • qu’il intègre à la page resultat.html

Étapes #

Vous allez d’abord :

  1. Lire et réaliser tout le cours IHM sur le web (qkzk, nsi, premiere, ihm sur le web)
  2. Réaliser l’activité finale avec le formulaire. C’est le point de départ.

De l’activité finale à la réalisation du projet

  1. Apprendre à passer des requêtes openweathermap directement dans le navigateur
  2. Réaliser ces requêtes en Python, dans la console
  3. Combiner le tout pour créer l’application complète.

Outils #

IDE #

  • Thonny gère Flask sans problème.
  • N’importe quel IDE installé sur votre machine (vs code, atom, sublime text…) pour écrire le code html (et éventuellement Python)
  • On peut servir un site depuis colab avec Flask mais c’est sport. Un exemple. Ouvrez le lien de la première réponse pour découvrir un exemple.

Librairies #

Flask est la seule librairie dont vous ayez besoin. Elle est déjà présente sur votre machine.


Résultat attendu #

Le projet final est constitué des fichiers suivants :

.
├── readme.md
├── serveur.py
└── templates
    ├── index.html
    └── resultats.html
  • readme.md est votre compte rendu (!). Vous le rédigerez en markdown. Un éditeur en ligne
  • serveur.py : est l’unique fichier Python qui fait tout. Partez du résultat final de l’activité IHM sur le web “Flask” (le formulaire…) views.py
  • index.html et resultats.html sont vos pages web servies par Flask

D’autres informations sur le projet à cette page : #

  • L’objectif est de comprendre, pas de devenir un développeur web full stack
  • Je vous invite à créer votre propre clé API openweather map, mais vous pouvez m’en demander une. Bien sûr, je ne vais pas la publier sur mon site…

Cahier des charges détaillé #

  1. Créer le readme et commencer à le remplir. À refaire après chacune des étape suivante, remerciez-moi plus tard
  2. Faire un dessin avec le trajet de l’information entre “j’écris Lille dans le formulaire et presse le bouton” et “je vois qu’il fait 37.2°C à Lille ce 8 décembre”. À nouveau, vous me remercierez plus tard
  3. Servir une page (statique d’abord) avec flask
  4. Lire une requête du formulaire
  5. Répondre avec des données statiques (sans passer par openweathermap) et les intégrer à la page correctement
  6. Transformer la requête du formulaire et envoyer une commande à l’api openweathermap
  7. Lire le json en réponse via json load, renvoyer ce json au template. Affichez le brutalement sur la page sans chercher à en faire quoi que ce soit.
  8. Extraire les infos du json et remplir un dictionnaire avec la requête
  9. Remplir le template de reponse avec les vraies données aux bons endroits
  10. Extensions : css, prévisions, carte de France avec les villes, ce que vous voulez.

Sources : #


Extensions #

  • Créer une carte de France et intégrer la météo de différentes villes
  • Prévisions sur une semaine, formatage des images etc.
  • Utilisation de capteurs pour récupérer la météo locale avec un raspberry
  • Toute autre idée inspirée d’un site météo…

Les étapes d’une connexion client serveur #

Les éléments #

Le client (navigateur web)

Le serveur web (Python + Flask)

Et le site Openweathermap

  • Le client, le serveur flask et openweathermap

Le serveur se lance #

Quand on exécute le script Python du serveur il attend qu’un client se connecte…

  • Le serveur se lance et sert une page <em>index.html</em>

Le client se connecte sur le site #

L’utilisateur a tapé l’adresse du site dans sa barre d’adresse…

  • Le client se connecte sur le site

Le serveur web renvoie alors une page html #

La page html est un formulaire à remplir (ville ?) avec un bouton submit

  • première requête : <em>index.html</em>, réponse du serveur

Formulaire rempli, submit #

L’utilisateur a rempli son formulaire avec Lille et cliqué sur submit

  • l&rsquo;utilisateur remplit le formulaire (<em>Lille</em>) sur le client, clique <em>submit</em>

Le serveur reçoit et traite la requête #

Le serveur Python récupère les données du formulaire et appelle une fonction…

  • la requête est envoyée au serveur web, qui la traite&hellip;

Le serveur envoie à son tour une requête à OWM… #

La requête est transmise à OWM via une URL (string…) qu’on formate

  • le serveur envoie une requête à OMW avec leur API (<em>&hellip;weather lille&hellip;</em>)

OWM lit traite la requête et renvoie la météo dans un JSON #

JSON (Javascript Object Notation) est le format le plus populaire pour échanger des données sur le web. Les données ressemblent à un dictionnaire Python. Python manipule sans difficulté les JSON.

  • OWM lit la requête et répond avec un JSON contenant la météo (<em>&hellip;temp 12.3&hellip;</em>)

Le serveur traite la réponse et injecte la météo dans une page resultat.html #

Elle est envoyée au client

Qui l’affiche dans le navigateur.

L’utilisateur lit la météo de Lille : il fait 12.3°C !

  • Le serveur traite la réponse JSON et sert une page au client (<em><code>&lt;p&gt;12.3°C&lt;/p&gt;</code></em>)