Strumenti per sviluppatori Blockly

Blockly Developer Tools è uno strumento per sviluppatori basato sul web che può aiutarti a creare blocchi personalizzati e includerli nella tua applicazione.

Nota: questo documento riguarda la versione più recente di Blockly Developer Tools, compatibile con Blockly 10 e versioni successive. Se cerchi lo strumento precedente, consulta la documentazione precedente.

Definire un blocco

Lo spazio di lavoro Block Factory inizierà con un blocco di configurazione vuoto. Puoi aggiungere input e campi al blocco trascinandoli dalle rispettive categorie nella cassetta degli attrezzi. Puoi anche impostare il testo della descrizione comando, l'URL della guida, il colore e i controlli di connessione per il blocco modificando il blocco di configurazione.

Block Factory può creare un solo tipo di blocco alla volta. Se vuoi progettare più blocchi collegati tra loro, dovrai progettarli separatamente e collegarli nella definizione della cassetta degli attrezzi. Inoltre, i blocchi possono avere funzionalità avanzate come i mutatori, ma queste funzionalità avanzate non possono essere create in Factory. Dovrai modificare la definizione del blocco in base alla documentazione dopo aver creato la forma di base del blocco.

Man mano che modifichi il blocco di configurazione nello spazio di lavoro, l'anteprima del blocco verrà aggiornata automaticamente. Anche il codice che dovrai aggiungere alla tua applicazione verrà aggiornato automaticamente.

Configurazione output

Blockly supporta diversi metodi per definire i blocchi e caricare Blockly stesso, nonché più linguaggi di generatori di codice integrati. Il modo in cui definisci i blocchi e i generatori di codice dei blocchi dipende da questi fattori, quindi puoi impostarli in Block Factory per modificare l'output del codice.

Formato di importazione di Blockly

Puoi caricare Blockly tramite i tag <script> in HTML o utilizzando le istruzioni import se utilizzi uno strumento di compilazione con la tua applicazione. Questa scelta influisce sul modo in cui fai riferimento a determinate parti dell'API Blockly. Per ulteriori informazioni su quale scegliere, consulta la documentazione sul caricamento di Blockly. Qualunque metodo tu utilizzi, assicurati di selezionare la scelta corrispondente in Block Factory in modo che il codice che aggiungerai all'applicazione sia preciso per la tua applicazione.

Formato della definizione del blocco

Blockly supporta la definizione di blocchi in JSON o JavaScript. Il formato JSON è preferito, ma se aggiungi funzionalità avanzate come i mutator, puoi utilizzare il formato JavaScript.

Linguaggio del generatore di codice

Blockly è fornito con più linguaggi di generatori di codice. Scegli le lingue di cui ha bisogno la tua applicazione per mostrare lo stub del generatore di codice in blocco corrispondente. Se utilizzi un generatore di lingua personalizzato, puoi modificare il nome della classe CodeGenerator personalizzata dopo aver copiato il codice nell'applicazione.

Output del codice

Le sezioni successive di Block Factory mostrano il codice che dovrai copiare nella tua applicazione per caricare il blocco che hai creato. La posizione in cui copiare il codice dipende dalla struttura dell'applicazione, ma in genere dovrai eseguire le intestazioni di codice prima della definizione e del generatore di codice blocco, le definizioni di blocco prima di provare a utilizzarle in una cassetta degli attrezzi e i generatori di codice blocco prima di provare a generare codice per uno spazio di lavoro. Per ciascuna delle sezioni, puoi utilizzare il pulsante di copia per copiare l'intero blocco di codice della sezione.

Se hai ancora dubbi su come utilizzare l'output del codice, ti consigliamo di provare la app di esempio, che contiene esempi di blocchi personalizzati e generatori di codice blocco.

Intestazioni del codice

La sezione Intestazioni codice mostra il codice necessario per caricare la libreria di base di Blockly e il generatore di lingua che hai scelto. Potrebbero esserci anche altre configurazioni; ad esempio, alcuni campi che potresti includere in un blocco provengono dai plug-in di Blockly. Questi plug-in avranno le proprie istruzioni di importazione e, eventualmente, altro codice che dovrai eseguire per inizializzare il campo. Questo codice deve essere incluso prima di qualsiasi delle seguenti sezioni di codice.

Definizione del blocco

La definizione del blocco è il modo in cui comunichi a Blockly la forma del blocco, ad esempio quali campi e input contiene, il colore e altro ancora. Dopo che avrai eseguito questo codice, Blockly saprà come creare un blocco solo in base al suo type.

Se utilizzi l'app di esempio, puoi includere questo codice in un file nella directory blocks/. Se hai una tua struttura di applicazione, assicurati di includere questo codice prima di provare a fare riferimento a un blocco per nome, ad esempio in una definizione della cassetta degli attrezzi. In ogni caso, assicurati che le intestazioni di codice siano presenti nel file in cui includi questo codice.

Stub del generatore

Il generatore di codice blocco è il modo in cui descrivi il codice che deve essere generato per un blocco. Lo stub del generatore creato da Block Factory fornisce il codice di base per ottenere i valori degli input e dei campi che si trovano nel blocco. Sta a te combinare questi valori nel codice finale che verrà generato.

Se utilizzi l'app di esempio, puoi includere questo codice in un file nella directory generators/. Se hai una tua struttura di applicazione, assicurati di includere questo codice prima di provare a generare codice per uno spazio di lavoro che includa i tuoi blocchi personalizzati. In ogni caso, assicurati che gli annunci siano presenti nel file in cui includi questo codice.

Procedura dettagliata per i video

Questo video illustra nel dettaglio i passaggi per definire un blocco. L'interfaccia utente è obsoleta, ma le funzionalità dei blocchi che mette in evidenza sono ancora più o meno precise.

Libreria di blocchi

I blocchi vengono salvati automaticamente nello spazio di archiviazione locale del browser ogni volta che apporti una modifica al blocco. Puoi creare un nuovo blocco o caricarne uno esistente dal tuo spazio di archiviazione locale facendo clic sui pulsanti corrispondenti nella barra degli strumenti in alto.

Importa da Block Factory precedente

Se hai utilizzato la versione precedente di Block Factory e vuoi eseguire la migrazione delle definizioni dei blocchi esistenti nel nuovo strumento, segui questi passaggi:

1. Nella versione precedente di Block Factory, fai clic sul pulsante Export Block Library nella barra degli strumenti. Verrà scaricato un file con tutte le definizioni dei blocchi.

   

2. Nella nuova funzionalità Block Factory, fai clic sul pulsante Load block nella barra degli strumenti.

3. Seleziona l'opzione "Importa da Block Factory" nel menu.

   

4. Carica il file scaricato nel passaggio 1.

5. Le definizioni dei blocchi dovrebbero essere convertite automaticamente al nuovo formato e ora saranno disponibili nel menu Load block. I blocchi potrebbero essere stati rinominati se sono stati rilevati conflitti con blocchi esistenti.

6. Se si sono verificati errori durante l'analisi di uno dei blocchi, non potremo caricarli. Puoi aiutarci inviando un bug relativo a blockly-samples e includendo il file che non è stato analizzato.