Lovable genera aplicaciones React + Supabase a partir de indicaciones, pero los datos predeterminados están codificados. Para convertir un prototipo de Lovable en un producto entregable, necesita una API que funcione con el entorno de Lovable y se ajuste a los patrones de código generados. Este tutorial explica cómo conectar Scavio a un proyecto Lovable de principio a fin.
Requisitos previos
- Una cuenta adorable
- Una clave API de Scavio
- Un proyecto Supabase (creado automáticamente por Lovable)
Guia paso a paso
Paso 1: Solicite a Lovable que cree la aplicación
Utilice un mensaje que describa explícitamente el patrón de búsqueda.
// In Lovable prompt:
// 'Build a search page. On query submit, call the Scavio API to fetch Google results and display them in a card grid.'Paso 2: Añade Scavio a Lovable secrets
Abra el panel de secretos de Lovable y agregue SCAVIO_API_KEY.
// Lovable UI: Project > Secrets > Add
// Name: SCAVIO_API_KEY
// Value: sk_live_...Paso 3: Editar la llamada de recuperación generada
Lovable genera un marcador de posición de búsqueda genérico. Reemplácelo con una llamada Scavio real.
const searchScavio = async (query) => {
const res = await fetch('https://api.scavio.dev/api/v1/search', {
method: 'POST',
headers: { 'x-api-key': import.meta.env.SCAVIO_API_KEY, 'Content-Type': 'application/json' },
body: JSON.stringify({ query })
});
return (await res.json()).organic_results || [];
};Paso 4: Vincularse a componentes adorables
Utilice useState y useEffect generados por Lovable para generar resultados.
const [results, setResults] = useState([]);
const handleSearch = async (q) => setResults(await searchScavio(q));Paso 5: Implementar a través de Lovable
Utilice el botón de implementación integrado de Lovable para enviar la aplicación en vivo.
// Click Deploy in Lovable UIEjemplo en Python
import os, requests
r = requests.post('https://api.scavio.dev/api/v1/search',
headers={'x-api-key': os.environ['SCAVIO_API_KEY']},
json={'query': 'how to build a lovable app'})
print(r.json()['organic_results'][:3])Ejemplo en JavaScript
const res = await fetch('https://api.scavio.dev/api/v1/search', {
method: 'POST',
headers: { 'x-api-key': import.meta.env.SCAVIO_API_KEY, 'Content-Type': 'application/json' },
body: JSON.stringify({ query: 'how to build a lovable app' })
});
console.log((await res.json()).organic_results.slice(0, 3));Salida esperada
Your Lovable app renders real Google search results with titles, URLs, and snippets. Lovable's generated card grid populates dynamically from live Scavio data.