Creación de aplicaciones

Construir una aplicación en Tulip puede parecer intimidante al principio, pero una vez que se desglosan y entienden los elementos básicos para ello, no es tan complicado. Las aplicaciones combinan los siguientes principios para crear una nueva pieza de software: Diseño de interfaz de usuario, lógica condicional y funciones, datos y bases de datos, análisis y conexiones a otros sistemas, dispositivos y máquinas. En esta guía, discutiremos los conceptos clave y las herramientas de interfaz que necesitas para construir aplicaciones con éxito. Recuerda que Tulip es una plataforma sin código, por lo que nos centraremos en las características que necesitas para diseñar aplicaciones listas para producción, independientemente de tu experiencia en codificación.

Vamos a empezar por ir a través de la interfaz principal para ver tus aplicaciones.

Creación y organización de aplicaciones

Para ver todas las aplicaciones en tu instancia, navega a la página de aplicaciones en tu instancia de Tulip: [tu-instancia].tulip.co/group. También puedes situarte sobre la pestaña Apps en la barra de navegación superior y hacer clic en Apps.

Esta página es donde puedes ver las aplicaciones que has creado en tu instancia, separadas en Grupos de aplicaciones, carpetas para organizar una colección de aplicaciones. También puede ver cada aplicación dentro de los grupos de aplicaciones y otras carpetas, como aplicaciones recientes y favoritas, en el panel de navegación de la izquierda.

Selecciona una aplicación existente dentro de un grupo para ver y editar su información. También puedes ver cualquiera de los siguientes datos de la aplicación:

• Pasos
• Análisis
• Versiones
• Finalizaciones
• Permissions
• {{glosario.Aprobación}}s

Para editar la aplicación, haga clic en el botón azul "Editar" en la esquina superior derecha o haga clic directamente en un paso.

Para crear una nueva aplicación, vaya a la pantalla Aplicaciones y haga clic en el botón azul "Crear aplicación" situado en la esquina superior derecha. También puede hacer clic en la flecha pequeña situada junto al botón para crear un nuevo grupo de aplicaciones.

Seleccione una plantilla en blanco o una aplicación destacada prediseñada y haga clic en "Crear" en la parte inferior izquierda de la ventana. Estas plantillas destacadas fueron diseñadas por otros usuarios de Tulip para que otros tengan soluciones rápidas a los problemas si no quieren crear una aplicación desde cero. También puedes editar estas plantillas para adaptarlas a tus necesidades.

Una vez redirigido a la pantalla de información de la aplicación, ponle un nombre y una descripción. Etiquetar esta información es útil para que puedas hacer un seguimiento de la aplicación independientemente de la fase del proceso en la que te encuentres.

Haz clic en el botón azul "Editar" de la esquina superior derecha para acceder a la interfaz del Editor de aplicaciones.

Editor de aplicaciones

El Editor de aplicaciones es el lugar donde se construye y edita la aplicación. El siguiente diagrama muestra las diferentes partes que componen el editor de aplicaciones:

1. Añadir Paso/Grupo de Pasos - Añade un nuevo Paso o Grupo de Pasos
2. 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
3. Espacio de Trabajo - El espacio para crear la interfaz de tu app
4. Añadir un Widget de Activo - Añade una forma, icono o logo a tu aplicación
5. Añadir un widget de botón - Añade un botón a tu aplicación
6. Añadir un widget de entrada: añada un campo de entrada a su aplicación.
7. Añadir un widget de texto: añada un cuadro de texto a su aplicación.
8. Incrustar un widget - Incruste una variedad de widgets, como imágenes, análisis, atributos de máquina, etc.
9. 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
10. Traducir - Tulip Player traducirá automáticamente la aplicación al idioma seleccionado a través de tu perfil Tulip.
11. Crear instantánea - Guarda una versión actual de tu aplicación, creando un duplicado para que puedas probar varias versiones sin riesgo de error.
12. Probar - Prueba tu aplicación a través del modo desarrollador
13. Ejecutar - Ejecuta tu aplicación en Tulip Player
14. Publicar - Publica tu aplicación
15. Adelante/Atrás - Mueve un elemento dentro del espacio de trabajo hacia adelante o detrás de otros elementos
16. Trigger Panel - Configura Triggers, elementos estilísticos e información a nivel de app

Para una visión en profundidad del editor de aplicaciones, visita Introducción a Tulip App Editor.

