Tutorial 11 (Difficile) TinyWebDB Parte 1 - Installazione e creazione custom TinyWebDB service su Google App Engine

In questo tutorial vedremo come utilizzare il componente TinyWebDB di MIT App Inventor 2.

MIT App Inventor 2 è un tool gratuito e web-based per la realizzazione di app android in modo semplice e veloce.

Con questo componente la nostra Android app potrà memorizzare dei dati nel cloud di Google (il loro servizio si chiama Google App Engine per la precisione).

In pratica il componente TinyWebDB come dice il nome stesso altro non è che la versione potenziata del TinyDB che opera sul web.

Ovviamente il bello di tutto questo è che il nostro DB creato su GAE (Google App Engine) sarà accessibile a tutti gli utilizzatori della nostra app, quindi finalmente sarà possibile realizzare applicazioni dove i dati sono "condivisi" e memorizzati nel cloud (un classico esempio: una lista della spesa condivisa, un tabellone per memorizzare gli highscore del vostro videogioco, una lista di posti dove ogni utente può aggiungere il suo, etc...)

Purtroppo lo scotto da pagare è un setup iniziale non proprio semplicissimo, ma ci sono io che vi guiderò passo passo con questo tutorial.

Iniziamo dalla parte 1 dove installeremo tutti i tool necessari e creeremo il nostro servizio su GAE.
Prerequisito essenziale come sempre accade è avere un account google.

Le istruzioni originali in inglese le trovate a questo link: http://appinventor.mit.edu/explore/ai2/custom-tinywebdb.html

Ma so che voi mi seguite proprio perchè parlo in italiano...non perdiamo tempo ed iniziamo subito quindi, andiamo su https://cloud.google.com/appengine/downloads e scarichiamo Google App Engine per Python:

Scaricate la versione più recente per il vostro sistema operativo (nel mio caso Windows 7)

Ora vi servirà anche Python, nella versione 2.7.x (NON scaricate la versione 3.x che non è compatibile con GAE)
Recatevi dunque su https://www.python.org/downloads/ e scaricate il pacchetto per il vostro S.O. più recente (sempre del branch 2.7.x mi raccomando!!!) , nel mio caso è la versione 2.7.10

Ovviamente dobbiamo ora installare questi due pacchetti, iniziamo da Python, le opzioni di default vanno benissimo, anzi consiglio sempre di installare Python nella cartella C:\Python27\ e quindi di non cambiarla:

A questo punto dobbiamo installare GAE, niente di più semplice, clicchiamo sul pacchetto .msi scaricato in precedenza e seguiamo le istruzioni lasciando tutti i valori di default (anche qui per rendervi la vita più semplice non cambiate il percorso di installazione):

Dobbiamo ora scaricare il file sorgente Python creato dal team del MIT App Inventor che ci permette l'uso del componente TinyWebDB in GAE, la versione più recente la trovate a questo indirizzo:
http://appinventor.mit.edu/explore/sites/all/files/tinywebdb/customtinywebdb.zip
Se non dovesse più esserci il file, cercate nella pagina in inglese linkata all'inizio, magari lo hanno solo spostato.

Salvato il file (un .zip) nella cartella del vostro pc, scompattatelo e segnatevi dove lo avete salvato, dovreste avere al suo interno una cartella denominata "appinventordb":

Cerchiamo ora l'icona di Google App Engine launcher e lanciamo l'eseguibile, poi da menù "File" selezioniamo "Add Existing Application..." e con il tasto "Browse" andiamo a selezionare la cartella del file zip appena scompattato, dopodichè clicchiamo su "Add"

Se per qualche motivo sul vostro pc avete già un web server che gira sulla porta 8080, potete specificare un'altra porta libera come illustrato nell'immagine qui sopra.
Se la porta 8080 è occupata riceverete un errore nella finestra di log al lancio dell'applicazione (tra poco sarà più chiara la cosa...)

Eseguiamo la nostra applicazione Python cliccando su "Run" e poi apriamo la finestra di log cliccando sull'icona "Logs"

Potrebbe venirvi mostrato un avviso di sicurezza da parte del firewall di Windows, se così è, date pure il permesso a questa app di accedere a internet (solo su reti private per extra sicurezza):

Dopo qualche decina di secondi l'applicazione dovrebbe essere in esecuzione, questo lo capirete quando vedrete nel log la frase evidenziata qui sotto.
Se ci sono problemi con Python, con il firewall, con le porte in uso, etc... riportate il problema esattamente come scritto nel log nei commenti e cercherò di darvi una mano.

In pratica ora abbiamo l'applicazione che gestisce le richieste dal componente TinyWebDB che gira in locale sul nostro PC. Infatti se con il vostro browser vi portare ora alla pagina
http://localhost:8080
Dovreste vedere la spartana interfaccia grafica che è stata creata dal MIT per interagire con il Database.
Questa interfaccia web permette di inserire e leggere le coppie tag-valore utilizzate dal componente TinyWebDB.
Ricordatevi infatti che come con il TinyDB, con questo componente è possibile salvare delle coppie "chiave-valore" e poi è possibile leggerle tramite i metodi appositi messi a disposizione dal componente nel blocks editor.
(se volete un ripasso sul TinyDB guardate i miei video tutorial su YouTube Tutorial - App MultiScreen con TinyDB)

