תכנון ופיתוח אפליקציות באמצעות Conductor Plugin

1. מבוא

בשיעור Codelab הזה נסביר איך לתכנן ולבנות אפליקציות תוכנה באמצעות התוסף Conductor. ‫Conductor הוא פלאגין קוד פתוח ש-Google יצרה, שמאפשר תכונות פיתוח מבוססות מפרט כמו תכנון ומעקב אחר הטמעה. תתחילו בפיתוח אפליקציית 'גרינפילד' מאפס. לאחר מכן, תתייחסו אליו כאל פרויקט brownfield, ותבצעו בו איטרציות כדי להוסיף אימות ואחסון.

הפעולות שתבצעו:

• מתקינים את הפלאגין Conductor ב-Antigravity CLI או ב-Claude Code
• איך יוצרים אפליקציית אינטרנט של גלגל בחירה מאפס באמצעות יכולות התכנון וההטמעה של Conductor
• הוספת התאמה אישית לאפליקציה באמצעות הוספת אימות ואחסון באמצעות Firebase

מה תלמדו

• איך משתמשים בפלאגין Conductor כדי לתכנן, להטמיע ולבדוק אפליקציית Greenfield
• איך משתמשים בתוסף Conductor כדי להוסיף תכונות לאפליקציית brownfield

הדרישות

• דפדפן אינטרנט כמו Chrome
• פרויקט ב-Google Cloud שהחיוב בו מופעל
• ‫Node.js מותקן (מומלצת גרסה 18 ומעלה)
• עורך קוד מקומי כמו Visual Studio Code
• סוכן תכנות כמו Antigravity CLI או Claude Code

‫2. לפני שמתחילים

יצירת פרויקט ב-Google Cloud

1. במסוף Google Cloud, בדף לבחירת הפרויקט, בוחרים פרויקט ב-Google Cloud או יוצרים פרויקט.
2. הקפידו לוודא שהחיוב מופעל בפרויקט שלכם ב-Cloud. כך בודקים אם החיוב מופעל בפרויקט

הפעלת Cloud Shell

השימוש ב-Cloud Shell מאפשר לנו להשלים את החלק הזה בלי להתקין את כלי ה-CLI‏ gcloud ו-firebase באופן מקומי.

‫Cloud Shell היא סביבת שורת פקודה שפועלת ב-Google Cloud וכוללת מראש את הכלים הנדרשים.

1. לוחצים על Activate 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

מפעילים את Firebase Management API בפרויקט בענן ב-Google Cloud.

gcloud services enable firebase.googleapis.com

הוספת Firebase לפרויקט

ה-CLI של Firebase מותקן מראש ב-Cloud Shell. ב-Cloud Shell, נכנסים באמצעות אותו חשבון Google שדרכו יש לכם גישה לפרויקט בענן. אם אתם עובדים באופן מקומי, אתם צריכים להתקין את Firebase CLI לפי ההוראות.

firebase login

מריצים את הפקודה הבאה כדי להוסיף את Firebase לפרויקט בענן של Google:

firebase projects:addfirebase

אם זו הפעם הראשונה שאתם מריצים את firebase CLI, ענו על כל השאלות שמוצגות.

יציאה מ-Cloud Shell

אפשר לסגור את חלון Cloud Shell. בקטע הבא נגדיר את הסביבה המקומית.

3. התקנה ואימות של סוכני קידוד ב-CLI

בשלב הזה, תכינו את סביבת הפיתוח המקומית על ידי התקנה ואימות של Antigravity CLI או Claude Code בעורך הקוד המקומי באמצעות פרטי הכניסה שלכם ל-Google Cloud.

התקנה ואימות של Antigravity CLI

1. מתקינים את הגרסה העדכנית של Antigravity CLI.

   # MacOS and Linux
   curl -fsSL https://antigravity.google/cli/install.sh | bash
   
   # Windows Powershell
   irm https://antigravity.google/cli/install.ps1 | iex
   
   # Windows CMD
   curl -fsSL https://antigravity.google/cli/install.cmd -o install.cmd && install.cmd && del install.cmd
   

2. מפעילים מחדש את הטרמינל כדי ש-agy יתווסף לנתיב.
3. מאמתים את ההתקנה כדי לוודא שהגרסה האחרונה הותקנה.

   agy --version
   

