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.

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

Ejemplos:

Autocompleter en Angular

Creación del Proyecto

Utilizar Angular CLI para crear un nuevo proyecto. Abrir una consola de comando y ejecutar:

ng new autocompleter-app

Seguir las instrucciones para configurar el proyecto. Una vez creado, navegar hacia la raiz del proyecto:

cd autocompleter-app

Instalación del Paquete

Instalar el autocompleter-caba:

npm install autocompleter-caba

Configuración de Componentes

En el archivo .ts (por ejemplo src/app/app.component.ts):

• Incializar e instanciar la clase Autocompleter en el constructor del componente AppComponent.
• Esteblecer las credenciales para el uso del Autocompleter.
• Crear y definir las funciones que utilizarán los métodos de la clase Autocompleter (ejemplo: getSuggestions y getSearch.)

export class AppComponent {
  title = 'autocompleter-app';
  calle: string = '';
  suggestions: any[] = [];
  search: any = null;
  autocompleter: Autocompleter;
  typingTimeout: any;

  constructor() {
    this.autocompleter = new Autocompleter();
    this.autocompleter.setCredentials('client_id', 'client_secret_id');
  }

  onInputChange() {

    clearTimeout(this.typingTimeout);

    this.typingTimeout = setTimeout(() => {
      this.getSuggestions();
    }, 1000);
  }

  getSuggestions() {
    if (this.calle) {
      this.autocompleter.getSuggestions(this.calle, 'address').then((data: any) => {
        this.search = null;
        this.suggestions = data;
        console.log(data);
      }).catch((error: any) => {
        console.error('Error obteniendo sugerencias:', error);
      });
    }
    if (this.calle == ""){
      this.suggestions = [];
    }
  }

  getSearch() {
    if (this.calle) {
      this.autocompleter.getSearch(this.calle).then((data: any) => {
        this.search = data.data;
        this.suggestions = [];
      }).catch((error: any) => {
        console.error('Error obteniendo dirección:', error);
      });
    }
    if (this.calle == ""){
      this.suggestions = [];
    }
  }
}

En un template crear la estructura necesaria para observar los resultados de la clase Autocompleter. Por ejemplo, en src/app/app.component.html agregar la siguiente estructura:

<div style="text-align:center">
  <h1> {{ title }} </h1>
  <input
    id="calle"
    [(ngModel)]="calle"
    (input)="onInputChange()"
    placeholder="Ingrese la calle"
  />

  <button (click)="getSearch()">Buscar</button>

  <ul *ngIf="suggestions.length > 0" style="list-style: none;">
    <li *ngFor="let suggestion of suggestions">{{ suggestion.value }}</li>
  </ul>
  <div *ngIf="search != null">{{search.direccion}}</div>
  <div id="mapa"></div>
</div>

Autocompleter en ReactJs

Creación del Proyecto

Crear un proyecto con CRA o Vite. Abrir una consola de comando y ejecutar:

npm create vite@latest autocompleter-app

Seguir las instrucciones para configurar el proyecto. Una vez creado, navegar hacia la raiz del proyecto:

cd autocompleter-app

Instalación del Paquete

Instalar el autocompleter-caba:

npm install autocompleter-caba

Configuración de Componentes

• Crear un archivo App.jsx y configurar el componente App para utilizar el autocompleter.

function App() {
  const [calle, setCalle] = useState('');
  const [suggestions, setSuggestions] = useState([]);
  const [search, setSearch] = useState(null);
  const [typingTimeout, setTypingTimeout] = useState(null);
  const autocompleter = new Autocompleter();
  
  // ...
}

• Inicializar e instanciar la clase Autocompleter en el componente App.

const autocompleter = new Autocompleter();

• Establecer las credenciales para el uso del Autocompleter.

  useEffect(() => {
    autocompleter.setCredentials('client_id', 'client_secret_id');
  }, []);

• Crear y definir las funciones que utilizarán los métodos de la clase Autocompleter (ejemplo: getSuggestions y getSearch) dentro del componente App.

const handleInputChange = (e) => {
    setCalle(e.target.value);
    clearTimeout(typingTimeout);

    setTypingTimeout(
      setTimeout(() => {
        getSuggestions();
      }, 1000)
    );
  };

  const getSuggestions = () => {
    if (calle) {
      autocompleter
        .getSuggestions(calle, 'address')
        .then((data) => {
          setSearch(null);
          setSuggestions(data);
          console.log(data);
        })
        .catch((error) => {
          console.error('Error obteniendo sugerencias:', error);
        });
    }
    if (calle === '') {
      setSuggestions([]);
    }
  };

  const getSearch = () => {
    if (calle) {
      autocompleter
        .getSearch(calle)
        .then((data) => {
          setSearch(data.data);
          setSuggestions([]);
        })
        .catch((error) => {
          console.error('Error obteniendo dirección:', error);
        });
    }
    if (calle === '') {
      setSuggestions([]);
    }
  };

• Estructura de la Interfaz: En el return del componente se debe crear la estructura necesaria para mostrar los resultados del autocompleter.

 return (
    <div style={{ textAlign: 'center' }}>
      <h1>Autocompleter App</h1>
      <input
        id="calle"
        value={calle}
        onChange={handleInputChange}
        placeholder="Ingrese la calle"
      />
      <button onClick={getSearch}>Buscar</button>

      <ul style={{ listStyle: 'none', padding: 0 }}>
        {suggestions.map((suggestion, index) => (
          <li key={index}>{suggestion.value}</li>
        ))}
      </ul>

      {search && <div>{search.direccion}</div>}
    </div>
  );
}

Notas

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