AWS Public Sector Blog
Rapidly develop fully functional web applications with AWS App Studio
Many organizations can benefit from new or updated internal applications, but lack resources or technical expertise for traditional application development. Due to the gap between demand and capability, organizations encounter delayed projects, creating bottlenecks due to overreliance on core IT teams’ inability to quickly adapt to changing business needs.
AWS App Studio is a low-code development platform for users to build, deploy, and manage applications without extensive coding knowledge. It provides a visual drag-and-drop interface, allowing users to create applications by assembling pre-built components and integrating them with various data sources and services. It is designed to streamline the application development process, making it more accessible to a wider range of users, including business users, IT professionals, and startups that don’t have large specialized IT teams. AWS App Studio is transforming how organizations approach application development.
App Studio can provide AI-powered recommendations for intuitive user interface designs and suggest improvements for efficiency. One of App Studio’s key strengths is its seamless integration with other Amazon Web Services (AWS) services such as Amazon Simple Storage Service (Amazon S3), Amazon DynamoDB, and Amazon Relational Database Service (Amazon RDS).
In a previous post about intelligent document processing (IDP), hereafter referred to as “IDP post,” we demonstrated how to develop an IDP solution using Anthropic’s Claude 3 Sonnet on Amazon Bedrock. We showcased the ability to extract data from scanned images of birth certificate applications and store it in a database. Building upon that foundation, this post guides you through the process of creating a user-friendly create, read, update, and delete (CRUD) application to efficiently manage birth certificate applications using AWS App Studio.
Solution overview
Building upon the IDP post, this solution showcases how users that don’t have technical expertise or time or resources for traditional app development can rapidly create a web application, complete with a continuous integration and continuous delivery (CI/CD) process.
This web application consists of three main pages:
- A homepage listing birth certificate application, featuring an upload functionality that triggers the IDP solution from our previous post
- An edit page for modifying form fields, with the ability to view the scanned image of the birth certificate application form
- A view page displaying fields in read-only mode
- An option to delete a record from the edit page
This solution can be implemented in approximately 60 minutes and involves the following high-level steps:
- Modify the solution from IDP post to integrate with App Studio.
- Setup App Studio in the same AWS account.
- Create connectors in App Studio to connect the app to other services.
- Generate a basic CRUD application for birth certificate records using a generative artificial intelligence (AI) prompt.
- Customize the App Studio generated pages.
- Deploy and test the solution.
Prerequisites
Before getting started, make sure you have:
- Deployed the solution from the IDP post in the same AWS account.
- An AWS Identity and Access Management (IAM) user with admin permissions.
- A standalone AWS account not under any AWS organization. If using a member account within an AWS organization, follow the steps outlined in the App Studio documentation to enable the service.
Note: App Studio is generally available in the US West (Oregon) and Europe (Ireland) Regions. The previous IDP post solution deploys in the US East (N. Virginia) us-east-1
Region. Our instructions can guide you through the necessary steps to build the solution across these Regions.
Use case and dataset
This example builds upon our previous demonstration of extracting data from scanned birth certificate application forms using generative AI.
Note: This is sample code, for non-production usage. You should work with your security and legal teams to meet your organizational security, regulatory and compliance requirements before deployment.
The goal is to illustrate how organizations can develop simple CRUD applications without extensive time, budget, or highly specialized development teams. For this demonstration, we use sample scanned images of birth certificate application forms, which don’t contain any real personal data. Two examples are provided:
- An English handwritten form (english-hand-written-2.jpeg)
- A Spanish printed form (spanish-printed-2.jpeg)
Save these images as .jpeg files to your computer for later use in testing the solution.
Implementation instructions
We recommend using the same AWS account that you used for the IDP post. App Studio access is managed by IAM Identity Center, and if you have an instance, you will use that, otherwise App Studio will create one for you as part of setting up. Refer to Creating and setting up an App Studio instance for the first time for step-by-step instructions.
Step 1: Update IDP post solution to hold Amazon S3 path info
This post extends the solution created in the IDP post. This solution requires that the S3 object path be saved with the birth certificate record in DynamoDB. We add the filePath
attribute to all new records by updating the following AWS Lambda function:
- Update
invoke_bedrock_claude3
Lambda:
a. Note the current Amazon Simple Queue Service (Amazon SQS) URL
b. Update the code to this file: invoke bedrock claude3.py
c. Update QUEUE_URL to the original value
- Update
insert_into_dynamodb
Lambda
a. Update code to this file: insert into dynamodb.py
The solution requires at least one record in the birth_certificates
DynamoDB table to have the filePath
attribute. Upload a new birth certificate to create a new record in the birth_certificate
table.
- Upload this file to the S3 bucket in the
images/birth_certificates/
folder {link to english.jpeg}
Step 2: Add CORS policy to S3 bucket
In this step, update the S3 bucket to allow for cross-origin resource sharing. This will allow the App Studio front-end to put objects into the S3 bucket.
- On the Amazon S3 console, in the Buckets list, choose Permissions.
- Choose Cross-origin resource sharing (CORS).
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
Step 3: Create AppStudioRole with access to birth certificate S3 bucket and DynamoDB table
In this step, create a role for the App Studio application with permissions to access DynamoDB and S3 resources.
- Create a new IAM role with a trusted entity type of custom trust policy. Use the following trust policy and name the role
AppStudioRole
. Leave the remaining options at default values. Replace{account-id}
with your AWS account ID.
- Name the role
AppStudioRole
and leave other options to the default setting. Create the role. - Go to the role and add inline policy permissions to the AppStudioRole. Replace
{bucket name}
with the name of your S3 bucket.
- Add a tag inside the Tags Key:
IsAppStudioDataAccessRole
. Value: true. Note the role Amazon Resource Name (ARN) required for creating connectors in App Studio.
Step 4: Create connectors to DynamoDB & S3 in App Studio
In this step, create the App Studio connectors to DynamoDB and S3 using the roles that were configured.
- Navigate to App Studio and create a DynamoDB connector with the following attributes. Leave the remaining attributes to the default values:
a. Name: DynamdoDbConnector
b. Description: Full access connector to DynamoDB for birth_certificates
table
c. IAM role: {AppStudioRoleArn}
d. Region: us-east-1
e. Tables: birth_certificates
Note: If you do not find the filePath
attribute on the DynamoDB table, you will encounter problems in following steps. If you encounter problems revisit Step 1 of these instructions and ensure at least one record in the birth_certificates
DynamoDB table contains the filePath
attribute.
- Create an App Studio connector for Amazon S3 with the following attributes. Leave the remaining attributes to default values:
a. Name: S3FullAccessConnector
b. Description: Get and put access to S3 bucket for birth certificates folder
c. IAM Role: {AppStudioRoleArn}
d. Region: us-east-1
Step 5: Generate simple app to view and edit birth certificate records
In this step, generate the initial App Studio web application.
- On the App Studio home page, click on the “Create app” button.
- Enter “Birth Certificate Application” for the app name.
- Make sure that the “Generate an app with AI” radio button is selected, and then click “Next”.
- In the “Connect to existing data” step, select the “DynamoDbConnector,” choose the
birth_certificates
table, and then click “Next”. - Enter the following prompt and leave the remaining options at default values and create the app:
“I am creating a birth certificate management app. I want to create an application that allows me to view all the records in my birth_certificates table from DynamoDB. I want the home page to have a table that lists every record from my birth_certificates table. The table should have actions to go ‘view’ and ‘edit.’ When I go to the ‘view record’ page I want to see the birth certificate record from the table. When I go to the ‘edit record’ page I want to be able to edit the birth certificate record.”
You can preview the application by using the Preview button. App Studio will create sample data for the DynamoDB connector within a few minutes of creating the application.
Step 5a: Customize the EditBirthCertificate page
In this step, update the edit page of the application to add a preview of the birth certificate document, navigation buttons, and other stylistic changes.
To customize the EditBirthCertificate page to display birth certificate data from a DynamoDB table along with the corresponding image from an S3 bucket, utilize App Studio’s Automation features, including “Data Actions” and “S3 GetObject.” Additionally, add navigation buttons to facilitate moving to the Home page and the Birth Certificate View pages. Follow these steps to customize the application:
- On the EditBirthCertificate page, add the
2 columns
layout component. Select the UpdateBirthCertificate form and drag it into the right column. - Add an
Image viewer
component to the left column. Select the image viewer component and update the Source toAutomation
. On the Automation dropdown menu, selectAdd automation
and navigate to the newly created automation namedAutomation1
. - Update
Automation1
to get the S3 file path from a DynamoDB record ID and output the file.
a. Rename Automation1
to GetImageAutomation
b. Add a parameter with the following attributes:
-
- Name:
id
- Type:
Entities > birth_certificates > Entity fields > Id
- Name:
c. Add an Invoke Data Action
to the automation. This will get the filePath
attribute from the record ID. Use the following attributes:
-
- Data actions: birth_certificates > getByID
- IdCondition:
{{params.id}}
d. Add Get Object action to the automation. This will get the object from the S3 bucket. Use the following attributes:
-
- Connector:
S3FullAccessConnector
- Configuration: Use the following code, replacing
{bucket-name}
with the name of your S3 bucket.
- Connector:
{
"Bucket": "{bucket-name}",
"Key": results.InvokeDataAction1.data.at(0)?.filePath
}
-
- Add automation output by clicking
GetImageAutomation
from the list of automations and updating the output:- Output:
{{results.GetObject1.Body}}
- Output:
- Add automation output by clicking
e. Update the image viewer component to use the automation. On the EditBirthCertificate page, select the image viewer component. Update the component to use the GetImageAutomation
with the following configuration:
-
- Update
id
parameter:{{page.params.Id1}}
- Layout > Height: 1000
- Update
f. Add navigation to the page. Start by adding a Row
component above the Image viewer
Inside the row component add a Text
and two Button
and Button components; these will be the page header and navigation to the home and view pages.
-
- Select the text component and change the value to
Edit Record
. - Select the first button and change the button label to
Home
. Add a Trigger of typeNavigate
. SelectNavigate1
and change the Navigation type toPage
and selectBirthCertificateList
. Now when the user clicks this button, they will navigate to the home page. - Select the second button and change the button label to
View
. Add a Trigger of typeNavigate
. SelectNavigate2
and change the Navigation type toPage
. SelectBirthCertificateDetails
and add a page parameter toId1
with a value of{{page.params.Id1}}
.
- Select the text component and change the value to
Step 5b: Customize View record page
In this step, update the view page of the application to add a preview of the birth certificate document, navigation buttons, and other stylistic changes.
To customize the View record page, you can follow the same steps used to update the EditBirthCertificate page. Reuse the GetImageAutomation. Change the second navigation button to navigate to the edit page.
Step 6: Add Amazon S3 upload component to the home page to ingest new birth certificates
In this step, update the home page of the application to add upload functionality for new birth certificate documents, navigation buttons, and other stylistic changes.
The app will have an upload component that can ingest files and place them into the S3 bucket. We will also set up a message that appears when there is a successful upload to let the user know the birth certificate ingestion takes a minute.
- On the home page of the app, add a “Column” component to the top of the page with an “S3 upload” and “Text” component inside.
- Update the “S3 upload” component with the following configuration:
a. Connector: S3FullAccess
b. Bucket: {bucket-name}
c. Folder: images/birth_certificates
d. File name: {{file.nameWithExtension}}
e. Add “On success” trigger and select the new “Runcomponentaction1”
-
- Component: text1
- Action: Set visibility
- Set value to:
{{true}}
f. Update “Text” component with the following configuration:
-
- Value: “Successfully uploaded document. Records will appear in table after a minute and refreshing the page.”
- Visibility:
{{false}}
Step 7: Add delete functionality to edit page
In this step, add a third action button to the edit page to delete unwanted records from the DynamoDB table.
- On the Edit page of the app, add a new component of type
Button
with a button value ofDelete Record
with the following configuration:
a. Add an automation to delete the record by adding an on-click action of type Invoke Automation. Edit InvokeAutomation1
and have it invoke Add Automation
.
b. Edit the newly created Automation1
and rename it to DeleteRecord
-
- Add a parameter with the following attributes
- Name:
id
- Type: Entities > birth_certificates > Entity fields > Id
- Name:
- Add an action of type
Delete Record
- Entity > birth_certificates
- Configure > condition where
Id = {{params.id}}
- Add a parameter with the following attributes
c. Go back to the delete record button InvokeAutomation1
and add a parameter with the a value of {{page.params.Id1}}
.
d. Go to the delete record button and add an on-click action of type Navigate
with a Navigation type of Page
and a Navigate to value of BirthCertificateList
or the name of your home page.
Step 8: Publish and test the application
After making all the changes according to the instructions, it’s time to publish the application to the Testing environment. App Studio takes care of the DevOps pipelines behind the scenes so you can focus on building the application.
The following video explains how an application can be published from the Development environment to the Testing environment by providing a version history, and shows a demonstration of the working app from the Testing environment.
The Testing environment will display records in the DynamoDB table along with the accompanying S3 object and be able to ingest new birth certificates. Select Publish and give the version of your app a name like “Blog article tutorial.” The publishing process takes up to 15 minutes. After that, you will receive an email with a link to the URL for the Testing environment. App Studio publish center will also show the testing environment’s URL. Test the application by opening the URL.
The Birth Certificates Table should display the two rows from DynamoDB that were created as part of the IDP post. Out of the two .jpeg files you downloaded earlier, upload one of them (for example, english-hand-written-2.jpeg) by selecting Select a file. You should get a message saying “Upload successful.” After a minute or two, refresh the home page, and you should find a new record in the table.
Explore the application by choosing View and Edit to test the basic functionality of the application. If everything deployed correctly, you should be able to view a record with its corresponding image and update a record as well.
If everything is satisfactory in the testing environment, you can publish this version of the application to the Production environment by choosing Publish under Publish Center. This process takes up to 5 mins. After that, you will receive a new URL to access your production application.
In the Testing environment, an app will be paused after 3 hours of inactivity. In the Production environment, an app will be paused after 14 days of inactivity. Paused versions of the app will be securely stored in the Version history tab and can be republished at any time. This is designed to optimize resource usage within our preview service offering.
Troubleshooting
- To assist with live debugging while you’re building your apps, App Studio provides a collapsible builder debug that spans the pages, automations, and data tabs of the application builder.
- Each error or warning includes a View link that can be used to navigate to the location of the issue.
- For troubleshooting published apps, you can use the browser console to start debugging by exploring your action or API inputs and outputs.
- During testing, if the image is not displayed on the edit or view page, make sure that ‘id’ parameter value is set to
params.Id1
. - During testing, if the Submit button is not enabled on the Edit record page, make sure that there are no empty input fields on the form.
- Review this documentation for additional troubleshooting topics.
Clean up
To avoid incurring unnecessary charges and to maintain good hygiene in your AWS environment, it’s important to properly clean up the resources created during this tutorial when you’re finished. Follow these steps to remove the resources:
- On the App Studio console, under All applications, locate BirthCertificateManagementApplication and delete it.
- On the Connectors page, delete the DynamoDbConnector and S3FullAccessConnector
- Sign in to the AWS account and on the IAM console, delete AppStudioRole.
- Clean up resources from the IDP post by following the cleanup instructions listed in that post.
Example use cases
This solution can be used in many different use cases, such as the following:
- Inventory management system – A retail company can create a custom inventory management system in weeks instead of months.
- Employee onboarding portal – HR departments can build an interactive onboarding portal that guides new hires through the process, manages document submissions, and integrates with existing HR systems.
- Customer support ticket system – A startup can quickly prototype and launch a minimum viable product for a customer support ticket system.
You can also take a look at the sample prompts (Figure 1) provided by App Studio to understand other use cases that can be potentially solved using App Studio such as applications to manage IT Inventory Management, Project Approvals, Sales Metrics Tracking and Claims Management System.
Conclusion
AWS App Studio represents a significant leap forward in empowering technical users to create secure, enterprise-grade applications without extensive coding knowledge. As demonstrated in this post, App Studio allows users to rapidly develop and deploy a fully functional web application for managing birth certificate records, building upon the IDP solution we explored in our previous post, Intelligent document processing using Amazon Bedrock and Anthropic Claude.
By using the power of generative AI and seamless integration with AWS services, App Studio dramatically reduces the time and complexity involved in application development. This allows organizations to quickly respond to business needs, streamline processes, and innovate without straining their IT resources or compromising on security and scalability.
While App Studio is a powerful tool for many use cases, it’s important to note that it’s not designed to replace professional software development for complex, mission-critical systems. Instead, it serves as an excellent solution for creating internal tools, prototyping ideas, or building applications that automate routine business processes.
As we’ve shown in this example, App Studio can help state agencies, startups, and enterprises across various industries to rapidly create and iterate on applications. Whether you’re managing inventory, tracking project budgets, or streamlining document processing workflows, App Studio provides a flexible, secure, and scalable platform to bring your ideas to life.