本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 使用 Amplify 用戶端建置用戶端應用程式
<a name="building-a-client-app"></a>

您可以使用任何 AWS AppSync GraphQL 用戶端連線到您的GraphQL API，但我們強烈建議使用 Amplify v6 用戶端。Amplify 不僅為您的 GraphQL API 自動產生強型用戶端 SDKs，也支援用戶端應用程式中的即時資料和增強型 GraphQL 查詢功能。針對 Web 應用程式，Amplify 可以產生 JavaScript 用戶端。針對跨平台或行動環境，Amplify 可滿足 Android、iOS 和 React Native 的需求。若要深入了解這些平台的用戶端程式碼產生，請參閱 Amplify [文件](https://docs.amplify.aws/cli/graphql/client-code-generation/)。以下是使用 JavaScript React 應用程式開始旅程的指南：

**注意**  
您需要安裝和設定 [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) 和 [Amazon CLI](https://aws.amazon.com/cli/)，才能開始使用。如果您使用的是 Amplify v6 用戶端，[請遵循本指南](https://docs.amplify.aws/react/build-a-backend/graphqlapi/connect-to-api/#configure-the-default-authorization-mode)。

開始使用：

1. 在本機電腦上，導覽至專案的目錄。使用以下命令安裝 Amplify 程式庫：

   ```
   npm install aws-amplify
   ```

1. 下載您的組態檔案，並將其放在您的專案資料夾中。您的組態檔案通常會包含已定義一些設定 （端點、區域、授權模式等） 的`config`變數。例如，它看起來可能會像這樣：

   ```
   const config =  {
       API: {
           GraphQL: {
             endpoint: 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-west-2.amazonaws.com/graphql',
             region: 'us-west-2',
             defaultAuthMode: 'apiKey',
             apiKey: ''
           }
       }
   };
   
   export default config;
   ```

1. 在您的程式碼中，匯入 Amplify Library 和您的組態以設定 Amplify：

   ```
   import { Amplify } from 'aws-amplify';
   import config from './aws-exports.js';
   
   Amplify.configure(config);
   ```

   或者，使用 API 組態中的程式碼片段直接設定 Amplify：

   ```
   import { Amplify } from 'aws-amplify';
   
   Amplify.configure({
     API: {
       GraphQL: {
         endpoint: 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-west-2.amazonaws.com/graphql',
         region: 'us-west-2',
         defaultAuthMode: 'apiKey',
         apiKey: ''
       }
     }
   });
   ```

1. 使用 Amplify 工具鏈，您可以選擇根據您的結構描述自動產生操作，從而節省手動編寫指令碼的工作量。在應用程式的根目錄中，使用下列 CLI 命令：

   ```
   npx @aws-amplify/cli codegen add --apiId <id goes here> --region <region goes here>
   ```

   這將下載 API 的結構描述，並根據預設，將用戶端協助程式程式碼產生到 `src/graphql` 資料夾。每次 API 部署後，您可以重新執行下列命令來產生更新的 GraphQL 陳述式和類型：

   ```
   npx @aws-amplify/cli codegen
   ```

1. 您現在可以為 Android、Swift、Flutter 和 JavaScript DataStore 產生模型。使用下列命令下載您的結構描述：

   ```
   aws appsync get-introspection-schema --api-id <id goes here> --region <region goes here> --format SDL schema.graphql
   ```

   然後，從應用程式的根目錄執行下列命令：

   ```
   npx @aws-amplify/cli codegen models \
   --model-schema schema.graphql \
   --target [android|ios|flutter|javascript|typescript] \
   --output-dir ./
   ```