Die Aktivierung des Webpage-Debugging auf einem SiteKiosk Online Client ermöglicht es Ihnen, Probleme und Fehler in den Webseiten zu identifizieren, die von laufenden SiteKiosk Online Clients verwendet werden.

2. Setup

Das folgende Beispiel zur Aktivierung des Webpage-Debugging funktioniert nur mit SiteKiosk Online auf Clients mit Windows 10 oder höher.

Bevor Sie beginnen, stellen Sie sicher, dass SiteKiosk Online auf Ihrem Client aktiviert ist. Stellen Sie außerdem sicher, dass Sie in Ihrem SiteKiosk Online Konto eingeloggt sind und das gewünschte Projekt geöffnet haben, um das Webpage-Debugging zu aktivieren.

3. Grundlegende Einstellungen

Im vorliegenden Beispiel wird der Vorlagenbrowser verwendet, und die Start-URL ist bereits in das Webseiten-Element integriert.

Zu Beginn müssen zwei Einträge in den erweiterten Einstellungen hinzugefügt werden:

Der erste Eintrag aktiviert die Anzeige des DebugWindow innerhalb des Web-Elements auf dem Client:

1. Klicken Sie auf die Schaltfläche Einstellungen, wählen Sie dann Erweitert und klicken Sie auf die grüne Schaltfläche Einstellung hinzufügen.
2. Geben Sie debug.showDebugWindow unter Pfad ein und aktivieren Sie das Kontrollkästchen.
3. Klicken Sie anschließend auf Speichern. Das Fenster wird geschlossen und die erweiterte Einstellung wird in der Übersicht aufgeführt.

Der zweite Eintrag aktiviert die erweiterten Optionen im Debug-Fenster:

1. Klicken Sie erneut auf die Schaltfläche Einstellung hinzufügen
2. Geben Sie debug.showAdvancedOptionsInDebugWindow in das Textfeld ein.
3. Aktivieren Sie das Kontrollkästchen unter Wert wieder
4. Klicken Sie abschließend auf Speichern

Beide Einstellungen sind nun in der Übersicht aufgeführt.

Klicken Sie auf Speichern, um die erweiterten Einstellungen zu speichern und zu schließen.

Veröffentlichen Sie nun Ihr SiteKiosk Online Projekt auf dem Client.

3. Auswirkungen auf SiteKiosk Online-Clients

Für die nächsten Schritte werden die DevTools im Debug-Fenster benötigt.

1. Öffnen Sie die Registerkarte DevTools im Debug-Fenster, indem Sie F12 drücken.
2. Klicken Sie auf den Embedded UI Browser-Button, um das DevTools-Fenster zu öffnen.
3. Wählen Sie in den Entwicklertools die Registerkarte Konsole, um mögliche Fehler auf der Webseite zu analysieren.

Diese Übersicht zeigt Fehler und Bugs in der für das SiteKiosk Online Projekt verwendeten Webseite an.

Die folgende Anleitung zeigt ein Beispiel, wie ein gewöhnliches Touchdisplay zu einem Selbstbedienungsterminal für Mitarbeiter in einem Unternehmen wird.

Richten Sie alles soweit ein, dass auf Ihrem Touchdisplay SiteKiosk Online installiert und aktiviert ist. Zudem müssen Sie in einem externen Browser in Ihrem SiteKiosk Online-Account eingeloggt sein und den Expert-Modus aktiviert haben. Gehen Sie in der SiteKiosk Online Anwendung im Browser zum Projekteditor und öffnen Sie das gewünschte Projekt für Ihren HR-Terminal.

Mit SiteKiosk Online besteht die Möglichkeit Scanner und personalisierte Chips zur schnelleren Anmeldung zu verwenden. Hierzu können entsprechende Skripte mit wenig Aufwand eingebunden werden.

Für dieses Beispiel wurde Windows 10 verwendet, falls Sie beabsichtigen ein Android-Gerät zu verwenden, kontaktieren Sie uns gerne für eine entsprechende Anleitung.

Damit externe Geräte eingebunden werden können, ist es notwendig den Expert-Mode von SiteKiosk Online zu aktivieren

