Las Herramientas para desarrolladores de Blockly son una herramienta para desarrolladores basada en la Web que puede ayudarte a crear bloques personalizados y a incluirlos en tu aplicación.
Cómo definir un bloque
El espacio de trabajo de Fábrica de bloques comenzará con un bloque de configuración vacío. Puedes agregar entradas y campos al bloque arrastrando bloques de las categorías respectivas en la caja de herramientas. También puedes modificar el bloque de configuración para configurar el texto de la información sobre la herramienta, la URL de ayuda, el color y las verificaciones de conexión del bloque.
La fábrica de bloques solo puede crear un tipo de bloque a la vez. Si deseas diseñar varios bloques que estén conectados entre sí, tendrás que diseñar los bloques por separado y conectarlos en la definición de la caja de herramientas. Además, los bloques pueden tener funciones avanzadas como mutadores, pero estas no se pueden crear en la fábrica. Tendrás que modificar la definición del bloque de acuerdo con la documentación después de compilar la forma básica del bloque.
A medida que modifiques el bloque de configuración en el lugar de trabajo, la vista previa del bloque se actualizará automáticamente. El código que debes agregar a la aplicación también se actualizará automáticamente.
Configuración de salida
Blockly admite diferentes métodos para definir bloques y cargar Blockly por su cuenta, además de tener varios lenguajes generadores de código integrados. La forma en que defines tus bloques y generadores de código de bloque depende de estos factores, por lo que puedes configurarlos en la fábrica de bloques para cambiar la salida del código.
Formato de importación en bloque
Puedes cargar Blockly a través de etiquetas <script> en HTML, o con sentencias import si usas una herramienta de compilación con tu aplicación. Esta elección influye en la forma en que haces referencia a ciertas partes de la API de Blockly. Si deseas obtener más información para elegir, consulta la documentación sobre cómo cargar Blockly.
Sin importar el método que uses, asegúrate de seleccionar la opción correspondiente en la fábrica de bloques para que el código que agregues a la aplicación sea preciso.
Formato de definición de bloque
Blockly admite la definición de bloques en JSON o JavaScript. Se prefiere el formato JSON, pero si vas a agregar funciones avanzadas como mutadores, puedes usar el formato JavaScript.
Lenguaje del generador de códigos
Blockly se envía con varios idiomas generadores de códigos. Elige los idiomas que necesita tu aplicación para mostrar el stub del generador de código de bloque correspondiente. Si usas un generador de lenguajes personalizado, puedes modificar el nombre de la clase CodeGenerator personalizada después de copiar el código en la aplicación.
Resultado de código
En las siguientes secciones de la fábrica de bloques, se muestra el código que deberás copiar en tu aplicación para cargar el bloque que creaste. La ubicación en la que copies el código dependerá de cómo hayas estructurado tu aplicación, pero, por lo general, deberás ejecutar los encabezados del código antes de la definición y el generador de código de bloque, las definiciones de bloques antes de intentar usarlas en una caja de herramientas y los generadores de código de bloque antes de intentar generar código para un lugar de trabajo. En cada una de las secciones, puedes usar el botón de copiar para copiar todo el bloque de código de esa sección.
Si aún no estás seguro de cómo usar el resultado del código, es posible que te interese la app de ejemplo, que tiene ejemplos de bloques personalizados y generadores de código de bloque.
Encabezados de código
En la sección Encabezados de código, se muestra el código que necesitas para cargar la biblioteca principal de Blockly y el generador de lenguaje que elegiste. Aquí también puede haber otra configuración; por ejemplo, algunos campos que puedes incluir en un bloque son de complementos de Blockly. Estos complementos tendrán sus propias sentencias de importación y, posiblemente, otro código que deberás ejecutar para inicializar el campo. Este código debe incluirse antes de cualquiera de las siguientes secciones.
Definición de bloque
La definición del bloque es la forma en que le indicas a Blockly la forma del bloque (por ejemplo, qué campos y entradas tiene, el color y mucho más). Después de que ejecutes este código, Blockly sabrá cómo crear un bloque basado en su type.
Si usas la app de ejemplo, puedes incluir este código en un archivo en el directorio blocks/. Si tienes tu propia estructura de aplicación, asegúrate de incluir este código antes de intentar hacer referencia a un bloque por su nombre, como en una definición de caja de herramientas. De cualquier manera, asegúrate de que los encabezados del código estén presentes en el archivo en el que incluyes este código.
stub de generador
El generador de código de bloque es la forma en que describes el código que se debe generar para un bloque. El stub del generador que crea la fábrica de bloques te proporciona el código básico para obtener los valores de las entradas y los campos que están en tu bloque. Depende de ti combinar estos valores en el código final que se generará.
Si usas la app de ejemplo, puedes incluir este código en un archivo en el directorio generators/. Si tienes tu propia estructura de aplicación, asegúrate de incluir este código antes de intentar generar código para un lugar de trabajo que incluya tus bloques personalizados. De cualquier manera, asegúrate de que los encabezados de código estén presentes en el archivo en el que incluyes este código.
Video explicativo
En este video se explican los pasos para definir un bloque en detalle. La IU está desactualizada, pero las funciones de bloque que destaca siguen siendo más o menos precisas.
Bloquear biblioteca
Los bloques se guardan automáticamente en el almacenamiento local del navegador cada vez que realizas un cambio en el bloque. Puedes crear un bloque nuevo o cargar uno existente desde tu almacenamiento local si haces clic en los botones correspondientes en la barra de herramientas superior.
Importa desde una fábrica de bloques heredada
Si usaste la fábrica de bloques heredada y deseas migrar tus definiciones de bloques existentes a la herramienta nueva, sigue estos pasos:
En la fábrica de bloques heredada, haz clic en el botón
Export Block Libraryen la barra de herramientas. Se descargará un archivo con todas las definiciones de bloque.
En la nueva fábrica de bloques, haz clic en el botón
Load blockde la barra de herramientas.Selecciona la opción "Importar desde fábrica de bloques" en el menú.
Sube el archivo que descargaste en el paso 1.
Tus definiciones de bloque deberían convertirse automáticamente al formato nuevo y ahora estarán disponibles en el menú
Load block. Es posible que se les haya cambiado el nombre de los bloques si hubo conflictos con los existentes.Si hubo errores al analizar cualquiera de tus bloques, no podremos cargarlos. Para ayudarnos, presenta un error en las muestras en bloque e incluye el archivo que no se analizaría.