4. מאמתים באמצעות פרטי הכניסה שלכם ל-Google Cloud.
   • מפעילים את Antigravity CLI.

     agy
     

   • כשמוצגת בקשה לבחירת שיטת כניסה, בוחרים באפשרות שימוש בפרויקט ב-Google Cloud. פותחים את כתובת ה-URL המאובטחת של ההרשאה בדפדפן אינטרנט. מתחברים באמצעות פרטי הכניסה שאושרו ומשלימים את האימות. בדפדפן מוצג קוד הרשאה אלפאנומרי ייחודי. מעתיקים את הקוד הזה, חוזרים למסוף ומדביקים אותו בהנחיה.

   אפשר גם לבחור שיטות כניסה אחרות. ב-Codelab הזה נסביר איך לעבוד עם פרויקט בענן ב-Google Cloud.

5. יוצאים מ-Antigravity CLI.כדי לסיים את הסשן הפעיל של Antigravity CLI לפני שממשיכים, מקלידים /exit בטרמינל של CLI.

התקנה ואימות של Claude Code

אפשרות נוספת היא להשתמש בתוסף Conductor עם Claude Code. במאמר הזה נסביר איך להתקין את Claude Code ולאמת אותו באמצעות פרטי הכניסה שלכם ל-Google Cloud.

1. מתקינים את הגרסה העדכנית של Claude Code.
2. מאמתים באמצעות פרטי הכניסה שלכם ל-Google Cloud.
   • מפעילים את Claude Code.

     claude
     

   • מקלידים /login כדי לבחור את שיטת הכניסה. בוחרים באפשרות פלטפורמה של צד שלישי · Amazon Bedrock,‏ Microsoft Foundry או Vertex AI וGoogle Vertex AI. כדי להגדיר את Google Vertex AI, בוחרים באפשרות Application Default Credentials (google auth) (פרטי כניסה שמוגדרים כברירת מחדל באפליקציה (אימות Google)) ומשלימים את ההגדרה לפי ההנחיות.

   אפשר גם לבחור שיטות כניסה אחרות. ב-Codelab הזה נסביר איך לעבוד עם פרויקט בענן ב-Google Cloud.

3. הפעלה מחדש של Claude Code.

4. התקנת הפלאגין Conductor

‫Conductor הוא פלאגין קוד פתוח ש-Google יצרה, שמאפשר תכונות פיתוח מבוססות מפרט כמו תכנון ומעקב אחר הטמעה.

התקנה ב-Antigravity CLI

1. מתקינים את הפלאגין:
   • Antigravity CLI

     agy plugins install https://github.com/gemini-cli-extensions/conductor
     

2. אימות ההתקנה:
   • מפעילים את Antigravity CLI.

     agy
     

   • מקלידים /conductor ומופיעה רשימה של פקודות כמו /conductor:conductor-setup,‏ /conductor:conductor-new-track,‏ conductor:conductor-implement וכו'.
3. יוצאים מה-CLI.מקלידים /exit בטרמינל כדי לסיים את סשן ה-CLI הפעיל לפני שממשיכים.

התקנה ב-Claude Code

1. רושמים את מאגר ה-Marketplace ומתקינים את התוסף Conductor ישירות בסשן של Claude Code.

   /plugin marketplace add gemini-cli-extensions/conductor
   /plugin install conductor
   /reload-plugin
   

2. מאמתים את ההתקנה.
   • מקלידים /conductor ומופיעה רשימה של פקודות כמו /conductor-setup,‏ conductor-new-track,‏ conductor-implement וכו'.
3. יוצאים מה-CLI.מקלידים /exit בטרמינל של Claude Code כדי לסיים את סשן ה-CLI הפעיל לפני שממשיכים.

5. פיתוח גרינפילד: גלגל הבחירה

עכשיו, אחרי שהגדרתם את הסביבה, תבנו אפליקציה חדשה מאפס. תצרו 'גלגל בחירה' – אפליקציית אינטרנט פשוטה שמסתובבת כדי לבחור באפשרות אקראית.

הגדרת הקשר של המוצר

1. יוצרים ספריית פרויקט חדשה ועוברים אליה.עכשיו אנחנו עובדים על פרויקט בספרייה picker-wheel. יוצרים את הספרייה הזו ועוברים אליה.

   mkdir picker-wheel
   cd picker-wheel
   

2. מפעילים את Antigravity CLI.מתחילים סשן חדש ב-CLI מתוך ספריית הפרויקט באמצעות Antigravity CLI או Claude Code.

   # Antigravity CLI
   agy
   
   # Claude Code
   claude
   

   • כשמוצגת השאלה 'האם אתה בוטח בקבצים בתיקייה הזו?', בוחרים באפשרות תיקייה מהימן (גלגל בחירה).
