Einführung in den Tulip App Editor

Zweck

In diesem Artikel werden Sie lernen:

• Die verschiedenen Teile des Tulip App Editors
• Grundlegende visuelle Elemente, die Sie zu einer App hinzufügen können (auch Widgets genannt)
• Wie man grundlegende Logik mit Hilfe von Schaltflächen hinzufügt
• Wie Sie Ihre App vervollständigen, um Daten zu protokollieren

Wenn Sie sich noch nicht mit dem Tulip App Editor vertraut gemacht haben, ist dieser Artikel genau das Richtige für Sie. Anhand eines Beispiels für eine visuelle Arbeitsanweisung werden wir alle wichtigen Werkzeuge des App-Editors durchgehen.

Bevor wir anfangen, hier eine kurze Erinnerung: Mit dem App-Editor können Sie Anwendungen für Bediener erstellen, ohne Code zu schreiben.

So sieht er aus:

Mit dem App-Editor können Sie eine Reihe von Schritten oder Bildschirmen erstellen, die die Bediener innerhalb einer App verwenden können. Die Schritte können auch in Schrittgruppen organisiert werden, um die Benutzerfreundlichkeit zu verbessern.

Ein schneller Überblick über den Tulip App Editor

Die Schrittliste auf der linken Seite zeigt die Liste der Schritte einschließlich des Basislayouts.

Alle Formatierungs- oder Layout-Bearbeitungen, die Sie am Basis-Layout vornehmen, werden automatisch auf jeden einzelnen Schritt in der App angewendet.

Sie können das Basislayout innerhalb jedes Schritts ändern, indem Sie einzelne Elemente im Kontextfenster auf der rechten Seite "freischalten".

Mit der rechten Maustaste können Sie Schritte duplizieren, gruppieren oder löschen.

Sie können auf einen Schritt klicken, um die darin enthaltenen Elemente anzuzeigen.

Die Symbolleiste am oberen Rand des Bildschirms enthält visuelle Elemente, die der App hinzugefügt werden können. Dies sind Elemente wie Formen, Fotos, Text, Videos und Schaltflächen. Um ein neues visuelles Element zur App hinzuzufügen, klicken Sie einfach darauf und ziehen es an die gewünschte Stelle.

Auf der rechten Seite der Symbolleiste befinden sich zusätzliche Werkzeuge, die Sie verwenden können, um die Objekte im Tulip App Editor zu schichten.

Das Kontextfenster auf der rechten Seite des Bildschirms ist der Ort, an dem Sie die gesamte Formatierung und Logik in der App steuern. Lesen Sie hier mehr über die Widget-Konfiguration.

Es gibt drei Registerkarten:

• Registerkarte Schritt
• Registerkarte App
• Registerkarte "Widget

Die Registerkarte "Schritt" zeigt Ihnen:

• Formatierungsoptionen für den gesamten Schritt
• Ermöglicht die Angabe der Soll-Zykluszeit für diesen Schritt
• Ermöglicht das Zurücksetzen auf das im Basislayout angegebene Layout
• Ermöglicht es Ihnen, den aktuellen Schritt zu löschen
• Ermöglicht es Ihnen, eine Logik zu erstellen, die immer dann ausgeführt wird, wenn dieser Schritt geöffnet oder geschlossen wird - wir werden später mehr über Trigger sprechen.

Die Registerkarte App:

• Ermöglicht es Ihnen, die Schritte in der App auszudrucken
• Ermöglicht es Ihnen, den Zyklus-Timer für die gesamte App einzustellen
• Zeigt Ihnen eine Liste aller Variablen, die mit dieser App verbunden sind
• Ermöglicht es Ihnen, die Auflösung der App so einzustellen, dass sie zu Ihrer beabsichtigten Schnittstelle passt.
• Ermöglicht Ihnen das Hinzufügen von Kommentaren, wenn mehrere Administratoren die Änderungen überprüfen
• Gibt Ihnen die Möglichkeit, eine Logik zu erstellen, die immer dann ausgeführt wird, wenn diese App gestartet, beendet oder abgebrochen wird

Wenn Sie auf ein Element in der App klicken, wird eine weitere Registerkarte im Seitenbereich mit der Bezeichnung Widget Tab angezeigt. Hier können Sie das Format der verschiedenen visuellen Elemente der App sowie ihr Verhalten bei Interaktionen anpassen.

