Bright Data 기반 Firebase Studio로 아마존 가격 추적 앱 구축하기

이 튜토리얼에서는 다음을 배웁니다:

1. Firebase Studio의 정의 및 제공 기능
2. 카멜카멜카멜(CamelCamelCamel)과 유사한 웹 경험을 구축하기 위해 Bright Data와 같은 Amazon 웹 데이터 공급자가 필요한 이유.
3. Bright Data의 Amazon Scraper API에서 제공하는 Amazon 데이터를 활용하여 Firebase Studio로 Amazon 가격 추적기 웹 앱을 만드는 방법.

시작해 보겠습니다!

Firebase Studio란 무엇인가요?

Firebase Studio는 Google이 구축한 클라우드 기반의 AI 기반 개발 환경입니다. 주요 목표는 AI를 통해 생산 품질의 애플리케이션 생성 및 배포를 가속화하는 것입니다. 특히, Gemini 기반 AI 지원이 전체 개발 라이프사이클에 통합된 포괄적인 작업 공간을 제공합니다.

주요 기능

Firebase Studio에서 제공하는 주요 기능은 다음과 같습니다:

• 클라우드 기반 개발 환경: 코드 제안, 생성, 설명을 포함한 AI 지원이 적용된 완전한 코딩 작업 공간을 제공합니다.
• 앱 프로토타이핑 에이전트: Next.js 웹 앱과 같은 애플리케이션의 신속한 프로토타이핑을 AI 지원으로 가능하게 하여 수동 코딩 작업을 크게 줄여줍니다.
• 다양한 프레임워크 및 언어 지원: Flutter, Go, Angular, Next.js 등 선호하는 프레임워크를 사용하여 인기 기술을 활용할 수 있습니다.
• Firebase 서비스 통합: Firebase App Hosting, Cloud Firestore, Firebase Authentication 등의 서비스와 연동됩니다.
• 개발 및 배포 도구: 앱 성능 에뮬레이션, 테스트, 디버깅 및 모니터링을 위한 내장 지원.
• 가져오기 및 맞춤 설정 옵션: GitHub, GitLab, Bitbucket 또는 압축 아카이브에서 기존 프로젝트를 가져오고 AI로 완전히 맞춤 설정할 수 있습니다.

아마존 가격 추적기 웹 앱 구축에 필요한 것들

CamelCamelCamel은 아마존 상품 가격을 추적하여 가격 변동 기록 차트와 가격 하락 알림을 제공함으로써 사용자가 최적의 거래를 찾을 수 있도록 돕는 온라인 서비스입니다. 간단히 말해 핵심 기능은 아마존 가격 추적이며, 본 가이드에서 집중적으로 다룰 내용입니다.

여기서 아이디어는 아마존 가격 추적을 간소화된 방식으로 구현하는 대체 웹 앱을 구축하는 것입니다. 일반적으로 개발에는 며칠(심지어 몇 달)이 걸리지만, Firebase Studio 덕분에 단 몇 분 만에 작동하는 프로토타입을 구축할 수 있습니다.

이 작업의 주요 난관은 아마존 제품 데이터 확보입니다. CAPTCHA(악명 높은 아마존 CAPTCHA를 기억하시나요?) 같은 강력한 반봇 조치로 인해 아마존 스크래핑은 매우 어렵습니다. 대부분의 자동 요청을 차단할 수 있죠:

바로 여기서 Bright Data가 해결책을 제시합니다!

Bright Data는 거의 모든 웹사이트에서 원시 및 구조화된 형식의 웹 데이터를 획득하기 위한 완벽한 솔루션 세트를 제공합니다. IP 로테이션, 브라우저 지문 인식, CAPTCHA 해결 등 다양한 필수 요소가 자동으로 처리되므로 차단이나 제한에 대해 걱정할 필요가 없습니다.

특히, Bright Data의 Amazon Scraper API가 반환하는 아마존 상품 데이터를 활용할 것입니다. 이를 통해 API 엔드포인트 호출만으로 최신 아마존 상품 데이터를 가져올 수 있습니다.

Firebase Studio와 Bright Data가 어떻게 협력하여 CamelCamelCamel과 유사한 웹 경험을 신속하게 구축하는지 확인해 보세요!

Firebase Studio에서 CamelCamelCamel 같은 아마존 가격 추적기 구축 방법

아마존 가격을 추적하는 CamelCamelCamel과 유사한 웹 앱을 만드는 방법을 알아보려면 아래 단계를 따르세요. Firebase Studio 프로토타입에 Bright Data를 통합하세요!

필수 사항

이 튜토리얼을 따라하려면 다음이 필요합니다:

• Google 계정
• Firebase Studio 계정
• Gemini API 키
• API를 통해 연결할 준비가 된 Firestore 데이터베이스
• API 키가 설정된 Bright Data 계정

참고: 아직 모든 설정을 완료할 필요는 없습니다. 진행 과정에서 단계별로 안내해 드리겠습니다.

또한 다음이 필요합니다:

• TypeScript를 사용한 Next.js 개발에 대한 이해
• Bright Data Scraper API 작동 방식에 대한 이해 (자세한 내용은 Bright Data 문서를 참조하세요)

1단계: Firebase Studio 설정

Firebase Studio 웹사이트로 이동하여 “시작하기” 버튼을 클릭하세요:

Google 계정 중 하나로 로그인하라는 메시지가 표시됩니다. 계정을 선택하고 계속 진행하세요.

로그인 후 앱 빌딩 페이지로 이동합니다:

여기서 프롬프트를 입력하면 AI가 프로젝트를 자동으로 초기화해 줍니다. 좋습니다!

2단계: 프롬프트 구상하기

여기서 목표는 CamelCamelCamel의 대안을 구축하는 것입니다. 간단히 말해, 이 웹 앱은 사용자가 상품 목록의 아마존 제품 가격을 모니터링할 수 있게 해야 합니다.

Firebase Studio(또는 v0) 같은 솔루션을 사용할 때는 프롬프트 엔지니어링이 핵심입니다. 따라서 시간을 들여 가능한 한 최상의 프롬프트를 작성하세요. 고품질 결과를 얻으려면 잘 구조화된 프롬프트가 필요합니다. 다음은 몇 가지 모범 사례입니다:

• 핵심 기능에만 집중하세요. 기능을 추가할수록 복잡하고 디버깅하기 어려운 코드가 될 위험이 커집니다.
• 사용하고자 하는 기술(프론트엔드, 백엔드, 데이터베이스 등)을 명확히 명시하세요.
• Bright Data 통합은 나중에 처리할 것임을 명시하세요. 당장은 모의 로직만으로도 충분합니다.
• 주요 작업을 번호 매긴 목록으로 세분화하세요.
• 프롬프트는 상세하면서도 간결하게 유지하세요. 너무 길어지면 AI가 혼란스러워할 수 있습니다.

사용 가능한 확실한 프롬프트 예시:

## 목표
아마존 제품 가격 추적을 위한 Next.js 웹 앱 구축.

## 요구사항

### 1. 랜딩 페이지
- 깔끔한 UI와 사용자가 아마존 제품 URL을 제출할 수 있는 양식이 있는 인덱스 페이지.

### 2. 데이터 처리
- 사용자가 URL을 제출할 때:  
  - 모의 API 엔드포인트(Bright Data의 아마존 스크레이퍼를 대표)를 호출하여 제품 세부 정보를 가져옵니다:  
    - URL  
    - 제목  
    - 가격  
    - 이미지  
    - ASIN  
    - ...  
  - 이 제품 데이터를 Firestore에 저장합니다.  
  - 각 제품을 표시하는 카드 목록이 있는 제품 대시보드에 제품을 추가합니다. 클릭 시 각 제품 카드는 해당 제품의 상세 페이지로 연결되어야 합니다.

### 3. 가격 추적
- 저장된 각 상품에 대해 모의 Bright Data API를 재호출하는 예약 작업(예: 하루에 한 번) 생성.  
- 상품 ASIN을 ID로 사용하여 Firestore에 새 가격 기록 저장, 해당 상품의 가격 이력에 추가.

### 4. 상품 페이지
- 제품 페이지에 다음 정보를 포함한 테이블 표시:  
  - 제품 정보(제목, 이미지, URL 등)  
  - 최신 가격  
  - 가격 이력(테이블 행 형태 또는 이상적으로는 가격 변동 추이를 보여주는 간단한 차트)

---

**중요**:  
- 외부 Bright Data API 호출은 정적 JSON을 반환하는 모의 함수로 구현합니다. 추후 실제 API 통합으로 교체할 예정입니다.

## 기술 스택
- 스타일링을 위한 Next.js와 TailwindCSS  
- 데이터베이스로 Firestore 사용 (컬렉션명: "products")  

## 작업 항목
전체 프로젝트 구조를 스캐폴딩합니다. 페이지, Firestore 스키마, 모의 API 함수, 일일 가격 업데이트를 위한 스케줄링 함수를 포함합니다.

프롬프트가 마크다운 형식으로 작성된 점을 주목하세요. 이는 작업을 섹션별로 정리하고 분해하기 쉽게 합니다. 또한 AI 모델은 일반적으로 마크다운을 상당히 잘 이해합니다.

위의 프롬프트 예시는 모든 모범 사례를 따르며 AI가 의도한 앱을 성공적으로 구축하는 데 도움이 될 것입니다. 완벽합니다!

3단계: 프롬프트 실행 및 초기 결과 탐색

Firebase Studio의 “AI로 앱 프로토타입 만들기” 텍스트 영역에 프롬프트를 붙여넣고 Enter 키를 누르세요.

Firebase Studio 앱 프로토타이핑 에이전트가 모든 주요 정보를 포함한 앱 설계도를 생성합니다:

필요에 맞게 블루프린트를 자유롭게 맞춤 설정하고 개선하세요.

준비가 되면 아래로 스크롤하여 “이 앱 프로토타입 만들기” 버튼을 클릭하여 AI가 앱을 생성하도록 지시하세요:

Firebase Studio가 Next.js 프로젝트용 파일 생성을 시작합니다. 최대 몇 분까지 소요될 수 있으니 기다려 주세요.

프로세스가 완료되면 미리보기 창에서 실행 중인 프로토타입을 확인할 수 있습니다:

앱 UI가 프롬프트에서 설명한 구조와 얼마나 유사한지 확인하세요. 이미 매우 유망한 결과로 보입니다!

4단계: Gemini 통합 완료

왼쪽 하단 모서리에 Gemini API 키를 입력하여 Gemini 통합을 완료하라는 프롬프트가 표시됩니다:

Google AI Studio에서 Gemini API 키를 가져와 해당 필드에 붙여넣고 “Continue” 버튼을 누르세요. 모든 것이 정상적으로 작동하면 다음과 같은 성공 메시지가 표시됩니다:

한편 Firebase Studio는 개발 환경 (Visual Studio Code 기반) 로딩을 자동으로 완료해야 합니다. 그렇지 않은 경우 “코드로 전환” 버튼을 클릭하여 접근하세요. 다음과 같은 화면이 표시됩니다:

이제 코딩 환경 오른쪽에 Gemini 패널이 표시됩니다. 여기서 코딩 중 Gemini에게 컨텍스트 기반 팁, 신규 기능, 수정 사항 및 가이드를 요청할 수 있습니다. 잘하셨습니다!

5단계: 문제 수정

“웹” 미리보기 탭(이전 스크린샷 참조)에서 확인할 수 있듯이, 현재 애플리케이션에는 2개의 문제가 있습니다. AI가 생성한 코드가 완벽한 경우는 드물고 보통 수정과 수정이 필요하기 때문에 이는 완전히 정상적인 현상입니다.

진행하기 전에 보고된 문제점을 검토하세요. 앱 내 Next.js 시각적 요소를 활용해 고장난 부분을 확인하고 하나씩 수정하세요. 결국 고장난 앱 위에 구축하는 것은 의미가 없습니다.

서버 측 디버깅을 위해 “OUTPUT” 패널의 로그를 확인하세요. Ctrl + `(백틱)`을 눌러 터미널 섹션을 열고, “OUTPUT” 탭으로 전환한 후 “Previews” 요소를 선택하세요:

참고: 발생한 오류 메시지를 직접 입력하여 Gemini에게 문제 해결을 요청할 수도 있습니다.

모든 문제를 해결하면 앱은 다음과 같이 표시됩니다:

좌측 상단의 “Issues” 표시기가 사라진 것을 확인하세요. 이는 모든 Next.js 문제가 해결되었음을 의미합니다!

6단계: Firestore 구성

