AWS Amplify: Parece até GameShark!

Recentemente, estou usando aplicativos de rastreamento de humor 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.

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

create-react-app moodtrack

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

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:

amplify add auth

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

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:

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.

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:

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.

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:

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:

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 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.

Créditos

• Using AWS Amplify feels like cheating., escrito originalmente por Cory Schimmoeller