As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

# Formulário de endereço SDK
<a name="address-form-sdk"></a>

O SDK do Formulário de Endereço simplifica a criação de formulários inteligentes de entrada de endereços. Os formulários de endereço criados com o SDK fornecem sugestões de endereço relevantes à medida que os usuários começam a digitar. Quando um usuário seleciona uma sugestão, um formulário de endereço preenche automaticamente campos como cidade, estado e código postal. Isso reduz os erros e acelera a entrada de dados, minimizando a entrada manual. Os usuários também podem visualizar o endereço selecionado em um mapa e ajustar seu pino de localização para indicar entradas específicas ou locais de coleta, melhorando significativamente a precisão.

![Demonstração do SDK do formulário de endereço mostrando a funcionalidade de preenchimento automático](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/address-form-demo.gif)


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

### Demonstração
<a name="address-form-demo"></a>

Experimente a [demonstração do formulário de endereço](https://aws-geospatial.github.io/address-form-sdk-js/) totalmente funcional. 

### Construa você mesmo
<a name="address-form-builder"></a>

Comece [Conceitos básicos](#address-form-getting-started) a implementar formulários de endereço usando o SDK do Address Form ou experimente a abordagem sem código com o [assistente WYSIWYG Address Form Builder](https://console.aws.amazon.com/location/solution-builder/home#/address-form) do Location Service, desenvolvido por esse SDK e acessível no console do Amazon Location Service em. [https://console.aws.amazon.com/location/](https://console.aws.amazon.com/location/) Esse assistente interativo permite criar formulários personalizados com sugestões preditivas, preenchimento automático de campos e layouts flexíveis. Os desenvolvedores podem baixar ready-to-use pacotes em React JavaScript TypeScript, React ou standalone HTML/JavaScript para facilitar a integração sem escrever nenhum código.

## Recursos principais
<a name="address-form-features"></a>

Os principais recursos do SDK do formulário de endereço incluem:
+ Fornece sugestões de digitação antecipada integradas para endereços e POIs acelera a entrada de dados.
+ Permite a pesquisa configurável por tipo de local (por exemplo, códigos postais, localidades) para obter resultados mais precisos.
+ Oferece detecção automática da localização do navegador para centralizar rapidamente os usuários em sua área atual.
+ Exibe visualizações de mapas integradas para maior clareza e contexto.
+ Permite que as localizações dos endereços sejam ajustadas no mapa sem perder a localização fornecida pelo sistema, garantindo precisão e controle.
+ Inclui uma ferramenta de criação WYSIWYG que não requer codificação, economizando tempo e esforço.
+ Implementa depuração e armazenamento em cache para digitação antecipada para otimizar o desempenho e reduzir APIs custos.
+ Suporta personalização de estilo para combinar com a marca e a experiência do usuário do seu aplicativo.

Ele usa as seguintes operações de API do Amazon Location Service para fornecer informações de endereço aos formulários de endereço:

**[GetTile](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetTile.html)**  
Recupera blocos do mapa para renderizar o mapa interativo para visualizar a localização do endereço e ajustar a posição de um endereço.

**[Autocompletar](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Autocomplete.html)**  
Fornece sugestões de endereço em tempo real à medida que os usuários digitam.

**[Sugira](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Suggest.html)**  
Fornece sugestões de endereço e POI em tempo real à medida que os usuários digitam.

**[ReverseGeocode](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_ReverseGeocode.html)**  
Converte a localização atual de um usuário no endereço conhecido mais próximo se ele optar por preencher automaticamente o endereço com base na localização atual.

**[GetPlace](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_GetPlace.html)**  
Recupera informações detalhadas sobre o local dos endereços selecionados depois de selecionar um endereço nos resultados da API Autocomplete ou Suggest.

## Preços
<a name="address-form-pricing"></a>

O SDK é gratuito e de [código aberto](https://github.com/aws-geospatial/address-form-sdk-js) sob a licença Apache-2.0. Você paga apenas pelo uso da API. Consulte a [página de preços do Amazon Location Service](https://aws.amazon.com/location/pricing/).

## Conceitos básicos
<a name="address-form-getting-started"></a>

O SDK do Formulário de Endereço pode ser usado em um aplicativo React ou em uma página e JavaScript HTML autônomos. Comece seguindo as instruções abaixo.

### Pré-requisitos
<a name="address-form-prerequisites"></a>

**nota**  
O SDK do formulário de endereço exige uma chave de API com as permissões necessárias para funcionar corretamente. Crie uma chave de API com as seguintes permissões usando o [assistente Address Form SDK Builder](https://console.aws.amazon.com/location/solution-builder/home#/address-form) no console do Amazon Location Service ou siga as instruções abaixo para criá-la manualmente.

O uso do SDK do formulário de endereço exige que as seguintes ações sejam permitidas na política de chaves de API:
+ `geo-maps:GetTile`- Isso é necessário ao exibir o componente do mapa. Veja a referência [GetTile](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetTile.html)da API.
+ `geo-places:Autocomplete`- Isso é necessário ao usar a `Autocomplete` operação para a funcionalidade de digitação antecipada. Veja a referência da API de [preenchimento automático](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Autocomplete.html).
+ `geo-places:Suggest`- Isso é necessário ao usar a `Suggest` operação para a funcionalidade de digitação antecipada. Veja a referência da API [Suggest](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Suggest.html).
+ `geo-places:ReverseGeocode`- Isso é necessário ao permitir que os usuários forneçam sua localização atual usando a API de geolocalização dos navegadores. Veja a referência [ReverseGeocode](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_ReverseGeocode.html)da API.
+ `geo-places:GetPlace`- Isso é necessário ao usar a funcionalidade de digitação antecipada. Veja a referência [GetPlace](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_GetPlace.html)da API.

Siga o guia [Use API Keys to authenticate](https://docs.aws.amazon.com/location/latest/developerguide/using-apikeys.html) para criar uma chave de API do Amazon Location Service com as permissões necessárias.

Exemplo de política de chaves para a [CreateKey](https://docs.aws.amazon.com/location/latest/APIReference/API_geotags_CreateKey.html)API com as permissões necessárias:

#### CreateKey solicitação de permissões do Formulário de Endereço
<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"
    ]
  }
}
```

### Instalação
<a name="address-form-installation"></a>

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

Inclua o seguinte CSS e JavaScript para o SDK em seu código HTML

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

Instale o SDK do npm: `npm install @aws/address-form-sdk-js`

### Usar o SDK do
<a name="address-form-use-sdk"></a>

Adicione o código a seguir ao seu aplicativo React. Atualize `AMAZON_LOCATION_API_KEY` com sua chave de API e `AMAZON_LOCATION_REGION` com a região em que a chave de API foi criada. Quando o formulário é enviado, o `onSubmit` retorno de chamada fornece uma função `getData` assíncrona. Chame essa função com um `intendedUse` valor para recuperar os dados do formulário.

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

**nota**  
Use `"Storage"` se precisar armazenar ou armazenar em cache os resultados. Isso garante a conformidade com os [requisitos de uso pretendido](https://docs.aws.amazon.com/location/latest/developerguide/places-intended-use.html) do 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>
  );
}
```

------

## Países compatíveis
<a name="address-form-supported-countries"></a>

O SDK do Address Form suporta o preenchimento automático de endereços em todo o mundo usando o Amazon Location Service. Os seguintes países têm suporte total com a análise do campo de endereço, em que cada componente de endereço é preenchido em seu respectivo campo:
+ Austrália (AU)
+ Canadá (CA)
+ França (FR)
+ Hong Kong (HK)
+ Irlanda (IE)
+ Nova Zelândia (NZ)
+ Filipinas (PH)
+ Singapura (SG)
+ Reino Unido (GB)
+ Estados Unidos (EUA)

Todos os outros países estão no status Pré-visualização. Os países de visualização exibem o endereço completo no `addressLineOne` campo sem formatação específica do país. Versões futuras melhorarão esse comportamento e você poderá acessar essas melhorias usando a versão mais recente do SDK.

## Regiões da AWS compatíveis
<a name="address-form-supported-aws-regions"></a>

O Address Form SDK e o assistente Address Form Builder estão disponíveis em todas as regiões da AWS nas quais o Amazon Location Service opera, usando sua `Current` APIs versão. Veja a lista completa de regiões suportadas nas [regiões suportadas pela Amazon Location](https://docs.aws.amazon.com/location/latest/developerguide/location-regions.html).

## Referência da API
<a name="address-form-api-reference"></a>

Consulte a referência da [API README](https://github.com/aws-geospatial/address-form-sdk-js#api-reference).