Nel corso di questa lezione, vedremo come utilizzare nella nostra app una API (Application Programming Interface) esterna. Si tratta di una risorsa remota, raggiungibile tramite una connessione di Rete, che assolve ad uno specifico compito e ne restituisce il risultato all’applicazione stessa che lo potrà utilizzare come se l’intero processo fosse stato gestito in loco.
Per assolvere a questo compito si fa ricorso al componente "invisibile" Web il quale è ricco di proprietà e metodi interessanti per gestire connessioni con risorse remote. Ai fini della nostra lezione vedremo le principali di queste facendo ricorso ad un esempio pratico.
Sempre seguendo i consigli degli sviluppatori di MIT App Inventor, infatti, ci concentriamo su un semplice esempio: ci proponiamo cioè di utilizzare le API fornite da Yahoo Finance per sviluppare una app che consenta, al clic su un pulsante (componente Button), di visualizzare il prezzo attuale di un’azione, il cui codice è specificato all’interno di una casella di testo (componente TextBox). Creiamo quindi, come possiamo vedere nella figura sottostante, un nuovo progetto di nome StockQuotes.
Le componenti visibili da inserire sono tre: una di tipo Textbox (che ci permette di indicare il codice della quotazione richiesta), una di tipo Button (per inviare la richiesta) e una di tipo Label (per visualizzare la quotazione, una volta recuperata tramite le API fornite da Yahoo Finance).
Modifichiamo le proprietà di queste tre componenti come segue:
- impostiamo la proprietà Text di Button1 a "Ottieni la valutazione";
- impostiamo la proprietà Title di Screen1 a "StockQuote";
- impostiamo la proprietà Hint (il suggerimento che indica all’utente come riempire la casella, che viene visualizzato quando ci si posiziona su di essa col cursore) di TextBox1 a "Codice dell’azione da monitorare?";
- impostiamo la proprietà Text di Label1 a ""; tale Label dovrà infatti risultare inizialmente vuota, per poi riempirsi con le quotazioni richieste dall’utente.
Inseriremo inoltre la componente non visibile denominata web (dal pannello Palette, categoria Connectivity). Tale componente, come già detto, consente alla nostra app di gestire le HTTP Request di cui avremo bisogno per interagire con il web service di Yahoo Finance.
Nella figura sottostante, possiamo osservare la scheda Designer della nostra nuova app StockQuotes.
Passiamo ora alla realizzazione dei behavior: uno per sfruttare le API di Yahoo Finance tramite una richiesta HTTP a seguito del clic sul pulsante e l’altro per il conseguente aggiornamento della label.
Creare una richiesta HTTP attraverso il componente Web
Cominciando dal behavior che porta la nostra app a generare una HTTP Request prendiamo in esame innanzitutto come ciò ci consenta di ottenere le informazioni di interesse (il valore di una specifica azione). Ciò è possibile perchè gli sviluppatori di Yahoo Finance hanno fatto in modo che tale informazione sia restituita a seguito di una richiesta all’indirizzo web:
http://finance.yahoo.com/d/quotes.csv?f=l1&s=CODICEsostituendo a "CODICE" l’identificativo dell’azione di interesse (ad esempio, "GOOG" per Google).
Sviluppiamo quindi il behavior associando a un blocco "When Button1.Click" (al clic sul pulsante), una HTTP Request che realizzeremo mediante il componente Web: come prima cosa dobbiamo specificare la URL della risorsa remota settando la proprietà Url (set Web1.Url) ed in seguito invocare il metodo Get (call Web1.Get).
E’ bene precisare che otteniamo la URL concatenando ("join", dalla categoria Text del pannello Blocks) l’indirizzo visto prima (senza CODICE) al codice contenuto nella TextBox (TextBox1.Text). Il behavior appena descritto è rappresentato dai blocchi nella figura in basso:
Resta ora da descrivere, tramite un altro behavior il processo di aggiornamento della Label. Lo facciamo in questo modo:
- per prima cosa attendo la risposta della API remota mediante l’evento GotText del componente Web ("When Web1.GotText");
- creo un costrutto condizionale per verificare se la risposta della API sia di successo (HTTP CODE 200) oppure no;
- in caso affermativo ("if" "get response code" "=" "200") aggiorniamo il testo della Label col contenuto della risposta, cioè con la quotazione richiesta ("then" "set Label1.Text to" "join" "Valore attuale: " "get responseContent")
- in caso contrario ("else") inseriamo all’interno della Label un messaggio di errore ("set Label1.Text to" "Errore!").
Possiamo osservare che il blocco if in cima alla lista Control del pannello Blocks non prevede una clausola else, ovvero "altrimenti"). Possiamo però inserire tale blocco e poi modificarlo opportunamente tramite uno degli strumenti più potenti e flessibili messi a disposizione da MIT App Inventor, ovvero i mutator. Sarà sufficiente cliccare sul piccolo quadrato blu a sinistra di "if" nel blocco per poterlo trasformare in un blocco più elaborato, comprendente anche la clausola "else" (v.figura sottostante).
L’elenco completo delle proprietà, degli eventi e dei metodi del componente Web sono disponibili a questa pagina della documentazione ufficiale di MIT App Inventor.
