---
title: "Anleitung: Erstellen Sie Ihre erste App"
slug: "walkthrough-build-an-app"
status: "update"
updated: 2026-10-22T09:10:34Z
published: 2026-10-22T09:10:34Z
canonical: "support.tulip.co/walkthrough-build-an-app"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.tulip.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Anleitung: Erstellen Sie Ihre erste App

**In dieser Anleitung werden Sie: –** **eine Meldung in einem Schritt anzeigen –** **eine benutzerdefinierte Meldung eingeben –** **die Anzahl der Meldungen ermitteln –** **Datum und Uhrzeit der zuletzt angezeigten Meldung dokumentieren**

In dieser Anleitung lernen Sie die Grundlagen von Apps kennen, indem Sie mehrere funktionsfähige App-Komponenten erstellen.

Am Ende der Übungen verfügen Sie über eine „Hello World“-App, die wie folgt aussieht:

![ex first app full walkthrough](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20full%20walkthrough.gif)

## Übung 1: Erstellen einer „Hello World“-App

In dieser Übung erstellen Sie eine einfache App, die beim Klicken auf eine Schaltfläche eine Meldung anzeigt.

### Erstellen Sie eine App

1. Klicken Sie auf der Registerkarte **„Apps** “ auf **„Apps**“.![Apps tab](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Apps%20tab.png)
2. Klicken Sie oben rechts auf  **„+ App erstellen** “.
3. Benennen Sie die App „Hello World – Beispiel“. Optional können Sie eine Beschreibung hinzufügen, damit andere Benutzer wissen, wozu diese App dient.![Name app ex](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Name%20app%20ex.png)
4. Klicken Sie auf  **„+ Erstellen**“. Auf der Seite mit den App-Details können Sie entweder oben rechts auf **„Bearbeiten“** klicken oder auf den Namen **des Schritts „Untitled“** klicken, um den App-Editor zu öffnen. Bevor wir mit der Erstellung beginnen, fügen wir dem Basis-Layout einige grundlegende Designelemente hinzu.

### Ein Basis-Layout entwerfen

1. Wählen Sie auf der Registerkarte **„Schritte“** auf der linken Seite **„Grundlayout“** aus.
2. 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 App-Bildschirm erstreckt, und ziehen Sie es dann an den oberen Bildschirmrand. Um die Farbe des Rechtecks zu ändern, klicken Sie auf das Quadrat **„Füllung“** auf der Registerkarte **„Widget“** und wählen Sie die Farbe **„hellgrau“** aus.![ex first app base layout1](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20base%20layout1.gif)
3. Markieren Sie die Form und drücken Sie **STRG/CMD + C**, um sie zu kopieren. Ziehen Sie das zweite Rechteck an den unteren Bildschirmrand.
4. Klicken Sie auf **„Eingabe“** und wählen Sie **„Variable“** aus. Klicken Sie auf der Registerkarte **„Widget“** in das Feld **„Datenquelle auswählen** “. Klicken Sie auf den Pfeil neben **„App-Info** “ und wählen Sie **„App-Name“** aus.
5. Klicken Sie auf die Variable und ziehen Sie sie in die obere linke Ecke, über das Rechteck.![ex first app base layout2](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20base%20layout2.gif)
6. Fügen Sie zwei weitere Variablen hinzu:
7. Wählen Sie **„Schrittname“** aus der Liste der App-Info-Datenquellen aus. Platzieren Sie diese Variable in der oberen rechten Ecke.
8. Wählen Sie **„Angemeldeter Benutzer“** aus der Liste der App-Info-Datenquellen aus. Platzieren Sie diese Variable in der unteren linken Ecke.
9. Klicken Sie abschließend auf **„Schaltflächen“** und wählen Sie **„Menü“** aus. Klicken Sie auf die Schaltfläche und ziehen Sie sie an den unteren Bildschirmrand.

Ihr Grundlayout sieht nun wie folgt aus:![ex first app base layout](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20base%20layout.png)

Als Nächstes fügen wir einem Schritt eine Funktion hinzu.

