App-Gebäude
  • 28 Aug 2024
  • 10 Minuten zu lesen
  • Mitwirkende

App-Gebäude


Artikel-Zusammenfassung

Das Erstellen einer Anwendung in Tulip mag zunächst einschüchternd wirken, aber wenn man die Kernelemente erst einmal verstanden hat, ist es gar nicht so kompliziert. Anwendungen kombinieren die folgenden Prinzipien, um ein neues Stück Software zu erstellen: UI-Design, bedingte Logik und Funktionen, Daten und Datenbanken, Analysen und Verbindungen zu anderen Systemen, Geräten und Maschinen. In diesem Leitfaden werden wir die wichtigsten Konzepte und Schnittstellen-Tools besprechen, die Sie für die erfolgreiche Erstellung von Anwendungen benötigen. Denken Sie daran: Tulip ist eine No-Code-Plattform, daher konzentrieren wir uns auf die Funktionen, die Sie benötigen, um produktionsreife Anwendungen zu entwerfen, unabhängig von Ihrer Erfahrung im Programmieren.

Wir beginnen damit, dass wir die Hauptschnittstelle zur Ansicht Ihrer Anwendungen durchgehen.

Erstellen und Organisieren von Apps

Um alle Apps in Ihrer Instanz zu sehen, navigieren Sie zu der Seite Apps in Ihrer Tulip-Instanz, indem Sie zu: [Ihre-Instanz].tulip.co/group. Sie können auch mit dem Mauszeiger über die Registerkarte Apps in der oberen Navigationsleiste fahren und auf Apps klicken.

View Apps.png

Auf dieser Seite sehen Sie die Apps, die Sie in Ihrer Instanz erstellt haben, unterteilt in App-Gruppen, Ordner zur Organisation einer Sammlung von Apps. Sie können auch jede App innerhalb von App-Gruppen und anderen Ordnern, wie z. B. letzte und bevorzugte Apps, im Navigationsbereich auf der linken Seite anzeigen.

Apps Page(1)

Wählen Sie eine vorhandene App in einer Gruppe aus, um ihre Informationen anzuzeigen und zu bearbeiten. Sie können auch alle folgenden App-Daten anzeigen:

  • Schritte
  • Analytik
  • Versionen
  • Abschlüsse
  • {Erlaubnis}}s
  • {Genehmigung}}s

App Info Data.png

Um eine App zu bearbeiten, klicken Sie auf die blaue Schaltfläche "Bearbeiten" in der oberen rechten Ecke oder klicken Sie direkt auf einen Schritt.

Um eine neue App zu erstellen, navigieren Sie zum Bildschirm "Apps" und klicken auf die blaue Schaltfläche "App erstellen" in der oberen rechten Ecke. Sie können auch auf den kleinen Pfeil neben der Schaltfläche klicken, um eine neue App-Gruppe zu erstellen.

Wählen Sie eine leere Vorlage oder eine vorgefertigte App aus und klicken Sie unten links im Fenster auf "Erstellen". Diese vorgefertigten Vorlagen wurden von anderen Tulip-Benutzern entworfen, damit andere schnelle Lösungen für Probleme haben, wenn sie keine App von Grund auf erstellen möchten. Sie können diese Vorlagen auch bearbeiten, um sie an Ihre Bedürfnisse anzupassen.

Create New App.png

Sobald Sie zum Info-Bildschirm weitergeleitet werden, geben Sie Ihrer Anwendung einen Namen und eine Beschreibung. Die Kennzeichnung dieser Informationen ist hilfreich, damit Sie den Überblick über die App behalten, egal in welchem Stadium des Prozesses Sie sich befinden.

Klicken Sie auf die blaue Schaltfläche "Bearbeiten" in der oberen rechten Ecke, um zur App-Editor-Oberfläche zu gelangen.

App-Editor

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:

App Editor.png

  1. Schritt/Schrittgruppe hinzufügen - Hinzufügen eines neuen Schritts oder einer neuen Schrittgruppe
  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, damit Sie mehrere Versionen fehlerfrei testen können
  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 vor oder hinter andere Elemente
  16. Trigger-Panel - Setzen von Triggern, Stilelementen und Informationen auf App-Ebene

