In dieser Schritt-für-Schritt-Anleitung werden Sie:- eine Nachricht auf einem Schritt anzeigen- eine benutzerdefinierte Nachricht eingeben- eine Zählung der Nachrichten erstellen- das Datum und die Uhrzeit der letzten angezeigten Nachricht dokumentieren
In dieser Schritt-für-Schritt-Anleitung lernen Sie die Grundlagen von Anwendungen kennen, indem Sie mehrere funktionale Anwendungskomponenten erstellen.
Am Ende der Übungen werden Sie eine Hello World-App haben, die wie folgt aussehen wird:
Übung 1: Erstellen einer Hello World-Applikation
In dieser Übung erstellen Sie eine einfache App, die eine Nachricht über einen Schaltflächenauslöser anzeigt.
Erstellen Sie eine App
- Klicken Sie auf der Registerkarte Apps auf Apps.
- Klicken Sie auf + App erstellen in der oberen rechten Ecke.
- Nennen Sie die App "Hello World - Example". Optional können Sie eine Beschreibung hinzufügen, damit andere Benutzer wissen, wofür diese App gedacht ist.
- Auf der Seite mit den App-Details können Sie entweder oben rechts auf " Bearbeiten " klicken oder auf den Namen "Unbenannter Schritt", um den App-Editor aufzurufen.Bevor wir etwas erstellen, fügen wir dem Basislayout einige grundlegende Designelemente hinzu.
Gestalten Sie ein Basislayout
- Wählen Sie auf der Registerkarte Schritte auf der linken Seite Basislayout.
- Klicken Sie auf Symbole und wählen Sie eine Rechteckform aus. Passen Sie die Breite des Rechtecks so an, dass es sich über den gesamten Bildschirm der App erstreckt, und klicken Sie dann auf das Rechteck und ziehen Sie es an den oberen Rand des Bildschirms. Um die Farbe des Rechtecks zu ändern, klicken Sie auf das Quadrat " Füllen" auf der Registerkarte " Widget" und wählen Sie die Farbe "Schwachgrau".
- Wählen Sie die Form aus und drücken Sie CTRL/CMD + C, um sie zu kopieren. Ziehen Sie das zweite Rechteck an den unteren Rand des Bildschirms.
- Klicken Sie auf Eingabe und wählen Sie Variable. Klicken Sie auf der Registerkarte Widget in das Feld Wählen Sie eine Datenquelle. Klicken Sie auf den Pfeil neben App-Info und wählen Sie App-Name.
- Klicken Sie auf die Variable und ziehen Sie sie in die obere linke Ecke, über das Rechteck.
- Fügen Sie zwei weitere Variablen hinzu:
- Wählen Sie Schrittname aus der Liste der App-Info-Datenquellen. Positionieren Sie diese Variable in der oberen rechten Ecke.
- Wählen Sie Angemeldeter Benutzer aus der Liste der App-Info-Datenquellen. Positionieren Sie diese Variable in der unteren linken Ecke.
- Klicken Sie abschließend auf Schaltflächen und wählen Sie Menü. Klicken Sie auf die Schaltfläche und ziehen Sie sie an den unteren Rand des Bildschirms.
Ihr Basis-Layout wird wie folgt aussehen:
Als Nächstes werden wir die Funktionalität in einem Schritt aufbauen.
Schaltfläche "Hallo Welt" hinzufügen
- Wählen Sie auf der Registerkarte Schritte die Option Unbenannter Schritt. Doppelklicken Sie auf den Schritt, um ihn umzubenennen, und geben Sie "Display message" ein.
- Klicken Sie auf Buttons und wählen Sie den Button aus. Ändern Sie die Größe der Schaltfläche mithilfe der Quadrate um die Schaltfläche herum, um sie größer zu machen. Positionieren Sie die Schaltfläche in der Mitte des Bildschirms.
- Fügen Sie der Schaltfläche das folgende Styling hinzu:
- Text - "Hallo Welt"
- Farbe der Schaltfläche - Grün
- Symbol - Schwenkwerkzeug
Die Schaltfläche sieht dann so aus:
Als Nächstes fügen wir einen Auslöser zu dieser Schaltfläche hinzu, um sie funktionsfähig zu machen.
Hinzufügen eines Schaltflächenauslösers
- Wählen Sie die Schaltfläche "Hello World" aus und navigieren Sie zum Abschnitt " Trigger" auf der Registerkarte " Widget". Klicken Sie auf +, um einen neuen Auslöser hinzuzufügen.
- Nennen Sie den Trigger "Hallo Welt".
- Fügen Sie in der Then-Anweisung die folgende Logik hinzu**:Nachricht anzeigen** → Statischer Wert → Text → "Hallo Welt"
Ihr Trigger sollte folgendermaßen aussehen:
- Klicken Sie auf Speichern.
Wenn Sie die Anwendung testen, wird sie wie folgt funktionieren:
Übung 2: Eingabedaten speichern
In dieser Übung werden Sie eine Logik erstellen, die Eingabetext in einer Variablen speichert.
- Fügen Sie einen neuen Schritt hinzu und nennen Sie ihn "Nachricht speichern".
- Klicken Sie auf Eingabe und wählen Sie Text.
- Klicken Sie auf der Registerkarte " Widget " in das Feld " Datenquelle ". Wählen Sie + Variable hinzufügen.
- Nennen Sie die Variable "Nachricht" und klicken Sie auf + Erstellen.
Wenn Sie die App testen, wird die Texteingabe in der Variablen "message" gespeichert. Sie können den gespeicherten Wert in der Variablentafel auf der linken Seite des Fensters im Entwicklermodus sehen.
Übung 3: Zählen Sie die Anzahl der Hallos
In dieser Übung erstellen Sie eine Analyse, die zählt, wie oft die Schaltfläche Hallo Welt gedrückt wurde.
- Klicken Sie im Schritt Nachricht anzeigen auf Einbetten und wählen Sie Analyse. Klicken Sie auf das Widget links neben der Schaltfläche " Hallo Welt" und ziehen Sie es.
- Klicken Sie auf Analyse auswählen und dann auf Analyse erstellen.
- Klicken Sie in das Dropdown-Menü Anzeigetypen und wählen Sie Einzelwert.
- Klicken Sie auf die Registerkarte Operationen und fügen Sie eine neue Operation hinzu.
- Wählen Sie Aggregationsfunktionen und dann Anzahl der Datensätze.
- Klicken Sie auf den Seitenpfeil auf der rechten Seite des Editors, um den Visualisierungsbereich zu erweitern. Klicken Sie unterhalb von Wert auf + Feld hinzufügen und wählen Sie Anzahl der Datensätze.
- Klicken Sie auf den Titel der Analyse und benennen Sie sie in "Anzahl der Begrüßungen" um, dann klicken Sie auf Speichern.
- Klicken Sie auf Speichern und Schließen in der oberen rechten Ecke.
Da die Abschlüsse im Entwicklermodus nicht gespeichert werden, klicken Sie auf Ausführen, um diese Analyse imTulip Player zu testen.
Übung 4: Berechnen Sie das letzte Hallo mit einem Ausdruck
In dieser Übung werden Sie einen Ausdruck in einen Trigger schreiben, der in einer Variablen gespeichert wird, um das letzte Mal anzuzeigen, als die App "Hallo" gesagt hat.
- Navigieren Sie im Seitenbereich zur Registerkarte App.
- Wählen Sie neben Variablen die Option X.
- Klicken Sie auf + Variable erstellen.
- Nennen Sie die Variable "Last time you said hello" und klicken Sie auf + Create.
- Klicken Sie im Schritt Nachricht anzeigen auf die Schaltfläche Hallo Welt und fügen Sie einen neuen Auslöser hinzu.
- Fügen Sie dem Trigger die folgende Aktion hinzu**:Datenmanipulation** → Speichern → Ausdruck: 'Das letzte Mal, als Sie Hallo gesagt haben, war um' + ' ' + App Info.Current Date and Time.Current Time → Variable → Letztes Mal, als Sie Hallo gesagt haben
- Klicken Sie im Schritt Count of hellos auf Text und wählen Sie Variable.
- Klicken Sie im Seitenbereich unter Datenoptionen auf das leere Feld Datenquelle und wählen Sie dann die Variable Letztes Mal haben Sie Hallo gesagt.
Wenn Sie die Anwendung testen, wird der Ausdruck in der Variablen Last time you said hello gespeichert und als Zeitstempel angezeigt.
Nächste Schritte
Nachdem Sie nun Ihre erste App erstellt haben, erfahren Sie hier, wie Sie sie veröffentlichen und ausführen können.
Erfahren Sie mehr über die App-Erstellung:* Grundlagen der App-Erstellung* Einführung in den Tulip App-Editor* Wie man ein effektives Basislayout entwirft
Werden Sie ein Tulip-zertifizierter App-Builder:Grundlegende App-Builder-Zertifizierung
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!