Firebase Studio의 뛰어난 기능 중 하나는 Firebase 환경에서 직접 실행되어 다른 모든 Firebase 제품과 쉽게 통합된다는 점입니다.

이 프로젝트에서는 앱이 데이터를 읽고 저장하며 상태를 추적할 수 있도록 Firestore 데이터베이스를 설정해야 합니다. 프롬프트에서 Firestore가 데이터베이스 기술로 지정되었기 때문에 이는 필수입니다.

팁: 통합을 간소화하려면 Gemini에게 전체 작업을 안내해 달라고 요청할 수 있습니다.

Firebase에 로그인하여 새 프로젝트를 생성하는 것으로 시작하세요:

프로젝트 이름을 지정하고 프로젝트 생성 마법사를 따르세요. Firebase가 프로젝트 생성을 시작합니다:

“+ 앱 추가” 버튼을 누르고 웹 앱 아이콘을 선택하여 새로운 Firebase 웹 앱을 초기화하세요:

웹 앱에 이름을 지정하고 안내를 따릅니다. 마지막에 Firebase 구성 정보가 포함된 연결 스니펫을 받게 됩니다:

이 firebaseConfig 객체의 자격 증명을 안전한 곳에 저장하세요. 프로토타입 앱을 Firebase에 연결할 때 필요합니다.

다음으로 Firebase 콘솔의 프로젝트 페이지에서 “빌드” 섹션 아래 “Firestore 데이터베이스” 옵션을 선택하세요:

“데이터베이스 생성” 버튼을 클릭하고 프로덕션 모드에서 표준 데이터베이스를 초기화하세요:

Firestore 페이지 상단의 “규칙” 탭으로 이동합니다. 읽기 및 쓰기를 허용하는 다음 규칙을 추가하세요:

rules_version = '2';

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

그런 다음 “게시”를 클릭하여 규칙을 업데이트하세요:

참고: 이 규칙은 데이터베이스를 공개적으로 노출하므로 누구나 데이터를 읽거나 수정 또는 삭제할 수 있습니다. 프로토타입에는 적합하지만, 실제 운영 환경에서는 보다 안전하고 세분화된 규칙을 구성해야 합니다.

제품 ( 제품 )이라는 새 컬렉션을 생성합니다(프롬프트에 지정된 것과 동일한 이름):

새 항목을 생성하고 asinc 필드를 문자열 키로 설정하세요. 애플리케이션이 Firestore에 성공적으로 쓰기 가능한지 테스트한 후, 이 샘플 항목을 삭제하는 것을 잊지 마세요.

이제 Google Cloud Console에서 “Google Cloud Firestore API”페이지로 이동합니다. 여기서 API를 활성화하세요:

이제 firebaseConfig 객체에 제공된 apiKey 필드를 Firestore 데이터베이스 연결에 사용할 수 있습니다.

자, 이제 준비되었습니다! Firebase Studio 앱에 통합할 Firestore 데이터베이스가 준비되었습니다.

7단계: Firestore 연결

Firebase Studio로 돌아가 프로젝트를 살펴보세요. 파일 구조 어딘가에 Firestore 연결용 파일이 있을 것입니다. 이 경우 src/lib/firebase.ts 파일입니다:

보시다시피, 이 파일은 Firebase 연결 자격 증명이 Next.js의 공용 환경 변수에 정의되기를 기대합니다. .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 객체에서 가져온 것입니다.

“웹” 탭에서 모든 변경 사항이 제대로 재로드되도록 강제 재시작을 수행하세요. 이제 Firebase 애플리케이션이 Firestore에 연결할 수 있어야 합니다.

애플리케이션이 products 컬렉션에서 올바르게 작동하는지 확인하려면 코드를 살펴보세요. 다음과 같은 내용을 볼 수 있습니다:

애플리케이션이 의도한 대로 products 컬렉션에서 작동하는 것을 확인할 수 있습니다.

멋지네요! 프로토타입 완성까지 한 걸음 더 가까워졌습니다.

8단계: Bright Data 통합

현재 아마존 제품 정보 및 가격 조회 로직은 모의 처리되어 있습니다(이 경우 src/lib/mock-api.ts 파일 내):

이 파일에는 “가격 추적” 및 “모든 가격 업데이트” 버튼의 비즈니스 로직에서 호출되는 두 가지 주요 저수준 데이터 검색 함수가 포함되어 있습니다:

구체적으로 mock-api.ts는 두 함수를 정의합니다:

• fetchProductFromUrl(): 주어진 제품 URL에서 아마존 제품 정보를 가져오는 것을 모킹합니다.
• getLatestPriceForProduct(): 지정된 아마존 상품의 최신 가격을 가져오는 모의 구현입니다.

다음으로 해야 할 일은 이 모의 로직을 Bright Data의 Amazon Scraper API를 통한 실제 호출로 대체하는 것입니다.

Bright Data 계정에 로그인하거나 아직 계정이 없다면 새로 생성하세요. “Amazon Products – Collect by URL”스크레이퍼의 “API Request Builder” 탭으로 이동합니다. “Node (Axios)” 옵션을 선택하면 제품 데이터를 가져오기 위한 API 호출 방법을 보여주는 코드 스니펫을 확인할 수 있습니다:

Bright Data의 웹 스크레이퍼 API 작동 방식이 익숙하지 않다면 간단히 설명드리겠습니다.

먼저 /trigger 엔드포인트를 사용하여 스크래핑 작업을 트리거하면 지정된 제품 URL에 대한 스크래핑 스냅샷이 생성됩니다. 스냅샷이 시작되면 snapshot/{snapshot_id} 엔드포인트를 사용하여 주기적으로 상태를 확인하여 스크래핑된 데이터가 준비되었는지 확인합니다. 준비되면 동일한 API를 호출하여 스크래핑된 데이터를 가져옵니다.

이 웹 스크레이퍼 API는 Bright Data API 키로 인증하여 프로그래밍 방식으로 호출할 수 있습니다. 공식 가이드를 따라 키를 획득한 후, 다음과 같이 .env 파일에 추가하세요:

BRIGHT_DATA_API_KEY="<YOUR_BRIGHT_DATA_API_KEY>"

기본적으로 수행해야 할 작업은 다음과 같습니다:

1. Bright Data API 토큰으로 인증하여 제품 URL과 함께 /trigger 엔드포인트를 호출하여 새 스크래핑 작업을 시작합니다.
2. 스크래핑된 데이터가 포함된 스냅샷이 준비되었는지 주기적으로 확인하기 위해 snapshot/{snapshot_id} 에서 폴링 프로세스를 시작합니다.
3. 스냅샷이 준비되면 Amazon 제품 데이터에 접근합니다.

시작하려면 프로젝트에 Axios HTTP 클라이언트를 설치하세요:

npm install axios

다음으로 src/lib/mock-api. ts의 내용을 다음 로직으로 교체하세요:

'use server'

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

// 환경 변수에서 Bright Data API 키 가져오기
const BRIGHT_DATA_API_KEY = process.env.BRIGHT_DATA_API_KEY;

