|
TP : utilisation d’APIS de sites populaires du web 2.0
De $1
Introduction
Dans ce TP vous allez créer un moteur de recherche faisant appel à différentes API du web. Vous commencerez par utiliser YouTube au travers de l’API gdata de Google, qui permet de converser avec l'ensemble des services de google (search, maps, youtube, etc.). Vous complèterez ensuite votre application en associant également les services de Flickr pour récupérer en plus des vidéos correspondant à votre recherche, des photos
Remarque : ce TP propose des requêtes en Ajax "basique", vous pourrez avantageusement les remplacer par des reqûetes jQuery ou Dojo. On vous propose d'utiliser des APIs java pour consommer les web services, au travers d'une Servlet. Si vous terminez plus tôt imaginez comment vous pourriez faire avec une page JSF et un backing bean.
Création d'une application mashup de YouTube et Flickr
- A l’aide de Netbeans ou de Eclipse, créez un nouveau projet de type « application web ».
- Dans la page d’accueil de votre application (la page index.html, ou index.jsp), ajoutez un champ input de type texte, un bouton pour déclencher la recherche, et un champ div vide pour recevoir les résultats de la recherche :
<input type="text" name="query" id="query"/>
<input type="button" value="Chercher" onclick="search();" />
<div id="search_results"></div>
- Votre page incluera un fichier javascript ajaxSearch.js qui contiendra les appels ajax. Pour le moment nous faisons cela en "ajax de base" comme vu dans le TP1 sur Ajax. Voici le code que l’on vous propose (vous pouvez commencer par l'utiliser et si vous êtes à l'aise, remplacez-le par quatre lignes de jQuery ou de Dojo) :
var req;
function search(start){
var query = document.getElementById("query");
var url = "search?query="+ query.value;
//try with Mozilla, opera, etc.
if (window.XMLHttpRequest){ req = new XMLHttpRequest();
}
//else IE
else if (window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.onreadystatechange = callback;
req.open("GET",url,true); req.send(null);
}
function callback(){
var div = document.getElementById('search_results');
if (req.readyState==4){
if (req.status == 200){
//it works:
div.innerHTML = req.responseText;
}else{
//problem:
div.innerHTML = "research failed";
}
}
}
- Pour inclure ce fichier dans la page d’accueil, ajoutez ceci dans le <head> :
<script language="JavaScript" src="ajaxSearch.js"></script>
- Ajoutez une servlet "search" dans votre projet. Veillez à ce que son URL soit « search », afin qu’il corresponde à l’URL de l’appel ajax contenu dans le code javascript du fichier ajaxSearch.js
Voici le code proposé pour la servlet :
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String searchTerms = request.getParameter("query");
out.write("<b>results for " + searchTerms + "<br/>");
YouTubeService service = new YouTubeService("gdataSample-YouTube-2");
YouTubeQuery query = new YouTubeQuery(new URL(VIDEOS_FEED));
query.setStartIndex(1);
query.setMaxResults(20);
query.setFullTextQuery(searchTerms);
VideoFeed videoFeed = service.query(query, VideoFeed.class);
if (videoFeed != null) {
for (VideoEntry ve : videoFeed.getEntries()) {
YouTubeMediaGroup mediaGroup = ve.getMediaGroup();
if (mediaGroup != null) {
String titre = ve.getTitle().getPlainText();
List<MediaThumbnail> thumbs = mediaGroup.getThumbnails();
ve.getEtag();
out.write("<div class=\"video\"><br/>");
out.write("<a href=\"" + ve.getHtmlLink().getHref() + "\" title=" + titre + "><img src=\"" + thumbs.get(0).getUrl() + "\"></a>");
out.write("<br/></div>");
}
}
}
} catch (Exception e) {
e.printStackTrace();
} finally {
out.close();
}
}
Ajoutez quelques variables de classe
Dans votre servlet il vous faudra aussi quelques variables de classe. Au passage, toutes ces explications se trouvent dans le tutorial Getting Started de l'utilisation de l'API de YouTube en java.
// The name of the server hosting the YouTube GDATA feeds
public static final String YOUTUBE_GDATA_SERVER =
"http://gdata.youtube.com";
// The URL of the "Videos" feed
public static final String VIDEOS_FEED =
YOUTUBE_GDATA_SERVER + "/feeds/api/videos";
// The URL of the "Standard" feed
public static final String STANDARD_FEED =
YOUTUBE_GDATA_SERVER + "/feeds/api/standardfeeds/";
Pour que ça compile sans erreurs
Votre servlet est truffée d'erreurs, c'est normal il faut rajouter à votre projet les bonnes librairies (les jars de l'API de YouTube + les imports nécessaires dans la Servlet).
Ajoutez à votre projet les librairies de l’API Youtube
Pour que votre projet compile, il faut ajouter dans les bibliothèques du projet les fichiers .jar nécessaires. Il faut d’abord récupérer la librairie officielle gdata de google : http://code.google.com/p/gdata-java-client/ . Récupérez le zip de la dernière version (cf image, il se peut qu'il y ait de nouvelles versions depuis la 1.42, prenez la plus récente), dézippez le et ajoutez les jars nécessaires dans un répertoire « lib » situé à la racine de votre projet eclipse ou netbeans.
![Snap1.bmp](/@api/deki/files/994/=Snap1.bmp)
![](/@api/deki/files/54/=image002.jpg)
Il faut également ajouter un jar supplémentaire pour l'API Google Collection utilisée par Gdata :
Il faut le jar de google collections sinon, il y a des erreurs de ClassNotFound, etc, etc... Cherchez "google collection" avec google.
Remarque : en Octobre 2011, l'API java collection a migré vers un nouveau projet appelé Google Guava. Vous devez installer le jar de ce projet (plus récent). Les screenshots montrent la version 0.7 mais sil y en a une plus récente, prenez-là.
![Snap2.bmp](/@api/deki/files/995/=Snap2.bmp)
![Snap3.bmp](/@api/deki/files/996/=Snap3.bmp)
![Snap4.bmp](/@api/deki/files/997/=Snap4.bmp)
Note : Tous les jars ne sont certainement pas nécessaires. Dans le TP de Mai 2009, pour utiliser les APIs de flickr et de YouTube, en fait, des élèves ont essayé de réduire le nombre de jars et ont trouvés que ceux-ci suffisaient : , uniquement ceux-ci :
![jars_necessaires.jpg](../../../../@api/deki/files/517/=jars_necessaires.jpg)
Ajoutez les imports nécessaires
Vous pouvez faire clic droit/fixer les imports...
import com.google.gdata.client.youtube.*;
import com.google.gdata.data.Person;
import com.google.gdata.data.extensions.Rating;
import com.google.gdata.data.geo.impl.GeoRssWhere;
import com.google.gdata.data.media.mediarss.MediaKeywords;
import com.google.gdata.data.media.mediarss.MediaPlayer;
import com.google.gdata.data.media.mediarss.MediaThumbnail;
import com.google.gdata.data.youtube.*;
import com.google.gdata.data.youtube.VideoFeed;
Lancer le projet et l'améliorer
- Faire tourner le programme !
- Modifier votre projet pour afficher des informations supplémentaires sur la vidéo (durée, view count, etc.). Lisez donc la doc sur la page de documentation de l’API (cherchez-la donc en ligne !), section "Video Feeds and entries"
- Ajouter de la pagination dans vos recherches, avec des liens "vidéos suivantes" et " vidéos précédentes", afin d’afficher les résultats 1-20, puis 21-30, etc…. En ajax bien sûr ! Vous devrez certainement modifier les différents fichiers de l’application pour passer des paramètres à la servlet de recherche. Regardez dans l'api comment demander les n résultats à partir du résultat numéro m... (pagination).
- On veut dans les résultats non pas voir les thumbnails des vidéos, mais un lecteur flash pour jouer les vidéos ! Modifiez le code de la servlet pour afficher un lecteur flash avec les vidéos.
- Brancher d'autres APIs (voir plus loin dans le TP)
Vous devriez obtenir un résultat de ce type :
![results1.jpg](/@api/deki/files/518/=results1.jpg)
Ajouter les résultats de Flickr
- En utilisant le cours (des transparents powerpoint du cours montrent des bouts de code qui fonctionnent avec une clé, utilisez-le code tel quel avec la clé fournie), débrouillez-vous pour modifier le programme précédent pour afficher en plus des vidéos, les images de flickr correspondants aux critères de recherche ! On veut donc pour une même recherche des vidéos et des images !!!
Voici ce que l'on doit obtenir :
![results2.jpg](/@api/deki/files/519/=results2.jpg)
Autre API
- Vous pouvez utiliser d'autres API: delicious, google map, facebook, etc.
On vous donne ici quelques exemples. Vous pouvez aussi utiliser les tutoriaux pour netbeans + les wizards qui se cachent sous l'onglet "services" et drag'n'dropper dans vos projets :
API Facebook
NOTE : non testé en 2011 il se peut que les infos ici présentes soient obsolètes. Voir le cours HTML5 donné aux M1 Info en 2011.
- Enter the name of your application
![](/@api/deki/files/56/=image004.jpg)
![](/@api/deki/files/57/=image005.jpg)
- Your application has now an API key. Edit the setting to specify how facebook has to communicate with your server
![](/@api/deki/files/58/=image006.gif)
![](/@api/deki/files/59/=image007.jpg)
- Utiliser l'API de votre choix pour développer une application facebook
Idée de mini projet pour ce module
Un outil permettant d'agréger plusieurs fournisseurs de vidéo et de photos. Faire un "méta" youtube+picasa+google vidéo+dailymotion+ .... penser à envoyer plusieurs requêtes en ajax pour que la page affiche les résultats au fur et à mesure qu'ils arrivent, en d'autres termes, quand on clique on envoie autant de requêtes ajax que de services, et on affiche les résultats quand ils arrivent, pas quand la totalité est prête.
|