با برنامه Next.js در میزبانی برنامه Firebase مستقر شوید

۱. قبل از شروع

در این آزمایشگاه کد، یاد خواهید گرفت که چگونه با استفاده از یک برنامه وب Next.js به نام Friendly Eats، که یک وب‌سایت برای بررسی رستوران‌ها است، در Firebase App Hosting مستقر شوید.

اپلیکیشن وب Friendly Eats

برنامه وب تکمیل‌شده ویژگی‌های مفیدی را ارائه می‌دهد که نشان می‌دهد چگونه Firebase می‌تواند به شما در ساخت برنامه‌های Next.js کمک کند.

  • ساخت و استقرار خودکار: این آزمایشگاه کد به شما نشان می‌دهد که چگونه از Firebase App Hosting برای ساخت و استقرار خودکار کد Next.js خود هر بار که به یک شاخه پیکربندی شده ارسال می‌کنید، استفاده کنید.
  • ورود و خروج: برنامه وب تکمیل‌شده به کاربران اجازه می‌دهد تا با استفاده از گوگل وارد سیستم شوند/از سیستم خارج شوند. ورود و ماندگاری کاربر کاملاً از طریق احراز هویت Firebase مدیریت می‌شود.
  • تصاویر: برنامه وب تکمیل‌شده به کاربرانی که وارد سیستم شده‌اند اجازه می‌دهد تصاویر رستوران را آپلود کنند. تصاویر در فضای ذخیره‌سازی ابری برای Firebase ذخیره می‌شوند. کیت توسعه نرم‌افزاری جاوا اسکریپت Firebase یک URL عمومی برای تصاویر آپلود شده ارائه می‌دهد. این URL عمومی سپس در سند رستوران مربوطه در Cloud Firestore ذخیره می‌شود.
  • فیلترها: برنامه وب تکمیل‌شده به کاربرانی که وارد سیستم شده‌اند اجازه می‌دهد فهرست رستوران‌ها را بر اساس دسته‌بندی، موقعیت مکانی و قیمت فیلتر کنند. همچنین می‌توانید روش مرتب‌سازی مورد استفاده را سفارشی کنید. داده‌ها از Cloud Firestore قابل دسترسی هستند و جستجوهای Firestore بر اساس فیلترهای استفاده شده اعمال می‌شوند.
  • نظرات: برنامه وب تکمیل‌شده به کاربرانی که وارد سیستم شده‌اند اجازه می‌دهد نظرات خود را در مورد رستوران‌ها ارسال کنند که شامل امتیاز ستاره‌ای و پیام متنی است. اطلاعات نظرات در Cloud Firestore ذخیره می‌شود.
  • خلاصه نظرات: برنامه وب تکمیل‌شده به‌طور خودکار نظرات را با استفاده از مدل Gemini خلاصه می‌کند. خلاصه‌های تولیدشده توسط هوش مصنوعی در Cloud Firestore ذخیره می‌شوند.

پیش‌نیازها

  • آشنایی با Next.js و جاوا اسکریپت

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

  • نحوه استفاده از Firebase با Next.js App Router و رندر سمت سرور
  • نحوه‌ی مجاز کردن فراخوانی‌ها به API Gemini با استفاده از فقط سمت سرور - اسرار

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

  • یک مرورگر دلخواه مانند گوگل کروم
  • دسترسی به IDX.dev (یک فضای کاری مبتنی بر وب)
  • یک حساب گوگل برای ایجاد و مدیریت پروژه Firebase شما
  • یک حساب کاربری گیت‌هاب (نیازی نیست همان حساب ایمیلی باشد که در بالا ذکر شد)

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

این codelab کدبیس اولیه برنامه را ارائه می‌دهد و به Firebase CLI و IDX.dev متکی است.

یک مخزن گیت‌هاب جدید ایجاد کنید و آن را به IDX وارد کنید

