As full-stack developers, we often love to develop applications out of the box with tools that can visually design your application's UI and define your data and API layers that can seamlessly integrate with the application's UI.

AWS Amplify Studio amplifies your development with front-end and back-end by provisioning the right AWS resources under the hood for the right purposes and also the ability to easily integrate into the design.

Working with data

Amplify Studio makes it really easy to define and manage your data irrespective of the environment it's used in.

Defining your data

Amplify Studio's Data allows you to define Amazon DynamoDB keeping in mind the properties with the right type and also powered with AWS AppSync where which generates a GraphQL schema under the hood.

enum TopicLevelEnum {
  INTRODUCTORY
  INTERMEDIATE
  ADVANCE
}

type InfoCard @model @auth(rules: [{allow: public}]) {
  id: ID!
  title: String!
  short_description: String!
  long_description: String!
  thumbnail_url: AWSURL!
  categories: [String!]
  services: [String!]
  topic_level: TopicLevelEnum
  aws_docs_url: String!
  aws_workshow_url: String
  community_url: String
  aws_samples_url: String
  dislikes: Int
  url: String
  s3_thumbnail: String
  likes: Int
}

type Service @model @auth(rules: [{allow: public}]) {
  id: ID!
  service_name: String!
  category_name: String!
  logo_url: AWSURL!
  url: String
  s3_logo: String
}

Now that data is defined and the AWS resources - AppSync API and DynamoDB tables for the same are created with @model directives by AppSync. Since the API is using public read, @auth(rules: [{allow: public}]) is part InfoCard and Service this will ensure that the auto-generated CRUD APIs for them will allow public access.

Generating data

The content management feature of Amplify Studio is elegant for ensuring an admin/content creator role to create or update content that the front-end application would be consuming. This uses the data definition based on your GraphQL schema and DynamoDB schema with a form-based input.

Amplify Studio also has an underrated feature that developers would love when using this during the course of development, Amplify Studio has auto-generate data which is handy for the development phase where developers need not worry about "there isn't enough data to display on the front-end" instead generate up to 100 records with the feasibility of setting some constraints so that you get valid data.

Test your data

With the data populated, you would need to ensure the GraphQL APIs with AppSync are working as expected. Amplify Studio also features a GraphQL editor to simulate and test the APIs.

The simulator provides the API docs - where you can navigate the different queries, mutations or subscription.

Amplify Storage

Amplify Storage let's you manage the media files and assets which are stored on Amazon S3. Amplify Storage will first create the Amazon S3 bucket where you can set the authorization rules for user to upload, view or delete the objects (files in this case) on S3 bucket.

Managing files on Storage

From Amplify Storage, you can navigate across different levels of folders and files and upload the files or create folders. Amplify Studio also provides your with a snippet of code that uses Storage APIs to get the file.

const file = await Storage.get("aws-amplify/auth/aws-amplify-auth.md", {
    level: "public"
});

Figma design to code

Using the getting started Figma design from the community and the components available in this design uses the design guidelines which is a subset of AWS Amplify UI Kit that has a collection of UI components for different UI frameworks both web and mobile.

With my limited knowledge of Figma designing and using the pre-defined components and modifying the components as per my requirement, I've successfully created three components - ServiceCard, FeatureCard and InfoCardDetails .

On successfully authorizing AWS Amplify Studio to access Figma designs from my Figma account, the UI Library on Amplify Studio lists all the components ready to be configured and imported into your Amplify project.

Component configuration

FeatureCard is now ready to be configured with the data that is defined. Amplify Studio provides a tree for all the elements created in this component and configuring different component properties.

Firstly, map the component to the data model that is used in the component.

Set each of the child properties with the data from the defined data model. In the above screenshot, you can see the title of the card is set with infoCard.Title to the label property of the child component.

In case of InfoCardDetails component, the data model defines URLs for documentation, samples and workshop. For those to be functional as a button onClick event, Amplify Studio allows those configurations where you can specify the target by selecting Open URL in new tab and also mapping the equivalent data from InfoCard data model.

Collection components

In the component configuration page, click on Create collection button.

The collections can be configured with properties that can make the collections UI really customizable in terms of how they would appear as a - List or Grid, ordering, spacing, alignment, enabling search functionality in the collection and also pagination with the page size.

The collections could also be configured with filters which are applied to the collections and also define the sort conditions.

Sync Amplify Studio with local IDE

With the data and UI configurations done on Amplify Studio, these changes can be synced to your local IDE with Amplify CLI.

amplify pull --appId your-amplify-project-id --envName your-env

This will create all the amplify related files in your local project folder with amplify backed and resources configurations under /amplify folder. In your src folder, the UI components and data model related files are generated in /ui-components folder and /models folder respectively.

Importing and using components

Installing the needed npm dependencies.

npm install -g @aws-amplify/cli
npm install aws-amplify @aws-amplify/ui-react

In index.js file, configure Amplify.

import { ThemeProvider } from "@aws-amplify/ui-react";
import { Amplify } from 'aws-amplify';

import awsconfig from './aws-exports';

import "@aws-amplify/ui-react/styles.css";
import { studioTheme } from "./ui-components";

Amplify.configure(awsconfig);

Using a theme from Amplify with ThemeProvider.

<ThemeProvider theme={studioTheme}>
  <App />
</ThemeProvider>

Import the UI component created and configured from Amplify Studio.

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

Modifying the components locally

From the above screenshots, you may have noticed the images being broken while previewing on Amplify Studio. Let's modify the InfoCardDetails component to retrieve data from Amplify Storage.

import React, { useEffect, useState } from "react";
import {
  getOverrideProps,
  useNavigateAction,
} from "@aws-amplify/ui-react/internal";
import { Button, Divider, Flex, Image, Text } from "@aws-amplify/ui-react";
import { Storage } from "aws-amplify"
import { useHistory } from "react-router-dom";

export default function InfoCardDetails(props) {
  const { infoCard, overrides, ...rest } = props;
//Set the states
  const [imageThumbnail, setImageThumbnail] = useState('')
  const [mdDoc, setMDDoc] = useState('')
  useEffect(() => {
    fetchImage()
    fetchMD()
  }, [])

//Using Amplify Storage to download images 
  async function fetchImage() {
    try {
      const image = await Storage.get(infoCard.s3_thumbnail, {
        level: "public"
      })
      setImageThumbnail(image)
    } catch (err) { console.log('error fetching images') }
  }
....
//Setting image to Image component
            <Image
              width="unset"
              height="408px"
              display="block"
              gap="unset"
              alignItems="unset"
              justifyContent="unset"
              shrink="0"
              alignSelf="stretch"
              position="relative"
              padding="0px 0px 0px 0px"
              objectFit="cover"
              src={imageThumbnail}
              {...getOverrideProps(overrides, "image")}
            ></Image>
....
}

After modifying the same in FeatureCard and ServiceCard, locally run the app with npm start.

The app renders all the images after they are downloaded from Amplify Storage.

Wrap-up

Building applications with Amplify Studio has certainly amplified developer experience with defining, provisioning, and also managing different AWS services.

Having to do it manually for a full-stack developer during development would mean that they would need in-depth knowledge of all those underlying AWS services.