// Bright Data Amazon 스크래퍼에 연결할 커스텀 Axios 클라이언트 생성
// Bright Data Amazon Scraper용 커스텀 Axios 클라이언트 생성
const client = axios.create({
  headers: {
    Authorization: `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 데이터셋 ID
        include_errors: true, // 디버깅용
      },
    }
  );

  // 스냅샷 ID 가져오기
  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)) {
        attempts++;
        // 1초 대기
        await new Promise((resolve) => setTimeout(resolve, 1000));
        continue;
      }

      // 데이터가 사용 가능한 경우
      return snapshotRes.data[0] as Product;
    } catch (err) {
      attempts++;
      // 1초 대기
      await new Promise((resolve) => setTimeout(resolve, 1000));
    }
  }

  throw new Error(
    `스냅샷 데이터 대기 중 ${maxAttempts} 초 후 타임아웃 발생`
  );
}

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 Scraper API로부터의 전체 데이터 검색 로직을 처리합니다. fetchProductFromUrl() 은 초기 가격 이력이 포함된 전체 제품 객체를 반환하는 반면, getLatestPriceForProduct() 는 final_price 필드에서 읽은 현재 가격만 반환합니다.

Bright Data Amazon Scraper API가 반환하는 필드를 확인하려면 대시보드의 “개요” 섹션을 살펴보세요:

샘플 JSON을 Gemini에 입력하고 AI에게 TypeScript Product 타입을 이에 맞게 업데이트하도록 요청하세요:

훌륭합니다! 추가 단계는 필요하지 않습니다. 이 시점에서 애플리케이션은 완전히 작동하며 테스트 준비가 완료되었으며, 실시간 제품 데이터를 가져와 표시할 수 있습니다.

9단계: 프로토타입 앱 테스트

이제 CamelCamelCamel 대안 앱이 완성되었습니다. 본문을 지원하는 GitHub 저장소에서 전체 코드를 확인하실 수 있습니다. 다음 명령어로 저장소를 복제하세요:

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

이것은 단순한 MVP(최소 실행 가능 제품)에 불과하지만, 아이디어를 탐색하고 생산 환경에 적합한 애플리케이션으로 확장하기에 충분한 기능을 갖추고 있습니다.

코드베이스의 모든 업데이트가 적용되도록 하드 재시작을 수행하세요:

그런 다음 “새 창에서 열기” 아이콘을 클릭하세요:

이제 전용 브라우저 탭에서 Firebase Studio 프로토타입에 접근할 수 있습니다:

아마존 상품 URL을 붙여넣고 “가격 추적” 버튼을 눌러 CamelCamelCamel 스타일 웹 앱을 테스트해 보세요:

해당 상품이 “추적 중인 상품” 섹션에 추가되며, 아마존 페이지에 표시되는 데이터와 정확히 동일하게 표시됩니다.

이는 Bright Data 웹 스크레이퍼 API의 강력한 성능을 보여줍니다. 해당 API는 단 몇 초 만에 제품 데이터를 성공적으로 가져왔습니다.

제품 데이터가 Firestore 데이터베이스에 저장되었는지 확인하세요:

이제 며칠이 지나 가격이 변동했다고 가정합니다. 제품 페이지를 방문하여 업데이트된 가격을 확인하세요:

더 자세히 살펴보면, 제품 페이지에 해당 상품의 가격 변동 추이를 보여주는 차트와 표가 함께 포함되어 있음을 확인할 수 있습니다:

인상적이지 않나요?

자, 이제 완성되었습니다! 단 몇 분 만에 최소한의 코드로 아마존 제품 가격 추적을 위한 CamelCamelCamel 스타일 웹 앱을 구축했습니다. Bright Data의 실시간 웹 데이터 기능과 Firebase Studio의 간소화된 개발 환경 없이는 불가능했을 것입니다.

다음 단계

여기서 구축한 애플리케이션은 단순한 프로토타입입니다. 실제 운영 환경에 적용하려면 다음 단계를 고려하세요:

• 인증 통합: Firebase Authentication을 사용하여 로그인 시스템을 신속하게 추가하여 각 사용자가 자신의 제품을 저장하고 모니터링할 수 있도록 합니다.
• 추가 기능 구현: Gemini에서 새 기능을 요청하여 계속 개선하거나, 프로젝트 코드를 다운로드하여 수동으로 추가 기능을 통합하세요.
• 앱 공개: Firebase Studio에서 제공하는 배포 옵션 중 하나를 사용하여 애플리케이션을공개하세요.

결론

이 블로그 글에서는 Firebase Studio의 AI 기반 앱 구축 기능으로 단 몇 분 만에 CamelCamelCamel 경쟁 사이트를 만드는 방법을 살펴보았습니다. Bright Data의 Amazon Scraper와 같이 신뢰할 수 있고 통합이 쉬운 Amazon 제품 및 가격 데이터 소스가 없었다면 불가능했을 것입니다.

여기서 구축한 것은 스크래핑된 데이터와 동적인 AI 생성 웹 앱을 결합할 때 가능한 것의 한 예에 불과합니다. 유사한 접근 방식이 수많은 다른 사용 사례에도 적용될 수 있음을 기억하세요. 필요한 것은 요구 사항에 맞는 데이터에 접근할 수 있는 적절한 도구뿐입니다!

여기서 멈출 필요가 있을까요? 120개 이상의 인기 웹사이트에서 최신, 구조화되고 완전히 규정을 준수하는 웹 데이터를 추출하기 위한 전용 엔드포인트를 제공하는 당사의 웹 스크레이퍼 API를 살펴보세요.

지금 바로 Bright Data 무료 계정에 가입하고 AI 활용이 가능한 웹 데이터 수집 솔루션으로 개발을 시작하세요!