ساخت یک برنامه معاملاتی بلادرنگ با Firebase SQL Connect (وب)

۱. قبل از شروع

در این آزمایشگاه کد، شما Firebase SQL Connect را با یک پایگاه داده Cloud SQL ادغام خواهید کرد تا Friendly Exchange ، یک برنامه وب بازار سهام ایموجی بلادرنگ، را بسازید.

برنامه تکمیل‌شده، ویژگی‌های پیشرفته SQL Connect را به نمایش می‌گذارد، از جمله:

  • SQL بومی: اجرای دستورات پیچیده زبان دستکاری داده‌ها (DML) و عبارات جدول مشترک (CTE) به صورت ایمن با استفاده از _execute و _select .
  • نمایش‌های SQL: اشیاء GraphQL دقیق و ایمن از نظر نوع را با پشتیبانی از پرس‌وجوهای پویای Postgres با استفاده از دستورالعمل @view ایجاد کنید.
  • اشتراک‌های بلادرنگ: رابط کاربری فرانت‌اند خود را با استفاده از تریگرهای @refresh همگام‌سازی کنید.
  • تراکنش‌های اتمی: چندین عملیات را زنجیره‌ای کرده و وضعیت را با استفاده از @transaction و @check اعتبارسنجی کنید.
  • (اختیاری) جستجوی مکانی و برداری: از PostGIS و pgvector برای یافتن دارایی‌های پرطرفدار نزدیک مختصات کاربر و انجام جستجوهای معنایی استفاده کنید.
  • (اختیاری) حل‌کننده‌های سفارشی: منطق Cloud Run سفارشی را به طرح GraphQL خود متصل کنید تا سرفصل‌های تجاری هوش مصنوعی تولید شود.

پیش‌نیازها

شما به درک کاملی از جاوا اسکریپت/تایپ اسکریپت ، ری‌اکت و سینتکس پایه SQL نیاز دارید.

آنچه یاد خواهید گرفت

  • چگونه از SQL بومی برای پر کردن شکاف بین GraphQL اعلانی و منطق خام PostgreSQL استفاده کنیم.
  • چگونه افزونه‌های Postgres مانند PostGIS را مستقیماً در کوئری‌های پایگاه داده خود ادغام کنید.
  • چگونه منطق پیچیده را با استفاده از بلوک‌های اتمی @transaction اجرا کنیم.
  • چگونه @views ایمن از نوع داده برای جدول امتیازات و آمار ایجاد کنیم.
  • نحوه تنظیم اشتراک‌های بلادرنگ با استفاده از @refresh

آنچه نیاز دارید

  • گیت
  • ویژوال استودیو کد
  • نصب Node.js
  • یک پروژه فایربیس روی طرح قیمت‌گذاری Blaze که به صورت پرداخت در محل (pay-as-you-go) است (برای Custom Resolvers و Vertex AI مورد نیاز است).

۲. محیط توسعه خود را تنظیم کنید

این مرحله شما را در راه‌اندازی رابط کاربری و پیکربندی نمونه Cloud SQL برای ویژگی‌های پیشرفته راهنمایی می‌کند.

  1. مخزن پروژه را کلون کنید و وابستگی‌های مورد نیاز برنامه را نصب کنید:
git clone https://github.com/firebaseextended/codelab-dataconnect-web
cd codelab-dataconnect-web
git switch emoji-init
npm install
  1. پوشه‌ی کلون‌شده را با استفاده از Visual Studio Code باز کنید و افزونه‌ی Firebase SQL Connect Visual Studio را نصب کنید.
  2. در ترمینال خود، مطمئن شوید که Firebase CLI شما کاملاً به‌روز است (این برای ویژگی‌های جدیدی مانند @refresh و Native SQL ضروری است):
npm uninstall -g firebase-tools
npm install -g firebase-tools
firebase login
firebase use your-project-id
firebase init

(گزینه‌های Hosting، Authentication و SQL Connect را انتخاب کنید).

ایجاد SDK های SQL Connect: دستور زیر را اجرا کنید:

firebase dataconnect:sdk:generate
  1. برنامه وب خود را به پروژه Firebase خود متصل کنید: برنامه وب خود را با استفاده از کنسول Firebase در پروژه Firebase خود ثبت کنید:
    1. پروژه خود را باز کنید و سپس روی افزودن برنامه (Add App) کلیک کنید (آیکون وب را انتخاب کنید).
    2. فعلاً تنظیمات و پیکربندی SDK را نادیده بگیرید، اما حتماً شیء firebaseConfig تولید شده را کپی کنید .
    3. lib/firebase.tsx را در ویرایشگر کد خود باز کنید و مکان‌نمای موجود را با پیکربندی که کپی کرده‌اید جایگزین کنید:
const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID"
};
  1. سرور توسعه را اجرا کنید:
npm run dev

۳. کدبیس اولیه را بررسی کنید

در این بخش، بخش‌های کلیدی کد اولیه برنامه را بررسی خواهید کرد. در حالی که طرحواره و کوئری‌ها را از ابتدا می‌نویسید، درک نحوه تعامل رابط کاربری با SQL Connect مفید خواهد بود.

ساختار پوشه و فایل

دایرکتوری dataconnect dataconnect/

این پوشه شامل تعریف backend شما است - همه چیز از ساختار پایگاه داده شما گرفته تا کوئری‌های SQL خاصی که برنامه شما مجاز به اجرای آنها است.

  • schema/schema.gql : جایی که جداول پایه Postgres خود را با استفاده از انواع استاندارد GraphQL تعریف خواهید کرد.
  • schema/views.gql : جایی که شما نماهای SQL پیچیده و فقط خواندنی (مانند تابلوهای امتیازات) را با استفاده از دستورالعمل @view تعریف خواهید کرد.
  • friendly-exchange/queries.gql & mutations.gql : "اتصال‌دهنده‌های" شما. اینجا جایی است که شما کوئری‌ها و Native SQL ( _execute , _select ) مجاز توسط برنامه خود را تعریف می‌کنید.
  • dataconnect.yaml : فایل پیکربندی که تنظیمات تولید SDK و استقرار Cloud SQL را تعیین می‌کند.

دایرکتوری lib lib/

شامل منطق برنامه، احراز هویت و تعامل با Firebase SQL Connect SDK است.

  • firebase.tsx : مقداردهی اولیه برنامه Firebase، Auth و نمونه SQL Connect شما را مدیریت می‌کند.
  • ExchangeService.tsx : این فایل، پلی بین کامپوننت‌های React شما و پایگاه داده است. این فایل، توابع SDK تولید شده (مانند buyStock یا sellStock ) را در توابع استاندارد async قرار می‌دهد تا بتواند دریافت خطا، منطق تجاری و اعلان‌های toast را مدیریت کند.

SDK تولید شده

وقتی یک کوئری یا جهش در SQL Connect می‌نویسید، افزونه VS Code به طور خودکار یک SDK با نوع داده قوی (strongly-typed SDK) تولید می‌کند. در این پروژه، frontend این توابع را مستقیماً از @dataconnect/generated وارد می‌کند.

۴. برای تبادل ایموجی خود یک طرحواره تعریف کنید

در این بخش، ساختار و روابط بین موجودیت‌های کلیدی در برنامه معاملاتی را تعریف خواهید کرد. موجودیت‌هایی مانند User ، Emoji ، StockOwnership ، Event و PriceHistory به جداول پایگاه داده نگاشت می‌شوند و روابط آنها با استفاده از دستورالعمل‌های طرحواره Firebase SQL Connect و GraphQL برقرار می‌شود.

زمانی که این طرحواره (schema) پیاده‌سازی شود، برنامه شما آماده خواهد بود تا همه چیز را از اجرای تراکنش‌های خرید/فروش و به‌روزرسانی جدول امتیازات جهانی گرفته تا نقشه‌برداری از روندهای مکانی محلی، مدیریت کند.

موجودیت‌های اصلی و روابط

  • ایموجی: جزئیات کلیدی مانند نماد، نام، قیمت و روند را در خود جای داده است که برنامه برای نمایش بازار از آنها استفاده می‌کند.
  • کاربر: مشخصات معامله‌گر، امتیازهای موجود (ارز) و مختصات جغرافیایی را برای اسکن رادار محلی ردیابی می‌کند.
  • روابط: جدول عضویت StockOwnership دقیقاً تعداد سهام یک کاربر خاص از یک ایموجی خاص را ردیابی می‌کند. انواع Event و PriceHistory به عنوان دفتر کل تغییرناپذیر عمل می‌کنند و تأثیرات بازار و نقاط قیمتی تاریخی را در طول زمان ثبت می‌کنند.

تنظیم جدول کاربر

نوع User ، یک معامله‌گر را در سیستم تعریف می‌کند و موجودی، نقش و موقعیت فیزیکی او را برای درخواست‌های مکانی پیگیری می‌کند.

قطعه کد زیر را کپی کرده و در فایل dataconnect/schema/schema.gql خود قرار دهید:

# Users
# user-stockOwnership is a one-to-many relationship, user-events is a one-to-many relationship
# Utilizes the Firebase Auth uid expression as the primary key
type User @table {
  id: String! @default(expr: "auth.uid")
  username: String!
  profileImage: String
  role: String! @default(value: "USER")
  points: Float! @default(value: 100.0)
  city: String @default(value: "Las Vegas")
  latitude: Float @default(value: 36.1699)
  longitude: Float @default(value: -115.1398)
}

نکات کلیدی:

  • id : با استفاده از @default(expr: "auth.uid") ‎ مستقیماً به احراز هویت Firebase متصل می‌شود. این تضمین می‌کند که هویت پایگاه داده و هویت Auth به طور ایمن ۱:۱ هستند و از جعل شناسه‌ها توسط کاربران جلوگیری می‌کند.
  • points : واحد پول مجازی مورد استفاده برای معامله، که برای کاربران جدید به طور پیش‌فرض 100.0 است.

میز ایموجی‌ها را تنظیم کنید

نوع Emoji دارایی اصلی مورد معامله، از جمله فیلدهای جستجوی متن استاندارد را تعریف می‌کند.

این قطعه کد را کپی کرده و در فایل dataconnect/schema/schema.gql خود قرار دهید:

# Emojis
# emoji-stockOwnership is a one-to-many relationship, emoji-priceHistory is a one-to-many relationship
# Implements @searchable directives for full-text search
type Emoji @table {
  id: UUID! @default(expr: "uuidV4()")
  symbol: String!
  name: String! @searchable
  tags: [String!]
  description: String! @searchable
  currentPrice: Float! @default(value: 10.0)
  trend: Float! @default(value: 0.0)
}

نکات کلیدی:

  • name و description : از دستورالعمل @searchable برای بهینه‌سازی این ستون‌ها برای جستجوی استاندارد متن کامل استفاده می‌کند.

جدول StockOwnship را تنظیم کنید

نوع StockOwnership یک جدول پیوند است که روابط چند به چند بین کاربران و ایموجی‌هایی که دارند را مدیریت می‌کند. این قطعه کد را کپی کرده و در فایل dataconnect/schema/schema.gql خود قرار دهید:

# Join table for many-to-many relationship between users and emojis
# The 'key' param signifies the primary key(s) of this table
# In this case, the keys are [user, emoji], the generated fields of the reference types
type StockOwnership @table(key: ["user", "emoji"]) {
  user: User!
  emoji: Emoji!
  shares: Int! @default(value: 0)
}

نکات کلیدی:

  • key: ["user", "emoji"] : یک کلید اصلی مرکب ایجاد می‌کند. یک کاربر نمی‌تواند دو رکورد جداگانه برای یک ایموجی داشته باشد؛ این امر منحصر به فرد بودن هر جفت را اعمال می‌کند.
  • ارجاعات ضمنی: با ارجاع مستقیم به نوع‌های User و Emoji ، SQL Connect به‌طور خودکار کلیدهای خارجی userId: String! و emojiId: UUID! را در پشت صحنه تولید می‌کند.

جداول Event و PriceHistory را تنظیم کنید

این نوع‌ها نشان‌دهنده دفتر کل برنامه هستند و دقیقاً اتفاقات و نحوه تغییر قیمت‌ها را ثبت می‌کنند. قطعه کدهای نهایی را در فایل dataconnect/schema/schema.gql خود کپی و جایگذاری کنید:

# Events
# Event-User is a many-to-one relationship, Event-Emoji is a many-to-one relationship
# Evaluates the createdAt timestamp purely on the server side using the request.time expression
type Event @table {
  id: UUID! @default(expr: "uuidV4()")
  user: User!
  emoji: Emoji!
  impact: Float!
  description: String!
  createdAt: Timestamp! @default(expr: "request.time")
}

# Price History
# PriceHistory-Emoji is a many-to-one relationship
type PriceHistory @table {
  id: UUID! @default(expr: "uuidV4()")
  emoji: Emoji!
  price: Float!
  recordedAt: Timestamp! @default(expr: "request.time")
}

نکات کلیدی:

  • createdAt و recordedAt : به طور خودکار با استفاده از @default(expr: "request.time") ‎ روی زمان دقیق وقوع تراکنش پایگاه داده تنظیم می‌شوند. این کار از دستکاری مهرهای زمانی توسط کلاینت‌ها جلوگیری می‌کند.

فیلدهای تولید شده خودکار و پیش‌فرض‌ها

این طرحواره برای تولید خودکار شناسه‌های منحصر به فرد و اعمال مالکیت بدون نیاز به ارائه آنها توسط برنامه کلاینت، به عباراتی مانند @default(expr: "uuidV4()") و @default(expr: "auth.uid") متکی است.

۵. بازیابی داده‌های بازار و کاربر

در این بخش، داده‌های بازار آزمایشی را در پایگاه داده خود وارد می‌کنید، سپس کانکتورها (پرس‌وجوها) و کد TypeScript را برای فراخوانی این کانکتورها در سراسر برنامه وب پیاده‌سازی می‌کنید. در پایان، برنامه شما قادر خواهد بود بازار ایموجی‌های زنده، پروفایل‌های کاربر و جدول امتیازات را مستقیماً از پایگاه داده به صورت پویا دریافت و نمایش دهد.

داده‌های بازار و کاربر آزمایشی را وارد کنید

  1. در VSCode، dataconnect/seed.gql را باز کنید.
  2. مطمئن شوید که شبیه‌سازها در افزونه‌ی Firebase SQL Connect در حال اجرا هستند (یا نمونه‌ی Cloud SQL شما متصل است).
  3. باید دکمه‌ی «اجرا (محلی)» یا «اجرا (تولید)» CodeLens را در بالای فایل ببینید. برای وارد کردن داده‌های ایموجی ساختگی و تاریخچه‌ی قیمت‌های اولیه در پایگاه داده‌ی خود، روی این دکمه کلیک کنید.
  4. برای تأیید اینکه داده‌ها با موفقیت اضافه شده‌اند، ترمینال SQL Connect Execution را بررسی کنید.

پیاده‌سازی کوئری‌های پایه

ابتدا، بیایید از جداول استانداردی که در طرحواره خود تعریف کرده‌اید، پرس‌وجو کنیم.

  1. dataconnect/friendly-exchange/queries.gql را باز کنید .
  2. برای بازیابی داده‌های داشبورد، پروفایل‌های کاربران و تاریخچه‌های قیمت پایه، کوئری‌های زیر را اضافه کنید :
# Get dashboard data including top emojis by price and recent market events
query GetDashboardData
@auth(
  level: PUBLIC
  insecureReason: "This operation is safe to expose to the public."
) {
  emojis(orderBy: [{ currentPrice: DESC }]) {
    id
    symbol
    name
    description
    currentPrice
    trend
  }
  events(orderBy: [{ createdAt: DESC }], limit: 15) {
    id
    description
    impact
    createdAt
    user {
      username
      profileImage
    }
    emoji {
      symbol
    }
  }
}

# Get current authenticated user profile and their stock ownership using auth.uid
query GetUserProfile @auth(level: USER) {
  user(id_expr: "auth.uid") {
    points
    username
    profileImage
    role
    stockOwnerships_on_user {
      shares
      emoji {
        id
        symbol
        currentPrice
        name
      }
    }
    city
    latitude
    longitude
  }
}

# Get price history for a specific emoji ordered by time
query GetPriceHistory($emojiId: UUID!, $limit: Int)
@auth(
  level: PUBLIC
  insecureReason: "This operation is safe to expose to the public."
) {
  priceHistories(
    where: { emojiId: { eq: $emojiId } }
    orderBy: [{ recordedAt: ASC }]
    limit: $limit
  ) {
    price
    recordedAt
  }
}

نکات کلیدی:

  • emojis() / events() : فیلدهای کوئری GraphQL که به طور خودکار برای دریافت داده‌ها به طور مستقیم از جداول شما تولید می‌شوند.
  • id_expr: "auth.uid" : با واکشی پروفایل کاربری که با توکن کاربر فعلی احراز هویت شده Firebase مطابقت دارد، دسترسی را ایمن می‌کند.
  • _on_ : امکان دسترسی مستقیم به فیلدها از یک نوع مرتبط که رابطه کلید خارجی دارد را فراهم می‌کند. stockOwnerships_on_user کل نمونه کارهای کاربر را در یک پرس و جو واکشی می‌کند.
  • insecureReason : هنگام افشای عملیات به PUBLIC الزامی است. این دلیل را که چرا افشای این داده‌ها بدون احراز هویت ایمن است، به صراحت مستند می‌کند.

ایجاد نماهای SQL از نوع ایمن

قبل از نوشتن SQL سفارشی، درک روش‌های مختلف مدیریت کوئری‌ها توسط Firebase SQL Connect مهم است:

  • GraphQL استاندارد: بهترین گزینه برای CRUD اولیه و روابط ساده با ایمنی نوع دقیق سرتاسری.
  • SQL Views ( @view ): بهترین گزینه برای SQL پیچیده و فقط خواندنی (مانند جدول امتیازات با استفاده از توابع پنجره‌ای) است که در آن همچنان می‌خواهید یک شیء GraphQL دقیق و ایمن از نظر نوع به کلاینت بازگردانده شود.
  • SQL بومی ( _execute / _select ): بهترین گزینه برای اجرای مستقیم DML، CTE یا افزونه‌های PostGIS. شما با حداکثر انعطاف‌پذیری در زمان اجرا، از تایپ دقیق زمان کامپایل صرف‌نظر می‌کنید (JSON پویا برمی‌گرداند).

برای ساخت جدول امتیازات و نمودارهای جرقه‌ای، باید میانگین‌های متحرک را محاسبه کرده و کاربران را رتبه‌بندی کنیم. این یک مورد استفاده از @view است.

  1. dataconnect/schema/views.gql را باز کنید .
  2. برای محاسبه آمار لازم روی سرور، view های زیر را اضافه کنید :
# Rank users on a leaderboard based on their total net worth
type TopTrader
@view(
  sql: """
  SELECT
    u.id,
    u.username,
    u.profile_image,
    (u.points + COALESCE(SUM(so.shares * e.current_price), 0)) AS net_worth,
    RANK() OVER (ORDER BY (u.points + COALESCE(SUM(so.shares * e.current_price), 0)) DESC) AS rank
  FROM "user" u
  LEFT JOIN stock_ownership so ON u.id = so.user_id
  LEFT JOIN emoji e ON so.emoji_id = e.id
  WHERE u.id != 'system_market_maker'
  GROUP BY u.id, u.username, u.profile_image, u.points
  """
) {
  id: String
  username: String
  profileImage: String
  netWorth: Float
  rank: Int
}

# Identify the top shareholder (whale) for each emoji and their total ownership percentage
type EmojiWhaleStat
  @view(
    sql: """
    WITH total_shares AS (
      SELECT emoji_id, SUM(shares) AS total_supply
      FROM stock_ownership WHERE shares > 0 GROUP BY emoji_id
    ),
    ranked_holders AS (
      SELECT
        so.emoji_id, u.username AS whale_username, u.profile_image AS whale_profile_image,
        so.shares AS whale_shares, ts.total_supply,
        ROUND((so.shares::DECIMAL / NULLIF(ts.total_supply, 0)) * 100, 2) AS whale_percentage,
        RANK() OVER (PARTITION BY so.emoji_id ORDER BY so.shares DESC) AS holder_rank
      FROM stock_ownership so
      JOIN "user" u ON u.id = so.user_id
      JOIN total_shares ts ON ts.emoji_id = so.emoji_id
      WHERE so.shares > 0
    )
    SELECT emoji_id, whale_username, whale_profile_image, whale_shares, total_supply, whale_percentage
    FROM ranked_holders WHERE holder_rank = 1
    """
  ) {
  emojiId: UUID
  whaleUsername: String
  whaleProfileImage: String
  whaleShares: Int
  totalSupply: Int
  whalePercentage: Float
}

# Calculate the moving average of historical prices for each emoji
type EmojiHistoryStat
  @view(
    sql: """
    SELECT
      emoji_id, price, recorded_at,
      AVG(price) OVER (PARTITION BY emoji_id ORDER BY recorded_at ROWS BETWEEN 4 PRECEDING AND CURRENT ROW) as moving_average
    FROM price_history
    """
  ) {
  emojiId: UUID
  price: Float
  recordedAt: Timestamp
  movingAverage: Float
}

# Combine recent price updates and major news events into a single chronological feed
type TickerFeed
  @view(
    sql: """
    WITH latest_prices AS (
      SELECT emoji_id, MAX(recorded_at) as last_trade_time
      FROM price_history GROUP BY emoji_id
    )
    SELECT
      'PRICE' as type, e.symbol, e.name, e.current_price, e.trend,
      '' as description, lp.last_trade_time as event_time
    FROM emoji e JOIN latest_prices lp ON e.id = lp.emoji_id
    UNION ALL
    SELECT
      'NEWS' as type, e.symbol, '' as name, 0 as current_price, 0 as trend,
      ev.description, ev.created_at as event_time
    FROM event ev JOIN emoji e ON ev.emoji_id = e.id
    """
  ) {
  type: String
  symbol: String
  name: String
  currentPrice: Float
  trend: Float
  description: String
  eventTime: Timestamp
}

# Retrieve the 15 most recent price points for each emoji to render sparkline charts
type EmojiSparkline
  @view(
    sql: """
    WITH RankedPrices AS (
      SELECT
        emoji_id, price, recorded_at,
        ROW_NUMBER() OVER(PARTITION BY emoji_id ORDER BY recorded_at DESC) as rn
      FROM price_history
    )
    SELECT emoji_id, price, recorded_at
    FROM RankedPrices WHERE rn <= 15 ORDER BY recorded_at ASC
    """
  ) {
  emojiId: UUID
  price: Float
  recordedAt: Timestamp
}

اکنون، dataconnect/friendly-exchange/queries.gql را باز کنید و TODO ها را برای دریافت داده‌ها از نماهای جدید خود جایگزین کنید:

# Get emoji whale statistics to identify top shareholders from emojiWhaleStats view
query GetEmojiWhaleStats
@auth(
  level: PUBLIC
  insecureReason: "This operation is safe to expose to the public."
) {
  emojiWhaleStats {
    emojiId
    whaleUsername
    whaleProfileImage
    whaleShares
    totalSupply
    whalePercentage
  }
}

# Get historical price and moving average stats for a specific emoji from emojiHistoryStats view
query GetEmojiHistoryStats($emojiId: UUID!)
@auth(
  level: PUBLIC
  insecureReason: "This operation is safe to expose to the public."
) {
  emojiHistoryStats(
    where: { emojiId: { eq: $emojiId } }
    orderBy: [{ recordedAt: ASC }]
    limit: 50
  ) {
    price
    movingAverage
    recordedAt
  }
}

# List top traders ordered by rank from topTraders view
query GetTopTraders
@auth(
  level: PUBLIC
  insecureReason: "This operation is safe to expose to the public."
) {
  topTraders(orderBy: [{ rank: ASC }]) {
    id
    username
    profileImage
    netWorth
    rank
  }
}

# Get chronological market ticker feed of recent events from tickerFeeds view
query GetChronologicalTicker
@auth(
  level: PUBLIC
  insecureReason: "This operation is safe to expose to the public."
) {
  tickerFeeds(orderBy: [{ eventTime: DESC }], limit: 30) {
    type
    symbol
    name
    currentPrice
    trend
    description
    eventTime
  }
}

# Get simple price points for rendering emoji sparkline charts from emojiSparklines view
query GetEmojiSparklines
@auth(
  level: PUBLIC
  insecureReason: "This operation is safe to expose to the public."
) {
  emojiSparklines {
    emojiId
    price
    recordedAt
  }
}

نکات کلیدی

  • @view : منطق پیچیده پایگاه داده را در سرور کپسوله‌سازی می‌کند و در عین حال کد سمت کلاینت شما را کاملاً تایپ‌شده نگه می‌دارد. SQL Connect فیلدهای GraphQL را در نوع @view شما به ستون‌هایی که توسط دستور SELECT شما برگردانده می‌شوند، نگاشت می‌کند.
  • فقط خواندنی: نماها کلید اصلی ندارند و نمی‌توان آنها را مستقیماً تغییر داد.
  • تولید پرس‌وجو: توجه کنید که چگونه topTraders() و emojiSparklines() دقیقاً مانند پرس‌وجو از یک جدول استاندارد عمل می‌کنند.

پیاده‌سازی کوئری‌های جستجو

SQL Connect به طور خودکار برای هر فیلدی که با دستور @searchable در طرح شما مشخص شده باشد، کوئری‌های جستجوی استاندارد تولید می‌کند.

برای فعال کردن جستجوی متن کامل، کوئری زیر را به dataconnect/friendly-exchange/queries.gql اضافه کنید :

# Search emojis using full-text search query
query SearchEmojis($query: String)
@auth(
  level: PUBLIC
  insecureReason: "This operation is safe to expose to the public."
) {
  emojis_search(query: $query) {
    id
    symbol
    name
    description
    currentPrice
    trend
  }
}

نکات کلیدی

  • emojis_search : یک فیلد پرس‌وجوی خودکار ایجاد شده به این دلیل که شما @searchable برای فیلدهای name و description در طرحواره Emoji اعمال کرده‌اید.

تولید SDK

از آنجا که کوئری‌ها و ویوهای جدیدی را در فایل‌های GraphQL خود تعریف کرده‌اید، باید مولد SDK را اجرا کنید تا رابط کاربری TypeScript شما بتواند با خیال راحت از آنها استفاده کند.

ترمینال خود را باز کنید و اجرا کنید:

firebase dataconnect:sdk:generate

ادغام کوئری‌ها در برنامه وب

کامپایلر Firebase SQL Connect بر اساس فایل‌های .gql شما، SDK تولید می‌کند. از آنجا که این برنامه به صورت بلادرنگ طراحی شده است، شما از متد subscribe در کنار ارجاعات کوئری تولید شده در چندین کامپوننت استفاده خواهید کرد.

بلوک‌های خالی useEffect را در فایل‌های زیر با منطق زیر جایگزین کنید:

۱. صفحه اصلی (

app/page.tsx

)

import { subscribe } from "@firebase/data-connect";
import {
  getDashboardDataRef,
  searchEmojisRef,
  getChronologicalTickerRef,
  getUserProfileRef,
} from "@dataconnect/generated";

// Inside the Home component:
  useEffect(() => {
    // Subscribe to realtime updates for the main market dashboard data including top emojis and recent events
    const unsubscribe = subscribe(
      getDashboardDataRef(),
      (res) => {
        if (res.data) setDashboardData(res.data);
        setIsDashboardLoading(false);
      },
      (err) => {
        console.error("Dashboard Realtime Error:", err);
        setIsDashboardLoading(false);
      },
    );
    return () => unsubscribe();
  }, [user]);

  useEffect(() => {
    // Subscribe to a realtime chronological ticker feed combining recent price updates and major news events
    const unsubscribe = subscribe(
      getChronologicalTickerRef(),
      (res) => {
        if (res.data) setTickerData(res.data);
      },
      (err) => console.error("Ticker Realtime Error:", err),
    );
    return () => unsubscribe();
  }, []);

  useEffect(() => {
    if (loading || !user) return;
    // Subscribe to realtime updates for the authenticated user's profile and stock ownership
    const unsubscribe = subscribe(
      getUserProfileRef(),
      (res) => {
        if (res.data) setProfileData(res.data);
      },
      (err) => console.error("Profile Error:", err),
    );
    return () => unsubscribe();
  }, [user, loading]);

  useEffect(() => {
    if (!debouncedSearch) {
      setSearchData(null);
      return;
    }
    
    // Subscribe to realtime full-text search results for emojis based on user input
    const unsubscribe = subscribe(
      searchEmojisRef({ query: debouncedSearch }),
      (res) => {
        if (res.data) setSearchData(res.data.emojis_search);
        setIsSearchLoading(false);
      },
      (err) => {
        console.error("Text Search Error:", err);
        setIsSearchLoading(false);
      },
    );

    return () => unsubscribe();
  }, [debouncedSearch]);

۲. اجزای پروفایل کاربر

app/profile/page.tsx

، هوک‌ها را تاریخ‌گذاری کنید:

import { subscribe } from "@firebase/data-connect";
import { getUserProfileRef } from "@dataconnect/generated";

useEffect(() => {
  // Subscribe to realtime updates for the authenticated user's profile and stock ownership
  const unsubscribe = subscribe(
    getUserProfileRef(),
    (res) => {
      if (res.data) {
        setData(res.data);
      }
      setIsLoading(false);
    },
    (err) => {
      console.error("Profile Realtime Error:", err);
      setIsLoading(false);
    },
  );
  return () => unsubscribe();
}, []);

components/NavBar.tsx

:

 useEffect(() => {
    // Subscribe to realtime updates for the authenticated user's profile and stock ownership
    const unsub = subscribe(
      getUserProfileRef(),
      (res) => {
        if (res.data) setData(res.data);
      },
      (err) => console.error("Navbar Balance Realtime Error:", err),
    );
    return () => unsub();
  }, []);

برای components/FloatingMenu.tsx ، شیء const { data } دستی را نیز با هوک تولید شده جایگزین کنید:

const { data, refetch: refetchDashboard } = useGetDashboardData();

 useEffect(() => {
    if (!user) return;
    // Subscribe to realtime updates for the authenticated user's profile
    const unsub = subscribe(getUserProfileRef(), (res) => {
      if (res.data) {
        setProfileData(res.data);
        setOptimisticRole(null);
      }
    });
    return () => unsub();
  }, [user]);

نکات کلیدی

  • getUserProfileRef / getDashboardDataRef : توابع خودکار تولید شده که کوئری‌های GraphQL را برای اجرا آماده می‌کنند و انواع دقیق تعریف شده توسط جداول و نماهای شما را حفظ می‌کنند.
  • subscribe : یک متد SQL Connect SDK که به کوئری گوش می‌دهد. در حال حاضر، این متد به سادگی داده‌ها را هنگام نصب کامپوننت دریافت می‌کند، اما در مرحله بعدی، backend را ارتقا خواهیم داد تا هر زمان که پایگاه داده تغییر کند، این تابع به طور خودکار فعال شود!
  1. پنل بازار ( components/MarketPanel.tsx ): به طور مشابه، در کامپوننت MarketPanel ( components/MarketPanel.tsx )، می‌توانید TODO ها را جایگزین کنید تا چندین کوئری را به طور همزمان برای ساخت نوار کناری فراخوانی کنید.
import { subscribe } from "@firebase/data-connect";
import { getDashboardDataRef, getEmojiSparklinesRef } from "@dataconnect/generated";

// Inside the MarketPanel component:
  useEffect(() => {
    // Subscribe to realtime updates for the main market dashboard data including top emojis and recent events
    const unsub = subscribe(
      getDashboardDataRef(),
      (res) => {
        if (res.data) setData(res.data);
      },
      (err) => console.error("Market Panel Realtime Error:", err)
    );
    return () => unsub();
  }, []);

  useEffect(() => {
    // Subscribe to realtime price history updates to render emoji sparkline charts
    const unsub = subscribe(
      getEmojiSparklinesRef(),
      (res) => {
        if (res.data?.emojiSparklines) {
          setSparklineRawData(res.data.emojiSparklines);
        }
      },
      (err) => console.error("Global Sparklines Error:", err)
    );
    return () => unsub();
  }, []);


  1. صفحه جدول امتیازات ( app/leaderboard/page.tsx )
import { subscribe } from "@firebase/data-connect";
import { getTopTradersRef } from "@dataconnect/generated";

// Inside the Leaderboard component:
  useEffect(() => {
    // Subscribe to realtime updates for the global leaderboard ranking top traders by net worth
    const unsubscribe = subscribe(
      getTopTradersRef(),
      (res) => {
        if (res.data) setData(res.data);
        setIsLoading(false);
      },
      (err) => {
        console.error("Leaderboard Realtime Error:", err);
        setIsLoading(false);
      },
    );
    return () => unsubscribe();
  }, []);

  1. ایموجی مودال ( components/EmojiModal.tsx )
import { subscribe } from "@firebase/data-connect";
import {
  getEmojiHistoryStatsRef,
  getEmojiWhaleStatsRef,
} from "@dataconnect/generated";

// Inside the EmojiModal component:
  useEffect(() => {
    if (!emoji?.id) return;

    setStatsLoading(true);
    // Subscribe to realtime historical price and moving average statistics for the selected emoji
    const unsub = subscribe(
      getEmojiHistoryStatsRef({ emojiId: emoji.id }),
      (res) => {
        if (res.data) setStatsData(res.data);
        setStatsLoading(false);
      },
      (err) => {
        console.error("History Realtime Error:", err);
        setStatsLoading(false);
      },
    );
    return () => unsub();
  }, [emoji?.id]);

  useEffect(() => {
    // Subscribe to realtime whale statistics to identify the top shareholder for the selected emoji
    const unsub = subscribe(
      getEmojiWhaleStatsRef(),
      (res) => {
        if (res.data) setWhaleData(res.data);
      },
      (err) => console.error("Whale Realtime Error:", err),
    );
    return () => unsub();
  }, []);

آن را در عمل ببینید

برای مشاهده‌ی کوئری‌ها در عمل، برنامه‌ی وب خود را مجدداً بارگذاری کنید. صفحه‌ی اصلی و نوار کناری اکنون فهرستی از ایموجی‌ها را نمایش می‌دهند و داده‌ها را مستقیماً از پایگاه داده‌ی PostgreSQL شما دریافت می‌کنند.

۶. به‌روزرسانی‌های کاربر و تراکنش‌های بازار را مدیریت کنید

در این بخش، شما قابلیت ورود کاربر را با استفاده از احراز هویت Firebase برای درج پروفایل‌های کاربر (مانند نام نمایشی و موقعیت مکانی فیزیکی آنها) در Firebase SQL Connect پیاده‌سازی خواهید کرد. همچنین از دستورالعمل‌های @transaction و @check در SQL Connect برای اجرای ایمن یک رویداد بازار چند مرحله‌ای و اتمی استفاده خواهید کرد.

پیاده‌سازی رابط‌های کاربر و مکان

dataconnect/friendly-exchange/mutations.gql را باز کنید. TODO ها را با اضافه کردن mutation های زیر برای مدیریت ایجاد، به‌روزرسانی و مکان‌یابی کاربران جایگزین کنید:

# Upserts a user record using the Firebase Auth uid expression as the primary key
# Upsert (update or insert) a user's profile information
mutation UpsertUser($username: String!, $profileImage: String!)
@auth(level: USER) {
  user_upsert(
    data: {
      id_expr: "auth.uid"
      username: $username
      profileImage: $profileImage
    }
  )
}

# Update a user's role
mutation UpdateUserRole($role: String!) @auth(level: USER) {
  user_update(key: { id_expr: "auth.uid" }, data: { role: $role })
}

# Update a user's location
mutation UpdateUserLocation(
  $city: String!
  $latitude: Float!
  $longitude: Float!
) @auth(level: USER) {
  user_update(
    key: { id_expr: "auth.uid" }
    data: { city: $city, latitude: $latitude, longitude: $longitude }
  )
}

# Trigger a new market event for an emoji
mutation TriggerEvent(
  $emojiId: UUID!
  $impact: Float!
  $description: String!
  $now: Timestamp!
) @auth(level: USER) {
  event_insert(
    data: {
      userId_expr: "auth.uid"
      emojiId: $emojiId
      impact: $impact
      description: $description
      createdAt: $now
    }
  )
}

نکات کلیدی

  • id_expr: "auth.uid" : این از auth.uid استفاده می‌کند که مستقیماً توسط توکن احراز هویت Firebase ارائه می‌شود. با ارزیابی این سمت سرور، شما اطمینان حاصل می‌کنید که یک کاربر فقط می‌تواند داده‌های پروفایل خود را به‌روزرسانی کند و یک لایه امنیتی غیرقابل نفوذ اضافه می‌کند.

منطق زنجیره با @transaction

در مرحله بعد، یک «سازنده بازار» پیاده‌سازی خواهید کرد که یک مدیر می‌تواند آن را برای شبیه‌سازی فعالیت تصادفی بازار فعال کند. از آنجا که این کار مستلزم به‌روزرسانی قیمت یک ایموجی، ثبت یک رویداد و به‌روزرسانی مالکیت سهام سیستم به طور همزمان است، به یک تراکنش اتمی نیاز داریم.

این جهش را به فایل mutations.gql خود اضافه کنید:

# Execute a market maker trade to adjust emoji price and shares
mutation MarketMakerTrade(
  $emojiId: UUID!
  $priceImpact: Float!
  $shareDelta: Int!
  $eventDesc: String!
  $newPrice: Float!
)
@auth(
  level: USER
  insecureReason: "This operation is safe to expose to any user."
)
@transaction {
  query @redact {
    user(key: { id_expr: "auth.uid" })
      @check(
        expr: "this != null && this.role == 'ADMIN'",
        message: "Access Denied: You must have the ADMIN role to deploy the Market Maker bot."
      ) {
      role
    }
  }
  stockOwnership_upsert(
    data: {
      userId: "system_market_maker"
      emojiId: $emojiId
      shares_update: { inc: $shareDelta }
    }
  )
  emoji_update(
    id: $emojiId
    data: { currentPrice_update: { inc: $priceImpact }, trend: $priceImpact }
  )
  event_insert(
    data: {
      userId: "system_market_maker"
      emojiId: $emojiId
      impact: $priceImpact
      description: $eventDesc
    }
  )
  priceHistory_insert(data: { emojiId: $emojiId, price: $newPrice })
}

نکات کلیدی

  • @transaction : تضمین می‌کند که تمام عملیات پایگاه داده (درج موجودی، به‌روزرسانی قیمت ایموجی، ثبت رویداد) یا با هم موفق می‌شوند یا با هم شکست می‌خورند.
  • @check : دستورالعملی که قبل از ادامه، یک شرط را ارزیابی می‌کند. در اینجا، بررسی می‌کند که آیا role کاربر احراز هویت شده 'ADMIN' است یا خیر. اگر کاربر فقط یک 'USER' استاندارد باشد، کل تراکنش رد شده و به حالت اولیه برمی‌گردد.
  • @redact : از بازگشت نتایج کوئری (مانند بررسی نقش کاربر) به کلاینت در payload پاسخ جلوگیری می‌کند و پاسخ تراکنش را تمیز نگه می‌دارد.

تولید SDK

از آنجا که جهش‌های جدیدی را در فایل‌های GraphQL خود تعریف کرده‌اید، باید مولد SDK را اجرا کنید تا رابط کاربری TypeScript شما بتواند آن را فراخوانی کند.

ترمینال خود را باز کنید و اجرا کنید:

firebase dataconnect:sdk:generate

ادغام جهش‌ها در برنامه وب

در برنامه وب خود، این جهش‌های SDK تولید شده را در توابع استاندارد async قرار می‌دهید تا خطایابی و اعلان‌های رابط کاربری را مدیریت کنند.

lib/ExchangeService.tsx را باز کنید و توابع پوششی را بررسی کنید. بلوک‌های TODO را با پیاده‌سازی‌های زیر جایگزین کنید:

import {
  upsertUser,
  updateUserLocation,
  marketMakerTrade,
  updateUserRole,
  triggerMarketCrash,
} from "@dataconnect/generated";

