La météo de votre ville


Accueil > Projets > La météo de votre ville

Par Cochet B., Jean L. en novembre 2020

Si vous avez cliquez ici c’est surement que vous voulez savoir comment vous habillez aujourd’hui ou bien de simplement connaître la température actuelle de votre prochaine destination.

Ce projet a été réalisé par des élèves en spécialité NSI du Lycée Louis Pasteur. Ils sont également les auteurs de ce compte rendu. Pour en savoir plus : Les projets en spécialité NSI

Le but du projet :

Ce projet est un site réalisé en HTML, CSS et Javascript. Ce site a pour but de connaitre la météo, c’est à dire de se renseigner sur le climat et la température d’un lieu précis en écrivant seulement le nom de la ville en question.

Les différents pages du sites :

Tout d’abord le site est composé de 3 pages dont 2 que nous avons créés et une qui est directement liée au site nsi.xyz.
Dans la première page du site, nous avons simplement utilisé du HTML et du CSS.
Elle comporte un menu qui permet de naviguer entre les différentes pages du site.
Nous avons mit une animation lorsque la page se charge.
Voici le code :

HTML :

  1. <div>
  2.     <h1 id="style" >Météo Monde</h1>
  3. </div>

Télécharger

CSS :

  1. @keyframes anime {
  2.   0% {
  3.     transform: translateX(-50%) translateY(-50%) rotate(0deg);
  4.   }
  5.   85% {
  6.     transform: translateX(-50%) translateY(-50%) rotate(180deg);
  7.   }
  8.   60%{
  9.     transform: translateX(-50%) translateY(-50%) rotate(190deg);
  10.   }
  11.   100%{
  12.     transform: translateX(-50%) translateY(-50%) rotate(180deg);
  13.   }
  14. }
  15.  
  16.  
  17. #style {
  18.   color: white;
  19.   text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31;
  20.   font-size: 80px;
  21.   font-weight: bold;
  22.   letter-spacing: -3px;
  23.   margin: 0;
  24.   position: absolute;
  25.   top: 50%;
  26.   left: 50%;
  27.   transform: translateX(-50%) translateY(-50%);
  28. }
  29.  
  30. #style:after{
  31.   content: '';
  32.   padding: 50px 20px;
  33.   position: absolute;
  34.   left: 50%;
  35.   width: 100%;
  36.   transform: translateX(-50%) translateY(-50%);
  37.   top: 50%;
  38.   border: 15px solid #21b2a6;
  39.   animation: 4s anime;
  40. }

Télécharger

Résultat :

Ensuite, dans la seconde page, nous avons réutilisé le même menu que dans la première page mais c’est sur cette page que nous allons pouvoir utiliser toutes les fonctionnalités du site.

Sur cette page nous avons intégré une barre de recherche et lorsque l’on veut rechercher une ville dans le monde, le site fait appel a une API qui va renvoyer la température ou encore le temps de la ville recherchée.

Voici le Script permettant d’utiliser l’API météo :

JavaScript :

  1. const api = {
  2.   key: "b147c4df493194eae4491bc6c5bc15f6",
  3.   base: "https://api.openweathermap.org/data/2.5/"
  4. }
  5.  
  6. const searchbox = document.querySelector('.search-box');
  7. searchbox.addEventListener('keypress', setQuery);
  8.  
  9. function setQuery(evt) {
  10.   if (evt.keyCode == 13) {
  11.     getResults(searchbox.value);
  12.   }
  13. }
  14.  
  15. function getResults (query) {
  16.   fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
  17.     .then(weather => {
  18.       return weather.json();
  19.     }).then(displayResults);
  20.  
  21. }
  22.  
  23. function displayResults (weather) {
  24.   let city = document.querySelector('.location .city');
  25.   city.innerText = `${weather.name}, ${weather.sys.country}`;
  26.  
  27.   let now = new Date();
  28.   let date = document.querySelector('.location .date');
  29.   date.innerText = dateBuilder(now);
  30.  
  31.   let temp = document.querySelector('.current .temp');
  32.   temp.innerHTML = `${Math.round(weather.main.temp)}<span>°c</span>`;
  33.  
  34.   let weather_el = document.querySelector('.current .weather');
  35.   weather_el.innerText = weather.weather[0].main;
  36.  
  37.   let hilow = document.querySelector('.hi-low');
  38.   hilow.innerText = `${Math.round(weather.main.temp_min)}°C / ${Math.round(weather.main.temp_max)}°C`;
  39. }
  40.  
  41. function dateBuilder (d) {
  42.   let months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Decembre"];
  43.   let days = ["Lundi", "Mardi", "Mercredi", "Mercredi", "Jeudi", "Vendredi", "Samedi","Dimanche"];
  44.   let day = days[d.getDay()];
  45.   let date = d.getDate();
  46.   let month = months[d.getMonth()];
  47.   let year = d.getFullYear();
  48.  
  49.   return `${day} ${date} ${month} ${year}`;
  50. }