Einen ausführlichen Überblick über den App-Editor finden Sie unter Einführung in den Tulip App-Editor.

Schritte

Schritte sind die "Seiten" Ihrer App, die verschiedenen Bildschirme, die den Inhalt anzeigen. Um einen Schritt hinzuzufügen, klicken Sie auf die Schaltfläche "Schritt hinzufügen", die vier Optionen anzeigt:

Add New Step.png

  • Schritte - Ein normaler Schritt, der an Ihre Bedürfnisse angepasst werden kann oder durch die Verwendung von Widgets
  • Formularschritte und Signaturformulare - Diese Optionen wurden für neue Instanzen nach r235 deaktiviert.
  • Schrittgruppen - Ein Ordner für Schritte, um Ihre Anwendung zu organisieren und Massenoperationen durchzuführen, wie z. B. das Umordnen/Duplizieren von Schritten

Schritte können linear oder nicht-linear sein, d.h. sie müssen nicht in der Reihenfolge aufeinander folgen, in der Sie sie anordnen. Die Logik, die Sie Ihrer Anwendung hinzufügen, bestimmt den Übergang der Schritte.

Eine ausführliche Anleitung zur Arbeit mit Schritten finden Sie in einer Sammlung von Artikeln hier: Schritte.

Basis-Layout

Das Basislayout ist die Vorlage, die für jeden Schritt gilt, den Sie erstellen. Die Erstellung eines Basislayouts erleichtert den Aufbau Ihrer Anwendung, da die grundlegenden Elemente automatisch zu jedem Schritt hinzugefügt werden, und gewährleistet einen einheitlichen Stil in Ihrer gesamten Anwendung.

Um zum Basislayout zu navigieren, klicken Sie auf die Schaltfläche "Basislayout" am unteren Rand des Schritt-/Datensatzbedienfelds.

Base Layout.png

Wenn Sie sich im Basislayout befinden, wird alles, was Sie im Arbeitsbereich platzieren, in allen Ihren Schritten angezeigt. Mit diesem Verfahren lässt sich das Layout Ihrer Anwendung schnell und einfach einrichten, ohne dass Sie jeden Schritt einzeln von Grund auf neu erstellen müssen.

Eine ausführliche Anleitung zum Erstellen eines Basislayouts finden Sie unter Verwendung des Basislayouts.

Widgets

Widgets sind die Bausteine von Anwendungen. Sie können Informationen anzeigen, Daten sammeln, Triggerlogik ausführen und vieles mehr.

Widgets.png

Icon-Widgets

Platzieren Sie Formen, Symbole oder Logos im Arbeitsbereich und konfigurieren Sie die Logik, um das Aussehen und Branding Ihrer Anwendung zu gestalten.

Schaltflächen-Widgets

Wählen Sie aus einer Vielzahl von Schaltflächen mit vorprogrammierter Logik oder leeren, benutzerdefinierten Schaltflächen, um sie in Ihrer Anwendung zu verwenden.

Lesen Sie hier mehr über Schaltflächen-Widgets.

Eingabe-Widgets

Sammeln Sie Daten von App-Nutzern mit Input Widgets, wobei jede Art von Eingabe eine andere Datenvariable darstellt.

Lesen Sie hier mehr über Eingabe-Widgets.

Text-Widget

Zeigen Sie statischen oder dynamischen Text an, einschließlich der Werte von Variablen, einfachen statischen Text und ganze Datensatzplatzhalter.

Eingebettete Widgets

Betten Sie Videos, Bilder, CAD, Dokumente, Barcode-Scanner und vieles mehr in Ihre Anwendung ein.

Lesen Sie hier mehr über eingebettete Widgets.

Kamera-Widgets

Zeigen Sie Ihren Tulip Vision Kamera-Feed oder scannen Sie einen Barcode mit der Kamera Ihres Geräts.

Lesen Sie mehr über Kamera-Widgets hier.

Benutzerdefinierte Widgets

