Criar uma aplicação React de pilha completa

Implementação

• Criar o serviço de armazenamento

  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

  Code snippet copied

  Copiar
• Atualizar o esquema do GraphQL

  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
  }

  Code snippet copied

  Copiar

  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

  Code snippet copied

  Copiar
• Atualizar a aplicação 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 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';

  Code snippet copied

  Copiar

  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);
  }

  Code snippet copied

  Copiar

  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();
  }
  

  Code snippet copied

  Copiar

  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 } },
    });
  }

  Code snippet copied

  Copiar

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

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

  Code snippet copied

  Copiar

  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>
  ))}

  Code snippet copied

  Copiar

  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

  Code snippet copied

  Copiar
• Execute a aplicação

  Para testar o aplicativo, execute o comando Iniciar:
  

  npm start

  Code snippet copied

  Copiar

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

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

  Code snippet copied

  Copiar

  Em seguida, execute o comando de push do Amplify:
  

  amplify push

  Code snippet copied

  Copiar

  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

  Code snippet copied

  Copiar