Mit dem Schwenk- und Zoomwerkzeug können Sie:

• die Bearbeitungsfläche Ihrer Anwendung verschieben
• Vergrößern oder Verkleinern

Hinzufügen von Schritten zu Ihrer Anwendung

Um einen neuen Schritt in einer Tulip App zu erstellen, klicken Sie auf die Option Schritt hinzufügen auf der linken Seite des App Editors. Das Design des neuen Schrittes wird das Basislayout widerspiegeln.

Pro-Tipp: Sie können auch einen bestehenden Schritt duplizieren, wenn Sie das Design oder die Logik in Ihrem neuen Schritt wiederverwenden möchten, indem Sie auf das Zahnradsymbol klicken und "Schritt duplizieren" wählen.

Hinzufügen von Logik zu Ihrer App

Nachdem wir nun beschrieben haben, wie man neue Schritte hinzufügt, müssen wir den Operatoren eine Möglichkeit geben, sich von Schritt zu Schritt zu bewegen. Wir können diese Logik in Tulip mit Hilfe von Triggern erstellen. Für den Anfang verwenden wir eine einfache Schaltfläche, um von Schritt zu Schritt zu navigieren.

Sie können eine benutzerdefinierte Schaltfläche hinzufügen, indem Sie in der Symbolleiste oben im App-Editor "Schaltfläche" auswählen. Ziehen Sie die Schaltfläche an die gewünschte Stelle.

Fügen Sie eine Beschriftung für die Schaltfläche hinzu und passen Sie die Format-/Farboptionen mithilfe des Kontextfensters auf der rechten Seite an.

Um der Schaltfläche eine Logik hinzuzufügen, klicken Sie auf das "+"-Zeichen neben "Auslöser" im Seitenbereich.

MitTriggern können Sie Ihren Anwendungen Logik hinzufügen, ohne dass Sie Code verwenden müssen, indem Sie eine einfache Wenn, Wenn, Dann, Sonst-Sequenz verwenden. Dies ist der Trigger-Editor, der sich öffnet, wenn Sie auf das "+"-Zeichen klicken.

Eine Aktion oder ein Übergang ist eine Änderung, die in der Anwendung stattfindet, wenn der Trigger ausgelöst wird.

Es gibt viele Aktionen und Übergänge, die Sie ausführen können, wenn die Schaltfläche gedrückt wird.

Dieser Auslöser ist einfach:

Wenn: Taste gedrückt wird

dann: Die aktuelle Zeit wird in einer Variablen gespeichert

Und dann: Gehe zu Schritt → Weiter.

Mit dieser Schaltfläche können Sie zum nächsten Schritt übergehen. In der Regel möchten Sie auch eine Schaltfläche hinzufügen, mit der die Benutzer zum vorherigen Schritt navigieren können.

Sobald Sie die grundlegende Logik der Anwendung erstellt haben, können Sie oben rechts im App-Editor auf die Option Ausführen oder Testen klicken. Dadurch wird Ihre Anwendung im TTulip Player gestartet und Sie können die Anwendung auf Ihrem Computer in Echtzeit testen.

Vervollständigen Ihrer Anwendung zur Protokollierung der Daten

Sie müssen eine Schaltfläche "Fertigstellen " hinzufügen, damit Tulip alle Daten aus der Nutzung der Anwendung durch den Benutzer protokolliert.

In diesem Beispiel fügen wir eine weitere Schaltfläche auf dem letzten Schritt der App hinzu, um einen Abschluss zu protokollieren.

Klicken Sie auf die Option "Schaltflächen" in der Symbolleiste und wählen Sie die Schaltfläche "Abschließen". Ziehen Sie sie auf den letzten Schritt in Ihrer Anwendung.

Herzlichen Glückwunsch! Das ist alles, was Sie wissen müssen, um eine einfache Anwendung für Arbeitsanweisungen zu erstellen.

Weitere Lektüre

Verwenden Sie diese Schritt-für-Schritt-Anleitungen, um eine vollständige Anwendung mit diesen Konzepten zu erstellen.

• Erstellen einer Tulip-Anwendung
• Erstellen einer vollständigen Fehlerberichts-Anwendung
• Erstellen einer App zur Erfassung von Arbeitsauftragsdaten

Haben Sie gefunden, wonach Sie gesucht haben?

Sie können auch auf community.tulip.co Ihre Frage stellen oder sehen, ob andere eine ähnliche Frage hatten!