In diesem Artikel erfahren Sie:
- Die verschiedenen Bestandteile des Tulip App Editors
- Grundlegende visuelle Elemente, die Sie einer App hinzufügen können (auch „Widgets“ genannt)
- Wie man mithilfe von Schaltflächen grundlegende Logik hinzufügt
- Wie Sie eine App zur Datenerfassung fertigstellen
This topic is featured in the Introduction to app building course in Tulip University.
Wenn Sie sich noch mit dem Tulip App Editor vertraut machen, ist dieser Artikel genau das Richtige für Sie. Anhand eines Beispiels für eine App mit Arbeitsanweisungen werden wir alle wichtigen Werkzeuge des App-Editors durchgehen.
Mit dem App-Editor können Sie Apps für Bediener erstellen, ohne Code schreiben zu müssen.
So sieht er aus:
Im App-Editor können Sie eine Reihe von Schritten erstellen, die die visuellen Elemente eines Prozesses digital darstellen.
Einführungsvideo
We're constantly improving the applications that come in new instances. If you joined Tulip recently, the apps in your instance might look different than what you see in images in this article. No worries, the ideas are the still same even if the content is a little different.
Aufbau des App-Editors
Im App-Editor erstellen und bearbeiten Sie Ihre App. Das folgende Diagramm zeigt die verschiedenen Bereiche, aus denen sich der App-Editor zusammensetzt:
- Schritt/Schrittgruppe hinzufügen – Fügen Sie einen neuen Schritt oder eine neue Schrittgruppe hinzu
- Schritt-/Datensatz-Bereich – Zeigen Sie Ihre Schritte über die Registerkarte „Schritte“ an oder wechseln Sie zur Registerkarte „Datensätze“, um die verwendeten Tabellen anzuzeigen
- Arbeitsbereich – Der Bereich, in dem Sie die Benutzeroberfläche Ihrer App erstellen
- Asset-Widget hinzufügen – Fügen Sie Ihrer App eine Form, ein Symbol oder ein Logo hinzu
- Schaltflächen-Widget hinzufügen – Fügen Sie Ihrer App eine Schaltfläche hinzu
- Eingabe-Widget hinzufügen – Fügen Sie Ihrer App ein Eingabefeld hinzu
- Text-Widget hinzufügen – Fügen Sie Ihrer App ein Textfeld hinzu
- Ein Widget einbetten – Betten Sie verschiedene Widgets ein, z. B. Bilder, Analysen, Maschinenattribute und mehr
- Kamera-Widget hinzufügen – Fügen Sie einen Schnappschuss mit der normalen Kamera oder der Barcode-Kamera hinzu
- Übersetzen – Der Tulip Player übersetzt die App automatisch über Ihr Tulip-Profil in die von Ihnen ausgewählte Sprache
- Snapshot erstellen – Speichern Sie eine aktuelle Version Ihrer App und erstellen Sie damit ein Duplikat
- Testen – Testen Sie Ihre App im Entwicklermodus
- Ausführen – Führen Sie Ihre App im Tulip Player aus
- Veröffentlichen – Veröffentlichen Sie Ihre App
- Vorwärts/Zurück – Verschieben Sie ein Element innerhalb des Arbeitsbereichs vor oder hinter andere Elemente
- Seitenbereich – Legen Sie Trigger und Stilkomponenten auf den Registerkarten „Widget“, „Schritt“ und „App“ fest.
Mit dem Schwenk- und Zoom-Werkzeug 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 Basis-Layouts an.
Basislayout
Alle Formatierungs- oder Layoutänderungen, die Sie am Basis-Layout vornehmen, werden automatisch auf jeden einzelnen Schritt in der App angewendet.
Sie können das Basis-Layout eines einzelnen Schritts ändern, indem Sie einzelne Elemente im Kontextbereich auf der rechten Seite „entsperren“.
Erfahren Sie hier mehr über Basislayouts.
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, Schritte zu gruppieren oder ihn zu löschen.
Erfahren Sie hier mehr über Schritte.
Symbolleiste
Die Symbolleiste am oberen Bildschirmrand enthält visuelle Elemente, die der App hinzugefügt werden können. Dazu gehören Elemente wie Formen, Fotos, Text, Videos und Schaltflächen. Um ein neues visuelles Element zur App hinzuzufügen, klicken Sie es einfach an und ziehen Sie es an die gewünschte Stelle.
Auf der rechten Seite der Symbolleiste befinden sich zusätzliche Werkzeuge, mit denen Sie die Objekte im Tulip App Editor in Ebenen anordnen können.
Kontextbereich
Im Kontextbereich auf der rechten Seite des Bildschirms nehmen Sie alle Formatierungen und logischen Verknüpfungen in der App vor. Lesen Sie hier mehr über die Widget-Konfiguration.
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 Festlegung der Zielzykluszeit für diesen Schritt
- Ermöglicht es Ihnen, auf das im Basis-Layout festgelegte Layout zurückzusetzen
- Hier können Sie den aktuellen Schritt löschen
- Bietet Ihnen die Möglichkeit, eine Logik zu erstellen, die immer dann ausgeführt wird, wenn dieser Schritt geöffnet oder geschlossen wird – wir werden später noch näher auf Trigger eingehen.
Registerkarte „App“
Die Registerkarte „App“:
- Ermöglicht es Ihnen, die Schritte in der App auszudrucken
- Hier können Sie den Zyklustimer für die gesamte App anpassen
- Zeigt Ihnen eine Liste aller mit dieser App verbundenen Variablen an
- Ermöglicht es Ihnen, die Auflösung der App an Ihre gewünschte Benutzeroberfläche anzupassen
- Hier können Sie Kommentare hinzufügen, wenn mehrere Administratoren Änderungen überprüfen
- Bietet Ihnen die Möglichkeit, eine Logik zu erstellen, die immer dann ausgeführt wird, wenn diese App gestartet, abgeschlossen oder abgebrochen wird
Registerkarte „Widget“
Wenn Sie auf ein Element in der App klicken, wird im Seitenbereich eine weitere Registerkarte namens „Widget“ angezeigt. Hier können Sie das Format der verschiedenen visuellen Elemente der App sowie deren Verhalten bei Interaktion anpassen.
Logik zu einer App hinzufügen
Die Logik bestimmt, was in der App geschieht, wenn der Bediener mit ihr interagiert. Beginnen wir mit einer einfachen Schaltfläche mit einem Trigger, um von Schritt zu Schritt zu navigieren.
- Klicken Sie in der Symbolleiste auf „Schaltflächen“ und wählen Sie „Schaltfläche“ aus.
- Ziehen Sie die Schaltfläche an die gewünschte Stelle.
- Fügen Sie der Schaltfläche eine Beschriftung hinzu und passen Sie die Formatierungs- und Farboptionen über den Kontextbereich auf der rechten Seite an.
- Um der Schaltfläche Logik hinzuzufügen, klicken Sie im Seitenbereich neben „Trigger“ auf „+ “.
Mit Triggern können Sie Ihren Anwendungen Logik hinzufügen, ohne Code verwenden zu müssen. Trigger verwenden eine „when, if, then, else “-Sequenz.
Der Trigger, den wir hier erstellen, hat folgende Logik:
Wenn: Die Schaltfläche wird gedrückt
Dann: Die aktuelle Uhrzeit wird in einer Variablen gespeichert
Übergang: Weiter zum Schritt → „Nächster“.
- Klicken Sie auf „Speichern“.
Diese Schaltfläche führt den Benutzer zum nächsten Schritt. In der Regel sollten Sie auch eine Schaltfläche hinzufügen, mit der Benutzer zum vorherigen Schritt zurücknavigieren können.
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 App testen können.
App abschließen und Daten protokollieren
Eine Schaltfläche „Abschließen“, damit Tulip alle mit jedem Bediener verbundenen App-Daten protokolliert.
In diesem Beispiel fügen wir im letzten Schritt der App eine weitere Schaltfläche hinzu.
- Wählen Sie den letzten Schritt Ihrer App aus.
- Klicken Sie auf „Schaltflächen“ und wählen Sie „Abschließen“ aus.
- Ziehen Sie die neue Schaltfläche an die gewünschte Position.
Weiterführende Informationen
Nutzen Sie diese Schritt-für-Schritt-Anleitungen, um mithilfe dieser Konzepte eine vollständige App zu erstellen:
Haben Sie gefunden, wonach Sie gesucht haben?
Sie können auch auf community.tulip.co vorbeischauen, um Ihre Frage zu stellen oder nachzuschauen, ob andere bereits ein ähnliches Problem hatten!