Wenn keines der oben genannten Widgets Ihren Bedürfnissen entspricht, können Sie Ihr eigenes Widget mit HTML, CSS und Javascript erstellen, um die Möglichkeiten der Plattform zu erweitern.

Erfahren Sie hier mehr über benutzerdefinierte Widgets.

Auslöser

Mit Triggern können Sie Ihrer Anwendung Logik hinzufügen.

Ohne Trigger ist Ihre App ein flacher Bildschirm; Trigger bringen Ihre App dazu, etwas zu tun. Trigger können zu Widgets sowie zu Schritten (Trigger auf Schrittebene) und Apps (Trigger auf App-Ebene) und bei bestimmten Ereignissen wie dem Auslösen eines Geräts hinzugefügt werden. Wählen Sie für ein Widget dasjenige aus, dem Sie einen Trigger hinzufügen möchten, und klicken Sie im Triggerbedienfeld auf das Pluszeichen neben "Trigger".

Add Trigger.png

Um einen Auslöser zu einem Schritt hinzuzufügen, stellen Sie sicher, dass Sie sich in dem Schritt befinden, zu dem Sie einen Auslöser hinzufügen möchten. Navigieren Sie zur Registerkarte "Schritt" im Auslöserbedienfeld und wählen Sie einen Schritt aus der Liste der Optionen aus, indem Sie auf das Pluszeichen klicken.

Step Trigger.png

Alle Auslöser folgen dem gleichen Grundformat: Wenn eine Aktion stattfindet, führen Sie die folgende Aktion und/oder Transition aus. Auslöser können so einfach oder kompliziert sein, wie Sie es brauchen, und Sie können mehrere Aktionen hinzufügen. Sie können auch Wenn-Anweisungen hinzufügen, die eine Bedingung an die auszuführende Aktion knüpfen, wenn das Kriterium erfüllt ist.

Mit einer If-Anweisung legen Sie die Bedingungen fest, unter denen Aktionen ausgeführt werden können.

Trigger-If Statement.png

Dann-Anweisungen sind entweder eine Aktion oder ein Übergang. Eine Aktion ist eine Änderung in der App, die nicht mit einer Änderung der Schritte verbunden ist. Eine Transition ist entweder eine Änderung der Schritte oder die Beendigung der App.

Trigger-New Action/Transition.png

Schließlich gibt es, um mit den if-Anweisungen zusammenzufallen, else if-Anweisungen, die die alternative Aktion festlegen, die durchgeführt werden soll, wenn die if-Anweisung sich als falsch erweist.

Trigger-Else If Statement.png

Eine ausführlichere Anleitung zu Triggern finden Sie unter Trigger.

Variablen

Variablen sind Datentypen, die in der Tulip Cloud gespeichert werden und bei der Erstellung von Tabellen und Analysen verwendet werden. Es gibt viele Datentypen in Tulip, jeder mit seinem eigenen Zweck:

  • Boolesch - Ja/Nein
  • Farbe - Dynamische Farbe, um den Widget-Status festzulegen
  • Datetime - Zeitstempel für Datum und Uhrzeit
  • Datei - Link zu einer in Tulip gespeicherten Datei
  • Image - Verweis auf ein in Tulip gespeichertes Bild
  • Integer - Eine ganze Zahl
  • Intervall - Angezeigte Zeitspanne in Sekunden
  • Maschine - Maschinenobjekt in Tulip
  • Zahl - Eine reelle Zahl
  • Objekt - Konfigurierbare Objektstruktur mit untergeordneten Attributen, die ihren eigenen Datentyp haben
  • Station - Stationsobjekt in Tulip aus dem Shopfloor
  • Text - Folge von Zeichen
  • Benutzer - Benutzerobjekt in Tulip aus den Konto-/Arbeitsbereichseinstellungen

Um eine Variable in Ihrer Anwendung hinzuzufügen, navigieren Sie zur Registerkarte "Anwendung" im Triggers Panel und wählen das X neben "Variablen".

Variables.png

