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 rompecabezas, animaciones o música: El código generado resuelve un rompecabezas (como un laberinto), muestra una animación o reproduce música. Para ver un ejemplo, consulta Music Lab de Code.org.
Videojuegos: El código generado ejecuta un videojuego. Por ejemplo, crea los primeros dos 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 a 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 para 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 Run. Por ejemplo, esta es la IU de Maze en Blockly Games.
Algunas aplicaciones de Blockly omiten el botón Run y, en su lugar, actualizan el panel de salida cada vez que el usuario realiza un cambio. Por ejemplo, la aplicación Graph en los ejemplos de Blockly tiene dos paneles de salida (uno para el gráfico y uno para la ecuación) que se actualizan en cada cambio.
Algunas aplicaciones no tienen un panel de salida. Esto es más común en las aplicaciones de hardware, como las de programación de robots. Si bien algunas de estas aplicaciones incluyen un simulador de hardware, muchas solo permiten que los usuarios descarguen y ejecuten el código generado directamente en el dispositivo de destino.
Componentes adicionales de la IU
La mayoría de las aplicaciones tienen componentes adicionales de la IU. Algunos de ellos satisfacen necesidades generales, como guardar el trabajo del usuario, mientras que otros 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 nuevos sprites y fondos, y menús de archivos, 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 para descargar 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 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 su teléfono.
Los componentes adicionales que debes incluir dependen de los objetivos de tu aplicación y de las habilidades 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 visualización 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, resaltado de bloque)
- Establece los parámetros de prueba
Hardware
- Conexión (USB, Bluetooth o código QR)
- Configuración (elegir el modelo, elegir los accesorios, asignar nombres a los componentes)
- Control (controlar el robot de forma manual, registrar su posición)
- Cómo descargar el código
Ayuda
- Documentación
- Instructivos interactivos
- Ayuda contextual
¿Qué hago ahora?
Si aún estás pensando en tu aplicación, sigue leyendo sobre las consideraciones de diseño.
Si quieres ver cómo es compilar una aplicación simple, prueba el codelab Cómo comenzar a usar Blockly.
Si tienes todo listo para escribir tu solicitud, haz lo siguiente: