8,083 lecturas

Cómo agregar autocompletado de direcciones y verificación usando la biblioteca de componentes Vue de Lob

por Lob8m2022/07/07

Demasiado Largo; Para Leer

Solución para que los desarrolladores de Vue limpien las direcciones nacionales e internacionales con Vue Address Autocompletar. Crearemos una aplicación Vue que demuestre tanto un campo de dirección de una sola línea como un formulario de dirección.

Companies Mentioned

featured image - Cómo agregar autocompletado de direcciones y verificación usando la biblioteca de componentes Vue de Lob

Recibimos muchas miradas en nuestro artículo del otoño pasado sobre el autocompletado y la verificación de direcciones con React. Dado que Lob migró recientemente algunos de nuestros proyectos front-end de Angular a Vue, queríamos presentar una solución similar para que los desarrolladores de Vue limpien las direcciones nacionales e internacionales con Autocompletar dirección Vue de Lob componente. Crearemos una aplicación Vue que demuestre tanto un campo de dirección de una sola línea como un formulario de dirección.

¡Empecemos!

Empezando

usaremos Vite para configurar rápidamente una aplicación Vue e instalar @lob/vue-address-autocomplete:

 npm create vite@latest # Follow the prompts given by vite cd my-demo-app npm install @lob/vue-address-autocomplete npm run dev

Después de esa última visita de mando http://localhost:3000/ para ver su aplicación de demostración en acción.

Necesitaremos una clave de API de Lob para poder utilizar la función de autocompletado de direcciones de Vue. Crea una cuenta en lob.com (es gratis) luego sigue estas instrucciones para obtener su clave API. Para nuestra aplicación de demostración, recomiendo usar su clave pública de prueba para evitar cargos a su cuenta y prevenir cualquier actividad maliciosa. (Estas claves comienzan con test_pub_xxxxxxxx)

NOTA: La verificación de direcciones está deshabilitada para las claves API de prueba. Cuando estemos listos para verificar una dirección, cambiaremos a nuestra clave pública en vivo .

Agregar Autocompletar

Reemplace el contenido del archivo App.vue generado por vite con el siguiente código:

 <script setup> import AddressAutocomplete from '@lob/vue-address-autocomplete' import '@lob/vue-address-autocomplete/dist/styles.css' </script> <template> <main> <AddressAutocomplete apiKey="YOUR_API_KEY_HERE" /> </main> </template>

Además de importar AddressAutocomplete, también debe importar la hoja de estilo que utiliza (línea 3). Esto podría hacerse en su archivo de componente raíz o solo en el archivo usando AddressAutocomplete.

¡Voila! Nuestra aplicación ahora sugiere direcciones a medida que se ingresa la entrada.

…Pero ¿y si queremos autocompletar direcciones internacionales?

Autocompletar internacional

El autocompletado y la verificación internacionales funcionan igual que la versión de EE. UU. con la adición de un par de accesorios: es internacional y país. Así es como se ve (solo se usan un par de países por simplicidad):

 <script setup> import AddressAutocomplete from '@lob/vue-address-autocomplete' import '@lob/vue-address-autocomplete/dist/styles.css' </script> <template> <main> <label for="country" style="margin-right: 1em">Country</label> <select name="country" id="country" v-model="countryCode" style="margin-bottom: 1em"> <option value="MX">Mexico</option> <option value="CA">Canada</option> <option value="FR">France</option> <option value="CN">China</option> </select> <AddressAutocomplete apiKey="YOUR_API_KEY_HERE" isInternational=true :country="countryCode" /> </main> </template> <script> export default { data() { return { countryCode: "" } } } </script>

Aunque las localidades pueden variar según el país (por ejemplo, estados, provincias, distritos, etc.), los objetos de sugerencia de dirección para direcciones internacionales usan las mismas claves que los EE. UU. con la adición del país. Por ejemplo, Alberta es una provincia de Canadá; sin embargo, Lob responderá con el estado: AB en las direcciones sugeridas. De esta manera, su código no tiene que cambiar al cambiar entre casos de uso nacionales e internacionales. Un par de otras cosas que vale la pena señalar sobre el autocompletado internacional:

El autocompletado internacional no funcionará para las direcciones de los EE. UU. o los territorios de los EE. UU. Por favor, vuelva a establecer de forma predeterminada isInternational = false al autocompletar y verificar las direcciones nacionales.
countryCode debe ser un código de nombre corto de país de 2 letras ( ISO 3166 ).
Vue Address Autocompletar llamará a la API de Verificación de direcciones (AV) de Lob cuando la entrada tenga tres o más caracteres.

Volvamos a nuestro código de autocompletado inicial de EE. UU. para el resto de esta guía.

Verificación de dirección

