App Inventor – Guida per Principianti

E’ in corso di ultimazione la mia Guida per principianti per programmare con App Inventor. Questa guida è rivolta sopratutto a quegli utenti che si cimentano per la prima volta nella programmazione More »

Antreprima del nuovo MIT App Inventor 2 Alpha

MIT App Inventor 2 ALPHA è il nuovo progetto aperto da MIT il 21 agosto 2013 (conosciuto anche col nome in codice “newblocks”) con lo scopo di integrare tutto l’ambiente di lavoro More »

Nuova versione App Inventor (v134 – 04-05-2013)

Si segnala l’uscita della nuova versione di App Inventor, non ci sono grossi aggiornamenti ma solamente alcuni miglioramenti ai componenti già esistenti. Vediamo le novità della versione 134: Version 134, May 4, More »

App inventor – La storia

App Inventor, creato da Google, ma ora di proprietà della MIT (Massachusetts Institute of Technology), è un ambiente di programmazione aperto a tutti e rivolto al sistema operativo Android. Consente di sviluppare More »

La nascita di Android!!

Android Inc. è stata fondata nell’ottobre 2003 da Andy Rubin (co-fondatore di Danger), Rich Miner (co-fondatore di Danger e di Wildfire Communications), Nick Sears (vicepresidente di T-Mobile)e Chris White (principale autore dell’interfaccia More »

 

Tutorial 02 – La nostra prima applicazione

img32

Adesso ci cimenteremo nella creazione di una semplice applicazione che visualizzerà semplicemente la frase “Ciao, Android!”  sullo schermo dell’emulatore.

Ovviamente come applicazione non ha niente di speciale, ma vi permetterà di iniziare a prendere confidenza con il nuovo ambiente di sviluppo e vi farà comprendere la logica della programmazione a blocchi che App Inventor utilizza.

“Ciao, Android!”

Lo scopo di questa applicazione sarà quello di visualizzare sullo schermo del nostro smartphone la scritta “Ciao, Androdi!”, quando l’utente premerà un pulsante.

Andiamo con ordine,  andate al seguente indirizzo http://beta.appinventor.mit.edu e fate l’accesso ai server di App Inventor, con le vostre credenziali di Google, che avete creato in precedenza.

Una volta giunti nella pagina del “My Projects” cliccate sul pulsante “New”:

img1

Si aprirà una nuova finestra nel centro dello schermo, nella quale all’interno scriverete il nome del vostro progetto, in questo caso “Ciao_Android”. Attenzione, App Inventor non accetta nomi che contengono spazi vuoi, quindi si consiglia l’uso del “_ “ per unire due o più parole.

img2

Una volta inserito il nome del vostro nuovo progetto, premete il tasto “OK” in modo da convalidare il tutto. Vedrete che in automatico App Inventor memorizzerà il nome nella pagina del MY Projects e aprirà in automatico la pagina del Design Editor.

Creazione dell’interfaccia

Giunti nella pagina del Design Editor dovremmo trovarci difronte ad una situazione del genere:

img3

Come detto in precedenza, vogliamo visualizzare sullo schermo del nostro smartphone (in questo caso Screen1), il testo “Ciao, Android!”, nel momento in cui un utente preme sul un tasto visualizzato nella nostra applicazione. Quindi ci serviranno una Label (etichetta) e un Buttton (pulsante).

Andiamo con il mouse nella sezione Palette, selezioniamo l’icona che rappresenta una Label:

img4

E, sempre tenendo premuto il pulsante sinistro del mouse, trasciniamola all’interno dello Screen1.

Stessa cosa facciamo per il Button, selezionatelo con il pulsante sinistro del mouse e trascinatelo nello Screen1.

img5

Se tutto è andato a buon fine dovreste avere una situazione del genere:

img6

Non è stato difficile, vero?

Ovviamente per avere una interfaccia più accattivante graficamente andrebbe molto migliorata, ma per adesso è più che sufficiente per raggiungere il nostro scopo.

Come avrete certamente notato App Inventor, in automatico, attribuisce dei nomi standard a tutti gli oggetti che compongono la nostra interfaccia.

  • Screen1 non è altro che il nome dello schermo nel quale stiamo lavorando;
  •  label1 è il nome che viene attribuito alle label;
  • Button1 è il nome che viene assegnato ai pulsanti.

Giunti a questo punto, facciamo alcuni piccoli ritocchi alla nostra applicazione. Prima di tutto andiamo nella sezione “Components” e selezioniamo Screen1. Fatto questo, spostiamoci nella sezione “Properties”  e selezioniamo la proprietà “Title” dello screen1.

Cancellate il contenuto, in  questo caso Screen1, e scrivete il titolo dell’applicazione che state sviluppando. In questo caso mettete: “Android”.

img7

Adesso spostatevi nuovamente nella sezione “Components”, selezionate Label1 e cancellate il seguente testo “Text for Label1” che si trova nella proprietà Text della sezione “Properties” perché vogliamo che non venga visualizzato nessun testo, dovrà essere visualizzato solamente quando l’utente premerà il tasto che gli abbiamo messo a disposizione.

img8

Infine, sempre nella sezione “Components” , selezionate il Button1 e modificate il contenuto della proprietà Text, che si trova nella sezione “Propeties” con il seguente testo: “Premi” per indicare all’utente cosa deve fare.

img9

Se avete seguito correttamente tutti i passaggi dovreste avere questo risultato:

img10

Come avrete notato ogni volta che selezionate un’oggetto nella sezione “Components”, vengono visualizzate le specifiche proprietà che l’oggetto possiede e sulle quali potete effettuare le modifiche che vi occorrono per il corretto funzionamento della vostra applicazione.

La nostra interfaccia grafica è finita, non ci resta che iniziare la programmazione vera e propria, è il momento di usare il Blocks Editor.

Programmazione a Blocchi

Fino ad ora ci siamo limitati ad ideare la nostra applicazione (fase concettuale) e disegnare l’interfaccia con il Design Editor (fase grafica). Ovviamente non basta, è necessario istruire App Inventor in modo da rispondere alle azioni che l’utente decide di compiere (fase  programmazione). Quindi è il momento di passare alla programmazione della nostra applicazione, qui entra in gioco il Blocks Editor.

Cliccate sul pulsante “Open the Blocks Editor” che si trova in alto a destra della pagina del Design Editor.

img11

Si aprirà una finestra che vi verrà di scaricare un file eseguibile in Java. Premete su Apri e attendete qualche secondo.

img12

Dopo poco vi troverete nella pagina del Blocks Editor.

img13

Selezionate la sezione “My Blocks” con il pulsante sinistro del mouse.

img14

Noterete nella lista che compare, tutti gli oggetti che in fase di Design abbiamo utilizzato, cioè Screen1,  Label1 e Button1 oltre a “My Definitions”, che spiegheremo successivamente.

Tornando alla fase concettuale del programma, l’idea era quella di far comparire sullo schermo del nostro smartphone, il testo “Ciao, Android!” nel momento in cui premevamo il tasto che era disponibile. Ma come facciamo a dire ad App Inventor di far comparire una scritta quando un utente preme un bottone?

Come già accennatoo, App inventor usa una programmazione visuale ed orientata agli oggetti, i quali a loro volta hanno a disposizioni procedure che rispondono a determinati eventi. In questo caso abbiamo bisogno dell’evento Click di Button1.

Per visualizzare gli eventi disponibili di Button1, basta selezionare con il mouse Button1 nella lista My Blocks. Si aprirà una finestra che conterrà tutti gli eventi disponibili ed i comandi associati all’oggetto Button1.

img15

Nel nostro caso l’evento di cui abbiamo bisogno è Button1.Click.

Selezionate Button1.Click e trascinatelo, tenendo premuto il tasto sinistro del mouse, al centro dell’area di lavoro del Block Editor.

img16

App Inventor forte della sua semplicità permette a tutti di poter programmare senza dover conoscere ogni istruzione, come vedete in figura, ogni blocco è strutturato  in modo da far intuire ad ogni utente cosa farà l’istruzione che stiamo utilizzando e come comporre il comando.

img17

Nell’esempio in figura, utilizzando l’evento Click di stiamo cioè dicendo ad App Inventor  questo:

When Buttono1 .Click do.

In pratica quando (when)  un utente preme il button1 (click) allora (do)esegui i comandi successivi. Niente di più facile!

Tornando al programma, come detto, vogliamo inserire un testo predefinito nella Label1 nel momento in cui facciamo un click sul Button1. Quindi adesso dobbiamo indicare ad App Inventor cosa fare nel momento in cui premiamo il pulsante Button 1.

Selezioniamo con il mouse Label1 sempre nella sezione “My Blocks”

img18

Come vedete anche l’oggetto Label1 ha sue  specifiche proprietà, in questo caso quella che ci serve per poter visualizzare un testo è:

img19

Ma cosa indica questa istruzione? Semplicemente di inserire un valore (in questo caso un testo) nella proprietà Text di Label1.

Set Label1.Text to

Cioè,  inserisci (set) dentro la proprietà Text di Label1 (Label1.Text) il seguente valore (to).

Come prima,  selezionate Set Label1.Text to e trascinatelo  nella area di lavoro del Blocks Editor.

Abbiamo bisogno di ancora un ultimo tassello per completare la nostra istruzione, dobbiamo dire ad App inventor quale testo deve inserire nella proprietà Text di Label1. Apriamo quindi la sezione “Built-In”  e selezioniamo la voce “Text”.

img20

Come detto vogliamo inserire un testo e per fare questo abbiamo bisogno dell’istruzione Text.

img21

Come fatto in precedenza, selezionatela e posizionatela sull’area di lavoro del Blocks Editor.

Dovreste trovarvi in una condizione simile:

img22

Come potete vedere, ogni istruzione ha una sua forma, questa forma suggerisce il corretto “incastro” che deve avere per costruire una istruzione completa.

Inseriamo, trascinandolo con il mouse,  quindi l’istruzione Set Label1.Text to all’interno dell’evento Button1.Click

img23

Per raggiungere questo risultato:

img24

Come vedete i due comandi si incastrano perfettamente, e a riprova di ciò, nel momento in cui incastrate i due tasselli, dovreste sentire un Click al rilascio del tasto sinistro del mouse, a riprova che l’incastro è stato accettato.

Adesso dobbiamo inserire l’ultimo elemento del nostro puzzle, il blocco Text. Come prima cosa trascinate il blocco Text e incastratelo dopo il To di Label1.

img25

Adesso ci manca un’ultima cosa, inserire il testo che dovrà essere visualizzato nel momento in cui l’utente preme sul pulsante presente nella schermata del nostro smartphone.

Con il mouse, andate sul blocco Text, selezionate e sostituite il testo text (quello scritto in neretto) digitando questo testo: “Ciao, Android!”.

img26

In pratica abbiamo detto ad App Inventor questo:

Quando (when) premo button1 (Button1.Click) fai (do)  imposta (set) nella proprietà Text di label1 (Label1.Text) il valore (to) che si trova nel dentro il blocco Text, cioè “Ciao, Android!”

Come vedete questo tipo di programmazione è molto intuitiva, anche chi è agli inizi è facilitato a comprendere come strutturare un comando, e se si conosce un po’ di inglese il tutto diventa molto più semplice.

Abbiamo finito! Adesso non ci resta che testare il nostro primo programma.

 

Esecuzione del programma

Come avete visto, programmare con App Inventor è molto semplice, ogni comando deve incastrarsi con altri in modo corretto, non è ammesso unire comandi che tra loro non si possono collegare,  e questo è già un piccolo aiuto nella fase di correzione (debug)  che affronterete ogni volta che creerete una nuova applicazione.

L’ultimo passaggio che ci resta è quello di testare la nostra applicazione.  Selezionate il pulsante “New Emulator” che si trova in alto a destra del Blocks Editor, dopo pochi secondi verrà avviato l’emulatore interno di Android.

img27

Come potete vedere, viene emulato perfettamente uno smartphone, nel quale potrete testare le vostre applicazioni.

Adesso, sempre nel Blocks Editor, premete il pulsante “Connect to Device”.

img28

Come potete vedere è disponibile una nuova opzione, “emulator-5554”. Selezionatela e attendete che App Inventor effettui la connessione con l’emulatore.

img29

Una volta stabilita la connessione con l’emulatore, l’icona che rappresenta il collegamento con lo smartphone, diventerà verde come in  figura.

img30

Quindi, sul vostro emulatore sarà visibile finalmente la vostra applicazione.

img31

A questo punto, non ci resta che premere il pulsante e testare se il nostro programma funziona come vogliamo.

Se tutto è andato come previsto, dovreste visualizzare sullo schermo dell’emulatore il testo “Ciao, Android!”

img32

La nostra prima applicazione funziona perfettamente!

Se avete seguito correttamente tutti i passaggi dovreste avere questo risultato:

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by WordPress