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:

A user types their name in a UI field. For example, "Mark".
The app makes a personalized greeting phrase.
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.

Note: you create a project from any Aitheon service this way, or directly in Creators Studio.

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.

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.

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.

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:

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.

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.

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.