Contenido del curso
Cómo conectar una API externa con Lovable
Conectar una API en Lovable usando Supabase te permite traer datos en vivo a tu aplicación, como el clima de la ubicación del usuario, sin exponer claves sensibles. Si estás construyendo un prototipo y quieres entender cómo funcionan las requests, responses y edge functions, esta guía te muestra el flujo completo con un ejemplo real.
¿Qué es una API y cómo funciona el intercambio de datos?
Piensa en una API como una partida de ping pong entre tu aplicación y un servicio externo. Tú envías una request (la pelota que pinga) con instrucciones específicas, y el servicio te devuelve una response (la pelota que ponga) con la información que pediste.
Ese servicio puede ser OpenAI, AWS o cualquier proveedor que te entregue una clave larga, una API key, para autenticarte. Esa clave es básicamente tu credencial: le dice al proveedor quién eres, a qué cuenta cobrar y que tienes permiso para usar el servicio.
¿Qué es una API key? Es una cadena de texto única que te identifica ante un servicio externo. Funciona como una contraseña que autoriza tu aplicación a hacer llamadas y autoriza al proveedor a cobrarte por el uso.
La idea clave aquí es mantener esa clave segura dentro de Supabase y usar edge functions para mover datos sin exponer información sensible al frontend.
¿Por qué guardar las API keys en Supabase y no en el código?
Si pegas tu clave directamente en una herramienta de IA como Lovable o ChatGPT, corres un riesgo real. Estas plataformas pueden entrenar modelos con los datos que reciben, y mañana alguien podría pedirle al modelo que muestre claves filtradas y aparecer la tuya.
La recomendación es simple: nunca pegues la API key en el chat. En vez de eso, pídele a Lovable algo como "necesito ayuda para agregar la API key de forma segura" y deja que cree el flujo correcto.
¿Dónde se almacenan los secrets en Supabase?
Lovable genera automáticamente una caja de add secret que se conecta con Supabase de manera encriptada. Para revisar tus claves guardadas, navega a Edge Functions y luego a Secrets, donde verás la lista completa.
Un detalle importante: los secrets en Supabase no se pueden editar, solo eliminar y volver a crear. Si actualizas tu clave en el proveedor, tendrás que borrar la antigua y agregar la nueva. [02:45]
¿Cómo conectar una API externa usando RapidAPI y Lovable?
Para este ejemplo se usó RapidAPI, una plataforma gratuita que agrupa cientos de APIs listas para prototipar. Cada API ofrece una sección de code snippet donde puedes copiar el código en JavaScript y entregárselo a Lovable como contexto.
El flujo que funcionó fue este:
Al ejecutar el flujo, el navegador pide permiso para acceder a la ubicación. Cuando lo apruebas, la edge function manda la request al servidor del clima, y el servidor responde con los datos.
¿Qué es una edge function? Es una pequeña función que corre en el servidor de Supabase y actúa como intermediaria entre tu frontend y la API externa. Protege tus claves porque la lógica sensible nunca llega al navegador del usuario.
¿Cómo depurar errores cuando la API responde pero los datos no se muestran?
En la primera prueba, la ubicación apareció correctamente, pero faltaban la temperatura promedio y la precipitación. Aquí es donde entra una técnica muy útil: el chat mode de Lovable.
En lugar de escribir "no funciona" y esperar magia, copia exactamente lo que ves en pantalla y descríbelo con detalle. Por ejemplo: "la request funciona, pero al regresar la respuesta no se muestran los datos de temperatura ni precipitación".
Esa especificidad le da a Lovable el contexto que necesita. En este caso, identificó que la API estaba respondiendo bien y que el problema era de lógica en el frontend al renderizar los campos. [08:30]
¿Por qué conviene usar chat mode antes de implementar cambios?
Activar el modo chat le permite a Lovable escanear el código, analizar el flujo completo y proponer un plan antes de tocar nada. Es mucho más eficiente que prompts repetidos que terminan rompiendo más cosas.
Los beneficios concretos son:
Una vez aprobado el plan, Lovable corrigió el render y los datos del clima aparecieron en vivo en el dashboard.
¿Qué habilidades y conceptos te llevas de este flujo?
Más allá del ejemplo del clima, aprendes a manejar el ciclo completo de integración de servicios externos en una app construida con herramientas de IA.
Los conceptos centrales que dominas son:
Con esto, ya puedes traer datos en vivo de cualquier proveedor a tu prototipo y empezar a pensar en cómo conectar formularios para recoger información de tus usuarios.
¿Qué API te gustaría conectar primero a tu próximo proyecto? Cuéntalo en los comentarios.
