EA2013 SoLoMo - Revision history

Nicolas.Afonso: /* Notes et références */

2014-01-08T23:40:28Z

Notes et références

@@ Line 348: / Line 348: @@
 = Notes et références =
 http://lecercle.lesechos.fr/entreprises-marches/high-tech-medias/internet/221164514/solomo-pourquoi-comment-chose-est-sure-faut-
 http://www.alexitauzin.com/2013/04/combien-dutilisateurs-de-facebook.html
@@ Line 356: / Line 356: @@
 http://fr.slideshare.net/Emejotita82/the-solomo-manifiesto

Nicolas.Afonso at 23:37, 8 January 2014

2014-01-08T23:37:01Z

← Older revision		Revision as of 23:37, 8 January 2014
Line 1:		Line 1:
	PAGE UNDER CONSTRUCTION

	[[Image:Capture.JPG\|right\|thumb\|300px\|Quelques logos d'applications SoLoMo connues : Waze, Facebook Places, Yield, Foursquare]]		[[Image:Capture.JPG\|right\|thumb\|300px\|Quelques logos d'applications SoLoMo connues : Waze, Facebook Places, Yield, Foursquare]]

Nicolas.Afonso: /* Démonstration */

2014-01-08T23:36:23Z

Démonstration

← Older revision		Revision as of 23:36, 8 January 2014
Line 255:		Line 255:
	''' Ajouter du social est tout aussi simple.'''		''' Ajouter du social est tout aussi simple.'''

	Utilisons l'API Foursquare. Je veux par example, connaître des informations sur des lieux qui ont été 'checkés' sur l'application SoLoMo autour d'une position de coordonnées X et Y (latitude et longitude): il suffit de faire la ~~requite~~ suivante : https://api.foursquare.com/v2/venues/search?ll=X,Y. On récupère alors, la réponse au format JSON, que l'on peut parser et utiliser dans notre application.		Utilisons l'API Foursquare. Je veux par example, connaître des informations et des statistiques sur des lieux qui ont été 'checkés' sur l'application SoLoMo autour d'une position de coordonnées X et Y (latitude et longitude): il suffit de faire la requête suivante : https://api.foursquare.com/v2/venues/search?ll=X,Y (la requête est en réalité un peu plus compliqué, il faut un token d'authentification, voir [https://developer.foursquare.com/start/search ce lien] sur le site de Foursquare). On récupère alors, la réponse au format JSON, que l'on peut parser et utiliser dans notre application.

	Par exemple, si on demande passe en coordonnées la position de la tour Eiffel :		Par exemple, si on demande passe en coordonnées la position de la tour Eiffel :

Nicolas.Afonso: /* Démonstration */

2014-01-08T23:30:39Z

Démonstration

@@ Line 198: / Line 198: @@
 </pre>
 <pre>
@@ Line 216: / Line 222: @@
       map = new google.maps.Map(document.getElementById("map_canvas"), {
             zoom: 19,
-            center: new google.maps.LatLng(48.858193, 2.294383),
+            center: new google.maps.LatLng(48.858193, 2.294383), //on initialise la carte sur la Tour Eiffel. :) Il faut bien y penser, au cas où la localisation de l'utilisateur n'aboutirai pas
             mapTypeId: google.maps.MapTypeId.ROADMAP
           });
@@ Line 227: / Line 233: @@
     function successCallback(position){
-      map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
+      map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); //on centre la carte sur les coordonnées récupérées de l'utilisateur
       var marker = new google.maps.Marker({
         position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
@@ Line 243: / Line 249: @@
 </html>
 </pre>
 [[File:Geoloc HTML5.png|thumb |center|500px| Suivi de la position de l'utilisateur de l'application et affichage sur la carte Google Maps. ]]

Nicolas.Afonso: /* Démonstration */

2014-01-08T22:42:26Z

Démonstration

← Older revision		Revision as of 22:42, 8 January 2014
Line 244:		Line 244:
	</pre>		</pre>

	[[File:Geoloc HTML5.png\|thumb \|center\|500px\| ~~Les~~ ~~trois~~ ~~piliers~~ d'~~une~~ application ~~SoLoMo~~. ]]		[[File:Geoloc HTML5.png\|thumb \|center\|500px\| Suivi de la position de l'utilisateur de l'application et affichage sur la carte Google Maps. ]]

	= Pour conclure =		= Pour conclure =

Nicolas.Afonso at 22:40, 8 January 2014

2014-01-08T22:40:14Z

← Older revision		Revision as of 22:40, 8 January 2014
Line 243:		Line 243:
	</html>		</html>
	</pre>		</pre>

			[[File:Geoloc HTML5.png\|thumb \|center\|500px\| Les trois piliers d'une application SoLoMo. ]]

	= Pour conclure =		= Pour conclure =

Nicolas.Afonso: /* Démonstration */

2014-01-08T22:19:14Z

Démonstration

← Older revision		Revision as of 22:19, 8 January 2014
Line 196:		Line 196:
	</html>		</html>

			</pre>


			<pre>
			<!DOCTYPE html>
			<html>
			<head>
			<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
			<style type="text/css">
			html { height: 100% }
			body { height: 100%; margin: 0px; padding: 0px }
			#map_canvas { height: 100% ; width:100%;}
			</style>
			<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
			<script type="text/javascript">


			function initialize() {
			map = new google.maps.Map(document.getElementById("map_canvas"), {
			zoom: 19,
			center: new google.maps.LatLng(48.858193, 2.294383),
			mapTypeId: google.maps.MapTypeId.ROADMAP
			});
			}

			if (navigator.geolocation)
			var watchId = navigator.geolocation.watchPosition(successCallback, null, {enableHighAccuracy:true});
			else
			alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");

			function successCallback(position){
			map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
			var marker = new google.maps.Marker({
			position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
			map: map
			});

			};
			</script>
			</head>

			<body onload="initialize()">
			<div id="map_canvas"></div>
			</body>

			</html>
	</pre>		</pre>

Nicolas.Afonso: /* Démonstration */

2014-01-08T22:17:37Z

Démonstration

← Older revision		Revision as of 22:17, 8 January 2014
Line 115:		Line 115:

	= Démonstration =		= Démonstration =

			Nous allons réaliser une esquisse d'application. Pour faire un exemple simple, et pour que ça marche sur nos PC, je m'appuierai sur HTML5.

			'''Dans un premier temps, voyons comment récupérer la position de l'utilisateur.'''


	<pre>		<pre>
Line 121:		Line 126:
	<html>		<html>
	<head>		<head>
			<!-- Feuille de style de la page-->
	<style type="text/css">		<style type="text/css">
	body{		body{
Line 138:		Line 144:
	}		}
	</style>		</style>

	<script type="text/javascript">		<script type="text/javascript">

	function startWatch(){		function startWatch(){
	if (navigator.geolocation)		if (navigator.geolocation) // si le navigateur prend en charge la fonctionnalité de géolocalisation
	var watchId = navigator.geolocation.watchPosition(successCallback,		var watchId = navigator.geolocation.watchPosition(successCallback,
	null,		null,
Line 153:		Line 160:
	function stopWatch(){		function stopWatch(){
	navigator.geolocation.clearWatch(watchId);		navigator.geolocation.clearWatch(watchId);
	}		}

			// function qui récupère les différentes composantes de la position
	function successCallback(position){		function successCallback(position){
	document.getElementById("lat").innerHTML = position.coords.latitude;		document.getElementById("lat").innerHTML = position.coords.latitude;

Nicolas.Afonso: /* Comment faire une application SoLoMo ? */

2014-01-08T22:05:14Z

Comment faire une application SoLoMo ?

← Older revision		Revision as of 22:05, 8 January 2014
Line 112:		Line 112:
	Il faudra néanmoins penser à ne pas récupérer ces données à des intervalles de temps trop réguliers, car le capteur GPS est gourmand en énergie !		Il faudra néanmoins penser à ne pas récupérer ces données à des intervalles de temps trop réguliers, car le capteur GPS est gourmand en énergie !

	Enfin, on peut ajouter la touche sociale à notre application en utilisant les API qu'offrent Facebook, Twitter ou encore Foursquare. On peut ainsi 'Liker' un endroit qui nous plait, rédiger un 'tweet' ou encore connaître la liste des lieux qui ont reçus un 'check-in' autour de sa position, tout ça depuis notre application par exemple !		Enfin, on peut ajouter la touche sociale à notre application en utilisant les API et SDK qu'offrent [https://developers.facebook.com/ Facebook], [https://dev.twitter.com/ Twitter] ou encore [https://developer.foursquare.com/ Foursquare]. On peut ainsi 'Liker' un endroit qui nous plait, rédiger un 'tweet' ou encore connaître la liste des lieux qui ont reçus un 'check-in' autour de sa position, tout ça depuis notre application par exemple !

	= Démonstration =		= Démonstration =

Nicolas.Afonso: /* Comment faire une application SoLoMo ? */

2014-01-08T22:02:18Z

Comment faire une application SoLoMo ?

← Older revision		Revision as of 22:02, 8 January 2014
Line 112:		Line 112:
	Il faudra néanmoins penser à ne pas récupérer ces données à des intervalles de temps trop réguliers, car le capteur GPS est gourmand en énergie !		Il faudra néanmoins penser à ne pas récupérer ces données à des intervalles de temps trop réguliers, car le capteur GPS est gourmand en énergie !

	Enfin, on peut ajouter la touche sociale à notre application en utilisant les API qu'offrent Facebook, Twitter ou encore Foursquare.		Enfin, on peut ajouter la touche sociale à notre application en utilisant les API qu'offrent Facebook, Twitter ou encore Foursquare. On peut ainsi 'Liker' un endroit qui nous plait, rédiger un 'tweet' ou encore connaître la liste des lieux qui ont reçus un 'check-in' autour de sa position, tout ça depuis notre application par exemple !

	= Démonstration =		= Démonstration =