AWS Amplify: Parece até GameShark!
Tags: ptbr, awsamplify, graphql, aws
Published: 2019-12-06 01:47:08

Recentemente, estou usando [aplicativos de rastreamento de humor](https://en.wikipedia.org/wiki/Mood_tracking) como uma maneira fácil e rápida de registrar as variações em qualquer hora do dia. Meu principal problema é que todos os aplicativos de rastreamento de humor que eu tento não são perfeitos para o meu caso de uso. Por isso, decidi desenvolver meu próprio aplicativo.

Para este aplicativo, decidi usar a AWS para hospedar o meu backend. Por fim, aprendi sobre o AWS Amplify e como foi fácil conectar a interface do usuário do meu aplicativo a um backend hospedado na AWS.

Neste artigo, mostrarei passo a passo o que eu fiz.

Primeiro você precisa instalar e configurar a própria CLI do Amplify. Sugiro que você siga [a documentação oficial para esse processo](https://aws-amplify.github.io/docs/).

Depois de configurar a CLI do Amplify, criaremos um novo projeto React:

```bash
create-react-app moodtrack
```

Depois de criar o projeto, entraremos em nosso diretório **moodtrack** e executaremos o comando:

```bash
amplify init
```

A CLI fará algumas perguntas básicas sobre nosso aplicativo. Para a primeira pergunta, selecione o nome do editor que você usa. Quando a CLI perguntar qual tipo de aplicativo você está criando, selecione JavaScript e selecione React como estrutura. Para o diretório de origem, usaremos o diretório de distribuição, e os comandos **start** e **build**, pressione enter para obter o valor padrão.

Agora vamos adicionar autenticação ao nosso aplicativo executando o comando:

```bash
amplify add auth
```

Pressione **enter** para usar a configuração padrão. Agora vamos adicionar uma API GraphQL ao nosso aplicativo usando o comando:

```bash
amplify add api
```

Selecione GraphQL como o tipo de API e atribua o nome que desejar. Escolha o **pool** de usuários do Cognito como o tipo de autenticação (criamos um **pool** de usuários do Cogntio na etapa anterior). 

Selecione **no** para ter um esquema anotado e responda **yes** para a criação guiada de esquema. Escolha a primeira opção para criarmos um esquema de **Todo**.

Crie os recursos na nuvem usando este comando:

```bash
amplify push
```

Responda sim a todas as perguntas que ele faz. Os recursos serão criados na AWS e o Amplify gerará código para todas as consultas, mutações e assinaturas possíveis.

Se você abrir `amplfy/backend/api/moodtrack/schema.graphql`, notará que o esquema a seguir foi gerado automaticamente pelo Amplify.

```graphql
type Todo @model {
  id: ID!
  name: String!
  description: String
}
```

Embora esse esquema seja perfeito para um aplicativo de tarefas, precisamos de algo diferente. Vamos excluir esse esquema e usar:

```graphql
type MoodItem @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  date: String!
  note: String!
  mood: String
}
```

A linha `auth(rules: [{ allow: owner}])` faz com que o usuário possa ver apenas os 'humores' que ele criou.

Execute o comando `amplify push` novamente e permita que ele gere um novo código para o nosso novo esquema.

Agora que todas as nossas peças estão no lugar, podemos integrá-las. Primeiro, adicionaremos a autenticação. Para fazer isso, teremos que adicionar os seguintes pacotes ao nosso aplicativo.

```bash
npm install --save aws-amplify aws-amplify-react
```

Podemos implementar a autenticação em nosso aplicativo usando um **high order component**. Você pode adicionar as 2 linhas a seguir ao arquivo `app.js` para implementar a autenticação:

```tsx
import { withAuthenticator } from "aws-amplify-react";

// ...

export default withAuthenticator(App);
```

Agora, o que fazemos com as consultas e mutações que o Amplify gerou para nós?

Aqui está um exemplo inicial para adicionar humor:

```tsx
import React, { Component } from "react";
import Amplify, { Auth, API, graphqlOperation } from "aws-amplify";
import awsmobile from "./aws-exports";
import { withAuthenticator } from "aws-amplify-react";
import * as queries from "./graphql/queries";
import * as mutations from "./graphql/mutations";
import styled from "styled-components";
Amplify.configure(awsmobile);

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; // Janeiro é 0!
var yyyy = today.getFullYear();

if (dd < 10) {
  dd = "0" + dd;
}

if (mm < 10) {
  mm = "0" + mm;
}

today = mm + "/" + dd + "/" + yyyy;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { NewMoodTitle: "", NewMoodType: "" };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(value, name) {
    this.setState(state => {
      return (state[name] = value);
    });
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <div>add: </div>
          <input
            onChange={e => {
              this.handleChange(e.target.value, "NewMoodTitle");
            }}
            value={this.state.NewMoodTitle}
          />
          <input
            onChange={e => {
              this.handleChange(e.target.value, "NewMoodType");
            }}
            value={this.state.NewMoodType}
          />
          <button
            onClick={async () => {
              var moodDetails = {
                date: today,
                note: this.state.NewMoodTitle,
                mood: this.state.NewMoodType
              };
              const newMood = await API.graphql(
                graphqlOperation(mutations.createMoodItem, {
                  input: moodDetails
                })
              );
              console.log("newMood ", newMood);
            }}
          />
        </header>
      </div>
    );
  }
}

export default withAuthenticator(App);
```

Como você pode ver, o AWS Amplify torna a conexão de todos esses serviços tão fácil que parece que você acabou de usar [GameShark](https://pt.wikipedia.org/wiki/GameShark) para ignorar as partes tediosas do desenvolvimento da web.

Obrigado por ler este artigo. Se você tiver alguma dúvida, sinta-se à vontade para entrar em contato comigo no [Twitter](http://twitter.com/coryschimm).

# Créditos

- [Using AWS Amplify feels like cheating.](https://medium.com/@coryschimmoeller/using-aws-amplify-feels-like-cheating-e5eabcaea500), escrito originalmente por [Cory Schimmoeller](https://medium.com/@coryschimmoeller)