(musica) Ciao! Benvenuti all'Ora del Codice di App Inventor Siamo al centro per il mobile learning del MIT. Io sono Shay. E io Emily. Oggi vi facciamo vedere come costruire la vostra prima app Android L'app di oggi si chiama "Parlami", perché, beh, parla con te. E' abbastanza semplice: Tu premi un bottone e il telefono dice una frase ad alta voce. >Benvenuti su App Inventor< Puoi fargli dire qualsiasi cosa? Più o meno! Potrei divertirmi con questa! Ok, cominciamo... Parte 1: Creare un nuovo progetto Per cominciare a costruire un'app, cliccate sul pulsante "Create" dall'homepage di App Inventor "appinventor.mit.edu" Avete bisogno di un account Google per fare il log in. Potete chiudere la finestra per ora. Quando entrate in App Inventor per la prima volta non avete nessun progetto Quindi cliccate su "New Project" in alto a sinistra La nostra prima App si chiama "TalkToMe" o "Parlami" I nomi dei progetti su App Inventor non possono contenere spazi. Ora siete nella finestra "design" dove potete configurare i componenti e l'aspetto della vostra app Per la nostra app serve un componente "button" (pulsante). Quindi, cliccate su "Button" e trascinatelo sul viewer Una delle cose più carine di App Inventor è che si può vedere l'app sul telefono mentre la si costruisce Connettiamo il telefono, cosi possiamo vedere l'app prendere forma e testarla al volo. Se non avete un telefono o un tablet Android potete lo stesso seguire questo tutorial. Ma dovrete mettere in pausa questo video e andare a leggere le istruzioni per far partire un emulatore Android sul vostro computer. Puoi trovare come si fa e trovare molte altre informazioni utili cliccando su "Guide". Parte 2: Connettere il telefono Per avere il vostro telefono Android connesso ad App Inventor, andate al menù "Connect" (connetti) e scegli "Al Companion". Dovete avere sul telefono o tablet l'app "App Inventor Companion" Se cliccate su "Need help finding the companion app?" Potete arrivare al Google Play store per scaricare l'app O scansionate il QR code con uno scanner del vostro telefono oppure aprite il Play store e cercate "MIT AI2 Companion". OK, una volta installata l'app la dovete avviare sul vostro telefono. Se avete chiuso la finestra per la connessione in App Inventor riapritela dal menù "Connect" La finestra di connessione pop up mostra un codice di sei caratteri e un QR code. Sulla Companion App del telefono cliccate "scan QR code". Oppure potete scrivere il codice di sei caratteri e cliccare su "connect with code" Bene! Ora il telefono è connesso in tempo reale con App Inventor! Dovreste vedere il pulsante che abbiamo già aggiunto all'app. Da adesso tutte le modifiche che farete alla vostra app si vedranno direttamente anche sul telefono Sembra magia, vero? Se vi disconnettete da App Inventor non vedrete più l'app sul telefono Vedremo dopo come fare per far rimanere l'app sul telefono o passarla agli amici. Part 3: Creare l'app Notate che sul pulsante che abbiamo aggiunto c'è scritto "Text for Button1". Cambiamolo. Sulla destra c'è il pannello delle proprietà (properties). Qui è dove potete configurare le proprietà per tutti i componenti della vostra app. Per cambiare il testo che si vede sul pulsante, cliccate su "Text" e scrivete "Parlami!" (o "Talk to me!") Notate che sul telefono connesso il testo sul pulsante cambia. Forte, vero? Bene. Abbiamo bisogno solo di un altro componente prima di cominciare a programmare. Andate su "Media" e trascinate nel viewer il componente "TextToSpeech" Noterete che si sposta sotto con i componenti non visibili. Abbiamo finito con i componenti! Ora dobbiamo specificare cosa dovrebbero fare i componenti che abbiamo aggiunto. Per fare questo clicchiamo su "Blocks" (blocchi). Parte 4: Programmare i blocchi E adesso siete nell'editor dei blocchi. L'editor dei blocchi è dove si configura il comportamento dell'app Noi vogliamo che la nostra app risponda al click sul pulsante Andate su "Button1" e vedete tutti i blocchi che possono andare con un pulsante Scegliete "When Button1.Click" e trascinatelo nell'area di lavoro Ora dobbiamo incastrarci dentro i blocchi per dire all'app cosa fare quando il pulsante viene cliccato. Andate sul componente TextToSpeech e vedete tutti i blocchi che vanno con TextToSpeech. Trascina "call TextToSpeech1.Speak" nel blocco "when Button1.Click" Si incastrerà perfettamente con un click. Amo quel suono! Ora aggiungiamo ancora una cosa prima di testare l'app. Osservate che c'è un incastro vuoto. Dobbiamo decidere cosa far dire al blocco "Speak" Per fare questo scegliete il blocco con il testo vuoto (" ") dal menù "text" e incastratelo nel TextToSpeach1.Speak Un altro soddisfacente click Ora cliccate sul blocco testo vuoto e scrivete "Congratulazioni! Avete realizzato la vostra prima app!" Parte 5: Testare l'app Ok, ora potete testare l'app! Andate sul telefono e cliccate il pulsante. >Congratulazioni! Avete realizzato la vostra prima app!< Se avete avuto qualche problema con questo tutorial potete vedere anche la versione scritta. E' tutto? Ehm... sì... Ok! A dopo! Aspetta! Pensavo che l'app fosse un po' più bella... Pazienza, giovane! Ora che sappiamo come usare App Inventor le possibilità sono infinite! Possiamo farlo rispondere alle scosse? Sì O lasciar inserire all'utente il proprio testo? Certamente! Lo faremo proprio nel prossimo video Faremo in modo che il telefono parli quando qualcuno lo scuote e che gli utenti possano scegliere il loro testo. Fantastico! Non vedo l'ora! (musica)