توسعه، انتشار و نظارت بر یک برنامه وب تمام پشته با عامل نمونه اولیه برنامه، توسعه، انتشار و نظارت بر یک برنامه وب تمام پشته با عامل نمونه اولیه برنامه، توسعه، انتشار و نظارت بر یک برنامه وب تمام پشته با عامل نمونه اولیه برنامه، توسعه، انتشار و نظارت بر یک برنامه وب تمام پشته با عامل نمونه اولیه برنامه

این راهنما به شما نشان می‌دهد که چگونه از App Prototyping agent برای توسعه و انتشار سریع یک برنامه تمام پشته با کمک Gemini در Firebase استفاده کنید. برای ایجاد یک برنامه Next.js که اقلام غذایی را از یک تصویر یا دوربین درون مرورگر شناسایی می‌کند و دستور پختی حاوی مواد شناسایی شده را ارائه می‌کند، از یک درخواست به زبان طبیعی استفاده می‌کنید. سپس برنامه را اصلاح و بهبود می‌بخشید و در نهایت در Firebase App Hosting منتشر می‌کنید.

فناوری های دیگری که در ادامه این راهنما از آنها استفاده خواهید کرد عبارتند از:

مرحله 1: برنامه خود را ایجاد کنید

  1. وارد حساب Google خود شوید و Firebase Studio باز کنید.

  2. در قسمت Prototype an app with AI توضیحی در مورد برنامه ای که می خواهید بسازید وارد کنید. برای این راه حل، جایی که شما در حال ایجاد یک برنامه دستور پخت مبتنی بر تصویر هستید، می توانید از یک درخواست مانند زیر برای نمونه سازی اولیه برنامه ای که از دوربین، هوش مصنوعی مولد استفاده می کند استفاده کنید:

    Build a web app that can identify food products from an uploaded picture or
in-browser camera. The app should provide a recipe that contains the
identified ingredients.

  3. روی Prototype with AI کلیک کنید.

    Gemini یک طرح اولیه برنامه را بر اساس درخواست شما ایجاد می کند و نام برنامه پیشنهادی، ویژگی های مورد نیاز و دستورالعمل های سبک را برمی گرداند.

  4. طرح اولیه را مرور کنید و چند تغییر ایجاد کنید. برای مثال، می‌توانید نام برنامه یا طرح رنگ پیشنهادی را با استفاده از یکی از این گزینه‌ها تغییر دهید:

    • Customize کلیک کنید و طرح را مستقیماً ویرایش کنید. تغییرات خود را انجام دهید و روی ذخیره کلیک کنید.

    • در قسمت توصیف... در صفحه چت، سؤالات و زمینه های روشن کننده را اضافه کنید. همچنین می توانید تصاویر اضافی را آپلود کنید.

  5. روی Prototype this app کلیک کنید. Gemini شروع به کدنویسی برنامه شما می کند. از آنجایی که توضیحات برنامه ویژگی‌هایی را توضیح می‌دهد که به هوش مصنوعی مولد نیاز دارند، Gemini از شما یک کلید API Gemini را می‌خواهد.

  6. کلید Gemini API خود را اضافه کنید یا روی Auto-generate کلیک کنید تا یک کلید API Gemini ایجاد شود.

مرحله 2: تست، اصلاح، اشکال زدایی و تکرار

