۱. قبل از شروع
در این آزمایشگاه کد، شما 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 برای ویژگیهای پیشرفته راهنمایی میکند.
- مخزن پروژه را کلون کنید و وابستگیهای مورد نیاز برنامه را نصب کنید:
git clone https://github.com/firebaseextended/codelab-dataconnect-web cd codelab-dataconnect-web git switch emoji-init npm install
- پوشهی کلونشده را با استفاده از Visual Studio Code باز کنید و افزونهی Firebase SQL Connect Visual Studio را نصب کنید.
- در ترمینال خود، مطمئن شوید که 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
- برنامه وب خود را به پروژه Firebase خود متصل کنید: برنامه وب خود را با استفاده از کنسول Firebase در پروژه Firebase خود ثبت کنید:
- پروژه خود را باز کنید و سپس روی افزودن برنامه (Add App) کلیک کنید (آیکون وب را انتخاب کنید).
- فعلاً تنظیمات و پیکربندی SDK را نادیده بگیرید، اما حتماً شیء
firebaseConfigتولید شده را کپی کنید . -
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"
};
- سرور توسعه را اجرا کنید:
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 را برای فراخوانی این کانکتورها در سراسر برنامه وب پیادهسازی میکنید. در پایان، برنامه شما قادر خواهد بود بازار ایموجیهای زنده، پروفایلهای کاربر و جدول امتیازات را مستقیماً از پایگاه داده به صورت پویا دریافت و نمایش دهد.
دادههای بازار و کاربر آزمایشی را وارد کنید
- در VSCode،
dataconnect/seed.gqlرا باز کنید. - مطمئن شوید که شبیهسازها در افزونهی Firebase SQL Connect در حال اجرا هستند (یا نمونهی Cloud SQL شما متصل است).
- باید دکمهی «اجرا (محلی)» یا «اجرا (تولید)» CodeLens را در بالای فایل ببینید. برای وارد کردن دادههای ایموجی ساختگی و تاریخچهی قیمتهای اولیه در پایگاه دادهی خود، روی این دکمه کلیک کنید.
- برای تأیید اینکه دادهها با موفقیت اضافه شدهاند، ترمینال SQL Connect Execution را بررسی کنید.
پیادهسازی کوئریهای پایه
ابتدا، بیایید از جداول استانداردی که در طرحواره خود تعریف کردهاید، پرسوجو کنیم.
-
dataconnect/friendly-exchange/queries.gqlرا باز کنید . - برای بازیابی دادههای داشبورد، پروفایلهای کاربران و تاریخچههای قیمت پایه، کوئریهای زیر را اضافه کنید :
# 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 است.
-
dataconnect/schema/views.gqlرا باز کنید . - برای محاسبه آمار لازم روی سرور، 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 را ارتقا خواهیم داد تا هر زمان که پایگاه داده تغییر کند، این تابع به طور خودکار فعال شود!
- پنل بازار (
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();
}, []);
- صفحه جدول امتیازات (
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();
}, []);
- ایموجی مودال (
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:
- Navigate to your Profile and test out the Auto-Locate button. When you click Update Coordinates, the
UpdateUserLocationmutation will execute. - Open the Floating Control Panel (the purple icon in the bottom right corner).
- Click USER and switch your authorization level to ADMIN.
- Click Trigger random market activity. Because your role is now
'ADMIN', the@checkdirective passes, the@transactionexecutes, 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.
- Navigate to the Google Cloud Console.
- Go to Cloud SQL -> select your provisioned instance -> click Cloud SQL Studio.
- 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.
- Open
dataconnect/friendly-exchange/queries.gql. - Add the following Native SQL queries using the
_selectfield:
# 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$userLngare 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 asUPDATE,INSERT, orDELETE.- Common Table Expressions (
WITH): Each block in the CTE depends on the previous one. For example,add_fundswill only execute ifcheck_sharesreturns 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
- 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.
- Execute Trades: In
lib/ExchangeService.tsx, we wrap the generatedbuyStockandsellStockSDKs. Notice how the return typesbuyResultandsellResultmust be manually validated as arrays, because_executereturns dynamic JSON data based on your specificRETURNINGclauses in the SQL strings. - Replace the empty
executeBuyStockandexecuteSellStockfunctions 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
- In your browser, navigate to the Geo page from the top navigation bar.
- If your location is correctly set in your Profile, the Global Top Assets map will ping the
GetTopEmojisByCitynative query to drop pins on cities with high trade volumes. - Click Scan Local Network. The
Local Radar Scannerwill ask for your browser's location and ping theGetTrendingEmojisNearMenative query, utilizing PostGIS to find the top assets specifically traded within 50km of your coordinates! - 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
_executequeries.
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:
- Trigger (
@refresh): You tell the SQL Connect backend which specific mutations should trigger a data refresh for a given query. - 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. - 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.
- UI Reactivity: The SDK automatically fires the
onNextcallbacks 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.
- Open
dataconnect/friendly-exchange/queries.gql. - Update your existing queries by attaching
@refreshdirectives for every market-altering mutation. For example, updateGetDashboardDataandGetUserProfile:
# 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 specificQueryRef.unsubscribe(): Callingsubscribereturns a cleanup function. It is critical to return this in youruseEffectso 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.
- Open your web app in two separate browser windows side-by-side.
- In one window, purchase a few shares of an emoji.
- 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
- Set up Firebase Authentication with Google Sign-In.
- (Optional) Allow domains for Firebase Authentication using the Firebase console (for example,
http://127.0.0.1).- In the Authentication settings, go to Authorized Domains.
- 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.
- Navigate to the Google Cloud Console.
- Go to Cloud SQL -> select your provisioned instance -> click Cloud SQL Studio.
- 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
- Follow the prerequisites guide to set up Vertex AI APIs from Google Cloud. This step is essential to support the embedding generation.
- Re-deploy your schema to activate
pgvectorand vector search by runningfirebase deploy --only dataconnector clicking "Deploy to Production" using the Firebase SQL Connect VS Code extension.
Populate the database with embeddings
- Open the
dataconnectfolder in VS Code. - Click Run (Production) in
optional_vector_seed.gqlto 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:
- Enter
generateTradeHeadlineas the name for your custom resolver. - 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(),
});
}
};
آن را در عمل ببینید
- برنامه وب خود را دوباره بارگیری کنید.
- مطمئن شوید که وارد سیستم شدهاید و ارز کافی دارید.
- یک ایموجی انتخاب کنید و 10 یا بیشتر سهم را به طور همزمان خریداری کنید.
- به نمودار بازار جهانی در سمت راست داشبورد خود نگاه کنید. ظرف چند ثانیه، یک تیتر خبری طنز سفارشی که توسط Gemini تولید شده است، ظاهر میشود!