Dopo aver trattato l'utilizzo dell’SDK di Baasbox per Android, in questa lezione vedremo come utilizzare quello per JavaScript. Non solo questa tecnologia può essere applicata a qualsiasi applicazione web, ma si presta anche all'ambito mobile, soprattutto per le applicazioni piattaforma.
Anche in questa lezione proporremo l'esempio del gestore di spese, illustrato in precedenza.
Per la realizzazione dell'interfaccia abbiamo utilizzato jQuery Mobile, che permette di creare applicazioni web ottimizzate per la visualizzazione sui sistemi mobile. Comunque, tutto ciò che impareremo è sfruttabile con qualunque altro framework scritto in JavaScript.
Javascript SDK per BaasBox
Javascpt SDK è uno dei tre SDK ufficiali scaricabili dalla pagina dei download di BaasBox, ed è basato su jQuery.
Dopo aver scaricato sotto forma di archivio compresso questo SDK, lo si deve decomprimere in una cartella a piacimento, tipicamente quella del progetto. Il file baasbox.js che vi troveremo all'interno rappresenterà per noi il punto di accesso alla libreria.
Nelle nostre pagine JavaScript, si potrà entrare in comunicazione con il backend mediante l'oggetto BaasBox, che offrirà tutti i metodi necessari. Le chiamate che verranno realizzate saranno svolte in modalità asincrona, e per ognuna di esse dovremo predisporre appositi gestori che agiscano in caso di successo o di errore. Come si vedrà, chi ha già avuto a che fare con jQuery troverà l'uso della libreria abbastanza intuitivo.
L'esempio
Come per l'esempio della lezione precedente, assumeremo che nella piattaforma sia già disponibile un utente con username e password entrambi uguali ad appclient, ed una collection di nome gestione_spese. Si è provveduto alla loro predisposizione a priori solo allo scopo di semplificare il codice di esempio ma, ovviamente, tramite SDK ed eventuali chiamate REST è possibile realizzare da remoto qualunque operazione.
L'interfaccia della nostra applicazione apparirà come nell'immagine seguente:
L'interfaccia è suddivisa in due porzioni: un form, in alto, che permette di salvare nella piattaforma i dati di una nuova spesa intrapresa, ed una lista, in basso, che mostra le voci di spesa attinenti alla categoria selezionata nel filtro a tendina. Si noti anche che la barra, presente nell'intestazione della pagina, mostra il nome dell'utente, acquisito a seguito del login.
L'esempio è composto da una pagina index.html, contenente solo l'HTML ed i riferimenti alle librerie sopra citate, e dal file functions.js, che incorpora tutto il codice JavaScript che scriveremo. Il codice sorgente è allegato a questa lezione.
Per prima cosa è necessario includere all'interno dello header HTML tutti gli script occorrenti, inclusi jQuery Mobile ed il file baasbox.js:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="baasbox-js/baasbox.js"></script>
<script src="functions.js"></script>
</head>
<body>
<div data-role="page" id="content">
<div data-role="header">
<h1 id="titoloapp">Gestione spese con Baasbox</h1>
</div>
<div class="ui-content" id="content">
<form method="post">
<input type="text" name="importo" placeholder="Importo..." id="importo" data-clear-btn="true">
<input type="text" name="descrizione" placeholder="Descrizione..." id="descrizione" data-clear-btn="true">
<select name="tipo" id="tipo">
<!-- omissis: altre categorie -->
</select>
<input type="button" value="Salva" id="saveBtn" data-icon="check" data-iconpos="right" data-inline="true">
<input type="button" value="Cancella" id="cleanFrm" data-icon="delete" data-iconpos="right" data-inline="true">
</form>
<div id="myPanel" data-inline="true">
<h3>Filtro per categoria:</h3>
<select name="ricercaPerTipo" id="ricercaPerTipo" text="Filtro">
<option value="0">Tutte le categorie</option>
<!-- omissis: altre categorie -->
</select>
</div>
<div>
<h3> <span >Totale spese: </span><span id="totale">0 EUR </span></h3>
</div>
<ul data-role="listview" id="lista_spese" data-inset="true">
</ul>
</div>
</div>
</body>
</html>
Per il resto, il file non mostra altro che comuni elementi HTML, arricchito con attributi di tipo data-* (come ad esempio data-role, data-inline, eccetera), utili per jQuery Mobile.
Il file functions.js contiene tutto il JavaScript di cui avremo bisogno ed inizia con il codice di una funzione attivata al termine del caricamento del documento HTML, tramite il metodo ready() di jQuery:
$( document ).ready(function() {
...
...
});Al suo interno, per prima cosa procederemo al login. Per farlo, però, sarà prima necessario fornire le coordinate della piattaforma nella rete (endpoint ed appcode):
BaasBox.setEndPoint("http://localhost:9000");
BaasBox.appcode = "1234567890";
BaasBox.login("appclient", "appclient")
.done(function (user) {
$('#titoloapp').text("Utente "+user.username+", benvenuto in Gestione Spese");
listaCollection("gestione_spese");
})
.fail(function (err) {
alert("Errore! Credenziali non valide!!");
});
Per accedere alla piattaforma si invoca il metodo login, fornendo username e password, e si specificano due funzioni anonime, una passata come parametro al metodo done, ed eseguita nel caso in cui la chiamata remota va a buon fine, e l'altra passata come argomento del metodo fail, eseguita solo in caso di errore.
Sempre all'interno del metodo ready viene dinamicamente assegnato un handler per l'evento click del pulsante Salva:
$("#saveBtn").click(function()
{
if ($("#tipo option:selected").val()==0 || $("input#importo").val()=="" || $("input#descrizione").val()=="")
{
alert("Completare tutti i campi");
return;
}
var o = {};
o.amount = parseFloat($("input#importo").val());
o.description=$("input#descrizione").val();
o.category=$("#tipo option:selected" ).val();
BaasBox.save(o, "gestione_spese")
.done(function(res) {
// salvataggio riuscito
})
.fail(function(error) {
alert("Errore: inserimento non eseguito");
});
});Per il salvataggio dei dati, si crea un oggetto comune JavaScript e se ne popolano le proprietà con i valori. Il metodo dell'SDK chiamato in causa è save, che riceve l'oggetto ed il nome della collection cui accodarlo. I dati in BaasBox vengono salvati come documenti JSON, le cui proprietà rispecchiano quelle impostate nell'oggetto.
Nei casi in cui si dovrà svolgere un'operazione di ricerca nel database, più o meno direttamente, il nostro codice JavaScript invocherà la funzione filtraCollection:
function filtraCollection(collection, parametri)
{
BaasBox.loadCollectionWithParams(collection, {where: parametri})
.done(function(res) {
aggiornaListView(res);
})
.fail(function(error) {
// gestione del caso di errore
console.log(error);
});
}
Il codice precedente permette di effettuare interrogazioni sulla collection indicata. Esso consente inoltre di fornire parametri per filtrare i risultati, esattamente come avviene con il WHERE del linguaggio SQL. Il formato in cui verranno espressi tali parametri è ancora JSON: per reperire, ad esempio, tutti i documenti relativi alla categoria vestiti, verrà passato il parametro seguente:
{where: " category='vestiti' "}