Introducción a Tulip App Editor

Propósito

En este artículo aprenderás:

• Las diferentes partes del Tulip App Editor
• Elementos visuales básicos que puedes añadir a una app (también llamados Widgets)
• Como añadir lógica básica usando Botones
• Cómo completar tu app para registrar datos

:::(Info) (Nota:) Este tema aparece en el curso"Introducción a la construcción de Apps" en Tulip University :::

Si todavía te estás familiarizando con el Tulip App Editor, este artículo es para ti. Vamos a utilizar un ejemplo de una aplicación de instrucciones de trabajo visual para caminar a través de todas las herramientas principales en el App Editor.

Antes de empezar, un breve recordatorio: El App Editor le permite crear aplicaciones para operadores sin escribir ningún código.

Esto es lo que parece:

El App Editor le permite crear una serie de Pasos, o pantallas que los operadores pueden utilizar dentro de una aplicación. Los Pasos también se pueden organizar en Grupos de Pasos para una mejor usabilidad.

:::(Warning) (NOTA:) Estamos constantemente mejorando las aplicaciones que vienen en nuevas instancias. Si te uniste a Tulip recientemente, las aplicaciones en tu instancia pueden ser diferentes de lo que ves en las imágenes de este artículo. No te preocupes. Las ideas son las mismas aunque el contenido sea un poco diferente. :::

Una vista rápida del editor de aplicaciones de Tulip

La Lista de Pasos a la izquierda muestra la lista de pasos incluyendo el Diseño Base.

Cualquier edición de formato o diseño que realices en el diseño base se aplicará automáticamente a cada paso individual de la aplicación.

Puede alterar el Diseño Base dentro de cada Paso "desbloqueando" elementos individuales en el Panel Contextual de la derecha.

Haciendo "clic con el botón derecho" puede Duplicar, Agrupar Pasos o Eliminar.

Puede hacer clic en un paso para ver los elementos que contiene.

La Barra de Herramientas en la parte superior de la pantalla incluye elementos visuales que pueden ser añadidos a la aplicación. Se trata de elementos como formas, fotos, texto, vídeos y botones. Para añadir un nuevo elemento visual a la aplicación, basta con hacer clic y arrastrarlo a la ubicación deseada.

En la parte derecha de la barra de herramientas hay herramientas adicionales que puedes utilizar para superponer los objetos en Tulip App Editor.

El panel de contexto en el lado derecho de la pantalla es donde se maneja todo el formato y la lógica de la aplicación. Lee más sobre la configuración de Widgets aquí.

Hay tres pestañas:

• Pestaña Paso
• Pestaña App
• Pestaña Widget

La pestaña Paso le muestra:

• Opciones de formato para todo el Paso
• Le permite especificar el tiempo de ciclo objetivo para este paso
• Le permite restablecer el diseño especificado en el diseño base.
• Le permite borrar el paso actual
• Le da la posibilidad de construir la lógica que se ejecutará cada vez que este paso se abra o se cierre - hablaremos más sobre los Disparadores un poco más adelante.

La pestaña App:

• Le permite imprimir los pasos en la aplicación
• Le permite ajustar el temporizador de ciclo para toda la aplicación.
• Muestra una lista de todas las variables asociadas a esta aplicación.
• Le permite especificar la resolución de la app para que se ajuste a la interfaz deseada.
• Le permite añadir comentarios si varios administradores están revisando los cambios
• Le da la posibilidad de construir la lógica que se ejecutará cada vez que esta app se inicie, finalice o cancele

Al hacer clic en un elemento de la aplicación se abrirá otra pestaña en el panel contextual llamada Pestaña de widgets. Aquí es donde puede ajustar el formato de los diversos elementos visuales de la aplicación, junto con su comportamiento cuando se interactúa con ellos.

Con la herramienta de panorámica y zoom puedes

• Mover la superficie de edición de tu aplicación
• Acercar o Alejar el zoom

Añadir pasos a su aplicación

Para crear un nuevo paso en una Tulip App, haz clic en la opción Añadir Paso en la parte izquierda del Editor de Apps. El diseño del nuevo paso reflejará el diseño base.

Consejo: también puedes duplicar un paso existente si quieres reutilizar el diseño o la lógica en tu nuevo paso haciendo clic en el icono de engranaje y seleccionando "Duplicar paso".

Añadir lógica a su aplicación

Ahora que hemos cubierto cómo añadir nuevos pasos, tenemos que dar a los operadores una manera de pasar de un paso a otro. Podemos crear esta lógica en Tulip usando Triggers. Para empezar, vamos a utilizar un simple botón para navegar de un paso a otro.

Puedes añadir un botón personalizado seleccionando "Botón" de la Barra de Herramientas en la parte superior del Editor de Aplicaciones. Arrastre el botón a la ubicación deseada.

Añada una etiqueta al botón y ajuste las opciones de formato/color utilizando el panel contextual de la derecha.

Para añadir lógica al botón, haga clic en el signo "+" situado junto a Activadores en el Panel contextual.

Los disparadores le permiten añadir lógica a sus aplicaciones sin tener que utilizar ningún código utilizando una simple secuencia when, if, then, else. Este es el Editor de Activadores que se abre al hacer clic en el signo "+".

Una Acción o una Transición es un cambio que se producirá en la aplicación cuando se active el Activador.

Hay muchas acciones y transiciones que se pueden realizar cuando se pulsa el botón.

Este disparador es simple:

Cuando Se pulsa el botón

Entonces: La hora actual se guarda en una variable

Y luego: Ir al Paso → Siguiente.

Este botón permite pasar al siguiente Paso. Normalmente, también querrás añadir un botón que permita a los usuarios navegar al paso anterior.

Una vez que haya construido la lógica básica de la aplicación, puede hacer clic en la opción Ejecutar o Probar en la parte superior derecha del Editor de Aplicaciones. Esto lanzará su aplicación en el TTulip Player y le permitirá probar la aplicación en su ordenador en tiempo real.

Completando tu App para registrar los datos

Necesitas añadir un botón Completar para que Tulip registre todos los datos del uso de la aplicación por parte del operador.

En este ejemplo, vamos a añadir otro botón en el último paso de la aplicación para registrar una finalización.

Haga clic en la opción "Botones" de la barra de herramientas y elija el botón Completar. Arrástralo al último paso de tu app.

¡Enhorabuena! Eso es todo lo que necesitas saber para construir una sencilla aplicación de instrucciones de trabajo.

Lecturas Adicionales

Utilice estas guías paso a paso para crear una aplicación completa utilizando estos conceptos.

• Crear una aplicación Tulipán
• Crear una aplicación completa de informes de defectos
• Construir una app que capture datos de órdenes de trabajo

¿Has encontrado lo que buscabas?

También puedes dirigirte a community.tulip.co para publicar tu pregunta o ver si otras personas se han enfrentado a una pregunta similar.