Membangun aplikasi klien - 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

Anda dapat terhubung ke AWS AppSync GraphQL API Anda menggunakan klien GraphQL apa pun, tetapi kami sangat merekomendasikan klien Amplify. Amplify tidak hanya membuat SDK klien yang diketik secara otomatis untuk GraphQL API Anda, tetapi juga menawarkan dukungan untuk data waktu nyata 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 mengonfigurasi 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 konfigurasi API Anda untuk menyiapkan 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 perintah CLI berikut:

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

    Ini akan mengunduh skema API Anda dan, secara default, menghasilkan kode pembantu klien ke dalam foldersrc/graphql. Setelah setiap penerapan API, 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 ./