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

:::(Info) (Hinweis:) Dieses Thema wird im Kurs"Einführung in die App-Erstellung" in der Tulip University behandelt :::

Wenn Sie sich noch mit dem Tulip App Editor vertraut machen, ist dieser Artikel für Sie gedacht. Anhand eines Beispiels für eine visuelle Arbeitsanweisung werden wir alle wichtigen Werkzeuge des App-Editors vorstellen.

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.

:::(Warning) (HINWEIS:) Wir verbessern ständig die Anwendungen, die in neuen Instanzen erscheinen. Wenn Sie Tulip erst kürzlich beigetreten sind, können die Anwendungen in Ihrer Instanz anders sein als die, die Sie auf den Bildern in diesem Artikel sehen. Aber keine Sorge. Die Ideen sind die gleichen, auch wenn der Inhalt ein wenig anders ist. :::

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 Anwendung 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 noch 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 die App gestartet, beendet oder abgebrochen wird

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

Mit dem Schwenk- und Zoom-Werkzeug können Sie:

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

Hinzufügen von Schritten zu Ihrer App

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 Schritts 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 gelernt haben, wie man neue Schritte hinzufügt, müssen wir den Bedienern 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 Logik hinzuzufügen, klicken Sie im Kontextbereich auf das "+"-Zeichen neben Auslöser.

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

Eine Aktion oder ein Übergang ist eine Änderung, die in der Anwendung stattfindet, wenn der Auslöser 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 wird gedrückt

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 eine Schaltfläche hinzufügen, mit der die Benutzer auch 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 App.

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!