Sandboxes Page

There are Sandboxes and Repositories tabs near the Home page in Creators Studio.

On the Home page, you may see all of your projects. The main work occurs on the Sandboxes page.

A sandbox is a virtual environment for your work on an application. To bring your app to the real system you need to release it.

If there is no running sandbox, you will be prompted to choose one:

After this Sandboxes tab will open. Your main work environment will look like this:

It contains:

  • Creators Studio tabs (1).

  • Sandboxes tab menu (2).

  • Main Editor basis (3).

  • Apps Editor tool for visual programming (4).

Sandboxes menu

New Project (1) opens a new project window.

Load Project (2) allows you to choose your existing project and open it in this sandbox (editor).

Settings (3) allows you to place a request with your app to Marketplace. You need to set up settings for the application.

Releases (4) allows you to make a release of your app manually.

Terminate (5) terminates a sandbox. Click it when you have done your work with a project. Also, the sandbox will terminate automatically in 15 minutes when you stop your activities in it.

IO (6) shows a list of your app projects. Choose a project and in a pop-up window, choose sockets the application node needs. (See more in Aitheon Core guide / Nodes and Input and Output Sockets).

Install Component (7) allows you to add a new component to the palette.

Quick Release (8) allows making a release of your app in one click. Creators Studio will take the project`s name for an app and will give a build number automatically.

Quick Release Status (9) shows your release status: when In Progress changes to Complete – your app is ready to use.

Main Editor Menu

For development purposes, Creators Studio uses a common and clear Main Editor.

Here we will overview some basics of the Main Editor interface, useful for codeless application composing.

On the left sidebar (1), there are the following buttons (downward):

  • Editor's menu.

  • The "two sheets of paper" button (highlighted) shows and hides the EXPLORER and all the columns on the right – (2), (4), (5).

  • Search (and replace) button.

  • The 'mini mindmap' button with a number in the blue circle leads to the Source Control tab that shows all the changes in your projects and allows you to commit and push the changes to git in order to save the project and work stages.

  • Run/debug button.

  • Extensions tab.

  • Aitheon Devises tree. It allows you to run an AOS application on the device right from Creators Studio.

  • Accounts.

  • Manage menu.

OPEN EDITORS field (2) contains a list of all opened files in Creators Studio. They open in browser-like tabs (3), and you can manage them the same way.

WORKSPACE field (4) is basically a folder/file explorer. When you load (or create) a project, it appears here as a folder that you can expand (and collapse) and choose a file you need to edit. In the project FloorDashboard, we chose the {} floordashboard.graph-app.json file, and it opens in the editor. For visual (codeless) programming, you need to open this {}....json type of files in the main project folder.

OUTLINE and TIMELINE fields (5) are more useful for coding projects. As well as the bottom field (6).

Right-click on a folder (7) shows a useful menu:

You can Remove Folder from Workspace (8), for example.

It is very important to remove projects from the workplace after finishing with them. Before you did this, all your edits will be available just for you, but not for other users.

BUT! Don't forget to save the project properly before you remove its folder from the workspace: Commit and Push or Release.

Right-click on the {}....json file shows another useful menu. For example, you can open a window with your app`s user interface view (9), so you may observe the appearance before you release your app.

Aitheon Applications Editor

Apps Editor made for visual flow programming, which means you can compose an application just by dragging, wiring, and setting up visual components (nodes) on the editor`s table. A flow represents some logic that follows when a message (data) comes to the app`s input. The app gives some result – it may be some output message or simply a widget that shows you valuable information about the system that sends data.

Here we will overview the main features of the Apps Editor tool:

  • Header (1).

  • Palette (2).

  • Workspace (3).

  • Sidebar (4).

In the Header you can see:

  • A project name (1).

  • Deploy button (2) that runs your project and gives a list of deployment options.

  • Options menu button (3) shows a list of options for the editor.

Header / Menu / Subflow

There is the Subflow element among all the interesting menu options.

A subflow allows you to fold some flow into one component that you may use in other flows – it will appear on the palette (1).

Click the Header`s menu and choose Subflows (2). You can Create a new Subflow (3) in a new flow tab or instantly transform selected components and connections in one subflow (4).

Double-click a subflow tab to change its name and description. A subflow settings are at the top of the tab (5).

Palette

Palette is a list of components that you can drag to a workspace and wire to compose an application:

  • To filter nodes (components) (1), begin to type a node`s name.

  • Components are stored in categories (2) that you can expand and collapse for your convenience.

  • Components (3) is the main part of the palette – you can drag them from here to the workspace.

  • Collapse or expand all the categories with the bottom arrows (4).

Workspace

Workplace is a table where you can drag needed components, wire them, organize them to provide the logic of your app:

  • The workspace table (1) to place components on.

  • Tabs (2) for different flows of your app. Work alike tabs in browsers.

  • Tabs control buttons (3): Add a Flow and a List of Flows to choose and switch.

  • Table control buttons (4): Toggle Navigator (for dragging the table), Zoom Out, Reset Zoom, and Zoom In the table.

Sidebar helps to understand particular components and flows features:

It consists of info, help, debug, and other tabs (1).

In this pic, you can see the information tab.

The info tab

  • Flows information field (2). You can easily find a needed component, change its properties, enable or disable it with one click.

  • A component information field (3). When you choose a component on the workspace, its parameters are shown here.

The Help tab

  • A list of components (1). Choose one to see help info.

  • Help information about the component (2). About how its properties and how to use it.

The debug tab

The debug tab allows you to see the result of some flow by using the Debug component in the table:

You may select the source of data (1), clear the log (2). This component and this tab on the sidebar very useful when you want to see what result shows some piece of flow (or entire app) before releasing an app.

In this example, we prepared a function that converts seconds of the current time to the conventional form. Then we drag an inject component, add topic Current Time to the message object (default payload - seconds - will go to our function component converter), add a debug component, connect, Deploy, and press the inject button.

The debug window shows the topic and current time.

So, at any step of a flow, we can examine the current message output.

Explore more at the Debug component chapter.