在 Firebase Studio 中构建由 Bright Data 驱动的亚马逊价格跟踪应用

在本教程中，你将学习：

1. 什么是 Firebase Studio 以及它提供的功能。
2. 为什么需要像 Bright Data 这样的亚马逊网页数据提供方来打造类似 CamelCamelCamel 的网站体验。
3. 如何使用 Firebase Studio 和来自 Bright Data Amazon 抓取器 API 的数据创建亚马逊价格追踪 Web 应用。

让我们开始吧！

什么是 Firebase Studio？

Firebase Studio 是由 Google 构建的云端、AI 驱动开发环境。其主要目标是通过 AI 加速生产级应用的创建与部署。它提供一个完整的工作空间，将由 Gemini 驱动的 AI 助手贯穿整个开发生命周期。

核心功能

Firebase Studio 的一些顶级功能包括：

• 云端开发环境：为你提供带有 AI 助手的完整编码工作区，包括代码建议、生成与解释。
• 应用原型代理：在 AI 支持下快速原型化应用（如 Next.js Web 应用），减少大量手写代码的需求。
• 支持多种框架与语言：可使用 Flutter、Go、Angular、Next.js 等主流技术与偏好的框架。
• 与 Firebase 服务集成：可与 Firebase App Hosting、Cloud Firestore、Firebase Authentication 等服务集成。
• 开发与部署工具：内置模拟、测试、调试与性能监控支持。
• 导入与自定义选项：可从 GitHub、GitLab、Bitbucket 或压缩包导入现有项目，并用 AI 进行全面定制。

构建亚马逊价格追踪 Web 应用所需的内容

CamelCamelCamel 是一项在线服务，用于追踪亚马逊商品价格，提供价格历史图表与降价提醒，帮助用户找到最佳优惠。简单来说，其核心是亚马逊价格追踪，这正是本指南将要聚焦的内容。

我们的思路是构建一个替代性 Web 应用，以更简化的方式实现亚马逊价格追踪。通常，这可能需要数天甚至数月开发，但借助 Firebase Studio，你可以在几分钟内启动可运行的原型。

本任务中的一大挑战是获取亚马逊商品数据。由于严苛的反爬机制（如 CAPTCHA，别忘了臭名昭著的 Amazon CAPTCHA），抓取亚马逊往往非常困难，自动请求很容易被拦截：

这正是 Bright Data 大显身手的地方！

Bright Data 提供完整的网页数据获取解决方案，可从几乎任何网站以原始或结构化格式获取数据。IP 轮换、浏览器指纹、CAPTCHA 解决等关键环节均自动化处理，你无需担心封锁或限制。

本教程将使用 Bright Data 的 Amazon 抓取器 API 返回的亚马逊商品数据。你只需调用一个 API 端点即可获取最新的亚马逊商品数据。

看看 Firebase Studio 与 Bright Data 如何协作，快速打造类似 CamelCamelCamel 的网页体验！

如何在 Firebase Studio 中构建类似 CamelCamelCamel 的亚马逊价格追踪应用

按照以下步骤，学习如何创建一个追踪亚马逊价格的 CamelCamelCamel 风格 Web 应用，并将 Bright Data 集成进你的 Firebase Studio 原型！

先决条件

开始前，请确保你具备：

• 一个 Google 账号
• 一个 Firebase Studio 账号
• 一个 Gemini API 密钥
• 已设置好并可通过 API 连接的 Firestore 数据库
• 一个已配置 API Key 的 Bright Data 账号

注意：暂时不用着急完成所有配置，我们会在过程中逐步引导。

你还需要：

• TypeScript 版 Next.js 开发知识
• 熟悉 Bright Data 抓取器 API 的工作方式（详见 Bright Data 文档）

步骤一：设置 Firebase Studio

访问 Firebase Studio 官网并点击 “Get Started” 按钮：

系统会要求你使用某个 Google 账号登录。选择一个账号并继续。

登录后，你将进入应用构建页面：

在此，你可以输入提示词，让 AI 为你初始化项目。很棒！

步骤二：拟定提示词

记住，我们的目标是构建一个 CamelCamelCamel 替代品。简单来说，这个 Web 应用应允许用户从商品列表中监控亚马逊商品的价格。

在使用 Firebase Studio（或 v0）这类方案时，提示工程至关重要。请花时间精心打磨你的提示词。想要高质量结果，你需要一个结构良好的提示。以下是一些最佳实践：

• 只聚焦核心功能。添加的内容越多，代码越可能变得杂乱且难以调试。
• 清晰说明你想使用的技术栈（前端、后端、数据库等）。
• 说明 Bright Data 的集成将稍后再做；目前用一些模拟逻辑即可。
• 使用编号列表拆分主要任务。
• 保持提示详尽但简洁。过长的提示可能让 AI 混乱。

