בניית מחולל קודים של AI Flutter עם Gemini

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

במדריך הזה תלמדו איך להרחיב את Flutter Theme Agent, כלי עזר לקוד שמבוסס על AI ונוצר על ידי צוות קשרי המפתחים של Flutter ב-Google. הפרויקט הזה בקוד פתוח הוא תוסף ל-Visual Studio Code (VS Code) של Microsoft, שיוצר רכיבים ספציפיים של נושא Flutter או אובייקט ThemeData, כולל ערכות צבעים, סגנונות טקסט וסגנונות לחצנים. אתם יכולים לשנות את הפרויקט כדי שהפונקציות הקיימות יפעלו טוב יותר בשבילכם, או ליצור פקודות חדשות כדי לתמוך טוב יותר בתהליך הפיתוח שלכם.

בקישור הבא תוכלו לצפות בסרטון סקירה כללית של הפרויקט ולקבל מידע נוסף על הרחבת הפרויקט, כולל תובנות מהאנשים שיצרו אותו: AI Flutter Code Generator – Build with Google AI. אחרת, תוכלו להתחיל להרחיב את הפרויקט לפי ההוראות שבהמשך.

איור 1. Flutter Theme Agent פועל בחלון של VS Code Extension Development Host.

הגדרת הפרויקט

בהוראות הבאות מוסבר איך מגדירים את הפרויקט Flutter Theme Agent לפיתוח ובדיקה. השלבים הכלליים הם התקנה של תוכנות שתצטרכו, הגדרה של כמה משתני סביבה, יצירת עותקים מקוריים (cloning) של הפרויקט ממאגר הקוד והרצה של התקנת התצורה.

התקנת הדרישות המוקדמות

הפרויקט Flutter Theme Agent פועל כתוסף של Visual Studio Code ‏ (VS Code) של Microsoft, ומשתמש ב-Node.js וב-npm כדי לנהל את החבילות ולהפעיל את האפליקציה. הוראות ההתקנה הבאות מיועדות למכונה מארחת של Linux.

כדי להתקין את התוכנה הנדרשת:

1. מתקינים את Visual Studio Code לפלטפורמה שלכם.
2. מתקינים את node ואת npm לפי הוראות ההתקנה של הפלטפורמה.
3. אם עדיין לא התקנתם את Flutter ל-VS Code, פועלים לפי הוראות ההתקנה.

שכפול והגדרה של הפרויקט

מורידים את קוד הפרויקט ומשתמשים בפקודת ההתקנה npm כדי להוריד את יחסי התלות הנדרשים ולהגדיר את הפרויקט. כדי לאחזר את קוד המקור של הפרויקט, צריך תוכנת ניהול גרסאות של git.
כדי להוריד ולהגדיר את קוד הפרויקט:

1. מעתיקים את מאגר ה-git באמצעות הפקודה הבאה.

   git clone https://github.com/google/generative-ai-docs`
   

2. אפשר גם להגדיר את מאגר ה-Git המקומי כך שישתמש ב-sparse checkout, כדי שיישארו רק הקבצים של פרויקט Docs Agent.

   cd generative-ai-docs/
   git sparse-checkout init --cone
   git sparse-checkout set examples/gemini/node/flutter_theme_agent
   

3. עוברים לספריית השורש של הפרויקט Flutter Theme Agent.

   cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/
   

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

   npm install
   

הגדרה ובדיקה של התוסף

עכשיו אמורה להיות לכם אפשרות לבדוק את ההתקנה על ידי הפעלת Flutter Theme Agent בתור תוסף פיתוח ב-VS Code במכשיר. הבדיקה פותחת חלון נפרד של Extension Development Host ב-VS Code, שבו התוסף החדש זמין. בחלון החדש הזה מגדירים את מפתח ה-API שבו התוסף משתמש כדי לגשת ל-Google Gemini API.

כדי להגדיר ולבדוק את ההגדרה:

1. מפעילים את אפליקציית VS Code.
2. ב-VS Code, יוצרים חלון חדש על ידי בחירה באפשרות File (קובץ) > New Window (חלון חדש).
3. פותחים את הפרויקט Flutter Theme Agent על ידי בחירה באפשרות File > Open Folder (קובץ > פתיחת תיקייה) ובחירה בתיקייה flutter_theme_agent/.
4. פותחים את הקובץ flutter_theme_agent/package.json ב-VS Code.
5. כדי להריץ את התוסף במצב ניפוי באגים, בוחרים באפשרות הפעלה > התחלת ניפוי באגים. השלב הזה יפתח חלון נפרד של Extension Development Host ב-VS Code.
6. פותחים את ההגדרות של VS Code על ידי בחירה באפשרות Code > Settings > Settings.
7. מאתר ה-Developer של Generative AI, מקבלים מפתח Google Gemini API ומעתיקים את מחרוזת המפתח.

8. מגדירים את מפתח ה-API בתור הגדרת תצורה. בשדה Search Settings (הגדרות חיפוש), מקלידים flutter theme, בוחרים בכרטיסייה User (משתמש) ובהגדרה Google > Gemini: Api Key (Google‏ > Gemini: מפתח API), לוחצים על הקישור Edit in settings.json (עריכה בקובץ settings.json) ומוסיפים את מפתח ה-API של Gemini:

   "google.ai.apiKey": "your-api-key-here"
   

9. שומרים את השינויים בקובץ settings.json וסוגרים את כרטיסיות ההגדרות.

כדי לבדוק את פקודות התוסף:

1. בחלון Extension Development Host ב-VS Code, כותבים הערה בקוד שמתארת את רכיב ממשק המשתמש שרוצים ליצור.
2. בוחרים את טקסט התגובה עם מאפייני הרכיב.
3. כדי לפתוח את לוח הפקודות, בוחרים באפשרות תצוגה > לוח פקודות.
4. בלוח הפקודות, מקלידים Flutter Theme ובוחרים באחת מהפקודות עם הקידומת הזו.

שינוי של פקודה קיימת

שינוי הפקודות שסופקו ב-Flutter Theme Agent היא הדרך הפשוטה ביותר לשנות את ההתנהגות והיכולות של התוסף.

גם בפקודות להוספת תגובה וגם בפקודות לבדיקה נעשה שימוש בגישה של כמה הנחיות ראשוניות עם דוגמאות לקוד והערות לקוד הזה, וגם כמה הוראות כלליות למודל השפה של ה-AI. מידע ההקשר של ההנחיה הזה מנחה את מודל השפה של Gemini ביצירת תשובה. אתם יכולים לשנות את ההוראות, הדוגמאות או את שניהם בהנחיה של הפקודה 'תגובה' או 'בדיקה', כדי לשנות את האופן שבו פועלת כל אחת מהפקודות הקיימות.

כאן מוסבר איך לשנות את הפקודה buttonstyle.ts על ידי שינוי הטקסט של ההנחיה של הפקודה.

כדי לערוך את הפקודה buttonstyle.ts:

1. מפעילים את אפליקציית VS Code.
2. ב-VS Code, יוצרים חלון חדש על ידי בחירה באפשרות File (קובץ) > New Window (חלון חדש).
3. פותחים את הפרויקט Flutter Theme Agent על ידי בחירה באפשרות File > Open Folder (קובץ > פתיחת תיקייה) ובחירה בתיקייה flutter_theme_agent/.

4. פותחים את הקובץ flutter_theme_agent/src/buttonstyle.ts.

   כדי לשנות את ההתנהגות של הפקודה buttonstyle.ts:

5. בקובץ buttonstyle.ts, עורכים את הקבוע BUTTONSTYLE_CONTEXT כך שיכלול הוראות שונות.

   const BUTTONSTYLE_CONTEXT=`
   ButtonStyle should only define properties that exist for a ButtonStyle
   object. ButtonStyle objects have the following properties. The buttons
   can ONLY be styled by setting these properties. No other properties:
   alignment → AlignmentGeometry? // The alignment of the button's child.
   ...
   

6. אפשר גם להוסיף דוגמה נוספת של הוראה ופלט בסגנון לחצן בקובץ buttonstyle.ts, בערך הקבוע BUTTONSTYLE_CONTEXT, או להחליף אחת מהדוגמאות הקיימות.

   ...
   Here's an example prompt:
   Create a ButtonStyle where the button is green by default and blue on hover state. And elevation is 14, no surface tint color, and the splash effect is turned off.
   Here's an example of good Dart code:
   ButtonStyle(
     backgroundColor: MaterialStateProperty.resolveWith<Color?>(
   ...
   

7. שומרים את השינויים בקובץ buttonstyle.ts.

כדי לבדוק את הפקודה ששונתה:

1. בחלון הפרויקט של התוסף ב-VS Code, מפעילים מחדש את מנתח הבאגים על ידי בחירה באפשרות Run > Restart Debugging.

2. בחלון Extension Development Host ב-VS Code, בוחרים תגובה לקוד בחלון העריכה שמתארת את סגנון הלחצן הרצוי, לדוגמה:

   // blue, lickable buttons that light up when you hover over them`
   

3. כדי לפתוח את לוח הפקודות, בוחרים באפשרות תצוגה > לוח פקודות.

4. בחלונית הפקודות, מקלידים Flutter ובוחרים בפקודה Flutter Theme Agent: Create a Flutter ButtonStyle.

יצירת פקודה חדשה

אפשר להרחיב את Flutter Theme Agent על ידי יצירת פקודות חדשות שמבצעות משימות חדשות לגמרי באמצעות Gemini API. כל קובץ פקודה, כמו buttonstyle.ts ו-colorscheme.ts, הוא בעיקר עצמאי וכולל קוד לאיסוף טקסט מהעורך הפעיל, ליצירת הנחיה, להתחברות ל-Gemini API, לשליחת הנחיה ולמסירה של התגובה.

איור 2. פקודת Flutter Theme Agent חדשה בחלון VS Code Extension Development Host.

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

כדי ליצור פקודה שיוצרת רק רשימה של צבעים לאובייקט ColorScheme:

1. יוצרים עותק של הקובץ flutter_theme_agent/src/colorscheme.ts בשם colorscheme2.ts בספרייה src/.
2. פותחים את הקובץ src/colorscheme2.ts ב-VS Code.