پس از تولید برنامه اولیه، می توانید آزمایش، اصلاح، اشکال زدایی و تکرار کنید.

  1. برنامه خود را مرور کنید و با آن تعامل داشته باشید: پس از تکمیل تولید کد، پیش نمایشی از برنامه شما ظاهر می شود. می توانید مستقیماً با پیش نمایش تعامل داشته باشید تا آن را آزمایش کنید.

  2. با استفاده از زبان طبیعی برنامه خود را تکرار کنید: به استفاده از رابط چت ادامه دهید تا از Gemini بخواهید ویژگی ها را اضافه کند و برنامه را اصلاح کند.

  3. آزمایش برنامه: در قسمت پیش‌نمایش برنامه، تصویری را آپلود کنید که غذاهای مختلف را نشان می‌دهد تا توانایی برنامه شما در شناسایی مواد تشکیل دهنده و ارائه دستور غذا را آزمایش کنید. در صورت تمایل، می‌توانید از نمای Code برای اشتراک‌گذاری برنامه خود به صورت عمومی و موقت با استفاده از پیش‌نمایش‌های عمومی Firebase Studio استفاده کنید.

  4. اشکال زدایی و تکرار مستقیم در کد: کلیک کنید سوئیچ کد نماد برای باز کردن نمای کد به Code بروید ، جایی که می‌توانید همه فایل‌های برنامه خود را ببینید و کد خود را مستقیماً تغییر دهید. Prototyper mode at any time.

    هنگام مشاهده Code ، می توانید از ویژگی های مفید زیر نیز استفاده کنید:

    • ویژگی های اشکال زدایی و گزارش داخلی Firebase Studio برای بازرسی، اشکال زدایی و ممیزی برنامه شما.

    • کمک هوش مصنوعی با استفاده از Gemini در Firebase یا درون کد شما یا با استفاده از چت تعاملی (هر دو به طور پیش فرض در دسترس هستند). چت تعاملی می‌تواند مشکلات را تشخیص دهد، راه‌حل‌هایی ارائه دهد و ابزارهایی را اجرا کند تا به رفع سریع‌تر برنامه شما کمک کند. برای دسترسی به چت، روی spark Gemini در پایین فضای کاری کلیک کنید.

(اختیاری) مرحله 3: برنامه خود را با App Hosting منتشر کنید

بعد از اینکه برنامه را آزمایش کردید و از آن راضی بودید، می‌توانید آن را با Firebase App Hosting در وب منتشر کنید.

هنگامی که App Hosting را راه‌اندازی می‌کنید، Firebase Studio یک پروژه Firebase برای شما ایجاد می‌کند و شما را در پیوند دادن یک حساب Cloud Billing راهنمایی می‌کند.

برای انتشار برنامه خود در Firebase App Hosting :

  1. برای ایجاد یک پروژه Firebase جدید و شروع راه اندازی App Hosting ، روی انتشار کلیک کنید. صفحه Publish your app ظاهر می شود.

  2. در مرحله پروژه Firebase ، نام پروژه Firebase را که برای شما ایجاد شده است، یادداشت کنید، سپس روی Next کلیک کنید.

  3. در مرحله Link Cloud Billing حساب ، یکی از موارد زیر را انتخاب کنید:

    • حساب Cloud Billing را که می‌خواهید به پروژه Firebase خود پیوند دهید، انتخاب کنید.

    • اگر حساب Cloud Billing ندارید یا می‌خواهید حساب جدیدی ایجاد کنید، روی Create a Cloud Billing کلیک کنید. با این کار کنسول Google Cloud باز می‌شود، جایی که می‌توانید یک حساب کاربری جدید Cloud Billing ایجاد کنید . پس از ایجاد حساب، به Firebase Studio بازگردید و حساب را از لیست Link Cloud Billing انتخاب کنید.

  4. روی Next کلیک کنید. Firebase Studio حساب صورت‌حساب را به پروژه مرتبط با فضای کاری شما پیوند می‌دهد، این حساب زمانی ایجاد می‌شود که یک کلید API Gemini را به‌طور خودکار ایجاد کرده‌اید یا زمانی که روی انتشار کلیک کرده‌اید. سپس، App Hosting یک محیط کاملاً مدیریت شده برای برنامه شما در Google Cloud تنظیم می کند.

  5. روی ایجاد اولین عرضه خود کلیک کنید. Firebase Studio عرضه App Hosting را راه اندازی کرد. تکمیل این کار ممکن است ده دقیقه طول بکشد. برای کسب اطلاعات بیشتر در مورد آنچه در پشت صحنه اتفاق می افتد، به فرآیند ساخت App Hosting مراجعه کنید.

  6. وقتی عرضه کامل شد، نمای کلی برنامه با نشانی وب و اطلاعات آماری برنامه با قابلیت مشاهده App Hosting نمایش داده می‌شود. برای استفاده از یک دامنه سفارشی (مانند example.com یا app.example.com) به جای دامنه ایجاد شده توسط Firebase، می توانید یک دامنه سفارشی در کنسول Firebase اضافه کنید.

