En este artículo aprenderás:
- Las diferentes partes del editor de aplicaciones de Tulip
- Los elementos visuales básicos que puedes añadir a una aplicación (también llamados «widgets»)
- Cómo añadir lógica básica mediante botones
- Cómo completar una aplicación para registrar datos
This topic is featured in the Introduction to app building course in Tulip University.
Si aún te estás familiarizando con el Editor de aplicaciones de Tulip, este artículo es para ti. Utilizaremos el ejemplo de una aplicación de instrucciones de trabajo para repasar todas las herramientas principales del Editor de aplicaciones.
El Editor de aplicaciones te permite crear aplicaciones para operadores sin necesidad de escribir código.
Este es su aspecto:
En el editor de aplicaciones, puedes crear una serie de pasos que representan los elementos visuales digitales de un proceso.
Vídeo de introducción
We're constantly improving the applications that come in new instances. If you joined Tulip recently, the apps in your instance might look different than what you see in images in this article. No worries, the ideas are the still same even if the content is a little different.
Desglose del editor de aplicaciones
El Editor de aplicaciones es donde se crea y se edita la aplicación. El siguiente diagrama muestra las diferentes partes que componen el Editor de aplicaciones:
- Añadir paso/grupo de pasos: añade un nuevo paso o grupo de pasos
- Panel de pasos/registros: visualiza tus pasos en la pestaña «Pasos» o cambia a la pestaña «Registros» para ver las tablas utilizadas
- Área de trabajo: el espacio para crear la interfaz de tu aplicación
- Añadir un widget de recurso: añade una forma, un icono o un logotipo a tu aplicación
- Añadir un widget de botón: añade un botón a tu aplicación
- Añadir un widget de entrada: añade un campo de entrada a tu aplicación
- Añadir un widget de texto: añade un cuadro de texto a tu aplicación
- Incrustar un widget: incrusta diversos widgets, como imágenes, análisis, atributos de la máquina y mucho más
- Añadir un widget de cámara: añade una instantánea tomada con una cámara normal o con una cámara de códigos de barras
- Traducir: Tulip Player traducirá automáticamente la aplicación al idioma que hayas seleccionado a través de tu perfil de Tulip
- Crear instantánea: guarda una versión actual de tu aplicación, creando un duplicado
- Probar: prueba tu aplicación mediante el modo de desarrollador
- Ejecutar: ejecuta tu aplicación en el Tulip Player
- Publicar: publica tu aplicación
- Adelante/Atrás: desplaza un elemento dentro del espacio de trabajo hacia delante o detrás de otros elementos
- Panel lateral: configura los desencadenantes y los componentes de estilo en las pestañas «Widget», «Paso» y «Aplicación».
Con la herramienta de desplazamiento y zoom puedes:
- Mover el área de edición de tu aplicación
- Acercarte o alejar la imagen
La lista de pasos de la izquierda muestra la lista de pasos, incluido el diseño base.
Diseño base
Cualquier cambio de formato o de diseño que realices en el diseño base se aplicará automáticamente a cada paso individual de la aplicación.
Puedes modificar el diseño base de un paso concreto «desbloqueando» elementos individuales en el panel de contexto de la derecha.
Más información sobre los diseños base aquí.
Pasos
Puedes hacer clic en un paso para ver los elementos que contiene.
Haz clic con el botón derecho del ratón en un paso para duplicarlo, agrupar pasos o eliminarlo.
Más información sobre los pasos aquí.
Barra de herramientas
La barra de herramientas situada en la parte superior de la pantalla incluye elementos visuales que se pueden añadir 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 en él y arrastrarlo hasta la ubicación deseada.
En la parte derecha de la barra de herramientas hay herramientas adicionales que puedes utilizar para organizar los objetos en capas en el editor de la aplicación Tulip.
Panel de contexto
El panel de contexto, situado en la parte derecha de la pantalla, es donde se gestiona todo el formato y la lógica de la aplicación. Obtén más información sobre la configuración de los widgets aquí.
Hay tres pestañas:
- Pestaña «Paso»
- Pestaña «App»
- Pestaña «Widget»
Pestaña «Paso»
La pestaña «Paso » te muestra:
- Opciones de formato para todo el paso
- Permite especificar el tiempo de ciclo objetivo para este paso
- Le permite restablecer la disposición especificada en la «Disposición base»
- Te permite eliminar el paso actual
- Te permite crear una lógica que se ejecutará cada vez que se abra o se cierre este paso; hablaremos más sobre los «desencadenantes» un poco más adelante.
Pestaña «App»
La pestaña «App»:
- Te permite imprimir los pasos de la aplicación
- Te permite ajustar el temporizador de ciclo para toda la aplicación
- Muestra una lista de todas las variables asociadas a esta aplicación
- Te permite especificar la resolución de la aplicación para que se adapte a la interfaz deseada.
- Te permite añadir comentarios si varios administradores están revisando los cambios
- Te permite crear una lógica que se ejecutará cada vez que esta aplicación se inicie, se complete o se cancele
Pestaña «Widget»
Al hacer clic en un elemento de la aplicación, aparecerá otra pestaña en el panel lateral denominada «Pestaña de widgets». Aquí es donde puedes ajustar el formato de los distintos elementos visuales de la aplicación, así como su comportamiento al interactuar con ellos.
Añadir lógica a una aplicación
La lógica determina lo que ocurre en la aplicación cuando el operador interactúa con ella. Para empezar, utilicemos un botón sencillo con un «Desencadenante» para navegar de un paso a otro.
- Haz clic en «Botones » en la barra de herramientas y selecciona «Botón».
- Arrastra el botón a la ubicación que desees.
- Añade una etiqueta al botón y ajusta las opciones de formato y color mediante el panel contextual situado a la derecha.
- Para añadir lógica al botón, haz clic en el signo «+» situado junto a «Desencadenantes» en el panel lateral.
Los «Desencadenantes» te permiten añadir lógica a tus aplicaciones sin necesidad de utilizar código. Los «Desencadenantes» utilizan una secuencia «cuando, si, entonces, si no ».
El desencadenador que vamos a crear aquí tiene la siguiente lógica:
Cuando: Se pulsa el botón
Entonces: La hora actual se guarda en una variable
Transición: Ir al paso → Siguiente.
- Haz clic en «Guardar».
Este botón lleva al usuario al siguiente paso. Lo habitual es añadir también un botón que permita a los usuarios volver al paso anterior.
Una vez que hayas creado la lógica básica de la aplicación, puedes hacer clic en «Probar» en la esquina superior derecha. Esto iniciará tu aplicación en modo desarrollador, para que puedas probarla.
Finaliza una aplicación y registra los datos
Un botón «Completar» para que Tulip registre todos los datos de la aplicación asociados a cada operador.
En este ejemplo, vamos a añadir otro botón en el último paso de la aplicación.
- Selecciona el último paso de tu aplicación.
- Haz clic en «Botones» y selecciona «Finalizar».
- Arrastra el nuevo botón a la posición que desees.
Más información
Utiliza estas guías paso a paso para crear una aplicación completa utilizando estos conceptos:
¿Has encontrado lo que buscabas?
También puedes visitar community.tulip.co para publicar tu pregunta o ver si otros usuarios se han enfrentado a un problema similar.