Lezione 13 - Personalizzazione delle app

Mostra agli studenti l'app di esempio, Suggeritore di Raspado

Discussione: Quali modifiche apporteresti a questa app per migliorarne la facilità d'uso?

Chiedi agli studenti di scrivere un diario individualmente, quindi di discuterne con un compagno prima di farlo in gruppo

Obiettivo della discussione: gli studenti possono attingere alle lezioni precedenti per dare suggerimenti su come migliorare questa app: aggiungere un tema per migliorarne l'interfaccia, creare una schermata iniziale che l'utente veda per prima, aggiungere immagini o altri elementi visivi, ecc. Oltre a questi suggerimenti, guida gli studenti a considerare che ci sono troppe opzioni su una schermata e che l'app dovrebbe invece essere composta da più schermi. Questo proseguirà nella lezione di oggi, in cui esamineremo altri modi per personalizzare e migliorare le nostre app.

Arriva un punto in cui le nostre app di intelligenza artificiale hanno troppe caratteristiche per una singola schermata. In questi casi, può essere utile suddividere la nostra app in più schermate e distribuire le domande che poniamo agli utenti. Ciò semplifica l'utilizzo dell'app e semplifica il raggruppamento delle domande. Oggi impareremo come suddividere le nostre app in più schermate e come aggiornare il codice della nostra app in modo che corrisponda alle nuove schermate.

Domanda del giorno: come posso personalizzare il codice per un'app di apprendimento automatico?

Code Studio: chiedi agli studenti di accedere all' Esercizio 1 di Code Studio. In questa app, vedono un Suggeritore di Raspado simile a quello del'attività di avvio, tuttavia, le domande sono state suddivise su 2 schermate anziché su una sola.

Girando tra i banchi: monitora gli studenti mentre seguono le istruzioni su questa schermata. Possono fare clic sulle immagini all'interno delle istruzioni dell'esercizio per ottenere suggerimenti. Questa è la prima volta che gli studenti modificano il codice pregenerato per i modelli, quindi assicurati di consultare gli studenti prima di continuare per assicurarti che capiscano come completare questo esercizio.

Elementi di progettazione esterni alla schermata: questo esercizio prepara gli studenti a una situazione che potrebbero incontrare nel loro progetto del capitolo: avere così tante caratteristiche che gli elementi di progettazione finizcono fuori dalla schermata. Ciò tende a verificarsi quando si utilizzano più di 6 funzioni in un modello. Se gli studenti lo riscontrano negli esercizi successivi, ricondurli a questo esercizio può essere utile per ricordare agli studenti come risolvere i problemi e riorganizzare gli elementi a schermo.

Ora che sappiamo come modificare il nostro programma per utilizzare nuovi elementi della "modalità interfaccia", diamo un'occhiata a un esempio più avanzato. Nella prossima serie di esercizi, contribuiremo a creare un sistema di avviso al conducente che può essere utilizzato dalle auto per avvisare i conducenti di condizioni pericolose.

Code Studio: chiedi agli studenti di passare all'esercizio successivo in Code Studio. In questi prossimi esercizi, gli studenti personalizzeranno un'app in modo che ogni domanda sia su una schermata separata, che consente di aggiungere ulteriori informazioni per l'utente. Man mano che gli studenti completano ogni esercizio, impareranno come aggiornare il programma per utilizzare elementi di progettazione personalizzati anziché quelli generati per opzione predefinita.

Discussione:

• Quante caratteristiche ha questa app? Cosa sono?
• Qual è l'etichetta di questa app? Quali sono i possibili output?

Obiettivo della discussione: gli studenti devono rendersi conto che ci sono 4 caratteristiche: numero di auto, condizioni meteorologiche, temperatura e ora del giorno. Quando gli studenti rispondono, chiedi loro di identificare se le caratteristiche sono categoriali o numeriche e come fanno a saperlo? Gli studenti possono rispondere in base agli elementi di progettazione visualizzati a schermo (menu a discesa per categorie, caselle di testo per numeri) oppure possono aver consultato la "Scheda modello" per queste informazioni. Dovrebbero inoltre identificare tre possibili valori sull'etichetta: pericolo, avviso e normale. Fai notare che queste informazioni sono più facili da visualizzare nella scheda modello piuttosto che verificare l'app più e più volte.

