Приложение для отслеживания цен на Amazon с Firebase Studio и Bright Data

В этом уроке вы узнаете:

Что такое Firebase Studio и какие возможности она предоставляет.
Почему вам нужен поставщик веб-данных Amazon, например Bright Data, чтобы создать веб-приложение, подобное CamelCamelCamel.
Как создать веб-приложение для отслеживания цен Amazon с помощью Firebase Studio, используя данные Amazon из API Amazon Скрапер от Bright Data.

Давайте погрузимся!

Что такое Firebase Studio?

Firebase Studio – это облачная среда разработки на базе ИИ, созданная компанией Google. Ее основная цель – ускорить создание и развертывание приложений производственного качества с использованием ИИ. В частности, она предоставляет комплексное рабочее пространство, в котором помощь ИИ на базе Gemini-технологий интегрирована на протяжении всего жизненного цикла разработки.

Ключевые функции

Среди основных возможностей Firebase Studio можно выделить следующие:

Облачная среда разработки: Предоставляет вам полноценное рабочее пространство для кодирования с помощью ИИ, включая предложения, генерацию и объяснения кода.
Агент для создания прототипов приложений: Поддерживает быстрое создание прототипов приложений, таких как веб-приложения Next.js, с поддержкой ИИ, сокращая необходимость в обширном ручном кодировании.
Поддержка различных фреймворков и языков: Работайте с такими популярными технологиями, как Flutter, Go, Angular, Next.js и другими, используя предпочитаемые ими фреймворки.
Интеграция с сервисами Firebase: Интеграция с такими сервисами, как Firebase App Hosting, Cloud Firestore и Firebase Authentication.
Инструменты для разработки и развертывания: Встроенная поддержка эмуляции, тестирования, отладки и мониторинга производительности приложений.
Импорт и возможности настройки: Импортируйте существующие проекты из GitHub, GitLab, Bitbucket или сжатых архивов и полностью настраивайте их с помощью ИИ.

Что нужно для создания веб-приложения Amazon Price Tracker

CamelCamelCamel – это онлайн-сервис, который отслеживает цены на товары Amazon, предоставляя графики истории цен и оповещения о падении цен, чтобы помочь пользователям найти лучшие предложения. Проще говоря, его основной функцией является отслеживание цен на Amazon, и именно на этом мы сосредоточимся в данном руководстве.

Идея заключается в том, чтобы создать веб-приложение, которое будет работать как альтернатива, реализуя отслеживание цен Amazon в упрощенном виде. Обычно на разработку такого приложения уходят дни (или даже месяцы), но благодаря Firebase Studio вы можете получить рабочий прототип всего за несколько минут.

Основной проблемой в этой задаче является получение данных о товарах Amazon. Скрапинг Amazon, как известно, затруднен из-за строгих мер защиты от ботов, таких как CAPTCHA (вспомните печально известную CAPTCHA Amazon), которые могут блокировать большинство автоматических запросов:

Именно здесь на помощь приходит Bright Data!

Bright Data предлагает полный набор решений для получения веб-данных в сыром и структурированном форматах практически с любого веб-сайта. Ротация IP-адресов, отпечатки пальцев браузера, решение CAPTCHA и многие другие важные аспекты выполняются автоматически, поэтому вам не придется беспокоиться о блокировках или ограничениях.

В частности, мы будем использовать данные о товарах Amazon, возвращаемые с помощью API Amazon Скрапер компании Bright Data. Это позволяет вам получать свежие данные о товарах Amazon, просто вызывая конечную точку API.

Посмотрите, как Firebase Studio и Bright Data работают вместе, чтобы быстро создать веб-опыт, похожий на CamelCamelCamel!

Как создать трекер цен Amazon, подобный CamelCamelCamel, в Firebase Studio

Выполните следующие шаги, чтобы узнать, как создать веб-приложение, похожее на CamelCamelCamel, которое отслеживает цены на Amazon. Интегрируйте Bright Data в свой прототип Firebase Studio!

Необходимые условия

