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

# Formulir Alamat SDK
<a name="address-form-sdk"></a>

SDK Formulir Alamat merampingkan pembuatan formulir entri alamat pintar. Formulir alamat yang dibuat dengan SDK memberikan saran alamat yang relevan saat pengguna mulai mengetik. Ketika pengguna memilih saran, formulir alamat secara otomatis mengisi bidang seperti kota, negara bagian, dan kode pos. Ini mengurangi kesalahan dan mempercepat entri data dengan meminimalkan input manual. Pengguna juga dapat melihat pratinjau alamat yang dipilih pada peta dan menyesuaikan pin lokasinya untuk menunjukkan pintu masuk atau lokasi pengambilan tertentu, secara signifikan meningkatkan akurasi.

![Demonstrasi SDK Formulir Alamat yang menunjukkan fungsionalitas pelengkapan otomatis](http://docs.aws.amazon.com/id_id/location/latest/developerguide/images/address-form-demo.gif)


## Cobalah
<a name="address-form-try-it"></a>

### Demo
<a name="address-form-demo"></a>

Coba [demo formulir alamat](https://aws-geospatial.github.io/address-form-sdk-js/) yang berfungsi penuh. 

### Bangun Sendiri
<a name="address-form-builder"></a>

Langsung [Memulai](#address-form-getting-started) ke mulai menerapkan formulir alamat menggunakan Address Form SDK, atau coba pendekatan tanpa kode dengan [wizard Pembuat Formulir Alamat](https://console.aws.amazon.com/location/solution-builder/home#/address-form) WYSIWYG Location Service, yang didukung oleh SDK ini dan dapat diakses di konsol Amazon Location Service di. [https://console.aws.amazon.com/location/](https://console.aws.amazon.com/location/) Wizard interaktif ini memungkinkan Anda membuat formulir yang disesuaikan dengan saran prediktif, populasi bidang otomatis, dan tata letak yang fleksibel. Pengembang dapat mengunduh ready-to-use paket di React JavaScript, React TypeScript, atau mandiri HTML/JavaScript untuk memudahkan integrasi tanpa menulis kode apa pun.

## Fitur Utama
<a name="address-form-features"></a>

Fitur utama SDK Formulir Alamat meliputi:
+ Menyediakan saran typeahead bawaan untuk alamat dan POIs, mempercepat entri data.
+ Mengaktifkan pencarian tipe tempat yang dapat dikonfigurasi (misalnya, kode pos, lokalitas) untuk hasil yang lebih tepat.
+ Menawarkan deteksi lokasi browser otomatis untuk memusatkan pengguna dengan cepat di area mereka saat ini.
+ Menampilkan visualisasi peta bawaan untuk kejelasan dan konteks yang lebih besar.
+ Memungkinkan lokasi alamat disesuaikan pada peta tanpa kehilangan lokasi yang disediakan sistem, memastikan akurasi dan kontrol.
+ Termasuk alat pembuat WYSIWYG yang tidak memerlukan pengkodean, menghemat waktu dan tenaga.
+ Menerapkan debouncing dan caching untuk typeahead untuk mengoptimalkan kinerja APIs dan mengurangi biaya.
+ Mendukung kustomisasi gaya agar sesuai dengan merek aplikasi dan pengalaman pengguna Anda.

Ini menggunakan operasi Amazon Location Service API berikut untuk memberikan informasi alamat ke formulir alamat:

**[GetTile](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetTile.html)**  
Mengambil ubin peta untuk merender peta interaktif untuk memvisualisasikan lokasi alamat dan menyesuaikan posisi alamat.

**[Pelengkapan otomatis](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Autocomplete.html)**  
Memberikan saran alamat real-time saat pengguna mengetik.

**[Sarankan](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Suggest.html)**  
Memberikan alamat real-time dan saran POI saat pengguna mengetik.

**[ReverseGeocode](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_ReverseGeocode.html)**  
Mengonversi lokasi pengguna saat ini ke alamat alamat terdekat yang diketahui jika mereka memilih untuk mengisi alamat mereka secara otomatis berdasarkan lokasi mereka saat ini.

**[GetPlace](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_GetPlace.html)**  
Mengambil informasi tempat terperinci untuk alamat yang dipilih setelah memilih alamat dari hasil Autocomplete atau Suggest API.

## Harga
<a name="address-form-pricing"></a>

SDK gratis dan [bersumber terbuka](https://github.com/aws-geospatial/address-form-sdk-js) di bawah lisensi Apache-2.0. Anda hanya membayar untuk penggunaan API. Silakan lihat [halaman harga Amazon Location Service](https://aws.amazon.com/location/pricing/).

## Memulai
<a name="address-form-getting-started"></a>

Address Form SDK dapat digunakan dalam aplikasi React atau dalam HTML dan JavaScript halaman mandiri. Mulailah dengan mengikuti petunjuk di bawah ini.

### Prasyarat
<a name="address-form-prerequisites"></a>

**catatan**  
SDK Formulir Alamat memerlukan kunci API dengan izin yang diperlukan agar berfungsi dengan baik. Buat kunci API dengan izin berikut menggunakan [wizard Address Form SDK Builder](https://console.aws.amazon.com/location/solution-builder/home#/address-form) di Amazon Location Service console, atau ikuti petunjuk di bawah ini untuk membuatnya secara manual.

Penggunaan SDK Formulir Alamat mengharuskan tindakan berikut diizinkan dalam kebijakan kunci API:
+ `geo-maps:GetTile`- Ini diperlukan saat menampilkan komponen peta. Lihat referensi [GetTile](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetTile.html)API.
+ `geo-places:Autocomplete`- Ini diperlukan saat menggunakan `Autocomplete` operasi untuk fungsionalitas typeahead. Lihat referensi [Autocomplete](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Autocomplete.html) API.
+ `geo-places:Suggest`- Ini diperlukan saat menggunakan `Suggest` operasi untuk fungsionalitas typeahead. Lihat referensi [Suggest](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Suggest.html) API.
+ `geo-places:ReverseGeocode`- Ini diperlukan saat mengizinkan pengguna untuk menyediakan lokasi mereka saat ini menggunakan API geolokasi browser. Lihat referensi [ReverseGeocode](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_ReverseGeocode.html)API.
+ `geo-places:GetPlace`- Ini diperlukan saat menggunakan fungsionalitas typeahead. Lihat referensi [GetPlace](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_GetPlace.html)API.

Ikuti panduan [Gunakan Kunci API untuk mengautentikasi](https://docs.aws.amazon.com/location/latest/developerguide/using-apikeys.html) untuk membuat kunci API Amazon Location Service dengan izin yang diperlukan.

Contoh kebijakan kunci untuk [CreateKey](https://docs.aws.amazon.com/location/latest/APIReference/API_geotags_CreateKey.html)API dengan izin yang diperlukan:

#### CreateKey meminta izin Formulir Alamat
<a name="createkey-example"></a>

```
{
  "KeyName": "ExampleKey",
  "ExpireTime": "YYYY-MM-DDThh:mm:ss.sss",
  "Restrictions": {
    "AllowActions": [
      "geo-maps:GetTile",
      "geo-places:Autocomplete",
      "geo-places:Suggest",
      "geo-places:GetPlace",
      "geo-places:ReverseGeocode"
    ],
    "AllowResources": [
      "arn:aws:geo-maps:<Region>::provider/default",
      "arn:aws:geo-places:<Region>::provider/default"
    ]
  }
}
```

### Penginstalan
<a name="address-form-installation"></a>

#### HTML/ JavaScript
<a name="address-form-html-js-install"></a>

Sertakan CSS berikut dan JavaScript untuk SDK dalam kode HTML Anda

```
...
<head>
...
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@aws/address-form-sdk-js/dist/standalone/address-form-sdk.css"
/>
...
</head>
...
<body>
...
<script src="https://cdn.jsdelivr.net/npm/@aws/address-form-sdk-js/dist/standalone/address-form-sdk.umd.js"></script>
</body>
...
```

#### Bereaksi
<a name="address-form-react-install"></a>

Instal SDK dari npm: `npm install @aws/address-form-sdk-js`

### Gunakan SDK
<a name="address-form-use-sdk"></a>

Tambahkan kode berikut ke aplikasi React Anda. Perbarui `AMAZON_LOCATION_API_KEY` dengan kunci API Anda dan `AMAZON_LOCATION_REGION` dengan wilayah tempat kunci API dibuat. Saat formulir dikirimkan, `onSubmit` callback menyediakan fungsi `getData` async. Panggil fungsi ini dengan `intendedUse` nilai untuk mengambil data formulir.

```
onSubmit: async (getData) => {
  const data = await getData({
    intendedUse: "SingleUse", // or "Storage"
  });
};
```

**catatan**  
Gunakan `"Storage"` jika Anda perlu menyimpan atau menyimpan hasil cache. Ini memastikan kepatuhan terhadap [persyaratan penggunaan yang dimaksudkan](https://docs.aws.amazon.com/location/latest/developerguide/places-intended-use.html) oleh Amazon Location Service.

------
#### [ HTML/JavaScript ]

```
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Address Form</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@aws/address-form-sdk-js/dist/standalone/address-form-sdk.css"
    />
  </head>
  <body>
    <form
      id="amazon-location-address-form"
      class="address-form flex-row flex-1"
    >
      <div class="flex-column">
        <input
          data-type="address-form"
          name="addressLineOne"
          data-api-name="suggest"
          data-show-current-location="true"
        />
        <input data-type="address-form" name="addressLineTwo" />
        <input data-type="address-form" name="city" />
        <input data-type="address-form" name="province" />
        <input data-type="address-form" name="postalCode" />
        <input data-type="address-form" name="country" />
        <div class="flex-row">
          <button data-type="address-form" type="submit">Submit</button>
          <button data-type="address-form" type="reset">Reset</button>
        </div>
      </div>
      <div data-type="address-form" data-map-style="Standard,Light"></div>
    </form>
    <></script>
script src="https://cdn.jsdelivr.net/npm/@aws/address-form-sdk-js/dist/standalone/address-form-sdk.umd.js"
    <script>
      AddressFormSDK.render({
        root: "#amazon-location-address-form",
        apiKey: "AMAZON_LOCATION_API_KEY",
        region: "AMAZON_LOCATION_REGION",
        showCurrentCountryResultsOnly: true,
        onSubmit: async (getData) => {
          // Get form data with intendedUse parameter
          // Use "SingleUse" for one-time display only
          // Use "Storage" if you plan to store/cache the results - makes an extra API call to grant storage rights
          const data = await getData({ intendedUse: "SingleUse" });
          console.log(data);
        },
      });
    </script>
  </body>
</html>
```

------
#### [ React ]

```
import React from 'react';
import { AddressForm, Flex } from "@aws/address-form-sdk-js";

export default function App() {
  return (
    <AddressForm
      apiKey="AMAZON_LOCATION_API_KEY"
      region="AMAZON_LOCATION_REGION"
      onSubmit={async (getData) => {
        // Get form data with intendedUse parameter
        // Use "SingleUse" for one-time display only
        // Use "Storage" if you plan to store/cache the results - makes an extra API call to grant storage rights
        const data = await getData({ intendedUse: "SingleUse" });
        console.log(data);
      }}
    >
      <Flex
        direction="row"
        flex
      >
        <Flex direction="column">
          <input
            data-api-name="autocomplete"
            data-type="address-form"
            name="addressLineOne"
            placeholder="Enter address"
          />
          <input
            data-type="address-form"
            name="addressLineTwo"
          />
          <input
            data-type="address-form"
            name="city"
            placeholder="City"
          />
          <input
            data-type="address-form"
            name="province"
            placeholder="State/Province"
          />
          <input
            data-type="address-form"
            name="postalCode"
          />
          <input
            data-type="address-form"
            name="country"
            placeholder="Country"
          />
          <Flex direction="row">
            <button address-form="submit">
              Submit
            </button>
            <button address-form="reset">
              Reset
            </button>
          </Flex>
        </Flex>
        <AddressFormMap
          mapStyle={[
            'Standard',
            'Light'
          ]}
         />
      </Flex>
    </AddressForm>
  );
}
```

------

## Negara yang Didukung
<a name="address-form-supported-countries"></a>

Address Form SDK mendukung pengisian otomatis alamat secara global menggunakan Amazon Location Service. Negara-negara berikut memiliki dukungan penuh dengan parsing bidang alamat, di mana setiap komponen alamat diisi ke dalam bidangnya masing-masing:
+ Australia (AU)
+ Kanada (CA)
+ Prancis (FR)
+ Hong Kong (HK)
+ Irlandia (IE)
+ Selandia Baru (NZ)
+ Filipina (PH)
+ Singapura (SG)
+ Britania Raya (GB)
+ Amerika Serikat (US)

Semua negara lain berada dalam status Pratinjau. Negara pratinjau menampilkan alamat lengkap di `addressLineOne` bidang tanpa format khusus negara. Rilis mendatang akan meningkatkan perilaku ini dan Anda dapat mengakses peningkatan ini dengan menggunakan SDK versi terbaru.

## Wilayah AWS yang Didukung
<a name="address-form-supported-aws-regions"></a>

Panduan Address Form SDK dan Address Form Builder tersedia di semua wilayah AWS tempat Amazon Location Service beroperasi, menggunakan `Current` versinya APIs. Lihat daftar lengkap wilayah yang didukung di wilayah yang [didukung Lokasi Amazon](https://docs.aws.amazon.com/location/latest/developerguide/location-regions.html).

## Referensi API
<a name="address-form-api-reference"></a>

Lihat [Referensi API README](https://github.com/aws-geospatial/address-form-sdk-js#api-reference).