برای اطلاعات بیشتر در مورد App Hosting ، به درک App Hosting و نحوه عملکرد آن مراجعه کنید.

(اختیاری) مرحله 4: برنامه خود را نظارت کنید

پانل نمای کلی App Hosting برنامه معیارها و اطلاعات کلیدی در مورد برنامه شما را ارائه می دهد و به شما امکان می دهد عملکرد برنامه وب خود را با استفاده از ابزارهای مشاهده داخلی App Hosting نظارت کنید. پس از انتشار سایت شما، می توانید با کلیک روی انتشار به نمای کلی دسترسی پیدا کنید. از این پنل می توانید:

  • برای انتشار نسخه جدیدی از برنامه خود، روی Create rollout کلیک کنید.
  • پیوند برنامه خود را به اشتراک بگذارید یا برنامه خود را مستقیماً در Visit your app باز کنید.
  • خلاصه‌ای از عملکرد برنامه‌تان در ۷ روز گذشته، شامل تعداد کل درخواست‌ها و وضعیت آخرین عرضه‌تان را مرور کنید. برای دسترسی به اطلاعات بیشتر در کنسول Firebase ، روی مشاهده جزئیات کلیک کنید.
  • نموداری از تعداد درخواست‌هایی که برنامه شما در 24 ساعت گذشته دریافت کرده است، به تفکیک کد وضعیت HTTP مشاهده کنید.

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

درباره مدیریت و نظارت بر عرضه App Hosting در مدیریت عرضه و انتشار بیشتر بیاموزید.

(اختیاری) مرحله 5: استقرار خود را به عقب برگردانید

اگر نسخه‌های متوالی برنامه خود را در App Hosting مستقر کرده‌اید، می‌توانید آن را به یکی از نسخه‌های قبلی برگردانید. شما همچنین می توانید آن را حذف کنید.

  • برای بازگرداندن یک سایت منتشر شده:

    1. App Hosting در کنسول Firebase باز کنید.

    2. باطن برنامه خود را پیدا کنید، روی View کلیک کنید و سپس روی Rollouts کلیک کنید.

    3. در کنار توسعه‌ای که می‌خواهید به آن برگردید، روی More کلیک کنید، سپس بازگشت به این بیلد را انتخاب کنید و تأیید کنید.

    در مدیریت عرضه‌ها و نسخه‌ها بیشتر بیاموزید.

  • برای حذف دامنه App Hosting از وب:

    1. از کنسول Firebase ، App Hosting باز کنید و روی View در بخش برنامه Firebase Studio کلیک کنید.

    2. در بخش اطلاعات Backend ، روی Manage کلیک کنید. صفحه Domains بارگیری می شود.

    3. در کنار دامنه خود، روی More کلیک کنید، سپس Disable domain را انتخاب کنید و تأیید کنید.

    با این کار دامنه شما از وب حذف می شود. برای حذف کامل باطن App Hosting ، دستورالعمل‌های موجود در Delete a backend را دنبال کنید.

(اختیاری) مرحله 6: از Genkit Monitoring برای ویژگی های مستقر شده خود استفاده کنید

می‌توانید مراحل، ورودی‌ها و خروجی‌های ویژگی Genkit خود را با فعال کردن تله‌متری در کد جریان AI خود نظارت کنید. ویژگی تله متری Genkit به شما امکان می دهد عملکرد و استفاده از جریان های هوش مصنوعی خود را نظارت کنید. این داده‌ها می‌توانند به شما کمک کنند تا زمینه‌های بهبود را شناسایی کنید، مشکلات را عیب‌یابی کنید، درخواست‌ها و جریان‌های خود را برای عملکرد بهتر و کارآمدی هزینه بهینه کنید، و میزان استفاده از جریان‌های خود را در طول زمان پیگیری کنید.

برای تنظیم نظارت در Genkit ، تله متری را به جریان های هوش مصنوعی Genkit اضافه می کنید و سپس نتایج را در کنسول Firebase مشاهده می کنید.

مرحله 1: تله متری را به کد جریان Genkit خود در Firebase Studio اضافه کنید

برای تنظیم نظارت در کد خود:

  1. اگر قبلاً در نمای Code نیستید، کلیک کنید سوئیچ کد نماد برای باز کردن آن به کد بروید .

  2. برای تأیید نسخه Genkit که نصب شده است، package.json بررسی کنید.

  3. ترمینال را باز کنید ( Ctrl-Shift-C یا Cmd-Shift-C در MacOS).

  4. داخل ترمینال کلیک کنید و افزونه Firebase را با استفاده از نسخه ای که با فایل package.json شما مطابقت دارد نصب کنید. برای مثال، اگر بسته‌های Genkit در package.json شما 1.0.4 هستند، باید دستور زیر را برای نصب افزونه اجرا کنید:

    npm i --save @genkit-ai/firebase@1.0.4

  5. از Explorer ، src > ai > flows گسترش دهید. یک یا چند فایل TypeScript که حاوی جریان های Genkit شما هستند در پوشه flows ظاهر می شوند.

  6. روی یکی از جریان ها کلیک کنید تا باز شود.

  7. در پایین بخش imports فایل، موارد زیر را برای وارد کردن و فعال کردن FirebaseTelemetry اضافه کنید:

    import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();

مرحله 2: مجوزها را تنظیم کنید

Firebase Studio هنگام راه‌اندازی پروژه Firebase ، APIهای مورد نیاز را برای شما فعال کرده است، اما شما همچنین باید مجوزهایی را برای حساب سرویس App Hosting ارائه دهید.

برای تنظیم مجوزها:

  1. کنسول Google Cloud IAM را باز کنید، پروژه خود را انتخاب کنید، سپس نقش‌های زیر را به حساب سرویس میزبانی برنامه اختصاص دهید:

    • مانیتورینگ متریک رایتر ( roles/monitoring.metricWriter )
    • Cloud Trace Agent ( roles/cloudtrace.agent )
    • Logs Writer ( roles/logging.logWriter )

  2. برنامه خود را مجدداً در App Hosting منتشر کنید.

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

مرحله 3: ویژگی های هوش مصنوعی تولیدی خود را در کنسول Firebase نظارت کنید

وقتی تله‌متری پیکربندی می‌شود، Genkit تعداد درخواست‌ها، موفقیت و تأخیر را برای همه جریان‌های شما ثبت می‌کند، و برای هر جریان خاص، Genkit معیارهای پایداری را جمع‌آوری می‌کند، نمودارهای دقیق را نشان می‌دهد و ردیابی‌های ثبت شده را ثبت می‌کند.

برای نظارت بر ویژگی‌های هوش مصنوعی پیاده‌سازی شده با Genkit :

  1. پس از پنج دقیقه، Genkit در کنسول Firebase باز کنید و درخواست‌ها و پاسخ‌های Genkit را بررسی کنید.

    Genkit معیارهای پایداری زیر را جمع آوری می کند:

    • کل درخواست ها: تعداد کل درخواست های دریافت شده توسط جریان شما.
    • میزان موفقیت: درصد درخواست هایی که با موفقیت پردازش شدند.
    • تأخیر صدک 95: تأخیر صدک 95 جریان شما، که مدت زمانی است که طول می کشد تا 95 درصد درخواست ها پردازش شوند.

    • استفاده از توکن:

      • نشانه های ورودی: تعداد توکن هایی که در اعلان به مدل ارسال می شود.
      • نشانه های خروجی: تعداد نشانه های تولید شده توسط مدل در پاسخ.

    • استفاده از تصویر:

      • تصاویر ورودی: تعداد تصاویر ارسال شده به مدل در اعلان.
      • تصاویر خروجی: تعداد تصاویر تولید شده توسط مدل در پاسخ.

    اگر معیارهای ثبات را گسترش دهید، نمودارهای دقیق در دسترس هستند:

    • درخواست حجم در طول زمان.
    • میزان موفقیت در طول زمان
    • توکن های ورودی و خروجی در طول زمان
    • تأخیر (صدک 95 و 50) در طول زمان.

درباره Genkit در Genkit بیشتر بدانید.

مراحل بعدی