以下是一个可直接使用的优质提示示例：

## Goal
Build a Next.js web app for tracking Amazon product prices.

## Requirements

### 1. Landing Page
- An index page with a clean UI and a form where users can submit an Amazon product URL.

### 2. Data Handling
- When a user submits a URL:
  - Call a mocked API endpoint (representing Bright Data’s Amazon Scraper) to fetch product details:
    - URL
    - Title
    - Price
    - Image
    - ASIN
    - ...
  - Store this product data in Firestore.
  - Add the product to a product dashboard with a card list showing each product. When clicked, each product card should lead to a specific product page.

### 3. Price Tracking
- Create a scheduled job (e.g., once per day) that re-calls the mocked Bright Data API for each saved product.
- Save each new price record in Firestore, using the product ASIN as the ID and appending to its price history.

### 4. Product Page
- On the product page, display a table with:
  - Product info (title, image, URL, etc.)
  - Latest price
  - Price history (as rows in a table, or ideally a simple chart showing price evolution)

---

**Important**:
- Implement the external Bright Data API calls as mock functions returning static JSON. I will later replace these with real API integration.

## Tech Stack
- Next.js with TailwindCSS for styling
- Firestore as the database (with a collection called "products")

## Actions
Scaffold the entire project structure, with pages, Firestore schema, mocked API functions, and the scheduled function for daily price updates.

注意该提示采用 Markdown 格式书写，便于组织并将任务拆分为多个部分。而且，AI 模型通常对 Markdown 理解良好。

以上示例提示遵循了所有最佳实践，有助于 AI 顺利构建目标应用。完美！

步骤三：执行提示并查看早期输出

将提示粘贴到 Firebase Studio 的 “Prototype an app with AI” 文本区域中并按下 Enter。

Firebase Studio 的应用原型代理 会生成包含主要信息的应用蓝图：

可随意自定义与优化蓝图，使其更符合你的需求。

准备好后，下滑并点击 “Prototype this App” 按钮，让 AI 生成应用：

Firebase Studio 将开始为你的 Next.js 项目构建文件。请耐心等待，这可能需要几分钟。

完成后，你会在预览窗口看到运行中的原型：

你会发现应用的 UI 与提示中描述的结构高度一致。这已经是非常有前景的结果！

步骤四：完成 Gemini 集成

在左下角，你会看到一个提示，要求你输入 Gemini API 密钥以完成集成：

从 Google AI Studio 获取 Gemini API 密钥，粘贴到输入框并点击 “Continue”。如果一切顺利，你会看到如下成功提示：

与此同时，Firebase Studio 应会自动加载其开发环境（基于 Visual Studio Code）。否则，点击 “Switch to Code” 进入。你应能看到如下界面：

在右侧，你会看到嵌入到编码环境中的 Gemini 面板，可在构建过程中向其询问上下文建议、新功能、修复与指导。干得漂亮！

步骤五：修复问题

如你在 “Web” 预览标签中看到的（见前面的截图），当前应用存在 2 个问题。这完全正常，AI 生成的代码很少完美，通常需要一些调整与修复。

继续之前，先逐个处理这些问题。利用应用中的 Next.js 可视元素定位破损点并一一修复。毕竟，在破损的应用上继续构建并不明智。

进行服务端调试时，可在 “OUTPUT” 面板查看日志。按 Ctrl + <backtick> 打开 Terminal 分区。然后切换到 “OUTPUT” 标签并选择 “Previews”：

请记住：你也可以直接将错误提示发给 Gemini，请求其协助修复。

当你修复所有问题后，应用应如下所示：

注意左上角的 “Issues” 指示已消失，说明所有 Next.js 问题已解决！

步骤六：配置 Firestore

Firebase Studio 的一大优势是直接运行在 Firebase 环境中，便于与其他 Firebase 产品集成。

在本项目中，你需要设置一个 Firestore 数据库，以便应用能读写数据并跟踪状态。这是必须的，因为我们在提示中指定了 Firestore 作为数据库技术。

提示：若想更简化地集成，你可以让 Gemini 引导你完成整个流程。

先登录 Firebase 并创建一个新项目：

为项目命名并跟随向导完成创建。Firebase 将开始创建项目：

点击 “+ add app” 按钮并选择 Web 应用图标，初始化一个新的Firebase Web 应用：

为 Web 应用命名并按照指引进行。最后你会获得包含 Firebase 配置的连接代码片段：

请将 firebaseConfig 对象中的凭据保存在安全位置，稍后你将用它们将原型应用连接到 Firebase。

接着，在Firebase 控制台的项目页中，在 “Build” 分类下选择 “Firestore Database” 选项：

点击 “Create database” 按钮，并以生产模式初始化标准数据库：

在 Firestore 页面顶部，切换到 “Rules” 标签。添加以下规则以允许读写：

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

然后点击 “Publish” 更新规则：