میزبانی برنامه Firebase به شما امکان می‌دهد یک مخزن GitHub راه‌اندازی کنید تا هر بار که کد Next.js خود را به یک شاخه پیکربندی شده ارسال می‌کنید، آن را بسازد و مستقر کند.

  1. یک مخزن گیت‌هاب جدید برای این آزمایشگاه کد ایجاد کنید: https://github.com/new . نام آن را هر چیزی که دوست دارید بگذارید، مثلاً MyFriendlyEatsCodelab .
  2. آدرس جدید مخزن خود را کپی کنید. چیزی شبیه به این خواهد بود:
    https://github.com/ USER_NAME / REPOSITORY_NAME .git
  3. به آدرس https://idx.google.com بروید و وارد سیستم شوید.
  4. روی «وارد کردن یک مخزن» کلیک کنید و آدرس اینترنتی گیت‌هاب کپی‌شده خود را جای‌گذاری کنید.
    IDX از شما می‌خواهد که به GitHub لینک دهید، سپس مخزن (خالی) شما را کلون می‌کند.

مخزن کد منبع codelab را مشاهده کنید

برای مشاهده سورس کد به آدرس https://github.com/firebase/friendlyeats-web مراجعه کنید. مخزن friendlyeats-web شامل پروژه‌های نمونه برای پلتفرم‌های مختلف است.

این آزمایشگاه کد که شما روی آن کار می‌کنید، فقط روی Firebase App Hosting و Gemini API تمرکز دارد و نسخه کوتاه‌شده‌ای از آزمایشگاه کد کامل «ادغام Firebase با یک برنامه Next.js» است. این آزمایشگاه کد کوتاه‌شده مستلزم آن است که شما فقط با کد منبع موجود در شاخه #io-connect از مخزن friendlyeats-web ، به‌ویژه دایرکتوری nextjs-step10 ، کار کنید.

به دایرکتوری‌های اضافی زیر در مخزن friendlyeats-web توجه کنید. اگرچه برای این آزمایشگاه کد به این دایرکتوری‌ها نیازی ندارید، اما دانستن آنها مفید است.

سورس codelab را در مخزن جدید خود کپی کنید

در اینجا نحوه کپی کردن دایرکتوری nextjs-step10 در مخزن خودتان آورده شده است:

  1. در IDX، ترمینال را با استفاده از Menu > Terminal > New Terminal باز کنید.
  2. از پکیج giget npm برای دریافت فقط دایرکتوری nextjs-step10 از شاخه io-connect استفاده کنید: 
    npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
  3. پیگیری تغییرات به صورت محلی با git: 
    git add -A
git commit -m "codelab starting point"
git branch -M main
git push -u origin main

اکنون باید کد آغازین را در مخزن گیت‌هاب خود مشاهده کنید.

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

در این بخش، چند بخش از کدبیس اولیه برنامه را که قرار است در این آزمایشگاه کد به آنها قابلیت اضافه کنید، مرور خواهید کرد.

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

جدول زیر شامل نمای کلی از ساختار پوشه‌ها و فایل‌های برنامه است:

پوشه‌ها و فایل‌ها

توضیحات

src/components

کامپوننت‌های React برای فیلترها، هدرها، جزئیات رستوران‌ها و نقد و بررسی‌ها

src/lib

توابع کاربردی که لزوماً به React یا Next.js محدود نیستند

src/lib/firebase

کد مخصوص فایربیس و پیکربندی فایربیس

public

دارایی‌های ثابت در برنامه وب، مانند آیکون‌ها

src/app

مسیریابی با Next.js App Router

src/app/restaurant

یک کنترل‌کننده مسیر API

package.json و package-lock.json

وابستگی‌های پروژه با npm

next.config.js

پیکربندی مخصوص Next.js (اعمال سرور فعال هستند)

jsconfig.json

پیکربندی سرویس زبان جاوا اسکریپت

اجزای سرور و کلاینت

این برنامه یک برنامه وب Next.js است که از App Router استفاده می‌کند. رندرینگ سرور در سراسر برنامه استفاده می‌شود. برای مثال، فایل src/app/page.js یک کامپوننت سرور است که مسئول صفحه اصلی است. فایل src/components/RestaurantListings.jsx یک کامپوننت کلاینت است که با عبارت "use client" در ابتدای فایل مشخص شده است.

