Membangun Aplikasi React Full-Stack

Implementasi

• Buat layanan penyimpanan

  Untuk menambahkan fungsionalitas penyimpanan gambar, kami akan menggunakan kategori penyimpanan Amplify. Anda dapat menyimpan pilihan default untuk sebagian besar opsi di bawah ini, tetapi pastikan untuk memilih opsi buat/perbarui, baca, dan hapus satu per satu dengan menekan spasi pada masing-masing opsi sebelum menekan Enter untuk melanjutkan prompt.

  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

  Copy
• Perbarui skema GraphQL

  Selanjutnya, buka amplify/backend/api/notesapp/schema.graphql dan perbarui dengan skema berikut:

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

  Code snippet copied

  Copy

  Pastikan untuk menyimpan file.
  

• Deploy layanan penyimpanan dan pembaruan API

  Setelah layanan penyimpanan dikonfigurasi secara lokal dan kami telah memperbarui skema GraphQL, kami dapat melakukan deployment pembaruan dengan menjalankan perintah push Amplify:
  

  amplify push --y

  Code snippet copied

  Copy
• Perbarui aplikasi React

  Setelah backend diperbarui, perbarui aplikasi React untuk menambahkan fungsionalitas guna mengunggah dan melihat gambar untuk catatan. Buka src/App.js dan buat perubahan berikut.

  a. Pertama, tambahkan kelas Penyimpanan dan komponen Gambar ke impor Amplify Anda:

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

  Code snippet copied

  Copy

  b. Perbarui fungsi fetchNotes untuk mengambil gambar jika ada gambar yang terkait dengan catatan:
  

  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

  Copy

  c. Perbarui fungsi createNote untuk menambahkan gambar ke array gambar lokal jika gambar dikaitkan dengan catatan:

  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

  Copy

  d. Perbarui fungsi deleteNote untuk menghapus file dari penyimpanan ketika catatan dihapus:

  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

  Copy

  e. Tambahkan input tambahan ke formulir di blok pengembalian:
  

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

  Code snippet copied

  Copy

  f. Saat memetakan array catatan, render gambar jika ada:
  

  {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

  Copy

  g. Commit perubahan Anda dan dorong ke GitHub. Kemudian, tunggu sampai build selesai untuk melihat aplikasi lengkap Anda secara langsung!

  git add .
  git commit -m "Added graphql and storage"
  git push origin main

  Code snippet copied

  Copy
• Jalankan aplikasi

  Untuk menguji aplikasi, jalankan perintah start:
  

  npm start

  Code snippet copied

  Copy

  Sekarang Anda seharusnya dapat mengunggah gambar secara opsional untuk setiap catatan.
  

• Menghapus sumber daya

  Menghapus layanan individual

  Untuk menghapus layanan individual, Anda dapat menggunakan perintah remove Amplify:

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

  Code snippet copied

  Copy

  Kemudian, jalankan perintah push Amplify:
  

  amplify push

  Code snippet copied

  Copy

  Menghapus seluruh proyek

  Untuk menghapus proyek dan sumber daya terkait, Anda dapat menjalankan perintah delete Amplify:

  amplify delete

  Code snippet copied

  Copy