En este tutorial aprenderás
- Qué es Firebase Studio y las características que ofrece.
- Por qué necesitas un proveedor de datos web de Amazon como Bright Data para crear una experiencia web similar a CamelCamelCamel.
- Cómo crear una aplicación web de seguimiento de precios de Amazon con Firebase Studio, utilizando datos de Amazon de la API de Raspador de Amazon de Bright Data.
¡Vamos a sumergirnos!
¿Qué es Firebase Studio?
Firebase Studio es un entorno de desarrollo basado en la nube y potenciado por IA creado por Google. Su principal objetivo es acelerar la creación y el despliegue de aplicaciones de calidad de producción con IA. En particular, proporciona un espacio de trabajo completo donde la asistencia de IA impulsada por Gemini se integra a lo largo de todo el ciclo de vida de desarrollo.
Funciones clave
Algunas de las principales características disponibles en Firebase Studio son:
- Entorno de desarrollo basado en la nube: Te equipa con un espacio de trabajo de codificación completo con asistencia de IA, que incluye sugerencias, generación y explicaciones de código.
- Agente de creación de prototipos de aplicaciones: Admite la creación rápida de prototipos de aplicaciones, como las aplicaciones web Next.js, con asistencia de IA, lo que reduce la necesidad de una codificación manual exhaustiva.
- Soporte para varios frameworks y lenguajes: Trabaja con tecnologías populares como Flutter, Go, Angular, Next.js y más, utilizando los frameworks que prefieran.
- Integración con servicios Firebase: Se integra con servicios como Firebase App Hosting, Cloud Firestore y Firebase Authentication.
- Herramientas de desarrollo y despliegue: Soporte integrado para emulación, pruebas, depuración y monitorización del rendimiento de la app.
- Opciones de importación y personalización: Importa proyectos existentes desde GitHub, GitLab, Bitbucket o archivos comprimidos, y personalízalos completamente con IA.
Qué necesitas para crear una aplicación web de seguimiento de precios de Amazon
CamelCamelCamel es un servicio en línea que rastrea los precios de los productos de Amazon, proporcionando gráficos de historial de precios y alertas de caídas de precios para ayudar a los usuarios a encontrar las mejores ofertas. En términos simples, su característica principal es el seguimiento de precios de Amazon, que es exactamente en lo que nos centraremos en esta guía.
La idea aquí es construir una aplicación web que funcione como una alternativa, implementando el seguimiento de precios de Amazon de una manera simplificada. Normalmente, esto llevaría días (o incluso meses) de desarrollo, pero gracias a Firebase Studio, puedes tener un prototipo funcionando en cuestión de minutos.
Un reto importante en esta tarea es la obtención de datos de productos de Amazon. El scraping de Amazon es notoriamente difícil debido a las estrictas medidas anti-bot como CAPTCHAs (recuerde el notorio CAPTCHA de Amazon) que pueden bloquear la mayoría de las solicitudes automatizadas:
Aquí es donde Bright Data entra en juego.
Bright Data ofrece un conjunto completo de soluciones para la obtención de datos web, tanto en formato bruto como estructurado, de prácticamente cualquier sitio web. Con la rotación de IP, la huella digital del navegador, la Resolución de CAPTCHA y muchos otros aspectos esenciales gestionados automáticamente, no tendrá que preocuparse por bloqueos o restricciones.
En concreto, utilizaremos los datos de productos de Amazon devueltos por la API Amazon Raspador de Bright Data. Esto le permite recuperar datos frescos de productos de Amazon simplemente llamando a un punto final de la API.
Vea cómo Firebase Studio y Bright Data trabajan juntos para crear rápidamente una experiencia web similar a CamelCamel.
Cómo crear un rastreador de precios de Amazon como CamelCamelCamel en Firebase Studio
Siga los siguientes pasos para aprender a crear una aplicación web similar a CamelCamelCamel que rastrea los precios de Amazon. Integra Bright Data en tu prototipo de Firebase Studio.
Requisitos previos
Para seguir este tutorial, asegúrate de tener
- Una cuenta de Google
- Una cuenta Firebase Studio
- Una clave API Gemini
- Una base de datos Firestore configurada y lista para conectarse a través de API
- Una cuenta de Bright Data con una clave de API configurada
Nota: No se preocupe por configurar todo todavía, ya que se le guiará a través de los pasos a medida que avanzamos.
También necesitará
- Conocimientos de desarrollo Next.js en TypeScript
- Familiaridad con el funcionamiento de la API de Bright Data Raspador (consulte los documentos de Bright Data para más detalles)
Paso #1: Configurar Firebase Studio
Vaya al sitio web de Firebase Studio y haga clic en el botón “Get Started”:
Se le pedirá que inicie sesión con una de sus cuentas de Google. Selecciona una y continúa.
Una vez conectado, llegarás a la página de creación de aplicaciones:
Aquí, puedes introducir una solicitud para pedir a la IA que inicialice el proyecto por ti. Perfecto.
Paso 2: Diseñar la solicitud
Recuerda que tu objetivo es crear una alternativa a CamelCamelCamel. En pocas palabras, esta aplicación web debe permitir a los usuarios controlar los precios de los productos de Amazon a partir de una lista de artículos.
Cuando se trabaja con una solución como Firebase Studio(o v0), la ingeniería del prompt es clave. Por lo tanto, tómate tu tiempo para crear el mejor prompt posible. Para obtener resultados de alta calidad, necesitará un aviso bien estructurado. A continuación se presentan algunas de las mejores prácticas:
- Céntrese sólo en las características principales. Cuanto más añada, mayor será el riesgo de que el código sea desordenado y difícil de depurar.
- Indique claramente las tecnologías que desea utilizar (frontend, backend, base de datos, etc.).
- Mencione que se encargará de la integración con Bright Data más adelante. Por ahora, basta con un poco de lógica simulada.
- Utilice una lista numerada para desglosar las tareas principales.
- Mantenga el mensaje detallado pero conciso. Si se alarga demasiado, la IA podría confundirse.
Este es un ejemplo de un mensaje sólido que puede utilizar:
## Objetivo
Construir una aplicación web Next.js para el seguimiento de los precios de los productos de Amazon.
## Requisitos
### 1. Página de aterrizaje
- Una página de inicio con una interfaz de usuario limpia y un formulario en el que los usuarios puedan enviar la URL de un producto de Amazon.
### 2. Manejo de datos
- Cuando un usuario envía una URL:
- Llame a un punto final de API simulado (que representa el Raspador de Amazon de Bright Data) para obtener los detalles del producto:
- URL
- Título del producto
- Precio del producto
- Imagen
- ASIN
- ...
- Almacene los datos de este producto en Firestore.
- Añada el producto a un panel de productos con una lista de tarjetas que muestre cada producto. Al hacer clic, cada tarjeta de producto debe llevar a una página de producto específica.
### 3. Seguimiento de precios
- Cree una tarea programada (por ejemplo, una vez al día) que vuelva a llamar a la Bright Data API para cada producto guardado.
- Guarde cada nuevo registro de precios en Firestore, utilizando el ASIN del producto como ID y añadiéndolo a su historial de precios.
### 4. Página de producto
- En la página del producto, muestre una tabla con:
- Información del producto (título, imagen, URL, etc.)
- Último precio
- Historial de precios (en forma de filas de una tabla o, idealmente, un gráfico sencillo que muestre la evolución de los precios)
---
**Importante**:
- Implementar las llamadas a la API externa de Bright Data como funciones simuladas que devuelven JSON estático. Más adelante las sustituiré por una integración real con la API.
## Pila tecnológica
- Next.js con TailwindCSS para el estilo
- Firestore como base de datos (con una colección llamada "products")
## Acciones
Estructura del proyecto completo, con páginas, esquema de Firestore, funciones API simuladas y la función programada para las actualizaciones diarias de precios.Fíjate en que la solicitud está escrita en formato Markdown, lo que facilita la organización y el desglose de la tarea en secciones. Además, los modelos de IA suelen entender Markdown bastante bien.
El ejemplo anterior sigue todas las mejores prácticas y ayudará a la IA a crear con éxito la aplicación deseada. Perfecto.
Paso 3: Ejecutar la instrucción y explorar los primeros resultados
Pega la instrucción en el área de texto “Prototipar una aplicación con IA” en Firebase Studio y pulsa Intro.
El agente de creación de prototipos de aplicaciones de Firebase Studio generará un proyecto de aplicación que contendrá toda la información principal:
Siéntete libre de personalizar y refinar el plano para que se ajuste mejor a tus necesidades.
Cuando esté listo, desplácese hacia abajo y haga clic en el botón “Prototipar esta aplicación” para indicar a la IA que genere la aplicación:
Firebase Studio empezará a crear los archivos para tu proyecto Next.js. Ten paciencia, ya que puede tardar unos minutos.
Una vez completado el proceso, verás tu prototipo en una ventana de vista previa:
Observa cómo la interfaz de usuario de la aplicación se asemeja a la estructura que describiste en tu mensaje. Parece un resultado muy prometedor.
Paso 4: Completar la integración con Gemini
En la esquina inferior izquierda, debería ver un mensaje pidiéndole que complete la integración Gemini introduciendo su clave API Gemini:
Recupera tu clave API Gemini de Google IA Studio, pégala en el campo y pulsa el botón “Continuar”. Si todo funciona correctamente, deberías recibir un mensaje de éxito como este:
Mientras tanto, Firebase Studio debería terminar de cargar automáticamente su entorno de desarrollo (basado en Visual Studio Code). Si no, accede a él pulsando el botón “Cambiar a Code”. Lo que deberías ver es:
En el lado derecho, ahora verá un panel Gemini dentro de su configuración de codificación. Desde aquí, puedes pedir a Gemini consejos contextuales, nuevas características, correcciones y orientación mientras construyes. Bien hecho.
Paso #5: Corregir los problemas
Como puedes ver en la pestaña de vista previa “Web” (mostrada en las capturas de pantalla anteriores), la aplicación actual tiene 2 problemas. Esto es completamente normal, ya que el código generado por IA raramente es perfecto y normalmente requiere ajustes y correcciones.
Antes de seguir adelante, revisa los problemas reportados. Utiliza los elementos visuales de Next.js en la aplicación para identificar lo que no funciona y arréglalo uno a uno. Después de todo, construir sobre una aplicación rota no tiene mucho sentido.
Para la depuración del lado del servidor, comprueba los registros en el panel “OUTPUT”. Pulsa Ctrl + <backtick> para abrir la sección Terminal. Allí, cambia a la pestaña “OUTPUT” y selecciona el elemento “Previews”:
Recuerda: También puedes pedir ayuda a Gemini para solucionar estos problemas preguntándole directamente por los errores que te aparecen.
Una vez que hayas solucionado todos los problemas, tu aplicación debería tener este aspecto:
Observa que el indicador de “Problemas” en la esquina superior izquierda ha desaparecido, lo que significa que todos los problemas de Next.js han sido resueltos.
Paso #6: Configurar Firestore
Una de las grandes características de Firebase Studio es que se ejecuta directamente en el entorno Firebase, por lo que es fácil de integrar con todos los demás productos Firebase.
En este proyecto, necesitarás configurar una base de datos Firestore para que tu app pueda leer y almacenar datos, manteniendo un registro de su estado. Esto es necesario ya que Firestore fue especificada como la tecnología de base de datos en el prompt.
Consejo: Para una integración simplificada, puedes pedir a Gemini que te guíe a través de toda la tarea.
Comience por iniciar sesión en Firebase y crear un nuevo proyecto:
Dale un nombre a tu proyecto y sigue las instrucciones del asistente de creación de proyectos. Firebase empezará a crear tu proyecto:
Pulsa el botón “+ añadir aplicación” y selecciona el icono de aplicación web para inicializar una nueva aplicación web Firebase:
Dale un nombre a tu aplicación web y sigue las instrucciones. Al final, recibirás un fragmento de conexión con la configuración de Firebase:
Guarda estas credenciales del objeto firebaseConfig en un lugar seguro, ya que las necesitarás para conectar tu app prototipo a Firebase.
A continuación, en la página de tu proyecto de la Consola Firebase, en la sección “Build”, selecciona la opción “Firestore Database”:
Haz clic en el botón “Crear base de datos” e inicializa una base de datos estándar en modo de producción:
En la parte superior de la página de Firestore, accede a la pestaña “Reglas”. Añade las siguientes reglas para permitir la lectura y escritura:
rules_version = '2';
servicio cloud.firestore {
match /databases/{database}/documents {
match /{documento=**} {
permitir lectura, escritura: si es true;
}
}
}A continuación, haga clic en “Publicar” para actualizar sus reglas:
Nota: Estas reglas hacen que tu base de datos sea pública, por lo que cualquiera podría leer, modificar o borrar datos. Esto está bien para un prototipo, pero en producción, debe configurar reglas más seguras y granulares.
Cree una nueva colección llamada productos (el mismo nombre especificado en la consulta):
Proceda creando una nueva entrada y configurando el campo asinc como una clave de cadena. Después de comprobar que su aplicación puede escribir correctamente en Firestore, recuerde eliminar esta entrada de ejemplo.
Ahora, en la consola de Google Cloud, vaya a la página “API de Google Cloud Firestore“. Aquí, habilita tu API:
El campo apiKey proporcionado en el objeto firebaseConfig puede utilizarse ahora para conectarse a su base de datos Firestore.
Ya está. Ya tienes una base de datos Firestore lista para integrar en tu aplicación Firebase Studio.
Paso #7: Conectar a Firestore
De vuelta en Firebase Studio, inspecciona tu proyecto. En algún lugar de su estructura de archivos, usted debe ver un archivo para la conexión Firestore. En este caso, es src/lib/firebase.ts:
Como puedes ver, este archivo espera que las credenciales de conexión Firebase estén definidas en las variables de entorno públicas de Next.js. Añádelas al archivo .env (que debería haber sido creado por la IA; si no, créalo tú mismo):
NEXT_PUBLIC_FIREBASE_API_KEY="<TU_CLAVE_API_BASE_FIRE>"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="<SU_BASE_FIRE_AUTH_DOMAIN>"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="<FIREBASE_PROJECT_ID>"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="<TU_FIREBASE_STORAGE_BUCKET>"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="<SU_FIREBASE_MESSAGING_SENDER_ID>"
NEXT_PUBLIC_FIREBASE_APP_ID="<SU_FIREBASE_APP_ID>"Nota: Estos valores provienen del objeto firebaseConfig que obtuviste anteriormente.
En la pestaña “Web”, realice un reinicio duro para asegurarse de que todos los cambios se recargan correctamente. Tu aplicación Firebase debería ser ahora capaz de conectarse a Firestore.
Si quieres comprobar que la aplicación funciona correctamente en la colección de productos, explora el código. Deberías ver algo como esto:
Observa que la aplicación funciona sobre la colección de productos como es debido.
¡Genial! Un paso más cerca de completar tu prototipo.
Paso #8: Integrar Bright Data
Actualmente, la información de los productos de Amazon y la lógica de recuperación de precios es imitada (en este caso, en un archivo src/lib/mock-api.ts ):
Este archivo contiene las dos funciones principales de recuperación de datos de bajo nivel que se llaman en la lógica de negocio de los botones “Seguir precio” y “Actualizar todos los precios”:
En concreto, mock-api.ts define las dos funciones:
fetchProductFromUrl(): Simula la obtención de información de productos de Amazon a partir de una URL de producto dada.getLatestPriceForProduct(): Obtiene el último precio de un producto de Amazon.
Lo que debe hacer a continuación es sustituir esa lógica simulada por llamadas reales al Raspador de Amazon de Bright Data a través de la API.
Para empezar, inicie sesión en su cuenta de Bright Data o cree una nueva si aún no lo ha hecho. Navegue a la pestaña “API Request Builder” para el Raspador “Amazon Products – Collect by URL“. Seleccione la opción “Nodo (Axios)” para obtener un fragmento de código que muestra cómo llamar a la API para recuperar datos de productos:
Si no está familiarizado con el funcionamiento de las API del Raspador Web de Bright Data, vamos a explicarlo brevemente.
Comience por activar una tarea de raspado utilizando el punto final /trigger, que crea una instantánea de raspado para la URL de producto especificada. Una vez iniciada la instantánea, se comprueba periódicamente su estado mediante el punto final snapshot/{snapshot_id} para ver si los datos raspados están listos. Cuando estén listos, llame a la misma API para obtener los datos raspados.
Estas API de Raspador Web pueden llamarse mediante programación autenticándose con su clave de API de Bright Data. Siga la guía oficial para obtener la clave y, a continuación, añádala a su archivo .env de la siguiente forma
BRIGHT_DATA_API_KEY="<SU_CLAVE_API_DE_BRIGHT_DATA>"Básicamente, lo que tienes que hacer es:
- Llamar al endpoint
/triggercon la URL del producto para iniciar una nueva tarea de scraping, autenticándose mediante el token de la API de Bright Data. - Iniciar un proceso de sondeo en
snapshot/{snapshot_id}para comprobar periódicamente si la instantánea que contiene los datos raspados está lista. - Una vez que la instantánea esté lista, acceda a los datos de productos de Amazon.
Para empezar, instala el cliente HTTP Axios en tu proyecto con:
npm install axios
A continuación, sustituye el contenido de src/lib/mock-api.ts por la siguiente lógica
'use server'
import axios from 'axios';
import type { Product } from './types';
// acceda a su clave de API de Bright Data desde los entornos
const BRIGHT_DATA_API_KEY = process.env.BRIGHT_DATA_API_KEY;
// crear un cliente Axios personalizado para conectarse al
// Bright Data Raspador de Amazon
const client = axios.create({
cabeceras: {
Authorization: `Bearer ${BRIGHT_DATA_API_KEY}`,
'Content-Type': 'application/json',
},
});
async function triggerAndPoll(url: string): Promise<Producto> {
// desencadenar una nueva instantánea
const triggerRes = await client.post(
'https://api.brightdata.com/datasets/v3/trigger',
[{
url': url
}],
{
params: {
dataset_id: 'gd_l7q7dkf244hwjntr0', // ID del conjunto de datos de Amazon
include_errors: true, // para depuración
},
}
);
// obtener el ID de la instantánea
const snapshotId = triggerRes.data?.snapshot_id;
// intentar hasta 600 veces recuperar los datos de la instantánea
const maxAttempts = 600;
let intentos = 0;
while (attempts < maxAttempts) {
try {
// comprueba si los datos están disponibles
const snapshotRes = await client.get(
`https://api.brightdata.com/datasets/v3/snapshot/${snapshotId}`,
{
params: { format: 'json' },
}
);
// si los datos no están disponibles (la tarea de raspado no ha terminado)
const status = snapshotRes.data?.status;
if (['running', 'building'].includes(status)) {
attempts++;
// espera 1 segundo
await new Promise((resolver) => setTimeout(resolver, 1000));
continuar;
}
// si los datos están disponibles
return snapshotRes.data[0] as Producto;
} catch (err) {
attempts++;
// espera 1 segundo
await new Promise((resolver) => setTimeout(resolver, 1000));
}
}
throw new Error(
`Timeout after ${maxAttempts} seconds waiting for snapshot data`
);
}
export async function fetchProductFromUrl(url: string): Promise<Producto | null> {
const productData = await triggerAndPoll(url);
const timestamp = Date.now();
const precio_inicial = productData.precio_final;
if (precioinicial) {
productData['priceHistory'] = [{ price: initialPrice, timestamp }].
}
return productData
}
export async function getLatestPriceForProduct(url: string): Promise<número | null> {
const productData = await triggerAndPoll(url);
return datos_producto.precio_final || null
}
La nueva implementación utiliza Axios para conectarse a Bright Data, desencadena una instantánea para una URL determinada, sondea hasta que los datos están listos y devuelve la información del producto.
La utilidad triggerAndPoll( ) gestiona toda la lógica de recuperación de datos de la API de Bright Data Raspador. fetchProductFromUrl() devuelve el objeto producto completo con un historial de precios inicial, mientras que getLatestPriceForProduct() devuelve sólo el precio actual leído del campo final_price.
Para comprender qué campos devuelve la API de Bright Data Amazon Raspador, explore la sección “Visión general” de su panel de control:
Introduzca el JSON de ejemplo en Gemini y pida a la IA que actualice el tipo de producto TypeScript en consecuencia:
¡Fantástico! No se requieren más pasos. En este punto, su aplicación debería ser totalmente funcional y estar lista para las pruebas, con los datos del producto en tiempo real que se obtienen y se muestran.
Paso 9: Probar el prototipo de la aplicación
Tu alternativa CamelCamelCamel ya está lista. Puedes encontrar el código completo en el repositorio de GitHub que da soporte a este artículo. Clónalo con
git clone https://github.com/Tonel/price-wiseEsto no es más que un MVP(Producto Mínimo Viable), pero es lo suficientemente funcional como para explorar tus ideas e incluso extenderlo a una aplicación lista para producción.
Para asegurarte de que se aplican todas las actualizaciones de tu código base, realiza un reinicio completo:
A continuación, haga clic en el icono “Abrir en una ventana nueva”:
Ahora deberías tener acceso a tu prototipo Firebase Studio en una pestaña dedicada del navegador:
Prueba la aplicación web CamelCamelCamel pegando la URL de un producto de Amazon y pulsando el botón “Seguir precio”:
El producto se añadirá a la sección “Productos rastreados”, mostrando los datos exactamente como aparecen en su página de Amazon.
Esto demuestra la potencia de la API del Raspador Web de Bright Data, que recuperó con éxito los datos del producto en cuestión de segundos.
Compruebe que los datos del producto se almacenaron en la base de datos de Firestore:
Ahora, suponga que han pasado unos días y que el precio ha fluctuado. Visite la página del producto para ver el precio actualizado:
Más en detalle, observe cómo la página del producto contiene tanto un gráfico como una tabla que muestran la evolución del precio de ese producto:
Impresionante, ¿verdad?
¡Et voilà! En sólo unos minutos y con muy poco código, has construido una aplicación web al estilo CamelCamelCamel para el seguimiento de precios de productos de Amazon. Nada de esto habría sido posible sin las capacidades de datos web en tiempo real de Bright Data y el entorno de desarrollo simplificado de Firebase Studio.
Próximos pasos
La aplicación construida aquí es sólo un prototipo. Para hacerla lista para producción, considere los siguientes pasos:
- Integrar la autenticación: Utiliza Firebase Authentication para añadir rápidamente un sistema de inicio de sesión para que cada usuario pueda guardar y supervisar sus propios productos.
- Añade más funciones: Continúa iterando en Gemini solicitando nuevas funcionalidades, o descarga el código del proyecto e integra manualmente funcionalidades adicionales.
- Haz pública tu aplicación: Publica tu aplicación utilizando una de las opciones de despliegue que ofrece Firebase Studio.
Conclusión
En esta entrada de blog, has visto cómo las capacidades de creación de aplicaciones basadas en IA de Firebase Studio pueden ayudarte a crear un sitio competidor de CamelCamelCamel en cuestión de minutos. Esto no sería posible sin una fuente fiable y fácil de integrar de datos de productos y precios de Amazon, como Amazon Raspador de Bright Data.
Lo que construimos aquí es sólo un ejemplo de lo que es posible cuando se combinan datos raspados con una aplicación web dinámica generada por IA. Recuerde que un enfoque similar puede aplicarse a innumerables casos de uso. Todo lo que necesitas son las herramientas adecuadas para acceder a los datos que se ajusten a tus necesidades.
¿Por qué detenerse aquí? Explore nuestras API de Raspador Web, que proporcionan puntos finales dedicados para extraer datos web frescos, estructurados y totalmente conformes de más de 120 sitios web populares.
Regístrese hoy mismo para obtener una cuenta gratuita de Bright Data y empiece a construir con soluciones de recuperación de datos web preparadas para IA.
