How to Create an App: Navigating No-Code Development

In this whitepaper, we delve into the essential elements of the AppMaster no-code platform, offering a concise guide for newcomers.

Those with a background in traditional programming or experience with other no-code/low-code platforms will find many familiar concepts in AppMaster.

Contrary to other no-code and low-code solutions, AppMaster adopts a traditional approach to application development. The primary unit in AppMaster is a ‘project’, not an ‘application’ as seen in other platforms. These projects can include multiple backend, web, and mobile applications, employing a client-server architecture instead of the monolithic structure found in platforms like Bubble.

For users transitioning from other no-code platforms, it’s important to note that AppMaster involves creating backend, web, and mobile components separately, each with its own set of tools. A common challenge for such users is remembering the need to develop separate applications and construct the logic within these individual apps.

How to start?

For most projects, you will need to build backend and web, or backend and mobile or even all types of applications.

IMPORTANT Be sure to implement most of your logic in the backend application. Never place important logic in the web or mobile applications where you have no control. Frontend is for data visualization and information gathering from user input only.

The most straightforward way is to start by creating a backend application.

Backend applications

Backend Step 1

Define your data models in Backend Data Models Designer. You can think of each model as a table in the SQL database (with relations). In AppMaster Data Models are not just used to define primary database tables but also as a structure declaration across project. E.g., if your logic uses the data model ‘User,’ you can be sure that any structure of that type will have the same set of fields.

Right Click on the canvas of the Data Models Designer to create a new model and drag from one model border to another model border to create a relation. Click on the relation or model field to edit it.

Be careful with field properties like Unique, Not NULL or Index: if you apply NOT NULL or Unique policy to the existing database with empty or duplicated values, DB schema migration will eventually fail.

Backend Step 2

Create business processes for your application. Business Process (BP) in terms of AppMaster Platform is just a unique term for a Function in classic programming.

Every backend BP has 2 mandatory blocks: Start and End. If you need to pass data to your BP, you need to define variables in the Start block (it will work like arguments in functions from classic programming) and connect them to your blocks inside of the BP.

To return data from the BP you can add variables to the End block (like return in functions from classic programming).

There are 2 types of connections between BP blocks:

• solid blue arrow line called Flow Connections and defines the order of block execution (which block should be executed next)
• thin lines of multiple colors called Variable Connections that define the data bindings (from where to get data - data connection between BP blocks). Every color is a different data type

Usually, the places in BP Blocks for Flow or Variable connections are called connectors. All connectors on the left side of the block are In Connectors (receives Flow or data), and on the right side are Out Connectors (passes Flow or data forward).

To create a connection, you need to drag from one connector to another (drag between blocks you need to connect).

No matter from which side you will start dragging, it will form a connection.

BP editor automatically checks data types for Variable Connections and will not let you connect if data types are not identical, it also will prevent any loops or bad connections.

You can call one BP from another - just drag and drop the appropriate block from the left panel. We frequently use this approach to minimize logic complexity and reuse the same logic multiple times in the project.

There are 2 types of variables in the backend applications that you can place to the BP to temporarily store data:

• Local Variables - to store data during the lifecycle of the current BP (most efficient, in-memory only)
• Global Variables - will store your data during the lifecycle of the backend application (also in-memory only, will be reset once app restarted)

Before you will be able to use Global Variable by dragging it from the left panel of BP Editor, you need to create one using a section of the backend logic.

If your BP needs to be called from an external source via API (from your web, mobile, using postman/curl, from an external system), you need to attach BP to the endpoint.

Backend Step 3

Create endpoints. In AppMaster we use the same classic REST API approach for endpoints. While AppMaster supports not just REST API Endpoints but also WebHooks and WSS endpoints, we will focus on the first type.

When creating endpoints, please adhere to the REST API standard in terms of methods (GET, POST, PUT, PATCH, DELETE), payloads (use JSON), and URLs (no non-ASCII characters, no spaces, starts and ends with a slash).

The process of creating endpoints is very simple and straightforward: select BP, define URL and REST method, and if you need authorization on those endpoints - check middleware settings.

Once data models, business processes and endpoints are ready, it’s time to publish - hit the publish button! Usually, in under 30 seconds AppMaster Platform will take all your blueprints (yep, actually, everything that you have done is created blueprints for the future software), generate source code, compile, pack to the docker image and deploy to the AppMaster cloud. When the process of the publication is finished, you can open REST API documentation (OpenAPI/Swagger) and test your endpoints with Swagger built-in requests or using 3rd party tools like Postman or Insomnia.

IMPORTANT. If you running with Learn & Explore subscription, our Resource Saving Daemon will stop your application container after 30 minutes of your inactivity in Studio. To run again — click on the Deploy Plan toggle or publish once again.

Web applications

When the backend is properly planned and created, it’s time to move to the frontend. We will start with the web application.

Web App Step 1

Create a web application if you don’t have one in the project. As of now, we have 2 types of Web Application Designers: current and new (in beta). The major difference is the amount of customization. Current generation WebApp Designer has very limited UI customization capabilities, but it is simple and easy to build standard UI interfaces of admin panels and customer portals. The new one (currently in beta) has a full customization of the UI look and feel - a flexbox approach with layouts from SPA (Vue, React way).

Both designers have Business Processes built in, including triggers and a bunch of useful blocks.

Web App Step 2

Start designing the UI of your web application by dragging and dropping UI elements from the top panel (current designer) or left panel (new designer). For some elements that have enumeration inside (like tables and lists), you will need to select the data model during the initial drop phase to adjust the element automatically.

There are 2 types of business processes in Web Applications: Trigger and Standard. Triggers are available for each UI element and for application-wide scope (app triggers). To access the UI element’s trigger, select the element and, in the BP tab, create one. Unlike standard BPs, triggers have multiple start blocks: one block for each event and no End block. Since triggers never return any values, there is no need for End blocks. You still can create standard business processes in web applications, but the only way to execute them is to call them from the triggers. That’s a good approach to move frequently used logic to the standard web BPs and just call it from triggers.

IMPORTANT. Please remember that backend BPs will run inside backend applications, web app BP will run in the users’ browsers, and minimizing web workload will be beneficial to user experience.

There are a couple of very important application-level triggers. For example, App onLaunch fires when an application in the browser just launched. That’s the best place to check if your user is authenticated and, if not, redirect to the right page (if you need auth at all).

Don’t forget to save your web application schema and publish your project to see changes.

Mobile applications

When you need to create a mobile application, the process is the same as with a web application: create screens, place UI elements, create UI elements triggers, adjust App onLaunch trigger and you are ready to go. There is no web preview for AppMaster mobile applications, but you can install AppMaster Developer mobile application for Android and IOS to live preview your apps with all hardware-related features like BLE, NFC and etc.

When you have finished developing your mobile app and it is ready to be published, AppMaster has a special publication wizard available from the context menu in the list of all mobile applications in the project. For Android, AppMaster will generate APK and AAB files that can be

Summary

AppMaster is a big IDE where you can plan your applications with advanced blueprints in Data Models Designer, Business Process Editor, Web and Mobile Designers.

FAQ

Why do we need projects with multiple apps per project?

AppMaster uses a client-server architecture and not a monolith. There are many cases when you might want multiple apps per project when you need to separate features:

• Complex projects: like taxi when one app for passengers and one for drivers working with the same backend
• Create multiple backend applications to balance workload and make changes easy and less risky

While you already can create multiple web and mobile apps per project, we are still working on introducing multiple backend applications per project.

What are the benefits and drawbacks of generated applications?

The most obvious and noticeable benefits are significantly higher performance, scalability, ability to get binary files to run on-premise, and source code to pass certifications and audits. We use the latest version of the Go programming language to generate backend apps. Go gives a lot of performance of the compiled applications, cross-compilation for multiple OS and CPU architectures and overall simplicity by staying flexible.

The most common drawbacks are the requirement to regenerate and build the app again each time you introduce changes to your blueprints, and it usually takes about 35–45 seconds on average for medium-sized projects. Also, there are some additional complexity and costs since we need to run apps in our cloud: each app we run in the docker container consumes CPU and RAM (even if idling), and requires DB schema migration (we do it automatically).

But in general, code-generated applications work as good as those created with classic programming.

What technology is used in web applications?

We generate web applications using the Vue3 framework with TypeScript (TS). Web applications work in a combination of SPA and SSG modes. Server-Side Rendering (SSR) will be added later and only for new web app designer.

What technology is used in mobile applications?

Our mobile applications are built using a declarative backend-driven approach: we use a fully native (the most native) codebase of Swift and SwiftUI for IOS, Kotlin, and Jetpack Compose for Android. Technically mobile applications load configuration and screens via network on demand using JSON and Protobuf for maximum performance. There are many benefits of this approach: you can change applications in a realtime with no need to publish updated versions of applications to AppStore or Play Market, can work completely offline, and have access to all hardware features. We do not use HTML/JS/ReactNative or PWA technology in our mobile applications. Mobile apps created in AppMaster need to be distributed via AppStore, Play Market or any other distribution platform (technically, you can share apk/aab files for Android, but that’s a lot of effort).

Where do you host applications by default?

We built AppMaster Cloud on top of AWS infrastructure to offer the most reliable and scalable service to our customers. By default, customers with any subscription can use one of 3 core regions: North America (US), Europe (Germany), Asia. For dedicated hosting plans we have most of the AWS regions available (beyond core locations). If you need a specific country to host your application-let us know.

How can I get the application bundle, binary, or source code of my applications?

To get binary files or bundles, you must have at least a Business subscription. Backend applications can be downloaded from the artifact store as binary files or pulled via docker pull from our registry (like Docker Hub). Mobile and Web bundles can be downloaded from the artifact store as well. You can download mobile app bundles with any subscription except Learn & Explore. To get the source code of the application, you must have an enterprise subscription. With an enterprise subscription, you will get a complete source code of backend and web applications but a limited code base of mobile apps since we use a backend-driven approach there.

What is the difference between a Model and a Virtual Model?

We use the term Model to point to the structure for which we will create tables in a database and will automatically precreate DB blocks to make basic operations on that database table like search, create records and etc. Virtual models are the same, except we will not create tables and there will be no DB blocks. Virtual models was one of the most wanted feature by most developers. The most frequent use case for virtual models is when you need to create a structure (like Objects in JS or JSON) and use it for external requests, UI elements, or endpoints. It is curious that Models that are defined in the backend applications automatically appear in web and mobile apps as virtual: in web and mobile apps you need to know about any data structure to be able to work with.

How can I work with models in business processes? How to extract fields etc.

For each model, we pregenerate Make and Expand blocks. Make will gather fields to the Model Record, Expand will extract fields from the Model Record. Please note that those blocks do not mutate the initial data that is passed to the input of the blocks.

How can I set value for the local or global variables?

All blocks that you will use will not mutate initial data when you pass it to the input. The only block that mutates data is Set Variable: connect variable and value and after block execution, you will get your value inside of the variable. Global variables in mobile and web applications can have persistence and will survive the application’s restart if the appropriate flag is set.

How can I make an API call to an external system?

The best way to make requests to external systems is from your backend application. By doing so, you will get more control over data and security. There are two ways how you can do it:

• Using HTTP Request block is the easiest way to do it, you can use it in any backend BP
• Using External API Designer to create a request first and then use crafted blocks inside of your BPs.

While you can use HTTP Request block to call external systems not just in backend applications but also in web and mobile, you need to have reason to do it: when your frontend app wants to make a call to the device in the local network, or if that’s by design for the 3rd party system.

What types of requests and protocols are supported when calling external systems?

As of now, we support REST API requests with JSON or XML payloads, plain text or binary payloads. gRPC is not supported yet, but we are actively working on introducing it in the next months with our brand-new External API Designer.

Do AppMaster-created applications support WebSockets?

Yes, you can create WSS endpoints in the backend application and use them to communicate within web or mobile apps. Also, you can define your own payload structures using models while creating the WSS endpoint. Communicating with external systems using WebSockets is not implemented.

How can I call the backend endpoint from a Web or Mobile application?

For every endpoint that you create in the backend application, the platform creates a Server Request block for web and mobile apps. Just place that block in any trigger and call it. You can monitor Server Request block execution in the browser developer console, network requests tab. In mobile apps, you can use logs (must be enabled first in AppMaster Developer App settings).

Can I create custom authentication and signup?

Sure, you can completely disable the built-in auth module and craft a fully custom solution. You will need to create a separate BP in the backend application that will handle auth token traction (usually from the request header) and check according to your rules. You can get request headers by using BP block Get Request Headers. Please note that once you disable built-in auth, you will not be able to use Get Current User block. Also, you can use any ID, phone number, or other identificator instead of email with the standard Auth module.

Is there any way to create thread-safe operations for reliable counters and other ordered execution cases?

AppMaster supports a single-thread mode for business process execution when all calls of the business process are executed in a strict order, one at a time. This mode can have a performance penalty for high workload situations, but in most cases, it does not cause any significant performance degradation. Please note that the call stack (queue) of this mode is limited.

2FA with SMS, email or OTP?

Yes, you can adjust your auth logic to include 2FA methods. To use SMS or email, you must connect external provider like Twilio. The easiest way is to extend sessions and includes additional fields to control 2FA in the session. In Q3 2023, we will introduce a Time-based OTP module that will work with Google and Microsoft Authenticator.

Can I use AppMaster-generated backend with other web or mobile applications?

Yes, AppMaster-generated backend applications have standard REST API endpoints. For each application, REST API documentation (OpenAPI/Swagger) is generated automatically and served on a separate endpoint.

Can I use templates to create projects or applications?

We don’t have templates yet, but that’s something we will release in the near future. AppMaster Projects are more complex than WebFlow or Bubble and we need more time to implement them.

What type of database AppMaster support?

AppMaster-generated backend application works with any PostgreSQL-compatible databases starting from PG12, but we recommend using the latest available version of PostgreSQL DB (15.4 at the moment of this document). MSSQL, MariaDB, MySQL, and SQLite support is planned and will be added at the end of 2023/early 2024.

How can I directly access the database to edit records?

AppMaster doesn’t support direct DB access for applications that are hosted in the AppMaster Cloud. If you use on-premise hosting, you can access DB using any visual tool like PGAdmin or using pgsql command-line tool. In the future, we will add a feature to let customers edit DB directly.

Is there any real-time collaboration? Can we work as a team on the same project?

We have a real-time collaboration in the new web designer only. The new web designer (beta) uses network drafts with Conflict-free Replicated Data Type Protocol (CRDT) to cover all use cases and give state management (Ctrl+Z, operations rollback). We will gradually roll CRDT to the BP editor and Data Models Designer step by step in the future. If you need to work as a team, please don’t edit data model schema, the same BP, or the same Web/Mobile app since it can lead to data loss.