Чтобы следовать этому руководству, убедитесь, что у вас есть:

аккаунт Google
Аккаунт Firebase Studio
Ключ API Gemini
База данных Firestore, настроенная и готовая к подключению через API
Аккаунт Bright Data с настроенным ключом API

Примечание: Не беспокойтесь пока о настройке всего, так как вы будете проходить все шаги по ходу дела.

Вам также понадобятся:

Знания о разработке Next.js на TypeScript
Знания о том, как работает API Bright Data Скрапер (подробнее см. документацию Bright Data ).

Шаг № 1: Настройка Firebase Studio

Перейдите на сайт Firebase Studio и нажмите кнопку “Get Started”:

Clicking on "Get started" on Firebase Studio

Вам будет предложено войти в систему с помощью одного из ваших аккаунтов Google. Выберите один из них и продолжите.

После входа в систему вы попадете на страницу создания приложения:

The Firebase Studio prompt-based app building page

Здесь вы можете ввести запрос, чтобы попросить ИИ инициализировать проект за вас. Отлично!

Шаг № 2: Придумайте подсказку

Помните, что ваша цель – создать альтернативу CamelCamelCamel. Проще говоря, это веб-приложение должно позволить пользователям отслеживать цены на товары Amazon по списку товаров.

При работе с таким решением, как Firebase Studio(или v0), ключевую роль играет разработка подсказок. Поэтому потратьте время на создание наилучшей подсказки. Чтобы получить качественные результаты, вам понадобится хорошо структурированная подсказка. Ниже приведены некоторые лучшие практики:

Сосредоточьтесь только на основных функциях. Чем больше вы добавляете, тем выше риск получить беспорядочный, трудноотлаживаемый код.
Четко укажите, какие технологии вы хотите использовать (фронтенд, бэкенд, база данных и т. д.).
Упомяните, что интеграцией Bright Data вы займетесь позже. Пока же достаточно лишь имитированной логики.
Используйте нумерованный список, чтобы разбить основные задачи.
Сохраняйте подробную, но лаконичную формулировку. Если она будет слишком длинной, ИИ может запутаться.

Вот пример надежной подсказки, которую можно использовать:

## Цель
Создать веб-приложение Next.js для отслеживания цен на товары Amazon.

## Требования

### 1. Посадочная страница
- Индексная страница с чистым пользовательским интерфейсом и формой, в которой пользователи могут отправить URL-адрес продукта Amazon.

### 2. Обработка данных
- Когда пользователь отправляет URL-адрес:  
  - Вызываем имитированную конечную точку API (представляющую Скрапер Amazon от Bright Data) для получения информации о продукте:  
    - URL  
    - Название  
    - Цена  
    - Изображение  
    - ASIN  
    - ...  
  - Храните данные об этом продукте в Firestore.  
  - Добавьте продукт на панель управления товарами со списком карточек, показывающих каждый продукт. При нажатии каждая карточка товара должна вести на страницу конкретного товара.

### 3. Отслеживание цен
- Создайте задание по расписанию (например, раз в день), которое будет повторно вызывать имитированный API Bright Data для каждого сохраненного продукта.  
- Сохраняйте каждую новую запись о цене в Firestore, используя ASIN продукта в качестве идентификатора и добавляя ее в историю цен.

### 4. Страница продукта
- На странице товара отобразите таблицу с:  
  - Информация о продукте (название, изображение, URL и т.д.)  
  - Последняя цена  
  - История цен (в виде строк таблицы или, в идеале, простой диаграммы, показывающей динамику цен)

---

**Важно**:  
- Реализуйте внешние вызовы Bright Data API как имитационные функции, возвращающие статический JSON. Позже я заменю их на реальную интеграцию с API.

## Технический стек
- Next.js с TailwindCSS для стилизации  
- Firestore в качестве базы данных (с коллекцией под названием "products")  

## Действия
Покажите всю структуру проекта: страницы, схему Firestore, имитированные функции API и функцию ежедневного обновления цен по расписанию.