Pasos

Los pasos son las "páginas" de tu app, las distintas pantallas que muestran contenido. Para añadir un paso, haz clic en el botón "Añadir paso", que muestra cuatro opciones:

• Pasos - Un paso normal que se puede personalizar según sus necesidades o mediante el uso de widgets.
• Pasos de Formulario y Formularios de Firma - Estas opciones han sido deshabilitadas para nuevas instancias después de la r235.
• Grupos de Pasos - Una carpeta de pasos para ayudar a organizar su aplicación y realizar operaciones masivas, como reordenar/duplicar pasos.

Los pasos pueden ser lineales o no lineales, en el sentido de que no tienen que seguirse consecutivamente en el orden en que los organices. La lógica que añadas a tu aplicación determinará la transición de los pasos.

Para una guía en profundidad sobre cómo trabajar con pasos, consulta una colección de artículos aquí: Pasos.

Diseño Base

El Diseño Base es la plantilla que se aplica a cada paso que creas. La creación de un diseño base facilita la construcción de su aplicación, con los elementos fundamentales añadidos automáticamente a cada paso, y garantiza un estilo coherente en toda la aplicación.

Para acceder al diseño base, haz clic en el botón "Diseño base" situado en la parte inferior del panel de pasos/registros.

En el diseño base, todo lo que coloques en el espacio de trabajo aparecerá en todos tus pasos. Este proceso hace que sea rápido y fácil de configurar el diseño de su aplicación, eliminando la tarea de construir individualmente cada paso desde cero.

Para obtener una guía detallada sobre la creación de un diseño base, consulta Cómo utilizar el diseño base.

Widgets

Los widgets son los componentes básicos de las aplicaciones. Pueden mostrar información, recopilar datos, ejecutar lógica de activación y mucho más.

Widgets de iconos

Coloque formas, iconos o logotipos en el espacio de trabajo y configure la lógica para diseñar el aspecto y la marca de su aplicación.

Widgets de botones

Elija entre una variedad de botones, con lógica preprogramada o personalizados en blanco, para utilizarlos en su aplicación.

Más información sobre los widgets de botones aquí.

Widgets de entrada

Recoge datos de los usuarios de la aplicación con Input Widgets, con cada tipo de entrada representando una variable diferente de datos.

Más información sobre los widgets de entrada aquí.

Widget de texto

Muestra texto estático o dinámico, incluidos los valores de las variables, texto estático sin formato y marcadores de posición de registro completos.

Widgets incrustados

Incruste vídeos, imágenes, CAD, documentos, escáneres de códigos de barras y mucho más en su aplicación.

Lea más sobre widgets incrustados aquí.

Widgets de cámara

Muestre la imagen de su cámara Tulip Vision o escanee un código de barras con la cámara de su dispositivo.

Lea más sobre los widgets de cámara aquí.

Widgets personalizados

Si ninguno de los widgets anteriores se adapta a tus necesidades, puedes crear tu propio widget utilizando HTML, CSS y Javascript para ampliar las capacidades de la plataforma.

Más información sobre widgets personalizados aquí.

Activadores

Los disparadores te permiten añadir lógica a tu aplicación.

Sin disparadores, tu aplicación es una pantalla plana; los disparadores hacen que tu aplicación haga algo. Los activadores pueden añadirse a los widgets, así como a los pasos (activadores de nivel de paso) y a las aplicaciones (activadores de nivel de aplicación), y a determinados eventos como el disparo de un dispositivo. Para un widget, seleccione aquel al que desee añadir un activador y, en el Panel de activadores, haga clic en el signo más situado junto a "Activador".

Para añadir un activador a un paso, asegúrate de que estás en el paso al que quieres añadir un activador. Vaya a la pestaña Paso del Panel de activadores y seleccione uno de la lista de opciones haciendo clic en el signo más.

Todos los disparadores siguen el mismo formato básico: cuando ocurre una acción, entonces realiza la siguiente Acción y/o Transición. Los disparadores pueden ser tan simples o complicados como necesites, teniendo la posibilidad de añadir múltiples acciones. También puedes añadir sentencias If, que añaden una condición a la acción que se realiza, si se cumple el criterio.

Con una sentencia If, usted establece las condiciones que permiten que las acciones sigan.