注意：这些规则会让你的数据库公开，任何人都能读取、修改或删除数据。这对原型而言没问题，但在生产中必须配置更安全、细粒度的规则。

创建一个名为 products 的新集合（与提示中一致）：

继续创建一个新记录，并将 asinc 字段设置为 string 键。测试你的应用能成功写入 Firestore 后，记得删除该示例记录。

现在，在 Google Cloud Console 中，导航到 “Google Cloud Firestore API” 页面。启用该 API：

现在你可以使用 firebaseConfig 对象中的 apiKey 字段连接到 Firestore 数据库。

好了！你已经拥有一个可集成到 Firebase Studio 应用中的 Firestore 数据库。

步骤七：连接 Firestore

回到 Firebase Studio，检查你的项目。在文件结构中，你应能看到一个用于 Firestore 连接的文件。本示例是 src/lib/firebase.ts：

如你所见，该文件期望在Next.js 公共环境变量中定义 Firebase 连接凭据。将以下内容加入 .env 文件（应由 AI 创建；否则自行创建）：

NEXT_PUBLIC_FIREBASE_API_KEY="<YOUR_FIREBASE_API_KEY>"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="<YOUR_FIREBASE_AUTH_DOMAIN>"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="<FIREBASE_PROJECT_ID>"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="<YOUR_FIREBASE_STORAGE_BUCKET>"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="<YOUR_FIREBASE_MESSAGING_SENDER_ID>"
NEXT_PUBLIC_FIREBASE_APP_ID="<YOUR_FIREBASE_APP_ID>"

注意：上述值来自你之前获得的 firebaseConfig 对象。

在 “Web” 标签中执行一次硬重启，以确保所有更改被正确加载。你的 Firebase 应用现在应能连接到 Firestore。

若要检查应用是否在对 products 集合进行正确操作，可浏览代码。你会看到类似如下内容：

可以看到，应用按预期在操作 products 集合。

很好！距离完成原型又近一步。

步骤八：集成 Bright Data

目前，获取亚马逊商品信息与价格的逻辑是模拟的（本例中在 src/lib/mock-api.ts 文件中）：

该文件包含两个在 “Track Price” 和 “Update All Prices” 按钮业务逻辑中调用的底层数据获取函数：

具体而言，mock-api.ts 定义了两个函数：

• fetchProductFromUrl()：模拟根据给定商品 URL 获取亚马逊商品信息。
• getLatestPriceForProduct()：模拟获取给定亚马逊商品的最新价格。

接下来你需要做的是将这些模拟逻辑替换为通过 API 调用 Bright Data 的 Amazon 抓取器 的真实逻辑。

先登录你的 Bright Data 账号，或若尚未注册则创建一个新账号。进入 “Amazon Products – 按 URL 采集” 抓取器的 “API Request Builder” 标签页。选择 “Node (Axios)” 以获取调用 API 获取商品数据的代码片段：

如果你尚不熟悉Bright Data 的 Web 抓取器 API 的工作方式，下面做个简要说明。

你首先使用 /trigger 端点触发一个抓取任务，为指定商品 URL 创建抓取快照。快照启动后，你可定期使用 snapshot/{snapshot_id} 端点检查数据是否就绪。就绪后，调用同一 API 获取抓取到的数据。

这些 Web 抓取器 API 需通过 Bright Data API Key 鉴权以编程方式调用。请按照官方指南获取密钥，然后将其加入 .env 文件：

BRIGHT_DATA_API_KEY="<YOUR_BRIGHT_DATA_API_KEY>"

基本步骤如下：

1. 使用商品 URL 调用 /trigger 端点，基于 Bright Data API 令牌鉴权，启动新的抓取任务。
2. 对 snapshot/{snapshot_id} 进行轮询，定期检查包含抓取数据的快照是否就绪。
3. 快照就绪后，访问亚马逊商品数据。

首先在项目中安装 Axios HTTP 客户端：

npm install axios

接着，将 src/lib/mock-api.ts 的内容替换为以下逻辑：

'use server'

import axios from 'axios';
import type { Product } from './types';

// access your Bright Data API key from the envs
const BRIGHT_DATA_API_KEY = process.env.BRIGHT_DATA_API_KEY;

// create a custom Axios client for connecting to the
// Bright Data Amazon Scraper
const client = axios.create({
  headers: {
    Authorization: `Bearer ${BRIGHT_DATA_API_KEY}`,
    'Content-Type': 'application/json',
  },
});

