Durante la pirateria informatica nel core di Blockly o lo sviluppo di un plug-in, il parco giochi è uno strumento estremamente utile. Include un'istanza di Blockly preconfigurata che puoi utilizzare per test, debug o prototipazione. In Google, quasi tutto lo sviluppo di Blockly avviene tramite il parco giochi. Come anteprima, ecco il semplice parco giochi sul server demo.
Esistono tre tipi di aree giochi per Blockly: semplice, avanzato e multi. In genere, negli esempi a blocchi, viene utilizzato solo il parco giochi avanzato.
Prerequisiti
Blockly ora utilizza il sistema dei moduli Closure. A causa del modo in cui vengono caricati, i moduli di Closure non compilati devono essere recuperati da un URL http: o https: e non possono essere recuperati direttamente dagli URL file:. Di conseguenza, per caricare il parco giochi 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 aver installato npm sulla macchina ed eseguire npm install dalla directory principale di Blockly.
Con Internet Explorer
Blockly ora utilizza nel codebase funzionalità avanzate che potrebbero non essere compatibili con Internet Explorer. Nel codice compresso (compilato), queste caratteristiche vengono tradotte per funzionare con IE, ma il caricamento del codice non compresso potrebbe non funzionare. Se carichi il parco giochi in IE, anche tramite un server HTTP locale, il parco giochi caricherà automaticamente il codice Blockly compresso per garantirne la compatibilità. Per ulteriori dettagli sul test delle modifiche al parco giochi in modalità compressa, consulta la sezione "Accesso diretto ai parchi giochi".
Semplice parco giochi
Gli altri due campi si basano su questo semplice parco giochi. Mostra una serie di strumenti e un'area di lavoro e ti consente di modificare un numero limitato di impostazioni.
Per aprire il parco giochi, corri
npm run start
dalla radice di Blockly. Assicurati che nessun altro sia in ascolto sulla porta 8080. Questo comando avvierà un server che ospita i moduli Blockly e aprirà automaticamente il browser alla pagina Playground. Quando sei pronto per arrestare il parco giochi, termina la procedura (Ctrl-C in ambienti Mac e Linux).
Il parco giochi include:
- Tutto il codice non è compresso per uno sviluppo rapido.
- Tutti i blocchi predefiniti (tranne quelli ritirati).
- Tutti i generatori di linguaggi (JavaScript, Python, PHP, Lua e Dart).
- Serializza e deserializza lo stato dell'area di lavoro (JSON o XML).
- Passa dal layout LTR a quello RTL e viceversa.
- Spostarsi tra i layout degli strumenti.
- Test di stress per il renderer.
- Registra tutti gli eventi nella console.
Area giochi avanzata
Il parco giochi avanzato contiene funzioni aggiuntive che semplificano ulteriormente il debug di Blockly. È anche il parco giochi predefinito utilizzato negli esempi a blocchi per tutti i plug-in.
Questo parco giochi offre tutte le semplici funzionalità oltre a:
- È possibile configurare impostazioni aggiuntive, ad esempio dimensioni della griglia, controlli di zoom/spostamento, renderer, tema e altro.
- Le impostazioni e i blocchi utilizzati vengono memorizzati nella cache e usati automaticamente al successivo caricamento dell'area giochi.
- Visualizza l'output di ogni generatore nella stessa finestra.
Per avviare il parco giochi avanzato per qualsiasi plug-in in blockly-samples, esegui npm run
start dalla directory root del plug-in. Al momento può essere eseguito un solo plug-in alla volta, che utilizza la porta 3000. Se non riesci ad avviare il plug-in,
assicurati che nessun altro sia in ascolto su quella porta.
Per avviare l'ambiente avanzato in core, esegui npm run start dalla directory principale di Blockly, quindi fai clic sul link "Avanzate" sotto il titolo.
Puoi anche creare la tua pagina di test che includa il parco giochi avanzato utilizzando il pacchetto dev-tools di Blockly.
Più giochi
che contiene vari campi da gioco in diverse configurazioni
per la modalità LTR e la posizione degli strumenti. Viene usato principalmente per verificare rapidamente
che Blockly non abbia interrotto nulla in merito a LTR prima di una release. Per aprire questo parco giochi, segui i passaggi per quello semplice e poi modifica l'URL in /tests/multi_playground.html.
Test delle modifiche in corso…
Quando esegui un parco giochi da un server locale, nella maggior parte dei casi devi semplicemente 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 garantire che le dipendenze vengano caricate correttamente, quindi aggiornare la pagina.
Se esegui l'area giochi avanzata di un plug-in, non c'è nemmeno bisogno di aggiornare la pagina. Le modifiche vengono caricate automaticamente tramite hotload.
Accesso diretto ai parchi giochi
In precedenza, per accedere al semplice parco giochi in locale si accedeva direttamente al file test/playground.html nel browser. Questo è ancora possibile con i campi da gioco semplici e multipli, ma non è più consigliato. Se lo fai,
il parco giochi rileverà che non stai eseguendo un server locale e
utilizzerà automaticamente file Blockly compressi (per ulteriori informazioni, consulta la
pagina Building Blockly) e ogni volta che cambi qualcosa nel core di Blockly, dovrai
ricostruire il core e gestire le modifiche. Puoi comunque accedere a queste pagine se ospitate
su un server remoto, come l'esempio ospitato sul nostro sito dimostrativo. Lo sfondo diventa azzurro quando è attiva la modalità compressa.
Il parco giochi avanzato non è disponibile tramite l'accesso a file:.