Come creare un'app Android da zero

App Inventor è un’applicazione web nata nei laboratori di Google per poi essere abbandonata da parte del colosso di Mountain View e proseguita, per ciò che riguarda il suo sviluppo, dai programmatori del MIT (Massachusetts Institute of Technology), una delle università di ricerca più importanti e conosciute al mondo con sede a Cambridge (Massachusetts, Stati Uniti).
Il passaggio del testimone è avvenuto ad agosto 2011 mentre a dicembre 2013 è stata pubblicata online la seconda versione di MIT App Inventor.

Il principale vantaggio derivante dall’utilizzo di MIT App Inventor è che chiunque può creare un’app Android senza mettere mano al codice e quindi senza una specifica preparazione per ciò che riguarda la programmazione Java.

MIT App Inventor opera “sulla nuvola”: ciò significa che lo sviluppo delle app Android avviene interamente sui server del progetto senza la necessità di installare alcunché in locale. In particolare il designer e l’editor a blocchi di App Inventor possono e debbono essere utilizzati dal browser web (Internet Explorer non è supportato; bisognerà utilizzare Chrome o Firefox): ciò significa che per creare un’app Android non bisognerà caricare alcun software sul proprio sistema.

Per provare le app Android in corso di sviluppo, invece, bisognerà preferibilmente disporre di un dispositivo Android (ad esempio uno smartphone od un tablet) e di una connessione Wi-Fi.

Se non si potesse usare una connessione Wi-Fi per dialogare con il dispositivo Android, si potrà comunque provare l’app Android in fase di sviluppo ricorrendo ad un collegamento mediante cavo USB.

Qualora non si fosse nelle condizioni di utilizzare un device Android, si potrà comunque sottoporre a test l’app Android che si sta creando ricorrendo ad uno speciale emulatore, un software installabile su sistemi Windows, Mac OS X e Linux che ricalca il funzionamento di un dispositivo basato sul sistema operativo del robottino verde.

Creare un’app Android e provarla sul dispositivo collegato via Wi-Fi

Il modo migliore per creare un’app Android e provarla su un device, sia esso uno smartophone od un tablet, è quello di collegare tale dispositivo alla rete locale via Wi-Fi. Basterà quindi fare affidamento su un normale router Wi-Fi sul quale sia già attestato anche il client (un sistema desktop o notebook) sul quale si prevede di sviluppare l’app Android.

Sul dispositivo Android bisognerà installare l’app MIT AI2 Companion quindi sarà necessario accertarsi che il device sia collegato alla medesima rete locale sulla quale “si affaccia” il sistema desktop/notebook impiegato per lo sviluppo dell’applicazione mobile.

A questo punto, si potrà avviare MIT App Inventor aprendo questa pagina dal browser web (non dal dispositivo Android ma dal sistema desktop/notebook).

Usare MIT App Inventor 2.0

Per utilizzare MIT App Inventor, è necessario dapprima effettuare il login al proprio account utente Google (usare questa pagina) quindi portarsi a questo indirizzo. Comparirà il messaggio seguente:

Per procedere bisognerà accordare l’autorizzazione per l’accesso al proprio account Google da parte dell’applicazione web MIT App Inventor.

Alla comparsa del messaggio Please fill out a short voluntary survey… si potrà fare clic su Take survey later o su Never take survey qualora si volesse, rispettivamente, rispondere in un momento successivo al sondaggio preparato dagli sviluppatori MIT oppure non fornire mai alcuna risposta.

Non appena apparirà la schermata che segue, si dovrà semplicemente cliccare sul pulsante Continue in basso a sinistra:

A questo punto, si dovrà fare clic su Start new project ed assegnare un nome (ad esempio, prova) al primo progetto App Inventor.

Dopo un paio di secondi di attesa, apparirà un editor visuale contenente, nella colonna di sinistra, tutti gli elementi utilizzabili nel progetto di sviluppo dell’app Android (pulsanti, caselle di scelta, selezione di date ed orari, immagini, etichette, liste, notifiche, campi password, slider, caselle di testo, riquadri browser web).

Eseguire l’app Android sul dispositivo mobile

Iniziamo con l’accertarci che sia tutto pronto per eseguire sul dispositivo mobile Android le app create con MIT App Inventor.

Per procedere è sufficiente selezionare il menù Connect quindi la voce AI Companion.

Apparirà una schermata raffigurante un codice QR (vedere Creare e leggere codici QR. I codici che permettono di fornire ed ottenere informazioni in modo rapido).

Si dovrà subito avviare l’applicazione MIT App Companion precedentemente installata sul dispositivo Android connesso alla rete locale via Wi-Fi e toccare Scan QR code.

Per acquisire il codice alfanumerico visualizzato sullo schermo senza digitarlo manualmente, basterà inquadrare il codice QR quindi selezionare Connect with code.

Sul dispositivo Android apparirà immediatamente la schermata dell’app in corso di sviluppo (per il momento completamente vuota) nella finestra di MIT App Inventor.

Conoscere l’interfaccia di App Inventor: prima app Android di esempio

L’interfaccia di MIT App Inventor

È adesso giunto il momento di iniziare a creare la prima app Android con App Inventor.

La finestra detta Designer è lo strumento che dovrà essere utilizzato per organizzare e strutturare graficamente le varie activity dell’app Android ossia tutte le schermate che andranno a comporre l’applicazione.

È interessante, in questa fase, verificare subito come la colonna di sinistra non soltanto contenga una serie di elementi da aggiungere (pulsanti, caselle di testo, caselle di scelta,…) ma anche strumenti per organizzare il layout della schermata e degli oggetti in essa inseriti, per interagire con la fotocamera del dispositivo mobile, per consentire all’utente di scegliere un’immagine dalla galleria, per riprodurre suoni, per effettuare il riconoscimento vocale e così via (sezione Media).

Non solo. Cliccando su Sensors, si può interagire coi sensori che equipaggiano il dispositivo mobile Android (accelerometro, scanner di codici a barre, orologio, geolocalizzazione, orientamento del display, sensore NFC).

Cliccando sul pulsante Blocks in alto a destra, nella finestra di MIT App Inventor, si accederà all’editor a blocchi ossia allo speciale meccanismo che consente di “assemblare” il funzionamento dell’app Android.

Qui lo sviluppatore ha modo di impostare il comportamento dell’applicazione ossia in che modo essa debba reagire al presentarsi di uno specifico evento.
Il comportamento che l’app deve mantenere potrà essere definito agendo sugli elementi proposti nella colonna di sinistra.

Come creare la prima app con MIT App Inventor

Dopo aver dato un’occhiata all’interfaccia di MIT App Inventor, consigliamo di provare a realizzare la prima semplicissima applicazione.
Allo scopo, suggeriamo di sfruttare le risorse messe a disposizione dagli sviluppatori del MIT.

Il primo passo consiste nel cliccare sul pulsante Designer e nel posizionare un pulsante (button) nella schermata dell’app Android.
Per farlo, basterà trascinare la voce Button dalla sezione User interface della colonna di sinistra, sulla schermata dell’applicazione. Si otterrà qualcosa di simile:

Contemporaneamente, avendo collegato App Inventor al dispositivo mobile Android via Wi-Fi, la modifica apparirà anche sullo smartphone o sul tablet:

Il “look” del pulsante è liberamente personalizzabile. Si supponga ad esempio di volervi visualizzare un’immagine.
Si provi allora a scaricare questo file (tasto destro sul link, Salva file con nome…) quindi a fare clic sulla casella Image nella colonna di destra (dopo aver selezionato il pulsante Button1):

Con un clic su Upload file quindi su Scegli file, si potrà caricare online il file kitty.png precedentemente prelevato.

Dalla casella Text si potrà eliminare la stringa Text for Button1 in modo tale da evitare che venga visualizzato un testo sopra l’immagine appena caricata.

Ecco come si dovrebbe adesso presentare l’applicazione Android sul dispositivo mobile:

Per aggiungere un testo sotto l’immagine, si può adesso trascinare un’etichetta (Label) dalla lista dei componenti (colonna di sinistra).