La API de verificación de dirección (AV) de Lob comprueba la validez y la capacidad de entrega de una dirección postal física en los EE. UU. o internacionalmente. También estandariza direcciones, corrige errores tipográficos y proporciona análisis sobre la dirección que se verifica (p. ej., coordenadas, tipo de edificio, tipo de ruta de entrega, etc.). Al igual que con nuestro autocompletado de direcciones de reacción, nuestra biblioteca de componentes Vue incluye la misma función de verificación.

 <script setup> import AddressAutocomplete, { verify } from '@lob/vue-address-autocomplete' import '@lob/vue-address-autocomplete/dist/styles.css' </script> <template> <main> <AddressAutocomplete :apiKey="lobApiKey" @onInput="handleInput" @onSelect="handleSelect" /> <button @click="handleSubmit">Verify</button> <p> {{verificationResult}} </p> </main> </template> <script> export default { data() { return { address: '', lobApiKey: 'YOUR_LOB_API_KEY', verificationResult: null } }, methods: { handleInput(userInput) { this.address = userInput }, handleSelect(selectedAddress) { this.address = selectedAddress.value }, handleSubmit() { verify(this.lobApiKey, this.address) .then((result) => { // Simplify response into something readable to the user const summary = `This address is ${result.deliverability}` this.verificationResult = summary }) .catch((errorData) => this.verificationResult = errorData.message) } } } </script> <style scoped> button { margin-top: 1em; } </style>

Agregamos la verificación de direcciones a nuestra aplicación haciendo dos cosas: 1) rastreando la selección de autocompletado más reciente y 2) usando verificar para llamar a la API AV de Lob y mostrar los resultados. En este ejemplo, la dirección puede ser un objeto de dirección sugerido o la cadena de entrada del usuario. verificar acepta ambas opciones lo cual es útil en caso de que un usuario verifique su dirección sin seleccionar una de las sugerencias de Lob. La verificación de dirección internacional utiliza la función verificar internacional que requiere un código de país de parámetro adicional. Este es el mismo código de país de 2 letras que se pasa al componente AddressAutocomplete para internacional.

Visualización de un formulario de dirección

Por el momento, no hay un componente AddressForm como el que hay en nuestro React Address Autocompletar, sin embargo, construir uno es fácil. Ampliemos nuestra aplicación para incluir múltiples campos para cada componente de dirección:

 <script setup> import AddressAutocomplete, { verify } from '@lob/vue-address-autocomplete' import '@lob/vue-address-autocomplete/dist/styles.css' </script> <template> <main> <div class="field"> <label for='primary_line'>Address</label> <AddressAutocomplete :apiKey="lobApiKey" primaryLineOnly=true @onInput="handleInput" @onSelect="handleSelect" class="address-autocomplete" /> </div> <div class="field"> <label for='secondary_line'>Apt, Suite</label> <input id='secondary_line' v-model="address.secondary_line" /> </div> <div class="field"> <label for='city'>City</label> <input id='city' v-model="address.city" /> </div> <div class="field"> <label for='state'>State</label> <input id='state' v-model="address.state" /> </div> <div class="field"> <label for='zip_code'>Zip</label> <input id='zip_code' v-model="address.zip_code" /> </div> <button @click="handleSubmit">Verify</button> <p> {{verificationResult}} </p> </main> </template> <script> export default { data() { return { address: { primary_line: '', secondary_line: '', city: '', state: '', zip_code: '', }, lobApiKey: 'YOUR_API_KEY_HERE', verificationResult: null } }, methods: { handleInput(userInput) { this.address.primary_line = userInput }, handleSelect(selectedAddress) { this.address = selectedAddress.value }, handleSubmit() { verify(this.lobApiKey, this.address) .then((result) => { // Simplify response into something readable to the user const summary = `This primary_line is ${result.deliverability}` this.verificationResult = summary }) .catch((errorData) => this.verificationResult = errorData.message) } } } </script> <style scoped> .address-autocomplete { width: 100% } button { margin-top: 1em; align-self: flex-end; } .field { display: flex; flex-direction: row; justify-content: flex-end; margin: 0.5em 0em; } .field label { margin-right: 1em; } .field input { flex-grow: 1; } </style>

`dirección` se convierte en un objeto para cada componente de dirección que luego se vincula a nuestros nuevos campos de dirección. También hay una nueva propiedad que se pasa a AddressAutocomplete llamada `primaryLineOnly`, cuando se establece en verdadero, el valor de entrada solo se actualizará a la dirección sugerida de la línea principal en lugar de una dirección completa de una sola línea. A partir de ahí, el resto de nuestro código funciona igual.

Dar estilo a la direcciónAutocompletar

Simplemente anule las clases utilizadas por AddressAutocomplete y/o las variables CSS que utiliza para una apariencia personalizada. Aquí hay una lista de lo que se puede personalizar:

 Style Variables --lob-header-text-color --lob-input-background-color --lob-input-text-color --lob-label-text-color --lob-suggestion-item-active-background-color --lob-suggestion-item-background-color --lob-suggestion-item-text-color Classes lob-header lob-label lob-typeahead-root lob-typeahead-input lob-typeahead-input:focus-visible lob-typeahead-input::placeholder lob-typeahead-input-with-label lob-typeahead-label lob-typeahead-list lob-typeahead-list-item lob-typeahead-list-item-active

Resumen

El autocompletado de direcciones y la verificación de direcciones se han convertido en un estándar en muchos sitios web en línea. Los fanáticos de Vue pueden agregar esta funcionalidad a su aplicación web fácilmente y sin perder el control de la apariencia o la funcionalidad. El producto Verificación de dirección de Plus Lob proporciona datos de entrega adicionales para mejorar la experiencia del usuario de su aplicación, como coordenadas, condado e información de entrega. Si desea trabajar con la API de verificación de direcciones de Lob, consulte directamente la Documentación de la API aquí .