Blockly Developer Tools es una herramienta para desarrolladores basada en la Web que puede ayudarte a compilar bloques personalizados y a incluirlos en tu aplicación.
Cómo definir un bloque
El espacio de trabajo de Block Factory comenzará con un bloque de configuración vacío. Puedes agregar entradas y campos al bloque arrastrando bloques desde las categorías correspondientes en la caja de herramientas. También puedes establecer el texto de la sugerencia, la URL de ayuda, el color y las verificaciones de conexión para el bloque modificando el bloque de configuración.
La Fábrica de bloques solo puede crear un tipo de bloque a la vez. Si quieres diseñar varios bloques conectados entre sí, deberás diseñarlos 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 funciones avanzadas no se pueden crear en la fábrica. Deberás modificar la definición del bloque según la documentación después de haber creado la forma básica del bloque.
A medida que modificas el bloque de configuración en el espacio de trabajo, la vista previa del bloque se actualizará automáticamente. El código que deberás agregar a tu aplicación también se actualizará automáticamente.
Configuración de salida
Blockly admite diferentes métodos para definir bloques y cargar Blockly, además de tener varios lenguajes de generador de código integrados. La forma en que defines tus bloques y generadores de código de bloques depende de estos factores, por lo que puedes establecerlos en Block Factory para cambiar el resultado del código.
Formato de importación de Blockly
Puedes cargar Blockly a través de etiquetas <script> en HTML o con instrucciones import si usas una herramienta de compilación con tu aplicación. Esta elección afecta la forma en que haces referencia a ciertas partes de la API de Blockly. Para obtener más información sobre cuál elegir, consulta la documentación sobre cómo cargar Blockly.
Cualquiera sea el método que uses, asegúrate de seleccionar la opción correspondiente en Block Factory para que el código que agregarás a tu 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 agregarás funciones avanzadas, como mutadores, puedes usar el formato JavaScript.
Idioma del generador de código
Blockly se entrega con varios lenguajes de generador de código. Elige los idiomas que necesita tu aplicación para mostrar el código auxiliar del generador de bloques correspondiente. Si usas un generador de lenguaje personalizado, puedes modificar el nombre de tu clase CodeGenerator personalizada después de copiar el código en tu aplicación.
Resultado de código
En las siguientes secciones de Block Factory, se muestra el código que deberás copiar en tu aplicación para cargar el bloque que creaste. El lugar donde copies el código dependerá de cómo estructuraste tu aplicación, pero, en general, deberás ejecutar los encabezados de código antes del generador de código de bloques y de la definición, las definiciones de bloques antes de intentar usarlos en una caja de herramientas y los generadores de código de bloques antes de intentar generar código para un espacio 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 sabes cómo usar el resultado del código, te puede interesar la app de ejemplo, que tiene ejemplos de bloques personalizados y generadores de código de bloques.
Encabezados de código
En la sección Code Headers, se muestra el código que necesitas para cargar la biblioteca principal de Blockly y el generador de lenguaje que elegiste. También puede haber otra configuración aquí; por ejemplo, algunos campos que puedes incluir en un bloque provienen de complementos de Blockly. Estos complementos tendrán sus propias instrucciones 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 de código.
Definición del bloque
La definición de bloque es la forma en que le indicas a Blockly la forma de tu bloque, como los campos y las entradas que tiene, el color y mucho más. Después de ejecutar este código, Blockly sabrá cómo crear un bloque solo en función de su type.
Si usas la app de ejemplo, puedes incluir este código en un archivo del 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 del generador
El generador de código de bloques es la forma en que describes el código que se debe generar para un bloque. El código auxiliar del generador creado por Block Factory te proporciona el código básico para obtener los valores de las entradas y los campos que se encuentran 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 del 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 espacio de trabajo que incluya tus bloques personalizados. 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.
Video explicativo
En este video, se explican en detalle los pasos para definir un bloque. La IU está desactualizada, pero las funciones de bloqueo que destaca siguen siendo más o menos precisas.
Biblioteca de bloques
Los bloques se guardan automáticamente en el almacenamiento local del navegador cada vez que realizas un cambio en ellos. Puedes crear un bloque nuevo o cargar uno existente desde tu almacenamiento local haciendo clic en los botones correspondientes de la barra de herramientas superior.
Importar desde la versión heredada de Block Factory
Si usaste la Block Factory heredada y quieres migrar tus definiciones de bloques existentes a la nueva herramienta, puedes hacerlo siguiendo estos pasos:
En la Block Factory heredada, haz clic en el botón
Export Block Libraryde la barra de herramientas. Se descargará un archivo con todas las definiciones de bloques.
En la nueva Block Factory, haz clic en el botón "Cargar bloque" de la barra de herramientas.
Selecciona la opción "Import from Block Factory" en el menú.
Sube el archivo que descargaste en el paso 1.
Tus definiciones de bloques se deberían convertir automáticamente al nuevo formato y ahora estarán disponibles en el menú
Load block. Es posible que se hayan cambiado los nombres de los bloques si había conflictos con los bloques existentes.Si hubo errores al analizar alguno de tus bloques, no podremos cargarlos. Puedes ayudarnos a presentar un error en blockly-samples y, luego, incluir el archivo que no se pudo analizar.