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