### „Hello World“-Schaltfläche hinzufügen

1. Wählen Sie auf der Registerkarte **„Schritte“** ***den Schritt „Untitled Step“*** aus. Doppelklicken Sie darauf, um ihn umzubenennen, und geben Sie „Meldung anzeigen“ ein.
2. Klicken Sie auf **„Schaltflächen“** und wählen Sie die **Schaltfläche** aus. Vergrößern Sie die Schaltfläche mithilfe der Quadrate um die Schaltfläche herum. Positionieren Sie die Schaltfläche in der Mitte des Bildschirms.![ex first app add button](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20add%20button.gif)
3. Fügen Sie der Schaltfläche das folgende Styling hinzu:
4. Text – „Hello World“
5. Schaltflächenfarbe – Grün
6. Symbol – Verschiebungswerkzeug

Die Schaltfläche sieht dann wie folgt aus:![ex first app button style](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20button%20style.png)

Als Nächstes fügen wir dieser Schaltfläche einen Trigger hinzu, damit sie funktionsfähig ist.

### Schaltflächen-Trigger hinzufügen

1. Wählen Sie die Schaltfläche „Hello World“ aus und navigieren Sie im Reiter **„Widget“** zum Abschnitt **„Trigger** “. Klicken Sie auf  **„+“**, um einen neuen Trigger hinzuzufügen.![ex first app add a new trigger](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20add%20a%20new%20trigger.png)
2. Benennen Sie den Trigger „Hello world“.
3. Fügen Sie in der „Then“-Anweisung die folgende Logik hinzu:**„Meldung anzeigen** “ → **„Statischer Wert“** → **„Text“** → „Hello World“

Ihr Trigger sollte wie folgt aussehen:![ex first app Hello world button trigger](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20Hello%20world%20button%20trigger.png)

1. Klicken Sie auf **„Speichern**“.

Wenn Sie die App testen, funktioniert sie wie folgt:![ex first app display hello world message ](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20display%20hello%20world%20message%20.gif)

## Übung 2: Eingabedaten speichern

In dieser Übung erstellen Sie eine Logik, die den eingegebenen Text in einer Variablen speichert.

1. Fügen Sie einen neuen Schritt hinzu und nennen Sie ihn „Nachricht speichern“.
2. Klicken Sie auf **„Eingabe“** und wählen Sie **„Text“** aus.
3. Klicken Sie auf der Registerkarte **„Widget** “ in das Feld **„Datenquelle** “. Wählen Sie  **„+ Variable hinzufügen**“.
4. Benennen Sie die Variable „message“ und klicken Sie auf  **„+ Erstellen**“.![ex first app Add variable](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20Add%20variable.png)

Wenn Sie die App testen, wird der eingegebene Text in der Variablen „message“ gespeichert. Den gespeicherten Wert können Sie im Bereich **„Variablen“** auf der linken Seite des Fensters „Entwicklermodus“ sehen.![ex first app store message](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20store%20message.gif)

## Übung 3: Anzahl der „Hello“-Eingaben zählen

In dieser Übung erstellen Sie eine Analyse, die zählt, wie oft die Schaltfläche **„Hello world“** gedrückt wurde.

1. Klicken Sie im Schritt **„Nachricht anzeigen** “ auf **„Einbetten“** und wählen Sie **„Analyse“** aus. Klicken Sie auf das Widget und ziehen Sie es links neben die Schaltfläche **„Hello world** “.
2. Klicken Sie auf **„Analyse auswählen** “ und anschließend auf **„Analyse erstellen**“.
3. Klicken Sie in das Dropdown-Menü „Anzeigetypen“ und wählen Sie **„Einzelwert“** aus.![ex first app single value display](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20single%20value%20display.png)
4. Klicken Sie auf die Registerkarte **„Operationen** “ und dann auf **„Neue Operation hinzufügen**“.
5. Wählen Sie **„Aggregationsfunktionen“** und anschließend **„Anzahl der Datensätze**“.![ex first app count of records operation](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20count%20of%20records%20operation.png)
6. Klicken Sie auf den seitlichen Pfeil rechts neben dem Editor, um den **Visualisierungsbereich** zu erweitern. Klicken Sie unter **„Wert“** auf  **„+ Feld hinzufügen“** und wählen Sie **„Anzahl der Datensätze“** aus.![ex first analysis visualization panel fields](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20analysis%20visualization%20panel%20fields.gif)
7. Klicken Sie auf den **Titel der Analyse** und benennen Sie sie in „Anzahl der ‚hellos‘“ um. Klicken Sie anschließend auf **„Speichern**“.
8. Klicken Sie oben rechts auf **„Speichern und schließen** “.

