---
title: "Walkthrough: Build your first app"
slug: "walkthrough-build-your-first-app"
updated: 2025-10-27T15:30:11Z
published: 2025-10-27T15:30:11Z
canonical: "support.tulip.co/walkthrough-build-your-first-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.

# Walkthrough: Build your first app

**In this walkthrough, you will:**

- **Display a message on a step**
- **Input a custom message**
- **Create a count of messages**
- **Document the date and time of the most recent message display**

In this walkthrough, you’ll learn the basics of apps by building multiple, functional app components.

At the end of the exercises, you’ll have a Hello World app that will look like this:

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

## Exercise 1: Create a Hello World app

In this exercise, you will create a simple app that displays a message from a button trigger.

### Create an app

1. In the **Apps** tab, click **Apps**. ![Apps tab](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Apps%20tab.png)
2. Click **+ Create App** in the top right corner.
3. Name the app “Hello World - Example”. Optionally, you can add a description so other users know what this app is for. ![Name app ex](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Name%20app%20ex.png)
4. Click **+ Create**. From the app details page, you can either click **Edit** in the top right corner, or click the **Untitled Step** name to enter the App Editor. Before we build anything, let’s add some basic design elements to the base layout.

### Design a base layout

1. From the **Steps** tab on the left, select **Base Layout**.
2. Click **Icons**, and select a rectangle shape. Adjust the width of the rectangle to span across the app screen, then click and drag it to the top of the screen. To change the rectangle’s color, click the **Fill** square in the **Widget** tab and select the color **faint gray**. ![ex first app base layout1](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20base%20layout1.gif)
3. Select the shape and press **CTRL/CMD + C** to copy. Drag the second rectangle to the bottom of the screen.
4. Click **Input** and select **Variable**. In the **Widget** tab, click in the **Select a data source** field. Click the arrow next to **App Info** and select **App name**.
5. Click and drag the variable to the top left corner, on top of the rectangle. ![ex first app base layout2](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20base%20layout2.gif)
6. Add two more variables:

- Select **Step name** from the app info data source list. Position this variable in the top right corner.
- Select **Logged-in user** from the app info data source list. Position this variable in the bottom left corner.

1. Lastly, click **Buttons** and select **Menu**. Click and drag the button to the bottom of the screen.

Your base layout will look like this: ![ex first app base layout](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20base%20layout.png)

Next, we’ll build functionality on a step.

### Add hello world button

1. In the **Steps** tab, select ***Untitled Step***. Double-click on it to rename it and type “Display message”.
2. Click **Buttons** and select the **Button**. Resize the button to be larger using the squares around the button. Position the button in the middle of the screen. ![ex first app add button](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20add%20button.gif)
3. Add the following styling to the button:

- Text - “Hello World”
- Button color - Green
- Icon - Pan tool

The button will look like this: ![ex first app button style](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20button%20style.png)

Next, we’ll add a trigger to this button to make it functionable.

### Add a button trigger

1. Select the Hello World button and navigate to the **Triggers** section in the **Widget** tab. Click **+** to add a new trigger. ![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. Name the trigger “Hello world”.
3. In the Then statement, add the following logic: **Show Message** → **Static Value** → **Text** → “Hello World”

Your trigger should match the following: ![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. Click **Save**.

When you test the app, it will operate like this: ![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)

## Exercise 2: Store input data

In this exercise, you will build logic that stores input text to a variable.

1. Add a new step, and name it “Store message”.
2. Click **Input** and select **Text**.
3. In the **Widget** tab, click into the **datasource** box. Select **+ Add variable**.
4. Name the variable “message” and click **+ Create**.  

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

When you test the app, the text input saves into the variable “message”. You can see the stored value in the **Variables** panel on the left side of the Developer Mode window. ![ex first app store message](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20store%20message.gif)

## Exercise 3: Count the number of hellos

In this exercise, you will create an analysis that counts how many times the **Hello world** button was pressed.

1. On the **Display message** step, click **Embed** and select **Analysis**. Click and drag the widget to the left of the **Hello world** button.
2. Click **Select an Analysis** and then **Create Analysis**.
3. Click into the display types dropdown and select **Single value**. ![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. Click the **Operations** tab and **Add a new operation**.
5. Select **Aggregation Functions** and then **Count of Records**. ![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. Click the side arrow on the right side of the editor to expand the **Visualization Pane**. Below **Value**, click **+ Add field** and select **Count of Records**. ![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. Click on the **analysis title** and rename it “Count of hellos”, then click **Save**.
8. Click **Save and Close** in the top right corner.

Since completions do not save in Developer Mode, click Run to test this analysis in theTulip Player. ![ex first app exercise 3 test](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20exercise%203%20test.gif)

## Exercise 4: Calculate last hello with an expression

In this exercise, you will write an expression in a trigger that stores to a variable to show the last time the app said hello.

1. In the **Side Pane**, navigate to the **App Tab**.
2. Next to **Variables**, select **X**.
3. Click **+ Create Variable**.
4. Name the variable “Last time you said hello” and click **+ Create**. ![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. On the **Display message** step, click the **Hello world button** and add a new trigger.
6. Add the following action to the trigger: **Data manipulation** → **Store** → **Expression**: ‘The last time you said hello was at’ + ‘ ‘ + App Info.Current Date and Time.Current Time → **Variable** → Last time you said hello

![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. On the **Count of hellos** step, click **Text** and select **Variable**.
2. In the **Side Pane** under **Data options**, click the blank **Datasource** field and then select the **Last time you said hello** variable.

When you test the app, the expression saves into the variable **Last time you said hello** and appears as a timestamp. ![ex first app ex 4 test](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20app%20ex%204%20test.png)

## Next Steps

Now that you've built your first app, learn how to publish and run it [here](/r230/docs/publish-and-run-apps).

**Learn more about app building:**

- [App Building Basics](/r230/docs/app-building-basics)
- [Intro to the Tulip App Editor](/r230/docs/intro-to-the-tulip-app-editor)
- [How to Design an Effective Base Layout](/r230/docs/how-to-design-an-effective-base-layout)

**Become a Tulip certified app builder:** [Basic app builder certification](https://university.tulip.co/certification-exam-basic-app-builder)

---

Did you find what you were looking for?

You can also head to [community.tulip.co](https://community.tulip.co/?utm_source=intercom&utm_medium=article-link&utm_campaign=all) to post your question or see if others have faced a similar question!

**Developer Mode**

**Developer Mode**is a dedicated interface to test your applications. Dev mode doesn't write to **Tables**or create **Completions**so production data isn't impacted.

**Tulip Player**

**Tulip Player** is the Windows/Mac executable program where users can run Tulip apps. Tulip player allows you to create a more seamless user experience by removing the need for a web browser and allows increased IT controls.