برنامه‌ریزی و ساخت برنامه‌ها با Gemini CLI Conductor

۱. مقدمه

در این آزمایشگاه کد، شما یاد خواهید گرفت که چگونه برنامه‌های نرم‌افزاری را با افزونه Gemini CLI Conductor برنامه‌ریزی و بسازید. شما با ساخت یک برنامه "greenfield" به طور کامل از ابتدا شروع خواهید کرد. سپس، با آن به عنوان یک پروژه "brownfield" رفتار خواهید کرد و برای اضافه کردن احراز هویت و ذخیره‌سازی، آن را تکرار خواهید کرد.

کاری که انجام خواهید داد

  • نصب Gemini CLI و افزونه Conductor
  • با استفاده از قابلیت‌های برنامه‌ریزی و پیاده‌سازی Conductor، یک برنامه وب "Picker Wheel" را از ابتدا بسازید.
  • با افزودن احراز هویت و ذخیره‌سازی با استفاده از Firebase، شخصی‌سازی را به برنامه اضافه کنید

آنچه یاد خواهید گرفت

  • نحوه استفاده از افزونه Conductor برای برنامه‌ریزی، پیاده‌سازی و بررسی یک برنامه "greenfield"
  • نحوه استفاده از افزونه Conductor برای افزودن ویژگی‌ها به یک برنامه "brownfield"

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

  • یک مرورگر وب مانند کروم
  • یک پروژه گوگل کلود با قابلیت پرداخت صورتحساب
  • نصب Node.js (نسخه ۱۸+ توصیه می‌شود)
  • یک ویرایشگر کد محلی مانند Visual Studio Code

۲. قبل از شروع

ایجاد یک پروژه ابری گوگل

  1. در کنسول گوگل کلود ، در صفحه انتخاب پروژه، یک پروژه گوگل کلود را انتخاب یا ایجاد کنید .
  2. مطمئن شوید که صورتحساب برای پروژه ابری شما فعال است. یاد بگیرید که چگونه بررسی کنید که آیا صورتحساب در یک پروژه فعال است یا خیر .

شروع پوسته ابری

Cloud Shell یک محیط خط فرمان است که در Google Cloud اجرا می‌شود و ابزارهای لازم از قبل روی آن بارگذاری شده‌اند.

  1. روی فعال کردن Cloud Shell در بالای کنسول Google Cloud کلیک کنید.
  2. پس از اتصال به Cloud Shell، احراز هویت خود را تأیید کنید: 
    gcloud auth list
  3. تأیید کنید که پروژه شما پیکربندی شده است: 
    gcloud config get project
  4. اگر پروژه شما مطابق انتظار تنظیم نشده است، آن را تنظیم کنید: 
    export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

فعال کردن APIها

API مدیریت Firebase را در پروژه Google Cloud خود فعال کنید.

gcloud services enable firebase.googleapis.com

فایربیس را به پروژه خود اضافه کنید

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

firebase login

برای اضافه کردن Firebase به پروژه Google Cloud خود، دستور زیر را اجرا کنید:

firebase projects:addfirebase

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

خروج از پوسته ابری

می‌توانید پنجره Cloud Shell را ببندید. در بخش بعدی، محیط محلی شما را پیکربندی خواهیم کرد.

۳. Gemini CLI و Conductor را به صورت محلی نصب کنید

در این مرحله، با نصب Gemini CLI و افزونه Conductor با استفاده از ویرایشگر کد و ترمینال محلی خود، محیط توسعه محلی خود را آماده خواهید کرد.

نصب رابط خط فرمان Gemini

  1. آخرین نسخه Gemini CLI را با استفاده از npm به صورت سراسری نصب کنید : 
    npm install -g @google/gemini-cli
  2. ترمینال خود را مجدداً راه‌اندازی کنید تا gemini به PATH شما اضافه شود.
  3. تأیید کنید که نصب‌کننده آخرین نسخه را نصب کرده است: 
    gemini --version
  4. ایجاد و تغییر به یک دایرکتوری پروژه جدید : در بخش بعدی، یک پروژه در دایرکتوری picker-wheel ایجاد خواهیم کرد. اکنون آن دایرکتوری را ایجاد کنید و به این دایرکتوری بروید: 
    mkdir picker-wheel
cd picker-wheel
  5. احراز هویت :
    • رابط خط فرمان Gemini را اجرا کنید. 
      gemini
    • وقتی از شما پرسیده شد «آیا به فایل‌های این پوشه اعتماد دارید؟»، گزینه Trust folder (انتخابگر چرخ) را انتخاب کنید.
    • وقتی از شما پرسیده شد «چگونه می‌خواهید برای این پروژه احراز هویت کنید؟»، Vertex AI را انتخاب کنید. برای دریافت کلید Google Cloud API و تنظیم متغیر محیطی GOOGLE_API_KEY ، راهنمای احراز هویت را دنبال کنید. لحظه‌ای وقت بگذارید و سطوح مختلف استفاده و محدودیت‌های نرخ API مربوط به آنها را بررسی کنید.
  6. خروج از رابط خط فرمان Gemini : برای پایان دادن به جلسه زنده Gemini CLI خود، قبل از ادامه، دستور /quit را در ترمینال CLI تایپ کنید.

