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 man eine App vervollständigt, 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 des Beispiels einer Arbeitsanweisungs-App werden wir alle wichtigen Werkzeuge des App-Editors durchgehen.

Mit dem App-Editor können Sie Apps für Bediener erstellen, ohne Code zu schreiben.

So sieht er aus:

Im App-Editor können Sie eine Reihe von Schritten erstellen, die digitale visuelle Elemente eines Prozesses darstellen.

Einführungsvideo

Aufschlüsselung des App-Editors

Der App-Editor ist der Ort, an dem Sie Ihre App erstellen und bearbeiten. Das folgende Diagramm zeigt die verschiedenen Teile, aus denen der App-Editor besteht:

1. Schritt/Schrittgruppe hinzufügen - Fügen Sie einen neuen Schritt oder eine neue Schrittgruppe hinzu
2. Step/Records Panel - Zeigen Sie Ihre Schritte über die Schritt-Registerkarte an oder wechseln Sie zur Registerkarte Records, um die verwendeten Tabellen anzuzeigen
3. Arbeitsbereich - Der Platz zum Erstellen Ihrer App-Oberfläche
4. Asset-Widget hinzufügen - Fügen Sie eine Form, ein Symbol oder ein Logo zu Ihrer App hinzu.
5. Schaltflächen-Widget hinzufügen - Fügen Sie eine Schaltfläche zu Ihrer Anwendung hinzu.
6. Eingabe-Widget hinzufügen - Fügen Sie Ihrer Anwendung ein Eingabefeld hinzu.
7. Text-Widget hinzufügen - Fügen Sie ein Textfeld zu Ihrer Anwendung hinzu
8. Widget einbetten - Betten Sie eine Vielzahl von Widgets ein, z. B. Bilder, Analysen, Maschinenattribute und mehr
9. Kamera-Widget hinzufügen - Fügen Sie eine normale Kamera oder einen Barcode-Kamera-Schnappschuss hinzu
10. Übersetzen - Der Tulip Player übersetzt die Anwendung automatisch in die von Ihnen gewählte Sprache über Ihr Tulip-Profil
11. Snapshot erstellen - Speichern Sie eine aktuelle Version Ihrer Anwendung und erstellen Sie ein Duplikat
12. Testen - Testen Sie Ihre Anwendung im Entwicklermodus
13. Ausführen - Führen Sie Ihre Anwendung im Tulip Player aus
14. Veröffentlichen - Veröffentlichen Sie Ihre Anwendung
15. Vorwärts/Rückwärts - Verschieben Sie ein Element innerhalb des Arbeitsbereichs nach vorne oder hinter andere Elemente
16. Seitenbereich - Legen Sie Auslöser und stilistische Komponenten auf der Registerkarte "Widget", "Schritt" und "App" fest.

Mit dem Schwenk- und Zoomwerkzeug können Sie:

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

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

Basis-Layout

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

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

Mehr über Basislayouts erfahren Sie hier.

Schritte

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

Klicken Sie mit der rechten Maustaste auf einen Schritt, um ihn zu duplizieren, um Schritte zu gruppieren oder um ihn zu löschen.

Erfahren Sie hier mehr über Schritte.

Symbolleiste

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.

Kontext-Fenster

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

Es gibt drei Registerkarten:

• Registerkarte Schritt
• Registerkarte App
• Registerkarte Widget

Registerkarte "Schritt

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.

Registerkarte "App

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 an die von Ihnen gewünschte Schnittstelle anzupassen.
• 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

Registerkarte Widget

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 der Interaktion mit ihnen anpassen.

Hinzufügen von Logik zu einer App

Die Logik bestimmt, was in der App passiert, wenn der Benutzer mit ihr interagiert.

1. Klicken Sie in der Symbolleiste auf Schaltflächen und wählen Sie Schaltfläche.
2. Ziehen Sie die Schaltfläche an die gewünschte Stelle.

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

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

MitTriggern können Sie Ihren Anwendungen Logik hinzufügen, ohne Code verwenden zu müssen. Trigger verwenden eine wenn, wenn, dann, sonst-Sequenz.

Der Trigger, den wir hier erstellen werden, hat die folgende Logik:

Wenn: Taste wird gedrückt

dann: Die aktuelle Zeit wird in einer Variablen gespeichert

Übergang: Gehe zu Schritt → Weiter.

1. Klicken Sie auf Speichern.

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

Sobald Sie die grundlegende Logik der Anwendung erstellt haben, können Sie oben rechts auf Testen klicken. Dadurch wird Ihre Anwendung im Entwicklermodus gestartet, sodass Sie die Anwendung testen können.

Eine Anwendung fertigstellen und Daten protokollieren

Eine Schaltfläche Fertigstellen, damit Tulip alle mit jedem Bediener verbundenen Anwendungsdaten protokolliert.

In diesem Beispiel fügen wir eine weitere Schaltfläche auf dem letzten Schritt der Anwendung hinzu.

1. Wählen Sie den letzten Schritt Ihrer Anwendung.
2. Klicken Sie auf Schaltflächen und wählen Sie Fertigstellen.
3. Ziehen Sie die neue Schaltfläche an die gewünschte Position.

Weitere Lektüre

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

• Komplettlösung: Erstellen Ihrer ersten App
• Komplettlösung: Erstellen eines Dateneingabeformulars

Haben Sie gefunden, wonach Sie gesucht haben?

Sie können auch auf community.tulip.co Ihre Frage stellen oder sehen, ob andere mit einer ähnlichen Frage konfrontiert wurden!