Tutorial

Generate model files

With the basic setup complete, you can now model the data your application will work with. Amplify DataStore persists the modeled data on your local device and can even synchronize to a backend API without writing any additional code. These models are specified as GraphQL schemas. You can learn more about GraphQL schemas and data modeling. For now, let’s start by generating some initial data models.

Did you know? You can get started with Amplify’s Admin UI without even creating an AWS Account.

Create data model

  1. Navigate to the Data feature in AWS Amplify Admin UI and, with To-do list schema selected, click Create new schema.

    Create new schema

  2. On the Data modeling screen, you should see your Todo data model. This is a good start but let’s take it a step further by adding a completion flag to our Todo items.

Add the isComplete Boolean field

  1. Start by clicking Add a field under the Todo model.

  2. Set the Field name of this field to isComplete

  3. For the Type of this field, select Boolean

  4. In the inspector panel, select Is required to make this field required

    Add isComplete field

Generate the models locally

  1. If you haven’t already done so, click Next: Test locally in your app on the Data modeling screen to proceed

  2. On the Test locally in your app screen, you will be prompted with on-screen instructions

    1. What type of app are you building?

      1. Platform: Cross-platform
      2. Framework / Language: Flutter
      3. Click Next
    2. (Optional) Create a new app

      1. You should have already created a new Flutter app in a previous step, so go ahead and click Next
    3. Install Amplify CLI to pull the data model

      1. You should have already installed the Amplify CLI in a previous step

      2. Copy and run the command shown in your project root. This command will initialize your current project with Amplify as well as generate the data models you will be using locally

        amplify pull --sandboxId <UUID>

        amplify pull --sandboxId <UUID>
    4. Make a note of the sandbox id, just in case!

    5. As the rest of the steps will be covered by the tutorial, you can skip the remaining steps and click Deploy on the top right

  3. In order to deploy a backend, you will need an AWS account. We will go over this in a later step when we’re ready to sync our app to the cloud. For now, keep the link to this page handy!

At this point, Amplify should have generated several directories and configuration files in your project for you. Let’s take a look at the generated GraphQL schema.

From your project root, navigate to the amplify/backend/api/amplifyDatasource/ directory and open schema.graphql using a text editor of your choice. You should see the following.

type Todo @model @auth(rules: [{ allow: public }]) { id: ID! name: String! description: String isComplete: Boolean! }

type Todo @model @auth(rules: [{ allow: public }]) { id: ID! name: String! description: String isComplete: Boolean! }
  • This schema also describes a model called Todo with four properties:

    • id - an auto-generated identifier field for a Todo item

    • name - a non-optional string field containing the name of a Todo item

    • description - an optional string field containing additional details about a Todo item

    • isComplete - a non-optional boolean field indicating the completion status of a Todo item

      Note: We are also specifying an @auth directive on our model which can be useful for setting up authorization rules later, but for the purposes of this tutorial, the model will be authorized for public access. You can read more about authorization rules here.

Now that local Amplify and data models are set up, we’re ready to integrate with the app!

Previous Page
previous

Set up fullstack project

next

Integrate in your app

Next Page
Discord Logo
Amplify open source, documentation and community are supported by Amazon Web Services © 2021, Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.
    Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.