نصب هادی اضافی

Conductor یک افزونه‌ی متن‌باز و ساخته‌ی گوگل برای Gemini CLI است که ویژگی‌های توسعه‌ی مبتنی بر زمینه مانند برنامه‌ریزی و ردیابی پیاده‌سازی را امکان‌پذیر می‌کند.

  1. افزونه را نصب کنید : 
    gemini extensions install https://github.com/gemini-cli-extensions/conductor
  2. نصب را تأیید کنید :
    • رابط خط فرمان Gemini را اجرا کنید. 
      gemini
    • عبارت /conductor ‎ را تایپ کنید تا فهرستی از دستورات مانند setup ، newTrack ، implement و غیره را مشاهده کنید.
  3. خروج از رابط خط فرمان Gemini : برای پایان دادن به جلسه زنده Gemini CLI خود، قبل از ادامه، دستور /quit را در ترمینال CLI تایپ کنید.

۴. توسعه فضای سبز: چرخ انتخاب

اکنون که محیط شما راه‌اندازی شده است، یک برنامه جدید را از ابتدا خواهید ساخت. شما یک "Picker Wheel" ایجاد خواهید کرد - یک برنامه وب سبک که برای انتخاب یک گزینه تصادفی می‌چرخد.

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

  1. تأیید کنید که در دایرکتوری picker-wheel که در بخش قبلی ایجاد کردید، هستید : 
    pwd
  2. شروع Gemini CLI : یک جلسه جدید Gemini CLI را از فهرست پروژه خود شروع کنید. 
    gemini
  3. مقداردهی اولیه رسانا : دستور راه‌اندازی را اجرا کنید تا پروژه را داربست‌بندی کرده و محیط رسانا را راه‌اندازی کنید. 
    /conductor:setup
  4. دستورالعمل‌های تعاملی را دنبال کنید : دستورالعمل‌های تعاملی که می‌بینید دقیقاً با این مثال‌ها مطابقت ندارند. برای آشنایی با گردش کار Conductor، روی یک طرح ساده‌تر تمرکز کنید.
    • هدف محصول : یک برنامه وب که یک چرخ گردان قابل تنظیم را برای انتخاب یک مورد تصادفی از یک لیست نمایش می‌دهد.
      • مخاطب هدف → عموم مردم
      • تعامل → برای چرخش، ضربه بزنید/کلیک کنید
      • سفارشی‌سازی → پایه
      • پلتفرم → دسکتاپ-اولویت
    • دستورالعمل‌های محصول : تولید خودکار.
    • پشته فنی :
      • زبان‌ها → TypeScript/JavaScript - ایده‌آل برای وب فول‌استک
      • رابط کاربری → Vue.js - رابط‌های وب شهودی
      • بک‌اند → Express.js - بک‌اند سریع Node
      • پایگاه داده → هیچکدام - نیازی به پایگاه داده نیست
    • گردش کار : استاندارد
    • الزامات محصول :
      • داستان‌های کاربر → گزینه‌های قابل تنظیم، نمایش واضح برنده
      • ویژگی‌های کلیدی → فهرست گزینه‌های قابل ویرایش، رنگ‌های تصادفی
      • محدودیت‌ها → فقط سمت کلاینت، عملکرد بالا
      • غیرعملکردی → پوشش تست بالا، TypeScript و Vue.js، طراحی واکنش‌گرا
    Conductor فایل‌های زمینه را در دایرکتوری conductor/ ایجاد می‌کند.

ایجاد یک آهنگ جدید

یک «تراک» در Conductor نشان دهنده یک ویژگی یا یک واحد کاری است.

  1. با استفاده از /conductor:newTrack ‎ یک مسیر جدید شروع کنید . ممکن است هادی بر اساس زمینه محصول، یک مسیر اولیه پیشنهاد دهد. همچنین می‌توانید مسیر خودتان را پیشنهاد دهید یا از هادی بخواهید که یک مسیر پیشنهاد دهد.
  2. طرح تولید شده را بررسی کنید : Conductor یک index.md ، یک spec.md و یک plan.md در داخل conductor/tracks/{track-id}/ ایجاد خواهد کرد. لحظه‌ای وقت بگذارید و آنها را بخوانید. اگر همه چیز خوب به نظر برسد، Conductor از شما می‌خواهد که فایل‌های تنظیمات اولیه را ذخیره و کامیت کنید.

پیاده سازی مسیر

  1. شروع پیاده‌سازی :
    /conductor:implement
    اکنون کنداکتور روی طرح کار خواهد کرد و کد پروژه را خواهد نوشت.
  2. تأیید برنامه : در طول مرحله پیاده‌سازی، Conductor از شما می‌خواهد که برنامه را به صورت دستی آزمایش کنید. به عنوان مثال، از شما می‌خواهد که سرور وب محلی را باز کنید، برنامه را در مرورگر خود پیش‌نمایش کنید و تغییرات را تأیید کنید. پس از اتمام پیاده‌سازی، باید یک چرخ انتخابگر کاربردی را مشاهده کنید. کاربرد چرخ جمع کننده
  3. بررسی پیاده‌سازی : به عنوان آخرین مرحله، می‌توانید از Conductor بخواهید پیاده‌سازی را بررسی کند. این Conductor باید کد منبع را بررسی کند، مستندات پروژه را همگام‌سازی کند و مسیر را بایگانی کند. 
    /conductor:review

۵. تکرار براونفیلد: شخصی‌سازی را اضافه کنید

حالا به سراغ توسعه‌ی «brownfield» خواهید رفت. برنامه‌ی وب picker wheel را از بخش قبل بهبود خواهید بخشید تا کاربران وارد شده بتوانند پیکربندی‌های picker wheel خود را ذخیره و بازیابی کنند.

یک مسیر شخصی‌سازی ایجاد کنید

  1. در مثال «brownfield» زیر، ما از Firebase برای احراز هویت و ذخیره‌سازی استفاده خواهیم کرد. افزونه‌ی Gemini CLI Firebase را نصب کنید تا Conductor بتواند از آن استفاده کند. 
    gemini extensions install https://github.com/gemini-cli-extensions/firebase
  2. شروع Gemini CLI : یک جلسه جدید Gemini CLI را از فهرست پروژه خود شروع کنید. 
    gemini
  3. شروع یک مسیر جدید : یک مسیر جدید را شروع کنید. 
    /conductor:newTrack "I want users to be able to log in to their accounts and
save their picker wheel configurations."
  4. دستورالعمل‌های تعاملی را دنبال کنید : دستورالعمل‌های تعاملی که می‌بینید دقیقاً با این مثال‌ها مطابقت ندارند. برای آشنایی با گردش کار Conductor، روی یک طرح ساده‌تر تمرکز کنید.
    • هدف ردیابی :
      • ارائه دهنده مجوز → مجوز فایربیس
      • پیکربندی‌های ذخیره‌شده → گزینه‌های چرخ
      • ذخیره سازی داده ها → فایر استور
      • رابط کاربری ورود به سیستم Firestore → روکش مودال
    Conductor فایل‌های زمینه‌ای را برای یک مسیر جدید در داخل conductor/tracks/{track-id} ایجاد می‌کند.
  5. بررسی طرح تولید شده : لحظه‌ای وقت بگذارید و فایل‌های index.md ، spec.md و plan.md را در داخل conductor/tracks/{track-id}/ بخوانید.
  6. پیاده‌سازی : اگر همه چیز خوب به نظر می‌رسد، می‌توانید پیاده‌سازی را شروع کنید. 
    /conductor:implement
  7. تأیید : برنامه خود را مجدداً بارگیری کنید. باید یک برنامه به‌روز شده را ببینید.چرخ انتخابگر با ورود به سیستم

این کد طلایی برای پیاده‌سازی مرجع است. برای شروع صحیح برنامه، باید پروژه Firebase خود را در .firebaserc و پیکربندی‌های Firebase خود را در firebase.ts ارائه دهید.

۶. تمیز کردن

برای جلوگیری از هزینه‌های مداوم برای حساب Google Cloud خود، منابع ایجاد شده در طول این codelab را حذف کنید.

پروژه Firebase (و پروژه Google Cloud) را حذف کنید

ساده‌ترین راه برای پاکسازی، حذف کامل پروژه است.

  1. در کنسول گوگل کلود ، پروژه‌ای که ایجاد کرده‌اید را انتخاب کنید.
  2. روی حذف کلیک کنید.

از طرف دیگر، اگر می‌خواهید پروژه را نگه دارید اما منابع را حذف کنید:

  1. حذف پایگاه داده Firestore : به Firebase Console > Firestore بروید و پایگاه داده را حذف کنید.
  2. حذف احراز هویت : به کنسول فایربیس > روش ورود به سیستم احراز هویت بروید، گوگل را غیرفعال کنید.

۷. تبریک

تبریک! شما با موفقیت از افزونه Gemini CLI Conductor برای ساخت یک برنامه وب از ابتدا و سپس تکرار آن با ویژگی‌های پیچیده‌ای مانند احراز هویت و ادغام پایگاه داده استفاده کردید.

مراحل بعدی