Télécharger

Résultat :

Présentation des modules et scripts utilisées :

Abordons directement la chose la plus importante de cette deuxième page, qui est le module Javascript basé sur l’appel d’une API météo.
Pour commencer, qu’est ce qu’une API :
Une API (Application Programming Interface) est un code qui permet à deux programmes logiciels de communiquer. C’est a dire que notre site appellera un autre logiciel afin de récupérer les informations nécessaires sur la météo en temps réel.

  1.  const api = {
  2.   key: "b147c4df493194eae4491bc6c5bc15f6",
  3.   base: "https://api.openweathermap.org/data/2.5/"

Télécharger

Ici, les données sont récupérées grâce à une base de données récupérée sur un site, et une clé (key) d’authentification obtenu via ce même site. Ces données sont retranscrites ensuite sur notre site grâce à des fonctions JavaScript.

Voici une de ces fonctions :

  1. function dateBuilder (d) {
  2.   let months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Decembre"];
  3.   let days = ["Lundi", "Mardi", "Mercredi", "Mercredi", "Jeudi", "Vendredi", "Samedi","Dimanche"];
  4.   let day = days[d.getDay()];
  5.   let date = d.getDate();
  6.   let month = months[d.getMonth()];
  7.   let year = d.getFullYear();
  8.  
  9.   return `${day} ${date} ${month} ${year}`;

Télécharger

Egalement nos professeurs voulaient que l’on importe un menu dépliant permettant de relié notre site au site nsi.xyz. Pour cela nous avons importé un script permettant d’intégré directement ce menu automatiquement :

  1. <script src="https://package.nsi.xyz/api/%22%3E"></script>

Cette balise permet d’appeler un script externe qui permettra ensuite d’implanter un menu. Ce script est utilisable grâce au rajout de cette balise :

  1. <nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>

Ce menu dépliant est ajouter en haut à droite de la page :

Les difficultés rencontrées :

Lors de la création de notre site, nous avons rencontré certains problèmes que se soit au niveau du CSS, HTML ou JavaScript.
Par exemple, nous avons eu des difficultés avec l’intégration d’un module JavaScript météo basé sur une API qui ne fonctionner pas car il fallait rentrer une clé d’authentification pour pouvoir l’utilisé dans le script.
Egalement, nous avons eu des soucis au niveau du CSS avec la mise en page des différentes balises qui ne s’agencées pas comme nous le pensions sur la page.
Mise a part ces quelques problèmes nous n’avons rencontrés aucuns autres problèmes concernant les codes des pages.

Les solutions et modifications apportées :

Pour faire face a ces problèmes nous avons cherché des solutions. Pour le problème de l’API avec notre module JavaScript, nous avons dut créé un compte sur https://openweathermap.org/api qui est le site ou nous avons pris l’API météo en question pour recevoir une clé d’authentification a implémenter dans le JavaScript.

Télécharger les sources et tester

meteo_site.zip (ZIP - 4 ko)
meteo_site.zip

Mots-clés