Conceitos básicos da AWS

Crie uma aplicação React

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

Módulo 5: Adição de armazenamento

Neste módulo, você adicionará armazenamento e a capacidade de associar imagens às notas no aplicativo.

Introdução

Agora que o aplicativo notas está funcionando, vamos adicionar a capacidade de associar uma imagem à 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á o aplicativo React para permitir o upload, a busca e a renderização de imagens.

O que você aprenderá

  • Criar um serviço de armazenamento
  • Atualizar um esquema do GraphQL
  • Atualizar o aplicativo React

Principais conceitos

Serviço de armazenamento - Armazenamento e consulta de arquivos, como imagens e vídeos, é um requisito comum 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 a complexidade adicional 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

  • Criar o serviço de armazenamento

    Para adicionar a funcionalidade de armazenamento de imagens, usaremos a categoria de armazenamento Amplify:

    amplify add storage
    
    ? Please select from one of the below mentioned services: Content
    ? Please provide a friendly name for your resource that will be used to label this category in the project: imagestorage
    ? Please 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, read, update, delete
    ? Do you want to add a Lambda Trigger for your S3 Bucket? N
  • Atualização do esquema GraphQL

    Em seguida, abra o amplify/backend/api/notesapp/schema.graphql e atualize-o com o seguinte esquema:

    type Note @model {
      id: ID!
      name: String!
      description: String
      image: String
    }
    

    Certifique-se de salvar o arquivo.

  • Implantar serviço de armazenamento e atualizações de API

    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
  • Atualização do aplicativo React

    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 Storage (Armazenamento) às suas importações do Amplify:

    import { API, Storage } from 'aws-amplify';

    b. Na função principal do aplicativo, crie uma nova função onChange para processar o upload da imagem:

    async function onChange(e) {
      if (!e.target.files[0]) return
      const file = e.target.files[0];
      setFormData({ ...formData, image: file.name });
      await Storage.put(file.name, file);
      fetchNotes();
    }
    

    c. 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 image = await Storage.get(note.image);
          note.image = image;
        }
        return note;
      }))
      setNotes(apiData.data.listNotes.items);
    }
    

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

    async function createNote() {
      if (!formData.name || !formData.description) return;
      await API.graphql({ query: createNoteMutation, variables: { input: formData } });
      if (formData.image) {
        const image = await Storage.get(formData.image);
        formData.image = image;
      }
      setNotes([ ...notes, formData ]);
      setFormData(initialFormState);
    }
    

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

    <input
      type="file"
      onChange={onChange}
    />
    

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

    {
      notes.map(note => (
        <div key={note.id || note.name}>
          <h2>{note.name}</h2>
          <p>{note.description}</p>
          <button onClick={() => deleteNote(note)}>Delete note</button>
          {
            note.image && <img src={note.image} style={{width: 400}} />
          }
        </div>
      ))
    }
    
  • Execução do aplicativo

    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.

Conclusão

Você implantou uma aplicação Web usando o AWS Amplify! Você adicionou autenticação ao seu aplicativo, permitindo que os usuários se cadastrem, façam login e gerenciem suas contas. O aplicativo 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 seus aplicativos.

  • Exclusão de recursos

    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

Este módulo foi útil?

Agradecemos a sua atenção
Gostaríamos de saber do que você gostou.
Desculpe por ter desapontado
Encontrou algo desatualizado, confuso ou incorreto? Envie seus comentários para nos ajudar a melhorar este tutorial.

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.