Conceitos básicos da AWS

Criar uma aplicação React de pilha completa

Criar uma aplicação Web simples usando o AWS Amplify

Módulo 4: adicionar API GraphQL e banco de dados

Neste módulo, você usará as bibliotecas e a CLI do Amplify para configurar e adicionar uma API GraphQL à aplicação

Visão geral

Agora que já criamos e configuramos a aplicação com autenticação, vamos adicionar uma API.

Neste módulo, você adicionará uma API à aplicação, usando as bibliotecas e a CLI do Amplify. A API que você criará é uma API GraphQL que usa o AWS AppSync (um serviço GraphQL gerenciado), que tem o suporte do Amazon DynamoDB (um banco de dados NoSQL). (Para uma introdução ao GraphQL, consulte o site do GraphQL.)

Criaremos uma aplicação do Notas, que permitirá aos usuários criar, excluir e listar anotações. Este exemplo dará uma boa ideia de como criar vários tipos comuns de aplicações CRUD+L (criação, leitura, atualização, exclusão e listas).

O que você aprenderá

Neste módulo, você irá:
  • Criar e implantar uma API GraphQL
  • Escrever um código front-end para interagir com a API

Conceitos principais

API – Fornece uma interface de programação que permite a comunicação e interação entre vários intermediários do software.

GraphQL – Uma linguagem de consulta e implementação de API no servidor baseada em uma representação de tipo da aplicação. A representação da API é declarada usando um esquema baseado no sistema de tipo do GraphQL.

 Tempo para a conclusão

15 minutos

 Serviços usados

Implementação

  • a. Adicione uma API GraphQL ao seu aplicativo, executando o comando abaixo, na raiz do diretório do aplicativo:

    amplify add api
    
    ? Select from one of the below mentioned services: GraphQL
    ? Here is the GraphQL API that we will create. Select a setting to edit or continue: Continue
    ? Choose a schema template: Single object with fields (e.g., "Todo" with ID, name, description)
    ? Do you want to edit the schema now? (Y/n) yes

    b. Abra o esquema GraphQL no editor de texto: /amplify/backend/api/<api_name>/schema.graphql.

    Atualize o arquivo com o seguinte esquema:

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

    c. Salve o arquivo.

  • Agora que a API foi configurada localmente, vamos implantá-la. Para isso, execute o comando push do Amplify:

    amplify push --y

    Isso fará três coisas:

    1. Criará a API AWS AppSync
    2. Criará uma tabela do DynamoDB
    3. Criará as operações do GraphQL locais em uma pasta localizada no src/graphql que você pode usar para consultar a API

    Para visualizar a API GraphQL em sua conta a qualquer momento, execute o comando a seguir e selecione API GraphQL no painel de navegação esquerdo:

    amplify console api
    
    > Choose GraphQL
    

    Para visualizar o aplicativo do Amplify na sua conta a qualquer hora, execute o seguinte comando:

    amplify console
    ? Which site do you want to open? AWS console
  • Agora que o back-end foi implantado, vamos criar o código que permite aos usuários criar, listar e excluir anotações.

    Atualize o src/App.js com o seguinte código:

    import React, { useState, useEffect } from "react";
    import "./App.css";
    import "@aws-amplify/ui-react/styles.css";
    import { API } from "aws-amplify";
    import {
      Button,
      Flex,
      Heading,
      Text,
      TextField,
      View,
      withAuthenticator,
    } from "@aws-amplify/ui-react";
    import { listNotes } from "./graphql/queries";
    import {
      createNote as createNoteMutation,
      deleteNote as deleteNoteMutation,
    } from "./graphql/mutations";
    
    const App = ({ signOut }) => {
      const [notes, setNotes] = useState([]);
    
      useEffect(() => {
        fetchNotes();
      }, []);
    
      async function fetchNotes() {
        const apiData = await API.graphql({ query: listNotes });
        const notesFromAPI = apiData.data.listNotes.items;
        setNotes(notesFromAPI);
      }
    
      async function createNote(event) {
        event.preventDefault();
        const form = new FormData(event.target);
        const data = {
          name: form.get("name"),
          description: form.get("description"),
        };
        await API.graphql({
          query: createNoteMutation,
          variables: { input: data },
        });
        fetchNotes();
        event.target.reset();
      }
    
      async function deleteNote({ id }) {
        const newNotes = notes.filter((note) => note.id !== id);
        setNotes(newNotes);
        await API.graphql({
          query: deleteNoteMutation,
          variables: { input: { id } },
        });
      }
    
      return (
        <View className="App">
          <Heading level={1}>My Notes App</Heading>
          <View as="form" margin="3rem 0" onSubmit={createNote}>
            <Flex direction="row" justifyContent="center">
              <TextField
                name="name"
                placeholder="Note Name"
                label="Note Name"
                labelHidden
                variation="quiet"
                required
              />
              <TextField
                name="description"
                placeholder="Note Description"
                label="Note Description"
                labelHidden
                variation="quiet"
                required
              />
              <Button type="submit" variation="primary">
                Create Note
              </Button>
            </Flex>
          </View>
          <Heading level={2}>Current Notes</Heading>
          <View margin="3rem 0">
            {notes.map((note) => (
              <Flex
                key={note.id || note.name}
                direction="row"
                justifyContent="center"
                alignItems="center"
              >
                <Text as="strong" fontWeight={700}>
                  {note.name}
                </Text>
                <Text as="span">{note.description}</Text>
                <Button variation="link" onClick={() => deleteNote(note)}>
                  Delete note
                </Button>
              </Flex>
            ))}
          </View>
          <Button onClick={signOut}>Sign Out</Button>
        </View>
      );
    };
    
    export default withAuthenticator(App);

    Nosso aplicativo tem três funções principais:

    1. fetchNotes - Esta função usa a classe da API para enviar uma consulta à API GraphQL e recuperar a lista de anotações.
    2. createNote - Esta função também usa a classe API para enviar uma mutação para a API GraphQL. A principal diferença é que nessa função estamos passando as variáveis necessárias para uma mutação do GraphQL para que possamos criar uma nova nota com os dados do formulário.
    3. deleteNote - Como a createNote, esta função envia uma mutação da GraphQL juntamente com algumas variáveis, mas ao invés de criar uma anotação, excluiremos uma.
  • Para testar o aplicativo, execute o comando de inicialização:

    npm start

Conclusão

Você acaba de criar uma aplicação do Notas. Usando o AWS Amplify, você adicionou uma API GraphQL e configurou as funções de criação, leitura e exclusão na sua aplicação. No próximo módulo, adicionaremos um serviço de armazenamento à aplicação.

Esta página foi útil para você?

Adicionar armazenamento