Pubblicato il 02/04/13e aggiornato il

Come creare applicazioni per Android con MIT App Inventor.

Come realizzare una applicazione per telefoni e tablet Android utilizzando il tool MIT App Inventor con il Designer e il Blocks Editor.
Dopo aver visto come si possa realizzare una applicazione per Android con AppsGeyser e aver illustrato come pubblicare l'app creata su Google Play facciamo un ulteriore passo dentro il mondo degli sviluppatori per smartphone Android. Si tratta di configurare il computer e scaricare i tool gratuiti per realizzare applicazioni partendo proprio da zero. Questo articolo è per lettori che siano interessati al tema ma che siano assolutamente digiuni di questi argomenti.

Non ho in mente di fare un post analogo sulle applicazioni per iOS visto che XCode il programma apposito della Apple è scaricabile gratuitamente ma poi per pubblicare le applicazioni su iTunes occorre pagare un canone annuale non di poco conto. Gli sviluppatori Android invece sono tenuti a versare un contributo di 25 euro una tantum per la pubblicazione di applicazioni su Google Play.

Per iniziare occorre andare su MIT App Inventor Setup e verificare se l'hardware che utilizziamo risulti compatibile. Funziona con OS Windows, Macintosh, Linux e con browser Firefox, Safari, Chrome e Internet Explorer 7+. E' inoltre fondamentale aver installato JAVA sul computer. Ci si può recare nella pagina del Java Test per verificare che il plugin sia installato. Se non si vedesse questo messaggio

java-test

Occorre andare nei link posti in basso per rimediare alla mancanza del plugin. A questo punto nella pagina di installazione di App Inventor bisogna selezionare il software da installare tra
  1. Istruzioni per Mac OSX -
  2. Istruzioni per GNU/Linux -
  3. Istruzioni per Windows
Nel caso si sia scelto Windows si aprirà un'altra scheda con il link per il download dell'Installer che consta di circa 92MB. Il programma sarà installato sul computer facendo doppio click sul file scaricato. Tale software però non dovrà essere aperto dal computer ma servirà da supporto ai tool del browser e alla applicazione Java. Ora dovremo aprire MIT App Inventor Beta in cui potremo accedere tramite un nostro account Google. La prima volta andando su My Projects non vedrete elementi. Per la prima realizzazione bisogna andare su New, digitare il nome scelto per la app e andare su OK

creare-applicazioni-android

Si aprirà quello che potremo definire il Designer della applicazione. Ecco uno screenshot

app-inventor-designer

Nella colonna di sinistra ci sono le Palette suddivise in varie sezioni. In Basic si potranno aggiungere Bottoni, Immagini, Canvas, Orologio, Label, Liste, ecc. L'aggiunta avviene mediante il drag & drop del mouse e saranno rilasciati nell'area di lavoro centrale o Viewer. Per ciascun elemento c'è una icona del punto interrogativo che illustra brevemente la sua funzione. In Media si potranno selezionare Camcorder, Camera, Image Picker, Player, Sound e Video Player. In Social sono presenti ContactPicker, EmailPicker, PhoneCall, Phone NumberPicker, Texting e Twitter. Molto interessanti anche i sensori dello smartphone: AccellerometerSensor, LocationSensor e OrientationSensor che possono essere inseriti per rilevare lo scuotimento del dispositivo o la sua posizione.

Screen Arrangement è un tool che serve per allineare in senso orizzontale o verticale alcuni elementi della applicazione. Se per esempio trasciniamo tre bottoni all'interno di HorizontalArrangement questi saranno visualizzati in orizzontale. E' disponibile anche l'opzione TableArrangement per disporre i contenuti in una tabella. Sono possibili molte altre aggiunte tra le quali il Bluetooth, il Riconoscimento vocale, il TextToSpeech e naturalmente il Web che permette di inserire URL di pagine, proprietà, eventi e metodi. Nello screenshot precedente ho inserito una immagine e un file audio MP3. Nella sezione Components si visualizza tutto quello che si è inserito. Se selezioniamo un componente, nella colonna denominata Properties potremo modificarne l'aspetto.

modificare-aspetto-componenti-applicazione

riguardo al background, alle dimensioni delle immagini, al tipo di carattere e altro ancora. Per creare una nuova schermata della applicazione bisogna andare su Add Screen e aggiungere i nuovi componenti con la stessa procedura. I vari elementi debbono essere collegati associando eventi a azioni conseguenti. Facendo l'esempio dello screenshot quando si tocca il bottone con l'immagine deve partire la riproduzione di un suono. Si va su Open the Blocks Editor

open-block-editor 

che fa iniziare il download di una applicazione java. Dovremo andare su Conserva per poi farci sopra un doppio click. Si aprirà una schermata che però non sarà una scheda del browser

open-blocks-editor

Se la pagina in cui avevamo operato è quella del design della applicazione, il Blocks Editor servirà per incastrare con una grafica in stile puzzle gli elementi della app con le variabili disponibili. L'apertura del Blocks Editor non sarà immediata ma gli incastri tra i vari componenti piuttosto intuitivi

configurazione-applicazioni-blocks-editor

Le tre schede Built-in, My Blocks e Advanced contengono tutte le possibili combinazioni da usare per unire i componenti della applicazione. Le sezioni di Built-in saranno visualizzabili anche nell'area di lavoro quando sarà necessario inserire una di queste variabili: Definizione, Testo, Elenco, Math, Logic, Controllo e Colori. Quando abbiamo ultimato il lavoro c'è l'esigenza di testare l'applicazione su un telefonino. Andiamo nel Block Editor su New Emulator e aspettiamo un paio di minuti per la configurazione. L'emulatore sarà pronto quando si vedrà una immagine come questa

emulatore-android[5]

Con il mouse si sposta il lucchetto nella parte destra per sbloccare lo schermo. Dopo un'altra breve attesa si visualizzerà lo schermo libero. Si va ora su Blocks Editor, quindi su Connect to Device

connect-to-device

e si sceglie l'emulatore. Quando l'icona del robottino da gialla diventa verde vuol dire che è pronto. In questo modo usando il mouse come un dito possiamo testare il funzionamento della applicazione

testare-applicazione-android 

Non ci resta che scaricare l'applicazione andando sul Designer e selezionando Package for Phone.

package-for-phone

Si può scegliere di scaricarlo nel dispositivo connesso oppure direttamente nel computer. Il file sarà in formato .apk e potrà facilmente essere installato su qualsiasi telefono Android trasferendolo nella radice di archiviazione e facendoci sopra tap con un dito dopo averlo visualizzato con App Installer, Astro File Manager o altra applicazione. In futuro potrei realizzare un video-tutorial sulla realizzazione di una applicazione per Android senza nessuna pretesa ma esclusivamente a scopo euristico.




12 commenti :

  1. Ciao Ernesto, scusami se ti scrivo qui ma ho urgenza di chiederti un'informazione che sono sicuro hai risposta.
    Mi è arrivata questa mail da Dropbox:
    "Questa e-mail è una notifica automatica da Dropbox che i collegamenti pubblici sono stati temporaneamente sospesi per la generazione di traffico eccessivo. Il tuo set continuerà a funzionare normalmente con l'eccezione dei collegamenti pubblici.
    Questa sospensione è temporanea. "

    Il mio Blog è fuori uso.
    Sai quanto dura la sospensione?
    Sai se ci sono modi per evitare tali inconvenienti?
    Ti sono infinitamente grato dell'eventuale risposta.
    Grazie!
    Ciao

    RispondiElimina
    Risposte
    1. @# La sospensione dura per 48 ore mi sembra ma se non togli qualcosa dalla cartella Public potrebbe ripresentarsi fino alla disattivazione dell'account. Togli tutti gli script non necessari o trova alternative come Google Drive o Google Code.

      Elimina
    2. Grazie Ernesto, sempre gentilissimo e tempestivo. Seguirò il tuo consiglio.
      Gli script posso caricarli su Google Code ma poi uso dei file SWF e quelli non mi pare si possano caricare su Google Code o Google Drive acquisendo il link diretto. Ci sarebbe Google Site ma, purtroppo, ho un dominio personalizzato. Dovrei trovare un'alternativa valida a Dropbox che mi consenta di avere i link diretti.
      Grazie ancora della risposta, ti sono debitore.
      Ciao!

      Elimina
  2. Bel post! appena mi viene in mente che app fare legata al mio blog......la faccio!!!Ho appena usato appsgeyser ed è carino e comodo, sto cercando qualche idea per fare qualcosa di più....ma mi sa che qui non mi puoi essere d'aiuto;-)

    ciao

    RispondiElimina
  3. Non è presente una traduzione dall'inglese all'italiano?

    RispondiElimina
    Risposte
    1. @# Non mi risulta. Comunque basta avere una conoscenza scolastica dell'inglese per capire il tutorial. Puoi usare anche questa estensione
      http://www.ideepercomputeredinternet.com/2013/04/traduttore.html

      Elimina
    2. @# In questo post puoi comunque trovare un videotutorial in italiano
      http://www.ideepercomputeredinternet.com/2013/04/how-to-create-android-apps.html

      Elimina
  4. Ciao Ernesto,
    posso chiederti quale programma consigli per creare un'App del proprio blog (sempre che sia una cosa fattibile e che non richieda conoscenze troppo avanzate)?
    Grazie

    RispondiElimina
    Risposte
    1. Per creare una applicazione del blog basta usare il tool online AppGeyser che è semplicissimo
      http://www.ideepercomputeredinternet.com/2013/01/appsgeyser-android.html
      Se poi vuoi pubblicarla su Google Play devi registrarti come sviluppatrice e pagare 25 euro
      http://www.ideepercomputeredinternet.com/2013/01/pubblicare-applicazioni-android-google-play.html
      poi magari arriva uno che ti odia e che scrive nelle recensioni che la tua app fa c... :))
      Bisogna sopportare anche queste cose :P
      https://play.google.com/store/apps/details?id=com.wIPCeIMobile&hl=it
      @#

      Elimina
    2. Grazie mille!
      Posso ancora qualche domandina?...
      I 25 euro sono una tantum o annuali?
      Devo per forza pubblicarla su Google Play per renderla disponibile agli utenti o ci sono anche altre vie?
      Ultimo: si può anche decidere di vendere la app del proprio blog anziché regalarla?

      Per quanto riguarda le recensioni: purtroppo gli invidiosi e acidi sono ovunque, da mettere in conto. Perché non replichi?

      Elimina
    3. I 25 euro sono una tantum. Puoi creare solo il file .apk per poi farlo scaricare da chi vuole per esempio da DropBox. Per la sua installazione però devono essere dei buoni conoscitori delle funzionalità del cellulare. Su Google Play puoi decidere di fare un prezzo alla tua applicazione invece di metterla gratis. Però io non ho provato. Si può rispondere alle recensioni ma non ne vale la pena
      @#

      Elimina
  5. Magari vale la pena pagare i 25 euro se poi si possono caricare su Google Play anche altre applicazioni!
    Ti ringrazio, sei stato gentilissimo - come sempre.
    Come si fanno a scrivere delle cattiverie proprio a te, non lo so!...

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.