// Upsert (update or insert) a user's profile information and log the event
export const executeUpsertUser = async (
  username: string,
  profileImage: string,
  logEvent: (key: LogEventKey, params?: any) => void,
): Promise<void> => {
  logEvent("UPSERT_USER_MUTATION", { username });
  await upsertUser({ username, profileImage });
};

// Update a user's role and log the event
export const executeUpdateRole = async (
  role: string,
  logEvent: (key: LogEventKey, params?: any) => void
): Promise<void> => {
  logEvent("UPDATE_USER_ROLE_MUTATION", { role });
  await updateUserRole({ role });
};

// Update a user's city and geographic coordinates
export const executeUpdateLocation = async (
  city: string,
  latitude: number,
  longitude: number,
): Promise<void> => {
  await updateUserLocation({ city, latitude, longitude });
};

// Execute a random market maker trade and adjust an emoji's stock price
export const executeManualBotTrade = async (
  randomEmoji: any,
  username: string,
  logEvent: (key: LogEventKey, params?: any) => void,
): Promise<{ isBuy: boolean; tradeAmount: number }> => {
  logEvent("MARKET_MAKER_TRADE");
  const isBuy = Math.random() > 0.5;
  const tradeAmount = Number((Math.random() * (10 - 2) + 2).toFixed(2));

  await marketMakerTrade({
    emojiId: randomEmoji.id,
    priceImpact: isBuy ? tradeAmount : -tradeAmount,
    shareDelta: isBuy ? 10 : -10,
    eventDesc: `Admin ${username} triggered market event: ${randomEmoji.symbol} went ${isBuy ? "up" : "down"} by $${tradeAmount.toFixed(2)}.`,
    newPrice: Math.max(0.01, randomEmoji.currentPrice + (isBuy ? tradeAmount : -tradeAmount)),
  });

  return { isBuy, tradeAmount };
};

Triggering upsert on login: In app/src/components/Navbar.tsx, you can see how executeUpsertUser is called immediately after Firebase Authentication successfully signs a user in via Google Popup. This guarantees the SQL Connect database is synced with Firebase Auth.

See it in action

Now, click the Sign In button in the navbar. You can sign in using Firebase Authentication. After signing in:

  1. Navigate to your Profile and test out the Auto-Locate button. When you click Update Coordinates, the UpdateUserLocation mutation will execute.
  2. Open the Floating Control Panel (the purple icon in the bottom right corner).
  3. Click USER and switch your authorization level to ADMIN.
  4. Click Trigger random market activity. Because your role is now 'ADMIN', the @check directive passes, the @transaction executes, and you will instantly see the market prices update across your application!

7. Advanced operations with Native SQL

In this section, you will use Native SQL to execute complex Data Manipulation Language (DML) statements and leverage PostgreSQL-specific extensions.

While standard GraphQL and @views are ideal for strictly-typed CRUD and read-only operations, Native SQL provides execution-time flexibility. It allows you to use Common Table Expressions (CTEs) to chain multiple updates in a single database round-trip, and lets you query native PostgreSQL extensions directly.

Enable the PostGIS extension

Before we write geospatial queries, you need to enable the PostGIS extension on your Cloud SQL database.

  1. Navigate to the Google Cloud Console.
  2. Go to Cloud SQL -> select your provisioned instance -> click Cloud SQL Studio.
  3. Log into your database and execute the following command:
CREATE EXTENSION IF NOT EXISTS postgis;

Implement Native SQL Queries

Let's use Native SQL to find trending emojis near the user's physical location, and to calculate the top emojis per city using complex ranking.

  1. Open dataconnect/friendly-exchange/queries.gql.
  2. Add the following Native SQL queries using the _select field:
# Get top trending emojis partitioned by user city using native SQL
query GetTopEmojisByCity
@auth(
  level: PUBLIC
  insecureReason: "This operation is safe to expose to the public."
) {
  cityTrends: _select(
    sql: """
    WITH city_shares AS (
      SELECT
        u.city,
        AVG(u.latitude) as latitude,
        AVG(u.longitude) as longitude,
        e.id as emoji_id,
        e.symbol,
        e.name,
        SUM(so.shares) as total_shares,
        RANK() OVER (PARTITION BY u.city ORDER BY SUM(so.shares) DESC) as rank
      FROM stock_ownership so
      JOIN "user" u ON so.user_id = u.id
      JOIN emoji e ON so.emoji_id = e.id
      WHERE u.city IS NOT NULL AND u.latitude IS NOT NULL AND so.shares > 0
      GROUP BY u.city, e.id, e.symbol, e.name
    )
    SELECT city, latitude, longitude, emoji_id, symbol, name, total_shares
    FROM city_shares
    WHERE rank = 1
    ORDER BY city ASC
    """
    params: []
  )
}

# Get trending emojis within a geographic radius using native SQL and PostGIS extension
query GetTrendingEmojisNearMe(
  $userLng: Float!
  $userLat: Float!
  $radiusMeters: Float!
)
@auth(
  level: PUBLIC
  insecureReason: "This operation is safe to expose to the public."
) {
  regionalTrends: _select(
    sql: """
    SELECT
      e.id,
      e.symbol,
      e.name,
      e.current_price,
      e.trend,
      COUNT(so.shares)   AS regional_holders,
      SUM(so.shares)     AS regional_shares
    FROM emoji e
    JOIN stock_ownership so ON so.emoji_id = e.id
    JOIN "user" u            ON u.id = so.user_id
    WHERE u.latitude  IS NOT NULL
      AND u.longitude IS NOT NULL
      AND so.shares > 0
      AND ST_DWithin(
        ST_MakePoint(u.longitude, u.latitude)::geography,
        ST_MakePoint($1, $2)::geography,
        $3
      )
    GROUP BY e.id, e.symbol, e.name, e.current_price, e.trend
    ORDER BY regional_shares DESC
    LIMIT 10
    """
    params: [$userLng, $userLat, $radiusMeters]
  )
}

Key Takeaways

  • _select: Executes a Data Query Language (DQL) statement returning a JSON array ([Any]).
  • ST_DWithin: A native PostGIS function that calculates distances on a sphere. Native SQL allows you to use this without mapping complex geometry types into your GraphQL schema.
  • params: Variables like $userLng are bound to the SQL string via positional parameters ($1, $2, $3), preventing SQL injection.

Implement Native SQL Mutations

When a user buys or sells a stock, the system must validate their funds, deduct the cost, add the shares, update the global emoji price, and log the history. Doing this across multiple standard mutations could lead to race conditions. Instead, we can use a CTE (WITH) to do this atomically in one Native SQL execution.

Open dataconnect/friendly-exchange/mutations.gql and replace the TODOs with the following Native SQL mutations:

# Buy shares of an emoji stock
mutation BuyStock($emojiId: UUID!, $amount: Int!, $isDiscounted: Boolean!)
@auth(level: USER) {
  buyStock: _execute(
    sql: """
    WITH validated_params AS (
      SELECT
        $1::uuid AS emoji_id,
        $2::int AS amount,
        $3::boolean AS is_discounted,
        $4::text AS user_id
    ),
    target_emoji AS (
      SELECT
        e.id,
        (e.current_price * (CASE WHEN vp.is_discounted THEN 0.5 ELSE 1.0 END) * vp.amount) AS total_cost
      FROM emoji e
      CROSS JOIN validated_params vp
      WHERE e.id = vp.emoji_id
        AND vp.amount > 0
        AND vp.amount <= 100
    ),
    deduct_funds AS (
      UPDATE "user" u
      SET points = u.points - te.total_cost
      FROM target_emoji te, validated_params vp
      WHERE u.id = vp.user_id AND u.points >= te.total_cost
      RETURNING u.id
    ),
    upsert_ownership AS (
      INSERT INTO stock_ownership (user_id, emoji_id, shares)
      SELECT vp.user_id, vp.emoji_id, vp.amount
      FROM validated_params vp
      WHERE EXISTS (SELECT 1 FROM deduct_funds)
      ON CONFLICT (user_id, emoji_id) DO UPDATE
      SET shares = stock_ownership.shares + EXCLUDED.shares
      RETURNING stock_ownership.emoji_id
    ),
    update_emoji AS (
      UPDATE emoji e
      SET
        current_price = GREATEST(0.01, e.current_price + (e.current_price * 0.01 * vp.amount)),
        trend = GREATEST(0.01, e.current_price + (e.current_price * 0.01 * vp.amount)) - e.current_price
      FROM validated_params vp
      WHERE e.id = vp.emoji_id AND EXISTS (SELECT 1 FROM deduct_funds)
      RETURNING e.id, e.current_price, e.trend
    )
    INSERT INTO price_history (id, emoji_id, price, recorded_at)
    SELECT gen_random_uuid(), ue.id, ue.current_price, NOW()
    FROM update_emoji ue;
    """
    params: [$emojiId, $amount, $isDiscounted, { _expr: "auth.uid" }]
  )
}

# Sell shares of an emoji stock
mutation SellStock($emojiId: UUID!, $amount: Int!) @auth(level: USER) {
  sellStock: _execute(
    sql: """
    WITH validated_params AS (
      SELECT
        $1::uuid AS emoji_id,
        $2::int AS amount,
        $3::text AS user_id
    ),
    target_emoji AS (
      SELECT
        e.id,
        (e.current_price * vp.amount) AS total_revenue,
        GREATEST(0.01, e.current_price * POWER(0.99, vp.amount)) AS new_price
      FROM emoji e
      CROSS JOIN validated_params vp
      WHERE e.id = vp.emoji_id
        AND vp.amount > 0
        AND vp.amount <= 100
    ),
    check_shares AS (
      SELECT so.user_id
      FROM stock_ownership so
      CROSS JOIN validated_params vp
      WHERE so.user_id = vp.user_id
        AND so.emoji_id = vp.emoji_id
        AND so.shares >= vp.amount
    ),
    add_funds AS (
      UPDATE "user" u
      SET points = u.points + te.total_revenue
      FROM target_emoji te, validated_params vp
      WHERE u.id = vp.user_id AND EXISTS (SELECT 1 FROM check_shares)
      RETURNING u.id
    ),
    update_ownership AS (
      UPDATE stock_ownership so
      SET shares = so.shares - vp.amount
      FROM validated_params vp
      WHERE so.user_id = vp.user_id
        AND so.emoji_id = vp.emoji_id
        AND EXISTS (SELECT 1 FROM check_shares)
        AND EXISTS (SELECT 1 FROM add_funds)
    ),
    update_emoji AS (
      UPDATE emoji e
      SET
        current_price = te.new_price,
        trend = te.new_price - e.current_price
      FROM target_emoji te, validated_params vp
      WHERE e.id = vp.emoji_id
        AND EXISTS (SELECT 1 FROM check_shares)
        AND EXISTS (SELECT 1 FROM add_funds)
      RETURNING e.id, e.current_price, e.trend
    )
    INSERT INTO price_history (id, emoji_id, price, recorded_at)
    SELECT gen_random_uuid(), ue.id, ue.current_price, NOW()
    FROM update_emoji ue;
    """
    params: [$emojiId, $amount, { _expr: "auth.uid" }]
  )
}