Andiamo quindi a testare brevemente l'interfaccia web, memorizzando (Store) e leggendo (Get) delle coppie tag-value, per fare questo basta cliccare sul tasto "Browse" in Google App Engine Launcher

Ci si aprirà il browser e da qui potremo provare ad usare le due funzioni "Get value" e "Store a value".
Iniziate inserendo un Tag ed un Value e poi premendo "Store a value", questa coppia chiave-valore verrà visualizzata nella tabella in basso (nel mio esempio ho salvato "provaTag - 123"):

Bene, ora dobbiamo caricare la stessa applicazione sui server di Google, in modo che la stessa interfaccia web e gli stessi comandi per la lettura ed il salvataggio delle coppie chiave-valore siano disponibili nella nostra app.

Clicchiamo quindi su "Dashboard" in GAE Launcher:

Ci si aprirà la pagina web della console sviluppatori di App Engine (se non avete fatto il login con la vostra user di google lo dovrete fare ora...)

Ora dobbiamo creare un nuovo progetto che verrà usato dalla nostra Android App creata con MIT App Inventor, clicchiamo quindi su "Select a project", vedremo la lista dei nostri progetti GAE (nel vostro caso magari la lista sarà vuota), e poi scegliamo "Create a project..."

Ora il passaggio più importante, dare un "Project name" alla nostra applicazione e verificare con attenzione il "project ID".
Il "project ID" ci servirà in seguito, viene generato in automatico, se non vi piace quello generato lo potete cambiare cliccando su "edit" (ma non è realmente necessario farlo)

Una volta che il progetto è stato creato nei server Google GAE vedrete nel vostro browser una schermata simile:

Come evidenziato, fate molta attenzione al nome del progetto che andrà poi inserito nel file app.yaml di Python.

Torniamo in GAE Launcher e clicchiamo su "Edit", qui dobbiamo cambiare il nome della nostra applicazione che dovrà essere uguale al "project ID" scelto pochi istanti fa.
Inizialmente il file app.yaml ha come nome applicazione customtinywebdb27
Cambiatelo con il VOSTRO nome che deve essere uguale al "project ID" (nel mio esempio seblogappstinywebdb), salvate e chiudete l'editor (sul vostro pc potrebbe aprirsi un editor diverso, comunque la procedura rimane la stessa)

Clicchiamo ora sul pulsante "Deploy" in GAE Launcher, si dovrebbe aprire di nuovo il browser con una finestra in cui confermare di dare i permessi a GAE di accedere ad alcune info del nostro account google.

Controlliamo la finestra dei log (che si sarà aperta automaticamente), dopo qualche decina di secondi dovremmo avere conferma che la nostra applicazione è stata caricata sul cloud Google e che è in esecuzione, lo capiamo dal seguente messaggio di conferma:

Se c'è qualche problema provate a stoppare l'applicazione da GAE Launcher e/o chiudere il browser a poi fate di nuovo l'operazione di Deploy.

A questo punto se tutto è andato a buon fine, la vostra applicazione sta girando sui server web di GAE ed è accessibile su internet.
L'indirizzo da digitare per vedere se tutto funziona a dovere è composto da
http://nomevostraapp.appspot.com
quindi nel mio esempio sarà:
http://seblogappstinywebdb.appspot.com/

Come prima proviamo ad inserire e a leggere alcuni Tag-Value usando l'interfaccia web, ad ogni nuovo inserimento dovremmo vedersi popolare la tabella sottostante:

Bene, questa prima lunghissima parte del tutorial è terminata, ora il nostro servizio web sta girando e non aspetta altro di essere utilizzato dalle vostre nuove sfavillanti app.

Se volete un progetto molto veloce e semplice per testare il vostro TinyWebDB, scaricate ed importate il mio file .aia da qui sotto:

TinyWebDBTest.aia

Cambiate nelle proprietà del design editor il valore del "ServiceURL" con l'indirizzo completo del VOSTRO applicativo che sta girando in GAE, testate l'app provando a leggere e/o scrivere dei valori a piacere.

E poi verificate o dall'app o dal server web che i valori vengano effettivamente letti e scritti correttamente (nell'esempio qui sotto leggo il valore di testTag2, mi viene visualizzato correttamente il valore relativo memorizzato che è uguale a "Sebastiano")

Vedremo nei prossimi tutorial come realizzare delle altre semplici app che utilizzino il componente TinyWebDB per lo storage sul cloud.

Se preferite ho anche una versione video dello stesso tutorial:

Per ogni domanda dubbio o chiarimento usate lo spazio qui sotto.
Buon App Inventing