Strumenti per sviluppatori Blockly

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

Nota: questo documento riguarda la versione più recente degli Strumenti per sviluppatori di Blockly compatibile con Blockly v10 e versioni successive. Se stai cercando lo strumento precedente, consulta la documentazione legacy.

Definisci un blocco

L'area di lavoro Generazione di blocchi inizierà con un blocco di configurazione vuoto. Puoi aggiungere input e campi al blocco trascinando i blocchi dalle rispettive categorie negli strumenti. Puoi anche impostare il testo della descrizione comando, l'URL della guida, il colore e i controlli della connessione per il blocco modificando il blocco di configurazione.

Lo sviluppo di blocchi può creare un solo tipo di blocco alla volta. Per progettare più blocchi che sono collegati tra loro, dovrai progettare i blocchi separatamente e collegarli nella definizione degli strumenti. Inoltre, i blocchi possono avere funzionalità avanzate come i mutatori, ma queste funzionalità avanzate non possono essere create in fabbrica. Devi modificare la definizione del blocco in base alla documentazione dopo aver creato la forma di base del blocco.

Quando modifichi il blocco di configurazione nell'area di lavoro, l'anteprima del blocco viene aggiornata automaticamente. Anche il codice da aggiungere all'applicazione viene aggiornato automaticamente.

Configurazione output

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

Formato di importazione a blocchi

Puoi caricare Blockly attraverso i tag <script> in HTML oppure usare istruzioni import se utilizzi uno strumento di creazione con la tua applicazione. Questa scelta influisce sul modo in cui fai riferimento a determinate parti dell'API Blockly. Per ulteriori informazioni su quali scegliere, consulta la documentazione sul caricamento di Blockly. Qualunque metodo utilizzi, assicurati di selezionare la scelta corrispondente in Block Producer in modo che il codice che aggiungerai alla tua applicazione sia accurato per la tua applicazione.

Formato di definizione del blocco

Blockly supporta la definizione dei blocchi in JSON o JavaScript. È preferibile utilizzare il formato JSON, ma se vuoi aggiungere funzionalità avanzate come i mutatori, puoi utilizzare il formato JavaScript.

Linguaggio del generatore di codice

Blockly viene fornito con più lingue per la generazione di codice. Scegli i linguaggi necessari alla tua applicazione per mostrare lo stub del generatore di codici a blocchi corrispondente. Se utilizzi un generatore di linguaggio personalizzato, puoi modificare il nome della classe CodeGenerator personalizzata dopo aver copiato il codice nell'applicazione.

Output del codice

Le sezioni successive di Block Workshop mostrano il codice che dovrai copiare nell'applicazione per caricare il blocco che hai creato. Il punto in cui copi il codice dipende da come hai strutturato l'applicazione, ma in genere devi eseguire le intestazioni del codice prima del generatore di definizione e di codice a blocchi, le definizioni dei blocchi prima di provare a utilizzarle in una serie di strumenti e i generatori di codice a blocchi prima di provare a generare il codice per un'area di lavoro. Per ciascuna sezione, puoi utilizzare il pulsante Copia per copiare l'intero blocco di codice per quella sezione.

Se hai ancora dubbi su come utilizzare l'output del codice, potrebbe interessarti l'app di esempio, che contiene esempi di blocchi personalizzati e generatori di codice a blocchi.

Intestazioni del codice

La sezione Intestazioni del codice mostra il codice necessario per caricare la libreria Blockly di base e il generatore di linguaggio che hai scelto. Qui potrebbero esserci anche altre configurazioni; ad esempio, alcuni campi che potresti includere in un blocco provengono da plug-in Blockly. Questi plug-in avranno le proprie istruzioni di importazione e probabilmente altro codice da eseguire per inizializzare il campo. Questo codice deve essere incluso prima di qualsiasi sezione di codice riportata di seguito.

Definizione del blocco

La definizione del blocco è il modo in cui indichi a Blockly la forma del blocco, ad esempio i campi e gli input presenti, il colore e altro ancora. Dopo aver eseguito il codice, Blockly saprà come creare un blocco in base al suo type.

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

Stub del generatore

Il generatore di codici a blocchi consente di descrivere il codice che dovrebbe essere generato per un blocco. Lo stub del generatore creato da Block fabbrica fornisce il codice di base per ottenere i valori degli input e dei campi che si trovano nel blocco. Dovrai 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 disponi di una struttura della tua applicazione, assicurati di includere questo codice prima di provare a generare il codice per un'area di lavoro che include i blocchi personalizzati. In ogni caso, assicurati che le intestazioni del codice siano presenti nel file in cui lo includi.

Procedura dettagliata per i video

Questo video illustra nel dettaglio la procedura per definire un blocco. La UI è obsoleta, ma gli elementi a blocchi che evidenzia sono ancora più o meno precisi.

Blocca libreria

I blocchi vengono salvati automaticamente nell'archiviazione locale del browser ogni volta che vengono modificati. Puoi creare un nuovo blocco o caricarne uno esistente dal tuo spazio di archiviazione locale facendo clic sui pulsanti corrispondenti nella barra degli strumenti superiore.

Importa dalla precedente fabbrica di blocchi

Se hai utilizzato la legacy block fabbrica e vuoi eseguire la migrazione delle definizioni di blocco esistenti nel nuovo strumento, puoi farlo seguendo questi passaggi:

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

   

2. Nella nuova fabbrica di blocchi, fai clic sul pulsante Load block nella barra degli strumenti.

3. Seleziona l'opzione "Importa da fabbrica di blocchi" nel menu.

   

4. Carica il file che hai scaricato durante il passaggio 1.

5. Le definizioni dei blocchi dovrebbero essere convertite automaticamente nel nuovo formato e saranno ora disponibili nel menu Load block. I blocchi possono essere stati rinominati in caso di conflitti con i blocchi esistenti.

6. Se si sono verificati errori durante l'analisi dei tuoi blocchi, non potremo caricarli. Puoi aiutarci segnalando un bug in base a blockly-samples e includendo il file che non viene analizzato.