Обратите внимание, что подсказка написана в формате Markdown, что облегчает организацию и разбивку задачи на разделы. Кроме того, модели ИИ обычно хорошо понимают Markdown.

Приведенный пример подсказки соответствует всем лучшим практикам и поможет ИИ успешно создать нужное приложение. Отлично!

Шаг № 3: Выполните подсказку и изучите ранние результаты

Вставьте ваш запрос в текстовую область “Прототипирование приложения с помощью ИИ” в Firebase Studio и нажмите Enter.

Агент прототипирования приложений Firebase Studio сгенерирует чертеж приложения, содержащий всю основную информацию:

Не стесняйтесь настраивать и уточнять чертеж, чтобы он лучше соответствовал вашим потребностям.

Когда вы будете готовы, прокрутите страницу вниз и нажмите кнопку “Prototype this App”, чтобы дать команду ИИ создать приложение:

Pressing the “Prototype this App” button

Firebase Studio начнет создавать файлы для вашего проекта Next.js. Будьте терпеливы, так как это может занять до нескольких минут.

Когда процесс завершится, вы увидите работающий прототип в окне предварительного просмотра:

Обратите внимание, что пользовательский интерфейс приложения полностью соответствует структуре, которую вы описали в подсказке. Это уже очень многообещающий результат!

Шаг № 4: Завершение интеграции с Gemini

В левом нижнем углу вы увидите приглашение завершить интеграцию с Gemini, введя свой API-ключ Gemini:

Entering your Gemini API key and pressing “Continue"

Получите свой ключ API Gemini из Google ИИ Studio, вставьте его в поле и нажмите кнопку “Продолжить”. Если все работает правильно, вы должны получить сообщение об успехе, как показано здесь:

Тем временем Firebase Studio должна автоматически завершить загрузку своей среды разработки (основанной на Visual Studio Code). В противном случае перейдите к ней, нажав кнопку “Switch to Code”. Вы должны увидеть следующее:

С правой стороны вы увидите панель Gemini, которая находится внутри вашей среды разработки. Отсюда вы можете обращаться к Gemini за контекстными советами, новыми функциями, исправлениями и рекомендациями в процессе создания. Отлично!

Шаг № 5: Исправьте проблемы

Как вы можете видеть на вкладке предварительного просмотра “Web” (показано на предыдущих скриншотах), текущее приложение имеет 2 проблемы. Это совершенно нормально, поскольку сгенерированный ИИ код редко бывает идеальным и обычно требует доработок и исправлений.

Прежде чем двигаться дальше, пройдитесь по заявленным проблемам. Используйте визуальные элементы Next.js в приложении, чтобы определить, что сломалось, и исправляйте их по очереди. В конце концов, строить поверх неработающего приложения не имеет особого смысла.

Для отладки на стороне сервера проверьте журналы в панели “OUTPUT”. Нажмите Ctrl + <backtick>, чтобы открыть раздел “Терминал”. Там переключитесь на вкладку “OUTPUT” и выберите элемент “Previews”:

Помните: вы также можете попросить Gemini о помощи в устранении этих проблем, напрямую сообщая ему о возникающих ошибках.

Когда вы устраните все проблемы, ваше приложение должно выглядеть следующим образом:

Обратите внимание, что индикатор “Проблемы” в левом верхнем углу исчез, а это значит, что все проблемы Next.js были решены!

Шаг № 6: Настройка Firestore

Одной из замечательных особенностей Firebase Studio является то, что она работает непосредственно в среде Firebase, что позволяет легко интегрировать ее со всеми остальными продуктами Firebase.

В этом проекте вам нужно настроить базу данных Firestore, чтобы ваше приложение могло читать и хранить данные, отслеживая их состояние. Это необходимо, так как в подсказке в качестве технологии базы данных был указан Firestore.

Совет: Для упрощения интеграции вы можете попросить Gemini провести вас через всю задачу.

Начните с входа в Firebase и создания нового проекта:

Дайте проекту имя и следуйте указаниям мастера создания проекта. Firebase начнет создавать ваш проект:

Нажмите кнопку “+ добавить приложение” и выберите значок веб-приложения, чтобы инициализировать новое веб-приложение Firebase:

Дайте вашему веб-приложению имя и следуйте инструкциям. В конце вы получите фрагмент соединения с конфигурацией Firebase:

Сохраните эти учетные данные из объекта firebaseConfig в надежном месте, так как они понадобятся вам для подключения вашего прототипа приложения к Firebase.

Далее, на странице проекта в Firebase Console в разделе “Build” выберите опцию “Firestore Database”:

Selecting the “Firestore Database” option

Нажмите кнопку “Создать базу данных” и инициализируйте стандартную базу данных в режиме производства:

В верхней части страницы Firestore перейдите на вкладку “Правила”. Добавьте следующие правила, чтобы разрешить чтение и запись:

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      разрешить чтение, запись: если true;
    }
  }
}

Затем нажмите “Опубликовать”, чтобы обновить правила:

Примечание: Эти правила делают вашу базу данных общедоступной, поэтому любой может читать, изменять или удалять данные. Это подходит для прототипа, но в производстве необходимо настраивать более безопасные и подробные правила.

Создайте новую коллекцию под названием products (то же имя, что указано в подсказке):

Создайте новую запись и установите поле asinc в качестве строкового ключа. После проверки того, что ваше приложение может успешно записывать данные в Firestore, не забудьте удалить этот пример записи.

Теперь в консоли Google Cloud Console перейдите на страницу “Google Cloud Firestore API“. Здесь включите свой API:

Поле apiKey, указанное в объекте firebaseConfig, теперь можно использовать для подключения к базе данных Firestore.

Вот и все! Теперь у вас есть база данных Firestore, готовая к интеграции в ваше приложение Firebase Studio.

Шаг №7: Подключение к Firestore

Вернувшись в Firebase Studio, проверьте свой проект. Где-то в файловой структуре вы должны увидеть файл для подключения к Firestore. В данном случае это src/lib/firebase.ts:

Как вы можете заметить, этот файл ожидает, что учетные данные для подключения к Firebase будут определены в публичных переменных окружения Next.js. Добавьте их в файл .env (который должен быть создан ИИ; в противном случае создайте его самостоятельно):

NEXT_PUBLIC_FIREBASE_API_KEY="<ВАШ_FIREBASE_API_KEY>"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="<ВАШ_FIREBASE_AUTH_DOMAIN>"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="<FIREBASE_PROJECT_ID>"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="<ВАШ_FIREBASE_STORAGE_BUCKET>"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="<ВАШ_FIREBASE_MESSAGING_SENDER_ID>"
NEXT_PUBLIC_FIREBASE_APP_ID="<ВАШ_FIREBASE_APP_ID>"

Примечание: Эти значения получены из объекта firebaseConfig, который вы получили ранее.

На вкладке “Web” выполните жесткий перезапуск, чтобы убедиться, что все изменения были правильно перезагружены. Теперь ваше приложение Firebase должно иметь возможность подключаться к Firestore.

Если вы хотите проверить, что приложение корректно работает с коллекцией продуктов, изучите код. Вы должны увидеть что-то вроде этого:

Note that the collection name is ‘products’

Обратите внимание, что приложение работает с коллекцией продуктов, как и предполагалось.

Круто! Еще один шаг к завершению работы над прототипом.

Шаг № 8: Интеграция ярких данных

В настоящее время логика получения информации о товарах и ценах Amazon смоделирована (в данном случае в файле src/lib/mock-api.ts ):

Этот файл содержит две основные низкоуровневые функции получения данных, которые вызываются в бизнес-логике кнопок “Отследить цену” и “Обновить все цены”:

The “Track Price” and Update All Prices” buttons

В частности, mock-api.ts определяет две функции:

fetchProductFromUrl(): Имитирует получение информации о продукте Amazon из заданного URL-адреса продукта.
getLatestPriceForProduct(): Имитирует получение последней цены для данного продукта Amazon.

