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)
- Cómo añadir lógica básica usando 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 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 para recorrer todas las herramientas principales del App Editor.
El App Editor te permite construir aplicaciones para operadores sin escribir ningún código.
Esto es lo que parece:
En el editor de aplicaciones, puede crear una serie de pasos que digitalicen elementos visuales 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 construyes y editas tu aplicación. El siguiente diagrama muestra las diferentes partes que componen el editor de apps:
- Añadir Paso/Grupo de Pasos - Añade un nuevo Paso o Grupo de Pasos
- Panel de Pasos/Registros - Vea sus pasos a través de la pestaña de pasos o cambie a la pestaña de registros para ver las Tablas utilizadas
- Espacio de Trabajo - El espacio para crear la interfaz de su aplicación
- Añadir un Widget de Activo - Añade una forma, icono o logo 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ñada un campo de entrada a su aplicación.
- Añadir un widget de texto: añada un cuadro de texto a su aplicación.
- Incrustar un widget - Incruste una variedad de widgets, como imágenes, análisis, atributos de máquina, etc.
- Añadir un widget de cámara - Añade una cámara normal o una instantánea de cámara de código de barras
- Traducir - Tulip Player traducirá automáticamente la aplicación al idioma 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 a través del modo desarrollador
- Ejecutar - Ejecuta tu aplicación en Tulip Player
- Publicar - Publica tu aplicación
- Adelante/Atrás - Mueve un elemento dentro del espacio de trabajo hacia adelante o detrás de otros elementos
- Panel lateral - Establece activadores y componentes estilísticos en la pestaña Widget, la pestaña Step y la pestaña App.
Con la herramienta de panorámica y zoom puede
- Mover la superficie de edición de su aplicación
- Acercar o Alejar el zoom
La Lista de Pasos a la izquierda muestra la lista de pasos incluyendo el Diseño Base.
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 en un solo paso "desbloqueando" elementos individuales en el panel contextual de la derecha.
Obtenga más información sobre los diseños base aquí.
Pasos
Puede hacer clic en un paso para ver los elementos que contiene.
Haga clic con el botón derecho en un paso para duplicarlo, agrupar pasos o eliminarlo.
Más información sobre los pasos aquí.
Barra de herramientas
La barra de herramientas 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 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 el Tulip App Editor.
Panel de contexto
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
Pestaña Paso
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
La pestaña App:
- Le permite imprimir los pasos de la aplicación
- Le permite ajustar el temporizador del ciclo para toda la app
- 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 que usted desea.
- 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
Pestaña Widget
Al hacer clic en un elemento de la aplicación se abrirá otra pestaña en el panel lateral llamada Pestaña de widgets. Aquí es donde puede ajustar el formato de los distintos elementos visuales de la aplicación, así como su comportamiento cuando se interactúa con ellos.
Añadir lógica a una aplicación
La lógica determina lo que sucede en la aplicación cuando el operador interactúa con ella. Para empezar, vamos a utilizar un simple botón con un Trigger para navegar de un paso a otro.
- Haga clic en Botones de la barra de herramientas y seleccione Botón.
- 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.
{Altura="" Ancho "300"}
- Para añadir lógica al botón, haga clic en + junto a Activadores en el panel lateral.
Los Triggers te permiten añadir lógica a tus aplicaciones sin tener que usar ningún código. Los disparadores utilizan una secuencia when, if, then, else.
El trigger que construiremos 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.
- Haga clic en Guardar.
Este botón mueve al usuario al siguiente Paso. Normalmente también querrá 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 Probar en la parte superior derecha. Esto lanzará tu aplicación en Modo Desarrollador, para que puedas probar la aplicación.
Completar una aplicación y registrar datos
Haz clic en el 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.
- Seleccione el último paso de su aplicación.
- Haga clic en Botones y seleccione Completar.
- Arrastre el nuevo botón a la posición deseada.
Lecturas Adicionales
Utiliza estas guías paso a paso para crear una aplicación completa utilizando estos conceptos:
¿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.