Partie 3: Création d'un Mashup avec les API Google Maps, Youtube et Freebase

De $1

Version de 05:35, 29 Avr 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

 

Objectifs

Un mashup est une application dont le contenu provient de la combinaison de plusieurs sources d'information. c.f., l'article wikipedia: http://fr.wikipedia.org/wiki/Application_composite

Nous allons créer un mashup qui utilise majoritairement les API proposées par Google: API Google Maps, Youtube, et Freebase.

Google Maps et Youtube ne sont pas à présenter. Freebase est une base de connaissances du web sémantique, c.f., http://www.freebase.com/ . On parle de web des données, c.f., http://linkeddata.org/ L'ensemble des bases de connaissances connectées et accessibles sur le web sont représentées sur ce qu'on appel le nuage des données liées (linked data cloud):

Il existe d'autres bases de connaissances que Freebase sur le web des données,

certaines sont spécialisées pour un domaine, certaines générales

Mise en place

Tout d'abord, suivez ces étapes:

  • créez une application dans la console des développeurs Google: http://cloud.google.com/console/project
  • Ensuite, dans l'onglet APIs & auth -> APIs, activez les API nécessaires au fur et à mesure de l'avancée de votre projet.
  • Finalement dans l'onglet APIs & auth -> Credentials, on voit les différentes clés à utiliser pour le projet. Celle qui nous intéresse est la clé pour un accès publique.
  • Dans "Edit allowed referers", on peut indiquer le site d'où les appels à l'API seront autorisés (évite les abus si quelqu'un vous vole votre clé). Renseignez ce champs si votre site est en ligne.

Votre mission:

Si vous travaillez en binôme, avec chacun son ordi, vous aurez probablement une meilleure application à la fin

Vous rendrez un fichier par application fonctionnelle, aux différents stades de son évolution. Ou vous mettez votre projet en ligne.

L'objectif est d'afficher l'ensemble des tremblements du mois dernier de magniture > 2.5, avec les fonctionnalités suivantes: (qu'on peut changer avec un formulaire html):

  • les marqueurs sont des cercles dont la taille dépend de la magnitude du séisme
  • (INFO-BULLE) lorsqu'on clique sur un marqueur, une info-bulle s'ouvre et donne les caractéristiques principales du tremblement de terre
  • (YOUTUBE) une liste de video youtube en lien avec le lieu du tremblement de terre sont données à la suite de l'info-bulle
    • vous utiliserez en particulier la méthode search.list
  • (FREEBASE) une description plus précise de l'endroit est donnée à la suite de l'info-bulle
    • vous utiliserez en particulier les méthodes search et topic

Vous pouvez avoir fini en 1h30. si c'est le cas, innovez et publiez votre appli.

 Sources de documentation / d'inspiration

 Voici un Minimal Working Example pour l'appel à l'API youtube en utilisant la librairie client javascript des API google:

<html>
  <head>
    <script>
	  // la méthode makeRequest est appelée après le chargement de la librairie youtube
      function makeRequest() {
  	  // on paramètre l'appel à l'API avec la méthode search.list, c.f., https://developers.google.com/youtube/v3/docs/search/list
	var request = gapi.client.youtube.search.list({
			q: "api youtube",
			part: 'snippet'
		});
		
  	  // on effectue l'appel et on affiche les résultats dans la console
		request.execute(function(response) {
			console.log(response.result);
		});
	  }

	  // la méthode load est appelée après le chargement de l'api javascript google
      function load() {
        gapi.client.setApiKey("LA CLE DE L'APPLICATION");
        gapi.client.load('youtube', 'v3', makeRequest);
      }
    </script>
    <script src="https://apis.google.com/js/client.js?onload=load"></script>
  </head>
</html>