این راهنما به شما نشان می‌دهد که چگونه از App Prototyping agent برای توسعه و انتشار سریع یک برنامه تمام پشته با کمک Gemini در Firebase استفاده کنید. شما از یک درخواست به زبان طبیعی برای ایجاد یک برنامه Next.js استفاده خواهید کرد که مواد غذایی را از یک تصویر یا دوربین درون مرورگر ارائه شده توسط کاربر وارد شده شناسایی می‌کند و دستوری را ایجاد می‌کند که حاوی مواد شناسایی شده است. سپس کاربران می توانند دستور ذخیره را در یک پایگاه داده قابل جستجو انتخاب کنند.
سپس قبل از انتشار در Firebase App Hosting ، برنامه را اصلاح و بهبود خواهید داد.
فناوری های دیگری که در ادامه این راهنما از آنها استفاده خواهید کرد عبارتند از:
- یک فضای کاری Firebase Studio
- یک پروژه Firebase
- Firebase App Hosting
- Cloud Firestore
- Firebase Authentication
- Firebase App Check
مرحله 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 کلیک کنید.
عامل App Prototyping یک طرح اولیه برنامه را بر اساس درخواست شما ایجاد می کند و نام برنامه پیشنهادی، ویژگی های مورد نیاز و دستورالعمل های سبک را برمی گرداند.
طرح را مرور کنید. در صورت لزوم، چند تغییر ایجاد کنید. برای مثال، می‌توانید نام برنامه یا طرح رنگ پیشنهادی را با استفاده از یکی از این گزینه‌ها تغییر دهید:
Customize کلیک کنید و طرح را مستقیماً ویرایش کنید. تغییرات خود را انجام دهید و روی ذخیره کلیک کنید.
در قسمت توصیف... در صفحه چت، سؤالات و زمینه های روشن کننده را اضافه کنید. همچنین می توانید تصاویر اضافی را آپلود کنید.
روی Prototype this app کلیک کنید.
عامل App Prototyping کدگذاری برنامه شما را آغاز می کند.
- از آنجایی که برنامه شما از هوش مصنوعی استفاده می کند، از شما خواسته می شود یک کلید API Gemini اضافه یا ایجاد کنید. اگر روی Auto-generate کلیک کنید، App Prototyping agent یک پروژه Firebase و یک کلید API Gemini را برای شما فراهم می کند.
مرحله 2: تست، اصلاح، اشکال زدایی و تکرار
پس از تولید برنامه اولیه، می توانید آزمایش، اصلاح، اشکال زدایی و تکرار کنید.
برنامه خود را مرور کنید و با آن تعامل داشته باشید: پس از تکمیل تولید کد، پیش نمایشی از برنامه شما ظاهر می شود. می توانید مستقیماً با پیش نمایش تعامل داشته باشید تا آن را آزمایش کنید. در پیش نمایش برنامه خود بیشتر بیاموزید.
افزودن 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 از شما می خواهد که خطاهای ایجاد شده را برطرف کنید. روی Fix Error کلیک کنید تا به آن اجازه داده شود تا اصلاح شود.
اگر خطاهایی دریافت می‌کنید که از شما خواسته نمی‌شود آنها را به‌طور خودکار برطرف کنید، خطا و هر زمینه مرتبط (مثلاً «آیا می‌توانید این خطا را در کد اولیه Firebase من برطرف کنید؟») را در پنجره چت کپی کنید و آن را به Gemini ارسال کنید.
آزمایش و تکرار با استفاده از زبان طبیعی: برنامه خود را کاملاً آزمایش کنید و با App Prototyping agent کار کنید تا کد و طرح اولیه را تکرار کنید تا زمانی که از آن راضی باشید.
هنگام Prototyper view, you can also use the following features:
کلیک کنید
حاشیه نویسی کنید تا مستقیماً در پنجره پیش نمایش طراحی شود. از ابزارهای موجود شکل، تصویر و متن، همراه با یک اعلان متن اختیاری، برای توصیف بصری آنچه می‌خواهید App Prototyping agent تغییر دهد، استفاده کنید.کلیک کنید
برای انتخاب یک عنصر خاص و وارد کردن دستورالعمل‌ها برای App Prototyping agent انتخاب کنید . این به شما امکان می دهد به سرعت یک نماد، دکمه، قطعه متن یا عنصر دیگر را هدف قرار دهید. هنگامی که روی یک تصویر کلیک می کنید، همچنین می توانید یک تصویر استوک را از Unsplash جستجو و انتخاب کنید.
در صورت تمایل، می توانید کلیک کنید
پیوند پیش نمایش را به اشتراک بگذارید تا برنامه خود را به صورت عمومی و موقت با استفاده از پیش نمایش های عمومی Firebase Studio به اشتراک بگذارید.ایجاد یک پروژه Firebase: عامل نمونه اولیه برنامه یک پروژه Firebase را از طرف شما فراهم می کند زمانی که:
- یک کلید Gemini API به صورت خودکار تولید کنید
- بخواهید برنامه خود را به پروژه Firebase متصل کنید
- برای اتصال برنامه خود به خدمات Firebase، مانند Cloud Firestore یا Firebase Authentication کمک بخواهید
- روی دکمه Publish کلیک کنید و Firebase App Hosting راه اندازی کنید
برای تغییر پروژه Firebase متصل به فضای کاری خود، App Prototyping agent ID پروژه ای را که می خواهید به جای آن استفاده کنید بخواهید. به عنوان مثال، "Switch to Firebase project with ID
<your-project-id>."برنامه را آزمایش کنید و قوانین پایگاه داده Cloud Firestore را تأیید کنید: در قسمت پیش نمایش برنامه، تصویری را بارگذاری کنید که غذاهای مختلف را نشان می دهد تا توانایی برنامه شما در شناسایی مواد تشکیل دهنده و تولید و ذخیره دستور العمل ها را آزمایش کند.
به عنوان کاربران مختلف وارد سیستم شوید و دستور العمل تولید کنید: مطمئن شوید که کاربران تأیید شده می توانند دستور العمل ها و دستور العمل های خصوصی خود را ببینند و همه کاربران دستور العمل های عمومی را ببینند.
هنگامی که از App Prototyping agent می خواهید Cloud Firestore را اضافه کند، قوانین پایگاه داده Cloud Firestore را برای شما می نویسد و اجرا می کند. قوانین موجود در کنسول Firebase را مرور کنید.
اشکال زدایی و تکرار مستقیم در کد: کلیک کنید
برای باز کردن نمای کد به Code بروید ، جایی که می‌توانید همه فایل‌های برنامه خود را ببینید و کد خود را مستقیماً تغییر دهید. Prototyper mode at any time.هنگام مشاهده Code ، می توانید از ویژگی های مفید زیر نیز استفاده کنید:
ویژگی های اشکال زدایی و گزارش داخلی Firebase Studio برای بازرسی، اشکال زدایی و ممیزی برنامه شما.
کمک هوش مصنوعی با استفاده از Gemini یا به صورت درون خطی در کد شما یا با استفاده از چت تعاملی Gemini (هر دو به طور پیش فرض در دسترس هستند). چت تعاملی می‌تواند مشکلات را تشخیص دهد، راه‌حل‌هایی ارائه دهد و ابزارهایی را اجرا کند تا به رفع سریع‌تر برنامه شما کمک کند. برای دسترسی به چت، روی 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 مرتبط با فضای کاری را نمایش می دهد. اگر پروژه Firebase از قبل وجود نداشته باشد، App Prototyping agent یک پروژه جدید برای شما ایجاد می کند. برای ادامه روی 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 مراجعه کنید.
وقتی مرحله انتشار کامل شد، نمای کلی برنامه با نشانی اینترنتی و اطلاعات آماری برنامه با قابلیت مشاهده App Hosting نمایش داده می‌شود. برای استفاده از یک دامنه سفارشی (مانند example.com یا app.example.com) به جای دامنه ایجاد شده توسط Firebase، می توانید یک دامنه سفارشی در کنسول Firebase اضافه کنید.
برای اطلاعات بیشتر در مورد App Hosting ، به درک App Hosting و نحوه عملکرد آن مراجعه کنید.
(توصیه می شود) مرحله 4: برنامه منتشر شده خود را آزمایش کنید
وقتی انتشار کامل شد و برنامه شما در 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 پشتیبانی می‌شود، به شما امکان می‌دهد این آزمایش‌ها را به صورت محلی اجرا کنید و رفتار قوانین تولید خود را شبیه‌سازی کنید. این یک راه قوی برای تأیید منطق قوانین پیچیده و تأیید پوشش برای سناریوهای مختلف است. پس از استقرار، باید دوباره بررسی کنید که واحد شما با استفاده از شبیه ساز مطابق انتظار عمل می کند و همه سناریوها را پوشش می دهد.