وارد کردن اظهارات

در برخی فایل‌ها، ممکن است عبارات import مانند موارد زیر را مشاهده کنید:

import RatingPicker from "@/src/components/RatingPicker.jsx";

این برنامه از نماد @ برای جلوگیری از مسیرهای واردات نسبی دست و پا گیر استفاده می‌کند و این امر با نام‌های مستعار مسیر امکان‌پذیر است.

API های مخصوص فایربیس

تمام کدهای API فایربیس در دایرکتوری src/lib/firebase قرار دارند. سپس کامپوننت‌های React به صورت جداگانه توابع قرار داده شده در دایرکتوری src/lib/firebase را وارد می‌کنند، به جای اینکه مستقیماً توابع فایربیس را وارد کنند.

داده‌های ساختگی

داده‌های رستوران‌های آزمایشی و نظرات مشتریان در فایل src/lib/randomData.js قرار دارند. داده‌های این فایل در کد موجود در فایل src/lib/fakeRestaurants.js گردآوری شده‌اند.

۴. پروژه فایربیس خود را راه‌اندازی کنید

در این بخش، یک پروژه Firebase راه‌اندازی کرده و یک برنامه وب Firebase را به آن مرتبط خواهید کرد. همچنین سرویس‌های Firebase مورد استفاده توسط برنامه وب نمونه را راه‌اندازی خواهید کرد.

ایجاد یک پروژه فایربیس

  1. با استفاده از همان حساب گوگلی که در مرحله قبل استفاده کردید، وارد کنسول Firebase شوید.
  2. برای ایجاد یک پروژه جدید، روی دکمه کلیک کنید و سپس نام پروژه را وارد کنید (برای مثال، FriendlyEats Codelab ).
  3. روی ادامه کلیک کنید.
  4. در صورت درخواست، شرایط Firebase را مرور و قبول کنید و سپس روی ادامه کلیک کنید.
  5. (اختیاری) دستیار هوش مصنوعی را در کنسول Firebase (با نام "Gemini در Firebase") فعال کنید.
  6. برای این codelab، به گوگل آنالیتیکس نیاز ندارید ، بنابراین گزینه گوگل آنالیتیکس را غیرفعال کنید .
  7. روی ایجاد پروژه کلیک کنید، منتظر بمانید تا پروژه شما آماده شود و سپس روی ادامه کلیک کنید.

طرح قیمت‌گذاری فایربیس خود را ارتقا دهید

برای استفاده از میزبانی برنامه Firebase و فضای ذخیره‌سازی ابری برای Firebase، پروژه Firebase شما باید در طرح قیمت‌گذاری pay-as-you-go (Blaze) باشد، به این معنی که به یک حساب Cloud Billing متصل باشد.

  • یک حساب Cloud Billing به یک روش پرداخت، مانند کارت اعتباری، نیاز دارد.
  • اگر در استفاده از فایربیس و گوگل کلود تازه‌کار هستید، بررسی کنید که آیا واجد شرایط دریافت اعتبار ۳۰۰ دلاری و یک حساب کاربری رایگان ابری هستید یا خیر.
  • اگر این codelab را به عنوان بخشی از یک رویداد انجام می‌دهید، از برگزارکننده خود بپرسید که آیا امکان استفاده از فضای ابری (Cloud credits) وجود دارد یا خیر.

برای ارتقاء پروژه خود به طرح Blaze، مراحل زیر را دنبال کنید:

  1. در کنسول Firebase، گزینه ارتقاء پلن خود را انتخاب کنید.
  2. طرح Blaze را انتخاب کنید. دستورالعمل‌های روی صفحه را دنبال کنید تا یک حساب Cloud Billing به پروژه شما متصل شود.
    اگر به عنوان بخشی از این ارتقا نیاز به ایجاد یک حساب Cloud Billing داشتید، ممکن است لازم باشد برای تکمیل ارتقا، به روند ارتقا در کنسول Firebase برگردید.

