این راهنما به شما نشان می‌دهد که چگونه App Prototyping agent برای توسعه و انتشار سریع یک برنامه فول‌استک با کمک Gemini در Firebase استفاده کنید. شما از یک اعلان زبان طبیعی برای تولید یک برنامه Next.js استفاده خواهید کرد که اقلام غذایی را از تصویر یا دوربین درون مرورگر ارائه شده توسط کاربر وارد شده شناسایی می‌کند و دستور غذایی را تولید می‌کند که حاوی مواد تشکیل‌دهنده شناسایی شده است. سپس کاربران می‌توانند دستور غذا را در یک پایگاه داده قابل جستجو ذخیره کنند.
سپس، قبل از انتشار نهایی در Firebase App Hosting ، برنامه را اصلاح و بهبود خواهید بخشید.
سایر فناوری‌هایی که در ادامه این راهنما از آنها استفاده خواهید کرد عبارتند از:
- یک فضای کاری Firebase Studio
- یک پروژه فایربیس
- Firebase App Hosting
- Cloud Firestore
- Firebase Authentication
- Firebase App Check
مرحله ۱: برنامه خود را تولید کنید
وارد حساب گوگل خود شوید و Firebase Studio باز کنید.
در فیلد «نمونه اولیه یک برنامه با هوش مصنوعی» ، عبارت زیر را وارد کنید که یک برنامه دستور پخت مبتنی بر تصویر ایجاد می‌کند که از دوربین مرورگر و هوش مصنوعی مولد استفاده می‌کند.
برای مثال، می‌توانید برای ایجاد یک برنامه تولید دستور پخت، دستوری مانند زیر وارد کنید:
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 بگویید که از آن استفاده کند. حجم تصاویر باید کمتر از ۳ مگابایت باشد.
روی نمونه اولیه با هوش مصنوعی کلیک کنید.
عامل نمونه‌سازی اولیه برنامه، بر اساس درخواست شما، طرح اولیه برنامه را تولید می‌کند و نام پیشنهادی برنامه، ویژگی‌های مورد نیاز و دستورالعمل‌های سبک را برمی‌گرداند.
طرح اولیه را بررسی کنید. در صورت لزوم، چند تغییر ایجاد کنید. به عنوان مثال، می‌توانید نام یا طرح رنگی پیشنهادی برنامه را با استفاده از یکی از این گزینه‌ها تغییر دهید:
روی سفارشی‌سازی کلیک کنید و طرح اولیه را مستقیماً ویرایش کنید. تغییرات خود را اعمال کنید و روی ذخیره کلیک کنید.
در فیلد «توضیح دهید...» در پنجره چت، سوالات و توضیحات تکمیلی اضافه کنید. همچنین می‌توانید تصاویر بیشتری آپلود کنید.
روی «نمونه اولیه این برنامه» کلیک کنید.
عامل نمونه‌سازی اولیه برنامه، کدنویسی برنامه شما را آغاز می‌کند.
- از آنجا که برنامه شما از هوش مصنوعی استفاده می‌کند، از شما خواسته می‌شود که یک کلید API Gemini اضافه یا تولید کنید. اگر روی تولید خودکار کلیک کنید، App Prototyping agent یک پروژه Firebase و یک کلید API Gemini برای شما فراهم می‌کند.
مرحله ۲: آزمایش، اصلاح، اشکال‌زدایی و تکرار
پس از تولید اولیه برنامه، می‌توانید آن را آزمایش، اصلاح، اشکال‌زدایی و تکرار کنید.
بررسی و تعامل با برنامه: پس از اتمام تولید کد، پیش‌نمایشی از برنامه شما ظاهر می‌شود. می‌توانید مستقیماً با پیش‌نمایش تعامل داشته باشید تا آن را آزمایش کنید. برای اطلاعات بیشتر به پیش‌نمایش برنامه مراجعه کنید.
افزودن احراز هویت Cloud Firestore و Firebase Authentication : در طول مرحله تکرار، می‌توانید از App Prototyping agent بخواهید که احراز هویت کاربر و یک پایگاه داده را با استفاده از Cloud Firestore و Firebase Authentication اضافه کند. به عنوان مثال، به کاربران امکان ذخیره و دانلود دستور العمل‌ها را با اعلانی مانند زیر بدهید:
Add user authentication to the app. Authenticated users can: - Download the recipe and its generated image as a PDF (Print). - Save the recipe as public or private and make accessible to a search feature. For now, just save the text, not the image, to the database. Important: Only authenticated users can download the PDF.رفع هرگونه خطایی در هنگام وقوع: در بیشتر موارد، App Prototyping agent از شما می‌خواهد که هرگونه خطایی را که رخ می‌دهد، برطرف کنید. برای اینکه بتوانید اقدام به رفع آن کنید، روی رفع خطا کلیک کنید.
اگر خطاهایی دریافت کردید که از شما خواسته نشد به طور خودکار آنها را برطرف کنید، خطا و هرگونه متن مرتبط (مثلاً «آیا می‌توانید این خطا را در کد مقداردهی اولیه Firebase من برطرف کنید؟») را در پنجره چت کپی کرده و برای Gemini ارسال کنید.
با استفاده از زبان طبیعی، برنامه خود را به طور کامل آزمایش کنید و با App Prototyping agent همکاری کنید تا کد و طرح اولیه را تا زمانی که از آن راضی باشید، تکرار کنید.
در Prototyper view, you can also use the following features:
کلیک
برای رسم مستقیم در پنجره پیش‌نمایش، حاشیه‌نویسی کنید . از ابزارهای شکل، تصویر و متن موجود، به همراه یک متن اختیاری، برای توصیف بصری آنچه می‌خواهید App Prototyping agent تغییر دهد، استفاده کنید.کلیک
برای انتخاب یک عنصر خاص و وارد کردن دستورالعمل‌ها برای App Prototyping agent ، آن را انتخاب کنید . این به شما امکان می‌دهد تا به سرعت یک آیکون، دکمه، متن یا عنصر خاص دیگر را هدف قرار دهید. وقتی روی یک تصویر کلیک می‌کنید، می‌توانید یک تصویر آماده را از Unsplash جستجو و انتخاب کنید.
به صورت اختیاری، می‌توانید کلیک کنید
برای اشتراک‌گذاری عمومی و موقت برنامه خود با استفاده از پیش‌نمایش‌های عمومی Firebase Studio ، لینک پیش‌نمایش را به اشتراک بگذارید .ایجاد یک پروژه Firebase: عامل نمونه‌سازی برنامه ، زمانی که شما:
- تولید خودکار کلید API جمینی
- درخواست اتصال برنامه شما به یک پروژه Firebase
- برای اتصال برنامه خود به سرویس‌های Firebase، مانند Cloud Firestore یا Firebase Authentication درخواست کمک کنید.
- روی دکمه انتشار کلیک کنید و Firebase App Hosting تنظیم کنید
برای تغییر پروژه Firebase متصل به فضای کاری خود، شناسه پروژه‌ای را که می‌خواهید استفاده کنید، به App Prototyping agent ارسال کنید. برای مثال، "Switch to Firebase project with ID
<your-project-id>".برنامه را آزمایش کنید و قوانین پایگاه داده Cloud Firestore را تأیید کنید: در صفحه پیش‌نمایش برنامه، تصویری را که غذاهای مختلف را نشان می‌دهد بارگذاری کنید تا توانایی برنامه خود را در شناسایی مواد تشکیل‌دهنده و تولید و ذخیره دستور العمل‌ها آزمایش کنید.
به عنوان کاربران مختلف وارد سیستم شوید و دستور پخت ایجاد کنید: مطمئن شوید که کاربران احراز هویت شده می‌توانند دستور پخت‌ها و دستور پخت‌های خصوصی خود را ببینند و همه کاربران دستور پخت‌های عمومی را ببینند.
وقتی App Prototyping agent می‌خواهید که Cloud Firestore اضافه کند، قوانین پایگاه داده Cloud Firestore را برای شما می‌نویسد و مستقر می‌کند. قوانین را در کنسول Firebase مرور کنید.
اشکال‌زدایی و تکرار مستقیم در کد: کلیک
برای باز کردن نمای Code ، به Code بروید ، جایی که می‌توانید تمام فایل‌های برنامه خود را ببینید و مستقیماً کد خود را تغییر دهید. می‌توانید Prototyper mode at any time.در نمای Code ، می‌توانید از ویژگی‌های مفید زیر نیز استفاده کنید:
ویژگی‌های اشکال‌زدایی و گزارش‌دهی داخلی Firebase Studio برای بازرسی، اشکال‌زدایی و ممیزی برنامه شما.
کمک هوش مصنوعی با استفاده از Gemini چه به صورت درون‌خطی در کد شما و چه با استفاده از چت تعاملی Gemini (هر دو به صورت پیش‌فرض در دسترس هستند). چت تعاملی می‌تواند مشکلات را تشخیص دهد، راه‌حل ارائه دهد و ابزارهایی را برای کمک به رفع سریع‌تر برنامه شما اجرا کند. برای دسترسی به چت، روی spark Gemini در پایین فضای کاری کلیک کنید.
برای مشاهده داده‌های پایگاه داده و احراز هویت، به Firebase Local Emulator Suite دسترسی پیدا کنید . برای باز کردن شبیه‌ساز در فضای کاری خود:
کلیک
به بخش Code بروید و افزونه‌ی Firebase Studio را باز کنید ( Ctrl+',Ctrl+'یاCmd+',Cmd+'در مک‌او‌اس).به قسمت پورت‌های بک‌اند بروید و آن را باز کنید.
در ستون «اقدامات» که مربوط به پورت ۴۰۰۰ است، روی «باز کردن در پنجره جدید» کلیک کنید.
عملکرد ویژگی‌های هوش مصنوعی مولد خود را آزمایش و اندازه‌گیری کنید: می‌توانید از رابط کاربری توسعه‌دهنده Genkit برای اجرای جریان‌های هوش مصنوعی Genkit، آزمایش، اشکال‌زدایی، تعامل با مدل‌های مختلف، اصلاح دستورالعمل‌ها و موارد دیگر استفاده کنید.
برای بارگذاری جریان‌های Genkit خود در رابط کاربری توسعه‌دهنده Genkit و شروع آزمایش:
از ترمینال موجود در فضای کاری Firebase Studio خود، دستور زیر را برای دریافت کلید API Gemini و شروع سرور Genkit اجرا کنید:
npm run genkit:watchروی لینک رابط کاربری توسعه‌دهنده Genkit کلیک کنید. رابط کاربری توسعه‌دهنده Genkit در یک پنجره جدید با جریان‌ها، اعلان‌ها، جاسازی‌کننده‌ها و مجموعه‌ای از مدل‌های مختلف موجود باز می‌شود.
برای اطلاعات بیشتر در مورد رابط کاربری توسعه‌دهنده Genkit، به Genkit Developer Tools مراجعه کنید.
(اختیاری) مرحله ۳: انتشار برنامه خود با App Hosting
بعد از اینکه برنامه خود را آزمایش کردید و از آن در فضای کاری خود راضی بودید، می‌توانید آن را با Firebase App Hosting در وب منتشر کنید.
وقتی App Hosting راه‌اندازی می‌کنید، Firebase Studio یک پروژه Firebase برای شما ایجاد می‌کند (اگر قبلاً با تولید خودکار کلید API Gemini یا سایر سرویس‌های backend، پروژه‌ای ایجاد نشده باشد) و شما را در اتصال یک حساب Cloud Billing راهنمایی می‌کند.
برای انتشار برنامه خود:
برای تنظیم پروژه Firebase و انتشار برنامه خود، روی Publish کلیک کنید. پنجره Publish your app ظاهر می‌شود.
در مرحله پروژه Firebase ، App Prototyping agent پروژه Firebase مرتبط با فضای کاری را نمایش می‌دهد. اگر پروژه Firebase از قبل وجود نداشته باشد، App Prototyping agent یک پروژه جدید برای شما ایجاد می‌کند. برای ادامه روی Next کلیک کنید.
در مرحله حساب Link Cloud Billing ، یکی از موارد زیر را انتخاب کنید:
حساب Cloud Billing که می‌خواهید به پروژه Firebase خود پیوند دهید را انتخاب کنید.
اگر حساب Cloud Billing ندارید یا می‌خواهید یک حساب جدید ایجاد کنید، روی «ایجاد یک حساب Cloud Billing کلیک کنید. این کار کنسول Google Cloud را باز می‌کند، جایی که می‌توانید یک حساب Cloud Billing سلف سرویس جدید ایجاد کنید . پس از ایجاد حساب، به Firebase Studio برگردید و حساب را از لیست Link Cloud Billing انتخاب کنید.
روی Next کلیک کنید. Firebase Studio حساب صورتحساب را به پروژه مرتبط با فضای کاری شما پیوند می‌دهد، که یا هنگام تولید خودکار کلید API Gemini یا هنگام کلیک روی Publish ایجاد شده است.
روی راه‌اندازی سرویس‌ها کلیک کنید. عامل نمونه‌سازی برنامه، تأمین سرویس‌های Firebase را آغاز می‌کند.
روی «انتشار اکنون» کلیک کنید. Firebase Studio سرویس‌های فایربیس را راه‌اندازی می‌کند و سپس بخش App Hosting را راه‌اندازی می‌کند. تکمیل این مرحله ممکن است تا چند دقیقه طول بکشد. برای کسب اطلاعات بیشتر در مورد آنچه در پشت صحنه اتفاق می‌افتد، به فرآیند ساخت App Hosting مراجعه کنید.
وقتی مرحله انتشار کامل شد، نمای کلی برنامه با یک URL و اطلاعات برنامه که توسط قابلیت مشاهده App Hosting ارائه می‌شود، ظاهر می‌شود. برای استفاده از یک دامنه سفارشی (مانند example.com یا app.example.com) به جای دامنه تولید شده توسط Firebase، می‌توانید یک دامنه سفارشی در کنسول Firebase اضافه کنید.
برای اطلاعات بیشتر در مورد App Hosting ، به بخش «درک App Hosting و نحوه عملکرد آن» مراجعه کنید.
(توصیه می‌شود) مرحله ۴: برنامه منتشر شده خود را آزمایش کنید
وقتی انتشار کامل شد و برنامه شما در Firebase مستقر شد، Cloud Firestore و Firebase Authentication آماده آزمایش در محیط عملیاتی هستند.
مشاهده داده‌های احراز هویت Cloud Firestore و Firebase Authentication در کنسول Firebase
شما می‌توانید داده‌های زنده‌ی برنامه‌ی خود را پس از انتشار، در کنسول Firebase مشاهده کنید.
برای مشاهده پایگاه داده زنده Cloud Firestore خود، کنسول Firebase را باز کنید و از منوی ناوبری، Build > Firestore Database را انتخاب کنید.
از اینجا، می‌توانید داده‌های ذخیره شده را بررسی کنید، قوانین امنیتی خود را مشاهده و آزمایش کنید و ایندکس ایجاد کنید. برای اطلاعات بیشتر به Cloud Firestore مراجعه کنید.
برای مشاهده داده‌های Firebase Authentication خود، کنسول Firebase را باز کنید و از منوی ناوبری، Build > Authentication را انتخاب کنید.
از اینجا، می‌توانید پیکربندی احراز هویت و کاربران برنامه خود را بررسی کنید. برای اطلاعات بیشتر به Firebase Authentication مراجعه کنید.
قوانین تست Cloud Firestore در محیط عملیاتی
پس از انتشار برنامه، باید قوانین امنیتی Cloud Firestore خود را دوباره در برابر محیط تولید خود آزمایش کنید. این به شما کمک می‌کند تا اطمینان حاصل کنید که داده‌های شما برای کاربران مجاز قابل دسترسی است و از دسترسی غیرمجاز محافظت می‌شود.
شما می‌توانید قوانین خود را با استفاده از تمام روش‌های زیر آزمایش کنید:
تست برنامه : با برنامه‌ی مستقر شده‌ی خود تعامل داشته باشید و عملیاتی را انجام دهید که الگوهای مختلف دسترسی به داده‌ها (خواندن، نوشتن، حذف) را برای نقش‌ها یا حالت‌های مختلف کاربر فعال می‌کند. این تست در دنیای واقعی به تأیید اجرای صحیح قوانین شما در عمل کمک می‌کند.
Rules Playground : برای بررسی‌های هدفمند، از Rules Playground در کنسول Firebase استفاده کنید. این ابزار به شما امکان می‌دهد درخواست‌ها (خواندن، نوشتن، حذف) را با استفاده از قوانین تولید خود در پایگاه داده Cloud Firestore شبیه‌سازی کنید. می‌توانید وضعیت احراز هویت کاربر، مسیر داده‌ها و نوع عملیات را مشخص کنید تا ببینید آیا قوانین شما دسترسی را طبق برنامه مجاز یا غیرمجاز می‌دانند.
تست واحد : برای تست جامع‌تر، می‌توانید تست‌های واحد برای قوانین امنیتی خود بنویسید. پیش‌نمایش Firebase Studio که توسط Firebase Local Emulator Suite پشتیبانی می‌شود، به شما امکان می‌دهد این تست‌ها را به صورت محلی اجرا کنید و رفتار قوانین تولید خود را شبیه‌سازی کنید. این یک روش قوی برای تأیید منطق پیچیده قوانین و تأیید پوشش برای سناریوهای مختلف است. پس از استقرار، باید دوباره بررسی کنید که تست‌های واحد شما با استفاده از شبیه‌ساز مطابق انتظار کار می‌کنند و همه سناریوها را پوشش می‌دهند.