Key Takeaways

  • _execute: Executes a Data Manipulation Language (DML) statement, such as UPDATE, INSERT, or DELETE.
  • Common Table Expressions (WITH): Each block in the CTE depends on the previous one. For example, add_funds will only execute if check_shares returns a result. This handles the complex conditions completely within Postgres.
  • Context Injection: { _expr: "auth.uid" } injects the authenticated user's ID into the query directly on the server, enforcing security.

Generate the SDK

Because you have defined new queries and mutations in your GraphQL files, you must run the SDK generator so your TypeScript frontend can call it.

Open your terminal and run:

firebase dataconnect:sdk:generate

Integrate Native SQL in the web app

  1. Native SQL returns a flexible JSON payload rather than a strictly typed object. Because of this, it's essential to manually validate the returned data shape in your client code to handle the dynamic response.
  2. Execute Trades: In lib/ExchangeService.tsx, we wrap the generated buyStock and sellStock SDKs. Notice how the return types buyResult and sellResult must be manually validated as arrays, because _execute returns dynamic JSON data based on your specific RETURNING clauses in the SQL strings.
  3. Replace the empty executeBuyStock and executeSellStock functions with your original complete code:
import { buyStock, sellStock, generateTradeHeadline, triggerEvent } from "@dataconnect/generated";
import { LogEventKey } from "./InspectorContext";

// Execute a stock purchase, validating limits and potentially generating an AI news headline for large trades
export const executeBuyStock = async (
  emoji: any,
  amount: number,
  isDiscounted: boolean,
  user: any,
  logEvent: (key: LogEventKey, params?: any) => void,
): Promise<void> => {
  const MAX_AMOUNT = 100;

  if (!Number.isInteger(amount) || amount <= 0 || amount > MAX_AMOUNT) {
    throw new Error(`Amount must be an integer between 1 and ${MAX_AMOUNT}.`);
  }
  const singleSharePrice = isDiscounted
    ? emoji.currentPrice * 0.5
    : emoji.currentPrice;
  const estimatedCost = singleSharePrice * amount;
  const estimatedImpact = emoji.currentPrice * 0.05 * amount;

  logEvent("BUY_STOCK_TRANSACTION", { amount, symbol: emoji.symbol });

  const response = await buyStock({
    emojiId: emoji.id,
    amount: amount,
    isDiscounted: isDiscounted,
  });

  const buyResult = response.data?.buyStock as any;

  if (
    !buyResult ||
    buyResult === 0 ||
    (Array.isArray(buyResult) && buyResult.length === 0)
  ) {
    throw new Error(
      "Transaction denied: Insufficient funds or price mismatch.",
    );
  }

  const actualCost = Array.isArray(buyResult)
    ? buyResult[0].actual_cost
    : estimatedCost;
  const actualImpact = Array.isArray(buyResult)
    ? buyResult[0].actual_impact
    : estimatedImpact;

// TODO: Optionally add a custom resolver to call AI to generate headline for this purchase
};

// Execute a stock sale, validating ownership and potentially generating an AI news headline for large trades
export const executeSellStock = async (
  emoji: any,
  amount: number,
  ownedShares: number,
  user: any,
  logEvent: (key: LogEventKey, params?: any) => void,
): Promise<void> => {
  const MAX_AMOUNT = 100;

  if (!Number.isInteger(amount) || amount <= 0 || amount > MAX_AMOUNT) {
    throw new Error(`Amount must be an integer between 1 and ${MAX_AMOUNT}.`);
  }
  if (amount > ownedShares) {
    throw new Error(
      "INSUFFICIENT SHARES: You cannot sell more shares than you own.",
    );
  }

  const estimatedRevenue = emoji.currentPrice * amount;
  const dropRatePerShare = 0.05;
  const targetPrice =
    emoji.currentPrice * Math.pow(1 - dropRatePerShare, amount);
  const estimatedImpact = Math.max(0.01, targetPrice) - emoji.currentPrice;

  logEvent("SELL_STOCK_TRANSACTION", { amount, symbol: emoji.symbol });

  const response = await sellStock({
    emojiId: emoji.id,
    amount: amount,
  });

  const sellResult = response.data?.sellStock as any;

  if (
    !sellResult ||
    sellResult === 0 ||
    (Array.isArray(sellResult) && sellResult.length === 0)
  ) {
    throw new Error("Transaction denied: Insufficient shares.");
  }

  const actualRevenue = Array.isArray(sellResult)
    ? sellResult[0].actual_revenue
    : estimatedRevenue;
  const actualImpact = Array.isArray(sellResult)
    ? sellResult[0].actual_impact
    : estimatedImpact;
// TODO: Optionally add a custom resolver to call AI to generate headline for this sale

};

Query Geospatial Data (Local Radar): In app/src/components/LocalRadar.tsx, we subscribe to the getTrendingEmojisNearMeRef query. The dynamic JSON array from the _select execution maps directly to the UI list, utilizing PostGIS's distance calculations.

import { subscribe } from "@firebase/data-connect";
import { getTrendingEmojisNearMeRef } from "@dataconnect/generated";

// ... inside the component
  useEffect(() => {
    if (!location) return;

    setIsLoadingTrends(true);

    // Subscribe to realtime updates for trending emojis within a 50km radius
    const unsub = subscribe(
      getTrendingEmojisNearMeRef({
        userLat: location.lat,
        userLng: location.lng,
        radiusMeters: 50000, // 50km
      }),
      (res) => {
        if (res.data) setLocalData(res.data);
        setIsLoadingTrends(false);
      },
      (err) => {
        console.error("Local Radar Realtime Error:", err);
        setIsLoadingTrends(false);
      },
    );

    return () => unsub();
  }, [location?.lat, location?.lng]);

Query Geospatial Data (Global Assets Map): In app/src/app/map/page.tsx (the Insights Page), we use Native SQL's complex window functions (RANK() OVER) to find the single most popular emoji for every city in the database.

import { subscribe } from "@firebase/data-connect";
import { getTopEmojisByCityRef, getTrendingEmojisNearMeRef, getUserProfileRef } from "@dataconnect/generated";

// ... inside the component
  useEffect(() => {
    // Subscribe to realtime updates for the authenticated user's profile and stock ownership
    const unsub = subscribe(getUserProfileRef(), (res) => {
      if (res.data) setProfileData(res.data);
    });
    return () => unsub();
  }, []);

  useEffect(() => {
    // Subscribe to realtime updates for top trending emojis partitioned by user city
    const unsub = subscribe(getTopEmojisByCityRef(), (res) => {
      if (res.data) setCityData(res.data);
    });
    return () => unsub();
  }, []);

  useEffect(() => {
    setRadarLoading(true);
    // Subscribe to realtime updates for trending emojis within a specified geographic radius
    const unsub = subscribe(
      getTrendingEmojisNearMeRef({
        userLat: coords.lat,
        userLng: coords.lng,
        radiusMeters: radiusKm * 1000,
      }),
      (res) => {
        if (res.data) setRadarData(res.data);
        setRadarLoading(false);
      },
    );
    return () => unsub();
  }, [coords.lat, coords.lng, radiusKm]);

See it in action

  1. In your browser, navigate to the Geo page from the top navigation bar.
  2. If your location is correctly set in your Profile, the Global Top Assets map will ping the GetTopEmojisByCity native query to drop pins on cities with high trade volumes.
  3. Click Scan Local Network. The Local Radar Scanner will ask for your browser's location and ping the GetTrendingEmojisNearMe native query, utilizing PostGIS to find the top assets specifically traded within 50km of your coordinates!
  4. Navigate to the Home page or Profile page and purchase some assets to see your balance deduct and the emoji price update automatically via your atomic _execute queries.

8. Realtime subscriptions and caching

In the previous section, we used the subscribe() method in our React components to fetch data. While that successfully retrieved the initial state, a true stock exchange needs to feel alive. If another user buys a massive amount of emoji stock, your screen should update instantly.

This is where Firebase SQL Connect's Realtime features come in.

What is Realtime and how does it work?

Realtime support allows your application to receive proactive notifications from the server whenever data your app is using has been updated.

Here is the underlying mechanism:

  1. Trigger (@refresh): You tell the SQL Connect backend which specific mutations should trigger a data refresh for a given query.
  2. Broadcast: When one of those mutations executes (e.g., someone runs BuyStock), the server proactively broadcasts a realtime notification to any connected clients listening to that query.
  3. Cache Update: When the notification arrives, the JS SDK treats it just like an ad-hoc query execution. The local cache is instantly updated with the new data.
  4. UI Reactivity: The SDK automatically fires the onNext callbacks for all active subscribers, causing your React state to update and your UI to re-render "in real time".

Add @refresh triggers to your queries

To enable this on the backend, we need to add the @refresh directive to our queries.

  1. Open dataconnect/friendly-exchange/queries.gql.
  2. Update your existing queries by attaching @refresh directives for every market-altering mutation. For example, update GetDashboardData and GetUserProfile:
# Get dashboard data including top emojis by price and recent market events
query GetDashboardData
@auth(
  level: PUBLIC
  insecureReason: "This operation is safe to expose to the public."
)
@refresh(onMutationExecuted: { operation: "BuyStock" })
@refresh(onMutationExecuted: { operation: "SellStock" })
@refresh(onMutationExecuted: { operation: "TriggerEvent" })
@refresh(onMutationExecuted: { operation: "MarketMakerTrade" }) {
  emojis(orderBy: [{ currentPrice: DESC }]) {
    id
    symbol
    name
    description
    currentPrice
    trend
  }
  events(orderBy: [{ createdAt: DESC }], limit: 15) {
    id
    description
    impact
    createdAt
    user {
      username
      profileImage
    }
    emoji {
      symbol
    }
  }
}

# Get current authenticated user profile and their stock ownership using auth.uid
query GetUserProfile
@auth(level: USER)
@refresh(onMutationExecuted: { operation: "BuyStock" })
@refresh(onMutationExecuted: { operation: "SellStock" })
@refresh(onMutationExecuted: { operation: "UpdateUserLocation" })
@refresh(onMutationExecuted: { operation: "UpdateUserRole" }) {
  user(id_expr: "auth.uid") {
    points
    username
    profileImage
    role
    stockOwnerships_on_user {
      shares
      emoji {
        id
        symbol
        currentPrice
        name
      }
    }
    city
    latitude
    longitude
  }
}

Key Takeaways

  • @refresh(onMutationExecuted: ...): Instructs the server to re-evaluate this query and push new data to subscribers whenever the specified mutation occurs.

Generate the SDK

Because you have defined new queries and mutations in your GraphQL files, you must run the SDK generator so your TypeScript frontend can call it.

Open your terminal and run:

firebase dataconnect:sdk:generate

Handle Realtime Subscriptions in the Web App

We already laid the groundwork for this in the previous section by using the subscribe method. Let's look closer at how the generated SDK handles this in React.

If you open app/src/app/page.tsx (the Home page), you will see the useEffect hook managing the dashboard data:

import { subscribe } from "@firebase/data-connect";
import { getDashboardDataRef } from "@dataconnect/generated";

// ... inside the component
  useEffect(() => {
    const queryRef = getDashboardDataRef();

    // The subscribe function registers the QueryRef and callbacks
    const unsubscribe = subscribe(
      queryRef,
      (res) => {
        // onNext: Fires initially, AND whenever a @refresh trigger occurs
        if (res.data) setDashboardData(res.data);
        setIsDashboardLoading(false);
      },
      (err) => {
        // onError: Handles any server or permission errors
        console.error("Dashboard Realtime Error:", err);
        setIsDashboardLoading(false);
      }
    );

    // onComplete/Cleanup: Unregisters the callbacks when the component unmounts
    return () => unsubscribe();
  }, [user]);

Key Takeaways

  • subscribe(queryRef, onNext, onError): Enables Realtime notifications for the specific QueryRef.
  • unsubscribe(): Calling subscribe returns a cleanup function. It is critical to return this in your useEffect so that when the component unmounts (e.g., the user navigates away), the subscription is canceled and memory leaks are prevented.
  • Caching Efficiency: If multiple components subscribe to the same query (like GetDashboardData), the SDK shares the cached result. When a Realtime notification arrives, the cache updates once, and all active subscribers are notified automatically.

See it in action

Because you've added @refresh to your backend and subscribe to your frontend, your app is now fully reactive.

  1. Open your web app in two separate browser windows side-by-side.
  2. In one window, purchase a few shares of an emoji.
  3. Watch the second window—without refreshing the page, you will instantly see the emoji's price increase!

9. Conclusion

Congratulations, you've successfully built and deployed a realtime, highly complex trading platform directly on top of PostgreSQL using Firebase SQL Connect!

By utilizing SQL Connect, you were able to:

  • Define a strictly-typed GraphQL schema that maps directly to PostgreSQL.
  • Enforce granular, row-level security using Firebase Authentication and @auth directives.
  • Leverage advanced Native SQL to query geospatial data with PostGIS and write atomic market transactions via CTEs.
  • Make your entire application reactive using the @refresh directive for realtime subscriptions.
  • Seamlessly generate frontend SDKs to keep your client code synced with your database.

If you want to play with your own market data, feel free to insert your own mock emojis, locations, and pricing histories using the Firebase SQL Connect extension by mimicking the .gql seed files, or add them through the SQL Connect execution pane in VS Code.

10. Deploy to Cloud

Now that you've worked through the local development iteration, it's time to deploy your schema, data, and queries to the server. This can be done using the Firebase SQL Connect VS Code extension or the Firebase CLI.