۵. یک بک‌اند میزبانی اپلیکیشن ایجاد کنید

در این بخش، یک بک‌اند میزبانی برنامه (App Hosting backend) راه‌اندازی خواهید کرد تا یک شاخه (branch) را در مخزن گیت (git repository) خود زیر نظر داشته باشید. همچنین تمام سرویس‌هایی را که بک‌اند با آنها در ارتباط خواهد بود، پیکربندی خواهید کرد.

در پایان این بخش، شما یک بک‌اند میزبانی برنامه (App Hosting backend) متصل به مخزن خود در گیت‌هاب خواهید داشت که هر زمان که یک کامیت جدید به شاخه main خود ارسال کنید، به‌طور خودکار نسخه جدیدی از برنامه شما را بازسازی و منتشر می‌کند.

ایجاد یک بک‌اند

  1. در کنسول Firebase، به صفحه App Hosting بروید: وضعیت صفر کنسول App Hosting، با دکمه «شروع به کار»
  2. برای شروع فرآیند ایجاد backend، روی Get started کلیک کنید.
  3. برای وارد کردن و اتصال مخزن GitHub که قبلاً ایجاد کرده‌اید، دستورالعمل‌ها را دنبال کنید.
  4. تنظیمات استقرار را تنظیم کنید:
    • دایرکتوری ریشه را به صورت / نگه دارید
    • شاخه زنده را روی main تنظیم کنید
    • فعال کردن انتشار خودکار
  5. نام backend خود را friendlyeats-codelab (یا هر نام backend دلخواه) قرار دهید. این نام بخشی از دامنه‌ای می‌شود که برای دسترسی به backend استفاده می‌شود.
    این گردش کار همچنین به طور خودکار یک برنامه وب Firebase در پروژه Firebase شما ایجاد می‌کند. بعداً در این آزمایشگاه کد، از مقادیر پیکربندی این برنامه وب برای اتصال پایگاه کد خود به پروژه Firebase خود استفاده خواهید کرد.
  6. روی «پایان و استقرار» کلیک کنید. پس از لحظه‌ای، به صفحه جدیدی منتقل می‌شوید که در آن می‌توانید وضعیت بک‌اند جدید App Hosting خود را مشاهده کنید!
  7. از داشبورد App Hosting، دامنه جدید خود را کپی کنید.
    الگویی مانند BACKEND_ID -- PROJECT_ID . REGION .hosted.app خواهد داشت. برای تنظیم احراز هویت Firebase بعداً به این دامنه نیاز خواهید داشت.

ممکن است به دلیل انتشار DNS و ایجاد گواهی SSL، شروع به کار دامنه چند دقیقه طول بکشد. در حالی که backend شما در حال ایجاد است، به راه‌اندازی بقیه پروژه Firebase و پیکربندی backend خود ادامه دهید (مراحل بعدی این آزمایشگاه کد).

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

۶. سایر سرویس‌های فایربیس را راه‌اندازی کنید

اگرچه این آزمایشگاه کد فقط بر میزبانی برنامه Firebase و API Gemini تمرکز دارد، اما برنامه وب در حال کار برای عملکرد به سایر سرویس‌های Firebase نیاز دارد. کدی که باعث می‌شود همه این سرویس‌ها در برنامه شما کار کنند، بخشی از کدبیسی است که شما در مخزن GitHub خود کپی کرده‌اید، اما هنوز باید این سرویس‌ها را در پروژه Firebase خود تنظیم کنید.

تنظیم احراز هویت

  1. در کنسول Firebase، به بخش Authentication بروید.
  2. روی شروع به کار کلیک کنید.
  3. در ستون ارائه دهندگان اضافی ، روی Google > Enable کلیک کنید.
    1. در کادر متن Public-facing name for project ، نامی مانند My FriendlyEatsCodelab app وارد کنید.
    2. از منوی کشویی ایمیل پشتیبانی برای پروژه ، آدرس ایمیل خود را انتخاب کنید.
    3. روی ذخیره کلیک کنید.
  4. در صفحه احراز هویت، روی برگه تنظیمات کلیک کنید.
    1. از منوی سمت چپ صفحه، روی گزینه «دامنه‌های مجاز» کلیک کنید.
    2. روی افزودن دامنه کلیک کنید و سپس دامنه App Hosting تازه ایجاد شده خود را اضافه کنید (که با .hosted.app به پایان می‌رسد).
    3. برای ذخیره، روی افزودن کلیک کنید.

راه اندازی کلود فایر استور

  1. در پنل سمت چپ کنسول Firebase، گزینه Build را باز کرده و سپس Firestore database را انتخاب کنید.
  2. روی ایجاد پایگاه داده کلیک کنید.
  3. شناسه پایگاه داده را روی (default) تنظیم کنید.
  4. مکانی را برای پایگاه داده خود انتخاب کنید، سپس روی Next کلیک کنید.
    برای یک اپلیکیشن واقعی، شما می‌خواهید مکانی را انتخاب کنید که به کاربرانتان نزدیک باشد.
  5. روی شروع در حالت آزمایشی کلیک کنید. سلب مسئولیت مربوط به قوانین امنیتی را مطالعه کنید.
    بعداً در این آزمایشگاه کد، قوانین امنیتی را برای ایمن‌سازی داده‌های خود اضافه خواهید کرد. بدون اضافه کردن قوانین امنیتی برای پایگاه داده خود، برنامه را به صورت عمومی توزیع یا افشا نکنید .
  6. روی ایجاد کلیک کنید.

راه‌اندازی فضای ذخیره‌سازی ابری برای فایربیس

  1. در پنل سمت چپ کنسول Firebase، گزینه Build را باز کرده و سپس Storage را انتخاب کنید.
  2. روی شروع به کار کلیک کنید.
  3. مکانی را برای سطل ذخیره‌سازی پیش‌فرض خود انتخاب کنید.
    کاربران در US-WEST1 ، US-CENTRAL1 و US-EAST1 می‌توانند از ردیف «همیشه رایگان» برای Google Cloud Storage بهره‌مند شوند. کاربران در سایر مناطق ، از قیمت‌ها و میزان استفاده از Google Cloud Storage پیروی می‌کنند.
  4. روی شروع در حالت آزمایشی کلیک کنید. سلب مسئولیت مربوط به قوانین امنیتی را مطالعه کنید.
    بعداً در این آزمایشگاه کد، قوانین امنیتی را برای ایمن‌سازی داده‌های خود اضافه خواهید کرد. بدون اضافه کردن قوانین امنیتی برای مخزن ذخیره‌سازی خود، برنامه را به صورت عمومی توزیع یا در معرض نمایش قرار ندهید .
  5. روی ایجاد کلیک کنید.

۷. برنامه وب خود را پیکربندی کنید

اکنون که یک پروژه Firebase ایجاد کرده‌اید و تمام سرویس‌های Firebase مورد استفاده در برنامه خود را فعال کرده‌اید، آماده‌اید تا در IDX کار کنید تا برنامه وب خود را برای استفاده از آن سرویس‌ها پیکربندی کنید.

وارد رابط خط فرمان فایربیس (Firebase CLI) در IDX شوید

IDX از قبل Node.js و Firebase CLI را نصب کرده است، بنابراین می‌توانید از نصب آنها صرف نظر کنید و فقط شروع به تنظیم CLI کنید.

  1. در ترمینال درون IDX، این دستورات را اجرا کنید تا CLI را برای استفاده از پروژه Firebase که قبلاً ایجاد کرده‌اید، پیکربندی کنید:
    firebase login --no-localhost
firebase use --add
    وقتی از شما نام مستعار خواسته شد، codelab وارد کنید.
  2. بسته به اینکه می‌خواهید Firebase داده‌ها را جمع‌آوری کند یا نه، Y یا N را وارد کنید. هر دو گزینه برای این codelab کار می‌کند.
  3. در مرورگر خود، حساب گوگل خود را انتخاب کنید و سپس روی «مجاز» کلیک کنید.

