autocompleter-caba - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/src/api/urls.d.ts

@@ -1,5 +0,5 @@
-export declare const address_suggestions_url = "https://api-serviciosgeo-dev.gcba.gob.ar//calles/nombre";
-export declare const address_search_url = "https://api-serviciosgeo-dev.gcba.gob.ar//direcciones/geocoder";
-export declare const transform_coordinates_url = "https://api-serviciosgeo-dev.gcba.gob.ar//coordenadas/transformar";
-export declare const place_suggestions_url = "https://api-serviciosgeo-dev.gcba.gob.ar//lugares/sugerencias";
-export declare const place_search_url = "https://api-serviciosgeo-dev.gcba.gob.ar//lugares/busqueda";
+export declare const address_suggestions_url = "http://127.0.0.1:8000/calles/nombre";
+export declare const address_search_url = "http://127.0.0.1:8000/direcciones/geocoder";
+export declare const transform_coordinates_url = "http://127.0.0.1:8000/coordenadas/transformar";
+export declare const place_suggestions_url = "http://127.0.0.1:8000/lugares/sugerencias";
+export declare const place_search_url = "http://127.0.0.1:8000/lugares/busqueda";

dist/src/api/urls.js

@@ -1,6 +0,8 @@
-const GCBADEV = "https://api-serviciosgeo-dev.gcba.gob.ar/";
-export const address_suggestions_url = `${GCBADEV}/calles/nombre`;
-export const address_search_url = `${GCBADEV}/direcciones/geocoder`;
-export const transform_coordinates_url = `${GCBADEV}/coordenadas/transformar`;
-export const place_suggestions_url = `${GCBADEV}/lugares/sugerencias`;
-export const place_search_url = `${GCBADEV}/lugares/busqueda`;
+// const API = "https://api-serviciosgeo-dev.gcba.gob.ar/";
+const API = "http://127.0.0.1:8000";
+// GCBA - DEV
+export const address_suggestions_url = `${API}/calles/nombre`;
+export const address_search_url = `${API}/direcciones/geocoder`;
+export const transform_coordinates_url = `${API}/coordenadas/transformar`;
+export const place_suggestions_url = `${API}/lugares/sugerencias`;
+export const place_search_url = `${API}/lugares/busqueda`;

dist/src/index.js

 export { Autocompleter } from './services/Autocompleter.js';
+// import { Autocompleter } from './services/Autocompleter.js';
+// const autocompleter = new Autocompleter();
+// let i=0;
+// let calle = prompt("Ingrese la calle:")
+// if (calle){
+//     autocompleter.setCredentials("97855b0c","e926c45155e52bddcfc598210c28bf41")
+//     autocompleter.getSuggestions(calle,"address").then(data=>
+//         console.log(data)
+//         );
+//     }

dist/src/services/AddressSuggester.js

@@ -77,2 +77,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
         return __awaiter(this, void 0, void 0, function* () {
+            console.log(this.getCredentials());
             const response = yield fetch(`${address_suggestions_url}?calle=${street}`, this.getCredentials());
@@ -93,3 +94,5 @@ return yield response.json();
             if (typeof street.intersecciones !== "undefined") {
-                return (street.intersecciones.map((intersection) => ({ direccion: `${street.nombre_calle} Y ${intersection.nombre_oficial}` })));
+                return (street.intersecciones.map((intersection) => ({ direccion: `${street.nombre_calle} Y ${intersection.nombre_oficial}` })
+                // return `${street.nombre_calle} Y ${intersection.nombre_oficial}`;
+                ));
             }
@@ -120,2 +123,3 @@ // Alturas válidas para calle ingresada
                 return { direccion: `${street.nombre_calle} ${street.altura}` };
+                // return `${street.nombre_calle} ${street.altura}`;
             }
@@ -125,2 +129,3 @@ // Calle sin altura
             return { direccion: `${street.nombre_calle}` };
+            // return street.nombre_calle;
         });
@@ -127,0 +132,0 @@ return results;

dist/src/services/Autocompleter.js

@@ -21,4 +21,4 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
         this.suggesters = {
-            AddressSuggester: new AddressSuggester(),
-            PlaceSuggester: new PlaceSuggester(),
+            AddressSuggester: new AddressSuggester(), // Crea una instancia de AddressSuggester
+            PlaceSuggester: new PlaceSuggester(), // Crea una instancia de PlaceSuggester
         };
@@ -88,3 +88,3 @@ this.AuxSuggesterTypes = this.investTypesSuggesters(SuggesterTypes);
             default:
-                return null;
+                return null; // Si type no coincide con ninguna opción del enum
         }
@@ -91,0 +91,0 @@ }

dist/src/services/Suggester.js

