b) AmplifyJS

Adesso bisogna che anche la parte client-side sfrutti i nuovi servizi RESTful. Potremmo utilizzare jQuery e costruire gli URL "a mano" in questo modo però dobbiamo prestare molta attenzione nell'utilizzare configurazioni hardcoded, "murate" dentro i sorgenti.
Per questo compito ci da una mano AmplifyJS, basato su jQuery.
Questo framework, oltre che semplificare la configurazione per l'accesso tramite AJAX a servizi RESTful, consente anche di mantenere una cache delle richieste già effettuate o la possibilità di mantenere uno "storico" delle richieste fatte.

Vediamo la differenza nell'utilizzo di jQuery e AmplifyJS.

Supponiamo di avere un servizio RESTful, per l'aggiornamento dei messsaggi, che utilizza come payload delle richieste JSON:
PUT /messages/{id}

jQuery
​$.ajax({
type : "PUT",
url: "/messages/1",
success : callback,
dataType: "json",
contentType : "application/json",
data: JSON.stringify({data: "mydata"}​)
});

Chiaramente successivamente nel codice sarà definita la funzione di callback. Ogni volta che dobbiamo fare una richiesta siamo costretti a utilizzare questo script.

function callback(data) {
alert(JSON.stringify(data));
}

AmplifyJS
Ci basterà definire, dopo l'onLoad della pagina, la richiesta
amplify.request.define(
"updateMessage",
"ajax",
{
url: "messages/{id}",
dataType: "json",
contentType : "application/json",
type: "PUT",
processData : false,
dataMap : function(data){
if ( data.jsonPayload )
return JSON.stringify(data.jsonPayload);
//backward compatibility
return data;
}
}
);


Successivamente nel codice possiamo sfruttare la richiesta senza dover definire tutte le volte le opzioni comuni.

amplify.request({
resourceId : "updateMessage",
data : {
id : 1,
jsonPayload : {nickname: "alessandro, message: "messaggio"}
},
callback
);

In questo modo se per esempio cambiasse il punto di accesso /messages dovremmo intervenire solo in un punto del codice.

Possiamo semplificare ulteriormente

function updateMessage(id, data) {
amplify.request({
resourceId : "updateMessage",
data : {
id : id,
jsonPayload : data
},
callback
);
}

//... in code
var jsonData = {nickname: "alessandro", message: "my update message};
var id = 2;
updateMessage(id, jsonData);

Non male!

Adesso leggiamo le specifiche della nostra applicazione "Gestione Aule", dividiamoci in team e, avendo già pronti i servizi RESTful per le operazioni di CRUD, realizziamo le interfacce.

Comments