Plan and Build Apps with Gemini CLI Conductor

1. מבוא

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

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

• התקנה של Gemini CLI והתוסף Conductor
• יצירת אפליקציית אינטרנט של גלגל בחירה מאפס באמצעות יכולות התכנון וההטמעה של Conductor
• הוספת התאמה אישית לאפליקציה על ידי הוספת אימות ואחסון באמצעות Firebase

מה תלמדו

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

הדרישות

• דפדפן אינטרנט כמו Chrome
• פרויקט ב-Google Cloud שהחיוב בו מופעל
• ‫Node.js מותקן (מומלצת גרסה 18 ומעלה)
• עורך קוד מקומי כמו Visual Studio 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. התקנה מקומית של Gemini CLI ו-Conductor

בשלב הזה, תכינו את סביבת הפיתוח המקומית על ידי התקנת Gemini CLI והתוסף Conductor באמצעות עורך הקוד והטרמינל המקומיים.

התקנת Gemini CLI

1. מתקינים את הגרסה העדכנית של Gemini CLI באופן גלובלי באמצעות npm:

   npm install -g @google/gemini-cli
   

   אם מופיעות שגיאות הרשאה, יכול להיות שתצטרכו להשתמש בכלי לניהול גרסאות כמו nvm, או להריץ את הפקודה הזו כמשתמש root באמצעות sudo.

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

   gemini --version
   

4. יוצרים ספריית פרויקט חדשה ועוברים אליה: בהמשך המאמר ניצור פרויקט בספרייה picker-wheel. יוצרים את הספרייה ועוברים אליה:

   mkdir picker-wheel
   cd picker-wheel
   

5. אימות:
   • מפעילים את Gemini CLI.

     gemini
     

   • כשמוצגת השאלה 'האם הקבצים בתיקייה הזו מהימנים?', בוחרים באפשרות תיקייה מהימנה (גלגל בחירה).
   • כשמוצגת השאלה 'איך תרצה לאמת את הפרויקט הזה?', בוחרים באפשרות Vertex AI. פועלים לפי מדריך האימות כדי לקבל מפתח Google Cloud API ולהגדיר את משתנה הסביבה GOOGLE_API_KEY. מומלץ לעיין ברמות השימוש השונות ובמגבלות הקצב של ה-API שמתאימות לכל רמה.
6. יציאה מ-Gemini CLI: כדי לסיים את הסשן הפעיל של Gemini CLI לפני שממשיכים, מקלידים /quit בטרמינל של CLI.

התקנת התוסף Conductor

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

1. מתקינים את התוסף:

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

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

     gemini
     

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

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

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

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

1. מוודאים שאתם נמצאים בספרייה picker-wheel שיצרתם בקטע הקודם:

   pwd
   

2. מפעילים את Gemini CLI: מפעילים סשן חדש של Gemini CLI מתוך ספריית הפרויקט.

   gemini
   

3. מאתחלים את Conductor: מריצים את פקודת ההגדרה כדי ליצור את הפרויקט ולהגדיר את סביבת Conductor.

   /conductor:setup
   

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

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

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

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

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

1. התחלת ההטמעה:

   /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 לבדוק את ההטמעה. הוא אמור לבדוק את קוד המקור, לסנכרן את תיעוד הפרויקט ולארכב את הרצועה.

   /conductor:review
   

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

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

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

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

1. בדוגמה הבאה של 'שדה חום', נשתמש ב-Firebase לאימות ולאחסון. מתקינים את התוסף ל-Firebase של Gemini CLI כדי ש-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.
   • מעקב אחר יעד:
     • ספק אימות → Firebase Auth
     • תצורות שמורות → אפשרויות גלגל
     • אחסון נתונים ← Firestore
     • ממשק משתמש להתחברות ל-Firestore → שכבת-על של חלון קופץ
   מערכת Conductor תיצור קובצי הקשר בשביל טראק חדש בתוך conductor/tracks/{track-id}.
5. בדיקת התוכנית שנוצרה: כדאי להקדיש רגע לקריאת index.md, spec.md וplan.md בתוך conductor/tracks/{track-id}/.

   טיפ: מומלץ לנהל שיחה עם Gemini כדי להבין את התוכנית ולדון בה כמה שיותר לפני שמתקדמים ליישום.

6. יישום: אם הכול נראה בסדר, אפשר להתחיל את היישום.

   /conductor:implement
   

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

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

   

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

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

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

מחיקת הפרויקט ב-Firebase (וב-Google Cloud)

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

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

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

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

7. מזל טוב

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

השלבים הבאים

• כאן אפשר לקרוא על מצב התוכנית ב-Gemini CLI לתכנון קל משקל
• מידע נוסף על תוספים ל-Gemini CLI