@@ -41,2 +41,3 @@ class Suggester {
     }
+    // abstract setConfigurations(minTextLength: number, waitingTime: number, maxSuggestions: number):void;
     setConfigurations(minTextLength, waitingTime, maxSuggestions) {
@@ -43,0 +44,0 @@ this.setMinTextLength(minTextLength);

package.json

 {
   "name": "autocompleter-caba",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
@@ -5,0 +5,0 @@ "description": "Un paquete para que permite obtener información sobre direcciones y sitios de interés de la Ciudad de Buenos Aires.",

README.md

@@ -15,9 +15,9 @@ # Documentación del Paquete Autocompleter
 
-Primero, importar el paquete:
+Importar el paquete:
 
 ```javascript
-import { Autocompleter } from "autocompleter";
+import { Autocompleter } from 'autocompleter-caba/dist/src/index';
 ```
 
-Luego, crear una instancia de Autocompleter:
+Crear una instancia de Autocompleter:
 
@@ -30,3 +30,3 @@ ```javascript
 
-Antes de utilizar las funciones de búsqueda, asegurarse de establecer las credenciales del cliente utilizando el método setCredentials(clientId, clientSecret):
+Establecer las credenciales del cliente utilizando el método setCredentials(clientId, clientSecret):
 
@@ -39,3 +39,3 @@ ```javascript
 
-Se puede habilitar o desactivar los suggesters según necesidades utilizando los métodos enableSuggester(suggester) y disableSuggester(suggester):
+Se puede habilitar o desactivar los _suggesters_ según necesidades utilizando los métodos enableSuggester(suggester) y disableSuggester(suggester):
 
@@ -49,3 +49,3 @@ ```javascript
 
-Para obtener sugerencias de los suggesters seleccionados según la entrada de texto del usuario, utilizar el método getSuggestions(input) (Ver en la sección Métodos los parámetros opcionales):
+Para obtener sugerencias basadas en la entrada del usuario, utilizar el método getSuggestions(input):
 
@@ -58,6 +58,6 @@ ```javascript
 
-Para buscar direcciones, utilizar el método getSearchAddress(address):
+Para buscar direcciones, utilizar el método getSearch(address):
 
 ```javascript
-const searchResult = await autocompleter.getSearchAddress("Callao 520");
+const searchResult = await autocompleter.getSearch("Callao 520");
 ```
@@ -73,10 +73,2 @@
 
-## Buscar Información 
-
-Para buscar información sobre los Suggesters habilitados, utilizar el método getSearch(string_de_busqueda):
-
-```javascript
-const searchResult = await autocompleter.getSearch("Callao 520");
-```
-
 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.
@@ -98,3 +90,3 @@
 
-- getSuggesters(): Devuelve un objeto que contiene todos los suggesters disponibles en la aplicación.
+- getSuggesters(): Devuelve un objeto que contiene todos los _suggesters_ disponibles en la aplicación.
 
@@ -109,6 +101,229 @@ - getSuggestions(input: string, typeSuggester: string): Busca sugerencias basadas en la entrada de texto proporcionada. TypeSuggester pueder ser "address" o "place", por dafault es "all".
 
+
+## Ejemplos:
+
+### Autocompleter en Angular
+
+#### Creación del Proyecto
+Utilizar Angular CLI para crear un nuevo proyecto. Abrir una consola de comando y ejecutar:
+
+```bash
+ng new autocompleter-app
+```
+
+Seguir las instrucciones para configurar el proyecto. Una vez creado, navegar hacia la raiz del proyecto:
+```bash
+cd autocompleter-app
+```
+
+#### Instalación del Paquete
+Instalar el autocompleter-caba:
+
+```bash
+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.)
+
+```ts
+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:
+```html
+<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:
+
+```bash
+npm create vite@latest autocompleter-app
+```
+
+Seguir las instrucciones para configurar el proyecto. Una vez creado, navegar hacia la raiz del proyecto:
+```bash
+cd autocompleter-app
+```
+
+#### Instalación del Paquete
+Instalar el autocompleter-caba:
+
+```bash
+npm install autocompleter-caba
+```
+
+#### Configuración de Componentes
+* Crear un archivo App.jsx y configurar el componente App para utilizar el autocompleter.
+```jsx
+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.
+```jsx
+const autocompleter = new Autocompleter();
+```
+* Establecer las credenciales para el uso del Autocompleter.
+```jsx
+  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.
+```jsx
+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.
+```jsx
+ 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.
+- 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.
+

No alert changes

Improved metrics

Total package byte prevSize

48314

increased by15.07%

Lines of code

980

increased by1.87%

Number of lines in readme file

322

increased by200.93%

No dependency changes