Set up Firebase Authentication in your Firebase project

  1. Set up Firebase Authentication with Google Sign-In.
  2. (Optional) Allow domains for Firebase Authentication using the Firebase console (for example, http://127.0.0.1).
    1. In the Authentication settings, go to Authorized Domains.
    2. Click "Add Domain" and include your local domain in the list.

Enable required PostgreSQL Extensions

Because this app utilizes PostgreSQL extensions for vector search and location tracking, you must manually enable them on your provisioned Cloud SQL instance before deploying your schema.

  1. Navigate to the Google Cloud Console.
  2. Go to Cloud SQL -> select your provisioned instance -> click Cloud SQL Studio.
  3. Log into your database and execute the following commands:
# Required for the Geo Map page
CREATE EXTENSION IF NOT EXISTS postgis;
# Required for Vector Search
CREATE EXTENSION IF NOT EXISTS "vector";
# Required for automatic Vector Search embedding generation
CREATE EXTENSION IF NOT EXISTS "google_ml_integration";

Build your web app for hosting

Back in VS Code, ensure you have placed your firebaseConfig variables in lib/firebase.tsx (as done in the setup section).

Next, guarantee that your frontend is using the latest generated hooks by running:

firebase dataconnect:sdk:generate

Then, build the React web app for hosting deployment:

npm run build

Deploy with the Firebase CLI

In dataconnect/dataconnect.yaml, ensure that your instance ID, database, and service ID match your actual Google Cloud project identifiers, and use the v1 specification:

specVersion: v1
serviceId: your-project-id-service
location: us-west4
schemas:
  - source: ./schema
    datasource:
      postgresql:
        database: your-project-id-database
        cloudSql:
          instanceId: your-project-id-instance
connectorDirs:
  - ./friendly-exchange

In your terminal, run the following command to deploy:

firebase deploy --only dataconnect,hosting

For updates or refactors, run this command to compare your schema changes:

firebase dataconnect:sql:diff

If the changes are acceptable, apply them with:

firebase dataconnect:sql:migrate

Your Cloud SQL for PostgreSQL instance will be updated with the final deployed schema and data. You should now be able to see your app live at your-project.web.app/.

Learn more

11. Optional: Vector search with Firebase SQL Connect (billing required)

In this section, you'll enable vector search in your emoji exchange using Firebase SQL Connect. This feature allows for semantic, content-based searches, such as finding emojis that match a vibe or concept using vector embeddings.

This step requires that you completed the last step of this codelab to deploy to Google Cloud.

Update the schema to include embeddings for a field

In dataconnect/schema/schema.gql, add the descriptionEmbedding field to your Emoji table. Replace your existing Emoji type with this updated version:

# Emojis
# emoji-stockOwnership is a one-to-many relationship, emoji-priceHistory is a one-to-many relationship
# Implements @searchable directives for full-text search
# Optional: implements Vector type for semantic search
type Emoji @table {
  id: UUID! @default(expr: "uuidV4()")
  symbol: String!
  name: String! @searchable
  tags: [String!]
  description: String! @searchable
  descriptionEmbedding: Vector @col(size: 768)
  currentPrice: Float! @default(value: 10.0)
  trend: Float! @default(value: 0.0)
}

Key Takeaways

  • descriptionEmbedding: Vector @col(size: 768): This field stores the semantic embeddings of your emoji descriptions, enabling vector-based content search in your app.

Add a vector search query

In dataconnect/friendly-exchange/queries.gql, add the following query to perform vector searches:

# Search emoji descriptions using Vertex AI embeddings
query VectorSearchEmojis($query: String!)
@auth(
  level: PUBLIC
  insecureReason: "This operation is safe to expose to the public."
)
@refresh(onMutationExecuted: { operation: "BuyStock" })
@refresh(onMutationExecuted: { operation: "SellStock" })
@refresh(onMutationExecuted: { operation: "TriggerEvent" })
@refresh(onMutationExecuted: { operation: "MarketMakerTrade" }) {
  emojis_descriptionEmbedding_similarity(
    compare_embed: { model: "text-multilingual-embedding-002", text: $query }
    method: COSINE
    within: 2
    limit: 15
  ) {
    id
    symbol
    name
    description
    currentPrice
    trend
    _metadata {
      distance
    }
  }
}

Key Takeaways:

  • compare_embed: Specifies the embedding model (text-multilingual-embedding-002) and the input text ($query) for comparison.
  • method: Specifies the similarity method (COSINE), measuring the cosine similarity between the vectors.
  • within: Limits the search to emojis with a distance of 2 or less, focusing on close content matches.

Generate the SDK

Because you have defined new queries and mutations in your GraphQL files, you must run the SDK generator so your TypeScript frontend can call it.

Open your terminal and run:

firebase dataconnect:sdk:generate

Activate Vertex AI and re-deploy

  1. Follow the prerequisites guide to set up Vertex AI APIs from Google Cloud. This step is essential to support the embedding generation.
  2. Re-deploy your schema to activate pgvector and vector search by running firebase deploy --only dataconnect or clicking "Deploy to Production" using the Firebase SQL Connect VS Code extension.

Populate the database with embeddings

  1. Open the dataconnect folder in VS Code.
  2. Click Run (Production) in optional_vector_seed.gql to populate your deployed database with the 768-dimensional embeddings for the emojis.

Implement the vector search function in your app

Now that the schema and query are set up, integrate the vector search into your app's frontend.

In app/src/app/page.tsx (your Home component), review the useEffect that listens to the search input and swaps dynamically between full-text search and vector search based on the user's selected searchMode:

import { subscribe } from "@firebase/data-connect";
import {
  getDashboardDataRef,
  searchEmojisRef,
  vectorSearchEmojisRef, // <-- Add this!
  getChronologicalTickerRef,
  getUserProfileRef,
} from "@dataconnect/generated";

// Inside Home component, find the search useeffect
useEffect(() => {
    if (!debouncedSearch) {
      setSearchData(null);
      return;
    }

    let unsubscribe: () => void;

    if (searchMode === "TEXT") {
      // Subscribe to realtime full-text search results for emojis based on user input
      unsubscribe = subscribe(
        searchEmojisRef({ query: debouncedSearch }),
        (res) => {
          if (res.data) setSearchData(res.data.emojis_search);
          setIsSearchLoading(false);
        },
        (err) => {
          console.error("Text Search Error:", err);
          setIsSearchLoading(false);
        },
      );
    } else {
      // Subscribe to realtime vector search results using semantic similarity for emojis based on user input
      unsubscribe = subscribe(
        vectorSearchEmojisRef({ query: debouncedSearch }),
        (res) => {
          if (res.data)
            setSearchData(res.data.emojis_descriptionEmbedding_similarity);
          setIsSearchLoading(false);
        },
        (err) => {
          console.error("Vector Search Error:", err);
          setIsSearchLoading(false);
        },
      );
    }

    return () => {
      if (unsubscribe) unsubscribe();
    };
  }, [debouncedSearch, searchMode]);

See it in action

Navigate to the search bar on your app's homepage. Type in abstract phrases like "happy", "nature", or "technology". Toggle the search mode from TEXT to VECTOR and notice how the results shift from exact string matches to contextual, semantic matches returned directly from Vertex AI and PostgreSQL!

12. Optional: Custom Resolvers with Vertex AI (billing required)

10:00

By writing Custom Resolvers, you can extend Firebase SQL Connect to support other data sources and combine them into your unified GraphQL schema. In this section, you'll write a Firebase Cloud Function that uses Vertex AI (Gemini) to generate a satirical financial news headline whenever a user makes a large trade, and expose that function through SQL Connect.

Initialize the custom resolver

Instead of creating all the boilerplate files manually, the Firebase CLI has a built-in generator for custom resolvers.

Open your terminal in the root of your project and run:

firebase init dataconnect:resolver

When prompted by the CLI:

  1. Enter generateTradeHeadline as the name for your custom resolver.
  2. Select TypeScript to generate the example implementation.

The CLI will automatically create a new dataconnect/schema_generateTradeHeadline/schema.gql file, initialize a functions directory with sample code, and link the resolver in your dataconnect.yaml configuration!

Define the custom resolver schema

Next, you need to define the exact shape of your custom endpoint using a GraphQL schema.

Open the newly generated dataconnect/schema_generateTradeHeadline/schema.gql file and replace its contents with the following code:

# Custom resolver fields can be defined on root Query and Mutation types.
type Mutation {
  # This field will be backed by your Cloud Function.
  generateTradeHeadline(
    emojiSymbol: String!
    emojiName: String!
    username: String!
    tradeAmount: Int!
    tradeCost: Float!
    tradeType: String!
  ): String!
}

Key Takeaways:

  • By placing this inside the root type Mutation, you are telling SQL Connect that this operation might have side-effects (like calling an AI API) rather than just reading data.

Implement the custom resolver logic

Next, implement your resolver using Cloud Functions. Under the hood, you are creating a GraphQL server; however, Cloud Functions provides a helper method, onGraphRequest, that handles the boilerplate so you only need to write the core logic.

Open your Firebase Functions file (functions/src/index.ts), which the CLI generated for you. Replace the entire file with the Gemini API implementation:

import { setGlobalOptions } from "firebase-functions";
import {
  FirebaseContext,
  onGraphRequest,
} from "firebase-functions/dataconnect/graphql";
import { initializeApp, getApps } from "firebase-admin/app";
import { GoogleGenAI } from "@google/genai";

setGlobalOptions({
  maxInstances: 10,
  region: "us-west4",
});

if (getApps().length === 0) {
  initializeApp();
}

const ai = new GoogleGenAI({
  vertexai: true,
  project: process.env.GCLOUD_PROJECT || "your-project-id",
  location: process.env.GCLOUD_LOCATION || "us-west4",
});

const headlineOpts = {
  // Points to the schema you defined earlier
  schemaFilePath: "dataconnect/schema_generateTradeHeadline/schema.gql",
  resolvers: {
    mutation: {
      // Generate a satirical financial news headline for a stock trade using Vertex AI
      async generateTradeHeadline(
        _parent: unknown,
        args: Record<string, unknown>,
        _contextValue: FirebaseContext,
        _info: unknown,
      ): Promise<string> {
        const {
          emojiSymbol,
          emojiName,
          username,
          tradeAmount,
          tradeCost,
          tradeType,
        } = args;

        try {
          const prompt = `You are a hype-driven, satirical financial news bot. 
          A user named '${username}' just executed a massive ${tradeType} of ${tradeAmount} shares of ${emojiSymbol} (${emojiName}) for $${tradeCost}. 
          Write a single, punchy, dramatic news headline (under 12 words) about this market move, use puns wherever possible, but don't round or exagerate the numbers. Include the asset symbol.`;
          
          const response = await ai.models.generateContent({
            model: "gemini-2.5-flash-lite",
            contents: prompt,
          });

          if (!response.text) {
            throw new Error("No text returned from Vertex AI");
          }

          return response.text.trim();
        } catch (error) {
          console.error("Vertex AI generation failed:", error);
          return `BREAKING: Massive ${tradeType} detected on ${emojiSymbol}! Market reacting.`;
        }
      },
    },
  },
};

export const generateTradeHeadline = onGraphRequest(headlineOpts);

نکات کلیدی:

  • onGraphRequest : یک پوشش‌دهنده‌ی تخصصی توابع Firebase که یک تابع Cloud را به یک طرحواره‌ی SQL Connect Custom Resolver نگاشت می‌کند.
  • args : آرگومان‌های ارسالی از جهش GraphQL به طور خودکار تایپ و در اینجا استخراج می‌شوند تا به اعلان Gemini تزریق شوند.

جهش را به کانکتور خود اضافه کنید

حالا که منطق resolver سفارشی وجود دارد، آن را از طریق کانکتور برنامه خود نمایش دهید تا frontend بتواند آن را فراخوانی کند.

dataconnect/friendly-exchange/mutations.gql را باز کنید و جهش (mutation) را اضافه کنید:

# Generate an AI headline for a stock trade
mutation GenerateTradeHeadline(
  $emojiSymbol: String!
  $emojiName: String!
  $username: String!
  $tradeAmount: Int!
  $tradeCost: Float!
  $tradeType: String!
)
@auth(
  level: USER
  insecureReason: "This operation is safe to expose to any authenticated user."
) {
  aiHeadline: generateTradeHeadline(
    emojiSymbol: $emojiSymbol
    emojiName: $emojiName
    username: $username
    tradeAmount: $tradeAmount
    tradeCost: $tradeCost
    tradeType: $tradeType
  )
}

استقرار و تولید SDK

از آنجا که Custom Resolverها از طریق Cloud Functions اجرا می‌شوند، برای فعال شدن Endpoint باید توابع خود را در Google Cloud مستقر کنید.

ترمینال خود را باز کنید و تابع را مستقر کنید:

firebase deploy --only functions

پس از استقرار، SDK مربوط به frontend را ایجاد کنید تا جهش هوش مصنوعی جدید شما را شامل شود:

firebase dataconnect:sdk:generate

ادغام حل‌کننده هوش مصنوعی در برنامه وب

بیایید این را طوری تنظیم کنیم که هر معامله ۱۰ سهم یا بیشتر، یک هشدار خبری فوری ایجاد کند!

lib/ExchangeService.tsx را باز کنید. ابتدا مطمئن شوید که generateTradeHeadline و triggerEvent در بالا وارد کرده‌اید:

import { 
  buyStock, 
  sellStock, 
  generateTradeHeadline, 
  triggerEvent 
} from "@dataconnect/generated";

سپس، به پایین تابع executeBuyStock خود بروید و درست قبل از پایان تابع، TODO با بلوک تریگر AI جایگزین کنید:

// ... (existing executeBuyStock code)

  const actualImpact = Array.isArray(buyResult)
    ? buyResult[0].actual_impact
    : estimatedImpact;

  if (amount >= 10 && user) {
    setTimeout(() => {
      logEvent("GENERATE_HEADLINE_RESOLVER");
    }, 2000);

    const headlineResult = await generateTradeHeadline({
      emojiSymbol: emoji.symbol,
      emojiName: emoji.name,
      username: user.displayName || "Anonymous Whale",
      tradeAmount: amount,
      tradeCost: actualCost.toFixed(2),
      tradeType: "BUY",
    });

    await triggerEvent({
      emojiId: emoji.id,
      impact: actualImpact.toFixed(2),
      description: `GEMINI REPORT: ${headlineResult.data?.aiHeadline}`,
      now: new Date().toISOString(),
    });
  }
};

دقیقاً همین کار را در پایین تابع executeSellStock انجام دهید:

// ... (existing executeSellStock code)

  const actualImpact = Array.isArray(sellResult)
    ? sellResult[0].actual_impact
    : estimatedImpact;

  if (amount >= 10 && user) {
    const headlineResult = await generateTradeHeadline({
      emojiSymbol: emoji.symbol,
      emojiName: emoji.name,
      username: user.displayName || "Anonymous Whale",
      tradeAmount: amount,
      tradeCost: actualRevenue.toFixed(2),
      tradeType: "SELL",
    });

    await triggerEvent({
      emojiId: emoji.id,
      impact: actualImpact.toFixed(2),
      description: `GEMINI REPORT: ${headlineResult.data?.aiHeadline}`,
      now: new Date().toISOString(),
    });
  }
};

آن را در عمل ببینید

  1. برنامه وب خود را دوباره بارگیری کنید.
  2. مطمئن شوید که وارد سیستم شده‌اید و ارز کافی دارید.
  3. یک ایموجی انتخاب کنید و 10 یا بیشتر سهم را به طور همزمان خریداری کنید.
  4. به نمودار بازار جهانی در سمت راست داشبورد خود نگاه کنید. ظرف چند ثانیه، یک تیتر خبری طنز سفارشی که توسط Gemini تولید شده است، ظاهر می‌شود!