El punto de partida
Cuando DIURBANO llegó a nosotros, su operación inmobiliaria estaba bien organizada: todo el inventario de propiedades vivía en Tokko, el CRM inmobiliario más usado en Argentina. El problema era que su sitio web no reflejaba eso — los listings se actualizaban manualmente, con retraso, y sin la experiencia de búsqueda que sus potenciales compradores y locatarios esperaban.
La solución evidente era integrar Tokko directamente. El widget embebible que ofrece Tokko era la opción rápida, pero tenía tres problemas que el cliente no estaba dispuesto a aceptar: diseño no customizable, sin mapa propio y sin filtros avanzados. Decidimos construir la integración desde cero usando la API de Tokko.
Qué es Tokko y cómo expone sus datos
Tokko es el CRM inmobiliario dominante en el mercado argentino. Permite gestionar propiedades, contactos, publicaciones en portales (ZonaProp, Argenprop, MercadoLibre) y toda la operación de una inmobiliaria desde una sola plataforma.
Para los desarrolladores, Tokko expone una REST API con autenticación por API key. Los endpoints principales que usamos en DIURBANO son:
-
/api/v1/properties/— listado paginado con soporte para filtros (operación, tipo, barrio, precio mín/máx, dormitorios) -
/api/v1/properties/{id}/— detalle completo de una propiedad (descripción, imágenes, equipamiento, coordenadas) -
Parámetros de filtro:
operation_types,property_types,locations,price_from,price_to,rooms
La integración en PHP
La autenticación es simple: un header Authorization: Bearer {api_key}
en cada request. La API key se almacena en el .env del proyecto,
nunca en el código fuente.
Cada búsqueda del usuario se traduce en una llamada a la API con los parámetros correspondientes. El resultado se normaliza en un array PHP consistente — porque la API de Tokko devuelve algunos campos con formatos que cambian según el tipo de propiedad — y se pasa a la capa de presentación.
Un detalle importante: implementamos caché de respuestas en servidor. Las respuestas de la API se almacenan en archivos temporales por 15 minutos. Esto cumple dos funciones: reduce la latencia percibida por el usuario y evita superar los límites de rate de la API de Tokko en momentos de tráfico alto.
El motor de búsqueda
El formulario de búsqueda tiene cinco filtros:
- Operación: venta / alquiler / alquiler temporario
- Tipo de propiedad: departamento, casa, local, oficina, etc.
- Barrio / ubicación: select poblado dinámicamente desde Tokko
- Precio mín/máx: con detección automática de moneda (ARS/USD)
- Dormitorios: 1, 2, 3, 4+
Los parámetros del formulario se mapean directamente a la query string de la API. La paginación es LimitOffset: el usuario navega entre páginas de resultados sin recargar la página completa. La URL refleja el estado de la búsqueda, lo que permite compartir links a resultados específicos y facilita el indexado por buscadores.
El mapa interactivo
Elegimos Leaflet.js para el mapa por dos razones: es open source (sin costo de licencia) y es extremadamente liviano comparado con la API de Google Maps.
Cada propiedad en Tokko tiene coordenadas lat / lng
(cuando el agente inmobiliario las cargó). Con esos datos, generamos un pin en el
mapa para cada propiedad de la búsqueda activa. Al hacer clic en un pin aparece
un popup con precio, tipo de propiedad y un link al detalle.
En mobile, el mapa ocupa el ancho completo y es colapsable mediante un botón "Ver mapa / Ver lista". Esto es importante porque en pantallas pequeñas un mapa fijo bloquea el scroll y degrada la experiencia.
Performance
El objetivo era llegar a 100 en PageSpeed en mobile y desktop. Las decisiones clave que lo hicieron posible:
-
Lazy loading nativo en todas las imágenes de propiedades
(
loading="lazy"). Las fotos de Tokko son pesadas, diferirlas hace una diferencia enorme en LCP. - Caché de API en servidor. Las respuestas de Tokko se guardan 15 minutos. El primer usuario del intervalo espera la llamada real; los siguientes reciben el caché instantáneamente.
- Leaflet cargado solo cuando es necesario. La librería del mapa se carga de forma diferida y solo en páginas que muestran el mapa.
- Sin dependencias JS innecesarias. El frontend es PHP + JS vanilla con Leaflet como única librería externa.
El resultado: 100 en PageSpeed en mobile y desktop, con un TTFB bajo gracias al caché de API y un LCP optimizado por el lazy loading.