Blockly Developer Tools
è uno strumento per sviluppatori basato sul web che automatizza parti del processo di configurazione di Blockly, tra cui la creazione di blocchi personalizzati, la creazione della cassetta degli attrezzi e la configurazione dello spazio di lavoro di Blockly.
La procedura per gli sviluppatori di Blockly che utilizzano lo strumento è composta da tre parti:
- Crea blocchi personalizzati utilizzando Block Factory e Block Exporter.
- Crea una cassetta degli attrezzi e uno spazio di lavoro predefinito utilizzando Workspace Factory.
- Configura la tua area di lavoro utilizzando Workspace Factory (attualmente una funzionalità solo web).
Blocca scheda Fabbrica
La scheda Block Factory ti consente di creare definizioni di blocchi e generatori di codice dei blocchi per i blocchi personalizzati. In questa scheda puoi creare, modificare e salvare facilmente i blocchi personalizzati.
Definizione di un blocco
Questo video illustra nel dettaglio i passaggi per definire un blocco. L'interfaccia utente è obsoleta, ma le funzionalità dei blocchi in evidenza sono ancora accurate.
Gestione della raccolta
I blocchi vengono richiamati tramite il nome, pertanto ogni blocco che vuoi creare deve avere un nome univoco. L'interfaccia utente applica questa regola e indica chiaramente quando stai "salvando" un nuovo blocco o "aggiornando" un blocco esistente.
Puoi passare da un blocco all'altro che hai salvato in precedenza o creare un nuovo blocco vuoto facendo clic sul pulsante Libreria. La modifica del nome di un blocco esistente è un altro modo per creare rapidamente più blocchi con definizioni simili.
Esportazione e importazione di una raccolta
I blocchi vengono salvati nello spazio di archiviazione locale del browser. Se svuoti lo spazio di archiviazione locale del browser, i blocchi verranno eliminati. Per salvare i blocchi a tempo indeterminato, devi scaricare la raccolta. La raccolta di blocchi viene scaricata come file XML che può essere importato per impostare la raccolta di blocchi sullo stato in cui si trovava al momento del download del file. Tieni presente che l'importazione di una raccolta di blocchi sostituisce quella attuale, quindi ti consigliamo di eseguire prima l'esportazione.
Le funzionalità di importazione ed esportazione sono anche il modo consigliato per gestire e condividere diversi insiemi di blocchi personalizzati.
Scheda Blocca esportatore
Dopo aver progettato i blocchi, dovrai esportare le definizioni dei blocchi e gli stub del generatore per utilizzarli in un'app. Questa operazione viene eseguita nella scheda Esportatore di blocchi.
Ogni blocco archiviato nella raccolta di blocchi verrà visualizzato nel selettore di blocchi. Fai clic sul blocco per selezionarlo o deselezionarlo per l'esportazione. Se vuoi selezionare tutti i blocchi della raccolta, utilizza l'opzione "Seleziona" → "Tutti memorizzati nella raccolta di blocchi". Se hai creato la cassetta degli attrezzi o configurato lo spazio di lavoro utilizzando la scheda Workspace Factory, puoi anche selezionare tutti i blocchi utilizzati facendo clic su "Seleziona" → "Tutti utilizzati in Workspace Factory".
Le impostazioni di esportazione ti consentono di scegliere la lingua generata che vuoi scegliere come target e se vuoi le definizioni, gli stub del generatore o entrambi per i blocchi selezionati. Dopo averli selezionati, fai clic su "Esporta" per scaricare i file.
Scheda Workspace Factory
Workspace Factory semplifica la configurazione di una cassetta degli attrezzi e dell'insieme di blocchi predefinito in uno spazio di lavoro. Puoi passare dalla modifica della cassetta degli attrezzi all'area di lavoro iniziale e viceversa con i pulsanti "Cassetta degli attrezzi" e "Spazio di lavoro".
Creare una cassetta degli attrezzi
Questa scheda consente di creare il file XML per una cassetta degli attrezzi. Il materiale presuppone familiarità con le funzionalità di una cassetta degli attrezzi. Se hai già un file XML per una cassetta degli attrezzi che vuoi modificare qui, puoi caricarlo facendo clic su "Carica per modificare".
Toolbox senza categorie
Se hai alcuni blocchi e vuoi visualizzarli senza categorie, trascinali nell'area di lavoro e vedrai i blocchi nella cassetta degli attrezzi nell'anteprima.
Cassetta degli attrezzi con categorie
Se vuoi visualizzare i blocchi nelle categorie, fai clic sul pulsante "+" e seleziona l'elemento del menu a discesa per la nuova categoria. Verrà aggiunta un'altra categoria all'elenco delle categorie, che potrai selezionare e modificare. Seleziona "Categoria standard" per aggiungere una singola categoria Blockly standard (Logica, Loop e così via) o "Cassetta degli attrezzi standard" per aggiungere tutte le categorie Blockly standard. Utilizza i pulsanti freccia per riordinare le categorie.
Per modificare il nome o il colore della categoria selezionata, utilizza il menu a discesa "Modifica categoria". Trascinando un blocco nell'area di lavoro, lo aggiungerai alla categoria selezionata.
Blocchi avanzati
Per impostazione predefinita, puoi aggiungere alla cassetta degli attrezzi qualsiasi blocco standard o qualsiasi blocco della tua raccolta. Se hai blocchi definiti in JSON che non sono presenti nella tua raccolta, puoi importarli utilizzando il pulsante "Importa blocchi personalizzati".
Alcuni blocchi devono essere utilizzati insieme o includere i valori predefiniti. utilizzando gruppi e ombre. Tutti i blocchi collegati nell'editor verranno aggiunti alla cassetta degli attrezzi come gruppo. I blocchi collegati a un altro blocco possono anche essere modificati in blocchi in ombra selezionando il blocco secondario e facendo clic sul pulsante "Crea ombra". Nota: solo i blocchi secondari che non contengono una variabile possono essere modificati in blocchi nascosti.
Se includi un blocco di variabili o funzioni nella cassetta degli attrezzi, includi una categoria "Variabili" o "Funzioni" per consentire agli utenti di utilizzare completamente il blocco. Scopri di più sulle categorie"Voci" o "Funzioni".
Configurazione di uno spazio di lavoro
Per configurare parti diverse della tua area di lavoro, vai alla scheda "Workspace Factory" e seleziona "Workspace".
Scegliere le opzioni di Workspace
Imposta valori diversi per le opzioni di configurazione e visualizza il risultato nell'area di anteprima. L'attivazione della griglia o dello zoom consente di visualizzare altre opzioni di configurazione. Inoltre, il passaggio all'utilizzo delle categorie in genere richiede uno spazio di lavoro più complesso. Quando aggiungi la prima categoria, vengono aggiunti automaticamente un cestino e le barre di scorrimento.
Aggiungere blocchi precaricati allo spazio di lavoro
Questo passaggio è facoltativo, ma potrebbe essere necessario se vuoi visualizzare un insieme di blocchi nello spazio di lavoro:
- Quando viene caricata l'applicazione.
- Quando viene attivato un evento (avanzamento di un livello, clic su un pulsante di assistenza e così via).
Trascina i blocchi nello spazio di modifica per visualizzarli nell'area di lavoro nell'anteprima. Puoi creare gruppi di blocchi, disattivare i blocchi e impostare determinati blocchi come blocchi in ombra quando li selezioni.
Puoi esportare questi blocchi come XML (vedi di seguito). Aggiungili al tuo spazio di lavoro con
Blockly.Xml.domToWorkspace, subito dopo averlo creato:
var xmlText = '<xml xmlns="https://developers.google.com/blockly/xml">' +
'<block type="math_number"></block></xml>';
Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(xmlText), workspace);
Questo codice di esempio aggiunge un singolo blocco math_number all'area di lavoro.
In fase di esportazione
Workspace Factory offre le seguenti opzioni di esportazione:
- Codice iniziale: genera codice HTML e JavaScript iniziale per inserire il tuo spazio di lavoro Blockly personalizzato.
- Cassetta degli attrezzi: genera XML per specificare la cassetta degli attrezzi.
- Blocchi di Workspace: genera XML che può essere caricato in uno spazio di lavoro.