image nuages avec soleil

TUTORIEL:

Application Web Mobile Pour Visionner La Météo Avec La Géolocalisation HTML5

Réalisé par Anthony Corriveau

Bienvenue dans mon premier tutoriel réalisé dans le cadre du cours intégration en ligne IV. Dans ce tutoriel, je traiterai de la géolocalisation avec utilisation de l'HTML5 et de l'API de Weather Underground. Pour débuter, j'explirai comment fonctionne la géolocalisation. Par la suite, j'exploirerai l'API de Weather Underground. Pour conclure je mélangerai les deux pour ainsi avoir la météo de la position actuelle de l'utilisateur. Débutons immédiatement alors!

Voici le résultat final:

image du produit finale

Étape 1: La Géolocalisation avec HTML5

La géolocalisation en HTML5 je fais seulement avec les navigateurs suivants:

Pour débuter, il faut créer un fichier .html, par exemple index.html, avec l'entête suivante. Insérer les balise meta comme le viewport, le charset en UTF-8 ainsi que le title de la page et puis une balise script pour le javascript et style pour le css dans la balise head.

					
	<!DOCTYPE html>
	<html>
		<head>
			<meta name="viewport" content="width=device-width"> 
			<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
			
			<title>Météo avec Géolocalisation</title> 	
			
			<script type="text/javascript"></script>	
			<style type="text/css"></style>
		</head>
		<body>	
		</body>	
	</html>	
				

Par la suite, dans la balise script nous allons localisé votre ordinateur ou mobile avec la position en longitude et latitude.

					
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			var maLatitude;		/*Variable gobale contenant la latitude*/
			var maLongitude;	/*Variable gobale contenant la longitude*/	
		
			if (navigator.geolocation)
				navigator.geolocation.getCurrentPosition(showPosition);
			else
			alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
			});	
			
			function showPosition(position){
				maLatitude= position.coords.latitude;
				maLongitude= position.coords.longitude;	
				alert(maLatitude + ", " + maLongitude );
		}	
	</script>
				

Cela devrais vous faire une fenêtre d'alertr avec votre position actuelle. Voilà, maintenant nous avons fait notre géolocalisation en HTML5. Nous allons poursuivre avec l'API de Weather Underground. Mais avant de continuer avant il faut effacer l'alerte ou la mettre en commentaire.

image démontrant une alerte

Étape 2: L'API de Weather Underground

Nous sommes maintenant rendu à l'étape d'utiliser l'API de Weather Underground. Malheureusement ce site est uniquement en anglais. Pour débuter, il nous faut une API KEY. Comment? Vous devez vous créer un compte sur le site suivant de l' API.

Après avoir valider votre inscription, vous allez avoir une clé pour utiliser l'API. La clé est un code de 16 lettres et chiffres. Cette clé gratuite vous donne le droit à 10 requêtes par minute et à presque tous les données des pays du monde. Voici la liste des actions possibles avec une clé gratuite:

Pour utiliser l'API sur une page web, il y a 5 méthodes possibles. Celle que je vais vous montrez utilise le javascript et le jQuery. Le code nessecaire se trouve juste ici .

					
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script> // Dans la même balise script que la géolocalisation!
		jQuery(document).ready(function($) {
		  $.ajax({
		  url : "http://api.wunderground.com/api/TA_KEY/geolookup/conditions/q/IA/Cedar_Rapids.json",
		  dataType : "jsonp",
		  success : function(parsed_json) {
		  var location = parsed_json['location']['city'];
		  var temp_f = parsed_json['current_observation']['temp_f'];
		  //alert("Current temperature in " + location + " is: " + temp_f);
		  }
		  });
		});
	</script>	
				

Vous allez devoir remplacer un terme dans le lien de votre clé dans le URL. De plus, il est possible d'avoir les résultats en francais canadien avec l'ajout de:

http://api.wunderground.com/api/TA_KEY/geolookup/conditions/lang:FC/q/IA/Cedar_Rapids.

Si vous enlever les commentaires //, cela devrait vous faire une fenètre d'alerte avec la température en degrée Fahrenheit de Cedar Rapids.

image démontrant une alerte de Cedar Rapids

Pour la suite, il y a plusieurs possibilités pour aller chercher les conditions météologiques:

Pour tous les exemples suivant visité le lien suivant.

Pour la démo, je vais utiliser la position actuelle avec la latitude et la longitude obtenu avec la géolocalisation HTML5 fait dans l'étape 1.

Étape 3: Météo avec Géolocalisation

Pour mélanger la géocalisation c'est vraiment simple. Il faut changer la fin par notre position.

url : "http://api.wunderground.com/api/TA_KEY/geolookup/conditions/lang:FC/q/IA/"+maLatitude+","+maLongitude+".json",
 ou
url : "http://api.wunderground.com/api/TA_KEY/geolookup/conditions/lang:FC/q/CA/Longueuil.json",

Il est aussi possible d'avoir autre chose que la température en Faraneith. Voici la liste complète des éléments qu'on peut aller chercher dans le .json de chaque ville. Voir toute la liste

Vous devez créer une variable à chaque fois que vous voulez un élément de la liste par exemple:

					
	var temp_f = parsed_json['current_observation']['temp_f']; /*Température en Faraneith*/
	var temp_c = parsed_json['current_observation']['temp_c']; /*Température en Celcius*/
	var icon = parsed_json['current_observation']['icon_url']; /*Icon de la température*/
	var weather = parsed_json['current_observation']['weather']; /*température actuelle*/
				

Étape 4: Affichage avec CSS

Pour afficher le contenu des variables, on peut utilisé la méthode append en javascript. Mais la disposition reste comme vous le voulez. Vous pouvez donc personallisé votre application à votre aise en donnant des classes ou id au éléments et les positionner dans la balise < style > créée plus haut.

					
	$("body").append("
		<div>
			<h2>" + location + " </h2> 
			<div> 
				<h3>" + temp_c + " °C</h3>
				<img src='"+icon+"' alt='"+weather+"' title='"+weather+"'/>
			</div>
			<h4>"+weather+"</h4>								
		</div>
		"); 						
				

Disposez les éléments comme vous le désirer!

					
	<style>				
		html {
			background-color:#247ac9;
		}
		.div{
			border:3px solid black;
			width:300px;
			height:100%;
			box-shadow: 4px 4px 4px darkblue;
			margin-left:auto;
			margin-right:auto;
			margin-top:20px;	
			margin-bottom:20px;
			background-color:white;	
				
		}
		h2{
			background-color:black;
			color:white;
			font-family:arial;
			font-size:24px;
			text-align:center;
			border-bottom:3px solid black;
			margin:-10px;
			margin-bottom:10px;
		}
		h3{
			color:black;
			font-family:arial;
			font-size:25px;
			float:left;
			padding-left:20%;
			padding-right:15%;		
		}
		h4{
			color:black;
			font-family:arial;
			font-size:24px;
			width:300px;
			text-align:center;
		}
		img{
			width:80px;
			height:80px;		
		}
	</style>
				
				

Merci d'avoir suivi mon tutoriel.