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>
<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>