Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

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

Das Address Form SDK optimiert die Erstellung intelligenter Adresseingabeformulare. Mit dem SDK erstellte Adressformulare bieten relevante Adressvorschläge, wenn Benutzer mit der Eingabe beginnen. Wenn ein Benutzer einen Vorschlag auswählt, füllt ein Adressformular automatisch Felder wie Stadt, Bundesland und Postleitzahl aus. Dadurch werden Fehler reduziert und die Dateneingabe beschleunigt, da manuelle Eingaben minimiert werden. Benutzer können sich auch eine Vorschau der ausgewählten Adresse auf einer Karte ansehen und ihre Standortnadel so anpassen, dass sie auf bestimmte Eingänge oder Abholorte hinweist, wodurch die Genauigkeit erheblich verbessert wird.

![SDK-Demonstration für Adressformulare mit der Funktion zur automatischen Vervollständigung](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/address-form-demo.gif)


## Probieren Sie es aus
<a name="address-form-try-it"></a>

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

Probieren Sie die voll funktionsfähige [Adressformular-Demo aus](https://aws-geospatial.github.io/address-form-sdk-js/). 

### Bauen Sie es selbst
<a name="address-form-builder"></a>

Gehen Sie weiter, [Erste Schritte](#address-form-getting-started) um mit der Implementierung von Adressformularen mithilfe des Address Form SDK zu beginnen, oder probieren Sie den No-Code-Ansatz mit dem [WYSIWYG-Assistenten zum Erstellen von Adressformularen](https://console.aws.amazon.com/location/solution-builder/home#/address-form) von Location Service aus, der von diesem SDK unterstützt wird und auf den Sie in der Amazon Location Service-Konsole unter zugreifen können. [https://console.aws.amazon.com/location/](https://console.aws.amazon.com/location/) Mit diesem interaktiven Assistenten können Sie benutzerdefinierte Formulare mit prädiktiven Vorschlägen, automatischer Feldauffüllung und flexiblen Layouts erstellen. Entwickler können ready-to-use Pakete in React JavaScript, React oder eigenständig herunterladen TypeScript, um sie einfach HTML/JavaScript zu integrieren, ohne Code schreiben zu müssen.

## Wichtigste Funktionen
<a name="address-form-features"></a>

Zu den wichtigsten Funktionen des Address Form SDK gehören:
+ Bietet integrierte Textvorschläge für Adressen und beschleunigt POIs die Dateneingabe.
+ Ermöglicht eine konfigurierbare Ortssuche (z. B. nach Postleitzahlen, Orten) für genauere Ergebnisse.
+ Bietet eine automatische Erkennung des Browser-Standorts, sodass Benutzer sich schnell auf ihren aktuellen Bereich konzentrieren können.
+ Zeigt integrierte Kartenvisualisierungen für mehr Übersichtlichkeit und besseren Kontext an.
+ Ermöglicht die Anpassung von Adresspositionen auf der Karte, ohne dass der vom System bereitgestellte Standort verloren geht, wodurch sowohl Genauigkeit als auch Kontrolle gewährleistet werden.
+ Beinhaltet ein WYSIWYG-Builder-Tool, das keine Codierung erfordert, was Zeit und Mühe spart.
+ Implementiert Debouncing und Caching für Typeahead APIs , um die Leistung zu optimieren und die Kosten zu senken.
+ Unterstützt die Anpassung des Stils an die Marke und das Benutzererlebnis Ihrer Anwendung.

Es verwendet die folgenden Amazon Location Service API-Operationen, um Adressinformationen für Adressformulare bereitzustellen:

**[GetTile](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetTile.html)**  
Ruft Kartenkacheln zum Rendern der interaktiven Karte ab, um den Standort der Adresse zu visualisieren und die Position einer Adresse anzupassen.

**[AutoVervollständigen](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Autocomplete.html)**  
Bietet Adressvorschläge in Echtzeit, während Benutzer tippen.

**[Vorschlagen](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Suggest.html)**  
Bietet Adress- und POI-Vorschläge in Echtzeit, während Benutzer tippen.

**[ReverseGeocode](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_ReverseGeocode.html)**  
Konvertiert den aktuellen Standort eines Benutzers in die nächstgelegene bekannte Adressadresse, wenn er sich dafür entscheidet, seine Adresse basierend auf seinem aktuellen Standort automatisch auszufüllen.

**[GetPlace](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_GetPlace.html)**  
Ruft detaillierte Ortsinformationen für ausgewählte Adressen ab, nachdem eine Adresse aus den Ergebnissen der Autocomplete- oder Suggest-API ausgewählt wurde.

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

Das SDK ist kostenlos und steht unter der Apache-2.0-Lizenz als [Open Source](https://github.com/aws-geospatial/address-form-sdk-js) zur Verfügung. Sie zahlen nur für die API-Nutzung. Bitte schauen Sie auf der [Preisseite von Amazon Location Service](https://aws.amazon.com/location/pricing/) nach.

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

Das Address Form SDK kann in einer React-App oder in einer eigenständigen JavaScript HTML-Seite verwendet werden. Folgen Sie zunächst den nachstehenden Anweisungen.

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

**Anmerkung**  
Das Address Form SDK benötigt einen API-Schlüssel mit den erforderlichen Berechtigungen, um ordnungsgemäß zu funktionieren. Erstellen Sie mithilfe des [Address Form SDK Builder-Assistenten](https://console.aws.amazon.com/location/solution-builder/home#/address-form) in der Amazon Location Service Service-Konsole einen API-Schlüssel mit den folgenden Berechtigungen, oder folgen Sie den nachstehenden Anweisungen, um ihn manuell zu erstellen.

Für die Verwendung des Address Form SDK müssen die folgenden Aktionen in der API-Schlüsselrichtlinie zulässig sein:
+ `geo-maps:GetTile`- Dies ist erforderlich, wenn die Kartenkomponente angezeigt wird. Weitere Informationen finden Sie in der [GetTile](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetTile.html)API-Referenz.
+ `geo-places:Autocomplete`- Dies ist erforderlich, wenn Sie die `Autocomplete` Operation für die Typeahead-Funktionalität verwenden. Weitere Informationen finden Sie in der [Autocomplete-API-Referenz](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Autocomplete.html).
+ `geo-places:Suggest`- Dies ist erforderlich, wenn Sie den `Suggest` Vorgang für die Typeahead-Funktionalität verwenden. Weitere Informationen finden Sie in der [Suggest-API-Referenz](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Suggest.html).
+ `geo-places:ReverseGeocode`- Dies ist erforderlich, wenn Benutzer ihren aktuellen Standort mithilfe der Geolocation-API von Browsern angeben können. Weitere Informationen finden Sie in der API-Referenz [ReverseGeocode](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_ReverseGeocode.html).
+ `geo-places:GetPlace`- Dies ist erforderlich, wenn Sie die Typeahead-Funktionalität verwenden. Weitere Informationen finden Sie in der [GetPlace](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_GetPlace.html)API-Referenz.

Folgen Sie der Anleitung [API-Schlüssel zur Authentifizierung verwenden](https://docs.aws.amazon.com/location/latest/developerguide/using-apikeys.html), um einen Amazon Location Service API-Schlüssel mit den erforderlichen Berechtigungen zu erstellen.

Beispiel für eine Schlüsselrichtlinie für die [CreateKey](https://docs.aws.amazon.com/location/latest/APIReference/API_geotags_CreateKey.html)API mit den erforderlichen Berechtigungen:

#### CreateKey Anfrage nach Berechtigungen für das Adressformular
<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"
    ]
  }
}
```

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

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

Fügen Sie das folgende CSS und JavaScript für das SDK in Ihren HTML-Code ein

```
...
<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>
...
```

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

Installieren Sie das SDK von npm: `npm install @aws/address-form-sdk-js`

### Verwenden Sie das SDK
<a name="address-form-use-sdk"></a>

Fügen Sie Ihrer React-App den folgenden Code hinzu. Aktualisiere `AMAZON_LOCATION_API_KEY` mit deinem API-Schlüssel und `AMAZON_LOCATION_REGION` mit der Region, in der der API-Schlüssel erstellt wurde. Wenn das Formular gesendet wird, bietet der `onSubmit` Callback eine `getData` asynchrone Funktion. Rufen Sie diese Funktion mit einem `intendedUse` Wert auf, um die Formulardaten abzurufen.

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

**Anmerkung**  
Verwenden Sie `"Storage"` diese Option, wenn Sie die Ergebnisse speichern oder zwischenspeichern müssen. Dadurch wird die Einhaltung der [Verwendungsbestimmungen](https://docs.aws.amazon.com/location/latest/developerguide/places-intended-use.html) von Amazon Location Service gewährleistet.

------
#### [ 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>
  );
}
```

------

## Unterstützte Länder
<a name="address-form-supported-countries"></a>

Das Address Form SDK unterstützt das automatische Ausfüllen von Adressen weltweit mithilfe von Amazon Location Service. In den folgenden Ländern wird die Analyse von Adressfeldern, bei der jede Adresskomponente in das entsprechende Feld eingefügt wird, uneingeschränkt unterstützt:
+ Australien (AU)
+ Kanada (CA)
+ Frankreich (FR)
+ Hongkong (HK)
+ Irland (IE)
+ Neuseeland (NZ)
+ Philippinen (PH)
+ Singapur (SG)
+ Großbritannien und Nordirland (GB)
+ Vereinigte Staaten (USA)

Alle anderen Länder befinden sich im Vorschaustatus. In den Vorschauländern wird die vollständige Adresse im `addressLineOne` Feld ohne landesspezifische Formatierung angezeigt. Zukünftige Versionen werden dieses Verhalten verbessern, und Sie können auf diese Verbesserungen zugreifen, indem Sie die neueste Version des SDK verwenden.

## Unterstützte AWS Regionen
<a name="address-form-supported-aws-regions"></a>

Das Address Form SDK und der Address Form Builder-Assistent sind in allen AWS-Regionen verfügbar, in denen Amazon Location Service tätig ist, und zwar in der `Current` Version von APIs Die vollständige Liste der unterstützten Regionen finden Sie unter [Unterstützte Regionen von Amazon Location](https://docs.aws.amazon.com/location/latest/developerguide/location-regions.html).

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

Weitere Informationen finden Sie in der [README-API-Referenz.](https://github.com/aws-geospatial/address-form-sdk-js#api-reference)