- [Ali] In this video, we're going to be chatting
about AWS Amplify Studio.
We'll use the backend data modeling capabilities
to create a quotes data model.
And then we'll use the Figma to code functionality
to create React components
based off of our designers designs.
We'll display all of our quotes on the page
and also create a form.
When we're done, the application will look like this.
And a form to create a new quote.
There will also be a search
so that you can find different quotes or different authors.
I'm Ali Spittel, I lead developer advocacy for AWS Amplify.
And I'm gonna be teaching you all about Amplify
throughout this tutorial.
First, I'll go to the AWS console and go to AWS Amplify.
From here, I'll create a new app and select build an app.
If you're new to Amplify, there will be two options
on a landing page instead.
I'll choose an app name and then confirm deployment.
Now that I have a Studio instance, I'll click Launch Studio.
Now I'll go to create data model.
I'll call each motivational quote a thought
and each one is going to have an author
as well as some text.
Both of these will be string fields,
but if I needed to change them, I could.
Now I'll save and deploy.
Note that I could also create multiple data models
and have relationships between them.
Now that my data model has deployed,
I'm gonna go to the UI Library tab.
I'll click Get Started.
And here you can use the Figma template to get started.
You can click Duplicate here
and you can also use the AWS Amplify Theme Editor.
In Figma, I went ahead and customize some components.
So here's an item card.
This will be what stores a quote.
Here's a form to create a quote.
So it has the name and then the quote.
And then I have a hero for the top of the page.
And I went into this AWS Amplify Theme Editor plugin
and I added different brand colors.
In my case, a yellow and a pink.
And I made sure that all of my different components
follow the colors that I wanted to have.
I'll copy the URL of my Figma file
and paste it into this Figma file link.
My theme will load in
and then I can accept or reject components.
I'll select accept all.
I'll start with the item card and click Configure.
From here, I'll set the text label to the thought.text.
And then I'll set the text label to the thought.author.
By default, this will show you randomly generated thoughts,
but I can add some content so that my actual quote show up.
I'll switch over to the Content tab.
Now if I go back to my component,
my actual data will load in
and I can shuffle to see all of them.
I'm gonna create a collection
since I want all of my different thoughts to be displayed.
I'll call my collection Thoughts.
I'll add in search and I'll also add pagination
if there are more than 30 quotes.
I'm gonna create a grid
and add in three columns instead of two.
I'll add 10 pixels of margin on each side of my cards.
You can also add different filters or sort conditions
if you want to show a subset of your data
or your data in a specific order.
Now I'll go to this CreateQuote form.
I'm gonna start off with setting this placeholder
to an inspirational thought.
Then on save, I'll add an on click action.
And in this case,
I'll create a new instance of the Thought model.
The author will be the name here
and then the text will be the quote.
Now my form is good to go.
Now for my hero, I'll click Configure again.
This top text, I'll just set as a daisy.
This one I'll say Happy Thoughts.
I'll set the text label here to motivational quotes there.
And then for this button here,
I'm going to set the label to be Create Thought.
And I'll also set an on click action.
This one will go to URL
and that URL will be /create thought.
I also want to set this image to a picture of daisies.
Now that I have my components configured
and tied to my data,
I want to add this to my local application.
I'm gonna create a Next.js application
called motivational quotes.
You could also use create-react-app if you want.
I'm just gonna use Next.js for routing.
I'm not gonna use any of the SSR, SSG that it provides.
I'll change into the directory that I just created.
And I'm gonna go to local setup instructions.
I'll copy this command and piece it into my terminal.
I'll log into the CLI,
choose my editor and select all the defaults here.
A quick note, you will need
to install the Amplify command line interface
if you haven't already.
There are instructions on how to do that
under View Amplify CLI Installation Instructions.
I'll open up the code in my text editor.
And within source,
you can see that Amplify generated models
to go along with my Thought model
as well as these UI components.
If you go into them, you can see that they model
what you would do as a developer
and all of the names fit according to the names of the items
that you create within Figma.
Each one also has the ability to be overridden.
So you can use this key
in order to write your own custom code
for any of these components.
I'll need to install the Amplify libraries
and UI components.
Now I'm gonna go into my _app JS file and configure Amplify.
The AWS-exports is the configuration file
with all the information about where my backend is on AWS.
And so when I run the amplify.configure,
it will tie my front end to my backend
that I already created.
I'll import the AmplifyProvider component
and use it as the top level of my application.
This will pass theming down to my whole app.
I created that UI theme within Figma.
So I'm gonna go into my UI components
and you'll see that there's a Studio theme that's generated.
I'll pass my Studio theme to the AmplifyProvider
as the theme prop.
The last thing that I need
to configure is the Amplify CSS file.
Now I'll move to my index.js file.
I'll clear out what's here now.
And I'll render the HeroLayout1 on the page.
Note that I'll need to import it from the UI components.
I'll start my development server.
Now you can see that my hero component
is rendered on the page.
There are two things that I wanna do,
first make it so that it is 100% the width of the page.
The other one is to import the Amplify fonts.
If you go to ui.docs.amplify.aws
and then scroll down on the installation page,
you'll see a link to a font.
You can also use a font that you wanna use as well.
I'll piece this into my styles global.css.
Now my fonts, the nice sans serif
that I was seeing in Studio.
I'll set the width to 100% and now it stretches the page
instead of just being part of it.
Now I wanna render my quotes underneath it.
The thoughts will also be imported from the UI components.
I'll add a margin bottom to my hero layout
so that my search doesn't interfere with my hero.
All of the data that I created
within the Amplify CMS loads onto the page.
The last thing that I need to do is implement my form.
When I click on that Create button,
it redirects me to Create Thought.
I'm gonna create a Next.js route for this.
Create a file called the create-thought.
And I'll create a React component within it.
I'll import the CreateQuote form.
And now let's test it out.
I'll add in a random name and then click Save.
Now if I go to my homepage, my new quote loaded in.
It saves a lot of time compared
to writing a form from scratch.
Everything in these generated components
are overridable within code.
You can again pass an override object to a component
in order to override anything within them.
You can pass override items
to a collection like these quotes down here
and that will allow you to modify certain items
within that collection.
In this video, we created a data model within Amplify Studio
and then used Amplify Studios Figma to React
in order to generate React components from Figma designs.
We then added it all to a Next.js application.
If you wanted to, you could add authentication
through Amplify Studio or storage for files as well.
I'd love to see what you build
as you continue creating with AWS Amplify Studio.