Ofertas API Mejores prácticas para la integración

Este artículo cubre una guía lista para producción para integrar la API de ofertas en su aplicación. Seguir estas prácticas le ayudará a ofrecer una experiencia de ofertas rápida y fiable y, al mismo tiempo, ser un buen consumidor de API.

Estrategias de almacenamiento en caché

Las ofertas de hoteles cambian con frecuencia, pero no cambian con cada solicitud. La implementación de una capa de almacenamiento en caché reduce la latencia, reduce el volumen de llamadas a la API y proporciona una mejor experiencia de usuario.

Duración de caché recomendada

Un TTL (tiempo de vida) de caché de 5 a 10 minutos logra un buen equilibrio entre frescura y eficiencia. Las ofertas son urgentes, pero no se actualizan cada segundo.

• 5 minutos: adecuado para páginas con mucho tráfico donde los usuarios esperan ofertas actualizadas.
• 10 minutos: apropiado para páginas con poco tráfico o precarga en segundo plano.

Diseño de clave de caché

Incluya todos los parámetros de consulta y encabezados relevantes en su clave de caché para evitar ofrecer resultados obsoletos o no coincidentes:

deals:{lat}:{long}:{currency}:{top_destination}:{language}

Redondee las coordenadas a 2 o 3 decimales en su clave de caché para aumentar las tasas de aciertos de caché. Dos decimales de precisión de latitud/longitud cubren aproximadamente 1,1 km, lo que es lo suficientemente cercano para buscar ofertas:

function buildCacheKey(lat, long, currency, topDestination, language) {
  const roundedLat = lat.toFixed(2);
  const roundedLong = long.toFixed(2);
  return deals:${roundedLat}:${roundedLong}:${currency}:${topDestination}:${language};
}

Caché del lado del servidor

Si su aplicación tiene un backend, almacene en caché las respuestas de la API allí para beneficiar a todos los usuarios que solicitan ofertas para la misma área:

const cache = new Map();
async function getDeals(lat, long, currency, options = {}) {
  const key = buildCacheKey(lat, long, currency, options.topDestination, options.language);
  const cached = cache.get(key);
if (cached && Date.now() - cached.timestamp < 5  60  1000) {
    return cached.data;
  }
const data = await fetchDealsFromAPI(lat, long, currency, options);
  cache.set(key, { data, timestamp: Date.now() });
  return data;
}

Para sistemas de producción, considere usar Redis o Memcached en lugar de un caché en memoria.

Caché del lado del cliente

En la interfaz, puede usar el almacenamiento de sesiones o un almacén en memoria para evitar llamadas redundantes cuando los usuarios regresan a la página de ofertas:

function getCachedDeals(key) {
  const raw = sessionStorage.getItem(key);
  if (!raw) return null;
const { data, timestamp } = JSON.parse(raw);
  if (Date.now() - timestamp > 5  60  1000) {
    sessionStorage.removeItem(key);
    return null;
  }
  return data;
}

Frecuencia de sondeo

Si su aplicación muestra ofertas en una página de larga duración (como un panel o una página de inicio), actualice periódicamente los datos para mantenerlos actualizados.

Intervalos recomendados

Pausa cuando no esté visible

Evite desperdiciar llamadas API cuando el usuario no esté mirando la página:

let pollTimer = null;
function startPolling(fetchFn, intervalMs) {
  fetchFn();
  pollTimer = setInterval(fetchFn, intervalMs);
}
function stopPolling() {
  clearInterval(pollTimer);
  pollTimer = null;
}
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    stopPolling();
  } else {
    startPolling(fetchDeals, 5  60  1000);
  }
});

Manejo de errores

El sólido manejo de errores garantiza que la función de ofertas se degrade con elegancia en lugar de romper la página.

Códigos de estado HTTP

Reintentar con retroceso exponencial

Para errores transitorios (429, 500, 503), implemente un retroceso exponencial:

async function fetchWithRetry(url, options, maxRetries = 3) {
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(url, options);
if (response.ok) {
        return response.json();
      }
if (response.status === 429 || response.status >= 500) {
        if (attempt < maxRetries) {
          const delay = Math.pow(2, attempt)  1000 + Math.random()  1000;
          await new Promise(resolve => setTimeout(resolve, delay));
          continue;
        }
      }
throw new Error(API returned ${response.status}: ${response.statusText});
    } catch (error) {
      if (attempt === maxRetries) throw error;
      const delay = Math.pow(2, attempt) * 1000;
      await new Promise(resolve => setTimeout(resolve, delay));
    }
  }
}

Manejo sin resultados

Una respuesta exitosa con una matriz de ofertas vacía no es un error. Manéjelo como un estado normal en su interfaz de usuario:

• Mostrar un mensaje amigable "No hay ofertas disponibles".
• Sugiera al usuario que pruebe una ubicación diferente o vuelva a consultar más tarde.
• Opcionalmente, recurra a una consulta top_destination=true para mostrar ofertas populares.

Limitación de velocidad

Si bien los límites de tarifas exactos dependen de su plan API, siga estas pautas generales:

• No llame a la API con cada pulsación de tecla o evento de desplazamiento. Evite los cambios de ubicación y las interacciones del usuario.
• Utilice el almacenamiento en caché para atender solicitudes repetidas desde su caché en lugar de acceder a la API.
• Supervise su uso y configure alertas si se acerca al umbral de su límite de tarifa.
• Respeta las respuestas 429 retrocediendo como se describe arriba.

Combinar ofertas con búsqueda de hoteles

La API de ofertas es una herramienta de descubrimiento: muestra a los usuarios qué descuentos están disponibles. Para completar una reserva, normalmente necesitarás utilizar la API de Hoteles.

Un flujo recomendado:1. Mostrar ofertas: utilice la API de ofertas para mostrar ofertas atractivas en su página de inicio o en su página de ofertas.

1. El usuario selecciona una oferta: cuando un usuario hace clic en una oferta, captura el ID de la propiedad.
2. Verificar disponibilidad: llame al punto final de disponibilidad de la API de hoteles con el ID de la propiedad, las fechas de entrada y salida y el recuento de huéspedes.
3. Confirmar precio: utilice el punto final de confirmación de precio de la API de hoteles para fijar la tarifa.
4. Completar reserva: continúe con el flujo de reserva de la API de hoteles.

Mejores prácticas de correlación e ID de sesión

• x-correlation-id: genera un nuevo UUID para cada llamada a la API. Esto facilita el seguimiento de solicitudes individuales en los registros.
• x-session-id: reutiliza el mismo UUID para todas las llamadas API dentro de una única sesión de usuario. Esto ayuda a Xeni a correlacionar solicitudes del mismo recorrido del usuario.
• Registrar ambos ID: almacene ambos ID en los registros de su aplicación. Si un usuario informa un problema, puede proporcionárselo al soporte de Xeni para una depuración rápida.

Consejos de rendimiento

• Carga diferida de imágenes de ofertas: utilice loading="lazy" en imágenes de tarjetas de ofertas para evitar bloquear la representación de la página inicial.
• Precargue ofertas para ubicaciones comunes: si su aplicación atiende a un mercado específico, precargue ofertas para las principales ciudades de esa región.
• Utilice renderizado del lado del servidor: para SEO y rendimiento de carga inicial, renderice tarjetas de ofertas en el servidor e hidrátelas en el cliente.
• Minimizar cambio de diseño: reserve espacio para tarjetas de ofertas (por ejemplo, usando tarjetas esqueleto) para que la página no salte cuando se carguen datos.