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

Si todavía te estás familiarizando con el Tulip App Editor, este artículo es para ti. Utilizaremos un ejemplo de una aplicación de instrucciones de trabajo visuales para recorrer todas las herramientas principales del 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.

Una vista rápida del Tulip App Editor

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 modificar el diseño base dentro de cada paso "desbloqueando" elementos individuales en el panel contextual de la derecha.

{Altura="" Ancho "500"}

Usando el 'clic 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 habilidad de construir lógica que será ejecutada cada vez que este paso sea abierto o cerrado - hablaremos más acerca de Triggers un poco más adelante.

Pestaña App:

• Le permite imprimir los pasos de la aplicación
• Le permite ajustar el temporizador del ciclo para toda la aplicación.
• Muestra una lista de todas las variables asociadas con 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 lateral llamada Widget Tab. Aquí es donde puede ajustar el formato de los distintos elementos visuales de la aplicación, junto con su comportamiento cuando se interactúa con ellos.

Usando 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 aplicación Tulip, haz clic en la opción Añadir Paso en la parte izquierda del Editor de Aplicaciones. El diseño del nuevo paso reflejará el Diseño Base.

Pro-tip: 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 del engranaje y seleccionando "Duplicar Paso".

Añadir lógica a tu aplicación

Ahora que hemos cubierto cómo añadir nuevos Pasos, necesitamos dar a los operadores una forma de moverse 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 para el botón y ajuste las opciones de formato/color utilizando el panel contextual de la derecha.

{Altura="" Ancho "300"}

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

{Altura="" Ancho "300"}

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 Disparadores que se abre después de hacer clic en el signo "+".

Una Acción o una Transición es un cambio que ocurrirá en la aplicación cuando se dispare el Disparador.

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

Este disparador es simple:

Cuando: El botón es presionado

Entonces: La hora actual se guarda en una variable

Y luego: Ir al Paso → Siguiente.

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

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

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

• Crear una Tulip App
• 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 otros se han enfrentado a una pregunta similar.