Projet Web 2.0 MBDS

De $1

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

 

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 :

// On construit un objet qui va contenir les champs du formulaire
// Notamment, certains champs qui correspondront aux images
// selectionnees
var data = new FormData();
// champs du formulaire titre et contenu...
data.append('titre', $("#titre").value);
data.append('contenu', $("#contenu").value);

// et les images
jQuery.each($('#file')[0].files, function(i, file) {
    data.append('file-'+i, file);

});
// soumission par POST au WS
$.ajax({
    url: 'resources/article/createAvecImages',
    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.

UPDATE du 7/6/2012 : on peut directement envoyer des images encodées base64 sans avoir à s'embeter à la reception pour transformer les data urls. C'est la ligne 9 qui transforme l'image base64 en image binaire standard. Info en provenance de http://www.raymondcamden.com/index.cfm/2012/4/6/Face-detection-with-getUserMedia

function snapshot() {
	$("#result").html("<p><i>Working hard for the money...</i></p>");
	 
	canvas.width = video.videoWidth;
	canvas.height = video.videoHeight;
	canvas.getContext('2d').drawImage(video, 0, 0);
	 
	var data = canvas.toDataURL('image/jpeg', 1.0);
	newblob = dataURItoBlob(data); // HERE Base64 -> binary
	 
	var formdata = new FormData();
	formdata.append("api_key", faceKey);
	formdata.append("api_secret", faceSecret);
	formdata.append("filename","temp.jpg");
	   
	formdata.append("file",newblob);
	 
	$.ajax({
			url: 'http://api.face.com/faces/detect.json?attributes=age_est,gender,mood,smiling,glasses',
			   	   data: formdata,
			cache: false,
			contentType: false,
			processData: false,
			dataType:"json",
			type: 'POST',
			success: function (data) {
				handleResult(data.photos[0]);
			}
	 
	});
}

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)

Sans librairies externes

La premièresolution, la plus simple, n'utilise pas de librairie externe. On se repose uniquement sur Jersey. Voir cet article : http://www.mkyong.com/webservices/ja...ple-in-jersey/

Note : dans l'article on parle de dépendances, je pense que ce n'est pas nécessaire avec la version actuelle de Jersey.

Seconde solution : utiliser la librairie Apache Common File Upload

Il faut utiliser la librairie Apache common file upload : http://commons.apache.org/fileupload/