استقرار قوانین و شاخص‌های امنیتی

کدی که در مخزن گیت‌هاب خود کپی کرده‌اید، از قبل مجموعه‌ای از قوانین امنیتی برای Firestore (در firestore.rules ) و برای Cloud Storage برای Firebase (در storage.rules ) دارد. پس از استقرار قوانین امنیتی، داده‌های موجود در پایگاه داده و مخزن شما از سوءاستفاده محافظت می‌شوند.

همچنین می‌توانید از CLI برای استقرار مجموعه‌ای از ایندکس‌ها برای Firestore (در firestore.indexes.json ) استفاده کنید تا کوئری‌های پیشرفته را فعال کنید.

  1. در ترمینال درون IDX، این دستور را اجرا کنید تا این قوانین امنیتی و شاخص‌ها اعمال شوند: 
    firebase deploy --only firestore,storage
  2. اگر از شما پرسیده شد: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" ، برای انتخاب بله ، Enter فشار دهید.

پیکربندی Firebase خود را به کد برنامه وب خود اضافه کنید

  1. در کنسول Firebase، موارد زیر را انجام دهید:
    1. به تنظیمات پروژه خود بروید.
    2. به بخش «برنامه‌های شما» (Your Apps) بروید و سپس برنامه‌ای را که نامش با نام «پشتیبان میزبانی برنامه» (App Hosting backend) شما یکسان است، انتخاب کنید.
    3. در قسمت تنظیمات و پیکربندی SDK ، گزینه Config را انتخاب کنید، سپس ویژگی‌های متغیر firebaseConfig و مقادیر آنها را کپی کنید.
  2. در IDX، موارد زیر را انجام دهید:
    1. فایل apphosting.yaml باز کنید. در اینجا می‌توانید متغیرهای محیطی خود را در App Hosting و همچنین تنظیمات مربوط به رمزها و زمان اجرا تنظیم کنید.
    2. مقادیر متغیر محیطی ارائه شده را با مقادیر پیکربندی که از کنسول Firebase کپی کرده‌اید، پر کنید. برای مثال (با مقادیر خودتان جایگزین کنید): 
      runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
    3. فایل را ذخیره کنید. سپس، در ترمینال درون IDX، این دستورات را اجرا کنید تا تغییرات به GitHub ارسال شوند: 
      git commit -a -m "Setup Firebase Config"

git push
  3. به کنسول فایربیس برگردید و به صفحه App Hosting بروید و سپس موارد زیر را انجام دهید:
    1. برای مشاهده داشبورد، روی «مشاهده داشبورد» کلیک کنید.
    2. مشاهده کنید که یک ساخت جدید از طریق git push شما آغاز شده است! این کار حدود ۳ دقیقه طول می‌کشد تا ساخت و انتشار در Cloud Run به پایان برسد. می‌توانید با کلیک روی تراشه build- ID پیشرفت آن را مشاهده کنید.
    3. صفحه کنسول را رفرش کنید تا بررسی کنید که آیا راه‌اندازی به پایان رسیده است یا خیر. پس از اتمام، روی لینک دامنه خود (که به .hosted.app ختم می‌شود) در زیر دامنه‌ها کلیک کنید تا آن را باز کنید و برنامه تازه مستقر شده را مشاهده کنید!

تبریک می‌گویم، شما برنامه وب اولیه را مستقر کرده‌اید! بیایید کمی بیشتر بررسی کنیم.

۸. برنامه وب را در یک مرورگر امتحان کنید

تأیید کنید که می‌توانید با احراز هویت Firebase وارد شوید

  1. در مرورگر خود، صفحه‌ای که برنامه وب شما را نمایش می‌دهد، رفرش کنید.
  2. روی ورود با گوگل کلیک کنید.
  3. از سیستم خارج شوید و دوباره وارد شوید. صفحه بدون نیاز به رفرش کردن صفحه، به صورت آنی به‌روزرسانی می‌شود. می‌توانید این مرحله را با کاربران مختلف تکرار کنید.
  4. اختیاری: در مرورگر خود، برنامه وب را رفرش کنید. روی برنامه وب کلیک راست کنید، گزینه View page source را انتخاب کنید و نام نمایشی را جستجو کنید. این نام در منبع HTML خام برگردانده شده از سرور نمایش داده می‌شود.