Las sentenciasIf son una acción o una transición. Una acción es un cambio en la aplicación que no está relacionado con el cambio de los pasos. Una transición es un cambio en los pasos o la finalización de la aplicación.

Finalmente, para coincidir con las sentencias if, hay sentencias else if que determinan la acción alternativa a tomar cuando la sentencia if resulta falsa.

Para obtener una guía más detallada sobre los disparadores, consulte Disparadores.

Variables

Las variables son tipos de datos almacenados en Tulip Cloud que se utilizan al crear tablas y análisis. Hay muchos tipos de datos en Tulip, cada uno con su propio propósito:

• Boolean - Si/no
• Color - Color dinámico para establecer el estado del widget
• Datetime - Fecha y hora
• Archivo - Enlace a un archivo almacenado en Tulip
• Imagen - Enlace a una imagen almacenada en Tulip
• Entero - Un número entero
• Intervalo - Cantidad de tiempo mostrada en segundos
• Máquina - Objeto máquina en Tulip
• Número - Un número real
• Objeto - Estructura de objeto configurable con atributos hijos que tienen su propio tipo de datos
• Estación - Objeto Estación en Tulipán de la planta de producción
• Texto - Secuencia de caracteres
• Usuario - Objeto de usuario en Tulip desde la configuración de Cuenta/Workspace

Para añadir una variable en su aplicación, vaya a la pestaña Aplicación en el Panel de Activadores y seleccione la X junto a "Variables".

Se abrirá la ventana de variables, mostrando todas las variables utilizadas en tu app. Para crear una nueva variable, haz clic en el botón azul "Crear variable" en la esquina superior derecha.

En el cuadro emergente, introduce el nombre de la variable y el tipo de datos, y activa dos interruptores: si la variable se borra o no al finalizar la aplicación y si la variable se puede guardar o no para su análisis.

Una vez creada la variable, aparecerá en la ventana de variables.

También puede crear variables desde el editor de disparadores. Por ejemplo, si desea crear una nueva entrada al hacer clic en un botón Enviar, haga clic en el botón al que desea añadir el activador y abra el editor de activadores.

Añada una nueva acción que siga la lógica anterior, asigne un nombre a su variable para poder identificarla y seleccione la tabla en la que desea que escriba. Esto crea un registro a través de una variable que se guarda en la tabla designada. Aprenderemos más sobre tablas en otra guía, por ahora sólo recuerda que las tablas guardan datos.

Para aprender más sobre variables, ver Variables.

Construye una aplicación con Tulip

Construye una sencilla aplicación Hello World con un miembro de Tulip. Este curso también se ofrece a través de Tulip University.

Mejores prácticas de diseño de interfaz de usuario

Al diseñar tu aplicación, la navegabilidad y la accesibilidad son dos nociones importantes a tener en cuenta. Es importante que los usuarios de tu aplicación puedan navegar por ella sin perderse y que los widgets interactivos sean claros en su uso. Si eres nuevo en la creación de aplicaciones, puede que te preguntes cómo puedes optimizar tu interfaz de usuario para que sea usable. Para obtener guías sobre el diseño de interfaces de aplicaciones, consulta Diseño de aplicaciones.

Recursos adicionales

Tulip University

Tulip University es un recurso gratuito y bajo demanda para aprender Tulip. Tulip University contiene docenas de cursos, certificaciones y desafíos de creación de aplicaciones para ayudarle a llevar su creación de aplicaciones al siguiente nivel. Da tus primeros pasos inscribiéndote en Tulip Essentials, practica tus habilidades con Tulip Challenges, y comparte tus logros convirtiéndote en un Tulip Certified App Builder.

Biblioteca Tulip

Tulip Library es una colección de contenido listo para usar desarrollado por expertos de Tulip. Encontrarás un montón de contenido para ponerte en marcha, que van desde aplicaciones completas y suites de aplicaciones a plantillas, widgets personalizados y conectores.

Comunidad Tulipán

¿Tienes preguntas pero no puedes encontrar la respuesta en la Base de Conocimientos o en la Universidad? ¿Tienes una idea para una función que te haría la vida 100 veces más fácil? ¿Necesitas una manera de mantenerte al día con lo último y lo mejor en el Tuliverse? Echa un vistazo a la Comunidad Tulipán.

Tulip Community es un foro activo en línea para que los usuarios publiquen preguntas, tengan discusiones y se ayuden mutuamente a utilizar Tulip para resolver sus problemas.