Далее вам нужно заменить эту имитационную логику реальными вызовами скрапера Amazon от Bright Data через API.

Начните с входа в свою учетную запись Bright Data или создайте новую, если вы еще этого не сделали. Перейдите на вкладку “Конструктор API-запросов” для скрапера “Amazon Products – Collect by URL“. Выберите опцию “Node (Axios)”, чтобы получить фрагмент кода, показывающий, как вызвать API для получения данных о товарах:

The “API Request Builder” section for the required scraper

Если вы не знаете, как работают API веб-скраперов Bright Data, давайте вкратце объясним.

Вы начинаете с запуска задачи скрапинга с помощью конечной точки /trigger, которая создает снимок скрапинга для указанного URL продукта. После запуска моментального снимка вы периодически проверяете его статус с помощью конечной точки snapshot/{snapshot_id}, чтобы узнать, готовы ли собранные данные. Когда они готовы, вы вызываете тот же API, чтобы получить отсканированные данные.

Эти API для веб-скраперов можно вызывать программно, пройдя аутентификацию с помощью ключа API Bright Data. Для получения ключа следуйте официальному руководству, а затем добавьте его в файл .env следующим образом:

BRIGHT_DATA_API_KEY="<ВАШ_BRIGHT_DATA_API_KEY>".

По сути, вам нужно сделать следующее:

Вызвать конечную точку /trigger с URL-адресом продукта, чтобы начать новую задачу скрапинга, аутентифицировавшись с помощью API-токена Bright Data.
Запустить процесс опроса на snapshot/{snapshot_id}, чтобы периодически проверять, готов ли snapshot, содержащий отсканированные данные.
Как только снимок будет готов, получите доступ к данным о товарах Amazon.

Для начала установите HTTP-клиент Axios в свой проект с помощью:

npm install axios

Затем замените содержимое src/lib/mock-api.ts следующей логикой:

'use server'

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

// доступ к ключу API Bright Data из envs 
const BRIGHT_DATA_API_KEY = process.env.BRIGHT_DATA_API_KEY;

// создаем пользовательский клиент Axios для подключения к
// Скрапер Bright Data Amazon
const client = axios.create({
  headers: {
    Авторизация: `Bearer ${BRIGHT_DATA_API_KEY}`,
    'Content-Type': 'application/json',
  },
});