Code Studio: chiedi agli studenti di continuare con i prossimi esercizi di Code Studio, dove ricreeranno questa app.

Girando tra i banchi: monitora gli studenti mentre ricreano questa app. Gli studenti non saranno in grado di testare l'app finché non sarà completamente completa, il che potrebbe essere una sfida per alcuni studenti. Ecco alcune cose a cui prestare attenzione mentre gli studenti lavorano:

• Esercizio 3: gli studenti si esercitano a eliminare gli elementi predefiniti generati quando si importa per la prima volta un modello. Questo è un passaggio importante quando gli studenti creeranno le proprie app personalizzate in progetti successivi.
• Esercizi 4 e 5: gli studenti aggiornano il codice della loro app solo per utilizzare i nuovi elementi di design per le funzioni Number of Cars e Weather. Possono usare i suggerimenti contenuti nelle istruzioni dell'esercizio per ottenere indizi su cosa fare in ogni passaggio.
• Esercizio 6: gli studenti aggiornano sia il design che il codice della loro app per raccogliere dati per la funzione Temperatura. Aiuta gli studenti a tenere traccia del nuovo elemento di input di testo che aggiungono alla schermata della temperatura e assicurati che l'ID dell'elemento corrisponda a quello che usano nel blocco `getText` (#fff176) del loro codice.
• Esercizio 7: gli studenti aggiornano sia il design che il codice della loro app per raccogliere dati per la funzione Time of Day. L'aggiunta dell'elemento di progettazione e l'aggiornamento del codice sono simili all'ultimo esercizio, ma questo passaggio prevede l'utilizzo della Model Card per verificare i possibili valori relativi a questa caratteristica categoriale. Gli studenti possono commettere errori di ortografia o di uso delle maiuscole che possono influire sul loro codice: incoraggia gli studenti a fare molta attenzione a far corrispondere esattamente le opzioni del menu a discesa alla scheda modello.
• Esercizio 8: gli studenti hanno la possibilità di eseguire la loro app e verificarne il funzionamento. Gli studenti dovranno apportare modifiche al codice a questo esercizio solo se il loro programma non funziona. Altrimenti, se l'app funziona correttamente, gli studenti possono passare all'esercizio successivo.

Esercizi di scelta: appena gli studenti hanno creato la loro app per un sistema di "avviso al conducente", possono scegliere tra diverse attività di esempio per continuare a migliorare la propria app. Ogni esercizio utilizza la stessa app "Avviso al conducente" che ha già creato come modello da aggiungere. Gli studenti possono scegliere di completare tutti gli esercizi che desiderano: ognuno consente loro di continuare a personalizzare e migliorare la propria app.

Esercizi ripetuti: le scelte in questo esercizio sono identiche a quelle dell'ultima lezione. Questo è intenzionale, quindi gli studenti hanno più opportunità di imparare i nuovi trucchi di progettazione o blocchi di codice o continuare a esercitarsi con i nuovi blocchi che hanno imparato l'ultima lezione. Incoraggia gli studenti a scegliere una nuova sfida per l'app di oggi diversa da quelle che hanno scelto ieri.

Discussione: qual è un vantaggio dell'avere caratteristiche distribuite su più schermate in un'app? Qual è uno svantaggio di avere caratteristiche su più schermate in un'app?

Obiettivo della discussione: le risposte degli studenti possono variare, ma alcuni esempi sono:

• Gli studenti possono rendersi conto che avere caratteristiche su più schermi può rendere più semplice la descrizione della caratteristica e più facile per l'utente concentrarsi su una singola domanda.
• Gli studenti possono anche rendersi conto che ciò aumenta la «durata» dell'app e aggiunge ulteriore lavoro per aggiornare il codice con i nuovi elementi.