Blockly Developer Tools es una herramienta para desarrolladores basada en la Web que puede ayudarte a compilar bloques personalizados y, luego, incluirlos en tu aplicación.
Define un bloque
El lugar de trabajo de Block Factory comenzará con un bloque de configuración vacío. Puedes agregar entradas y campos al bloque arrastrando bloques de las categorías correspondientes en la caja de herramientas. También puedes configurar el texto de la información sobre herramientas, la URL de ayuda, el color y las verificaciones de conexión del 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 Factory. Tendrás que modificar la definición del bloque según la documentación después de compilar la forma básica del bloque.
A medida que modifiques 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, así como 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 configurarlos 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 sentencias 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.
Independientemente del método que uses, asegúrate de seleccionar la opción correspondiente en Block Factory para que el código que agregues a tu aplicación sea preciso para esta.
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.
Lenguaje 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 stub correspondiente del generador de código de bloque. 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 en el que copies el código dependerá de cómo hayas estructurado tu aplicación, pero, por lo general, deberás ejecutar los encabezados de código antes de la definición y el generador de código de bloque, las definiciones de bloque 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 espacio de trabajo. Para cada una de las secciones, puedes usar el botón de copia 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 recomendamos la app de ejemplo, que tiene ejemplos de generadores de código de bloques y bloques personalizados.
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. También puede haber otra configuración aquí. Por ejemplo, algunos campos que podrías incluir en un bloque provienen de los 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 se debe incluir antes de cualquiera de las siguientes secciones de código.
Definición de bloque
La definición del bloque es la forma en que le indicas a Blockly la forma de tu bloque, como 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 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 nombre, como
en una definición de toolbox. 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.
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 Block Factory te brinda 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 de código estén presentes en el archivo en el que lo incluyas.
Video explicativo
En este video, se explican en detalle los pasos para definir un bloque. La IU está desactualizada, pero las características de los bloques que destaca siguen siendo más o menos precisas.
Biblioteca de bloques
Los bloqueos 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.
Cómo importar desde Block Factory heredado
Si usaste la Block Factory heredada y quieres migrar tus definiciones de bloques existentes a la nueva herramienta, puedes seguir estos pasos:
En la fábrica de bloques heredada, haz clic en el botón
Export Block Libraryde la barra de herramientas. Se descargará un archivo con todas tus definiciones de bloques.
En la nueva Block Factory, haz clic en el botón
Load blockde la barra de herramientas.Selecciona la opción "Importar desde Block Factory" en el menú.
Sube el archivo que descargaste en el paso 1.
Tus definiciones de bloques deberían convertirse automáticamente al nuevo formato y ahora estarán disponibles en el menú
Load block. Es posible que se haya cambiado el nombre de los bloques si hubo conflictos con bloques existentes.Si hubo errores al analizar alguno de tus bloques, no podremos cargarlos. Para ayudarnos, puedes informar un error en blockly-samples y, luego, incluir el archivo que no se pudo analizar.