3. מאתחלים את Conductor.מריצים את פקודת ההגדרה כדי ליצור את הפרויקט ולהגדיר את סביבת Conductor.

   # Antigravity CLI
   /conductor:conductor-setup
   
   # Claude Code
   /conductor-setup
   

4. פועלים לפי ההנחיות האינטראקטיביות.ההנחיות האינטראקטיביות שיוצגו לכם לא יהיו זהות לדוגמאות האלה. כדאי להתמקד בעיצוב פשוט כדי להכיר את תהליך העבודה ב-Conductor.
   • יעד המוצר: אפליקציית אינטרנט שמציגה גלגל מסתובב שניתן להגדרה כדי לבחור פריט אקראי מתוך רשימה.
     • קהל היעד → הקהל הרחב
     • אינטראקציה ← הקשה או קליק להפעלת הסיבוב
     • התאמה אישית → בסיסי
     • פלטפורמה ← קודם למחשב
   • הנחיות לגבי המוצר: יצירה אוטומטית.
   • סטאק תוכנות:
     • שפות ← TypeScript/JavaScript – אידיאליות לפיתוח אתרים מלא
     • קצה קדמי → Vue.js – ממשקי אינטרנט אינטואיטיביים
     • קצה עורפי → Express.js – קצה עורפי מהיר של Node
     • מסד נתונים ← ללא – לא נדרש מסד נתונים
   • תהליך עבודה: Standard.
   • הדרישות בנוגע למוצרים:
     • סיפורי משתמשים → אפשרויות להתאמה אישית, תצוגה ברורה של האפשרות הזוכה
     • תכונות מרכזיות → רשימת אפשרויות שאפשר לערוך, צבעים אקראיים
     • מגבלות → רק בצד הלקוח, ביצועים גבוהים
     • לא פונקציונלי → כיסוי גבוה של בדיקות, TypeScript ו-Vue.js, עיצוב רספונסיבי
   ‫Conductor ייצור קובצי הקשר בספרייה conductor/.

יצירת טראק חדש

'מסלול' ב-Conductor מייצג תכונה או יחידת עבודה.

1. מתחילים טראק חדש באמצעות /conductor-new-rack.יכול להיות ש-Conductor יציע טראק ראשוני על סמך ההקשר של המוצר. אפשר גם להציע מסלול משלכם או לבקש מהמנצח להציע מסלול.
2. בודקים את התוכנית שנוצרה.Conductor ייצור index.md, spec.md ו-plan.md בתוך conductor/tracks/{track-id}/. כדאי להקדיש רגע לקריאת התנאים. אם הכול נראה בסדר, Conductor יציג בקשה לשמור ולבצע את הקבצים של ההגדרה הראשונית.

הטמעה של הטראק

1. מתחילים בהטמעה.

   # Antigravity CLI
   /conductor:conductor-implement
   
   # Claude Code
   /conductor-implement
   

   ‫Conductor יפעל עכשיו דרך התוכנית ויכתוב קוד לפרויקט.

   טיפ: כדי למנוע מצב שבו נתקעים במעטפות אינטראקטיביות או בתהליכים ארוכים (כמו שרתי פיתוח או כלי מעקב אחר בדיקות), אנחנו צריכים לוודא ש-Conductor יודע בדיוק איך לטפל בפקודות הספציפיות האלה. כלים כמו Vite‏ (npm run dev) ו-Vitest‏ (npm run test) פועלים בדרך כלל ב'מצב צפייה' כברירת מחדל, כך שהתהליך נשאר פתוח ללא הגבלת זמן. אתם יכולים להורות ל-Conductor להשבית את מצב הצפייה או להשתמש ב-is_background: true כשמריצים פקודות על ידי עדכון workflow.md.

2. מאמתים את האפליקציה.במהלך שלב ההטמעה, Conductor יציג הנחיות לבדיקה ידנית של האפליקציה. לדוגמה, הוא יבקש מכם לפתוח את שרת האינטרנט המקומי, להציג בתצוגה מקדימה את האפליקציה בדפדפן ולאמת את השינויים. אחרי שתשלימו את ההטמעה, אמור להופיע גלגל בחירה פעיל.

   פתרון בעיות: אם הקוד שנוצר מתנהג בצורה לא צפויה, כדאי לבדוק את conductor/tracks/.../plan.md כדי לראות אם יש שלבים שדילגתם עליהם או שגיאות.

