Ao fazer hacking no 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. Como prévia, este é o Playground simples no servidor de demonstração.
Há três tipos de playgrounds para o Blockly principal: simples, avançado e multi. No blockly-samples, normalmente, apenas o playground avançado é usado.
Pré-requisitos
O Blockly agora usa o sistema de módulos do Closure. Devido à forma como são carregados,
os módulos do Closure não compilados precisam ser buscados de um URL http: ou https: e
não podem ser buscados diretamente de URLs file:. Consequentemente, para carregar o
playground no modo não compilado, é necessário fazer isso em 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 a partir da raiz do Blockly para instalar todas as dependências.
Usar o Internet Explorer
O Blockly agora usa recursos avançados na base de código que podem não ser compatíveis com o Internet Explorer. No código comprimido (compilado), esses recursos são transpilados para funcionar com o IE, mas o carregamento do código não comprimido pode não funcionar. Se você carregar o playground no IE, mesmo por um servidor HTTP local, ele vai carregar automaticamente o código comprimido do Blockly para garantir compatibilidade. Consulte a seção "Como acessar playgrounds diretamente" para mais detalhes sobre como testar mudanças no playground no modo compactado.
Playground simples
O playground simples é a base dos outros dois playgrounds. Ele exibe uma caixa de ferramentas e um espaço de trabalho e permite 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 vai iniciar um servidor que hospeda os módulos do Blockly e abrir automaticamente a página de testes no navegador. Quando estiver tudo pronto para fechar o playground, encerre o processo (Ctrl-C em ambientes Mac e Linux).
O playground tem:
- Todo o código é descompactado para um desenvolvimento rápido.
- Todos os blocos padrão, exceto alguns descontinuados.
- Todos os geradores de linguagem (JavaScript, Python, PHP, Lua e Dart).
- Serializar e desserializar o estado do espaço de trabalho (JSON ou XML).
- Alterne entre o layout LTR e RTL.
- Alternar entre os layouts da caixa de ferramentas.
- Testes de estresse para o renderizador.
- Registre todos os eventos no console.
Playground avançado
O playground avançado contém recursos adicionais para facilitar ainda mais a depuração do Blockly. Esse também é o playground padrão usado no blockly-samples para todos os plug-ins.
Esse playground tem todos os recursos simples, além de:
- É possível definir outras configurações, 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 a área de recreação for carregada.
- Confira a saída de cada gerador na mesma janela.
Para iniciar o playground avançado para qualquer plug-in no blockly-samples, execute npm run
start no diretório raiz do plug-in. No momento, apenas um plug-in pode ser executado por
vez e ele usa a porta 3000. Se você tiver problemas para iniciar o plug-in,
primeiro verifique se não há nada mais 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 do Blockly.
Playground múltiplo
O playground múltiplo contém 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 do 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 em um servidor local, tudo o que você precisa fazer para
ver as mudanças no Blockly na maioria dos casos é atualizar a página. Se você adicionou um
novo arquivo ou uma nova dependência a um arquivo, talvez seja necessário executar primeiro npm run
build, que vai atualizar o arquivo test/deps.js para garantir que as dependências sejam
carregadas corretamente e depois atualizar a página.
Se você estiver executando o playground avançado de um plug-in, não será necessário atualizar a página. As mudanças são carregadas automaticamente.
Como acessar playgrounds diretamente
Antes, o playground simples era acessado localmente navegando diretamente para
o arquivo test/playground.html no navegador. Isso ainda é possível com os
playgrounds simples e múltiplos, mas não é mais recomendado. Se você fizer isso,
o playground vai 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). Sempre que você mudar algo no núcleo do Blockly, será necessário
criar o núcleo novamente e preparar as mudanças. Você ainda pode acessar essas páginas se elas estiverem hospedadas
em um servidor remoto, como nosso exemplo hospedado no site de demonstração. O plano de fundo
ficará azul brilhante sempre que você estiver no modo compactado.
O playground avançado não está disponível pelo acesso file:.