Conceitos básicos da AWS

Criar uma aplicação React de pilha completa

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

Módulo 5: Adicionar armazenamento

Neste módulo, você adicionará armazenamento e a capacidade de associar imagens às notas na aplicação

Visão geral

Agora que a aplicação de notas está funcionando, vamos adicionar a capacidade de associar uma imagem a cada nota. Neste módulo, você usará a CLI e as bibliotecas do Amplify para criar um serviço de armazenamento usando o Amazon S3. Em seguida, você atualizará o esquema GraphQL que criou no módulo anterior para associar uma imagem a cada nota. Para terminar, você atualizará a aplicação React para permitir o upload, a busca e a renderização de imagens.

O que você aprenderá

Neste módulo, você irá:
  • Criar um serviço de armazenamento
  • Atualizar um esquema do GraphQL
  • Atualizar a aplicação React

Conceitos principais

Serviço de armazenamento - O armazenamento e a consulta de arquivos, como imagens e vídeos, são requisitos comuns para a maioria das aplicações. Uma opção para fazer isso é codificar o arquivo em Base64 e enviar como uma string para salvar no banco de dados. Essa opção apresenta desvantagens, como o arquivo codificado ser maior que o binário original, a operação ser computacionalmente cara e o excesso de complexidade devido à codificação e decodificação adequadas. Outra opção seria ter um serviço de armazenamento especificamente criado e otimizado para o armazenamento de arquivos. Serviços de armazenamento como o Amazon S3 existem para tornar isso o mais fácil, eficiente e barato possível.

 Tempo para a conclusão

10 minutos

 Serviços usados

Implementação

  • Para adicionar a funcionalidade de armazenamento de imagens, usaremos a categoria de armazenamento Amplify. Você pode manter as seleções padrão para a maioria das opções abaixo, mas selecione as opções de criação/atualização, leitura e exclusão individualmente pressionando a barra de espaço em cada uma antes de pressionar Enter para continuar com a solicitação.

    amplify add storage
    
    ? Select from one of the below mentioned services: Content (Images, audio, video, etc.)
    ? Provide a friendly name for your resource that will be used to label this category in the project: imagestorage
    ? Provide bucket name: <your-unique-bucket-name>
    ? Who should have access: Auth users only
    ? What kind of access do you want for Authenticated users? create/update, read, delete
    ? Do you want to add a Lambda Trigger for your S3 Bucket? (y/N) no
  • Em seguida, abra o amplify/backend/api/notesapp/schema.graphql e atualize-o com o seguinte esquema:

    type Note @model @auth(rules: [ { allow: public } ] ){
      id: ID!
      name: String!
      description: String
      image: String
    }

    Certifique-se de salvar o arquivo.

  • Agora que o serviço de armazenamento foi configurado localmente e que atualizamos o esquema GraphQL, podemos implantar as atualizações executando o comando push Amplify:

    amplify push --y
  • Agora que o back-end foi atualizado, vamos atualizar o aplicativo React para adicionar o recurso de fazer upload das imagens e visualizá-las em uma nota. Abra src/App.js e faça as mudanças a seguir.

    a. Primeiro, adicione a classe Armazenamento e o componente Imagem às importações do Amplify:

    import { API, Storage } from 'aws-amplify';
    import {
      Button,
      Flex,
      Heading,
      Image,
      Text,
      TextField,
      View,
      withAuthenticator,
    } from '@aws-amplify/ui-react';

    b. Atualize a função fetchNotes para obter uma imagem se houver uma imagem associada à nota:

    async function fetchNotes() {
      const apiData = await API.graphql({ query: listNotes });
      const notesFromAPI = apiData.data.listNotes.items;
      await Promise.all(
        notesFromAPI.map(async (note) => {
          if (note.image) {
            const url = await Storage.get(note.name);
            note.image = url;
          }
          return note;
        })
      );
      setNotes(notesFromAPI);
    }

    c. Atualize a função createNote para adicionar a imagem à matriz de imagens locais se houver uma imagem associada à nota:

    async function createNote(event) {
      event.preventDefault();
      const form = new FormData(event.target);
      const image = form.get("image");
      const data = {
        name: form.get("name"),
        description: form.get("description"),
        image: image.name,
      };
      if (!!data.image) await Storage.put(data.name, image);
      await API.graphql({
        query: createNoteMutation,
        variables: { input: data },
      });
      fetchNotes();
      event.target.reset();
    }
    

    d. Atualize a função deleteNote para excluir arquivos do armazenamento quando as notas forem excluídas:

    async function deleteNote({ id, name }) {
      const newNotes = notes.filter((note) => note.id !== id);
      setNotes(newNotes);
      await Storage.remove(name);
      await API.graphql({
        query: deleteNoteMutation,
        variables: { input: { id } },
      });
    }

    e. Adicione outra entrada ao formulário no bloco de retorno:

    <View
      name="image"
      as="input"
      type="file"
      style={{ alignSelf: "end" }}
    />

    f. Ao mapear a matriz de notas, renderize uma imagem se ela existir:

    {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>
        {note.image && (
          <Image
            src={note.image}
            alt={`visual aid for ${notes.name}`}
            style={{ width: 400 }}
          />
        )}
        <Button variation="link" onClick={() => deleteNote(note)}>
          Delete note
        </Button>
      </Flex>
    ))}

    g. Confirme suas alterações e envie para o GitHub. Em seguida, aguarde a conclusão da compilação para ver a aplicação completa em tempo real!

    git add .
    git commit -m "Added graphql and storage"
    git push origin main
  • Para testar o aplicativo, execute o comando Iniciar:

    npm start

    Agora você deve ser capaz de fazer o upload opcional de uma imagem para cada nota.

  • Remoção de serviços individuais

    Para remover serviços individuais, é possível usar o comando de remoção do Amplify:

    amplify remove auth
    
    ? Choose the resource you would want to remove: <your-service-name>

    Em seguida, execute o comando de push do Amplify:

    amplify push

    Exclusão do projeto inteiro

    Para excluir o projeto e os recursos associados, é possível executar o comando de exclusão do Amplify:

    amplify delete

Conclusão

Você implantou uma aplicação Web usando o AWS Amplify! Você adicionou autenticação à aplicação, permitindo que os usuários se cadastrem, façam login e gerenciem suas contas. A aplicação também tem uma API GraphQL escalonável configurada com um banco de dados Amazon DynamoDB, permitindo aos usuários criar e excluir notas. Você também adicionou armazenamento de arquivos usando o Amazon S3, permitindo aos usuários fazer upload de imagens e visualizá-las em suas aplicações.

Esta página foi útil para você?

Parabéns!

Você criou uma aplicação Web na AWS com êxito! Para continuar em grande estilo, aprofunde-se nas tecnologias específicas da AWS e leve sua aplicação para o próximo nível.