Empezar con la creación de aplicaciones

Bienvenido a Tulip

Este artículo le guiará a través de la experiencia de incorporación y compartirá recursos para ayudarle a moverse rápidamente.

¡Bienvenido a Tulip!

Tulip es una plataforma sin código construida para las necesidades únicas de las operaciones de primera línea. Con Tulip, puedes diseñar soluciones robustas y componibles para tus retos de producción más difíciles. Esta guía se centrará en los fundamentos de la plataforma Tulip. Revisaremos las características clave, las ubicaciones y los conceptos, y construiremos juntos una sencilla aplicación "Hello World".

:::(Información)(NOTA:)
Este artículo asume que tienes acceso a una instancia de Tulip. Si no lo tienes, puedes obtener acceso iniciando una prueba gratuita{target="_blank"}, o poniéndote en contacto con la persona o grupo que gestiona el acceso a Tulip para tu organización.
:::

Recursos para ayudarle a aprender

Antes de seguir adelante, vamos a introducir algunos recursos clave que puede utilizar como usted se familiarice con Tulip.

Base deconocimientos{target="_blank"}

La Base de Conocimientos es una colección de artículos, videos y documentación para ayudarte a aprender a usar Tulip. Si estás leyendo este artículo, ya la has encontrado. Muy bien.

Sigue la estructura de archivos en la navegación de la izquierda, o utiliza la barra de búsqueda para buscar contenido relacionado con cualquier tema sobre el que necesites más información.

TulipUniversity{target="_blank"}

Tulip University es un recurso gratuito y a la carta para aprender Tulip. Tulip University contiene docenas de cursos, certificaciones y desafíos de construcción de aplicaciones para ayudarte a llevar tu construcción de aplicaciones al siguiente nivel. Da tus primeros pasos inscribiéndote en Tulip Essentials{target="_blank"}, practica tus habilidades con Tulip Challenges, y comparte tus logros convirtiéndote en un Tulip Certified App Builder{target="_blank"}.

Biblioteca{target="_blank"}

La biblioteca de Tulip es una colección de contenido listo para usar desarrollado por expertos de Tulip. Encontrarás mucho contenido para ponerte en marcha, desde aplicaciones completas y suites de aplicaciones hasta plantillas, widgets personalizados y conectores.

Comunidad{target="_blank"}

¿Tienes preguntas pero no encuentras 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 del Tuliverso? 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 usar Tulip para resolver sus problemas.

Orientarnos - Un rápido recorrido por tu instancia

Comencemos haciendo un rápido recorrido por tu instancia. Para los propósitos de esta visión general, hay 5 lugares clave que debes saber cómo encontrar en Tulip.

• Aplicaciones y el Editor de Aplicaciones
• Tablas
• Piso de la tienda
• Cuadros de mando
• Configuración de la cuenta

Podemos ver cada una de ellas por separado.

Aplicaciones y el editor de aplicaciones

Página de aplicaciones

Cuando acceda a su cuenta, se encontrará en la pantalla de inicio de las aplicaciones. Aquí puede ver y gestionar todas las aplicaciones de su instancia.

Para encontrar esta página, pasa el ratón por encima de "Apps" en la navegación superior y haz clic en "Apps" en el menú desplegable.

Pantalla de inicio de aplicaciones y editor de aplicaciones

El editor de aplicaciones es el lugar donde harás el trabajo de crear aplicaciones. Para llegar al editor de aplicaciones, puedes seleccionar una aplicación existente o crear una nueva. Haga clic en su aplicación. Desde esta pantalla puede ver los datos de finalización de la aplicación, gestionar los {{glossary.Permission}} y {{glossary.Approval}} de la aplicación, y publicar una versión de su aplicación.

Haga clic en cualquier paso de este menú y accederá al editor de aplicaciones.

Ahora que estamos aquí, vamos a hacer un balance de lo que estamos viendo. Hay algunas áreas clave con las que te encontrarás trabajando.

:::(Información)(NOTA:)
Para un recorrido en profundidad por el editor de la aplicación, echa un vistazo a este artículo
:::

Revisemos 4 herramientas clave en el Editor de aplicaciones:

• Interfaz de arrastrar y soltar
• Barra de herramientas
• Panel contextual
• Panel de pasos y grabaciones

Interfaz de arrastrar y soltar

En el centro de la pantalla, tiene su interfaz de arrastrar y soltar, su pizarra en blanco.

Aquí es donde diseñará una interfaz de usuario. Aquí incrustará widgets, creará elementos interactivos y organizará toda la información y las características que un usuario necesitará para interactuar con su aplicación.

Barra de herramientas

Encima de tu lienzo, verás una serie de menús desplegables a los que nos referimos como la barra de herramientas. Utiliza estos menús para añadir texto, entradas y otros Widgets a tu aplicación.

Panel Contextual

A la derecha, encontrará el Panel de Contexto, donde configurará los detalles de la aplicación, el paso y el widget. Aquí podrás añadir lógica a las aplicaciones, gestionar los ajustes de diseño a nivel de aplicación y ajustar los widgets que añadas a tu aplicación.

Panel de pasos y registros

Por último, en el panel de la izquierda añadirás nuevos pasos a tu aplicación y gestionarás las tablas a las que se conecta tu aplicación.

Tablas

Las tablas son bases de datos personalizadas que construyes para almacenar los datos recogidos por tus aplicaciones.

Las tablas son un punto intermedio entre las herramientas de hoja de cálculo como Excel y las bases de datos relacionales completas, permitiéndote construir un modelo de datos tan simple o complejo como te sientas cómodo trabajando con él.

:::(Información)(NOTA:)
Para una rápida visión general de la construcción de aplicaciones con tablas, pruebe el curso"Construir una aplicación de entrada de datos simple{target="_blank"}" en la Universidad. Las tablas también se tratan ampliamente en la Base de conocimientos{target="_blank"}.
:::

Para encontrar las tablas, ve a la pestaña "Aplicaciones" en la navegación superior y selecciona "Tablas" en el menú desplegable.

En la pantalla de inicio de Tablas, tendrás la opción de ver una tabla existente o de crear una nueva.

Tienda

La pestaña "Shop Floor" se utiliza para gestionar las estaciones y los dispositivos físicos asociados a su instancia de Tulipán. Bajo la pestaña Shop Floor, encontrarás opciones para crear y gestionar estaciones, gestionar Edge Devices, máquinas y Tulip Vision.

Por ahora, vamos a centrarnos en "Estaciones". Cuando haga clic en "Estaciones", accederá a una página en la que podrá crear estaciones y asignarles aplicaciones, un paso fundamental en el flujo de trabajo de la publicación.

:::(Información)(NOTA:)
Puede obtener más información sobre las estaciones en la Base de conocimientos y en Tulip University{target="_blank"}
:::

Interactuará mucho más con esta página cuando se prepare para pasar sus aplicaciones terminadas a producción.

Cuadros de mando

A medida que empiece a crear análisis, éstos aparecerán en la sección "Dashboards" de su instancia. Acceda a esta sección haciendo clic en la opción "Cuadros de mando" del menú superior.

Puedes pensar en los cuadros de mando como colecciones de analíticas. Puede organizar sus cuadros de mando según la lógica que desee.

Es importante destacar que los cuadros de mando se pueden exportar como una URL y compartir con cualquier persona, independientemente de si tienen una cuenta de Tulip.

Esto le permite compartir sus resultados y métricas con cualquier persona de su organización.

Configuración de la cuenta

Puedes acceder a la configuración de tu cuenta haciendo clic en el icono de la esquina superior derecha de tu instancia de Tulip. Las opciones a las que puede acceder aquí variarán en función de sus niveles de permiso.

Tulip Player

Una de las partes más importantes de Tulip, el Tulip Player, no se encuentra en tu instancia web.

El Tulip Player es una aplicación diseñada específicamente para ejecutar aplicaciones. Se puede ejecutar en muchos dispositivos en varios sistemas operativos. Lo más importante es que debe descargarse en cualquier dispositivo en el que desee ejecutar aplicaciones.

Para descargar Tulip Player sigue este enlace. Para ver las instrucciones de instalación y configuración, consulta aquí

Creación de aplicaciones

