Strumenti per sviluppatori Blockly

Strumenti per sviluppatori Blockly è 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 di Blockly Developer Tools, compatibile con Blockly v10 e versioni successive. Se stai cercando lo strumento legacy, consulta la documentazione legacy.

Definire un blocco

Il workspace Block Factory inizierà con un blocco di configurazione vuoto. Puoi aggiungere input e campi al blocco trascinando i blocchi dalle rispettive categorie nella casella degli strumenti. 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, devi 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. Dopo aver creato la forma base del blocco, dovrai modificarne la definizione in base alla documentazione.

Man mano che modifichi il blocco di configurazione nello spazio di lavoro, l'anteprima del blocco si aggiorna 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, oltre a disporre di più linguaggi di generazione del 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 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 saperne di più su quale scegliere, consulta la documentazione sul caricamento di Blockly. Qualunque metodo utilizzi, assicurati di selezionare l'opzione corrispondente in Block Factory in modo che il codice che aggiungerai alla tua applicazione sia accurato per la tua applicazione.

Formato della definizione del blocco

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

Lingua del generatore di codice

Blockly viene fornito con più linguaggi di generazione del codice. Scegli la lingua o le lingue di cui la tua applicazione ha bisogno per mostrare lo stub del generatore di codice a blocchi corrispondente. Se utilizzi un generatore di lingue personalizzato, puoi modificare il nome della classe CodeGenerator personalizzata dopo aver copiato il codice nella tua 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 devi eseguire le intestazioni del codice prima del generatore di definizioni e blocchi di codice, le definizioni dei blocchi prima di provare a utilizzarli in una toolbox e i generatori di blocchi di codice prima di provare a generare codice per uno spazio di lavoro. Per ogni sezione, puoi utilizzare il pulsante di copia per copiare l'intero blocco di codice per quella sezione.

Se non sai ancora come utilizzare l'output del codice, potrebbe interessarti l'app di esempio che contiene esempi di blocchi personalizzati e generatori di codice dei blocchi.

Intestazioni del codice

La sezione Intestazioni del codice mostra il codice necessario per caricare la libreria Blockly principale e il generatore di linguaggio che hai scelto. Potrebbe essere presente anche un'altra configurazione; 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 possibilmente 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 indica a Blockly la forma del blocco, ad esempio i campi e gli input che contiene, il colore e altro ancora. Dopo aver eseguito questo 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 della cassetta degli attrezzi. In entrambi i casi, assicurati che le intestazioni del codice siano presenti nel file in cui includi questo codice.

Stub del generatore

Il generatore di codice a blocchi consente di descrivere 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 presenti nel blocco. Spetta 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 struttura dell'applicazione personalizzata, assicurati di includere questo codice prima di provare a generare codice per uno spazio di lavoro che include i tuoi blocchi personalizzati. In entrambi i casi, assicurati che le intestazioni del codice siano presenti nel file in cui includi questo codice.

Procedura dettagliata per i video

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

Libreria di blocchi

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

Importa dalla fabbrica di blocchi legacy

Se hai utilizzato la Block Factory precedente e vuoi migrare le definizioni dei blocchi esistenti nel nuovo strumento, puoi farlo seguendo questi passaggi:

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

   

2. Nella nuova Block Factory, fai clic sul pulsante "Carica blocco" nella barra degli strumenti.

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

   

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

5. Le definizioni dei blocchi verranno convertite automaticamente nel nuovo formato e saranno ora disponibili dal menu Load block. I blocchi potrebbero essere stati rinominati se erano in conflitto con blocchi esistenti.

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