Cerca con Google

Translate

20 dicembre 2013

Tutorial 1 - Creare applicazioni Android con MIT App Inventor 2 - Parte 2 (Blocks Editor)


Eccoci alla seconda parte di questa guida per la realizzazione di app Android utilizzando il tool MIT App Inventor 2.

Avevamo completato la parte di interfaccia grafica e dovevamo ora programmare la logica di funzionamento del programma (molto semplice in questo primo esempio)

Andiamo quindi al "Blocks Editor" cliccando sul pulsante in alto a destra "Blocks"



Possiamo liberamente cliccare "Designer" o "Blocks" per muoverci avanti e indietro tra le due aree di sviluppo.

Il "Blocks Editor" è dove programmiamo la logica di funzionamento della nostra app.
Ci sono dei blocchi predefiniti (Built-in) a disposizione che possono gestire le funzioni logiche, matematiche, testuali e molto altro ancora.
Poi ci sono i nostri componenti che abbiamo precedentemente aggiunto nella finestra "Designer".
Ovviamente per far si che i nostri componenti appaiano qui, questi debbono essere stati aggiunti prima nel "Designer" , è per questo che ad esempio ora vediamo solo tre componenti, Screen1 (che c'è sempre in qualsiasi app), "Button1" e "TextToSpeech1"


Creiamo ora l'evento per il click sul nostro pulsante, per fare questo dobbiamo cliccare prima sull'elemento "Button" e poi scegliere il blocco "When Button1.Click do", lo prendiamo e lo trasciniamo nell'area di lavoro.
Questo blocco sarà quello che gestirà l'azione da far compiere alla nostra app quando il pulsante viene cliccato dall'utente. Questo blocco viene chiamato anche "Event Handler".


Ora vogliamo programmare l'azione del componente "TextToSpeech" ovvero un componente che può utilizzare la sintesi vocale di Android per pronunciare delle parole o delle frasi.
Clicchiamo quindi su "TextToSpeech1" ci si aprirà la selezione dei metodi e delle proprietà del componente, quindi selezioniamo la procedura "call TextToSpeech1.Speak" e la posizioniamo vicino al "do" dell'evento del pulsante appena visto, in modo che i due blocchi si incastrino tra loro.
Se abbiamo fatto l'operazione correttamente sentiremo un suono tipo "click", questo ci indica che i blocchi sono stati "incastrati" in maniera corretta! ben fatto!!!
Visto che questo blocco è all'interno dell'evento Button1.click, l'azione del blocco verrà eseguita al click del nostro pulsante.


L'ultima cosa da fare è quella di istruire la nostra app sul cosa vogliamo che essa dica.
Per fare questo clicchiamo sulla palette "Built-in" scegliamo un componente di tipo "Text" e lo incastriamo nello spazio apposito "message" del componente "TextToSpeech".


A questo punto dobbiamo solo inserire il testo che vogliamo sia pronunciato, clicchiamo quindi tra le due virgolette ed inseriamo il nostro testo, ad esempio "Congratulazioni! hai realizzato la tua prima app!"


Ora torniamo sul nostro cellulare e proviamo a cliccare il pulsante...
Se abbiamo fatto tutto correttamente (e se il volume non è su silenzioso...) dovremmo sentire il nostro smartphone pronunciare la nostra frase ad alta voce!!!
Ben fatto!!! Avete realizzato la vostra prima app per Android utilizzando MIT App Inventor 2.

Le applicazioni realizzate con AI possono essere scaricate come file di installazione (.apk) e possono essere regolarmente caricate sul Play Store (gratuitamente o a pagamento), quindi di fatto vi viene data la possibilità di diventare creatori di app per Android e di raggiungere un pubblico di milioni di utenti sparsi per tutto il mondo!!!
(per il caricamento sul Play Store vi consiglio di vedere i tutorial appositi creati da me in passato, specialmente questo:
Tutorial 47 - Guida Rapida: Come pubblicare le applicazioni App Inventor in Google Play Store (App2Market))

Per i più pigri o per chi preferisce un approccio più "visuale" all'apprendimento di App Inventor può vedere il video qui sotto in cui spiego le stesse cose.


Per ogni domanda, chiarimento, dubbio, usate i commenti di YouTube o i commenti qui sotto.
Cercherò di rispondere a tutti!!!

Ora potete proseguire alla parte 3 di questo tutorial dove inseriremo altri componenti interessanti:
Tutorial 3 - TalkToMe , aggiunta componenti

Buon App Inventing!!!

15 commenti:

  1. Ciao, ti faccio sempre i complimenti per le tue guide. Ti chiedo un consiglio, spesse volte quando accedo alla pagina di sviluppo mi esce il messaggio di errore di uno script/plugin. Sia cliccando continua o blocca script non riesco ad accedere. Dopo qualche ora va tutto bene, sai cosa posso fare? grazie

    RispondiElimina
    Risposte
    1. Ciao, mi dispiace ma non saprei che dirti, prova usando chrome o firefox (i due browser consigliati per lavorare con AI2), e controlla le tue estensioni di chrome, magari hai qualcosa che va in "conflitto" con AI2, altro non mi viene in mente...

      Elimina
    2. utilizzo solo firefox aggiornato alla 26.0 ho copiato il tipo di errore ma sul web non ho trovato nulla. "Uno script in questa pagina potrebbe essere occupato o aver smesso di rispondere. È possibile fermare lo script adesso o attendere per vedere se lo script conclude la sua esecuzione.
      Script: chrome://netsight/content/browser.js:725.
      No capisco che fare, e dire che il 50 % dello volte non me lo da. Mahhhhh. Grazie della risposta

      Elimina
    3. secondo me non c'entra nulla con AI2, ma è uno script dannoso che arriva da chissà dove, prova a vedere che estensioni attive hai in firefox, ho trovato qualche riferimento a robaccia nielsen a questa pagina..
      https://support.mozilla.org/it/questions/977449

      Elimina
    4. robaccia nielsen, hai risolto anche questo capo. Inoltre ho notato che in AppInventor2 il make list contiene al massimo due valori, suggerimenti?? GRAZIE SEMPRE

      Elimina
    5. devi usare il pulsantino blu, quello quadrato, che ti fa inserire più elementi anche nel make a list

      Elimina
  2. CIAO mi chiamo Domenico e da poco sto iniziando a creare un applicazione con app inventor 2, volevo sapere se dopo averla terminata è possibile stampare il codice in java per poi magari farla girare o cma implementarla su eclipse?
    grazie in anticipo buona giornta

    RispondiElimina
    Risposte
    1. mi dispiace, in tanti chiedono questa cosa ma non è possibile,
      il codice creato con AI è infatti in "kawa" e non può essere trasformato in Java ne tantomeno in un progetto Eclipse.

      Elimina
    2. Ok ... ma almeno è possibile semplicemente stampare su carta il codice "grafico" (il contenuto delle BLOCKS EDITOR) ?
      Io non ci sono riuscito ...

      Elimina
  3. Ciao mi chiamo Enrico posso chiederti come configurare il ridimensionamento degli elementi attraverso il block editor perché app inventor 2 è diverso rispetto al classico presentenel tutorial 60
    Grazie in anticipo

    RispondiElimina
    Risposte
    1. Ciao, il procedimento è ovviamente simile, si tratta di trovare gli stessi elementi in AI2, comunque prima o poi farò un tutorial dedicato per tutti quelli che hanno difficoltà a trasferire il tutorial di AI1 in AI2, quindi continuate a seguirmi :)

      Elimina
  4. Ciao Sebastiano, io sto sviluppando un app con AI2 ma non riesco ad installarla sullo smartphone.
    Se la testo su pc tramite emulatore o su smartphone con AI Companion l'applicazione funziona, ma se la salco su pc in .apk e poi la trasferisco sul telefono per installarla quando faccio partire l'installazione l'installer crasha con il messaggio 'ha smesso do funzionare".
    Forse sbaglio qualcosa di elementare ma non riesco proprio ad installarla, spero tu mi possa aiutare, grazie in anticipo.

    RispondiElimina
  5. Ciao,
    Dopo vari tentativi sono riuscito a portare il mio progetto da App Inventor 1 al 2 in automatico, devo però rifare la parte block editor, non riesco a trovare i seguenti blocchi: My Definition e la Variabile Def - AS

    RispondiElimina
  6. ciao Sebastiano innanzitutto ti ringrazio perché grazie a te sono riuscito a fare l'applicazione per la mia domotica con Arduino. adesso mi sto portando avanti è vorrei fare un app con la planimetria della casa usando il canvas e Image sprite ma quando seguo il tutorial del ridimensionamento e la ridimensiono con apptomarcket i pulsanti fatti con Image sprite sono da tutt'altra parte. sto usando app inventor e non il 2. sto impazzendo.

    RispondiElimina