مشاهده اطلاعات رستوران

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

برای وارد کردن داده‌های رستوران ساختگی در پایگاه داده Cloud Firestore خود، انتخاب کنید 2cf67d488d8e6332.png > رستوران‌های نمونه را اضافه کنید .

تأیید کنید که لیست رستوران‌ها در زمان اجرای سرور بارگذاری می‌شود

با استفاده از فریم‌ورک Next.js، ممکن است مشخص نباشد که داده‌ها چه زمانی در زمان اجرای سرور یا زمان اجرای سمت کلاینت بارگذاری می‌شوند.

برای تأیید اینکه لیست رستوران‌ها در زمان اجرای سرور بارگذاری می‌شود، این مراحل را دنبال کنید:

  1. در برنامه وب، DevTools را باز کنید و جاوا اسکریپت را غیرفعال کنید . غیرفعال کردن جاوا اسکریپت در DevTools
  2. برنامه وب را رفرش کنید. فهرست رستوران‌ها هنوز بارگذاری می‌شود. اطلاعات رستوران در پاسخ سرور بازگردانده می‌شود. وقتی جاوا اسکریپت فعال باشد، اطلاعات رستوران از طریق کد جاوا اسکریپت سمت کلاینت نمایش داده می‌شود.
  3. در DevTools، جاوا اسکریپت را دوباره فعال کنید .
  4. در برنامه وب، انتخاب کنید 27ca5d1e8ed8adfe.png > رستوران‌های نمونه را اضافه کنید . اگر تابع snapshot شما به درستی پیاده‌سازی شده باشد، رستوران‌ها بدون نیاز به رفرش صفحه و به صورت بلادرنگ نمایش داده می‌شوند.

افزودن نقد و بررسی برای رستوران

برای افزودن نظر و تأیید اینکه در Cloud Firestore درج شده است، این مراحل را دنبال کنید:

  1. برنامه وب را رفرش کنید و یک رستوران را از صفحه اصلی انتخاب کنید.
  2. در صفحه رستوران، کلیک کنید 3e19beef78bb0d0e.png .
  3. رتبه‌بندی ستاره‌ای را انتخاب کنید.
  4. نقد بنویسید.
  5. روی ارسال کلیک کنید. نظر شما در بالای لیست نظرات نمایش داده می‌شود.

۹. خلاصه نظرات رستوران‌ها را با هوش مصنوعی مولد بنویسید

در این بخش، شما یک ویژگی خلاصه نظرات اضافه خواهید کرد تا کاربر بتواند بدون نیاز به خواندن تک تک نظرات، به سرعت متوجه شود که همه در مورد یک رستوران چه فکری می‌کنند.

یک کلید API Gemini را در Cloud Secret Manager ذخیره کنید

میزبانی برنامه با Cloud Secret Manager ادغام می‌شود تا به شما امکان دهد مقادیر حساس مانند کلیدهای API را به صورت ایمن ذخیره کنید.

  1. برای استفاده از API جمینی، به یک کلید API نیاز دارید. یک کلید در Google AI Studio ایجاد کنید .
    وقتی از شما خواسته شد، همان پروژه‌ای را که برای این آزمایشگاه کد استفاده کرده‌اید انتخاب کنید (در پشت صحنه، یک پروژه Firebase یک پروژه Google Cloud است).
  2. در ترمینال درون IDX، این دستور را برای ایجاد یک راز جدید اجرا کنید: 
    firebase apphosting:secrets:set gemini-api-key
  3. وقتی از شما مقدار مخفی خواسته شد، کلید API Gemini خود را از Google AI Studio کپی و جایگذاری کنید.
  4. اگر از شما پرسیده شد: "To use this secret, your backend's service account must be granted access. Would you like to grant access now?" ، برای انتخاب بله ، Enter فشار دهید.
  5. وقتی از شما پرسیده شد که آیا رمز جدید باید به apphosting.yaml اضافه شود، برای پذیرش Y را وارد کنید، سپس Enter فشار دهید تا GEMINI_API_KEY را به عنوان نام متغیر محیطی انتخاب کنید.

