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 degli strumenti
e la configurazione dell'area di lavoro Blockly sul web.
La procedura per sviluppatori Blockly che utilizza lo strumento è costituita da tre parti:
- Crea blocchi personalizzati utilizzando Block Factory e Block Exporter.
- Crea una serie di strumenti e un'area di lavoro predefinita utilizzando Workspace Factory.
- Configura la tua area di lavoro utilizzando Workspace Factory (attualmente una funzionalità solo web).
Scheda Blocca fabbrica
La scheda Block Factory consente di creare definizioni di blocchi e generatori di codici a blocchi per blocchi personalizzati. In questa scheda puoi creare, modificare e salvare i blocchi personalizzati senza difficoltà.
Definizione di un blocco
Questo video illustra in dettaglio i passaggi per la definizione di un blocco. L'interfaccia utente è obsoleta, ma le caratteristiche di blocco che evidenzia sono ancora precise.
Gestione della libreria
Ai blocchi viene fatto riferimento in base al nome, pertanto ogni blocco che vuoi creare deve avere un nome univoco. L'interfaccia utente applica questa impostazione e chiarisce quando stai "salvando" un nuovo blocco o "aggiornando" un blocco esistente.
Puoi spostarti tra i blocchi salvati in precedenza o creare un nuovo blocco vuoto facendo clic sul pulsante Raccolta. Un altro modo per creare rapidamente più blocchi con definizioni simili è modificare il nome di un blocco esistente.
Esportare e importare una libreria
I blocchi vengono salvati nella memoria locale del browser. Cancellando lo spazio di archiviazione locale del browser, eliminerai i blocchi. Per salvare i blocchi a tempo indeterminato, devi scaricare la libreria. La libreria dei blocchi viene scaricata come file XML che può essere importata per impostare la libreria dei blocchi sullo stato in cui si trovava al momento del download del file. Tieni presente che l'importazione di una libreria dei blocchi sostituisce quella corrente, pertanto ti consigliamo di eseguire prima l'esportazione.
Le funzionalità di importazione ed esportazione sono anche il metodo consigliato per gestire e condividere diversi insiemi di blocchi personalizzati.
Scheda Esportatore blocco
Una volta progettati i blocchi, dovrai esportare le definizioni dei blocchi e gli stub del generatore per utilizzarli in un'app. A questo scopo, accedi alla scheda Esportatore blocchi.
Ogni blocco memorizzato nella libreria dei blocchi verrà visualizzato nel selettore dei blocchi. Fai clic sul blocco per selezionarlo o deselezionarlo per l'esportazione. Se vuoi selezionare tutti i blocchi nella tua libreria, usa l'opzione "Seleziona" → "Tutti memorizzati nella raccolta dei blocchi". Se hai creato gli strumenti o configurato l'area 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 quale lingua generata scegliere come target e se vuoi utilizzare 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 serie di strumenti e dell'insieme predefinito di blocchi in un'area di lavoro. Puoi passare dalla modifica della toolbox all'area di lavoro iniziale con i pulsanti "Toolbox" e "Workspace".
Creare una serie di strumenti
Questa scheda consente di creare il codice XML per gli strumenti. Il materiale presuppone la conoscenza delle funzionalità di Toolbox. Se disponi già di XML per una casella degli strumenti che vuoi modificare qui, puoi caricarlo facendo clic su "Carica per modificare".
Strumenti senza categorie
Se hai più blocchi e vuoi visualizzarli senza categorie, trascinali nell'area di lavoro e vedrai i blocchi visualizzati nella casella degli strumenti nell'anteprima.
Strumenti con categorie
Se vuoi i blocchi display in categorie, fai clic sul pulsante "+" e seleziona l'elemento del menu a discesa per la nuova categoria. In questo modo, all'elenco delle categorie verrà aggiunta una categoria, che potrai selezionare e modificare. Seleziona "Categoria standard" per aggiungere una singola categoria Blockly standard (Logica, Loop e così via) oppure "Strumenti 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 nello spazio di lavoro, questo verrà aggiunto alla categoria selezionata.
Blocchi avanzati
Per impostazione predefinita, puoi aggiungere alla casella degli strumenti qualsiasi blocco standard o qualsiasi blocco della libreria. Se hai definito blocchi in JSON che non sono nella tua libreria, puoi importarli utilizzando il pulsante "Importa blocchi personalizzati".
Alcuni blocchi devono essere utilizzati insieme o includere valori predefiniti. A questo scopo, puoi utilizzare gruppi e ombre. Tutti i blocchi collegati nell'editor verranno aggiunti alla casella degli strumenti come gruppo. I blocchi collegati a un altro blocco possono essere convertiti in blocchi 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 shadow block.
Se includi una variabile o un blocco funzione nel rispettivo set di strumenti, includi la categoria "Variabili" o "Funzioni" nel riquadro degli strumenti per consentire agli utenti di utilizzare al meglio il blocco. Scopri di più sulle categorie "Variabili" o "Funzioni".
Configurazione di uno spazio di lavoro (per il web Blockly)
Per configurare parti diverse dell'area di lavoro, vai alla scheda "Fabbrica di Workspace" e seleziona "Area di lavoro".
Scegli le opzioni dell'area di lavoro
Imposta valori diversi per le opzioni di configurazione e visualizza il risultato nell'area di anteprima. Se attivi la griglia o lo zoom, vengono visualizzate altre opzioni da configurare. Inoltre, il passaggio alle categorie richiede in genere un'area di lavoro più complessa; quando aggiungi la prima categoria, vengono aggiunti automaticamente un cestino e barre di scorrimento.
Aggiungi blocchi precaricati all'area di lavoro
Questa operazione è facoltativa, ma può essere necessaria se vuoi visualizzare una serie di blocchi nell'area di lavoro:
- Al caricamento dell'applicazione.
- Quando viene attivato un evento (l'avanzamento di un livello, il clic su un pulsante della guida e così via).
Trascina i blocchi nello spazio di modifica per visualizzarli nell'area di lavoro dell'anteprima. Puoi creare gruppi di blocchi, disattivare i blocchi e creare determinati blocchi di ombreggiature quando li selezioni.
Puoi esportare questi blocchi come XML (vedi di seguito). Aggiungile alla tua area di lavoro con Blockly.Xml.domToWorkspace, subito dopo aver creato l'area di lavoro:
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 campione aggiunge un singolo blocco math_number all'area di lavoro.
In fase di esportazione
Workspace Factory ti offre le seguenti opzioni di esportazione:
- Codice iniziale: genera codice HTML e JavaScript iniziale per inserire l'area di lavoro Blockly personalizzata.
- Strumenti: genera XML per specificare il tuo toolbox.
- Workspace Blocks: genera un file XML che può essere caricato in un'area di lavoro.