Un'applicazione Blockly è un'applicazione web che contiene un editor Blockly (workspace). Questo documento fornisce esempi di utilizzo delle applicazioni Blockly e analizza le funzionalità tipiche dell'interfaccia utente.
Se non l'hai ancora fatto, assicurati di leggere il glossario visivo e i passaggi di base dell'applicazione prima di continuare con questo documento.
Cosa fanno le applicazioni Blockly?
Le applicazioni Blockly aiutano gli utenti a scrivere programmi in una serie di campi, dai videogio alla robotica all'analisi dei dati. Gli utenti scrivono i loro programmi utilizzando blocchi, che l'applicazione utilizza per generare codice basato su testo, come JavaScript o Python. L'applicazione esegue direttamente il codice generato oppure l'utente lo scarica e lo esegue su un'altra piattaforma, ad esempio un robot o un controller per videogiochi portatile.
Ecco alcuni esempi dei tipi di programmi che gli utenti scrivono con le applicazioni Blockly:
Soluzioni di puzzle, animazioni o musica: il codice generato risolve un puzzle (come un labirinto), mostra un'animazione o riproduce musica. Per un esempio, consulta Music Lab di Code.org.
Videogiochi: il codice generato esegue un videogioco. Ad esempio, crea i primi due livelli di "Whack the Mole" in MakeCode Arcade e scarica il gioco su un controller o riproducilo nel simulatore.
Robotica: il codice generato dirige un robot. Ad esempio, programma un robot con Ozoblockly e scaricalo su un robot reale o eseguilo nel simulatore.
Disegno:il codice generato disegna un disegno 2D o 3D. Per un esempio, consulta BlocksCAD.
Analisi dei dati:il codice generato analizza i dati e crea un grafico. Per un esempio, guarda questa dimostrazione della piattaforma Dialogic.
Codice specifico dell'applicazione: il codice generato esegue un'attività specifica per una determinata applicazione. Ad esempio, Blockly Developer Tools è uno strumento per progettare nuovi blocchi Blockly. Genera il codice di definizione del blocco, che gli utenti copiano e incollano nella propria applicazione Blockly.
Interfacce utente
Un buon modo per comprendere i componenti tipici delle applicazioni Blockly è esaminare le loro interfacce utente.
Componenti UI di base
Quasi tutte le applicazioni Blockly condividono alcuni componenti di base: un editor Blockly (workspace), un riquadro di output e un pulsante "Esegui". Ad esempio, ecco la UI del labirinto in Blockly Games.
Alcune applicazioni Blockly omettono il pulsante "Esegui" e aggiornano il pannello di output ogni volta che l'utente apporta una modifica. Ad esempio, l'applicazione Grafico negli esempi di Blockly ha due pannelli di output (uno per il grafico e uno per l'equazione) che vengono aggiornati a ogni modifica.
Alcune applicazioni non hanno un pannello di output. Questo è più comune nelle applicazioni hardware, come quelle per la programmazione di robot. Mentre alcune di queste applicazioni includono un simulatore hardware, molte consentono agli utenti di scaricare ed eseguire il codice generato direttamente sul dispositivo di destinazione.
Componenti UI aggiuntivi
La maggior parte delle applicazioni ha componenti UI aggiuntivi. Alcuni soddisfano esigenze generali, come il salvataggio del lavoro dell'utente, mentre altri soddisfano esigenze specifiche dell'applicazione, come la progettazione di una GUI. Ecco alcuni esempi:
Scratch, un'applicazione per creare animazioni e videogiochi, ha editor di grafica e audio, pannelli per creare nuovi sprite e sfondi e menu per file, modifiche e impostazioni:
MakeCode Arcade, un'applicazione per la creazione di videogiochi, dispone di controlli di output, editor di codice e grafica, un menu delle impostazioni e pulsanti di download e salvataggio. Il pannello di output simula un controller di gioco portatile.
MIT App Inventor, un'applicazione per creare app per smartphone, ha schermate separate per il progettista della GUI e l'editor Blockly, nonché menu per file, connessione, build e impostazioni. Invece di un pannello di output, gli utenti testano il codice generato sul proprio smartphone.
I componenti aggiuntivi da includere dipendono dagli obiettivi della tua applicazione e dalle capacità dei tuoi utenti. Alcuni componenti comuni sono:
Amministrazione:
- Gestione dei file (nuovo, apri, salva, salva con nome, elimina)
- Gestione dell'account (creazione, accesso, disconnessione)
- Impostazioni (lingua, configurazione UI)
Programmazione:
- Comandi di modifica (annulla, ripristina, copia, taglia, incolla, duplica)
- GUI designer
- Editor di grafica e audio
- Editor di codice o visualizzazione del codice di sola lettura
Test
- Configurazione dell'output (avvio/interruzione, velocità di riproduzione, volume, screenshot, ecc.)
- Debugger (punti di interruzione, esecuzione, passo passo, evidenziazione dei blocchi)
- Impostare i parametri di test
Hardware
- Connessione (USB, Bluetooth, codice QR)
- Configurazione (scegli il modello, scegli gli accessori, assegna i nomi dei componenti)
- Controllo (controlla manualmente il robot, registra la posizione del robot)
- Scarica codice
Guida
- Documentazione
- Tutorial interattivi
- Guida sensibile al contesto
Quali sono i prossimi passi?
Se stai ancora pensando alla tua applicazione, continua a leggere per scoprire di più sulle considerazioni di progettazione.
Se vuoi provare a creare un'applicazione semplice, prova il codelab Guida introduttiva a Blockly.
Se sei pronto a scrivere la tua richiesta: