How AWS App Studio works
There are a few key concepts to understand when using AWS App Studio to build applications. This topic covers the basics of the following concepts or resources:
Using connectors to connect to other services to use their resources or API calls in your application, such as storing and accessing data, or sending notifications from your app.
Using entities to configure the data model of your application, which connects your application with your external data source.
Using pages and components to build the user interface (UI) of your application.
Using automations and actions to implement the logic or behavior of your application.
The application development lifecycle in App Studio: building, testing, and publishing.
The following image is a simple diagram of how App Studio and its resources are organized.
Within an app in App Studio, pages, automations, and entities all interact with one another, and connectors are used to connect them to external services such as data, storage, or notification providers. It’s crucial to understand how all of these concepts and resources interact with one another to successfully build an app.
Connecting your application to other services
One of the biggest benefits of using App Studio to build applications is easily integrating your app with other services. In App Studio, you connect to other services by creating and configuring connectors that are specific to the service and the resources or API calls you want to use with your application.
Connectors are created at the App Studio instance level, and not in individual apps. Once created, they can be used in various parts of applications, depending on the connected service and the application.
Some examples of functionality in applications that use connectors to connect to other services:
The most commmon use case, used in almost all applications, is to store and access data used in the application by connecting to AWS data services such as Amazon Redshift, Amazon DynamoDB, or Amazon Aurora.
An application that allows uploading and viewing images, such as receipts, can use Amazon S3 to store and access the image files.
A text summarizer app can send a text input to Amazon Bedrock and show the returned summary.
Note
You must have the Admin role in App Studio to create connectors. When creating connectors, you must include proper credentials and information about the resources or API calls you want to use.
Configure the data model of your application
Your application’s data is the information that powers the application. In App Studio, you create and use entities that represent the different types of data that you store and work with. For example, in a customer meeting tracking application, you may have three entities that represent customer meetings, the agendas, and the attendees.
Entities contain fields that have types, such as integer or string, that describe the data being stored. Although entities are how you define your data model, you must connect your entity to an external data storage service such as Amazon Redshift or Amazon DynamoDB to store the data. Entities can be thought of as an intermediary between your App Studio application, and the data in the external service.
You can interact with the data in your application from components and automations using data actions. The two most common
data actions to use are a getAll and getByID action. For example, your application could use the getAll data action to populate
a table with your data, and a getByID action to populate a detail component with more information about a specific data entry.
You can also add sample data to your entity to more easily test your application without needing to call external services.
Building your application's UI
In App Studio, you build your application’s UI with pages and components. Pages are individual screens of your application, and are used as containers for components. Components are the building blocks of your application’s UI and there are many types of components, such as tables, forms, image viewers, and buttons.
The following image shows the Pages tab of the application studio, where you add or configure pages and components in your application. The following key areas are highlighted and numbered:
The left-side Pages panel, where you manage pages, the application header and navigation settings, and can view all of the pages and components of your application.
The canvas, which displays the current page’s components. You can choose the components in the canvas to configure their properties.
The right-side Components or Properties panel. With nothing selected, the components tab is shown, which displays the list of components that can be added to your page. If you select a page or component, the properties panel is shown, where the page or component can be configured.
The bottom Errors and Warnings panels. This panel displays any errors or warnings in your application, most commonly from configuration issues. You can choose the panel to expand it and see the messages.
As an example, applications where users have to input information may have the following pages and components:
An input page that includes a form component that users fill out and submit information
A list view page that contains a table component with information about each input
A detailed view page that contains a detail component with more information about each input
Components can include static information or data, such as a form with defined fields, or can include dynamic information by using automations, such as an image viewer that retrieves an image from an Amazon S3 bucket and displays it to the user.
An important concept to know related to pages are page parameters. Page parameters are used to send information from one page to another. Some common examples of use cases for page parameters are searching and filtering, where the search term from one page is sent to the table or list of items to filter on in another page, or viewing item details, where the item identifier is sent to a detailed viewer page.
Implementing the logic or behavior of your application
The logic or behavior of your application can be thought of as the functionality of the application. You can define what happens when a user chooses a button, submits information, navigates to a new page, or other interactions. In App Studio, you define the logic of your application with automations and actions. Automations are containers for actions, and actions are the building blocks of the functionality of an automation.
The following image shows the Automations tab of the application studio, where you add or configure automations and their actions in your application. The following key areas are highlighted and numbered:
The left-side Automations panel, where you manage automations, and can view all of the automations and actions of your application.
The canvas, which displays the current automation. It displays the configured parameters, which are explained later, and actions. You can choose the components in the canvas to configure their properties.
The right-side Actions and Properties panels. With nothing selected, the Actions panel is shown, which displays the list of actions that can be added to your automation. If you select an automation, you can view and configure its properties such as the input and output of the automation. If you select an action, you can view and configure the action’s properties.
The bottom Errors and Warnings panels. This panel displays any errors or warnings in your application, most commonly from configuration issues. You can choose the panel to expand it and see the messages.
Automations can be simple, such as adding numbers and returning the result, or more powerful, such as sending an input to another service and returning the result. The main components of an automation are as follows:
A trigger, which defines when the automation is run, such as when the user pressing a button in the UI.
An automation input, which is used to send information to the automation. Automation inputs are defined with automation parameters. For example, if you want to use Amazon Bedrock to return a summary of text to the user, the text to be summarized is configured as an automation parameter.
Actions, which are the building blocks of an automation’s functionality. Each action can be thought of as a step in the automation. Actions can call APIs, invoke custom JavaScript, create data records, along with other functions. You can also group actions into loops or conditions to further customize the functionality. You can also invoke other automations with an action.
An automation output, which can be used in components or even other automations. For example, the automation output could be text that is shown in a text component, an image to be shown in an image viewer component, or as the input to another automation.
The development lifecycle of your application
The development lifecycle of your application includes the following stages: building, testing, and publishing. It’s called a cycle, because you will likely be iterating through and between these stages as you create and iterate upon your application.
The following image shows a simplified timeline of the application development lifecycle in App Studio:
App Studio offers various tools to support the lifecycle of your application, including the following three distinct environments, which are shown in the previous diagram:
The Preview environment, where you can preview your application to see how it looks to end users, and test specific functionality. Use the Preview environment to quickly test and iterate on your application without needing to publish it. Applications in the preview environment do not communicate or transfer data with external services, so you cannot test interactions or functionality that relies on external services in the Preview environment.
The Testing environment, where you can test your application’s connection and interactions with external services, and also do end-user testing by sharing the version published to the Testing environment to groups of testers.
The Production environment, where you can perform final testing of new apps before sharing them with end users. Once shared, the version of the application that is published to the Production environment is the version that end users will view and use.
Learn more
Now that you know the basics of how application development works in App Studio, you can either start building an application of your own, or dive deeper into learning more about concepts and resources.
To start building, it is recommended to try one of the getting started tutorials:
Follow Tutorial: Generate an app using AI to learn how to use the AI builder assistant to get a headstart on building an app.
Follow Tutorial: Start building from an empty app to learn how to build an app from scratch while learning the basics.
To learn more about the resources or concepts mentioned in this topic, see the following topics:
