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:

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.
   

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.
   

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.
   

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.
   

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.

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

Your base layout will look like this:

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.
   

3. Add the following styling to the button:

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

The button will look like this:

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.
   

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:

4. Click Save.

When you test the app, it will operate like this:

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.
   

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.

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.
   

4. Click the Operations tab and Add a new operation.

5. Select Aggregation Functions and then Count of Records.
   

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.
   

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.

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.
   

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

7. On the Count of hellos step, click Text and select Variable.

8. 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.

Next Steps

Now that you've built your first app, learn how to publish and run it here.

Learn more about app building:

• App Building Basics
• Intro to the Tulip App Editor
• How to Design an Effective Base Layout

Become a Tulip certified app builder:
Basic app builder certification

Did you find what you were looking for?

You can also head to community.tulip.co to post your question or see if others have faced a similar question!