Ao invadir o núcleo do Blockly ou desenvolver um plug-in, o Playground é uma ferramenta extremamente útil. Ele tem uma instância pré-configurada do Blockly que pode ser usada para testes, depuração ou prototipagem. No Google, praticamente todo o desenvolvimento da Blockly ocorre usando o playground. Esta é uma prévia do Playground simples no servidor de demonstração.
Há três tipos de playgrounds para o Core Blockly: simples, avançado e multi. Em amostras em blocos, geralmente apenas o playground avançado é usado.
Pré-requisitos
O Blockly agora usa o sistema de módulo closure. Devido à maneira como são carregados, os módulos closure descompilados precisam ser buscados em um URL http: ou https: e não podem ser buscados diretamente em URLs file:. Consequentemente, para carregar o playground no modo descompilado, você precisa carregá-lo de um servidor da Web local.
Criamos um script que inicia um servidor local e carrega todo o código
necessário para carregar os módulos do Blockly. Você precisará ter o
npm instalado na sua máquina
e executar npm install na raiz do Blockly para instalar todas as
dependências.
Como usar o Internet Explorer
Agora, o Blockly usa recursos avançados na base de código que podem não ser compatíveis com o Internet Explorer. No código compactado (compilado), esses recursos são transcompilados para funcionar com o IE, mas o carregamento do código descompactado pode não funcionar. Portanto, se você carregar o Playground no IE, mesmo por um servidor HTTP local, o Playground carregará automaticamente o código compactado do Blockly para garantir a compatibilidade. Consulte a seção "Como acessar playgrounds diretamente" para ver mais detalhes sobre como testar mudanças no Playground no modo compactado.
Playground simples
O playground simples é a base dos outros dois. Ela exibe uma caixa de ferramentas e um espaço de trabalho, além de permitir ajustar um número limitado de configurações.
Para abrir o Playground, execute
npm run start
da raiz do Blockly. Verifique se não há mais nada detectando na porta 8080. Esse comando iniciará um servidor que hospeda os módulos do Blockly e abrirá automaticamente o navegador na página do Playground. Quando estiver tudo pronto para encerrar o Playground, encerre o processo (ctrl-c em ambientes Mac e Linux).
O playground oferece:
- Todo o código é descompactado para um desenvolvimento rápido.
- Todos os blocos padrão, exceto alguns obsoletos.
- Todos os geradores de linguagens (JavaScript, Python, PHP, Lua e Dart).
- Serializa e desserializa o estado do espaço de trabalho (JSON ou XML).
- Alterne entre os layouts LTR e RTL.
- Alterne entre layouts de caixa de ferramentas.
- Testes de estresse para o renderizador.
- Registre todos os eventos no console.
Playground avançado
O Playground avançado contém outros recursos para facilitar ainda mais a depuração do Blockly. Esse também é o playground padrão usado em amostras blockly para todos os plug-ins.
Este playground tem todos os recursos simples, além de:
- Outras configurações podem ser definidas, como tamanho da grade, controles de zoom/movimento, renderizador, tema e muito mais.
- As configurações e os blocos usados são armazenados em cache e usados automaticamente na próxima vez que o playground for carregado.
- Confira a saída de cada gerador na mesma janela.
Para iniciar o playground avançado para qualquer plug-in em blockly-samples, execute npm run
start no diretório raiz do plug-in. Atualmente, apenas um plug-in pode ser executado por
vez e usa a porta 3000. Se você tiver problemas para iniciar o plug-in,
primeiro verifique se nada mais está ouvindo nessa porta.
Para iniciar o Playground avançado no núcleo, execute npm run start na raiz do Blockly
e clique no link "Avançado" abaixo do título.
Você também pode criar sua própria página de teste que inclua o playground avançado usando o pacote dev-tools da Blockly.
Multi playground
O playground tem vários playgrounds em diferentes configurações para o modo LTR e o local da caixa de ferramentas. Isso é usado principalmente para verificar rapidamente
se o Blockly não corrompeu nada relacionado à LTR antes de um lançamento. Para abrir
este playground, siga as etapas do playground simples e mude o
URL para /tests/multi_playground.html.
Teste de alterações
Ao executar qualquer um dos playgrounds a partir de um servidor local, basta atualizar a página para
ver as alterações no Blockly. Se você adicionou um
novo arquivo ou adicionou uma nova dependência a um arquivo, talvez seja necessário primeiro executar npm run
build, que atualizará o arquivo test/deps.js para garantir que as dependências sejam
carregadas corretamente e, em seguida, atualize a página.
Se você está executando o playground avançado de um plug-in, nem é necessário atualizar a página. As alterações são carregadas automaticamente.
Acesso direto a playgrounds
Anteriormente, o playground simples era acessado localmente navegando diretamente para o arquivo test/playground.html no seu navegador. Isso ainda é possível com os playgrounds simples e com vários playgrounds, mas não é mais recomendado. Se você fizer isso,
o Playground detectará que você não está executando um servidor local e
usará automaticamente arquivos compactados do Blockly (consulte a
página Como criar o Blockly para mais
informações) e sempre que você alterar algo no núcleo do Blockly, será necessário
recriar o núcleo e preparar as alterações. Ainda será possível acessar essas páginas se estiverem hospedadas em um servidor remoto, como no exemplo hospedado no nosso site de demonstração. O plano de fundo
será azul brilhante sempre que você estiver no modo compactado.
O Playground avançado não está disponível pelo acesso file:.