Overview

Understand what the App Builder is, get to know its main components and how the App Builder is integrated into the Heisenware platform.

The App Builder is the primary low-code tool within the Heisenware platform. To access it:

1. Navigate to the Apps tab in your Workspace.

2. Click on Build next to the app you want to work on.

The App Builder is designed to focus on one app at a time. If you need to work on multiple apps simultaneously, you can open several App Builder tabs in your browser. Collaboration within the App Builder is also possible, allowing Workspace members to work together on the same app.

Build time vs. runtime

In the context of the App Builder, it's crucial to differentiate between build time and runtime. Build time is when low-code developers design and configure the application using the App Builder, shaping the structure and logic of apps. On the other hand, runtime is the live phase, where the application actively runs, responds to user inputs, processes data, and executes functions, allowing users to interact with the live app.

Progressive Web Apps (PWAs)

Technically, apps created with the App Builder are Progressive Web Apps (PWAs). PWAs offer a user experience similar to native mobile apps, combining the strengths of web and mobile application development. They provide several advantages, including:

• Improved performance: Fast load times, smooth animations, and responsive interfaces for a seamless user experience.

• No installation required: Users can access PWAs without downloading and installing from an app store, reducing friction.

• Cost-effective development: Developing a PWA can be more cost-effective than building native mobile apps, as it eliminates the need for separate development for different platforms.

Drag and drop

Drag and drop is crucial when using the App Builder. It allows you to:

• Place elements and change their position in both the frontend and backend.

• Connect all elements to each other using drag and drop.

Components

The App Builder combines all components to build apps in just one user interface:

• Left sidebar with page panel [a], functions panel [b] and file manager [c]

• Top bar [d] with UI elements, widgets, settings, and options

• Logic board [e] to build backend with functions [g] and sections [f] to group them

• UI editor [h] to build frontend

App Builder

Page panel

The page panel, situated in the upper left corner, is your hub for managing all pages and subpages within an app. It allows easy navigation through the app while working in the App Builder.

Functions panel

Located in the middle of the left sidebar, the functions panel provides functions for building the backend. Additional functions appear here when deploying an edge connector, using a code adapter, or creating an object of a class.

File manager

The bottom panel of the left sidebar is the file manager. Here, you can upload, store, and manage custom, external resources for use in your app, such as logos for branding purposes

Top bar

The top bar houses various settings, access to UI elements, widgets, context settings, general information, and functionality unrelated to the app itself.

Logic board

The logic board is the core space for building the complete backend of your app. It is where you integrate data, build functionality, and design business logic using functions, extending and linking them.

Functions

Functions, the key building blocks in Heisenware, perform specific actions and are either built-in or adapted from other systems or software libraries.

Sections

Organize functions into logical units using sections, impacting only their representation. Sections can be named, folded, and unfolded to maintain a tidy logic board.

Section options

• Create a new section using the + icon in the bottom right-hand corner.

• Change a section's name with the edit icon, and remember to save changes with the save icon.

• Delete a section with the trash can icon, exercising caution as it removes the section and its content.

• Duplicate a section with the duplicate icon.

• Clear cache of a section using the clear cache icon.

UI editor

The UI editor employs a WYSIWYG approach for building the app's frontend, making design intuitive and efficient.

Widgets

Widgets are the fundamental building blocks for user interfaces, including input, trigger, and display widgets. They can freely be placed in the frontend.

The building blocks for user interfaces are called widgets. They can freely be placed in the frontend.

There are three types of widgets:

• Input widgets enable users to enter data for functions.

• Trigger widgets (buttons) generate events to trigger functions.

• Display widgets visualize data from the backend.

Static UI elements

Additional UI elements, like text boxes, shapes, icons, images, and files, enhance the user interface but are not connected to the backend.

Device types

Build interfaces for various screen sizes and device types. Switch between device types using the icons in the top bar. Edit rotated screen versions for smartphones and tablets, adjusting widget size and position for each device type while remaining within one page.