کلید API مربوط به Gemini شما اکنون به طور ایمن در Cloud Secret manager ذخیره شده است و از طریق App Hosting backend شما قابل دسترسی است. همچنین می‌توانید این مقدار را در داشبورد Secrets Manager در Google Cloud Console مشاهده کنید.

  1. فایل apphosting.yaml را باز کنید و توجه داشته باشید که نام رمز شما ثبت شده است، اما مقادیر آن ثبت نشده است. باید شبیه تصویر زیر باشد: 
    runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
    - variable: GEMINI_API_KEY
        secret: gemini-api-key

پیاده‌سازی مؤلفه خلاصه بررسی

  1. در IDX، src/components/Reviews/ReviewSummary.jsx را باز کنید.
  2. تابع GeminiSummary را با کد زیر جایگزین کنید: 
    export async function GeminiSummary({ restaurantId }) {
    const { firebaseServerApp } = await getAuthenticatedAppForUser();
    const reviews = await getReviewsByRestaurantId(
        getFirestore(firebaseServerApp),
        restaurantId
    );

    const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
    const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash-lite",
    safety_settings: [
        {
        category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
        threshold: HarmBlockThreshold.BLOCK_NONE,
        },
    ],
    });
    const reviewSeparator = "@";
    const prompt = `
        Based on the following restaurant reviews,
        where each review is separated by a '${reviewSeparator}' character,
        create a one-sentence summary of what people think of the restaurant.

        Here are the reviews: ${reviews.map(review => review.text).join(reviewSeparator)}
    `;

    try {
        const result = await model.generateContent(prompt);
        const response = await result.response;
        const text = response.text();

        return (
            <div className="restaurant__review_summary">
                <p>{text}</p>
                <p>✨ Summarized with Gemini</p>
            </div>
        );
    } catch (e) {
        console.error(e);
        return <p>Error contacting Gemini</p>;
    }
}
  3. در ترمینال درون IDX، این دستورات را اجرا کنید تا یک کامیت ایجاد شود و آن را به مخزن گیت‌هاب خود ارسال کنید. 
    git commit -a -m "Use AI to summarize reviews"

git push
  4. در کنسول فایربیس، صفحه App Hosting را باز کنید و منتظر بمانید تا انتشار جدید شما تکمیل شود.
  5. در مرورگر خود، روی کارت رستوران کلیک کنید. در بالای صفحه، باید خلاصه‌ای یک جمله‌ای از تمام نظرات مربوط به رستوران را ببینید.
  6. یک نقد جدید اضافه کنید و صفحه را رفرش کنید. باید تغییر خلاصه را ببینید.

۱۰. نتیجه‌گیری

تبریک! شما یاد گرفتید که چگونه از Firebase App Hosting برای استقرار یک برنامه Next.js و از Gemini API برای خلاصه کردن متن استفاده کنید. به طور خاص، از موارد زیر استفاده کردید:

  • میزبانی برنامه Firebase برای ساخت و استقرار خودکار کد Next.js شما هر بار که به یک شاخه GitHub پیکربندی شده ارسال می‌کنید.
  • مدیر راز ابری (یکپارچه با میزبانی برنامه) برای ذخیره ایمن کلید API Gemini شما تا بتوانید ویژگی‌های هوش مصنوعی مولد را در برنامه خود بسازید.

بیشتر بدانید

برای آشنایی با نحوه اضافه کردن احراز هویت فایربیس، کلود فایراستور و کلود استوریج برای فایربیس به این برنامه، به بخش کد کامل «ادغام فایربیس با یک برنامه Next.js» مراجعه کنید.

همچنین، codelab های بیشتری را بررسی کنید: