Bolt.new genera aplicaciones de pila completa en el navegador, pero los datos predeterminados son falsos. Para convertir un prototipo de Bolt en algo real, necesita una API que funcione con la recuperación basada en navegador y devuelva JSON limpio. Este tutorial muestra cómo conectar Scavio a un proyecto Bolt.new usando nada más que buscar y una variable de entorno.
Requisitos previos
- Una cuenta Bolt.new
- Una clave API de Scavio (nivel gratuito disponible)
- Conocimientos básicos de React (Bolt lo genera para usted)
Guia paso a paso
Paso 1: Crear un proyecto Bolt.new
Vaya a Bolt.new y solicite "cree una página de búsqueda de productos que muestre los productos de tendencia de Amazon".
// In Bolt.new prompt:
// 'Build a product search page. On search, call scavio API and display results.'Paso 2: Añade el secreto de Scavio
En el panel de secretos de Bolt, agregue SCAVIO_API_KEY con su clave de scavio.dev.
// In Bolt UI: Settings > Secrets > Add
// Key: SCAVIO_API_KEY
// Value: sk_live_your_keyPaso 3: Conecte la llamada de recuperación
Reemplace los datos del marcador de posición de Bolt con una búsqueda real a Scavio. Pega esto en tu componente.
const searchProducts = 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({ platform: 'amazon', query, marketplace: 'US' })
});
return (await res.json()).products || [];
};Paso 4: Renderizar resultados reales
Vincule los resultados a la cuadrícula de productos generada por Bolt.
useEffect(() => {
searchProducts('wireless earbuds').then(setProducts);
}, []);Paso 5: Implementar
Implemente mediante el botón de implementación integrado de Bolt. Su aplicación en vivo ahora devuelve productos reales de Amazon en lugar de marcadores de posición.
// Click Deploy in Bolt UIEjemplo en Python
# Bolt runs in-browser, but you can test Scavio from Python too:
import os, requests
r = requests.post('https://api.scavio.dev/api/v1/search',
headers={'x-api-key': os.environ['SCAVIO_API_KEY']},
json={'platform': 'amazon', 'query': 'wireless earbuds', 'marketplace': 'US'})
print(r.json()['products'][: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({ platform: 'amazon', query: 'wireless earbuds', marketplace: 'US' })
});
const { products } = await res.json();
console.log(products.slice(0, 3));Salida esperada
Your Bolt app renders real Amazon products with titles, prices, ratings, and thumbnails. The placeholder lorem-ipsum data is gone.