Quando esegui hacking nel core di Blockly o sviluppi un plug-in, il playground è uno strumento estremamente utile. Ha un'istanza preconfigurata di Blockly che puoi utilizzare per test, debug o prototipazione. In Google, quasi tutto lo sviluppo di Blockly avviene utilizzando il playground. In anteprima, ecco il semplice area giochi sul server demo.
Esistono 3 tipi di aree giochi per Blockly principali: semplice, avanzata e multifunzione. In blockly-samples, in genere viene utilizzato solo il playground avanzato.
Prerequisiti
Blockly ora utilizza il sistema di moduli di chiusura. A causa del modo in cui vengono caricati,
i moduli Closure non compilati devono essere recuperati da un URL http: o https: e
non possono essere recuperati direttamente da URL file:. Di conseguenza, per caricare il
laboratorio in modalità non compilata, devi caricarlo da un server web locale.
Abbiamo creato uno script che avvia un server locale e carica tutto il codice necessario per caricare i moduli Blockly. Per installare tutte le dipendenze, devi avere npm installato sulla tua macchina e eseguire npm install dalla directory principale di Blockly.
Utilizzo di Internet Explorer
Blockly ora utilizza funzionalità avanzate nel codice base che potrebbero non essere compatibili con Internet Explorer. Nel codice compresso (compilato), queste funzionalità vengono transpilate per funzionare con IE, ma il caricamento del codice non compresso potrebbe non funzionare. Se caricate il Playground in IE, anche tramite un server HTTP locale, il Playground caricherà automaticamente il codice Blockly compresso per garantire la compatibilità. Per ulteriori dettagli sul test delle modifiche nel playground in modalità compressa, consulta la sezione "Accedere direttamente ai playground".
Playground semplice
L'area giochi semplice è la base delle altre due aree giochi. Mostra una cassetta degli attrezzi e uno spazio di lavoro e consente di regolare un numero limitato di impostazioni.
Per aprire il parco giochi, corri
npm run start
dalla radice di Blockly. Assicurati che non ci sia altro in ascolto sulla porta 8080. Questo comando avvierà un server che ospita i moduli Blockly e apre automaticamente il browser alla pagina Playground. Quando è tutto pronto, chiudi il playground terminando il processo (Ctrl-C negli ambienti Mac e Linux).
Il parco giochi include:
- Tutto il codice non è compresso per uno sviluppo rapido.
- Tutti i blocchi predefiniti (tranne alcuni non più supportati).
- Tutti i generatori di linguaggio (JavaScript, Python, PHP, Lua e Dart).
- Esegui la serializzazione e la deserializzazione dello stato dello spazio di lavoro (JSON o XML).
- Passare dal layout da sinistra a destra a quello da destra a sinistra e viceversa.
- Passare da un layout della cassetta degli attrezzi all'altro.
- Stress test per il renderer.
- Registra tutti gli eventi nella console.
Parco giochi avanzato
Il Playground avanzato contiene funzionalità aggiuntive per semplificare ulteriormente il debug di Blockly. Si tratta anche del playground predefinito utilizzato in blockly-samples per tutti i plug-in.
Questo parco giochi offre tutte le funzionalità di un parco giochi semplice, oltre a:
- È possibile configurare impostazioni aggiuntive, come le dimensioni della griglia, i controlli di zoom/movimento, il renderer, il tema e altro ancora.
- Le impostazioni e i blocchi utilizzati vengono memorizzati nella cache e utilizzati automaticamente al successivo caricamento del lab.
- Visualizza l'output di ogni generatore nella stessa finestra.
Per avviare il Playground avanzato per qualsiasi plug-in in blockly-samples, esegui npm run
start dalla directory root del plug-in. Al momento, è possibile eseguire un solo plug-in alla volta e utilizza la porta 3000. Se hai difficoltà ad avviare il plug-in,
innanzitutto assicurati che non ci sia altro in ascolto sulla porta.
Per avviare il Playground avanzato in modalità di base, esegui npm run start dalla directory principale di Blockly e poi fai clic sul link "Avanzato" sotto il titolo.
Puoi anche creare la tua pagina di test che includa il Playground avanzato utilizzando il pacchetto dev-tools di Blockly.
Più parchi giochi
Il multi playground contiene diversi playground in configurazioni diverse per la modalità LTR e la posizione della cassetta degli attrezzi. Viene utilizzato principalmente per verificare rapidamente
che Blockly non abbia danneggiato nulla relativo a LTR prima di una release. Per aprire questo playground, segui i passaggi per il playground semplice, quindi modifica l'URL in /tests/multi_playground.html.
Test delle modifiche in corso…
Quando esegui uno dei playground da un server locale, nella maggior parte dei casi è sufficiente aggiornare la pagina per vedere le modifiche in Blockly. Se hai aggiunto un nuovo file o una nuova dipendenza a un file, potrebbe essere necessario eseguire prima npm run
build, che aggiornerà il file test/deps.js per assicurarti che le dipendenze vengano caricate correttamente, quindi aggiornare la pagina.
Se stai utilizzando il playground avanzato di un plug-in, non è nemmeno necessario aggiornare la pagina. Le modifiche vengono caricate automaticamente.
Accedere direttamente ai parchi giochi
In precedenza, era possibile accedere al semplice playground a livello locale passando direttamente al
file test/playground.html nel browser. Questa operazione è ancora possibile con gli scenari semplici e multi, ma non è più consigliata. Se lo fai,
Playground rileverà che non stai eseguendo un server locale e
userà automaticamente file Blockly compressi (consulta la
pagina di Building Blockly per maggiori
informazioni) e ogni volta che modifichi qualcosa nel core di Blockly, dovrai
ricreare il core e organizzare le modifiche. Puoi comunque accedere a queste pagine se sono ospitate su un server remoto, ad esempio il nostro esempio ospitato sul nostro sito dimostrativo. Lo sfondo sarà di un blu brillante quando sei in modalità compressa.
Il playground avanzato non è disponibile tramite l'accesso file:.