Cuando se hackea en el núcleo de Blockly o desarrollas un complemento, la zona de pruebas es una herramienta muy útil. Tiene una instancia preconfigurada de Blockly que puedes usar para pruebas, depuración o prototipado. En Google, casi todo el desarrollo de Blockly se lleva a cabo a través de Playground. A modo de vista previa, aquí se muestra la zona de pruebas simple en el servidor de demostración.
Hay 3 tipos de juegos para el núcleo de Blockly: simples, avanzadas y múltiples. En las muestras en bloque, por lo general, solo se usa la zona de pruebas avanzada.
Requisitos previos
Blockly ahora usa el sistema de módulos de Cierre. Debido a la forma en que se cargan, los módulos de cierre sin compilar deben recuperarse de una URL http: o https:, y no se pueden recuperar directamente desde las URLs file:. En consecuencia, para cargar la zona de pruebas en modo sin compilar, debes cargarlo desde un servidor web local.
Creamos una secuencia de comandos que inicia un servidor local y carga todo el código necesario para cargar los módulos de Blockly. Deberás tener npm instalado en tu máquina y ejecutar npm install desde la raíz de Blockly para instalar todas las dependencias.
Con Internet Explorer
Blockly ahora usa funciones avanzadas en su base de código que pueden no ser compatibles con Internet Explorer. En el código comprimido (compilado), estas funciones se transpilan para funcionar con IE, pero es posible que la carga del código sin comprimir no funcione. Si cargas la zona de pruebas en IE, incluso a través de un servidor HTTP local, la zona de pruebas cargará automáticamente el código de Blockly comprimido para garantizar la compatibilidad. Consulta la sección "Cómo acceder a zonas de prueba directamente" si quieres obtener más detalles para probar los cambios en la zona de pruebas en modo comprimido.
Zona de juegos sencilla
Las otras dos áreas de juego sencillas se basan en ellas. Muestra una caja de herramientas y un lugar de trabajo, y te permite ajustar una cantidad limitada de opciones de configuración.
Para abrir la zona de pruebas, ejecuta
npm run start
de la raíz de Blockly. Asegúrate de que no haya nada más que escuche en el puerto 8080. Este comando iniciará un servidor que aloja los módulos de Blockly y abrirá automáticamente tu navegador en la página de la zona de pruebas. Cuando tengas todo listo para cerrar la zona de pruebas, finaliza el proceso (ctrl-c en entornos de Mac y Linux).
El Playground cuenta con las siguientes características:
- Todo el código no está comprimido para un desarrollo rápido.
- Todos los bloques predeterminados (excepto algunos obsoletos).
- Todos los generadores de lenguajes (JavaScript, Python, PHP, Lua y Dart)
- Serializa y deserializa el estado del lugar de trabajo (JSON o XML).
- Alternar entre el diseño de izquierda a derecha y de derecha a izquierda
- Alternar entre los diseños de la caja de herramientas
- Pruebas de esfuerzo para el procesador.
- Registra todos los eventos en la consola.
Zona de pruebas avanzada
La zona de pruebas avanzada incluye funciones adicionales para facilitar aún más la depuración de Blockly. Esta también es la zona de pruebas predeterminada que se usa en muestras en bloque para todos los complementos.
Este área de juegos cuenta con todas las funciones simples, además de lo siguiente:
- Se pueden configurar parámetros adicionales, como el tamaño de la cuadrícula, los controles de zoom o movimiento, el procesador, el tema y mucho más.
- La configuración y los bloques utilizados se almacenan en caché y se usan automáticamente la próxima vez que se carga la zona de pruebas.
- Consulta el resultado de cada generador en la misma ventana.
Para iniciar la zona de pruebas avanzada de cualquier complemento en muestras de bloques, ejecuta npm run
start desde el directorio raíz del complemento. Actualmente, solo se puede ejecutar un complemento a la vez y usa el puerto 3000. Si tienes problemas para iniciar el complemento, primero asegúrate de que no haya nada más escuchando en ese puerto.
Para iniciar la zona de pruebas avanzada en Core, ejecuta npm run start desde la raíz de Blockly y, luego, haz clic en el vínculo "Advanced" debajo del título.
También puedes crear tu propia página de prueba que incluya la zona de pruebas avanzada con el paquete de herramientas para desarrolladores de Blockly.
Zona de juegos múltiple
La zona de pruebas múltiple contiene varias zonas de prueba con diferentes configuraciones para el modo de izquierda a derecha y la ubicación de la caja de herramientas. Se usa principalmente para verificar rápidamente que Blockly no haya dañado nada relacionado con LTR antes de un lanzamiento. A fin de abrir esta zona de pruebas simple, sigue los pasos correspondientes y, luego, cambia la URL a /tests/multi_playground.html.
Prueba los cambios
Cuando ejecutas cualquiera de las zonas de pruebas desde un servidor local, lo único que debes hacer para ver los cambios en Blockly en la mayoría de los casos es actualizar la página. Si agregaste un archivo nuevo o una dependencia nueva a un archivo, es posible que primero debas ejecutar npm run
build, que actualizará el archivo test/deps.js para garantizar que las dependencias se carguen correctamente y, luego, actualiza la página.
Si ejecutas la zona de pruebas avanzada de un complemento, ni siquiera necesitas actualizar la página. Los cambios se cargan en caliente automáticamente.
Accede a zonas de prueba directamente
Anteriormente, se accedía a la zona de pruebas simple de forma local navegando directamente al archivo test/playground.html en tu navegador. Esto aún es posible con zonas de prueba simples y múltiples, pero ya no se recomienda. Si lo haces, la zona de pruebas detectará que no estás ejecutando un servidor local y usará automáticamente los archivos de Blockly comprimidos (consulta la página de Building Blockly para obtener más información) y, cada vez que cambies algo en el núcleo de Blockly, tendrás que volver a compilar el núcleo y habilitar los cambios. Aún puedes acceder a esas páginas si se alojan en un servidor remoto, como nuestro ejemplo alojado en nuestro sitio de demostración. El fondo será de color azul brillante cuando estés en modo comprimido.
La zona de pruebas avanzada no está disponible a través del acceso a file:.