3. בדיקת ההטמעה.בשלב האחרון, אפשר לבקש מ-Conductor לבדוק את ההטמעה. הוא צריך לבדוק את קוד המקור, לסנכרן את תיעוד הפרויקט ולארכב את המעקב.

   # Antigravity CLI
   /conductor:conductor-review
   
   # Claude Code
   /conductor-review
   

6. חזרה על תהליך קיים: הוספת התאמה אישית

עכשיו תעברו לפיתוח brownfield. תשפרו את אפליקציית האינטרנט של גלגל הבחירה מהקטע הקודם כך שמשתמשים שמחוברים לחשבון יוכלו לשמור ולשחזר את ההגדרות של גלגל הבחירה.

אם רוצים לעבור ישירות לאפליקציית brownfield, אפשר להוריד את קוד הזהב מהקטע האחרון כדי לקבל הפניה להטמעה ולהמשיך לבנות עליו.

יצירת טראק התאמה אישית

1. בדוגמה הבאה של 'שדה חום', נשתמש ב-Firebase לאימות ולאחסון. מתקינים את היכולות של Firebase כדי ש-Conductor יוכל להשתמש בהן.
2. מפעילים את סוכן ה-CLI.מתחילים סשן חדש ב-CLI.

   # Antigravity CLI
   /new
   
   # Claude Code
   /new
   

3. להתחיל רצועה חדשה.מתחילים רצועה חדשה.

   # Antigravity CLI
   /conductor:conductor-new-track "I want users to be able to log in to their
   accounts and save their picker wheel configurations."
   
   # Claude Code
   /conductor-new-track "I want users to be able to log in to their accounts
   and save their picker wheel configurations."
   

4. פועלים לפי ההנחיות האינטראקטיביות.ההנחיות האינטראקטיביות שיוצגו לכם לא יהיו זהות לדוגמאות האלה. כדאי להתמקד בעיצוב פשוט יותר כדי להכיר את תהליך העבודה ב-Conductor.
   • היעד של הטראק:
     • ספק אימות → Firebase Auth
     • Saved Configs → Wheel Options
     • אחסון נתונים ← Firestore
     • ממשק משתמש להתחברות ל-Firestore → שכבת-על של חלון קופץ
   מערכת Conductor תיצור קובצי הקשר בשביל טראק חדש בתוך conductor/tracks/{track-id}.
5. בדיקת התוכנית שנוצרה.כדאי להקדיש רגע לקריאת index.md, spec.md וplan.md בתוך conductor/tracks/{track-id}/.
6. מטמיעים.אם הכול נראה בסדר, אפשר להתחיל בהטמעה.

   # Antigravity CLI
   /conductor:conductor-implement
   
   # Claude Code
   /conductor-implement
   

7. מאמתים.טוענים מחדש את האפליקציה. אמורה להופיע בקשה מעודכנת.

   אם ה-AI נתקע בבדיקת הטמעת האימות, צריך לזכור להפעיל את הכניסה באמצעות חשבון Google במסוף Firebase בקטע אימות > שיטת כניסה.

   

הקוד המוזהב להטמעה לדוגמה מופיע כאן. כדי שהבקשה תתחיל לפעול בצורה תקינה, צריך לספק את הפרויקט ב-Firebase ב.firebaserc ואת ההגדרות של Firebase בfirebase.ts.

7. הסרת המשאבים

כדי להימנע מחיובים שוטפים בחשבון Google Cloud, מוחקים את המשאבים שנוצרו במהלך ה-codelab הזה.

מחיקת פרויקט Firebase ופרויקט Google Cloud

הדרך הכי קלה לנקות היא למחוק את הפרויקט לגמרי.

1. ב-מסוף Google Cloud, בוחרים את הפרויקט שיצרתם.
2. לוחצים על מחיקה.

לחלופין, אם רוצים לשמור את הפרויקט אבל למחוק משאבים:

1. מחיקת מסד נתונים של Firestore: עוברים אל מסוף Firebase > Firestore ומוחקים את מסד הנתונים.
2. מחיקת אימות: עוברים אל מסוף Firebase > אימות > שיטת כניסה ומשביתים את Google.

8. מזל טוב

מעולה! השתמשתם בהצלחה בתוסף Conductor בסוכן התכנות שבחרתם (Antigravity CLI או Claude Code) כדי ליצור אפליקציית אינטרנט מאפס, ואז חזרתם על התהליך עם תכונות מורכבות כמו אימות ושילוב של מסד נתונים.

השלבים הבאים

• מסמכי העזרה של הפלאגינים של Antigravity CLI
• מסמכי העזרה של פלאגינים של Claude Code