Cerca con Google

Translate

20 dicembre 2013

Tutorial 1 - Creare applicazioni Android con MIT App Inventor 2 - Introduzione


Bene, finalmente ci siamo!

Visto che MIT App Inventor 2 è uscito dalla fase alpha ed è entrato in fase beta da un pò di tempo, possiamo cominciare una nuova serie di tutorial che avvicineranno alla programmazione di App Android tramite l'utilizzo di questo software web facile ed intuitivo da usare.

Per chi non lo sapesse, tramite l'utilizzo di App Inventor, è possibile infatti creare in modo semplice e rapido della applicazioni Android anche se si hanno poche conoscenze di programmazione.


MIT App Inventor 2 (o semplicemente "AI") è un tool "cloud based" che permette la realizzazione di app direttamente da interfaccia web.

Vediamo in questo primo tutorial un introduzione generale al tool di sviluppo e la realizzazione di una prima semplice app di test.

Per prima cosa puntiamo il nostro browser (io vi consiglio Chrome) all'indirizzo:

http://appinventor.mit.edu/explore/

E premiamo il pulsante arancione "Create" che si trova in alto a destra nella pagina


Se abbiamo un account Google, effettuiamo l'accesso ora, ricordando che tutti i nostri progetti verranno associati e quindi salvati tramite questo account.
Se non possediamo un account Google, vi consiglio di crearvene uno ora...

Dopo aver fatto la login arriveremo alla schermata dei nostri progetti "Project", se non ne abbiamo mai creato uno sarà ancora vuota ed avremo un messaggio di benvenuto:



Clicchiamo su "New Project..." per creare così il nostro primo progetto, diamogli il nome "TalkToMe" e ricordate che i nomi dei nostri progetti non possono contenere spazi, clicchiamo "ok"

Siamo ora nella schermata chiamata "Designer Editor" o semplicemente "Designer" dove vengono posizionati tutti gli elementi che andranno a comporre la nostra interfaccia utente, quindi tutti gli elementi come pulsanti (button), caselle di testo (textbox), etichette (label) etc verranno scelti e posizionati in questa schermata.
Ci sono anche altri componenti detti "non visibili" che attivano ulteriori funzionalità nella nostra app, un esempio è il componente LocationSensor che fornisce informazioni sulla posizione del nostro dispositivo, ma ce ne sono molti altri che scopriremo un pò alla volta.

La finestra "Designer" si divide in quattro parti:
1) la "Palette" da dove selezioniamo i componenti
2) il "Viewer" che simula la schermata dell'interfaccia utente della nostra app
3) "Components" dove vengono visualizzati tutti i componenti attualmente in uso nella nostra app
4) "Properties" dove vengono visualizzate le proprietà di ogni componente selezionato in "Components"

Vediamo qui sotto la finestra "Designer"



Aggiungiamo ora un pulsante ("Button"), clicchiamo e teniamo premuto sull'elemento "Button" e trasciniamolo nella finestra "Viewer", rilasciamo il click e vedremo apparire il componente nel "Viewer":


Ora possiamo ad esempio connettere il nostro telefono ad App Inventor per vedere in tempo reale la nostra applicazione girare sullo smartphone.
Infatti una delle cose migliori di App Inventor è la possibilità di vedere e testare la nostra app intanto che la stiamo costruendo.
In questa guida lavoreremo con uno smartphone Android vero e proprio, se non ne abbiamo a disposizione uno possiamo usare un emulatore (linkerò qui a parte una guida apposita).

Clicchiamo quindi su "Connect" e poi su "Ai Companion":


Ora dobbiamo installare sul nostro cellulare l'applicazione "MIT AI2 Companion" di cui trovate il link al Play Store qui sotto:


Dopo averla installata (assicuratevi che computer e telefono siano sotto la stessa rete wifi in caso contrario l'applicazione vi darà un errore) lanciamo l'app stessa:


Ora vi consiglio di premere il pulsante "scan QR code" ed inquadrare il QR code che vi è uscito dalla finestra del "Designer" in precedenza, in alternativa scrivete il codice che vedete a fianco del QR code (notate che il codice cambia ogni volta che cliccate su "AI Companion")


Dopo pochi secondi vedrete visualizzato nel vostro cellulare l'applicazione che state realizzando! 
Per ora la nostra app ha un solo pulsante, quindi per il momento vedrete solo quello... man mano che si aggiungeranno altri elementi all'applicazione, questi appariranno in tempo reale anche sul nostro smartphone.

Nel pannello "Properties" cambiamo il testo del pulsante, selezioniamo il testo "Text for Button 1" cancelliamo e rimpiazziamo con il testo "Parlami Ora!", notate che anche l'app sul vostro smartphone mostrerà il nuovo testo.


Sempre prendendo e trascinando i componenti, prendiamo dalla palette un componente "Text-To-Speech" (lo trovate sotto "Media"), notate come appaia nei componenti non visibili perchè è un qualcosa che non viene visualizzato nell'interfaccia ma è comunque utilizzabile nella nostra app.



Passiamo ora alla parte 2 del tutorial dove vedremo la parte di programmazione nel "Blocks Editor" ovvero la parte di interfaccia dove si programma il funzionamento vero e proprio delle nostre app

Clicca qui per andare alla seconda parte del tutorial...

Se invece volete vedere il tutto come video di YouTube lo potete fare visionando il mio video qui sotto:

16 commenti:

  1. é gia a buon punto la versione di Hossein con molti componenti aggiuntivi....

    RispondiElimina
  2. Ciao Seb ho un problema con il blocco "is ampty list"
    Mi restituisce un errore nel quale mi dice che in sostanza non è in grado
    di verificare una stringa vuota.
    Non capisco se sbaglio qualcosa o ė un problema di AI2
    Io devo usarlo per verificare se dopo aver popolato una lista con tinydb
    quest'ultima è vuota o no.

    RispondiElimina
    Risposte
    1. Salve
      provi ad usare il componente intialize global( in aggiunta a to inserisci true )

      Elimina
    2. Grazie Antonio per l'aiuto! Mi rendo conto che forse non ero stato molto chiaro nella richiesta.
      Il mio problema era che se applicavo il blocco "is list empty" ad una lista anche se già inizializzata come tale (con il blocco Create empty list) mi ritornava un errore.Ho risolto utilizzando il blocco "is empty".Probabilmente non la riconosceva come una lista.Grazie lo stesso per l'aiuto.
      Saluti

      Elimina
  3. 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. Ciao, non è possibile scaricare il sorgente e caricarlo come progetto su Eclipse, sono due ambienti di sviluppo totalmente diversi ed il codice generato in AI2 non è quindi compatibile o convertibile in java classico.

      Elimina
  4. Salve, vorrei creare una applicazione android con app inventor, ma non riesco a far eseguire un'operazione ad un tasto. praticamente premendo un pulsante si dovrebbe inviare il file audio caricato all'interno dell'applicazione con +
    email, whatsapp ecc... con l'Activity starter e la funzione android.intent.action.SEND , potetei pubblicare uno schema a blocchi d'esempio?

    RispondiElimina
    Risposte
    1. non puoi inviare semplicemente un file con solo activitystarter, c'è un mio tutorial su come inviare email con allegati ma serve uno script php che giri su un tuo server.
      Ancora più difficile condividere un file su whatsapp, facebook, etc...
      Mi pare sia comunque in fase avanzata di realizzazione un blocco apposito per lo sharing, bisogna continuare a seguire eventuali novità che arriveranno di sicuro dal MIT.

      Elimina
  5. Salve,
    sono ad un punto morto che probabilmente, anzi sicuramente, ha del ridicolo. Nella versione 2 di app inventor non esiste più il blocco make text. Mi potete aiutare?

    RispondiElimina
  6. Ciao Sebastiano, vorrei fare un applicazione con app inventor 2,ma non riesco a trovare il modo che quando apro l'app cominci l'audio caricato in sound.
    Non so se mi sono spiegato bene...

    RispondiElimina
    Risposte
    1. E' molto semplice (e la prossima volta per favore non chiedere la stessa cosa in tutti i canali che metto a disposizione ... :) )

      Componente player, carichi il tuo file mp3 come assett
      poi in screen1.initialize inserisci il metodo:
      player1.start
      guarda questa immagine:
      http://i.imgur.com/YS0koq7.png

      Elimina
  7. Questo commento è stato eliminato da un amministratore del blog.

    RispondiElimina