We customize your software to work the way you do.

By Aaron Kaiser  Posted on  September 16th, 2022  in  Web

Introduction to AWS Amplify Studio

AWS Amplify is a toolbox that allows developers to build scalable, full-stack applications from core AWS services for data storage and access, application logic, authentication, and more. As an open-source project with millions of downloads,  Amplify has gained a large community since its initial release. Included as part of the Amplify framework, Amplify Studio aims to reduce development time by using its point-and-click interface to quickly configure data structures, frontend UI components, and user access permissions.

Working with the Backend

A screenshot of Amplify Studio showing data modeling options.

Defining a data model using Amplify Studio’s interface can reduce the time needed to configure database tables and GraphQL schema manually. Tables, fields, and relationships are specified using a graphical interface. Authentication for your application can also be set up through Amplify Studio in a few clicks. Per-table authorization rules for create, read, update, and delete actions and user authentication options are all editable through Amplify Studio's interface.

Once your changes are saved, Amplify takes care of the rest; generating tables in DynamoDB, building a GraphQL API schema to access the tables, and adding any Cognito resources needed to apply the authentication rules. In this article’s example, a simple blog post application with email and password authentication was created.

In this rudimentary example, we have a user that can create, read, update, and delete their own set of blog posts. All users have the ability to create and read any blog post. If you’re unfamiliar with Amplify’s GraphQL authorization syntax, Amplify Studio is a good resource for producing the applicable rules. By switching to the GraphQL schema tab, you can see the generated code based on the tables created and selected authorization rules.

A screenshot of Amplify Studio showing the generated graphQL schema

After deploying the backend and allocating the necessary AWS resources, the Amplify configuration files will need to be created or updated in your application through the Amplify CLI. Using the amplify pull command, the Amplify backend can be added to your application’s repository. This will create an amplify/ directory in your project that contains all the resources and definitions needed to interact with the backend AWS services.

amplify pull --appId <app_id> --envName <environment_name>

Working with the Frontend

In order to generate front-end component code from design assets, Amplify Studio is integrated with Figma, a prototyping and design tool. By linking your application’s Figma file or using Amplify’s sample Figma file, components can be configured and translated to ready-to-use React code. In this example, we’ll use Amplify’s provided file and components to make a simple feed of blog posts.

A screenshot showing Amplify Studio editing design components

After linking the Figma file, styles and components can be browsed in Amplify Studio’s interface. Using the SocialPost component, it can be configured to bind data from the schema and generate the React code needed. We’ll map the title, author, date, and content fields to the data in the component. Once we have the component configured, another amplify pull is needed to update the local repository.

After the pull is complete, you’ll now have a folder of components created from the provided Figma file with the properties configured through Amplify Studio applied. To use the post component configured earlier, we need to import it from the components folder and bind our data.

import { 
        SocialPost 
    } from './ui-components';

    /*
    // post record loaded from DB
        const post = {
            id: 1,
            title: 'Hello world',
            content: 'This is an example post'
        }
    //user record loaded from DB
        const user = {
            id: 1,
            name: 'Aaron Kaiser'
        }
    */
    <SocialPost post={post} user={user}/>

Pricing

AWS customers are charged based on which underlying AWS services are used through Amplify's framework; therefore, it is important to understand the resources Amplify Studio allocates. There are no additional charges for using Amplify's frameworks, including Amplify Studio. However, Amplify hosting charges are based on building and deployment times, and the size of the application hosted. Amplify is also available for the AWS Free Usage Tier, which includes 1,000 build minutes per month, 15 GB served per month, and 5 GB of data storage per month.

Conclusion

Whether it's used to build an entire application or just to generate a data model and GraphQL schema, Amplify Studio is a toolbox that will help accelerate development. By being a control center that spans design to deployment, it's easy to get started turning your idea into a scalable application or increasing the productivity of your current processes. Have an idea for a web application but don't know where to start? Contact us and let's design and develop your idea together!

Aaron Kaiser thumbnail
Aaron Kaiser

Aaron is a certified FileMaker and web developer who approaches solutions to problems from a logical standpoint and puts a high priority on the accuracy of his work.

"We were actually able to add more features than we thought would be possible within our budget. We always experienced a ‘can do’ attitude and DB Services was incredibly patient and easy to work with."
Courtney Hartman
Art Director
"The new FileMaker custom website interface is very user-friendly and easy to follow for our clients. In addition, it is much faster than the old Instant Web Publishing (IWP) interface. Thank you and all the others who have helped us out at DB Services. I am very grateful for the excellent service you provide us. Its nice to know we can call you for help if we have an issue."
Wayne Capek
President
"We needed a solution that would simplify the administration of our responsibilities under our contract with the State of Indiana. We have seen a dramatic increase across the state in the number of potential foster and adoptive parents that have begun the preparation and training process. This increase has resulted in a significant opportunity for children available for adoption. That’s a big win for everyone! And it’s all because we can refer potential parents to the proper state contacts efficiently and quickly."
Chris Morrison
Executive Director
"Thank you for all of your expertise and valuable help. I am so grateful to have found DB Services."
Linda Findlay
Owner
"Thank you for our new database system. We transitioned from a carbon copy paper based system to a digital database. The software has saved us time and money. We used to archive all our jobs in cabinets, now we can look up a job in seconds from anywhere. The software allows us to easily email estimates to our customers in pdf format. In a year there was a return on investment just from eliminating the purchasing of our carbon forms."
Todd Cartmel
Owner
"The new system allows us to create and track jobs for customers along with inventory, something we had been doing with separate word and spreadsheet files. Because it’s now so intuitive, new staff members are able to begin using the database immediately without our usual training session and ‘cheat sheets’ for getting around within the file."
Tom Andrews
President