Membangun aplikasi klien menggunakan Amplify client - AWS AppSync

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Membangun aplikasi klien menggunakan Amplify client

Anda dapat terhubung ke AWS AppSync GraphQL Anda API menggunakan klien GraphQL apa pun, tetapi kami sangat menyarankan klien Amplify v6. Amplify tidak hanya membuat otomatis klien yang diketik dengan kuat untuk GraphQL SDKs Anda API tetapi juga menawarkan dukungan untuk data real-time dan kemampuan kueri GraphQL yang ditingkatkan dalam aplikasi klien. Untuk aplikasi web, Amplify dapat menghasilkan klien. JavaScript Bagi mereka yang menargetkan lingkungan lintas platform atau seluler, Amplify melayani Android, iOS, dan React Native. Untuk mempelajari lebih dalam pembuatan kode klien untuk platform ini, lihat dokumentasi Amplify. Berikut panduan untuk memulai perjalanan Anda dengan aplikasi JavaScript React:

catatan

Anda perlu menginstal dan mengkonfigurasi npm dan Amazon CLI sebelum memulai. Jika Anda menggunakan klien Amplify v6, ikuti panduan ini.

Untuk memulai:

  1. Di mesin lokal Anda, navigasikan ke direktori proyek Anda. Instal perpustakaan Amplify menggunakan perintah di bawah ini:

    npm install aws-amplify

  2. Unduh file konfigurasi Anda dan letakkan di folder proyek Anda. File konfigurasi Anda biasanya akan berisi config variabel dengan beberapa pengaturan (titik akhir, Wilayah, mode otorisasi, dll.) yang ditentukan. Misalnya, mungkin terlihat seperti ini:

    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;

  3. Dalam kode Anda, impor Amplify Library dan konfigurasi Anda untuk menyiapkan Amplify:

    import { Amplify } from 'aws-amplify';
import config from './aws-exports.js';

Amplify.configure(config);

    Atau, gunakan cuplikan dalam API konfigurasi Anda untuk mengatur Amplify secara langsung:

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

  4. Dengan menggunakan rantai alat Amplify, Anda memiliki opsi untuk membuat operasi otomatis berdasarkan skema Anda, yang menghemat upaya skrip manual. Di direktori root aplikasi Anda, gunakan CLI perintah berikut:

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

    Ini akan mengunduh skema Anda API dan, secara default, menghasilkan kode pembantu klien ke dalam foldersrc/graphql. Setelah setiap API penerapan, Anda dapat menjalankan kembali perintah berikut untuk menghasilkan pernyataan dan tipe GraphQL yang diperbarui:

    npx @aws-amplify/cli codegen

  5. Anda sekarang dapat menghasilkan model untuk Android, Swift, Flutter, dan. JavaScript DataStore Gunakan perintah berikut untuk mengunduh skema Anda:

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

    Kemudian, jalankan perintah berikut dari direktori root aplikasi Anda:

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