Editor#

El editor se abre con el elemento «Editor» del menú de la app. Es un mapa con bloques y las conexiones entre ellos: el esquema de la app. El esquema muestra qué pantalla se abre primero y adónde llega la persona tras cada toque.

El esquema: bloques, salidas y conexiones#

Un bloque es un paso de la app. Hay tres tipos de bloques:

• pantallas y todo lo que se muestra sobre una pantalla: ventanas, menús, diálogos, mensajes;
• bloques sin pantalla, que hacen algo entre pantallas: comprueban una condición, escriben un registro en una lista, envían un mensaje del bot;
• bloques de utilidad: «Inicio» y «Nota».

La lista completa está en la página Bloques y acciones.

Una salida es una línea en la parte inferior de un bloque. En una pantalla, sus botones, elementos de lista y otros elementos que se pueden tocar se convierten en salidas; en un bloque sin pantalla, lo son los resultados de su trabajo, por ejemplo, «Sí» y «No» en una condición. Las salidas de «funcionó» son verdes y las de «falló», rojas.

Una conexión es una línea que va de una salida al bloque que se abre o se ejecuta a continuación.

• Para trazar una conexión, arrastra desde el círculo de la salida hasta el bloque que necesitas.
• Si sueltas una conexión en un espacio vacío del mapa, se abre una lista de bloques: el bloque elegido se crea y se conecta al instante. Arriba de la lista están los «Recientes»; el elemento «Más» abre la ventana «Añadir un bloque».
• Para eliminar una conexión, pasa el cursor por la línea y haz clic en el icono que aparece sobre ella.
• Una salida con conexión tiene la flecha «Ir al bloque al que lleva esta salida».

La salida «Continuar» se activa sola en cuanto la app llega al bloque. Así puedes, por ejemplo, abrir una pantalla y mostrar enseguida una ventana sobre ella en un solo paso.

El bloque inicial tiene la etiqueta «Inicio»: la app empieza por él. En una app nueva es el bloque «Inicio» conectado a la primera pantalla. Para que otro bloque sea el inicial, usa el menú del bloque → «Definir como bloque inicial».

La barra de herramientas sobre el mapa#

Al hacer clic derecho en un espacio vacío del mapa se abre un menú: «Añadir un bloque…», «Añadir una nota», «Pegar».

Añadir un bloque#

La ventana «Añadir un bloque» tiene una búsqueda por nombre y descripción y, a la izquierda, categorías: «Todos», «Pantallas», «Superpuestos», «Datos y lógica», «Chatbot», «Listas», «Utilidades».

Los bloques para vender productos están en la categoría «Tienda».

Los bloques para reservar citas de clientes están en la categoría «Citas».

Al hacer clic en una tarjeta, el bloque se coloca en el mapa. La tecla Intro en la búsqueda añade el primer bloque encontrado.

Acciones con un bloque#

Un clic corto en un bloque abre su configuración. Puedes arrastrar un bloque desde cualquier punto.

En la cabecera del bloque hay dos iconos:

• «▶»: «Vista previa desde este bloque»: la app empieza por el bloque seleccionado en lugar del bloque inicial.
• «⋯»: el menú del bloque.

Para seleccionar varios bloques, márcalos donde está el icono del bloque, haz clic en los bloques manteniendo pulsada la tecla Shift o activa la herramienta «Selección por área». Sobre el mapa aparece la barra «N bloques seleccionados»: puedes copiar y eliminar la selección. Ctrl+C y Ctrl+V (en Mac, ⌘C y ⌘V) copian la selección y la pegan bajo el cursor.

Notas#

Una nota es un adhesivo de color en el mapa con una explicación para quienes construyen la app. No forma parte del flujo.

• Para añadirla: clic derecho en el mapa → «Añadir una nota», o el bloque «Nota» en la ventana «Añadir un bloque».
• Un clic en el adhesivo abre la edición del texto. Ctrl+Enter (en Mac, ⌘Enter) guarda y Esc cancela.
• El color está en el menú del adhesivo: «Amarillo», «Verde», «Azul», «Rosa», «Morado», «Gris». El tamaño se cambia desde la esquina.

El editor de pantallas#

Un clic en un bloque «Pantalla» abre la ventana «Editar pantalla». A la izquierda hay un teléfono con la pantalla y a la derecha, la configuración. El selector «iOS» / «Android» de la cabecera muestra cómo se ve la pantalla en cada sistema. Los cambios se aplican con el botón «Guardar».

Tipo de pantalla#

Una pantalla vacía en el teléfono pregunta «¿Qué tipo de pantalla?»:

Áreas#

Una ventana estándar se construye con áreas: «¿Qué debe tener la pantalla?»:

Una pantalla tiene una sola cabecera. Puede haber varias áreas de contenido y cuadrículas; el botón «+» bajo la última área del teléfono añade la siguiente.

Un clic en un área o en un elemento del teléfono abre su configuración a la derecha. El enlace «Volver a la pantalla» encima de la configuración te lleva de vuelta.

Los botones de la cabecera se dividen en cuatro grupos: «Botones al inicio», «Botones al final», «Botones principales», «Botones secundarios», con hasta cuatro en cada uno. Un botón tiene «Nombre del botón», «Icono», «Color», «Relleno», «Forma» y «Tamaño». Cada botón de la cabecera es una salida del bloque.

