Create a Database Schema using the Amplify Admin UI
In this video, we'll create the schema for a video course platform using the AWS Amplify Admin UI. Head to the Amplify Sandbox to get started.
We'll create two models: Video and Course and add fields and a relationship to them. Once our data is modeled, we'll clone down our project and create a React application we'll use our backend in.
Ali Spittel: [0:00] Head to sandbox.amplifyapp.com to get started with Admin UI. Once you're in there, click on the Get started button under the Create an app backend. From here, click on Data as the feature that you want to set up and choose a Blank schema. From here, click Add and Add a model.
[0:18] First, we'll make a course. The course will have a title and a description. I'm also going to add a Video model. This one's going to also have title, description, and then order. Order instead of being a string is going to be an integer. You can choose from different field types in this dropdown. I'm also going to make it so that title is required on both the course and the video.
[0:44] Now, I'm going to make it so that there is a relationship between the course and video. One course will have many videos. I can also rename the relationship and I'll make it so that the v is lowercase.
[0:57] Next, I'll click Test locally in your app. On this page, you'll see different options for what type of app you're building. You can choose from Web, iOS, Android. For the sake of this tutorial, I'll do Web React.
[1:08] I'm going to create a new React app for this project. I'll call it amplify-video-platform. I'll cd into that directory I just created. Make sure to install the Amplify CLI. You can copy and paste this command to get it installed on your computer.
[1:27] Then I'm going to run this Amplify pull with the sandbox ID. This will sync my frontend to that backend that I just created using the schema editor.
[1:36] Now, I'm going to install the necessary libraries for my app. I'm going to open up my text editor and open up my index.js file. I'm going to copy and paste this example code. This is going to configure Amplify for my project.
[1:51] When we ran the Amplify pull command, it generated some files for us. First, the aws-exports right now will have an export of a blank object. Once you deploy your application, re-run Amplify pull. It will have all the configuration information for your application.
[2:06] We also have our models, which are Typescript files that describe our data models, and we also have our backend directory. The schema.graphql has your GraphQL schema for your models. We won't need to use these auto-generated files, but it's good to know that they are there.
[2:21] You run your React server by running npm run start. For now, you get the default create React app application. We haven't done anything to build out our frontend yet.
[2:30] In this video, we set up a schema using the Amplify Admin UI, and we configured our React app locally and set up Amplify for that local React project.