- Impara a conoscere la programmazione guidata dagli eventi
- Capire i diversi tipi di blocchi della piattaforma MIT App Inventor
Queste sono le attività di questa lezione:
EVENTI
Le app mobili si basano sulla programmazione guidata dagli eventi.
La programmazione guidata dagli eventi si basa sugli eventi, piuttosto che sull'esecuzione del codice da cima a fondo. Alcuni programmi eseguono tutto il codice in una volta sola, ma le app mobili funzionano in base all'interazione dell'utente.
Le app mobili funzionano in base a eventiche sono cose che accadono per innescare l'esecuzione del codice. Un esempio potrebbe essere: l'utente clicca su un pulsante. L'evento si verifica quando l'utente fa clic. L'evento innesca l'esecuzione di un codice, chiamato "gestore di eventi". gestore dell'evento.
FERMATI E DISCUTI
Riesci a pensare ad alcuni modi in cui interagisci con il tuo telefono e a cosa fa il tuo telefono? Eccone alcuni per iniziare:
- Quando clicchi sull'icona di un'applicazione, questa si apre.
- Quando fai clic su "invia" per un messaggio di testo, invia il messaggio ed emette un suono.
- Quando cerchi di accedere a un'applicazione, questa ti chiede una password.
Iniziamo a vedere le diverse parti della piattaforma App Inventor.
App Inventor ha due finestre che puoi utilizzare per costruire la tua applicazione. Cliccando sul pulsante Designer (in alto a destra dello schermo) si accede alla finestra Designerdove si progetta l'interfaccia utente. L'interfaccia utente interfaccia utente è tutto ciò che si trova nella tua applicazione con cui l'utente può interagire. Può trattarsi di pulsanti, barre di navigazione, caselle di testo, immagini, ecc.
FINESTRA DEL DESIGNER DI APP INVENTOR
Palette
Scegli i componenti dalla Tavolozza per aggiungerli al Visualizzatore, che si trova al centro della finestra. Ci sono diversi cassetti di componenti da esplorare e utilizzare.
Visualizzatore
Trascina i tuoi componenti nel Viewer. I componenti vengono aggiunti dall'alto verso il basso, sulla sinistra. Devi utilizzare i componenti Layout e Allineamento per avere un maggiore controllo sulla posizione esatta dei tuoi componenti.
Elenco dei componenti
Questo elenco ti offre una lista gerarchica degli elementi presenti sullo schermo. Puoi selezionarli cliccando su di essi nel Visualizzatore o in questo elenco.
Pannello delle proprietà
Il pannello Proprietà ti permette di impostare le proprietà di ogni componente, come la dimensione dei caratteri, l'allineamento, il colore, ecc.
Componenti non visibili
I componenti non visibili non appaiono sullo schermo ma fanno comunque parte dell'applicazione. Appaiono sotto lo schermo quando li trascini.
Quando qualcuno usa la tua app, interagisce con la tua interfaccia utente, cliccando su pulsanti, inserendo testo ecc. Spetta a te decidere cosa deve fare la tua app e programmarla per farlo.
EDITOR DI BLOCCHI
Cliccando su "Blocchi" si accede all'Editor dei blocchi. Editor di blocchi dove si svolgono tutte le operazioni di codifica. Trascina i blocchi dal pannello a sinistra nell'area di lavoro al centro dello schermo.
A sinistra troverai i blocchi che puoi trascinare nell'area di lavoro. Sono suddivisi in categorie/disegni come Controllo e Logica.
Visualizzatore
Questa è l'area di lavoro dove trascinerai tutti i tuoi blocchi. Puoi spostarli, agganciarli e inserirli l'uno nell'altro. Puoi anche eliminare i blocchi che non ti servono.
Blocchi di componenti
Ogni componente della tua applicazione ha un proprio set di blocchi. Cliccando sul componente per visualizzare i blocchi che potrai poi trascinare nell'area di lavoro.
MANIPOLATORI DI EVENTI
I blocchi gestori di eventi in App Inventor sono di colore oro e hanno la forma di un blocco aperto, per cui puoi inserire blocchi al suo interno. Questi blocchi vengono eseguiti solo quando si verifica l'evento in questione.
Quando il pulsante viene cliccato
L'hai già utilizzato. Quando l'utente clicca su un determinato pulsante, vuoi che l'applicazione faccia qualcosa, come aprire un'altra schermata o inviare un messaggio.
Quando si cambia l'orientamento dello schermo
Se l'utente gira il telefono da verticale (portrait) a orizzontale (landscape), potresti voler fare qualcosa, come cambiare il layout dello schermo o la dimensione dei componenti.
Quando la posizione del cursore viene modificata
Un cursore permette all'utente di trascinarlo per scegliere un valore lungo il suo percorso. Questo potrebbe innescare una modifica ad un altro componente. Ad esempio, puoi aumentare le dimensioni della penna in un'applicazione di disegno utilizzando un cursore.
FUNZIONI
Le funzioni Sono blocchi di codice che fanno qualcosa. Possono essere eseguite più volte all'interno di un'applicazione. In App Inventor, i blocchi di funzioni sono colorati di viola. Alcuni linguaggi si riferiscono alle funzioni come metodi o procedure. In realtà, App Inventor si riferisce generalmente a queste funzioni come a procedure. Fanno qualcosa, quindi puoi considerarli come blocchi di azione.
TextToSpeech.Speak
Il componente TextToSpeech può dire o pronunciare qualsiasi testo tu voglia.
Camera.TakePicture
Il componente Camera può scattare una foto con il telefono.
Sound.Play
Il componente Sound può riprodurre un suono.
SETTER E GETTER
I blocchi verdi si riferiscono ai componenti e alle loro proprietà.
I blocchi di colore verde chiaro che possono essere agganciati a un altro blocco sono chiamati getterperché stanno ottenendo il valore della proprietà.
I setter sono di colore verde più scuro e possono essere agganciati, con una fessura aperta all'estremità. Questo ti permette di impostare il valore della proprietà.
Testo del pulsante1
Il testo del pulsante 1 viene ottenuto e memorizzato nella variabile global greeting.
Testo del pulsante1
Il testo del pulsante1 è impostato con le parole "I love coding". Le parole "I love coding" appariranno sul pulsante.
Testo dell'etichetta1
Il testo dell'etichetta1 è impostato sulla sorgente del suono1. Ciò significa che il nome del file del suono verrà visualizzato nell'etichetta1.
Sorgente di Sound1
La sorgente di Sound1 (il nome del file audio) viene ottenuta e memorizzata nella proprietà Text di Label1. Impostando il testo di un'etichetta, si visualizza essenzialmente il valore dell'etichetta, quindi il nome del file audio appare in Label1.
Testo dell'etichetta1
TextToSpeech prende il contenuto del testo di Label1 e lo pronuncia. Qualsiasi testo visualizzato nell'etichetta1 verrà pronunciato.
Suggerimento del mentore
Migliori pratiche: Ricorda agli studenti che questo è esattamente come il vero coding. Lo strano vocabolario (funzioni, getter, setter) che stiamo usando è esattamente quello che usano i codificatori.
Domande guida da porre agli studenti: Riesci a pensare ad alcune funzioni quotidiane che svolgi? (esempio: preparare una torta, lavarsi i denti - qualsiasi cosa che abbia dei passaggi ripetibili). Le funzioni sono molto simili agli algoritmi!
I consigli dei mentori sono forniti dal supporto di AmeriCorps.
BLOCCHI DI DATI
Quando utilizzi i blocchi setter, potresti utilizzare altri blocchi integrati che rappresentano dati o informazioni che possono essere utilizzate nella tua applicazione. Di seguito sono riportati alcuni esempi di blocchi di dati che possono essere utilizzati.
I numeri
I valori numerici possono essere utilizzati come dati in un'applicazione. Questi blocchi si trovano nel cassetto Math nella palette dei blocchi.
Testo o stringhe
Il testo, talvolta chiamato stringa, può essere utilizzato come dato. Si tratta di lettere, parole e frasi che possono essere utilizzate in un'applicazione. I blocchi si trovano nel cassetto Testo della palette Blocchi.
Booleano
Questo tipo di dati ha solo due valori possibili: true o false. Questi blocchi possono impostare o verificare lo "stato" di qualcosa e saranno utilizzati nei condizionali, che imparerai a conoscere meglio.
ATTIVITÀ: TUTORIAL SULLA SCHEDA AUDIO
Segui il video tutorial qui sotto
e segui le istruzioni di Dave nel video qui sotto.
Nota che il video inizia a 1:11 per saltare le istruzioni di caricamento. Queste istruzioni non sono necessarie se hai caricato il progetto iniziale utilizzando il link qui sopra.
SFIDA
Nell'attività hai utilizzato:
- Blocchi di gestori di eventi
- Blocchi funzione
Proviamo a utilizzare alcuni blocchi setter e getter da aggiungere all'applicazione Soundboard.
Quando l'utente clicca su un'immagine per riprodurre il discorso associato, cambia il colore di sfondo dello schermo. dello schermo.
Puoi cambiarlo in un colore particolare, ma poi non potrai facilmente riportarlo al colore di partenza, il nero, quindi cambia lo sfondo dello schermo con un colore casuale.
Suggerimento: controlla il cassetto dei colori e cerca l'opzione crea un blocco dicolore . Poi cerca nel cassetto Matematica un blocco di numeri interi casuali. I colori sono composti da 3 numeri, RGB per rosso, verde, blu, che vanno da 0 a 255.
RIFLESSIONE
Ora che hai imparato qualcosa in più sui diversi blocchi di codice, pensa alla soluzione della tua applicazione:
REVISIONE DEI TERMINI CHIAVE
- Interfaccia utente - tutto ciò con cui l'utente può interagire nella tua applicazione.
- Designer - La finestra in cui puoi aggiungere componenti alla tua applicazione e progettare il loro aspetto.
- Editor dei blocchi - dove potrai codificare i blocchi per la tua applicazione
- Evento - qualcosa che accade per attivare l'esecuzione di un codice
- Gestori di eventi- blocchi di codice che indicano alla tua applicazione cosa fare quando si verifica un evento
- Programmazione guidata dagli eventi - Programmazione basata su eventi, piuttosto che eseguire l'intero codice da cima a fondo.
- Funzioni - un blocco di codice che viene eseguito e può essere eseguito più volte
RISORSE AGGIUNTIVE
Scopri altri tutorial di Dave Wolber su App Inventor per principianti su appinventor.org