Das Variablenfenster öffnet sich und zeigt alle in Ihrer Anwendung verwendeten Variablen an. Um eine neue Variable zu erstellen, klicken Sie auf die blaue Schaltfläche "Variable erstellen" in der oberen rechten Ecke.

Geben Sie im Pop-up-Fenster den Namen der Variablen und den Datentyp ein und schalten Sie zwei Schalter um: ob die Variable bei Beendigung der Anwendung gelöscht werden soll oder nicht und ob die Variable für die Analyse gespeichert werden kann oder nicht.

Sobald Sie Ihre Variable erstellt haben, wird sie im Variablenfenster angezeigt.

Create Variable.gif

Sie können Variablen auch über den Trigger-Editor erstellen. Wenn Sie z. B. einen neuen Eintrag erstellen möchten, wenn Sie auf eine Schaltfläche "Senden" klicken, klicken Sie auf die Schaltfläche, der Sie den Trigger hinzufügen möchten, und öffnen Sie den Trigger-Editor.

Fügen Sie eine neue Aktion hinzu, die der obigen Logik folgt, benennen Sie Ihre Variable so, dass Sie sie identifizieren können, und wählen Sie die Tabelle aus, in die sie schreiben soll. Dadurch wird über eine Variable ein Datensatz erstellt, der in der von Ihnen festgelegten Tabelle gespeichert wird. Wir werden in einer anderen Anleitung mehr über Tabellen erfahren, aber denken Sie daran, dass Tabellen Daten enthalten.

Trigger-Create New Variable.png

Um mehr über Variablen zu erfahren, siehe Variablen.

Eine Anwendung mit Tulip erstellen

Erstellen Sie eine einfache Hello World-Anwendung mit einem Mitglied von Tulip. Dieser Kurs wird auch über die Tulip University angeboten.

UI Design Best Practices

Bei der Gestaltung Ihrer App sind Navigationsfähigkeit und Zugänglichkeit zwei wichtige Begriffe, die Sie im Auge behalten sollten. Es ist wichtig, dass Ihre App-Benutzer durch die App navigieren können, ohne sich zu verirren, und dass die interaktiven Widgets klar in ihrer Verwendung sind. Wenn Sie neu in der App-Entwicklung sind, fragen Sie sich vielleicht, wie Sie Ihre Benutzeroberfläche für die Benutzerfreundlichkeit optimieren können. Anleitungen zur Gestaltung von App-Oberflächen finden Sie unter App-Design.

Zusätzliche Ressourcen

Tulip-Universität

Die Tulip University ist eine kostenlose On-Demand-Ressource, um Tulip zu lernen. Die Tulip University enthält Dutzende von Kursen, Zertifizierungen und Herausforderungen zur App-Entwicklung, die Ihnen helfen, Ihre App-Entwicklung auf die nächste Stufe zu bringen. Machen Sie Ihre ersten Schritte, indem Sie sich für die Tulip Essentials anmelden, üben Sie Ihre Fähigkeiten mit Tulip Challenges und teilen Sie Ihre Erfolge, indem Sie ein Tulip Certified App Builder werden.

Tulip-Bibliothek

Die Tulip-Bibliothek ist eine Sammlung von gebrauchsfertigen Inhalten, die von Tulip-Experten entwickelt wurden. Hier finden Sie eine Fülle von Inhalten, um loszulegen, von vollständigen Anwendungen und App-Suites bis hin zu Vorlagen, benutzerdefinierten Widgets und Konnektoren.

Tulip-Gemeinschaft

Sie haben Fragen und finden die Antwort nicht in der Wissensdatenbank oder in der Universität? Haben Sie eine Idee für eine Funktion, die Ihr Leben 100-mal einfacher machen würde? Brauchen Sie eine Möglichkeit, um über das Neueste und Beste im Tuliversum auf dem Laufenden zu bleiben? Schauen Sie sich die Tulip Community an.

Die Tulip-Gemeinschaft ist ein aktives Online-Forum, in dem Benutzer Fragen stellen, diskutieren und sich gegenseitig helfen können, ihre Probleme mit Tulip zu lösen.


War dieser Artikel hilfreich?