Ahora que ya puedes orientarte en tu instancia, vamos a hacer un curso intensivo de creación de aplicaciones. No hay mejor manera de hacerlo que construir una aplicación juntos. Así que abre tu instancia y construyamos juntos una aplicación "Hello World".

Creando una nueva aplicación

Lo primero que tenemos que hacer es crear una nueva aplicación. Para ello, navega a la sección "Apps" de la plataforma utilizando el menú "Apps" en la navegación superior.

Una vez allí, haz clic en "crear aplicación" en la parte superior derecha. A continuación, te aparecerá un modal que te preguntará si quieres crear una nueva aplicación o partir de una plantilla. Te animamos a que juegues con las diferentes plantillas disponibles, pero por ahora, vamos a empezar con una aplicación en blanco haciendo clic en "crear" en la parte inferior derecha del modal.

Serás dirigido a la pantalla de inicio de la aplicación, donde gestionarás la configuración de esta aplicación en adelante. Sigue adelante y nombra tu aplicación "Hello World" haciendo clic en el lápiz junto a "Untitled App" en la parte superior izquierda. A continuación, haz clic en cualquier paso y accederás al editor de aplicaciones.

Construir una aplicación "Hola Mundo"

Podemos dividir el proceso de construcción de la aplicación en unos pocos pasos clave que replicarás en diferentes niveles de escala y complejidad a lo largo de tu viaje con Tulip.

• Diseño de la interfaz de usuario
• Añadir la lógica
• Prueba de

Lo mantendremos tan simple como sea posible, y nos centraremos sólo en el diseño de una interfaz básica, añadiendo una sola línea de lógica, y probando nuestra aplicación utilizando el modo de desarrollador.

Diseñar la interfaz de usuario de una aplicación

Tu interfaz de usuario es la disposición de los elementos gráficos e interactivos en los pasos de tus aplicaciones. El diseño de una buena interfaz de usuario es esencial para permitir a sus usuarios interactuar con éxito con sus aplicaciones.

:::(Información)(NOTA:)
El diseño de la interfaz de usuario se trata en profundidad en Tulip University{target="_blank"}.
:::

Por ahora, vamos a mantener lo básico. Vamos a añadir 4 elementos a nuestra UI:

• Una forma para crear una barra de cabecera
• Una variable que muestra el nombre de la aplicación
• Un botón de menú
• Un botón que muestre el mensaje "Hello World" cuando se haga clic en él

Diseñar un diseño base

Los diseños base son patrones de diseño que se aplican a cada paso de la aplicación.

Diseñaremos nuestra interfaz de usuario como el diseño base de nuestra aplicación.

Para acceder al Diseño Base, haz clic en el texto "Diseño Base" en la parte inferior izquierda del Editor de Aplicaciones. Sabrás que estás editando el Diseño Base cuando el fondo detrás del texto esté resaltado en azul claro.

Para añadir su barra de cabecera, navegue hasta el Menú de Activos en la barra de herramientas, y seleccione la opción "rectángulo". Si no es inmediatamente visible, busque "rectángulo" utilizando la barra de búsqueda.

Cuando hagas clic en "rectángulo", verás que se ha añadido una forma al área de sandbox de tu editor de aplicaciones. Haz clic en la forma para seleccionarla. En el panel derecho, verás opciones para ajustar la configuración de tu activo. Cambia el color a gris oscuro. Ajusta la configuración del widget para que sus dimensiones sean 1920w x 100h, o simplemente arrástralo a su lugar para que abarque la parte superior de tu aplicación.

Añadir un nombre de paso a la navegación superior

Cuando un usuario accede a nuestra aplicación, queremos que ésta muestre el nombre del paso que está utilizando. En este caso, queremos que nuestra aplicación muestre "Hello World" en la barra superior que acabamos de crear.

Para ello, haz clic en el menú "Texto" de la barra de herramientas y selecciona "Variable" en el menú desplegable. También puedes utilizar el atajo de teclado y pulsar "V".

Las variables en Tulip son marcadores de posición para los valores. Cuando seleccione mostrar una variable, su aplicación mostrará cualquier valor que esté almacenado actualmente en esa variable.

Para acceder al nombre del paso, necesitamos configurar nuestra variable.

Asegúrate de que la variable incrustada está seleccionada, y navega al panel de widgets en el panel derecho. En "Datasource", seleccione "App Info". Seleccione "Step Name" en el menú desplegable "Select App Info".

Arrastre y suelte su variable en su lugar en la barra superior. Es posible que desee cambiar el color del texto para que sea más legible contra el fondo oscuro.

Como alternativa, puede añadir simplemente un "nombre de paso" desde el menú Texto de la barra de herramientas.

Lo último que debemos hacer es nombrar nuestro paso. Haz doble clic en el "Paso sin título" bajo el panel de Pasos de la izquierda y renombra tu paso como "Hola Mundo".

Añadir un botón de menú

Usando el menú "Botones" en la barra de herramientas, añade un botón de Menú a tu aplicación. Arrástrelo a su lugar en la esquina superior izquierda o derecha de su barra superior.

Es importante que un botón de menú sea accesible desde cada paso de su aplicación para que un usuario pueda cambiar, cancelar o pausar sus aplicaciones.

Añadir un botón "Hola Mundo

Usando el menú "Botones" en la barra de herramientas, añada un botón a su aplicación. Céntrelo en su diseño.

Añadiremos la lógica a este botón en la siguiente sección.

Añadir lógica a las aplicaciones

La lógica de activación es lo que hace que las aplicaciones sean inteligentes. Es lo que separa el software de presentación de diapositivas de las aplicaciones dinámicas y receptivas que construirás en Tulip.

La estructura de la lógica en Tulip

Las declaraciones lógicas en Tulip siguen el mismo patrón: Cuando → Si → Entonces.

Cuando ocurre un evento, Si se cumplen o no ciertas condiciones, Entonces la aplicación realiza una acción especificada.

El trigger de nuestra aplicación "Hola Mundo" seguirá esta misma estructura.

Cuando un usuario presiona un botón, entonces la aplicación mostrará el mensaje "Hola Mundo". No pondremos ninguna sentencia condicional en este trigger.

Dónde se añaden los triggers en Tulip

En Tulip, la lógica está asociada a los eventos. Un usuario presionando un botón, un cambio en el estado de una máquina, o el escaneo de un código de barras son todos ejemplos de eventos. Hay varios lugares comunes en los que puedes añadir disparadores en Tulip:

• A los widgets, como los botones y las tablas interactivas
• A los pasos, para acciones como "al abrir el paso" o "al cerrar el paso", o "cuando el dispositivo se dispara".
• En las aplicaciones, para acciones como "cuando se abre la aplicación".
• Construye tu primer disparador

Vamos a escribir nuestro primer disparador.

Nuestro disparador va a hacer dos cosas:

1. Almacenar una cadena de texto en una variable
2. Mostrar un mensaje que contenga esa variable

Cuando haya terminado, debería ser así:

Sigue adelante y selecciona el botón que has colocado en el centro de tu interfaz de usuario. Una vez que hayas seleccionado el widget, en el panel de contexto encuentra el pliegue etiquetado como "disparadores" y haz clic en el signo más para añadir un disparador. Esto hará que aparezca la modalidad de activación.

Dale un nombre a tu activador, algo como "Imprimir Hola Mundo".

Debido a que este disparador está unido a un botón, nuestra declaración WHEN se encarga de nosotros: CUANDO el botón es presionado.

Así que nuestra tarea es escribir nuestras declaraciones de acción, los THENs. Empecemos por almacenar una cadena de texto en una variable.

Haz clic en "Añadir nueva acción". Usando el menú desplegable, seleccione "Manipulación de datos" y luego "Almacenar". Con esta acción, tenemos que especificar qué datos queremos almacenar, y dónde. Usando el menú desplegable después de "Datos:" seleccione "valor estático", y luego "Texto". Pondremos nuestro mensaje en este valor estático. En el campo de entrada, escriba su mensaje, "Hola Mundo".

La siguiente pieza de este disparador es determinar la "ubicación:", o donde se almacenarán sus datos. Seleccione "Variable" del menú desplegable, y luego elija crear una nueva variable. Dale un nombre a tu variable, algo así como "Variable Hola Mundo", y haz clic en el check verde.

Ya está casi hecho. Lo siguiente que tenemos que hacer es mostrar nuestra variable en un mensaje. Crearemos otra acción en nuestro trigger para hacer esto.

Así que haz clic en "añadir nueva acción" y selecciona "Mostrar mensaje" en el menú desplegable. Lo último que tenemos que hacer es especificar qué datos van en nuestro Mensaje. Como ya hemos creado una variable, puedes seleccionar "Variable" en el menú desplegable, y luego seleccionar tu variable "Hola Mundo".

Guarde su activador. Ahora estás listo para probar tu aplicación.

Probando tu aplicación

En cualquier momento del proceso de diseño, puedes probar tu aplicación usando el botón "Test" a la derecha de la barra de herramientas en el editor de aplicaciones. Esto abrirá el modo de desarrollador, un entorno de caja de arena que le permite probar las aplicaciones sin poner en peligro los datos o sistemas de producción.

Una vez que hayas abierto el Modo Desarrollador, puedes probar tu aplicación. Pulsa "comenzar" y luego presiona el botón. Deberías ver un mensaje que diga "Hello World" en la parte inferior de la pantalla.

Publica tu aplicación

Antes de poner tu aplicación en producción, necesitas publicar esa aplicación. Esto creará una versión de sólo lectura de su aplicación a la que podrá acceder en una estación.

Las aplicaciones se publican como Versiones. Cada vez que realice cambios en una aplicación, deberá publicar una nueva versión para acceder a los cambios más recientes en el reproductor. Esto ayuda a la gestión de cambios y garantiza que sólo las versiones y modificaciones aprobadas lleguen a la producción.

Para publicar su aplicación, vuelva al Editor de aplicaciones. Haga clic en el botón "publicar" en la esquina superior derecha de la pantalla. Esto hará que aparezca un modal pidiéndole que comente lo que ha cambiado en esta versión. Añade cualquier comentario que desees. Los comentarios serán más importantes cuando empieces a trabajar a escala, pero por ahora puedes mantenerlo simple. A continuación, haz clic en "Publicar versión 1".

Lo que se construye con Tulip

Tulip es una solución extremadamente flexible. Debido a que es una verdadera plataforma, no hay límite a los tipos de aplicaciones que puede construir. Lo que plantea una pregunta importante: ¿Qué puedo construir con Tulip?

La respuesta, por supuesto, depende de sus necesidades operativas. Muchos usuarios tienen en mente objetivos concretos para Tulip como:

• Reducir los errores en una operación de montaje manual
• Seguimiento de los tiempos de actividad y de inactividad de las máquinas
• Aumentar la visibilidad de la producción
• Simplificar la genealogía de los productos en entornos de gran mezcla

Estos objetivos empresariales concretos pueden transformarse fácilmente en una aplicación -o una serie de aplicaciones- que proporcione el resultado deseado. Solemos referirnos a estos conjuntos de aplicaciones por casos de uso, o por el reto operativo específico que ayudan a resolver. Los casos de uso que abordan la lista anterior de objetivos operativos serían

• Instrucciones de trabajo digitales
• Supervisión de la máquina
• Seguimiento de la producción
• Trazabilidad y genealogía

El alcance de estos proyectos puede variar desde aplicaciones de inspección de calidad dirigidas a una sola estación en una sola célula, hasta soluciones de registro electrónico de lotes a gran escala para una operación de fabricación farmacéutica completa. A menudo, los clientes de Tulip comienzan a pequeña escala con un caso de uso simple que proporciona un valor rápido y construye capacidades, ampliando sus soluciones a medida que su comodidad con Tulip crece.

:::(Información)(NOTA)
Aprende a elegir tu primer caso de uso en este{target="_blank"} Curso de Tulip University.
:::

Lo esencial aquí es que las mismas características básicas de Tulip pueden ser utilizadas para diseñar cualquier aplicación que puedas imaginar, para cualquier desafío operacional que puedas enfrentar, a cualquier escala.

Al aprender algunas características clave en Tulip, le dará a su equipo la capacidad de diseñar soluciones de software para sus desafíos más difíciles hoy, mañana y el próximo año.