3. בקובץ colorscheme2.ts, משנים את השם של הפונקציה generateColorScheme ל-generateColorScheme2:

   export async function generateColorScheme2(){
     vscode.window.showInformationMessage('Generating Color Scheme...');
   

4. משנים את ההוראות להנחיה בקובץ colorscheme2.ts. עורכים את ההוראות ליצירת הקוד של COLORSCHEME_CONTEXT. מסירים את הטקסט ColorScheme( מהקוד לדוגמה בשורה 51, ומשאירים אותה כשורה ריקה.

   ...
   Here's the example of good Dart code:
   
     brightness: Brightness.light,
     primary: Color(0xffFF80AB),
   ...
   

5. מסירים את התו של סוגריים מסולסלים ')' בסוף רשימת הצבעים, ומחליפים אותו בשורה ריקה.

   ...
     inversePrimary: Color(0xffD15B9D),
     surfaceTint: Color(0xffFF80AB),
   
   This example code is a good ...
   

6. חוזרים על השינויים האלה בדוגמה השנייה. במחרוזת COLORSCHEME_CONTEXT בשורה 87, מסירים את הטקסט ColorScheme( ומשאירים את השורה ריקה.

7. בשורה 115, מסירים את התו של סוגריים מסולסלים ')' בסוף רשימת הצבעים, ומשאירים את השורה ריקה.

8. במחרוזת COLORSCHEME_CONTEXT, מוסיפים הוראה לא לכלול את התחביר המקיף:

   ...
   - The color scheme must be accessible and high-contrast.
   
   In the response, only include the list of colors and nothing else. Do
   not include a starting "ColorScheme(" prefix or an ending ")" suffix.
   
   Here's an example user prompt:
   ...
   

9. שומרים את השינויים בקובץ colorscheme2.ts.

שילוב הפקודה החדשה

אחרי שמסיימים את הקוד של הפקודה החדשה, צריך לשלב אותו עם שאר התוסף. מעדכנים את הקבצים extension.ts ו-package.json כדי שהפקודה החדשה תהיה חלק מהתוסף, ומאפשרים ל-VS Code להפעיל את הפקודה החדשה.

כדי לשלב את הפקודה החדשה עם קוד התוסף:

1. פותחים את הקובץ flutter_theme_agent/src/extension.ts ב-VS Code.

2. כדי לייבא את קוד הפקודה החדש לתוסף, מוסיפים משפט ייבוא חדש.

   import { generateColorScheme2 } from './components/colorscheme2';
   

3. כדי לרשום את הפקודה החדשה, מוסיפים את הקוד הבא לפונקציה activate().

   export function activate(context: vscode.ExtensionContext) {
       ...
       vscode.commands.registerCommand('flutter-theme-agent.generateColorScheme2',
           generateColorScheme2);
       ...
   }
   

4. שומרים את השינויים בקובץ extension.ts.

כדי לשלב את הפקודה name בחבילת התוסף:

1. פותחים את הקובץ flutter_theme_agent/package.json ב-VS Code.

2. מוסיפים את הפקודה החדשה לקטע commands בקובץ החבילה.

   "contributes": {
     "commands": [
       ...
       {
         "command": "flutter-theme-agent.generateColorScheme2",
         "title": "Flutter Theme Agent: My New Code Generator."
       }
     ],
   

3. שומרים את השינויים בקובץ package.json.

בדיקת הפקודה החדשה

אחרי שתסיימו לכתוב את הפקודה ולשלב אותה עם התוסף, תוכלו לבדוק אותה. הפקודה החדשה זמינה רק בחלון Extension Development Host ב-VS Code, ולא בחלון של VS Code שבו ערכתם את הקוד של התוסף.

כדי לבדוק את הפקודה ששונתה:

1. בחלון הפרויקט של התוסף ב-VS Code, מפעילים מחדש את מנתח הבאגים על ידי בחירה באפשרות הפעלה > הפעלה מחדש של ניפוי הבאגים. הפעולה הזו תפעיל מחדש את החלון הנפרד Extension Development Host.
2. בחלון Extension Development Host ב-VS Code, פותחים פרויקט פיתוח ב-Flutter.
3. באותו חלון, פותחים חלון של עורך קוד, מקלידים תגובה שמתארת את רכיב ממשק המשתמש הרצוי ובוחרים את טקסט התגובה.
4. כדי לפתוח את לוח הפקודות, בוחרים באפשרות תצוגה > לוח פקודות.
5. ב-Command Palette, מקלידים Flutter Theme ובוחרים בפקודה Flutter Theme Agent: My New Code Generator.

מקורות מידע נוספים

מידע נוסף על הפרויקט Flutter Theme Agent זמין במאגר הקוד. אם אתם צריכים עזרה בפיתוח האפליקציה או מחפשים מפתחים שיעזרו לכם, תוכלו להיכנס לשרת Google Developers Community Discord.

אפליקציות ייצור

אם אתם מתכננים לפרוס את Flutter Theme Agent לקהל גדול, חשוב לדעת שהשימוש שלכם ב-Google Gemini API עשוי להיות כפוף למגבלות קצב שליחת בקשות ולמגבלות שימוש אחרות. אם אתם שוקלים לפתח אפליקציה בסביבת ייצור באמצעות מודל Gemini, כדאי לבדוק את שירותי Google Cloud Vertex AI כדי לשפר את יכולת ההתאמה לעומס ואת האמינות של האפליקציה.