Documentación del Paquete Autocompleter

Este paquete proporciona funcionalidades para obtener sugerencias e información para direcciones y sitios de interés de la Ciudad de Buenos Aires.

Instalación

Para instalar el paquete, utilizar npm:

npm install autocompleter-caba

Uso

Importar el paquete:

import { Autocompleter } from "autocompleter-caba/dist/src/index";

Crear una instancia de Autocompleter:

const autocompleter = new Autocompleter();

Configuración de Credenciales

Establecer las credenciales del cliente utilizando el método setCredentials(clientId, clientSecret):

autocompleter.setCredentials("tu_client_id", "tu_client_secret");

Habilitar/Desactivar Suggesters

Se puede habilitar o desactivar los suggesters según necesidades utilizando los métodos enableSuggester(suggester) y disableSuggester(suggester):

autocompleter.enableSuggester("AddressSuggester");
autocompleter.disableSuggester("PlaceSuggester");

Obtener Sugerencias

Para obtener sugerencias basadas en la entrada del usuario, utilizar el método getSuggestions(input):

const suggestions = await autocompleter.getSuggestions("Callao 520");

Buscar Direcciones

Para buscar direcciones, utilizar el método getSearch(address):

const searchResult = await autocompleter.getSearch("Callao 520");

Buscar Lugares de Interés

Para buscar sitios de interés, utilizar el método getSearchPlaces(place):

const searchResult = await autocompleter.getSearchPlaces("hospital");

Las siguientes funciones permiten a los usuarios interactuar con la aplicación Autocompleter de diversas maneras, desde configurar sus credenciales hasta obtener sugerencias y resultados de búsqueda específicos.

Métodos

• getClientId(): Devuelve el atributo clientId.

• getClientSecret(): Devuelve el atributo clientSecret.

• getConfigurations(): Obtener las configuraciones de mínima cantidad de caracteres para iniciar la acción, tiempo de espera de búsqueda y cantidad de sugerencias

• setConfigurations(minTextLength, waitingTime, maxSuggestions): Establecer las configuraciones de mínima cantidad de caracteres para iniciar la acción, tiempo de espera de búsqueda y cantidad de sugerencias.

• setCredentials(clientId: string, clientSecret: string): Permite establecer las credenciales del cliente proporcionando los atributos clientId y clientSecret.

• findSuggester(suggesterType: SuggestersOptions): Busca y devuelve el suggester correspondiente según el tipo especificado.

• enableSuggester(suggester: SuggestersOptions): Permite habilitar un suggester específico.

• disableSuggester(suggester: SuggestersOptions): Desactiva un suggester específico.

• getSuggesters(): Devuelve un objeto que contiene todos los suggesters disponibles en la aplicación.

• getSuggestions(input: string, typeSuggester: string): Busca sugerencias basadas en la entrada de texto proporcionada. TypeSuggester pueder ser "address" o "place", por dafault es "all".

• getSearch(input: string): Busca información sobre la dirección o sitio de interés ingresado.

• getSearchPlaces(place: string): Busca información del sitios de interés ingresado.

• getSearchAddress(address: string): Busca información de la dirección ingresada.

• setApiBaseUrl(baseUrl: string): Permite establecer la url base. Por defecto, "https://datosabiertos-callejeros-apis.buenosaires.gob.ar"

• setGeocodingMethod(method: string) Define el método de geocodificación a utilizar. Los valores posibles son:

  • "geocodificacion_directa"
  • "interpolacion_entre_puertas"
  • "interseccion_calles"
  • "interpolacion_eje"
  • "direccion_atipica"

• setEnableGeocodingMethodFilter(enabled: boolean)
  Activa o desactiva el filtro del método de geocodificación.

  • Si true, el método seleccionado mediante setGeocodingMethod será utilizado.
  • Si false, el filtro se desactiva y el sistema utilizará el método predeterminado: "geocodificacion_directa".

Ejemplos

React

import { Autocompleter } from "autocompleter-caba";
import { useEffect, useState } from "react";

function App() {
  const [input, setInput] = useState("");
  const autocompleter = new Autocompleter();

  useEffect(() => {
    autocompleter.setCredentials("client_id", "client_secret");
  }, []);

  const handleSearch = async () => {
    const results = await autocompleter.getSearch(input);
    console.log(results);
  };

  return (
    <div>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={handleSearch}>Buscar</button>
    </div>
  );
}

Angular

import { Component } from "@angular/core";
import { Autocompleter } from "autocompleter-caba";

@Component({
  selector: "app-root",
  template: `
    <input [(ngModel)]="input" (keyup.enter)="handleSearch()" />
    <button (click)="handleSearch()">Buscar</button>
  `,
})
export class AppComponent {
  input = "";
  autocompleter = new Autocompleter();

  constructor() {
    this.autocompleter.setCredentials("client_id", "client_secret");
  }

  async handleSearch() {
    const results = await this.autocompleter.getSearch(this.input);
    console.log(results);
  }
}

HTML/JS (sin Bundler)

