> For the complete documentation index, see [llms.txt](https://docs.aitheon.com/creators-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aitheon.com/creators-studio/your-first-app.md).

# Your First App

This tutorial will teach you how to build an application user interface (UI), and that hails this user.

Let us build the app\`s logic first:

1. A user types their name in a UI field. For example, "Mark".
2. The app makes a personalized greeting phrase. 
3. The user sees "Hi, Mark!" on the same UI table.

Basically, the logic of most of the apps is the following: 

* take some input data;
* do something with this data;
* pass the result to output.

Aitheon Apps Editor will help you do this with ease - using visual programming tools.

## Create MyFirstApp Project

We\`ll create the project for the app from the very beginning of the Aitheon Services family  - from the Services Map.

* If you are not already there - open Navigation Bar and click GO TO DASHBOARD.  
* Scroll down and click CREATE DASHBOARD APP.
* Choose **Create New Dashboard Application**.
* Give a name and **CONTINUE**. 

After a few seconds, Creators Studio will get opened and you are ready to compose the app.

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MR5D-s1eDH27lzdlSRD%2F-MR5FlNWEmUc511YlurI%2Fcreate.gif?alt=media\&token=f7af6c8e-ca01-4cbe-8fa5-1472cb8a3075)

{% hint style="info" %}
Note: you create a project from any Aitheon service this way, or directly in Creators Studio. 
{% endhint %}

## Compose MyFirstApp

Click **.json** file to open Apps Editor - the visual (codeless) programming tool.

Find on the palette the **common** category and drag **inject** and **debug** components to the workspace. 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MR5Rz-sy0SJK1JQj_x3%2F-MR5Td8yjwd0wih-ezON%2Finject-debug.gif?alt=media\&token=dff5ba90-5ce0-4603-af98-983ef7c0eb96)

### Inject a Name

The **inject** component allows injecting some data into the app flow. Here it will help us to imitate the real input - it will just send the word "Mark" every time we press the component button.

Doubleclick the component and the Properties window will appear. Here we change the data type of the **payload** to **string** and put the value "Mark". Now the component will send the message "Mark" each time we press the button. So, now we have a component to moke the "Mark" input.  

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MR5io3cp8UwjPuMzr1c%2F-MR5kYPEMG46qxggq8qG%2Fmark.gif?alt=media\&token=ade1df96-d0e3-4236-956e-0097db3bb175)

### Debug the Result

The **debug** component shows the resulting message in any output point of the flow. In our instance, we have only one output point - the **inject** component output. Let\`s check, is it really "Mark".

Connect the **inject** component output to the **debug** component input. **Deploy** the flow. Switch the sidebar to the **debug** tab. 

Now press the inject button and watch the result in the sidebar.  

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MR5kfPiziSXniKBt6ye%2F-MR5lw-R-D_zejOdleol%2Fdebugmark.gif?alt=media\&token=b057ac59-f588-4b82-b4fc-b8f7afea6102)

The **debug** component shows us whether the result corresponds to our expectations. If no - we debug the flow.

### Change the Message

Now to change the phrase we will use the **function** component.

Drag it between the two others and double click. Copy and paste this code there:

```
msg.payload= "Hi, " + msg.payload + "!"; 
return msg;
```

This code updates the message putting it between "Hi, " and "!" so that the resulting message becomes "Hi, Mark!"

You need to know JavaScript to use **function** properly, but many things in Apps Editor are available without any coding knowledge.

Click Deploy, inject our "Mark" message, and watch the result in the **debug** tab:  

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MR5sSyf9N3sV_EE6SRZ%2F-MR5sum13SaBjHo9NTHU%2Ffunction.gif?alt=media\&token=b6462577-2b10-4f2f-83fa-f3c72af6c74d)

### UI Input

Now we have a valid application. But it takes the input inside itself and shows the result inside itself (in the debug tab, as we saw).

Let\`s create a real user interface input field instead of the internal **inject**.

The **dashboard** category contains components for UI.

* Drag a **text input** component to the workspace and connect it to **function**. Now we have two sources of input.
* Double click text input and set the **delay** before sending a message to 1000 ms -  otherwise, you are at risk of not finishing typing "Mark". (Or set to 0 ms - to send a message by hitting **Enter**).
* **Deploy**. 
* Right-click on the **.json** file and open a testing **UI Viewer** tab.

Now we can test the real UI input. 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MR9NG15f8YVnzAlhfB1%2F-MR9NJ9gMsLocQ6Q1Em3%2Finput.gif?alt=media\&token=ff6ad921-4472-45da-ad18-823b8d9997e8)

### UI Output

It\`s time to make a real UI widget for the output.

* Drag a **text** component to the workspace and connect it with **function**.
* In the **text** component parameters change the **label** to "Greeting" and choose the layout. 
* Deploy and test in the **UI Viewer** tab. 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MR9ODRwlcS4Q5_mhXvP%2F-MR9Q-H4oSM_R4H-g9LI%2Ftext%20out.gif?alt=media\&token=1dc88484-32d1-4eaf-9cc1-33de47cf68d0)

## Release MyFirstApp

We have to release the app to use it in Aitheon services.

* Choose unnecessary components and hit **Delete** - we don\`t need **inject** and **debug** components anymore. (Optional) 
* Adjust the appearance of the widgets. (Optional - we can do this later on the dashboard)
* Make **Quick Release** and wait until it **Completed**. 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MRA9Nrhu_j_beWrhONP%2F-MRAC6LlkKihHrnqEcEq%2Frelease.gif?alt=media\&token=158b910a-d967-4de4-8ca2-223cbc6f41e9)

## Add the Dashboard

Add the dashboard from the list in **Choose from Existing Application**. 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MRACbSzdyS-TpUmTpAr%2F-MRAFhlRRPzhUifTHV6d%2Fdashboard.gif?alt=media\&token=5ada0b71-1738-462f-9f86-1055754ac8c8)

## Use MyFirstApp

Now you can adjust the appearance and use the app. 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MRACbSzdyS-TpUmTpAr%2F-MRAGSaz25CwpxM3uQ6e%2Fusing.gif?alt=media\&token=7a53ed88-f597-45d4-9b60-e49131d017b4)

Congrats! Your first application is ready!