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

                }
            }
        }
    ]
}
  1. Name the role AppStudioRole and leave other options to the default setting. Create the role.
  2. Add a tag inside the Tags Key: IsAppStudioDataAccessRole. Value: true. Note the role Amazon Resource Name (ARN) required for creating connectors in App Studio.

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

 

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.

Source: View source