async function triggerAndPoll(url: string): Promise<Product> {
  // запускаем новый снимок
  const triggerRes = await client.post(
    'https://api.brightdata.com/datasets/v3/trigger',
    [{
      'url': url
    }],
    {
      params: {
        dataset_id: 'gd_l7q7dkf244hwjntr0', // идентификатор набора данных Amazon
        include_errors: true, // для отладки
      },
    }
  );

  // получаем идентификатор моментального снимка
  const snapshotId = triggerRes.data?.snapshot_id;

  // пытаемся получить данные моментального снимка до 600 раз
  const maxAttempts = 600;
  let attempts = 0;
  while (attempts < maxAttempts) {
    try {
      // проверяем, доступны ли данные
      const snapshotRes = await client.get(
        `https://api.brightdata.com/datasets/v3/snapshot/${snapshotId}`,
        {
          params: { format: 'json' }
        }
      );

      // если данные недоступны (задача скрапинга не завершена)
      const status = snapshotRes.data?.status;
      if (['running', 'building'].includes(status)) {
        попытки++;
        // ожидание 1 секунда
        await new Promise((resolve) => setTimeout(resolve, 1000));
        продолжаем;
      }

      // если данные доступны
      return snapshotRes.data[0] as Product;
    } catch (err) {
      попытки++;
      // ожидание в течение 1 секунды
      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'] = [{ { цена: 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() обрабатывает всю логику получения данных из API Bright Data Скрапер. fetchProductFromUrl() возвращает полный объект продукта с начальной историей цен, а getLatestPriceForProduct() возвращает только текущую цену, считанную из поля final_price.

Чтобы понять, какие поля возвращает API Bright Data Amazon Скрапер, изучите раздел “Обзор” на вашей панели управления:

The “Overview” section for the selected Bright Data Web Scraper API

Отправьте пример JSON в Gemini и попросите ИИ соответствующим образом обновить тип продукта TypeScript:

Отлично! Больше никаких действий не требуется. На этом этапе ваше приложение должно быть полностью функциональным и готовым к тестированию, с получением и отображением данных о продукте в реальном времени.

Шаг № 9: Тестирование прототипа приложения

Теперь ваша альтернатива CamelCamelCamel готова. Вы можете найти полный код в репозитории GitHub, поддерживающем эту статью. Клонируйте его с помощью:

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

Это не более чем MVP(Minimal Viable Product), но он достаточно функционален, чтобы исследовать ваши идеи и даже расширить их до готового к производству приложения.

Чтобы убедиться, что все обновления в вашей кодовой базе применены, выполните жесткий перезапуск:

Затем нажмите на значок “Открыть в новом окне”:

Теперь у вас должен быть доступ к прототипу Firebase Studio в выделенной вкладке браузера:

Your Firebase Studio prototype on a dedicated browser tab

Протестируйте веб-приложение CamelCamelCamel-подобное веб-приложение, вставив URL-адрес товара Amazon и нажав кнопку “Отследить цену”:

Your web application in action at Amazon product info retrieval

Товар будет добавлен в раздел “Отслеживаемые товары”, отображая данные точно так же, как они отображаются на его странице Amazon.

Это демонстрирует возможности API Bright Data Web Скрапер, который успешно извлек данные о товаре за считанные секунды.

Убедитесь, что данные о товарах были сохранены в базе данных Firestore:

Note the new entry in your Firestore database

Теперь предположим, что прошло несколько дней и цена изменилась. Зайдите на страницу товара и посмотрите обновленную цену:

Обратите внимание, что на странице товара есть и график, и таблица, показывающие динамику изменения цены на этот товар:

Впечатляет, не правда ли?

И вуаля! Всего за несколько минут и с небольшим количеством кода вы создали веб-приложение в стиле CamelCamelCamel для отслеживания цен на товары Amazon. Все это было бы невозможно без возможностей Bright Data по работе с веб-данными в режиме реального времени и упрощенной среды разработки Firebase Studio.

Следующие шаги

Созданное здесь приложение – всего лишь прототип. Чтобы сделать его готовым к производству, продумайте следующие шаги:

Интегрируйте аутентификацию: Используйте Firebase Authentication, чтобы быстро добавить систему входа в систему, чтобы каждый пользователь мог сохранять и отслеживать свои собственные продукты.
Добавьте больше функций: Продолжайте итерации в Gemini, запрашивая новые функции, или загрузите код проекта и вручную интегрируйте дополнительную функциональность.
Сделайте свое приложение публичным: Опубликуйте свое приложение, используя один из вариантов развертывания, предлагаемых Firebase Studio.

Заключение

В этой статье вы увидели, как возможности Firebase Studio по созданию приложений на основе ИИ могут помочь вам создать сайт-конкурент CamelCamelCamel за считанные минуты. Это было бы невозможно без надежного, легко интегрируемого источника данных о товарах и ценах Amazon, такого как Скрапер Amazon от Bright Data.

То, что мы создали здесь, – лишь один из примеров того, что возможно, если объединить собранные данные с динамическим веб-приложением, созданным ИИ. Помните, что аналогичный подход можно применить и к бесчисленному множеству других сценариев использования. Все, что вам нужно, – это правильные инструменты для доступа к данным, которые соответствуют вашим потребностям!

Почему стоит остановиться на этом? Ознакомьтесь с нашими API для веб-скраперов, которые предоставляют специальные конечные точки для извлечения свежих, структурированных и полностью соответствующих требованиям веб-данных с более чем 120 популярных веб-сайтов.

Зарегистрируйте бесплатную учетную запись Bright Data сегодня и начните строить с помощью решений для извлечения веб-данных, готовых к ИИ!

Свяжитесь с нами Пробная версия