AWS Public Sector Blog

Rapidly develop fully functional web applications with AWS App Studio

AWS branded background design with text overlay that says "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:

  1. A homepage listing birth certificate application, featuring an upload functionality that triggers the IDP solution from our previous post
  2. An edit page for modifying form fields, with the ability to view the scanned image of the birth certificate application form
  3. A view page displaying fields in read-only mode
  4. 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:

  1. Modify the solution from IDP post to integrate with App Studio.
  2. Setup App Studio in the same AWS account.
  3. Create connectors in App Studio to connect the app to other services.
  4. Generate a basic CRUD application for birth certificate records using a generative artificial intelligence (AI) prompt.
  5. Customize the App Studio generated pages.
  6. Deploy and test the solution.

 

Prerequisites

Before getting started, make sure you have:

  1. Deployed the solution from the IDP post in the same AWS account.
  2. An AWS Identity and Access Management (IAM) user with admin permissions.
  3. 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:

  1. An English handwritten form (english-hand-written-2.jpeg)
  2. 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.

  1. On the Amazon S3 console, in the Buckets list, choose Permissions.
  2. 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.

  1. 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.
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::{account-id}:root"
            },
            "Action": "sts:AssumeRole",
            "Condition": {
                "StringEquals": {
                    "aws:PrincipalTag/IsAppStudioAccessRole": "true",
"sts:ExternalId": "{App Studio team id}"

                }
            }
        }
    ]
}
JSON
  1. Name the role AppStudioRole and leave other options to the default setting. Create the role.
  2. Go to the role and add inline policy permissions to the AppStudioRole. Replace {bucket name} with the name of your S3 bucket.
    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow",
                "Action": [
                    "s3:GetObject",
                    "s3:PutObject"
                ],
                "Resource": "arn:aws:s3:::{bucket_name}/images/birth_certificates/*"
            },
            {
                "Sid": "ListAndDescribe",
                "Effect": "Allow",
                "Action": [
                    "dynamodb:List*",
                    "dynamodb:DescribeReservedCapacity*",
                    "dynamodb:DescribeLimits",
                    "dynamodb:DescribeTimeToLive"
                ],
                "Resource": "*"
            },
            {
                "Sid": "SpecificTable",
                "Effect": "Allow",
                "Action": [
                    "dynamodb:*"
                ],
                "Resource": "arn:aws:dynamodb:*:*:table/birth_certificates"
            }
        ]
    }
    JSON

     

  1. 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.

  1. 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.

  1. 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.

  1. On the App Studio home page, click on the “Create app” button.
  2. Enter “Birth Certificate Application” for the app name.
  3. Make sure that the “Generate an app with AI” radio button is selected, and then click “Next”.
  4. In the “Connect to existing data” step, select the “DynamoDbConnector,” choose the birth_certificates table, and then click “Next”.
  5. 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:

  1. On the EditBirthCertificate page, add the 2 columns layout component. Select the UpdateBirthCertificate form and drag it into the right column.
  2. Add an Image viewer component to the left column. Select the image viewer component and update the Source to Automation. On the Automation dropdown menu, select Add automation and navigate to the newly created automation named Automation1.
  3. 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

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.

{
    "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}}

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

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 type Navigate. Select Navigate1 and change the Navigation type to Page and select BirthCertificateList. 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 type Navigate. Select Navigate2 and change the Navigation type to Page. Select BirthCertificateDetails and add a page parameter to Id1 with a value of {{page.params.Id1}}.

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.

  1. 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.
  2. 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.

  1. On the Edit page of the app, add a new component of type Button with a button value of Delete 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
    • Add an action of type Delete Record
      • Entity > birth_certificates
      • Configure > condition where Id = {{params.id}}

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:

  1. On the App Studio console, under All applications, locate BirthCertificateManagementApplication and delete it.
  2. On the Connectors page, delete the DynamoDbConnector and S3FullAccessConnector
  3. Sign in to the AWS account and on the IAM console, delete AppStudioRole.
  4. 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.

Figure 1. App Studio sample prompts.

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.

Additional resources

Spencer Harrison

Spencer Harrison

Spencer is an associate solutions architect at Amazon Web Services (AWS), where he helps public sector organizations use cloud technology to focus on business outcomes. He is passionate about using technology to improve processes and workflows. Spencer’s interests outside of work include reading, pickleball, and personal finance.

Bharath Gunapati

Bharath Gunapati

Bharath is a senior solutions architect at Amazon Web Services (AWS), where he helps clinicians, researchers, and staff at academic medical centers to adopt and use cloud technologies. He is passionate about technology and the impact it can make on healthcare and research.

Govind Palanisamy

Govind Palanisamy

Govind is a senior solutions architect at Amazon Web Services (AWS), where he helps government agencies migrate and modernize their workloads to increase citizen experience. He is passionate about technology and transformation, and he helps customers transform their businesses using artificial intelligence/machine learning (AI/ML) and generative AI–based solutions.