Creación de contenido

Aplicaciones y plantillas

El flujo de creación de contenido en TicTAP es donde construyes y configuras aplicaciones web. Estas apps te permiten gestionar y asignar contenido a las etiquetas, definiendo la información que se mostrará cuando se escanee una etiqueta. A continuación se indican los pasos para empezar.

Crear una aplicación

Una Application de TicTAP sirve como base de tu web-app. Te permite definir qué etiquetas se asignan a cada contenido y gestionar qué información mostrará cada etiqueta.

Pasos para crear una aplicación:

• Navega por el menú de la izquierda y selecciona Apps.
• Haz clic en el botón "Create an App" de la parte superior derecha.
• Pon un nombre a tu aplicación (por ejemplo, "Vehicles") y haz clic en "Create".
• Ahora puedes configurar tu aplicación y añadir la información relevante. Puedes completar estos campos ahora o volver más tarde.
• Cuando esté lista, haz clic en "Next" para continuar a la sección de asignación de etiquetas.

Crear tu primera plantilla

Una vez configurada tu aplicación, es el momento de diseñar tu primera plantilla. Las plantillas definen el diseño y el contenido que verán los usuarios cuando interactúen con tus etiquetas.

Crea o reutiliza una plantilla para tu aplicación:

• Si ya tienes una plantilla creada, puedes asignarla directamente. Si no, haz clic en "New Template" para crear una.
• Elige entre varias opciones de plantilla. Recomendamos empezar con una plantilla de tipo Page, que puedes diseñar como página de aterrizaje.
• Pon nombre a tu plantilla y empieza a diseñarla con las opciones disponibles. Puedes añadir imágenes, botones, mapas y mucho más.
• Vincula la plantilla con otras plantillas (por ejemplo, formularios u ofertas) para crear una experiencia de usuario completa.

Crear un menú para tu aplicación

Puedes mejorar la navegación dentro de tu app creando un menú. Los menús permiten a los usuarios moverse entre distintas plantillas.

Pasos para crear un menú:

• Ve a la sección "Templates" en la página principal de la plataforma.
• Crea una nueva plantilla de menú.
• Vuelve a tu app y asigna el menú a tu página de aterrizaje.

Para más detalles sobre cómo crear un menú, consulta esta guía: Cómo crear un menú.

---

Una vez que hayas configurado tu aplicación y tus plantillas, estarás listo para pasar a la siguiente etapa de TicTAP: la gestión de tus activos. Continúa en la guía de Gestión de activos para saber más.

Aplicaciones

Gestión de aplicaciones

En TicTAP, una Application es una forma de vincular un Asset Type con un sitemap. Las aplicaciones se construyen con plantillas que definen cómo se muestra la información cuando se escanea una etiqueta. Cada aplicación comienza con una plantilla Home, que actúa como punto de entrada principal para los usuarios. Esta plantilla principal puede enlazar con otras plantillas, creando un sitemap completo para la aplicación. Cuando se escanea una etiqueta asignada a un activo, TicTAP encuentra la aplicación correspondiente según el tipo de activo y muestra las plantillas configuradas.

Esta guía te acompañará en la gestión de aplicaciones, cubriendo el proceso de creación, edición, organización y mantenimiento.

1. Creación de una aplicación

Al crear una nueva aplicación en TicTAP, se utiliza un wizard para guiarte durante la configuración. Estos son los pasos clave:

Proceso paso a paso del asistente:

1.1. Configuración

Ajustes básicos:

• App Name: elige un nombre descriptivo para la aplicación que refleje su propósito (por ejemplo, "Warehouse Management").
• App Description: proporciona una breve descripción de la aplicación.

Ajustes avanzados:

• Tracking Options: configura las opciones de seguimiento para monitorizar cómo interactúan los usuarios con tu aplicación y tus activos.
• Offline Usage: activa las opciones de uso sin conexión si los usuarios necesitan acceder al contenido de la aplicación sin internet.

1.2. Etiquetas

Las etiquetas son fundamentales para vincular tu aplicación con activos físicos o digitales. Durante este paso puedes:

• Create or transfer tags: puedes generar nuevas etiquetas o transferir las existentes a esta aplicación. Estas etiquetas quedarán vinculadas a la app y se usarán para mostrar información al escanearlas.

Note: aunque una etiqueta no esté asignada a un activo, sigue pudiendo moverse a una aplicación, permitiendo interactuar con la app sin un activo conectado.

1.3. Plantilla

La Home Template es el núcleo de tu aplicación. Actúa como la página principal que ven los usuarios al interactuar con la aplicación mediante una etiqueta escaneada.

• Home Template: elige el punto de inicio de tu aplicación. Esta plantilla es obligatoria y enlazará con otras plantillas de la app. Actúa como la página de inicio de tu aplicación, guiando a los usuarios hacia otras secciones.
• Navigation: desde esta plantilla principal puedes enlazar con plantillas adicionales como formularios, ofertas u otros detalles del activo, lo que te permite construir un sitemap completo.

1.4. Diseño

Después de seleccionar tu plantilla principal, la sección Design te permite personalizarla usando un drag-and-drop block editor.

• Block Editor: el editor ofrece un conjunto de bloques de contenido (texto, botones, imágenes, mapas, etc.) que pueden organizarse para crear tu diseño personalizado.
• Advanced Blocks: también puedes añadir bloques más complejos, como HTML personalizado o bloques de datos dinámicos que extraen información de campos del activo.

Para profundizar en la creación de plantillas, consulta la guía de plantillas.

---

2. Gestión de etiquetas y aplicaciones

Las etiquetas desempeñan un papel esencial en la forma en que los usuarios interactúan con las aplicaciones. Al asignar una etiqueta a un activo, los usuarios pueden ver la información asociada a ese activo cuando escanean la etiqueta.

Sin embargo, las etiquetas no siempre necesitan estar vinculadas a activos para funcionar dentro de una aplicación.

2.1. Mover etiquetas entre aplicaciones

Puedes mover etiquetas entre aplicaciones aunque no estén vinculadas a un activo. Esto es especialmente útil cuando quieres probar o interactuar con una aplicación sin necesidad de asignar etiquetas a activos.

• Move tags: puedes mover libremente una etiqueta de una aplicación a otra, ajustando su contenido asociado según sea necesario.
• Testing tags: si estás creando una nueva aplicación o haciendo cambios, mover una etiqueta a la aplicación te permite interactuar con la app antes de asignarla a un activo real.

Para profundizar en la gestión de etiquetas, consulta la guía de etiquetas.

2.2. Visitar una etiqueta

Cuando se escanea una etiqueta con un móvil o un dispositivo NFC, el usuario se dirige a la plantilla principal de la aplicación y, según el tipo de activo, se encuentra la aplicación correspondiente.

---

Conclusión

Gestionar aplicaciones en TicTAP implica vincular activos con plantillas dinámicas y crear un sitemap para que los usuarios naveguen. Con una combinación potente de etiquetas, plantillas y ajustes flexibles, puedes asegurarte de que tus aplicaciones sean cómodas de usar y eficaces al mostrar la información que necesitan tus usuarios.

Para instrucciones más detalladas, visita la guía de Creación de contenido o la guía de Gestión de activos.

Plantillas

Enlaces

Al editar plantillas puedes conectar contenido fácilmente. Puedes enlazar contenido a un botón, una imagen, una tarjeta o a un elemento desde los ajustes de contenido de cada uno.

Hay distintos tipos de enlaces; a continuación explicamos en qué consisten y cómo usarlos:

Enlace a una plantilla

Este enlace te permite vincular el elemento que estás configurando con una de las plantillas que has creado. Por ejemplo, puedes configurar un botón para llevarte a un formulario de mantenimiento o una imagen para llevarte a una página con información.

URL de Internet

Este enlace te permite vincular tu elemento a una URL. Puedes, por ejemplo, enlazar un vídeo de YouTube, tu web o una página con información adicional que quieras compartir.

Archivo

Sube un archivo o un PDF a tu Biblioteca multimedia haciendo clic en el botón y añádelo a tu enlace. Si has subido un PDF, puedes elegir que los usuarios descarguen el archivo al acceder al enlace o, marcando la opción de vista previa, acceder a una previsualización del documento. Sube manuales, catálogos o información adicional y facilita el acceso a tus usuarios.

Número de teléfono

Añade un número de teléfono como enlace y permite que tus usuarios llamen directamente con un solo clic. Crea un botón y añade un número de asistencia o de emergencia. Permite que tus usuarios accedan a tu número desde la propia app.

Contactar por correo electrónico

Vincula un correo electrónico a un botón, imagen o elemento para que tus usuarios puedan acceder a tu correo y enviarte un email directamente al hacer clic en el enlace. Perfecto para enlazar información o correos de contacto.

Enlace según la aplicación

Un enlace condicional es un tipo de enlace que te permite usar cualquiera de los tipos de enlace vistos anteriormente según la app a la que pertenezca la etiqueta visitada. Podrás generar distintos tipos de apps y, con la misma plantilla, mostrar contenido diferente según la app que visites.

Entidad

Entity es un tipo de enlace que te permite vincular tu bloque con la entidad actual, su padre o su padre actual, siempre que el bloque permita verlos.

En el caso de otras plantillas, URL de Internet y archivo, puedes elegir si quieres que el enlace se abra en una nueva ventana, lo que te permitirá mantener la app abierta mientras ves el contenido del enlace.

Cómo crear un enlace

Primero tendrás que seleccionar el tipo de Content en el que quieres añadir el enlace. Para ello, cuando añadas algún tipo de contenido a tu App, como una imagen o un botón, la opción para añadir un enlace aparecerá dentro de su configuración.

En el ejemplo siguiente se ve el menú que aparece al añadir el bloque de contenido que contiene una "Image".

En el tipo de enlace podemos seleccionar la clase de enlace tal como hemos descrito al principio de este artículo. Desde aquí puedes definir las especificaciones que necesites en cada momento para dar a tu App la mejor navegabilidad posible.

Menú

El menú de la App en TicTAP es un elemento esencial para que el usuario pueda navegar por las distintas secciones de la App. Es muy importante, ya que es lo primero que el usuario ve al abrir la App y lo primero que utilizará para moverse por ella.

El menú se crea externamente, es decir, como si fuera otro elemento independiente fuera de tu App, en este caso una nueva plantilla de tipo menú. Después volveremos a nuestra App y, desde allí, en la opción Configuration y Lateral menu, seleccionaremos la plantilla de menú creada.

Vamos paso a paso:

Crear la plantilla

Para crear un menú tienes que crear una nueva Template desde el menú izquierdo en la Home de la plataforma (fuera de la App). Elegimos el tipo Menú y le asignamos un nombre. La plantilla 'menu' solo permite añadir un tipo de block 'Menu item with image'.

Diseñar tu menú

Para crear tu menú, arrastra tantos bloques 'item' como quieras y asígnales contenido. Puedes enlazar los elementos de tu menú con otras plantillas, URLs, números de teléfono, correos, archivos y muchas más imágenes o iconos para acompañar el texto del menú, pero recuerda que se mostrará en un tamaño muy pequeño, así que evita poner contenido demasiado detallado o iconos con líneas excesivamente finas.

También puedes añadir color a tu menú y asignar colores específicos a cada uno de los elementos. Cuando termines, guarda los cambios.

Vincular el menú a tus plantillas

El menú ya está creado, pero debes añadirlo al resto de plantillas de tu app. Para ello, entra en cada una de las plantillas (o en la plantilla si solo tienes una), ve a la pestaña de configuración y elige la opción 'Side Menu'. Busca tu menú y asígnalo con la opción 'browse templates', como se muestra en la imagen inferior.

Consejo: Tendrás que vincular tu menú en la plantilla principal para que esté siempre visible.

Comprobar que todo está bien

Comprueba que el menú está correctamente vinculado haciendo una vista previa de tu App, donde verás que se ha añadido un menú en la parte superior de tipo hamburger. Si todo está bien, disfruta de una forma rápida de acceder a todo tu contenido desde cualquier plantilla de tu app.

Cómo usar variables en las plantillas

Variables de texto

Para usar variables en las plantillas debes utilizar la notación *|VARIABLE_NAME|* . De este modo, el contenido entre los delimitadores *| y |* será sustituido por el valor que tenga esa variable. Aquí tienes algunos ejemplos de variables que puedes usar:

Variables de Etiqueta

*|tag.name|* contiene el nombre de la etiqueta
*|tag.description|* contiene la descripción de la etiqueta

Variables de App

*|app.name|* contiene el nombre de la App a la que pertenece la etiqueta visitada. *|app.description|* contiene la descripción de la App a la que pertenece la etiqueta visitada.

Variables de Usuario

*|user.name|* contiene el nombre del usuario conectado *|user.email|* contiene el correo electrónico del usuario conectado

Variables de Activo

Como en TicTAP una etiqueta puede estar "pegada" a un activo, la información del activo puede consultarse mediante variables de activo.

*|asset.name|* contiene el nombre del activo. Todo activo siempre tiene un nombre
*|asset.external-reference|* contiene una referencia externa del activo. Suele usarse cuando el activo tiene un ID distinto al de TicTAP y resulta útil guardarlo por motivos de integración.
*|asset.end-of-life-at|* contiene la fecha en la que el activo fue dado de baja o está programado para darse de baja.
*|asset.is-eol|* contiene un valor booleano que indica si el activo está dado de baja o no.
*|asset.breadcrumbs|* contiene una cadena con la ruta de ancestros hasta el activo actual
*|asset.state|* contiene el nombre del estado actual del activo
*|asset.definition|* contiene la "definición" actual del activo, es decir, su configuración. Esto es útil cuando quieres acceder a propiedades concretas del tipo de activo: *|asset.definition.{system-field-name}|* . Por ejemplo, podrías acceder al "name" o al "icon":

• *|asset.definition.name|* el nombre del "Asset type"
  
• *|asset.definition.icon:url('page_card')|* el icono del "Asset type"
  

*|asset.parent|* contiene el padre del activo. No lo uses directamente, sino que accede a cualquier propiedad del padre igual que harías con el propio activo. Por ejemplo, si quieres acceder al nombre del padre, debes usar *|asset.parent.name|*

Algunos ejemplos: *|asset.parent.state|* contiene el estado del padre del activo. *|asset.parent.breadcrumbs|* contiene las migas de pan del padre del activo. *|asset.parent.definition.name|* contiene el nombre del tipo de activo del padre *|asset.parent.definition.icon:url('page_card')|* contiene el icono del tipo de activo del padre.

También puedes acceder a los ancestros del activo. El merge tag

*|asset.parents.{asset-type}|* permite buscar cualquier ancestro del activo. Debes usar este merge tag junto con el "slug" del asset-type para determinar qué tipo de padre estás buscando.
Por ejemplo: *|asset.parents.warehouse|* encontraría el primer ancestro de este activo de tipo "warehouse". Una vez encontrado, también puedes usarlo para extraer propiedades de ese activo en la plantilla: *|asset.parents.warehouse.address|*

Variables de planes de mantenimiento

*|asset.plannings|* contiene las planificaciones del activo, pero no puedes usarlo directamente.

Puedes hacer referencia a una planificación concreta usando su planning-slug

*|asset.plannings.planning-slug.next-date:date('d/m/Y')|*
*|asset.plannings.planning-slug.last-date:date('d/m/Y')|*
*|asset.plannings.planning-slug.status|*

O también puedes acceder a una planificación por el orden en la lista de planificaciones disponibles para este activo. Por ejemplo, si quieres acceder a la primera planificación de este activo, haz lo siguiente:

*|asset.plannings[0].next-date:date('d/m/Y')|*
*|asset.plannings[0].last-date:date('d/m/Y')|*
*|asset.plannings[0].status|*

Los activos también pueden tener un conjunto de campos personalizados que se configuran según el equipo con el que trabajes. Cuando necesites mostrar la información de ese campo para tu activo, es necesario anteponer "asset" al nombre de sistema del campo personalizado. Por ejemplo, si tienes un campo personalizado llamado "My custom field", debes usar la siguiente notación para acceder a él:

*|asset.my-custom-field|*

Variables de campos personalizados

Los campos personalizados pueden configurarse para usarse en etiquetas, apps y activos (o entidades). Según el origen de ese campo personalizado, debes añadir el prefijo que indique la ubicación donde reside ese campo.

Por ejemplo, podemos configurar un campo personalizado llamado "My custom field", al que se puede hacer referencia mediante:

*|tag.my-custom-field|* *|app.my-custom-field|* *|asset.my-custon-field|* , según si el campo se ha colocado como parte de una TAG, una App o un ASSET.

Valor alternativo: valor por defecto

Es posible especificar un valor por defecto si la VARIABLE a la que nos referimos no tiene valor.

Por ejemplo, puedes especificar:

*|asset.field||tag.field|*

Lo que significa: cuando la TAG_VARIABLE no tenga valor, usa el valor de TAG_FALLBACK_VARIABLE.

Filtros

También puedes usar filtros en tus variables para transformar su valor. Estos son los filtros compatibles actualmente:

url

El filtro url permite extraer una URL para un archivo/imagen presente en una variable.

*|tag.photo:url('page_card')|*

El parámetro opcional especifica el "formato" de ese medio, que se refiere a las "dimensiones" de la imagen indicada. Actualmente están disponibles: "page_card" y "page_thumbnail".

localize

Usa la configuración regional actual para mostrar un texto de forma condicional.

*|FILTER:localize({"en":"English","pt":"Portuguese"})|*

date

Un filtro de tipo "date" permite formatear de distintas maneras una variable que contiene una fecha:

• *|tag.date:date('Y')|*
• *|asset.last-maintenance-at:date('Y')|*
• *|asset.last-maintenance-at:date('m-Y')|*

Pero también puedes usar date con now para crear una marca temporal, por ejemplo:

• *|now:date('YmdHis')|*

Puedes encontrar todos los formatos disponibles en Formatos de fecha

Funciones

También puedes usar funciones en tus plantillas para controlar la información mostrada en función de una variable. Estas son las funciones compatibles actualmente:

IF / ELSE

Puedes usar la función IF() para controlar la información mostrada en función de una variable.

Aquí tienes algunos ejemplos de uso de IF:

{{ IF(*|asset.field|*, "A2 was true", "A2 was false" ) }}
{{ IF(*|asset.field|*, *|asset.field|*,"A2 was false") }}
{{ IF(*|asset.field|*, *|asset.field|*, *|asset.another-field|*) }}
{{ IF(*|asset.field|* = "foo", "<div>Your HTML HERE!!</div>" ) }

ASSET_URL

Puedes usar la función ASSET_URL para obtener un enlace directo a un activo, incluso si no tiene una etiqueta pegada a él. Requiere el id del activo como único argumento:

{{ASSET_URL(*|asset.id|*)}}

ASSET_QR

Puedes usar la función ASSET_QR para obtener un código QR de un activo, incluso si no tiene una etiqueta pegada a él.

{{ASSET_QR(*|asset.id|*)}}