Da Vervollständigungen im Entwicklermodus nicht gespeichert werden, klicken Sie auf „Ausführen“, um diese Analyse im Tulip Player zu testen.![ex first app exercise 3 test](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20exercise%203%20test.gif)

## Übung 4: Berechne das letzte „Hallo“ mit einem Ausdruck

In dieser Übung schreiben Sie einen Ausdruck in einen Trigger, der in einer Variablen gespeichert wird, um anzuzeigen, wann die App das letzte Mal „Hallo“ gesagt hat.

1. Navigieren Sie im **Seitenbereich** zur **Registerkarte „App**“.
2. Wählen Sie neben **„Variablen“** die Option **„X“** aus.
3. Klicken Sie auf  **„+ Variable erstellen**“.
4. Benennen Sie die Variable „Das letzte Mal, als Sie ‚Hallo‘ gesagt haben“ und klicken Sie auf  **„+ Erstellen**“.![ex first app create new variable](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20create%20new%20variable.gif)
5. Klicken Sie im Schritt **„Meldung anzeigen** “ auf die **Schaltfläche „Hello world** “ und fügen Sie einen neuen Trigger hinzu.
6. Fügen Sie dem Auslöser die folgende Aktion hinzu:**Datenbearbeitung** → **Speichern** → **Ausdruck**: „Das letzte Mal, als du ‚Hallo‘ gesagt hast, war am“ + „ “ + App-Info. Aktuelles Datum und Uhrzeit. Aktuelle Uhrzeit → **Variable** → Das letzte Mal, als du ‚Hallo‘ gesagt hast

![ex first app trigger store hello expression](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20trigger%20store%20hello%20expression.png)

1. Klicken Sie im Schritt **„Anzahl der ‚Hallo‘-Grüße** “ auf **„Text“** und wählen Sie **„Variable“** aus.
2. Klicken Sie im **Seitenbereich** unter **„Datenoptionen“** auf das leere Feld **„Datenquelle“** und wählen Sie dann die Variable **„Das letzte Mal, als du ‚Hallo‘ gesagt hast** “ aus.

Wenn Sie die App testen, wird der Ausdruck in der Variablen **„Das letzte Mal, als du ‚Hallo‘ gesagt hast** “ gespeichert und als Zeitstempel angezeigt.![ex first app ex 4 test](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20ex%204%20test.png)

## Nächste Schritte

Nachdem Sie nun Ihre erste App erstellt haben, erfahren Sie [hier](/r230/docs/publish-and-run-apps), wie Sie sie veröffentlichen und ausführen können.

**Erfahren Sie mehr über die App-Erstellung:*** [Grundlagen der App-Erstellung*](/r230/docs/app-building-basics) [Einführung in den Tulip App Editor*](/r230/docs/intro-to-the-tulip-app-editor) [So entwerfen Sie ein effektives Basis-Layout](/r230/docs/how-to-design-an-effective-base-layout)

**Werden Sie zertifizierter Tulip-App-Entwickler:**[Zertifizierung zum App-Entwickler (Grundstufe](https://university.tulip.co/learn/courses/6/certificate-basic-app-builder))

---

Hast du gefunden, wonach du gesucht hast?

Sie können auch auf [community.tulip.co](https://community.tulip.co/?utm_source=intercom&utm_medium=article-link&utm_campaign=all) vorbeischauen, um Ihre Frage zu stellen oder zu sehen, ob andere bereits ein ähnliches Problem hatten!