建置完整堆疊的 React 應用程式

實作

• 建立儲存服務

  要新增影像儲存功能，我們將使用 Amplify 儲存類別。您可以保留下列大部分選項的預設選擇，但請務必在每個選項上按下空格鍵，然後再按 Enter 鍵繼續處理提示，以單獨選取建立/更新、讀取和 刪除選項。

  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

  複製
• 更新 GraphQL 結構描述

  接下來，開啟 amplify/backend/api/notesapp/schema.graphql 並使用以下結構描述對其進行更新：

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

  Code snippet copied

  複製

  確保儲存檔案。
  

• 部署儲存服務和 API 更新

  我們已經在本機設定了儲存服務，並更新了 GraphQL 結構描述。現在，我們可以透過執行 Amplify push 命令來部署更新：
  

  amplify push --y

  Code snippet copied

  複製
• 更新 React 應用程式

  現在後端已經更新完畢，讓我們更新 React 應用程式，以新增功能來上傳和檢視筆記的影像。開啟 src/App.js 並進行以下變更。

  a.首先，將儲存類別和影像元件新增至 Amplify 匯入：

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

  Code snippet copied

  複製

  b.如果存在與筆記關聯的影像，則更新 fetchNotes 函數以擷取影像：
  

  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

  複製

  c.如果存在與筆記關聯的影像，則更新 createNote 函數以將影像新增到本機影像陣列中：

  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

  複製

  d.更新 deleteNote 功能，以在刪除註釋時從儲存中刪除文件：

  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

  複製

  e.在 return 區塊中向表單新增其他輸入：
  

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

  Code snippet copied

  複製

  f.在 notes 陣列上進行映射時，如果存在影像則呈現：
  

  {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

  複製

  g.遞交您的變更並推送至 GitHub。然後等待建置完成，以即時查看完整的應用程式！

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

  Code snippet copied

  複製
• 執行應用程式

  要測試該應用程式，執行 start 命令：
  

  npm start

  Code snippet copied

  複製

  現在，您應該可以選擇為每個筆記上傳影像。
  

• 刪除資源

  刪除單個服務

  要刪除單個服務，可以使用 Amplify remove 命令：

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

  Code snippet copied

  複製

  然後執行 Amplify push 命令：
  

  amplify push

  Code snippet copied

  複製

  刪除整個專案

  若要刪除專案和關聯的資源，可以執行 Amplify delete 命令：

  amplify delete

  Code snippet copied

  複製