Conceitos básicos da AWS
Criar uma aplicação React de pilha completa
Criar uma aplicação Web simples usando o AWS Amplify
adicionar api e banco de dados
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á
- 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
-
Criar uma API GraphQL e um banco de dados
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.
-
Implante 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á três coisas:
- Criará a API AWS AppSync
- Criará uma tabela do DynamoDB
- 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
-
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 "@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:
- fetchNotes - Esta função usa a classe da API para enviar uma consulta à API GraphQL e recuperar a lista de anotações.
- 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.
- 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.
-
Execute a aplicação
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.