TP 3 : Développement Mobile

1ere année Master Pro GL

Creation de page météo avec Api Rest : « openweathermap »
Partie 1: On cherche à créer les deux pages suivantes : weather.page.dart et
weather.detail.page

weather.page weather.detail.page

1. Créer un statefull Widget Weather :

2. Ajouter une variable de type String a la classe State (_WeatherState )
String city =" ";
On fera en sorte que appBar affichera la valeur de la ville entrer par l’utilisateur.
Au niveau de la méthode build :
3. Ajouter une colonne centrée qui contiendra un : TextField et un ElevatedButton
- TextField(decoration: InputDecoration(hintText: 'entrer nom de
ville'),
onChanged:(text) {setState(() {
this.city=text;
});},
)

- ElevatedButton(onPressed:(){Navigator.push(context,MaterialPageRoute(
builder: (context)=>WeatherDetails(city)));}, child: Text('get
Weather...'))

4. Au niveau du Widget WeatherDetail (il s’agit aussi d’un stateFulWidget)

Ajouter le constructeur :
String city;
WeatherDetails(this.city);
5. Afficher le nom de la ville au milieu de la page (${widget.city})
Partie 2 : Api Rest : « openweathermap »
1. Commencer par accéder au site de l’API : https://api.openweathermap.org/
2. Créer un compte

Cela vous permettra de récupérer une clé API comme suivent :

Votre URI sera : https://api.openweathermap.org/data/2.5/forecast?q=monastir,tn&APPID=votrecle

Exemple : si vous rajouter le lien suivent au navigateur vous obtiendrai une réponse comme suivent :

https://api.openweathermap.org/data/2.5/forecast?q=monastir,tn&APPID=32d420021ff26ecab4
7cb2b4d190e6d0

{"cod":"200","message":0,"cnt":40,"list":[{"dt":1666450800,"main":{"temp":3
00.08,"feels_like":300.44,"temp_min":300.08,"temp_max":300.08,"pressure":10
21,"sea_level":1021,"grnd_level":1020,"humidity":49,"temp_kf":0},"weather":
[{"id":800,"main":"Clear","description":"clear
sky","icon":"01d"}],"clouds":{"all":4},"wind":{"speed":6.65,"deg":165,"gust
":7.24},"visibility":10000,"pop":0,"sys":{"pod":"d"},"dt_txt":"2022-10-22
15:00:00"},{"dt":1666461600,"main":{"temp":299.09,"feels_like":299.15,"temp
_min":297.11,"temp_max":299.09,"pressure":1021,"sea_level":1021,"grnd_level
":1022,"humidity":54,"temp_kf":1.98},"weather":[{"id":800,"main":"Clear","d
escription":"clear………………….

1. Ajouter http dans votre fichier pubspec.yaml

dependencies:
flutter:
sdk: flutter
http:
2. Commencer par importer le package http.dart

import 'package:http/http.dart' as http;

Au niveau de la classe _WeatherDetailsState

3. Créer la variable (var WeatherData) qui contiendra vous données json

4. Nous allons implémenter une méthode getData qui nous permettra de récupérer les
donnes à partir de l’API Rest openWeather
void getData(String city) {

String url =
"https://api.openweathermap.org/data/2.5/weather?q=${city},tn&APPID=votre
cle";

http.get(Uri.parse(url))
.then((resp) { print(resp.body);
this.WeatherData=json.decode(resp.body);}).catchError((err){});
}

5. Implémenter la méthode initState() dans la même classe afin d’appeler la méthode

getData au moment de l’initialisation de votre widget
 6. Tester votre application : si votre lien fonctionne correctement vous obtiendrai un
affichage sur le log de votre application
Partie 4 : le résultat de votre page weather detail sera comme suivant :

1. Un CircularProgressIndicator sera afficher si la liste weatherData est null

2. Si non une ListView : formée par des Row

- Contenant un ( CircleAvatar et deux Text)

Trois éléments sont à récupérer de votre liste weatherData

- la date : weatherData['list'][index]['dt']
- La temperature: weatherData['list'][index]['main']['temp']
- Météo du jour qui va définir le choix de l’icône :
weatherData['list'][index]['weather'][0]['main']
Remarques :

1. Afin de formater la date vous avez besoin du package intl:

a) Ajouter les package au fichier pubspec.yaml

b) ajouter les dependances (get dependencies)
c) importer le package a votre page import 'package:intl/intl.dart';
d) Pour formater la date utiliser la classe : DateFormat('E
dd/MM/yyyy').format(DateTime.fromMicrosecondsSinceEpoch(date
*1000000)
2. La température obtenue est en Kelvin faites la conversion en Celsius
(temp -273.15)