async function triggerAndPoll(url: string): Promise<Product> {
  // trigger a new snapshot
  const triggerRes = await client.post(
    'https://api.brightdata.com/datasets/v3/trigger',
    [{
      'url': url
    }],
    {
      params: {
        dataset_id: 'gd_l7q7dkf244hwjntr0', // Amazon dataset ID
        include_errors: true, // for debugging
      },
    }
  );

  // get the snapshot ID
  const snapshotId = triggerRes.data?.snapshot_id;

  // attempt up to 600 times to retrieve the snapshot data
  const maxAttempts = 600;
  let attempts = 0;
  while (attempts < maxAttempts) {
    try {
      // check if the data is available
      const snapshotRes = await client.get(
        `https://api.brightdata.com/datasets/v3/snapshot/${snapshotId}`,
        {
          params: { format: 'json' },
        }
      );

      // if the data is not available (the scraping task is not over)
      const status = snapshotRes.data?.status;
      if (['running', 'building'].includes(status)) {
        attempts++;
        // wait for 1 second
        await new Promise((resolve) => setTimeout(resolve, 1000));
        continue;
      }

      // if the data is available
      return snapshotRes.data[0] as Product;
    } catch (err) {
      attempts++;
      // wait for 1 second
      await new Promise((resolve) => setTimeout(resolve, 1000));
    }
  }

  throw new Error(
    `Timeout after ${maxAttempts} seconds waiting for snapshot data`
  );
}

export async function fetchProductFromUrl(url: string): Promise<Product | null> {
  const productData = await triggerAndPoll(url);
  const timestamp = Date.now();
  const initialPrice = productData.final_price;
  if (initialPrice) {
    productData['priceHistory'] = [{ price: initialPrice, timestamp }]
  }

  return productData
}

export async function getLatestPriceForProduct(url: string): Promise<number | null> {
  const productData = await triggerAndPoll(url);

  return productData.final_price || null
}

新的实现使用 Axios 连接 Bright Data，为给定 URL 触发快照、轮询直至数据就绪，并返回商品信息。

triggerAndPoll() 工具函数封装了从 Bright Data 抓取器 API 获取数据的完整流程。fetchProductFromUrl() 返回带初始价格历史的完整商品对象，而 getLatestPriceForProduct() 仅返回 final_price 字段中的当前价格。

如需了解 Amazon 抓取器 API 返回的字段，请在控制台中查看该抓取器的 “Overview” 部分：

将示例 JSON 提供给 Gemini，并让 AI 相应更新 TypeScript 的 Product 类型：

太棒了！无需更多步骤。此时你的应用应已完全可用，并能获取与展示实时商品数据。

步骤九：测试原型应用

你的 CamelCamelCamel 替代品已经就绪。可在本文配套的 GitHub 仓库获取完整代码。克隆命令：

git clone https://github.com/Tonel/price-wise

这只是一个 MVP（最小可行产品），但已经足够探索你的想法，甚至拓展为生产级应用。

为确保代码库的所有更新生效，请执行一次硬重启：

然后点击 “Open in New Window” 图标：

你现在应能在单独的浏览器标签页中访问 Firebase Studio 原型：

在输入框粘贴亚马逊商品 URL 并点击 “Track Price” 按钮，测试该类似 CamelCamelCamel 的 Web 应用：

商品会被添加到 “Tracked Products” 区域，展示的数据与其亚马逊页面一致。

这展示了 Bright Data Web 抓取器 API 的强大能力，只需数秒即可成功获取商品数据。

在 Firestore 数据库中验证该商品数据已被存储：

假设几天后价格出现波动。访问商品详情页查看更新后的价格：

进一步来看，商品详情页包含图表与表格，展示该商品的价格变化：

是不是很棒？

就这样！只需几分钟、几乎不需要多少代码，你就构建了一个 CamelCamelCamel 风格的亚马逊价格追踪 Web 应用。而这一切离不开 Bright Data 的实时网页数据能力与 Firebase Studio 的简化开发环境。

下一步

本文构建的应用只是一个原型。若要达到生产级，请考虑以下步骤：

• 集成认证：使用 Firebase Authentication 快速添加登录系统，让每个用户都能保存并监控自己的商品。
• 添加更多功能：在 Gemini 中继续迭代请求新功能，或下载项目代码并手动集成更多特性。
• 公开你的应用：使用 Firebase Studio 提供的部署选项发布你的应用。

结论

在本文中，你看到了如何借助 Firebase Studio 的 AI 驱动应用构建能力，在几分钟内创建一个 CamelCamelCamel 竞品站点。如果没有可靠、易集成的亚马逊商品与价格数据来源（如 Bright Data 的 Amazon 抓取器），这一切都无法实现。

我们构建的只是将抓取数据与动态 AI 生成 Web 应用相结合的一个示例。类似方法同样适用于无数其他用例。你只需要合适的工具来获取符合你需求的数据！

何止于此？探索我们的Web 抓取器 API，它们为 120 多个热门网站提供专用端点，抽取新鲜、结构化且完全合规的网页数据。

立即注册一个免费的 Bright Data 账号，开始构建可直接用于 AI 的网页数据获取解决方案吧！