Conceitos básicos da AWS

Crie uma aplicação React

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

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

Neste módulo, você usará as bibliotecas e a CLI do Amplify para configurar e adicionar uma API GraphQL a seu aplicativo.

Introdução

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

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

O aplicativo que criaremos será um aplicativo de 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á

  • 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. (Para saber mais sobre o GraphQL, acesseesta página.)

 Tempo para a conclusão

15 minutos

 Serviços usados

Implementação

  • Criar uma API GraphQL e um banco de dados

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

    amplify add api
    
    ? Please select from one of the below mentioned services: GraphQL
    ? Provide API name: notesapp
    ? Choose the default authorization type for the API: API Key
    ? Enter a description for the API key: demo
    ? After how many days from now the API key should expire: 7 (or your preferred expiration)
    ? Do you want to configure advanced settings for the GraphQL API: No, I am done.
    ? Do you have an annotated GraphQL schema?  No
    ? Do you want a guided schema creation?  Yes
    ? What best describes your project: Single object with fields
    ? Do you want to edit the schema now? Yes

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

    Atualize o arquivo com o seguinte esquema:

    type Note @model {
      id: ID!
      name: String!
      description: String
    }
    

    c. Salve o arquivo. Retorne para a linha de comando e pressione Enter para concluir a etapa de configuração da API.

  • Implantar a API

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

    amplify push --y

    Isso fará o seguinte:

    1. Criará a API 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 na sua conta a qualquer hora, execute o seguinte comando:

    amplify console api
    
    > Choose GraphQL
    

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

    amplify console
  • Escrever um código front-end para interagir com a API

    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 { API } from 'aws-amplify';
    import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
    import { listNotes } from './graphql/queries';
    import { createNote as createNoteMutation, deleteNote as deleteNoteMutation } from './graphql/mutations';
    
    const initialFormState = { name: '', description: '' }
    
    function App() {
      const [notes, setNotes] = useState([]);
      const [formData, setFormData] = useState(initialFormState);
    
      useEffect(() => {
        fetchNotes();
      }, []);
    
      async function fetchNotes() {
        const apiData = await API.graphql({ query: listNotes });
        setNotes(apiData.data.listNotes.items);
      }
    
      async function createNote() {
        if (!formData.name || !formData.description) return;
        await API.graphql({ query: createNoteMutation, variables: { input: formData } });
        setNotes([ ...notes, formData ]);
        setFormData(initialFormState);
      }
    
      async function deleteNote({ id }) {
        const newNotesArray = notes.filter(note => note.id !== id);
        setNotes(newNotesArray);
        await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }});
      }
    
      return (
        <div className="App">
          <h1>My Notes App</h1>
          <input
            onChange={e => setFormData({ ...formData, 'name': e.target.value})}
            placeholder="Note name"
            value={formData.name}
          />
          <input
            onChange={e => setFormData({ ...formData, 'description': e.target.value})}
            placeholder="Note description"
            value={formData.description}
          />
          <button onClick={createNote}>Create Note</button>
          <div style={{marginBottom: 30}}>
            {
              notes.map(note => (
                <div key={note.id || note.name}>
                  <h2>{note.name}</h2>
                  <p>{note.description}</p>
                  <button onClick={() => deleteNote(note)}>Delete note</button>
                </div>
              ))
            }
          </div>
          <AmplifySignOut />
        </div>
      );
    }
    
    export default withAuthenticator(App);
    

    Existem 3 funções principais no aplicativo:

    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 da API para enviar uma mutação da API GraphQL. A principal diferença é que nesta função, estamos transferindo as variáveis necessárias para uma mutação da GraphQL, para que possamos criar uma nova anotação 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.
  • Executar o aplicativo

    Para testar o aplicativo, execute o comando de inicialização:

    npm start

Conclusão

Você acaba de criar um aplicativo de Notas! Usando o AWS Amplify, você adicionou uma API GraphQL e configurou as funções de criação, leitura e exclusão no seu aplicativo. No próximo módulo, adicionaremos um serviço de armazenamento ao aplicativo.

Este módulo foi útil?

Agradecemos a sua atenção
Gostaríamos de saber do que você gostou.
Desculpe por ter desapontado
Encontrou algo desatualizado, confuso ou incorreto? Envie seus comentários para nos ajudar a melhorar este tutorial.

Adicionar armazenamento