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

1. قبل از شروع

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

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

• ساخت و استقرار خودکار: این کد لبه به شما نشان می دهد که چگونه از میزبانی برنامه Firebase برای ساخت و استقرار خودکار کد Next.js خود هر بار که به یک شاخه پیکربندی شده فشار می دهید، استفاده کنید.
• ورود و خروج: برنامه وب تکمیل شده به کاربران اجازه می دهد با Google وارد/خروج شوند. ورود و تداوم کاربر به طور کامل از طریق Firebase Authentication مدیریت می شود.
• تصاویر: برنامه وب تکمیل شده به کاربرانی که وارد سیستم شده اند اجازه می دهد تصاویر رستوران را آپلود کنند. دارایی های تصویر در Cloud Storage برای Firebase ذخیره می شوند. Firebase JavaScript SDK یک URL عمومی برای تصاویر آپلود شده فراهم می کند. سپس این URL عمومی در سند رستوران مربوطه در Cloud Firestore ذخیره می‌شود.
• فیلترها: برنامه وب تکمیل‌شده به کاربرانی که وارد سیستم شده‌اند اجازه می‌دهد فهرست رستوران‌ها را بر اساس دسته، مکان و قیمت فیلتر کنند. همچنین می توانید روش مرتب سازی مورد استفاده را سفارشی کنید. داده ها از Cloud Firestore قابل دسترسی هستند و پرس و جوهای Firestore بر اساس فیلترهای استفاده شده اعمال می شوند.
• نظرات: برنامه وب تکمیل‌شده به کاربرانی که وارد سیستم شده‌اند اجازه می‌دهد نظرات رستوران‌هایی را که شامل رتبه‌بندی ستاره و پیام متنی هستند، ارسال کنند. اطلاعات مرور در Cloud Firestore ذخیره می شود.
• خلاصه بررسی: برنامه وب تکمیل شده به طور خودکار نظرات را با استفاده از مدل Gemini خلاصه می کند. خلاصه های تولید شده توسط هوش مصنوعی در Cloud Firestore ذخیره می شوند.

پیش نیازها

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

چیزی که یاد خواهید گرفت

• نحوه استفاده از Firebase با روتر برنامه Next.js و رندر سمت سرور
• چگونه می توان تماس ها را با استفاده از Secrets فقط سمت سرور به Gemini API مجاز کرد

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

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

2. محیط توسعه و مخزن GitHub خود را راه اندازی کنید

این لبه کد پایه کد شروع برنامه را فراهم می کند و به Firebase CLI و IDX.dev متکی است.

یک مخزن جدید GitHub ایجاد کنید و آن را به IDX وارد کنید

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

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

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

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

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

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

• nextjs-start : حاوی کد شروع برای لبه کامل کد «ادغام Firebase با برنامه Next.js» است .
• nextjs-end : حاوی کد راه حل برای برنامه وب تمام شده است.

منبع 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
   

اکنون باید کد شروع را در مخزن GitHub خود مشاهده کنید.

3. پایگاه کد استارتر را مرور کنید

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

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

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

اجزای سرور و مشتری

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

بیانیه های وارداتی

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

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

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

API های مخصوص Firebase

تمام کدهای Firebase API در پوشه src/lib/firebase پیچیده شده است. سپس اجزای React فردی، توابع پیچیده شده را از دایرکتوری src/lib/firebase وارد می کنند، نه اینکه توابع Firebase را مستقیما وارد کنند.

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

اطلاعات تقلبی رستوران و بررسی در فایل src/lib/randomData.js موجود است. داده های آن فایل در کد موجود در فایل src/lib/fakeRestaurants.js جمع آوری می شود.

4. پروژه Firebase خود را راه اندازی کنید

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

یک پروژه Firebase ایجاد کنید

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

طرح قیمت گذاری Firebase خود را ارتقا دهید

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

• حساب Cloud Billing به یک روش پرداخت مانند کارت اعتباری نیاز دارد.
• اگر تازه وارد Firebase و Google Cloud هستید، بررسی کنید که آیا واجد شرایط دریافت اعتبار 300 دلاری و یک حساب آزمایشی رایگان Cloud Billing هستید یا خیر.
• اگر این نرم‌افزار کد را به‌عنوان بخشی از یک رویداد انجام می‌دهید، از سازمان‌دهنده خود بپرسید که آیا اعتبارات Cloud موجود است یا خیر.

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

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

5. یک باطن میزبانی برنامه ایجاد کنید

در این بخش، یک App Hosting Backend را برای تماشای یک شعبه در مخزن git خود راه اندازی خواهید کرد. همچنین تمام سرویس هایی را که باطن با آنها صحبت می کند، پیکربندی می کنید.

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

یک Backend ایجاد کنید

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

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

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

6. سایر خدمات Firebase را راه اندازی کنید

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

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

1. در کنسول Firebase، به Authentication بروید.
2. روی Get start کلیک کنید.
3. در ستون ارائه دهندگان اضافی ، روی Google > فعال کردن کلیک کنید.
   1. در کادر متنی نام عمومی برای پروژه ، نامی مانند My FriendlyEatsCodelab app وارد کنید.
   2. از ایمیل کشویی پشتیبانی برای پروژه ، آدرس ایمیل خود را انتخاب کنید.
   3. روی ذخیره کلیک کنید.
4. روی تب تنظیمات در صفحه تأیید هویت کلیک کنید.
   1. از منوی سمت چپ در صفحه روی گزینه Authorized Domains کلیک کنید.
   2. روی Add Domain کلیک کنید، و سپس دامنه App Hosting تازه ایجاد شده خود را اضافه کنید (به .hosted.app ختم می شود).
   3. برای ذخیره روی Add کلیک کنید.

Cloud Firestore را راه اندازی کنید

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

Cloud Storage را برای Firebase تنظیم کنید

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

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

اکنون که یک پروژه 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 را وارد کنید. هر کدام از گزینه ها برای این کد لبه کار می کند.
3. در مرورگر خود، حساب Google خود را انتخاب کنید و سپس روی Allow کلیک کنید.

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

کدی که در مخزن GitHub خود کپی کرده‌اید، مجموعه‌ای از قوانین امنیتی برای 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 فشار دهید تا Yes را انتخاب کنید.

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

1. در کنسول Firebase، موارد زیر را انجام دهید:
   1. به تنظیمات پروژه خود بروید.
   2. به سمت پایین به بخش برنامه های شما بروید و سپس برنامه ای را با همان نام باطن میزبانی برنامه خود انتخاب کنید.
   3. در زیر تنظیمات و پیکربندی SDK ، گزینه Config را انتخاب کنید، سپس ویژگی های متغیر firebaseConfig و مقادیر آنها را کپی کنید.
2. در IDX موارد زیر را انجام دهید:
   1. فایل apphosting.yaml باز کنید. این جایی است که متغیرهای محیطی خود را در میزبانی برنامه، و همچنین رازها و پیکربندی زمان اجرا را تنظیم خواهید کرد.
   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. به کنسول Firebase برگردید و به صفحه میزبانی برنامه برگردید و سپس کارهای زیر را انجام دهید:
   1. برای باطن خود روی View Dashboard کلیک کنید.
   2. توجه داشته باشید که یک ساخت جدید از فشار git شما ایجاد شده است! این کار باید حدود 3 دقیقه طول بکشد تا ساخت و ارائه به Cloud Run تمام شود. شما می توانید پیشرفت آن را با کلیک کردن بر روی تراشه build- ID نظارت کنید.
   3. برای بررسی اینکه آیا عرضه به پایان رسیده است، صفحه کنسول را بازخوانی کنید. پس از تکمیل، روی پیوند دامنه خود (که به .hosted.app ختم می شود) در زیر دامنه ها کلیک کنید تا آن را باز کنید و برنامه تازه نصب شده را مشاهده کنید!

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

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

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

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

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

برنامه وب شامل داده های ساختگی برای رستوران ها و نظرات است.

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

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

با استفاده از چارچوب Next.js، زمانی که داده ها در زمان اجرای سرور یا زمان اجرای سمت کلاینت بارگیری می شوند، ممکن است واضح نباشد.

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

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

نظرات را برای یک رستوران اضافه کنید

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

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

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

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

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

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

1. برای استفاده از Gemini API، به یک کلید API نیاز دارید. یک کلید در Google AI Studio ایجاد کنید .
   وقتی از شما خواسته شد، همان پروژه ای را که برای این کد لبه استفاده می کردید انتخاب کنید (پشت صحنه، پروژه Firebase یک پروژه Google Cloud است).
2. در ترمینال داخل IDX، این دستور را برای ایجاد یک راز جدید اجرا کنید:

   firebase apphosting:secrets:set gemini-api-key
   

3. هنگامی که مقدار مخفی از شما خواسته شد، کلید Gemini API خود را از 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 فشار دهید تا Yes را انتخاب کنید.
5. وقتی از شما پرسیده شد که آیا راز جدید باید به apphosting.yaml اضافه شود، Y را وارد کنید تا بپذیرید، سپس Enter فشار دهید تا GEMINI_API_KEY را به عنوان نام متغیر محیطی انتخاب کنید.

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

6. فایل 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-1.5-flash",
       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، این دستورات را اجرا کنید تا یک commit ایجاد کنید و آن را به مخزن GitHub خود فشار دهید.

   git commit -a -m "Use AI to summarize reviews"
   
   git push
   

4. در کنسول Firebase، صفحه میزبانی برنامه را باز کنید و منتظر بمانید تا عرضه جدیدتان تکمیل شود.
5. در مرورگر خود، روی کارت رستوران کلیک کنید. در بالای صفحه، باید خلاصه یک جمله ای از تمام نظرات رستوران را ببینید.
6. یک بررسی جدید اضافه کنید و صفحه را بازخوانی کنید. شما باید تغییر خلاصه را ببینید.

10. نتیجه گیری

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

• میزبانی برنامه Firebase برای ساخت و استقرار خودکار کد Next.js شما هر بار که به یک شاخه GitHub پیکربندی شده فشار دهید.
• Cloud Secret Manager (ادغام شده با App Hosting) برای ذخیره ایمن کلید Gemini API شما به طوری که بتوانید ویژگی های هوش مصنوعی مولد را در برنامه خود ایجاد کنید.

بیشتر بدانید

برای اینکه بدانید چگونه Firebase Authentication، Cloud Firestore و Cloud Storage برای Firebase را به این برنامه اضافه کردیم، در لبه کد کامل "Integrate Firebase with a Next.js" جستجو کنید.

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

• Cloud Firestore Web codelab
• Firebase Angular Web Frameworks Codelab
• از داده های Firestore خود با کد لبه قوانین امنیتی Firebase محافظت کنید