Implantar uma aplicação Web no Amazon Amplify

GUIA DE CONCEITOS BÁSICOS

Módulo 2: Criar o frontend e conectar a API

Neste módulo, você aprenderá a adicionar uma API ao projeto do Amplify

Introdução

Neste módulo, você criará o frontend da aplicação Web e usará a interface do programa da aplicação (API) GraphQL  para se conectar a uma API. A GraphQL é uma linguagem de consulta para APIs que ajuda a recuperar e atualizar dados de aplicações.

O que você aprenderá

  • Criar uma aplicação frontend React básica
  • Chamar a API GraphQL pela aplicação
  • Chamar a API pelo frontend da aplicação

 Tempo para a conclusão

10 minutos

 Pré-requisitos do módulo

  • Conta da AWS com acesso de administrador**
  • Navegador recomendado: versão mais recente do Chrome ou Firefox

[**]Talvez as contas criadas nas últimas 24 horas ainda não tenham acesso aos serviços necessários para este tutorial.

Implementação

Instalar as bibliotecas do Amplify

Instale a biblioteca React do Amplify @aws-amplify/ui-react (que contém os componentes da interface do usuário do React). 

Execute o seguinte comando para fazer a instalação:

npm install @aws-amplify/ui-react

Agora você precisa criar o frontend da aplicação. Abra o arquivo src/App.js e substitua o conteúdo dele pelo seguinte código:

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import Amplify from 'aws-amplify';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

function App() {
  return (
    <div>
      <h1>Notes App</h1>
      <AmplifySignOut />
    </div>
  );
}

export default withAuthenticator(App);

Testar a aplicação

Agora você pode executar a aplicação no local para testá-la.

npm start

Esse comando iniciará um servidor de desenvolvimento em http://localhost:3000 e abrirá a página no navegador. Para usar o serviço, você precisará fazer login. Os dados são armazenados no banco de dados Cognito do projeto, e só você pode acessá-los. Após o login, a aplicação mostrará um cabeçalho com a Notes App e o botão Sign In  (Fazer login), já que você ainda não adicionou nada a ela. Depois, adicione uma API à aplicação. Use ctrl + c para interromper o servidor novamente.

gsg-build-amplify-2

Com poucos comandos da CLI e algumas linhas de código, criamos uma aplicação de uma página com fluxo de login. Essa aplicação é apenas um esqueleto, e o login nela ainda não funciona. Continue adicionado funcionalidade à aplicação nas seções a seguir.

Adicionar uma API GraphQL com o Amplify

Agora você adicionará uma API à aplicação. O Amplify usa o AWS AppSync e o Amazon DynamoDB para executar APIs GraphQL. O AppSync é um serviço gerenciado pela GraphQL que se encarrega da API, e o Amazon DynamoDB é um banco de dados NoSQL que armazena os dados que a API usará.

Para adicionar a API, execute amplify add api e escolha as opções a seguir nas perguntas (as linhas começam com o símbolo >). Nessa etapa, você responderá a perguntas sobre o fornecedor de autorização. As informações serão usadas em um próximo guia:

Um esquema da GraphQL é uma representação de um objeto e de seus campos. Defina o esquema da GraphQL para que o Amplify crie a tabela DynamoDB necessária e configure a GraphQL para realizar leituras, gravações, atualizações e exclusões por você. Abra o arquivo amplify/backend/api/amplifyapp/schema.graphql e substitua o conteúdo pelo seguinte:

amplify add api

? Please select from one of the below mentioned services:
❯ GraphQL
  REST
? Provide API name: amplifyapp
? Choose the default authorization type for the API
  API key
❯ Amazon Cognito User Pool
  IAM
  OpenID Connect
? Do you want to configure advanced settings for the GraphQL API
? Do you want to use the default authentication and security configuration?
❯ Default configuration
  Default configuration with Social Provider (Federation)
  Manual configuration
  I want to learn more.
? How do you want users to be able to sign in?
 ◯ Email
❯◉ Username
 ◯ Phone number
? Do you want to configure advanced settings?
❯ No, I am done.
  Yes, I want to make some additional changes.
? Do you have an annotated GraphQL schema? No
? Choose a schema template:
❯ Single object with fields (e.g., “Todo” with ID, name, description)
  One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”)
  Objects with fine-grained access control (e.g., a project management app with owner-bas
ed authorization)
? Do you want to edit the schema now? Yes
Se você tiver inserido Yes (Sim) para editar o esquema, o editor-padrão abrirá o arquivo necessário para a próxima seção.

Criar um esquema da GraphQL

Um esquema da GraphQL é uma representação de um objeto e de seus campos. Defina o esquema da GraphQL para que o Amplify crie a tabela DynamoDB necessária e configure a GraphQL para realizar leituras, gravações, atualizações e exclusões por você. Abra o arquivo amplify/backend/api/amplifyapp/schema.graphql e substitua o conteúdo pelo seguinte:

type Note @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  text: String!
}

Esse esquema define um tipo de nota com os campos obrigatórios id e text. Ele também contém as diretivas que fazem parte da biblioteca GraphQL Transform do Amplify:

@model: um tipo com a nota @model é armazenado no DynamoDB, e as operações create, read, update, delete, list (CRUDL – Criar, Ler, Atualizar, Excluir e Listar) são criadas automaticamente para ele.

@auth: um tipo com a nota @auth é protegido por um conjunto de regras de autorização. Nesse caso, usaremos a autorização owner para garantir que apenas o proprietário da nota possa acessar e modificá-la.

Implantar a aplicação

Agora você já pode executar amplify push para implantar a aplicação Web do Amplify. Esse comando carregará a aplicação na sua conta da AWS, e o Amplify mostrará as alterações implantadas e pedirá para confirmar a implementação:

✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev
    
┌──────────┬────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name      │ Operation │ Provider plugin   │
├──────────┼────────────────────┼───────────┼───────────────────┤
│ Auth     │ amplifyapp6177aede │ Create    │ awscloudformation │
├──────────┼────────────────────┼───────────┼───────────────────┤
│ Api      │ amplifyapp         │ Create    │ awscloudformation │
└──────────┴────────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? Yes

Após a confirmação, selecione os valores-padrão para responder às perguntas quando necessário:

? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2

Essa implantação levará alguns minutos, e você verá uma lista dos recursos que serão criados. O Amplify realizou as seguintes ações:

  • Criou uma API GraphQL com o apoio do AWS AppSync e os três tipos de operação da GraphQL (consultas, mutações e assinaturas).
  • Gerou o código na pasta src/graphql/ usando as operações da GraphQL necessárias para criar, recuperar e atualizar notas.
  • Criou uma tabela do DynamoDB para armazenar as notas criadas com a aplicação.

Atualizar o frontend para usar a API

Para usar a nova API implantada, substitua o conteúdo do arquivo src/App.js pelo seguinte código para atualizá-lo:

import { Component } from 'react';
import Amplify, { API, graphqlOperation } from 'aws-amplify';
import { createNote, deleteNote } from './graphql/mutations';
import { listNotes } from './graphql/queries';

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

class AddNote extends Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
  }

  handleChange = (event) => {
    this.setState({ text: event.target.value });
  }

  handleClick = () => {
    this.props.addNote(this.state);
    this.setState({ text: '' });
  }

  render() {
    return (
      <div style={styles.form}>
        <input
          value={this.state.text}
          onChange={this.handleChange}
          placeholder="New Note"
          style={styles.input}
        />
        <button onClick={this.handleClick} style={styles.addButton}>Add Note</button>
      </div>
    );
  }
}

class NotesList extends Component {
  render() {
    return (
      <div>
        {this.props.notes.map(note =>
          <div key={note.id} style={styles.note}>
            <p>{note.text}</p>
            <button onClick={() => { this.props.deleteNote(note) }} style={styles.deleteButton}>x</button>
          </div>
        )}
      </div>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { notes: [] };
  }

  async componentDidMount() {
    var result = await API.graphql(graphqlOperation(listNotes));
    this.setState({ notes: result.data.listNotes.items });
  }

  deleteNote = async (note) => {
    const id = {
      id: note.id
    };
    await API.graphql(graphqlOperation(deleteNote, { input: id }));
    this.setState({ notes: this.state.notes.filter(item => item.id !== note.id) });
  }

  addNote = async (note) => {
    var result = await API.graphql(graphqlOperation(createNote, { input: note }));
    this.state.notes.push(result.data.createNote);
    this.setState({ notes: this.state.notes });
  }

  render() {
    return (
      <div style={styles.container}>
        <h1>Notes App</h1>
        <AddNote addNote={this.addNote} />
        <NotesList notes={this.state.notes} deleteNote={this.deleteNote} />
        <AmplifySignOut />
      </div>
    );
  }
}

export default withAuthenticator(App);

const styles = {
  container: { width: 480, margin: '0 auto', padding: 20 },
  form: { display: 'flex', marginBottom: 15 },
  input: { flexGrow: 2, border: 'none', backgroundColor: '#ddd', padding: 12, fontSize: 18 },
  addButton: { backgroundColor: 'black', color: 'white', outline: 'none', padding: 12, fontSize: 18 },
  note: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 22, marginBottom: 15 },
  deleteButton: { fontSize: 18, fontWeight: 'bold' }
}

Agora a aplicação está funcionando. Faça login com a autenticação com multifator para que a aplicação se comunique com a API e salve/atualize/exclua notas. Para testá-la no local, execute npm start novamente para confirmar.

gsg-build-amplify-3

Conclusão

Neste módulo, você aprendeu a criar uma aplicação frontend React, adicionar uma API a ela e implantar a API na sua conta da AWS. No próximo módulo, você aprenderá a implantar o frontend de um repositório do GitHub e a configurar um pipeline de integração e entrega contínuas para implantar automaticamente outras alterações.

A seguir: Automatizar a implementação

Envie seus comentários.

Agradecemos por seus comentários
Ficamos satisfeitos por esta página ter ajudado você. Deseja compartilhar detalhes adicionais para nos ajudar a continuar melhorando?
Fechar
Agradecemos por seus comentários
Lamentamos que esta página não tenha ajudado você. Deseja compartilhar detalhes adicionais para nos ajudar a continuar melhorando?
Fechar