Una aplicación de Blockly es una aplicación web que contiene un editor de Blockly (espacio de trabajo). En este documento, se proporcionan ejemplos de para qué se usan las aplicaciones de Blockly y se analizan las funciones típicas de la IU.
Si aún no lo hiciste, asegúrate de leer el glosario visual y los pasos básicos de la aplicación antes de continuar con este documento.
¿Qué hacen las aplicaciones de Blockly?
Las aplicaciones de Blockly ayudan a los usuarios a escribir programas en una variedad de campos, desde videojuegos hasta robótica y análisis de datos. Los usuarios escriben sus programas con bloques, que la aplicación usa para generar código basado en texto, como JavaScript o Python. Luego, la aplicación ejecuta el código generado directamente o el usuario lo descarga y ejecuta en otra plataforma, como un robot o un controlador de videojuegos portátil.
Estos son algunos ejemplos de los tipos de programas que los usuarios escriben con las aplicaciones de Blockly:
Soluciones de acertijos, animaciones o música: El código generado resuelve un acertijo (como un laberinto), muestra una animación o reproduce música. Para ver un ejemplo, consulta el Music Lab de Code.org.
Videojuegos: El código generado ejecuta un videojuego. Por ejemplo, crea los dos primeros niveles de "Whack the Mole" en MakeCode Arcade y descarga el juego en un controlador o juega en el simulador.
Robótica: El código generado dirige un robot. Por ejemplo, programa un robot con Ozoblockly y descárgalo en un robot real o ejecútalo en el simulador.
Dibujo: El código generado dibuja un dibujo en 2D o 3D. Para ver un ejemplo, consulta BlocksCAD.
Análisis de datos: El código generado analiza los datos y crea un gráfico. Para ver un ejemplo, consulta esta demostración de la plataforma de Dialogic.
Código específico de la aplicación: El código generado realiza una tarea específica de una aplicación en particular. Por ejemplo, Blockly Developer Tools es una herramienta para diseñar nuevos bloques de Blockly. Genera código de definición de bloques, que los usuarios copian y pegan en su propia aplicación de Blockly.
Interfaces de usuario
Una buena manera de comprender los componentes típicos de las aplicaciones de Blockly es observar sus interfaces de usuario.
Componentes básicos de la IU
Casi todas las aplicaciones de Blockly comparten algunos componentes básicos: un editor de Blockly (espacio de trabajo), un panel de salida y un botón "Ejecutar". Por ejemplo, esta es la IU del Laberinto en Blockly Games.
Algunas aplicaciones de Blockly omiten el botón "Ejecutar" y, en cambio, actualizan el panel de salida cada vez que el usuario realiza un cambio. Por ejemplo, la aplicación Graph en las muestras de Blockly tiene dos paneles de salida (uno para el gráfico y otro para la ecuación) que se actualizan con cada cambio.
Algunas aplicaciones no tienen un panel de salida. Esto es más común en aplicaciones de hardware, como las de programación de robots. Si bien algunas de estas aplicaciones incluyen un simulador de hardware, muchas de ellas solo permiten que los usuarios descarguen y ejecuten el código generado directamente en el dispositivo de destino.
Componentes de IU adicionales
La mayoría de las aplicaciones tienen componentes de IU adicionales. Algunas de ellas satisfacen necesidades generales, como guardar el trabajo del usuario, mientras que otras satisfacen necesidades específicas de la aplicación, como diseñar una GUI. Estos son algunos ejemplos:
Scratch, una aplicación para crear animaciones y videojuegos, tiene editores de gráficos y sonido, paneles para crear sprites y fondos nuevos, y menús de archivo, edición y configuración:
MakeCode Arcade, una aplicación para crear videojuegos, tiene controles de salida, editores de código y gráficos, un menú de configuración y botones de descarga y guardar. Su panel de salida simula un control de juegos portátil.
MIT App Inventor, una aplicación para crear apps para teléfonos, tiene pantallas separadas para su diseñador de GUI y el editor de Blockly, así como menús de archivos, conexión, compilación y configuración. En lugar de un panel de salida, los usuarios prueban el código generado en sus teléfonos.
Los componentes adicionales que debes incluir dependen de los objetivos de tu aplicación y las capacidades de tus usuarios. Estos son algunos componentes comunes:
Administración:
- Administración de archivos (nuevo, abrir, guardar, guardar como, borrar)
- Administración de cuentas (creación, acceso y salida)
- Configuración (idioma, configuración de la IU)
Programación:
- Comandos de edición (deshacer, rehacer, copiar, cortar, pegar, duplicar)
- Diseñador de GUI
- Editores de gráficos y sonido
- Editor de código o pantalla de código de solo lectura
Prueba
- Configuración de salida (inicio/detención, velocidad de reproducción, volumen, captura de pantalla, etc.)
- Debugger (puntos de interrupción, ejecución, paso a paso, resaltado de bloques)
- Establece parámetros de prueba
Hardware
- Conexión (USB, Bluetooth, código QR)
- Configuración (elegir el modelo, elegir los accesorios, asignar nombres de componentes)
- Control (controlar el robot de forma manual, registrar la posición del robot)
- Cómo descargar el código
Ayuda
- Documentación
- Instructivos interactivos
- Ayuda contextual
¿Qué debo hacer ahora?
Si aún estás pensando en tu aplicación, sigue leyendo sobre las consideraciones de diseño.
Si quieres ver cómo se compila una aplicación simple, prueba el codelab de introducción a Blockly.
Si ya tienes todo listo para escribir tu solicitud, haz lo siguiente: