Artículo: Desde una simple pantalla táctil hasta un terminal completamente equipado

1- Introducción

Las siguientes instrucciones se ilustran con un ejemplo ficticio.

Estaremos encantados de ayudarle en este proceso o de crear una solución personalizada para sus necesidades.

Para empezar, configure todo para que SiteKiosk Online esté instalado y activado en su pantalla táctil.

También debe haber iniciado sesión en su cuenta de SiteKiosk Online en un navegador externo y haber activado el modo Experto.

En la aplicación SiteKiosk Online, acceda al editor de proyectos del navegador y abra el proyecto deseado para su terminal.

Con SiteKiosk Online, es posible utilizar escáneres y chips personalizados para un inicio de sesión más rápido.

Los scripts correspondientes se pueden integrar fácilmente.

En este ejemplo se utilizó Windows 10. Si va a utilizar un dispositivo Android, póngase en contacto con nosotros para obtener instrucciones.

Para integrar dispositivos externos, es necesario activar el modo Experto de SiteKiosk Online.

Puede acceder al modo Experto añadiendo «&expert» al final de la URL en el navegador. Confirme la entrada pulsando la tecla Intro.

Imagen 1 – Modo Experto

Encontrará más información sobre el Modo Experto en la página enlazada:

https://www.sitekiosk.es/Ayuda-SiteKiosk-Online/default.aspx?modo_experto.htm

Ahora tiene la opción de usar el Modo Experto e insertar scripts en «Configuración».

2- Agregar dispositivos externos mediante la interfaz de usuario

¡Los siguientes pasos deben realizarse en la máquina cliente!

Inicie SiteKiosk Online en su terminal.

En la ventana de inicio, haga clic en «Configuración» en el área «Configurar equipo cliente local».

Imagen 2 – Configurar equipo cliente local

A continuación, haga clic en el botón «Configuración» en el área «Dispositivos de entrada».

Imagen 3 – Configuración

Ahora haga clic en «+ Agregar» y escriba la palabra «escáner» en el campo de texto de la categoría «Nombre».

Imagen 4 – Configuración de entrada

Finalmente, haga clic en el botón verde «Agregar».

Imagen 5 – Agregar dispositivo de entrada

Su escáner externo ya está conectado a SiteKiosk Online y el software lo reconoce.

Una vez configurado el dispositivo mediante la interfaz de usuario, puede introducir el script.

3- Añadir scripts

Para los siguientes pasos, abra el navegador y la aplicación SiteKiosk Online.

3.1 Componentes del script

A continuación, se explican los componentes del script.

Para una mejor comprensión, consulte también nuestra documentación de la API, disponible aquí:

https://sitekiosk.es/API-SiteKiosk-Online/default.aspx

Para acceder a elementos (por ejemplo, un elemento de texto) posteriormente mediante el script, debe esperar a que todos los elementos estén disponibles.

La lógica se ejecuta dentro de la función de devolución de llamada de este detector de eventos:

siteKiosk.content.onContentInserted(async () => {
// Hardware access is not available in preview mode
if (!siteKiosk.env.isPreview) {
// Get the scanner device
const scanner = siteKiosk.devices.getByName("scanner");
if (!scanner) {
console.error("Scanner device not found!");
return;
}
scanner.onData((e) => handleEmulatedKeyboardData(e));
} else {
console.info("Note: No keyboard data accessable, preview only");
}
});

Ahora se puede acceder al escáner por su nombre y se registra un detector de eventos «Datos».

En cuanto se reciben datos del escáner, se envían a la función «handleEmulatedKeyboardData».

async function handleEmulatedKeyboardData(e) {
const data = e.data;
if (data && data.text) {
const userData = await offlineDummyFetch(data.text);
const isSuccess = applyUserData(userData.json());
if (isSuccess) {
console.info("User data applied");
siteKiosk.content.navigation.navigateToElementByTag("restrictedArea");
} else {
console.error("User data could not be applied");
}
}
}

En este caso, la función «offlineDummyFetch» simula una solicitud al servidor que devuelve los datos individuales de un usuario que se puede encontrar mediante el ID escaneado.

Luego, los elementos se rellenan con el contenido mediante la función «applyUserData» del proyecto.

function applyUserData(userData) {
if (!userData || !userData.data) {
console.error("No user data found!");
return false;
}
const headlineElement = siteKiosk.content.getElementByTag("headline");
const pdfButton = siteKiosk.content.getElementByTag("pdfButton");
headlineElement.replacePropertyPlaceholders("text", { name: userData.data.name });
pdfButton.setPropertyValue("additionalLink.src", {
fileName: `${userData.data.pdf}`,
});
return true;
}

En este ejemplo, se establece un marcador de posición ({$name}) en un elemento de texto y la URL de un archivo PDF para una ventana emergente.

3.2 Establecer etiqueta

Los elementos deben estar etiquetados para poder acceder a ellos mediante el script:

Fig. 6 – Establecer etiqueta

En este ejemplo, use «headline» como etiqueta para el elemento de texto «pdfButton». Esta etiqueta también se refiere al botón que abre la ventana emergente.

La etiqueta «restrictedArea» se refiere a la página a la que se redirigirá tras iniciar sesión correctamente.

3.3 Añadir scripts

Ahora puede insertar el script completo en el proyecto.

Abra «Configuración» → «Experto» → «Scripts» → «Agregar» e inserte el script en el campo de texto y haga clic en «Guardar».

Fig. 7 – Añadir nuevos scripts

Ahora vuelva al modo de edición y publique el proyecto.

4- Publicación

Al escanear una etiqueta NFC o un código QR (según el escáner conectado), la aplicación cambia a la página de «Área restringida», que ya contiene los datos del usuario. El usuario obtiene acceso al documento almacenado.

Para obtener más información sobre cómo conectar el hardware a SiteKiosk Online, contáctenos por correo electrónico.