Nella casella Text si può digitare Toccare l'immagine per far miagolare il gatto.
Agendo sui vari attributi BackgroundColor, TextColor, FontSize, TextAlignment, si potrà modificare il “look” dell’etichetta.

A questo punto è possibile inserire il componente che consentirà di riprodurre un suono. Dalla colonna di sinistra dell’App Inventor, si può cliccare su Media quindi trascinare sulla schermata l’oggetto Player.

In calce alla schermata apparirà il componente “non visibile” Sound. Dopo aver fatto clic su tale oggetto, ci si dovrà portare nella colonna di destra, cliccare su Source quindi caricare il file MP3 prelevabile in locale da qui (tasto destro, Salva file con nome).

È la volta di impostare il funzionamento vero e proprio dell’app Android ed in particolare stabilire che cosa deve accadere quando l’utente tocca l’immagine raffigurante il gatto.

Regolare il comportamento dell’app Android: l’editor a blocchi

Cliccando sul pulsante Blocks in alto a destra, si dovrà selezionare Button1 dalla colonna di sinistra. Così facendo si otterrà la lista degli eventi associati al pulsante che potranno essere “intercettati” e gestiti.

Cliccando una volta sull’evento Button1.Click, si potrà specificare il comportamento da tenere ogniqualvolta l’utente cliccherà sul pulsante. L’evento “click”, infatti, sarà inserito nell’area vuota posta immediatamente sulla destra.

Tutti gli eventi sono sempre visualizzati con un colore giallo mostarda ed in quella che somiglia alla tessera di un puzzle, appare la stringa when (“quando”).
La dizione “when Button1.Click do” è autoesplicativa e può essere tradotta più o meno così: “quando si verifica l’evento Click – ossia quando l’utente fa clic sul pulsante denominato Button1 – esegui quanto segue“.

Adesso, dal momento che l’obiettivo è quello di provocare la riproduzione di un effetto sonoro (il file MP3 scaricato in precedenza), bisognerà selezionare l’oggetto Player1 dalla colonna di sinistra di App Inventor quindi cliccare una volta sul “tassello” viola call Player1.Start.

Il tassello del “puzzle” di colore viola dovrà essere quindi “incastonato” all’interno di quello di colore giallo mostarda a formare un corpo unico:

Il risultato è ovvio: non appena l’utente farà clic sul pulsante Button1, verrà richiesta la riproduzione del file audio impostato in Player1.

Cliccando su Player1 (colonna di sinistra) quindi selezionando l’evento .Vibrate si potrà addirittura far vibrare il dispositivo mobile non appena l’utente toccherà l’immagine del gatto.
“Incastrando” l’evento Player1.Vibrate sotto Player1.Start, non solo verrà riprodotto un suono ma lo smartphone Android verrà fatto vibrare.

Manca però ancora un passaggio: l’interfaccia dell’editor a blocchi di App Inventor, infatti, visualizza un messaggio d’allerta (punto esclamativo giallo).
L’evento .Vibrate presuppone che lo sviluppatore specifichi anche un valore in millisecondi ossia, in questo caso, la durata della vibrazione.
Per concludere, quindi, bisognerà fare clic su Math nella colonna di sinistra e scegliere il primo elemento:

Spostando il tassello blu a destra dell’evento .Vibrate in viola e specificando 1500 come valore, lo smartphone Android sarà fatto vibrare per un secondo e mezzo (1500 millisecondi).

Ottenere il file APK dell’app Android appena sviluppata

L’app Android appena creata è, all’atto pratico, di assoluta inutilità. Si è però avuto modo di illustrare i principali rudimenti di App Inventor.

Per ottenere il file APK dell’app Android appena sviluppata, è sufficiente fare clic sul menù Build quindi selezionare App (save .apk to my computer).

A questo punto, l’applicazione potrà essere eseguita da qualunque dispositivo Android: basterà copiare il file APK e disattivare la casella Origini sconosciute nella sezione Sicurezza del sistema operativo.

L’applicazione potrà essere poi eventualmente pubblicata anche su Google Play seguendo le indicazioni riservate agli sviluppatori e pubblicate a questo indirizzo.