<!DOCTYPE html>
<html>
  <body>
    <input id="addressInput" placeholder="Ingrese una dirección" />
    <button onclick="search()">Buscar</button>
    <script src="https://unpkg.com/autocompleter-caba@latest/dist/umd/autocompleter.umd.js"></script>
    <script>
      const autocompleter = new Autocompleter();
      autocompleter.setCredentials("client_id", "client_secret");

      function search() {
        const input = document.getElementById("addressInput").value;
        autocompleter.getSearch(input).then(console.log);
      }
    </script>
  </body>
</html>

Notas

• React/Angular: Asegúrate de instalar las dependencias peer (react, @angular/core) en tu proyecto.
• Polyfills: Si necesitas soporte para navegadores antiguos, agrega polyfills para fetch y promesas.
• CDN: Usa la última versión estable desde unpkg:

  <script src="https://unpkg.com/autocompleter-caba@latest/dist/umd/autocompleter.umd.js"></script>

Configuración Inicial

Para todos los entornos

const autocompleter = new Autocompleter();
autocompleter.setCredentials("tu_client_id", "tu_client_secret");

Métodos de Geocodificación (opcional)

// Configurar métodos (solo para APIs que los soporten)
autocompleter.setGeocodingMethod("geocodificacion_directa");
autocompleter.setEnableGeocodingMethodFilter(true);

Nota:

• Si usas una API sin soporte para métodos de geocodificación, desactiva el filtro:

  autocompleter.setEnableGeocodingMethodFilter(false);

  this.autocompleter = new Autocompleter();

  }

  ngOnInit() { this.autocompleter.setCredentials("CLIENT_ID", "CLIENT_SECRET"); // Opcional: Cambiar URL base // this.autocompleter.setApiBaseUrl("http://localhost:8000/"); // Opcional: Establecer métodos de geocodificación permitidos this.autocompleter.setGeocodingMethods(["geocodificacion_directa"]); console.log( "Métodos geocodificación permitidos:", this.autocompleter.getGeocodingMethods() ); }

  async getSuggestions() { console.log(Buscando sugerencias para: ${this.input}); const suggestions = await this.autocompleter.getSuggestions(this.input); console.log("Sugerencias:", suggestions); }

  async searchAddress() { console.log(Buscando dirección: ${this.input}); const result = await this.autocompleter.getSearchAddress(this.input); console.log("Resultado Búsqueda Dirección:", result); }

  async searchPlace() { console.log(Buscando lugar: ${this.input}); const result = await this.autocompleter.getSearchPlaces(this.input); console.log("Resultado Búsqueda Lugar:", result); } }

### HTML/JS (sin Bundler)

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Autocompleter CABA Demo</title>
  </head>
  <body>
    <h1>Autocompleter CABA Demo</h1>
    <input
      id="inputField"
      placeholder="Ingrese dirección o lugar"
      value="Callao 520"
    />
    <button onclick="getSuggestions()">Obtener Sugerencias</button>
    <button onclick="searchAddress()">Buscar Dirección</button>
    <button onclick="searchPlace()">Buscar Lugar</button>
    <p>Revisa la consola del navegador para ver los resultados.</p>

    <!-- Cargar la librería desde unpkg -->
    <script src="<https://unpkg.com/autocompleter-caba@latest/dist/umd/autocompleter.umd.js>"></script>
    <script>
      const inputField = document.getElementById("inputField");

      // Asume que Autocompleter está en el scope global
      const autocompleter = new Autocompleter();

      // Configuración inicial
      autocompleter.setCredentials("CLIENT_ID", "CLIENT_SECRET");
      // Opcional: Cambiar URL base
      // autocompleter.setApiBaseUrl("<http://localhost:8000/>");
      // Opcional: Establecer métodos de geocodificación permitidos
      autocompleter.setGeocodingMethods(["geocodificacion_directa"]);
      console.log(
        "Métodos geocodificación permitidos:",
        autocompleter.getGeocodingMethods()
      );

      async function getSuggestions() {
        const value = inputField.value;
        console.log(`Buscando sugerencias para: ${value}`);
        const suggestions = await autocompleter.getSuggestions(value);
        console.log("Sugerencias:", suggestions);
      }

      async function searchAddress() {
        const value = inputField.value;
        console.log(`Buscando dirección: ${value}`);
        const result = await autocompleter.getSearchAddress(value);
        console.log("Resultado Búsqueda Dirección:", result);
      }

      async function searchPlace() {
        const value = inputField.value;
        console.log(`Buscando lugar: ${value}`);
        const result = await autocompleter.getSearchPlaces(value);
        console.log("Resultado Búsqueda Lugar:", result);
      }
    </script>
  </body>
</html>

Notas Adicionales

• Asegurarse de establecer las credenciales del cliente antes de realizar cualquier búsqueda.
• Los suggesters deben estar habilitados antes de utilizar las funciones de búsqueda correspondientes.
• El paquete tiene restricciones en cuanto a la longitud mínima de texto y el número máximo de sugerencias.
• Filtrado por Método: setGeocodingMethods solo tiene efecto si la API conectada soporta este filtrado y devuelve el campo metodo_geocodificacion.