Pestañas. Una pantalla de «Pestañas inferiores» tiene hasta nueve pestañas. Una pestaña tiene «Nombre de la pestaña», un icono y una «Insignia»: una marca con un número o un texto. Configuración común: «Color de la barra de pestañas», «Color de la pestaña», «Color de la pestaña seleccionada».

Condición de visualización. La cabecera, un área de contenido, una cuadrícula y cada botón de la cabecera pueden no mostrarse a todos: activa «Condición de visualización» en su configuración. Cómo se definen las condiciones se explica en la página Datos de la app.

Una cuadrícula tiene hasta 50 filas y hasta 12 columnas por fila. Un área admite hasta 100 elementos.

La pantalla en el esquema#

La pantalla se ve directamente en el bloque del esquema. Una pantalla alta se recorta a la altura del teléfono: la franja «Mostrar completo» de la parte inferior del bloque la despliega y «Contraer» la vuelve a recoger.

Pantalla y ventana#

Una pantalla se abre en lugar de la anterior. Una ventana modal se muestra sobre la pantalla actual y se cierra sin sacar a la persona de ella.

El bloque «Ventana modal» tiene dos tipos:

• «Ventana sobre la pantalla»;
• «Hoja inferior», con las opciones «Altura de la hoja» (25, 50, 75 o 100 %) y «Mostrar el tirador».

Las opciones «Cerrar al tocar fuera» y «Oscurecer la pantalla» están disponibles para ambos tipos.

Una pantalla lista se puede convertir en ventana, y una ventana en pantalla: menú del bloque → «Convertir en ventana modal» o «Convertir en pantalla». Los elementos y las conexiones se conservan. La pantalla inicial y una pantalla hecha con código HTML no pueden convertirse en ventana.

Los demás bloques que se muestran sobre una pantalla (menú, diálogo, hoja de acciones, mensaje) se describen en la página Pantallas y superpuestos.

Colores y tema oscuro#

El color de un elemento se elige de la paleta de la versión: «Principal», «Secundario», «Terciario», «Éxito», «Advertencia», «Peligro», «Claro», «Medio», «Oscuro». El elemento «Predeterminado» mantiene el color que define el sistema.

Cada color de la paleta tiene dos valores: «Color del tema claro» y «Color del tema oscuro». La app elige el adecuado por sí sola.

• El valor de un color se cambia directamente en la lista de selección: el botón «Editar» y luego el lápiz junto al color. El color cambia en todos los lugares donde se usa.
• El botón «Añadir color» crea tu propio color: un «Nombre del color» y dos valores. La paleta admite hasta 50 colores.
• Puedes eliminar tus propios colores. Antes de eliminar uno, asegúrate de que no se usa en ningún sitio.

La paleta se guarda en la versión: una versión nueva recibe una copia de la paleta de la versión a partir de la que se creó.

Que el tema sea claro u oscuro depende de dónde se abra la app: en Telegram, la app sigue el tema de la app de mensajería; en un navegador, el tema del sistema; en la vista previa, el tema de tu panel.

Vista previa#

El botón «Vista previa» abre a la derecha del esquema el panel «Vista previa · versión N» con un teléfono. El teléfono ejecuta la app real con la versión abierta en el editor, aunque no esté publicada.

Bajo el teléfono está la línea «Ahora: …» con el nombre del bloque abierto. Al hacer clic en ella, el bloque se muestra en el esquema.

Advertencia

La vista previa trabaja con datos reales: las variables y los registros de listas se guardan. Un registro añadido en la vista previa aparece en la lista del proyecto.

Cada persona que abre el editor tiene su propio usuario de vista previa: dos miembros del equipo no se molestan entre sí con las variables. La vista previa no se cuenta en la sección «Usuarios» ni en la analítica.

Depuración#

El panel de depuración tiene dos pestañas.

• «Recorrido»: por qué bloques pasó el flujo tras cada toque: qué salida se activó, qué pantalla se mostró, dónde se detuvo el flujo. Al hacer clic en un paso, el bloque se muestra en el esquema. El icono de la papelera es «Borrar recorrido».
• «Variables»: los valores de las variables tras el último paso. Las modificadas se marcan como «cambiada» y las nuevas, como «nueva». Hay una búsqueda por nombre.

Los errores de solicitudes y de código que ocurren en la vista previa llegan al registro de errores con la marca «Vista previa».

Si algo no funciona#

• «Otra solicitud está editando esta versión en este momento». Otra persona u otra pestaña está guardando la versión al mismo tiempo. Repite la acción.
• «Se alcanzó el límite de páginas/bloques…». La versión tiene más de 10 000 bloques u ocupa más de 50 MB. Elimina los bloques que sobran.
• «La app se abre con la pantalla de inicio, así que no puede convertirse en ventana modal». Primero haz que otra pantalla sea la inicial.
• «Los archivos de este tipo (…) no se pueden usar en la app». En la pantalla hay un archivo de un tipo no permitido, por ejemplo SVG. Sustitúyelo por una imagen JPEG, PNG, GIF, WebP o AVIF.
• «Error de validación. Consulta los detalles en el formulario de edición del elemento». Uno de los campos está mal rellenado: aparece resaltado en la configuración del elemento.