Projet Web 2.0 MBDS

Introduction

Voici deux sujets qui mélangent Web Services et HTML5. Ceux qui n'ont pas pris comme sujet HTML5 "continuer le paint" n'auront pas à l'intégrer au blog.

Sujet 1 : booster le blog + Web Services + jQuery à la sauce HTML5

Vous partirez du blog qui vous a été proposé dans le TP2 sur les Web Services et rajouterez de nombreux éléments vus dans le cours HTML5 :

1. Possibilité de publier une photo à l'aide d'un champs input + attribut multiple, également par drag'n'drop dans une zone et enfin (chrome canary only, lancé avec l'option --enable-media-streaming) via l'API permettant d'utiliser la Web Cam (voir : http://www.html5rocks.com/en/tutoria...ermedia/intro/). Possibilité également d'uploader toutes les images d'un répertoire (chrome canary, voir : http://www.htmlfivewow.com/slide18)
2. Possibilité d'envoyer un dessin issu du paint HTML5 que vous aurez réalisé. Le paint sera intégré au projet du blog, et la page html du blog possèdera un bouton "lancer le paint", le paint proposera un bouton "publier le dessin sur le blog"
3. Vous devrez utiliser les tags de structuration html5 comme <article>, <section>, etc.
4. Vous devrez au moins réaliser une transition CSS3 et une animation CSS3.
5. Possibilité d'insérer dans le blog une image de carte google map centrée sur la position récupérée par géolocalisation, soit une image soit une carte interactive.
6. Possibilité de voir un diaporama à base de CSS3, contenant les dernières photos publiées.

Sujet 2 : ajouter des Web Services à votre projet du semestre 1 et développer un client Java Desktop ou Android

• Le client utilisera la librairie HTTPClient de Apache, pas de Javascript/html dans le client
• Vous développerez d'abord un client Desktop simple/preuve de concept pour écouter ou modifier les données de votre projet
• Vous pourrez aller plus loin en développant un simple client Android ou un client HTML5 + JS adapté au mobile.

A propos de l'upload d'images sur un Web Service

Justement, c'est à vous de voir. Je vous donne plusieurs pistes et aides. Envoyer des images sélectionnées à partir d'un champ de formulaire (<input type="file" name="imagesToUpload" multiple />), ce n'est pas compliqué, on procède à de l'envoi binaire multipart classique. Voir l'aide "web service pour uploader des fichiers binaires, plus loin dans cette page).

Pour les fichiers drag'n'droppés, dans les exemples vus en cours on récupère les images au format base64, sous la forme de data URLs, c'est pour pouvoir modifier les attributs src de tags images et faire une preview dans la page sitôt le drop effectué, vous pouvez aussi utiliser les fonctions de lecture binaire de l'objet FileReader de la File API de HTML5 (plus pratiquer d'envoyer l'image en binaire jpg au serveur). Je donne aussi des pistes.

Le problème est le même pour la récupération d'images depuis la web cam ou depuis un répertoire.

Aide : un client JavaScript qui envoie une image pour upload

• Voir le cours sur File API et Drag'n'Drop API (le ppt), il pointe sur : http://www.thebuzzmedia.com/html5-dr...-api-tutorial/
• Le site de démo correspondant à ce tuto est :  http://imgscalr.com/ Regardez le fichier main.js inclu.
• Autre site intéressant montrant un HTML5 image uploader : http://www.thebuzzmedia.com/html5-dr...-api-tutorial/

Aide : envoyer un formulaire multipart en Ajax avec jQuery

Le format multipart permet d'envoyer tout un formulaire en une seule requête, même si ce formulaire contient des objets de type "file".

Exemple de requête Ajax POST en jQuery :

var data =newFormData(); // on simule un formulairejQuery.each($('#file')[0].files,function(i, file){    data.append('file-'+i, file);});  // On a créé un formulaire en jQuery, sous la forme d'une variable de type // FormData. Dans cet exemple, on a rajouté des champs "file1", "file2", etc. // qui ont pour valeur des objets de type File (des fichiers qu'on pourra obtenir avec // la File API à partir de l'évènement de drag'n'drop, voir le cours ! // On peut ajouter des champs à ce formulaire avec // data.append(nom, valeur); nom étant une chaine de caractère  // correspondant au nom du paramètre du formulaire  // Maintenant on va envoyer la requête Ajax à un Web Service $.ajax({    url:'resources/articles/createWithImages',    // URL du web service, à adapter    data: data,    cache:false,    contentType:false,    processData:false,    type:'POST',    success:function(data){        alert(data);    }});

Il est impératif d'avoir : contentType : false, sinon jQuery rajoute lui-même un Content-type qui n'est pas bon. Vous devez aussi mettre processData à false sinon jQuery essaiera de transformer le contenu du formulaire en String.

Liens web pour explications : http://stackoverflow.com/questions/5392344/ seconde réponse est la bonne.

Ajax et jQuery : http://www.w3schools.com/jquery/jquery_ref_ajax.asp

Le web service correspondant sera similaire à celui présenté ici : http://www.mkyong.com/webservices/ja...ple-in-jersey/ il faudra rajouter autant de @FormParam que nécessaire, autant que vous avez de champs dans votre formulaire. Si vous voulez uploader plusieurs fichiers en même temps : mettre @FormParam("file1") ... et dupliquer avec ("file2") etc.... vous testerez si les streams sont null pour ne pas uploader d'image non existante.

Aide : comment décoder en Java le format Base64

Il existe des méthodes et classes cachées dans le JDK, mais je vous déconseille de les utiliser. La librairie de Web Service Jersey, que vous utilisez, contient les classes qu'il faut pour encoder/décoder ce format :

import com.sun.jersey.core.util.Base64; ... Base64.base64Decode(...)

Aide : un web service REST pour envoi d'un fichier binaire (upload d'images par ex)