AWS 入門

建立 React 應用程式

使用 AWS Amplify 建立簡單的 Web 應用程式

單元 5:新增儲存體

在本單元中,您將新增儲存體至應用程式,並讓影像能夠與應用程式中的筆記關聯。

簡介

現在,記事應用程式開始工作了,讓我們新增將影像與每個筆記關聯的功能。在本單元中,您將使用 Amplify CLI 和程式庫來建立利用 Amazon S3 的儲存服務。然後,您將更新在上一個單元中建立的 GraphQL 結構描述,以將影像與每個筆記關聯。最後,您將更新 React 應用程式以實現影像上傳擷取和呈現。

您將學到的內容

  • 建立儲存服務
  • 更新 GraphQL 結構描述
  • 更新 React 應用

主要概念

儲存服務 - 儲存和查詢影像和影片之類的檔案是大多數應用程式的常見要求。一種選擇是對檔案進行 Base64 編碼,並作為字串傳送以儲存在資料庫中。這樣做的缺點是,編碼檔案比原始二進位檔案大,操作在運算上成本高昂,並且由於需要正確編碼和解碼,所以複雜性有所增加。另一種選擇是專門為檔案儲存建立和優化儲存服務。諸如 Amazon S3 之類的儲存服務能夠讓這個過程盡可能簡單、高效能且廉價。

 完成時間

10 分鐘

 使用的服務

實作

  • 建立儲存服務

    要新增影像儲存功能,我們將使用 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
  • 更新 GraphQL 結構描述

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

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

    確保儲存檔案。

  • 部署儲存服務和 API 更新

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

    amplify push --y
  • 更新 React 應用程式

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

    a.首先將 Storage 類新增到您的 Amplify import 中:

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

    b.在主要應用程式函數中,建立一個新的 onChange 函數以處理影像上傳:

    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.如果存在與筆記關聯的影像,則更新 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 image = await Storage.get(note.image);
          note.image = image;
        }
        return note;
      }))
      setNotes(apiData.data.listNotes.items);
    }
    

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

    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.在 return 區塊中向表單新增其他輸入:

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

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

    {
      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>
      ))
    }
    
  • 執行應用程式

    要測試該應用程式,執行 start 命令:

    npm start

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

結論

您已使用 AWS Amplify 部署了一個 Web 應用程式! 您已將身份驗證新增到應用程式中,從而允許使用者註冊、登入和管理其帳戶。該應用程式還具有可擴展的 GraphQL API 以及 Amazon DynamoDB 資料庫,允許使用者建立和刪除筆記。您還使用 Amazon S3 新增了檔案儲存體,允許使用者上傳影像並在應用程式中進行檢視。

  • 刪除資源

    刪除單個服務

    要刪除單個服務,可以使用 Amplify remove 命令:

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

    然後執行 Amplify push 命令:

    amplify push

    刪除整個專案

    要刪除專案和關聯的資源,可以執行 Amplify delete 命令:

    amplify delete

這個單元對您是否有幫助?

感謝您
請告訴我們您喜歡的部分。
抱歉,讓您失望
是有內容過時、令人困擾,或不準確嗎? 請提供意見回饋,協助我們改進此教學課程。

恭喜您!

您已成功在 AWS 上建立 Web 應用程式! 下一步,您將深入了解特定的 AWS 技術,並將您的應用程式提升到一個新的水平。