In den Expert-Mode gelangen Sie, indem die URL im Browser ganz am Ende mit „&expert“ ergänzt wird. Bestätigen Sie die Eingabe mit der ENTER-Taste.

Weitere Informationen zum Expert-Mode erhalten Sie auf der verlinkten Seite:

https://sitekiosk.online/help/de/Experten-Modus.html

Unter „Einstellungen“ finden Sie den Bereich „Expert-Mode“. Diesen können Sie nutzen, um Skripte einzufügen.

2. Externe Geräte über die UI hinzufügen

Die folgenden Schritte müssen auf dem Client durchgeführt werden!

1. Starten Sie SiteKiosk Online auf Ihrem Terminal.
2. Klicken Sie im Startfenster im Bereich „Lokale Client-Maschine konfigurieren“ auf „Einstellung“.

3. Betätigen Sie im Bereich „Eingabegeräte“ die Schaltfläche „Einstellungen“.

4. Klicken Sie auf „+ Hinzufügen“ und tippen Sie in der Kategorie „Name“ das Wort „scanner“ in die Textzeile ein.

5. Klicken Sie auf die grüne Fläche „Hinzufügen“.

Ihr externer Scanner ist jetzt an SiteKiosk Online angebunden und wird von der Software erkannt.

Nachdem das Gerät mittels der UI eingerichtet wurde, kann als nächstes das Skript eingepflegt werden.

3. Skripte hinzufügen

Wechseln Sie für die folgenden Schritte in den Browser und in die SiteKiosk Online Anwendung.

3.1 Skriptbestandteile

Zunächst werden hier die Bestandteile des Skriptes erläutert:

Bitte nehmen Sie zum besseren Verständnis auch unsere API-Dokumentation zu Hilfe:
https://sitekiosk.online/projects/external/apidocs/generated/index.html

Um später Elemente (z.B. ein Textelement) über das Skript anzusprechen, muss auf das Event, dass alle Elemente verfügbar sind, gewartet werden.

Innerhalb der Callback Funktion dieses Event-Listeners wird dann der Logikteil ausgeführt:

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");
}
});

Der Scanner wird ab sofort anhand des Namens angesprochen und registriert ein „Data“ Event-Listener.

Sobald Daten des Scanners empfangen wurden, werden diese an die „handleEmulatedKeyboardData“ Funktion weiter gereicht:

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");
}
}
}

Die Funktion „offlineDummyFetch“ simuliert eine Serveranfrage, welche die individuellen Daten zu einem Nutzer, der anhand der gescannten ID gefunden werden kann, zurück liefert.

Anschließend werden die Elemente über die Funktion „applyUserData“ in dem Projekt mit diesen Inhalten gefüllt:

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;
}

Für das vorliegende Beispiel wird ein Platzhalter ({$name}) in einem Textelement und die URL zu einer PDF-Datei für ein Popup gesetzt.

3.2 Tags setzten

Damit Elemente über das Skript angesprochen werden können, müssen diese mit einem Tag versehen werden:

In diesem Beispiel verwenden Sie „headline“ als Tag für das Textelement „pdfButton“. Dieses bezieht sich auch auf den Button der das Popup-Fenster öffnet.

Der Tag „restrictedArea“ bezieht sich auf die Seite, zu der nach einem erfolgreichem Login-Vorgang navigiert werden soll.

3.3 Skripte hinzufügen

Jetzt kann das gesamte Skript in das Projekt eingefügt werden.

Öffnen Sie die „Einstellungen“→ „Expert“ → „Skripte“ → „Hinzufügen“ und fügen Sie das Skript in das Textfeld ein und klicken Sie auf „Speichern“.

Wechseln Sie jetzt wieder in den Editormodus und veröffentlichen Sie das Projekt.

4. Veröffentlichung

Scannen Sie nun einen NFC-Tag oder QR-Code (je nach verbundenem Scanner), dann wechselt die Anwendung auf die „Restricted Area“ Seite, welche mit den Nutzerdaten im Vorfeld gefüllt wurde. Der Nutzer erhält Zugriff auf das hinterlegte Dokument.

Für weitere Infos zur Anbindung von Hardware in SiteKiosk Online, kontaktieren Sie uns gerne per Mail support-europe@sitekiosk.com.