1 00:00:02,110 --> 00:00:11,945 (musica) 2 00:00:11,945 --> 00:00:15,395 Ciao! Benvenuti all'Ora del Codice di App Inventor 3 00:00:15,395 --> 00:00:18,525 Siamo al centro per il mobile learning del MIT. Io sono Shay. 4 00:00:18,525 --> 00:00:21,930 E io Emily. Oggi vi facciamo vedere come costruire la vostra prima app Android 5 00:00:21,930 --> 00:00:24,996 L'app di oggi si chiama "Parlami", perché, beh, parla con te. 6 00:00:25,090 --> 00:00:28,783 E' abbastanza semplice: Tu premi un bottone e il telefono dice una frase ad alta voce. 7 00:00:29,683 --> 00:00:31,280 >Benvenuti su App Inventor< 8 00:00:31,704 --> 00:00:33,110 Puoi fargli dire qualsiasi cosa? 9 00:00:33,110 --> 00:00:34,120 Più o meno! 10 00:00:34,140 --> 00:00:36,340 Potrei divertirmi con questa! 11 00:00:36,370 --> 00:00:37,920 Ok, cominciamo... 12 00:00:37,938 --> 00:00:40,218 Parte 1: Creare un nuovo progetto 13 00:00:40,618 --> 00:00:48,503 Per cominciare a costruire un'app, cliccate sul pulsante "Create" dall'homepage di App Inventor "appinventor.mit.edu" 14 00:00:48,682 --> 00:00:56,162 Avete bisogno di un account Google per fare il log in. 15 00:00:57,122 --> 00:00:59,042 Potete chiudere la finestra per ora. 16 00:00:59,043 --> 00:01:03,497 Quando entrate in App Inventor per la prima volta non avete nessun progetto 17 00:01:03,663 --> 00:01:06,351 Quindi cliccate su "New Project" in alto a sinistra 18 00:01:06,875 --> 00:01:09,432 La nostra prima App si chiama "TalkToMe" o "Parlami" 19 00:01:09,432 --> 00:01:14,518 I nomi dei progetti su App Inventor non possono contenere spazi. 20 00:01:15,388 --> 00:01:19,813 Ora siete nella finestra "design" dove potete configurare i componenti e l'aspetto della vostra app 21 00:01:19,813 --> 00:01:25,819 Per la nostra app serve un componente "button" (pulsante). Quindi, cliccate su "Button" e trascinatelo sul viewer 22 00:01:26,065 --> 00:01:31,896 Una delle cose più carine di App Inventor è che si può vedere l'app sul telefono mentre la si costruisce 23 00:01:32,059 --> 00:01:36,515 Connettiamo il telefono, cosi possiamo vedere l'app prendere forma e testarla al volo. 24 00:01:36,515 --> 00:01:41,654 Se non avete un telefono o un tablet Android potete lo stesso seguire questo tutorial. 25 00:01:41,687 --> 00:01:47,819 Ma dovrete mettere in pausa questo video e andare a leggere le istruzioni per far partire un emulatore Android sul vostro computer. 26 00:01:47,948 --> 00:01:53,766 Puoi trovare come si fa e trovare molte altre informazioni utili cliccando su "Guide". 27 00:01:54,247 --> 00:01:56,954 Parte 2: Connettere il telefono 28 00:01:57,003 --> 00:02:04,565 Per avere il vostro telefono Android connesso ad App Inventor, andate al menù "Connect" (connetti) e scegli "Al Companion". 29 00:02:04,735 --> 00:02:11,257 Dovete avere sul telefono o tablet l'app "App Inventor Companion" 30 00:02:11,257 --> 00:02:14,854 Se cliccate su "Need help finding the companion app?" 31 00:02:14,924 --> 00:02:18,954 Potete arrivare al Google Play store per scaricare l'app 32 00:02:18,954 --> 00:02:30,450 O scansionate il QR code con uno scanner del vostro telefono oppure aprite il Play store e cercate "MIT AI2 Companion". 33 00:02:30,515 --> 00:02:37,832 OK, una volta installata l'app la dovete avviare sul vostro telefono. 34 00:02:40,348 --> 00:02:47,582 Se avete chiuso la finestra per la connessione in App Inventor riapritela dal menù "Connect" 35 00:02:47,582 --> 00:02:52,170 La finestra di connessione pop up mostra un codice di sei caratteri e un QR code. 36 00:02:53,089 --> 00:02:58,268 Sulla Companion App del telefono cliccate "scan QR code". 37 00:03:03,078 --> 00:03:10,276 Oppure potete scrivere il codice di sei caratteri e cliccare su "connect with code" 38 00:03:11,056 --> 00:03:18,244 Bene! Ora il telefono è connesso in tempo reale con App Inventor! Dovreste vedere il pulsante che abbiamo già aggiunto all'app. 39 00:03:18,359 --> 00:03:23,479 Da adesso tutte le modifiche che farete alla vostra app si vedranno direttamente anche sul telefono 40 00:03:23,504 --> 00:03:29,776 Sembra magia, vero? Se vi disconnettete da App Inventor non vedrete più l'app sul telefono 41 00:03:29,951 --> 00:03:37,636 Vedremo dopo come fare per far rimanere l'app sul telefono o passarla agli amici. 42 00:03:39,370 --> 00:03:41,710 Part 3: Creare l'app 43 00:03:42,119 --> 00:03:47,289 Notate che sul pulsante che abbiamo aggiunto c'è scritto "Text for Button1". Cambiamolo. 44 00:03:47,628 --> 00:03:54,468 Sulla destra c'è il pannello delle proprietà (properties). Qui è dove potete configurare le proprietà per tutti i componenti della vostra app. 45 00:03:54,651 --> 00:04:01,144 Per cambiare il testo che si vede sul pulsante, cliccate su "Text" e scrivete "Parlami!" (o "Talk to me!") 46 00:04:01,354 --> 00:04:06,837 Notate che sul telefono connesso il testo sul pulsante cambia. Forte, vero? 47 00:04:09,273 --> 00:04:14,293 Bene. Abbiamo bisogno solo di un altro componente prima di cominciare a programmare. 48 00:04:14,442 --> 00:04:22,539 Andate su "Media" e trascinate nel viewer il componente "TextToSpeech" 49 00:04:22,715 --> 00:04:28,578 Noterete che si sposta sotto con i componenti non visibili. Abbiamo finito con i componenti! 50 00:04:28,748 --> 00:04:35,356 Ora dobbiamo specificare cosa dovrebbero fare i componenti che abbiamo aggiunto. Per fare questo clicchiamo su "Blocks" (blocchi). 51 00:04:37,058 --> 00:04:39,879 Parte 4: Programmare i blocchi 52 00:04:40,039 --> 00:04:41,782 E adesso siete nell'editor dei blocchi. 53 00:04:41,958 --> 00:04:47,220 L'editor dei blocchi è dove si configura il comportamento dell'app 54 00:04:47,371 --> 00:04:50,461 Noi vogliamo che la nostra app risponda al click sul pulsante 55 00:04:50,657 --> 00:04:54,728 Andate su "Button1" e vedete tutti i blocchi che possono andare con un pulsante 56 00:04:54,880 --> 00:04:58,331 Scegliete "When Button1.Click" e trascinatelo nell'area di lavoro 57 00:04:58,439 --> 00:05:03,136 Ora dobbiamo incastrarci dentro i blocchi per dire all'app cosa fare quando il pulsante viene cliccato. 58 00:05:03,378 --> 00:05:09,409 Andate sul componente TextToSpeech e vedete tutti i blocchi che vanno con TextToSpeech. 59 00:05:09,418 --> 00:05:16,381 Trascina "call TextToSpeech1.Speak" nel blocco "when Button1.Click" 60 00:05:15,653 --> 00:05:21,075 Si incastrerà perfettamente con un click. Amo quel suono! 61 00:05:21,230 --> 00:05:24,997 Ora aggiungiamo ancora una cosa prima di testare l'app. 62 00:05:25,085 --> 00:05:30,021 Osservate che c'è un incastro vuoto. Dobbiamo decidere cosa far dire al blocco "Speak" 63 00:05:30,028 --> 00:05:41,236 Per fare questo scegliete il blocco con il testo vuoto (" ") dal menù "text" e incastratelo nel TextToSpeach1.Speak 64 00:05:41,376 --> 00:05:43,610 Un altro soddisfacente click 65 00:05:43,683 --> 00:05:51,291 Ora cliccate sul blocco testo vuoto e scrivete "Congratulazioni! Avete realizzato la vostra prima app!" 66 00:05:52,153 --> 00:05:54,216 Parte 5: Testare l'app 67 00:05:54,226 --> 00:05:57,894 Ok, ora potete testare l'app! Andate sul telefono e cliccate il pulsante. 68 00:05:58,225 --> 00:06:00,493 >Congratulazioni! Avete realizzato la vostra prima app!< 69 00:06:00,807 --> 00:06:04,651 Se avete avuto qualche problema con questo tutorial potete vedere anche la versione scritta. 70 00:06:04,762 --> 00:06:07,084 E' tutto? Ehm... sì... 71 00:06:07,084 --> 00:06:08,502 Ok! A dopo! 72 00:06:08,646 --> 00:06:09,630 Aspetta! 73 00:06:09,903 --> 00:06:13,751 Pensavo che l'app fosse un po' più bella... 74 00:06:13,924 --> 00:06:18,954 Pazienza, giovane! Ora che sappiamo come usare App Inventor le possibilità sono infinite! 75 00:06:19,112 --> 00:06:21,597 Possiamo farlo rispondere alle scosse? Sì 76 00:06:21,597 --> 00:06:23,756 O lasciar inserire all'utente il proprio testo? Certamente! 77 00:06:24,204 --> 00:06:27,227 Lo faremo proprio nel prossimo video 78 00:06:27,287 --> 00:06:32,652 Faremo in modo che il telefono parli quando qualcuno lo scuote e che gli utenti possano scegliere il loro testo. 79 00:06:32,757 --> 00:06:34,327 Fantastico! Non vedo l'ora! 80 00:06:34,333 --> 00:06:43,820 (musica)