این راهنما به شما نشان میدهد که چگونه از App Prototyping agent برای توسعه و انتشار سریع یک برنامه تمام پشته با کمک Gemini در Firebase استفاده کنید. برای ایجاد یک برنامه Next.js که اقلام غذایی را از تصویر یا دوربین درون مرورگر شناسایی می کند و دستور پختی حاوی مواد شناسایی شده را تولید می کند، از یک دستور زبان طبیعی استفاده خواهید کرد.
فناوری های دیگری که در ادامه این راهنما از آنها استفاده خواهید کرد عبارتند از:
مرحله 1: برنامه خود را ایجاد کنید
وارد حساب Google خود شوید و Firebase Studio باز کنید.
در قسمت Prototype an app with AI ، اعلان زیر را وارد کنید، که یک برنامه دستور العمل مبتنی بر تصویر ایجاد می کند که از دوربین مرورگر و هوش مصنوعی مولد استفاده می کند.
به عنوان مثال، می توانید برای ایجاد یک برنامه تولید دستور غذا، یک اعلان مانند زیر وارد کنید:
Use secure coding practices to create an error-free web app that lets users upload a photo or take a picture with their browser camera. The app identifies the food in the picture and generates a recipe and accompanying image that includes that food. If no food product is identified, generate a random dessert recipe.
در صورت تمایل، تصویری را برای همراهی با درخواست خود آپلود کنید. به عنوان مثال، می توانید تصویری را آپلود کنید که حاوی طرح رنگی است که می خواهید برنامه شما استفاده کند و به Firebase Studio بگویید از آن استفاده کند. حجم تصاویر باید کمتر از 3 مگابایت باشد.
روی Prototype with AI کلیک کنید.
Gemini یک طرح اولیه برنامه را بر اساس درخواست شما ایجاد می کند و نام برنامه پیشنهادی، ویژگی های مورد نیاز و دستورالعمل های سبک را برمی گرداند.
طرح را مرور کنید. در صورت لزوم، چند تغییر ایجاد کنید. برای مثال، میتوانید نام برنامه یا طرح رنگ پیشنهادی را با استفاده از یکی از این گزینهها تغییر دهید:
در قسمت توصیف... در صفحه چت، سؤالات و زمینه های روشن کننده را اضافه کنید. همچنین می توانید تصاویر اضافی را آپلود کنید.
روی Prototype this app کلیک کنید.
عامل App Prototyping کدگذاری برنامه شما را آغاز می کند.
- از آنجایی که برنامه شما از هوش مصنوعی استفاده می کند، از شما خواسته می شود یک کلید API Gemini اضافه یا ایجاد کنید. اگر روی Auto-generate کلیک کنید، App Prototyping agent یک پروژه Firebase و یک کلید API Gemini را برای شما فراهم می کند.
مرحله 2: تست، اصلاح، اشکال زدایی و تکرار
پس از تولید برنامه اولیه، می توانید آزمایش، اصلاح، اشکال زدایی و تکرار کنید.
برنامه خود را مرور کنید و با آن تعامل داشته باشید: پس از تکمیل تولید کد، پیش نمایشی از برنامه شما ظاهر می شود. می توانید مستقیماً با پیش نمایش تعامل داشته باشید تا آن را آزمایش کنید. در پیش نمایش برنامه خود بیشتر بیاموزید.
هر گونه خطا را همانطور که رخ می دهد برطرف کنید: در بیشتر موارد، App Prototyping agent از شما می خواهد که خطاهای ایجاد شده را برطرف کنید. روی Fix Error کلیک کنید تا به آن اجازه داده شود تا اصلاح شود.
اگر خطاهایی دریافت میکنید که از شما خواسته نمیشود آنها را بهطور خودکار برطرف کنید، خطا و هر زمینه مرتبط (مثلاً «آیا میتوانید این خطا را در کد اولیه Firebase من برطرف کنید؟») را در پنجره چت کپی کنید و آن را به Gemini ارسال کنید.
آزمایش و تکرار با استفاده از زبان طبیعی: برنامه خود را کاملاً آزمایش کنید و با App Prototyping agent کار کنید تا کد و طرح اولیه را تکرار کنید تا زمانی که از آن راضی باشید.
هنگامی که در Prototyper mode, you can also use the following features:
کلیک کنید
حاشیه نویسی کنید تا مستقیماً در پنجره پیش نمایش طراحی شود. از ابزارهای موجود شکل، تصویر و متن، همراه با یک اعلان متن اختیاری، برای توصیف بصری آنچه میخواهید App Prototyping agent تغییر دهد، استفاده کنید.
کلیک کنید
برای انتخاب یک عنصر خاص و وارد کردن دستورالعملها برای App Prototyping agent انتخاب کنید . این به شما امکان می دهد به سرعت یک نماد، دکمه، قطعه متن یا عنصر دیگر را هدف قرار دهید. هنگامی که روی یک تصویر کلیک می کنید، همچنین می توانید یک تصویر استوک را از Unsplash جستجو و انتخاب کنید.
در صورت تمایل، می توانید کلیک کنید
پیوند پیش نمایش را به اشتراک بگذارید تا برنامه خود را به صورت عمومی و موقت با استفاده از پیش نمایش های عمومی Firebase Studio به اشتراک بگذارید.
اشکال زدایی و تکرار مستقیم در کد: کلیک کنید
برای باز کردن نمای کد به Code بروید ، جایی که میتوانید همه فایلهای برنامه خود را ببینید و کد خود را مستقیماً تغییر دهید. Prototyper mode at any time.
هنگام مشاهده Code ، می توانید از ویژگی های مفید زیر نیز استفاده کنید:
ویژگی های اشکال زدایی و گزارش داخلی Firebase Studio برای بازرسی، اشکال زدایی و ممیزی برنامه شما.
کمک هوش مصنوعی با استفاده از Gemini در Firebase یا درون کد شما یا با استفاده از چت تعاملی (هر دو به طور پیش فرض در دسترس هستند). چت تعاملی میتواند مشکلات را تشخیص دهد، راهحلهایی ارائه دهد و ابزارهایی را اجرا کند تا به رفع سریعتر برنامه شما کمک کند. برای دسترسی به چت، روی spark Gemini در پایین فضای کاری کلیک کنید.
برای مشاهده پایگاه داده و داده های احراز هویت به Firebase Local Emulator Suite دسترسی داشته باشید . برای باز کردن شبیه ساز در فضای کاری:
کلیک کنید
به Code بروید و افزونه Firebase Studio را باز کنید (
Ctrl+',Ctrl+'
, یاCmd+',Cmd+'
در MacOS).به پورت های Backend بروید و آن را گسترش دهید.
در ستون Actions که مربوط به پورت 4000 است، روی Open in new window کلیک کنید.
عملکرد ویژگی هوش مصنوعی مولد خود را آزمایش و اندازهگیری کنید: میتوانید از رابط کاربری Genkit Developer برای اجرای جریانهای هوش مصنوعی Genkit، آزمایش، اشکالزدایی، تعامل با مدلهای مختلف، اصلاح درخواستها و موارد دیگر استفاده کنید.
برای بارگیری جریانهای Genkit در رابط کاربری توسعهدهنده Genkit و شروع آزمایش:
از ترمینال در فضای کاری Firebase Studio خود، دستور زیر را برای منبع کلید Gemini API خود اجرا کنید و سرور Genkit را راه اندازی کنید:
npm run genkit:watch
روی پیوند Genkit Developer UI کلیک کنید. رابط کاربری توسعهدهنده Genkit در یک پنجره جدید با جریانها، درخواستها، جاسازیها و مجموعهای از مدلهای مختلف موجود باز میشود.
در Genkit Developer Tools درباره رابط کاربری Genkit Developer بیشتر بیاموزید.
(اختیاری) مرحله 3: برنامه خود را با App Hosting منتشر کنید
پس از اینکه برنامه خود را آزمایش کردید و از آن در فضای کاری خود راضی شدید، می توانید آن را با Firebase App Hosting در وب منتشر کنید.
وقتی App Hosting را راهاندازی میکنید، Firebase Studio یک پروژه Firebase برای شما ایجاد میکند (اگر قبلاً با تولید خودکار یک کلید API Gemini ایجاد نشده است) و شما را از طریق پیوند دادن یک حساب Cloud Billing راهنمایی میکند.
برای انتشار اپلیکیشن خود:
برای راهاندازی پروژه Firebase و انتشار برنامه، روی انتشار کلیک کنید. صفحه Publish your app ظاهر می شود.
در مرحله پروژه Firebase ، App Prototyping agent Firebase مرتبط با فضای کاری را نمایش می دهد. اگر در طول تولید کلید Gemini API پروژه ای ایجاد نکرد، یک پروژه جدید برای شما ایجاد می کند. برای ادامه روی Next کلیک کنید.
در مرحله Link Cloud Billing حساب ، یکی از موارد زیر را انتخاب کنید:
حساب Cloud Billing را که میخواهید به پروژه Firebase خود پیوند دهید، انتخاب کنید.
اگر حساب Cloud Billing ندارید یا میخواهید حساب جدیدی ایجاد کنید، روی Create a Cloud Billing کلیک کنید. با این کار کنسول Google Cloud باز میشود، جایی که میتوانید یک حساب کاربری جدید Cloud Billing ایجاد کنید . پس از ایجاد حساب، به Firebase Studio بازگردید و حساب را از لیست Link Cloud Billing انتخاب کنید.
روی Next کلیک کنید. Firebase Studio حساب صورتحساب را به پروژه مرتبط با فضای کاری شما پیوند میدهد، این حساب زمانی ایجاد میشود که یک کلید API Gemini را بهطور خودکار ایجاد کردهاید یا زمانی که روی انتشار کلیک کردهاید.
روی Set up services کلیک کنید. عامل App Prototyping ارائه خدمات Firebase را آغاز می کند.
روی انتشار اکنون کلیک کنید. Firebase Studio خدمات Firebase را راه اندازی می کند. تکمیل این کار ممکن است چند دقیقه طول بکشد. برای کسب اطلاعات بیشتر در مورد آنچه در پشت صحنه اتفاق می افتد، به فرآیند ساخت App Hosting مراجعه کنید.
وقتی مرحله انتشار کامل شد، نمای کلی برنامه با نشانی اینترنتی و اطلاعات آماری برنامه با قابلیت مشاهده App Hosting نمایش داده میشود. برای استفاده از یک دامنه سفارشی (مانند example.com یا app.example.com) به جای دامنه ایجاد شده توسط Firebase، می توانید یک دامنه سفارشی در کنسول Firebase اضافه کنید.
برای اطلاعات بیشتر در مورد App Hosting ، به درک App Hosting و نحوه عملکرد آن مراجعه کنید.
(توصیه می شود) مرحله 6: Firebase App Check به برنامه خود اضافه کنید
اگر سرویسهای Firebase یا Google Cloud را در برنامه خود ادغام کردهاید، Firebase App Check با جلوگیری از دسترسی مشتریان غیرمجاز به منابع Firebase به محافظت از پشتیبانهای برنامه شما در برابر سوء استفاده کمک میکند. هم با سرویسهای Google (از جمله سرویسهای Firebase و Google Cloud) و هم با پشتیبانهای سفارشی شما کار میکند تا منابع شما را ایمن نگه دارد.
توصیه می کنیم برای محافظت از منابع پشتیبان خود در برابر سوء استفاده، به هر برنامه ای که به صورت عمومی پست می کنید، App Check اضافه کنید.
این بخش شما را از طریق راهاندازی App Check در Firebase Studio با استفاده از reCAPTCHA Enterprise برای یک برنامه وب ایجاد شده توسط App Prototyping agent راهنمایی میکند، اما میتوانید App Check در هر برنامهای که خدمات Firebase را اجرا میکند و میتواند ارائهدهندگان سفارشی را پیادهسازی کند، راهاندازی کنید. در Firebase App Check بیشتر بیاموزید.
ReCAPTCHA Enterprise حداکثر 10000 ارزیابی را بدون هزینه ارائه می دهد.
مرحله 1: reCAPTCHA Enterprise را برای برنامه خود راه اندازی کنید
بخش reCAPTCHA Enterprise کنسول Google Cloud را باز کنید.
نام پروژه Firebase خود را از انتخابگر پروژه کنسول Google Cloud انتخاب کنید.
اگر از شما خواسته شد که reCAPTCHA Enterprise API را فعال کنید، این کار را انجام دهید.
روی شروع کلیک کنید و یک نام نمایشی برای کلید سایت reCAPTCHA خود اضافه کنید.
کلید نوع پیشفرض Web Application را بپذیرید.
روی افزودن دامنه کلیک کنید و دامنه اضافه کنید. میخواهید دامنه App Hosting خود (به عنوان مثال
studio-- PROJECT_ID . REGION .hosted.app
) و هر دامنه سفارشی که با برنامه خود استفاده میکنید یا قصد استفاده از آن را دارید اضافه کنید.مرحله بعدی را کلیک کنید.
ترک آیا از چالش ها استفاده می کنی؟ انتخاب نشده است.
روی ایجاد کلید کلیک کنید.
شناسه کلید خود را کپی و ذخیره کنید و به پیکربندی App Check بروید.
مرحله 2: App Check پیکربندی کنید
کنسول Firebase را باز کنید و از منوی پیمایش روی Build > App Check کلیک کنید.
روی شروع کلیک کنید، سپس روی ثبت نام در کنار برنامه خود کلیک کنید.
کلیک کنید تا ReCAPTCHA گسترش یابد و شناسه کلیدی که برای reCAPTCHA Enterprise ایجاد کردهاید جایگذاری کنید.
روی ذخیره کلیک کنید.
مرحله 3: App Check به کد خود اضافه کنید
به Firebase Studio برگردید و در نمای Code ، کلید سایتی را که ایجاد کردهاید به فایل
.env
خود اضافه کنید:NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
اگر قبلاً پیکربندی Firebase خود را در
.env
ذخیره نکردهاید، آن را دریافت کنید:از کنسول Firebase ، تنظیمات پروژه را باز کنید و آن را در قسمتی که با برنامه شما مطابقت دارد پیدا کنید.
از نمای ترمینال در Code :
- وارد Firebase شوید:
firebase auth login
- پروژه خود را انتخاب کنید:
firebase use FIREBASE_PROJECT_ID
- پیکربندی Firebase:
firebase apps:sdkconfig
را دریافت کنید
- وارد Firebase شوید:
پیکربندی را به فایل
.env
خود اضافه کنید تا به شکل زیر باشد:NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
App Check به کد برنامه خود اضافه کنید. میتوانید از Gemini بخواهید که App Check با reCAPTCHA Enterprise به برنامه شما اضافه کند (حتماً «reCAPTCHA Enterprise» را مشخص کنید و حتماً آن را دوباره بررسی کنید!)، یا مراحل Initialize App Check دنبال کنید.
سایت خود را مجدداً در App Hosting منتشر کنید. سعی کنید ویژگی های Firebase خود را برای تولید برخی داده ها آزمایش کنید.
با باز کردن Build > App Check App Check کنید که درخواستها را در کنسول Firebase دریافت میکند.
برای بررسی خدمات Firebase کلیک کنید. پس از تأیید دریافت درخواستها، روی Enforce کلیک کنید تا App Check اجرا شود.
برای Firebase Authentication تأیید و اجرای مجدد را تکرار کنید.
اگر بعد از اینکه برنامه خود را برای App Check ثبت کردید، می خواهید برنامه خود را در محیطی اجرا کنید که App Check معمولاً آن را به عنوان معتبر طبقه بندی نمی کند، مانند محلی در طول توسعه، یا از یک محیط یکپارچه سازی پیوسته (CI)، می توانید یک ساختار اشکال زدایی از برنامه خود ایجاد کنید که به جای ارائه دهنده گواهی واقعی از ارائه دهنده اشکال زدایی App Check استفاده می کند. در استفاده App Check با ارائه دهنده اشکال زدایی در برنامه های وب بیشتر بیاموزید.
(اختیاری) مرحله 7: برنامه خود را نظارت کنید
پانل نمای کلی برنامه در Firebase Studio معیارها و اطلاعات کلیدی را در مورد برنامه شما ارائه می دهد و به شما امکان می دهد با استفاده از ابزارهای مشاهده داخلی App Hosting عملکرد برنامه وب خود را کنترل کنید. پس از انتشار سایت شما، می توانید با کلیک روی انتشار به نمای کلی دسترسی پیدا کنید. از این پنل می توانید:
- برای انتشار نسخه جدیدی از برنامه خود، روی انتشار کلیک کنید.
- پیوند برنامه خود را به اشتراک بگذارید یا برنامه خود را مستقیماً در Visit your app باز کنید.
- خلاصهای از عملکرد برنامهتان در ۷ روز گذشته، شامل تعداد کل درخواستها و وضعیت آخرین عرضهتان را مرور کنید. برای دسترسی به اطلاعات بیشتر در کنسول Firebase ، روی مشاهده جزئیات کلیک کنید.
- نموداری از تعداد درخواستهایی که برنامه شما در 24 ساعت گذشته دریافت کرده است، به تفکیک کد وضعیت HTTP مشاهده کنید.
اگر پانل نمای کلی برنامه را ببندید، میتوانید هر زمان که بخواهید با کلیک روی انتشار دوباره آن را باز کنید.
درباره مدیریت و نظارت بر عرضه App Hosting در مدیریت عرضه و انتشار بیشتر بیاموزید.
(اختیاری) مرحله 8: استقرار خود را به عقب برگردانید
اگر نسخههای متوالی برنامه خود را در App Hosting مستقر کردهاید، میتوانید آن را به یکی از نسخههای قبلی برگردانید. شما همچنین می توانید آن را حذف کنید.
برای بازگرداندن یک سایت منتشر شده:
App Hosting در کنسول Firebase باز کنید.
باطن برنامه خود را پیدا کنید، روی View کلیک کنید و سپس روی Rollouts کلیک کنید.
در کنار توسعهای که میخواهید به آن برگردید، روی More
کلیک کنید، سپس بازگشت به این بیلد را انتخاب کنید و تأیید کنید.
در مدیریت عرضهها و نسخهها بیشتر بیاموزید.
برای حذف دامنه App Hosting از وب:
از کنسول Firebase ، App Hosting باز کنید و روی View در بخش برنامه Firebase Studio کلیک کنید.
در بخش اطلاعات Backend ، روی Manage کلیک کنید. صفحه Domains بارگیری می شود.
در کنار دامنه خود، روی More
کلیک کنید، سپس Disable domain را انتخاب کنید و تأیید کنید.
با این کار دامنه شما از وب حذف می شود. برای حذف کامل باطن App Hosting ، دستورالعملهای موجود در Delete a backend را دنبال کنید.
(اختیاری) مرحله 9: از Genkit Monitoring برای ویژگی های مستقر شده خود استفاده کنید
میتوانید مراحل، ورودیها و خروجیهای ویژگی Genkit خود را با فعال کردن تلهمتری در کد جریان AI خود نظارت کنید. ویژگی تله متری Genkit به شما امکان می دهد عملکرد و استفاده از جریان های هوش مصنوعی خود را نظارت کنید. این دادهها میتوانند به شما کمک کنند تا زمینههای بهبود را شناسایی کنید، مشکلات را عیبیابی کنید، درخواستها و جریانهای خود را برای عملکرد بهتر و کارآمدی هزینه بهینه کنید، و میزان استفاده از جریانهای خود را در طول زمان پیگیری کنید.
برای تنظیم نظارت در Genkit ، تله متری را به جریان های هوش مصنوعی Genkit اضافه می کنید و سپس نتایج را در کنسول Firebase مشاهده می کنید.
مرحله 1: تله متری را به کد جریان Genkit خود در Firebase Studio اضافه کنید
برای تنظیم نظارت در کد خود:
اگر قبلاً در نمای Code نیستید، کلیک کنید
برای باز کردن آن به کد بروید .
برای تأیید نسخه Genkit که نصب شده است،
package.json
بررسی کنید.ترمینال را باز کنید (
Ctrl-Shift-C
یاCmd-Shift-C
در MacOS).داخل ترمینال کلیک کنید و افزونه Firebase را با استفاده از نسخه ای که با فایل
package.json
شما مطابقت دارد نصب کنید. برای مثال، اگر بستههای Genkit درpackage.json
شما 1.0.4 هستند، باید دستور زیر را برای نصب افزونه اجرا کنید:npm i --save @genkit-ai/firebase@1.0.4
از Explorer ،
src > ai > flows
گسترش دهید. یک یا چند فایل TypeScript که حاوی جریان های Genkit شما هستند در پوشهflows
ظاهر می شوند.روی یکی از جریان ها کلیک کنید تا باز شود.
در پایین بخش imports فایل، موارد زیر را برای وارد کردن و فعال کردن
FirebaseTelemetry
اضافه کنید:import { enableFirebaseTelemetry } from '@genkit-ai/firebase'; enableFirebaseTelemetry();
مرحله 2: مجوزها را تنظیم کنید
Firebase Studio هنگام راهاندازی پروژه Firebase ، APIهای مورد نیاز را برای شما فعال کرده است، اما شما همچنین باید مجوزهایی را برای حساب سرویس App Hosting ارائه دهید.
برای تنظیم مجوزها:
کنسول Google Cloud IAM را باز کنید، پروژه خود را انتخاب کنید، سپس نقشهای زیر را به حساب سرویس میزبانی برنامه اختصاص دهید:
- مانیتورینگ متریک رایتر (
roles/monitoring.metricWriter
) - Cloud Trace Agent (
roles/cloudtrace.agent
) - Logs Writer (
roles/logging.logWriter
)
- مانیتورینگ متریک رایتر (
برنامه خود را مجدداً در App Hosting منتشر کنید.
وقتی انتشار کامل شد، برنامه خود را بارگیری کنید و شروع به استفاده از آن کنید. پس از پنج دقیقه، برنامه شما باید شروع به ثبت اطلاعات تله متری کند.
مرحله 3: ویژگی های هوش مصنوعی تولیدی خود را در کنسول Firebase نظارت کنید
وقتی تلهمتری پیکربندی میشود، Genkit تعداد درخواستها، موفقیت و تأخیر را برای همه جریانهای شما ثبت میکند، و برای هر جریان خاص، Genkit معیارهای پایداری را جمعآوری میکند، نمودارهای دقیق را نشان میدهد و ردیابیهای ثبت شده را ثبت میکند.
برای نظارت بر ویژگیهای هوش مصنوعی پیادهسازی شده با Genkit :
پس از پنج دقیقه، Genkit در کنسول Firebase باز کنید و درخواستها و پاسخهای Genkit را بررسی کنید.
Genkit معیارهای پایداری زیر را جمع آوری می کند:
- کل درخواست ها: تعداد کل درخواست های دریافت شده توسط جریان شما.
- میزان موفقیت: درصد درخواست هایی که با موفقیت پردازش شدند.
- تأخیر صدک 95: تأخیر صدک 95 جریان شما، که مدت زمانی است که طول می کشد تا 95 درصد درخواست ها پردازش شوند.
استفاده از توکن:
- نشانه های ورودی: تعداد توکن هایی که در اعلان به مدل ارسال می شود.
- نشانه های خروجی: تعداد نشانه های تولید شده توسط مدل در پاسخ.
استفاده از تصویر:
- تصاویر ورودی: تعداد تصاویر ارسال شده به مدل در اعلان.
- تصاویر خروجی: تعداد تصاویر تولید شده توسط مدل در پاسخ.
اگر معیارهای ثبات را گسترش دهید، نمودارهای دقیق در دسترس هستند:
- درخواست حجم در طول زمان.
- میزان موفقیت در طول زمان
- توکن های ورودی و خروجی در طول زمان
- تأخیر (صدک 95 و 50) در طول زمان.
درباره Genkit در Genkit بیشتر بدانید.
مراحل بعدی
- با نحوه توسعه برنامهها در فضای کاری Firebase Studio آشنا شوید.
- درباره کمک هوش مصنوعی در Firebase Studio بیشتر بیاموزید.