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

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

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

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

צילום מסך של סוכן העיצוב Flutter שפועל ב-VS Code

איור 1. סוכן העיצוב Flutter פועל בחלון VS Code Extension Development Host.

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

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

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

הפרויקט של Flutter Theme Agent פועל כהרחבה של Microsoft Visual Studio Code (VS Code), והוא משתמש ב-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 המקומי כך שישתמש בשיטת תשלום דחופה, כדי שיהיו לכם רק את הקבצים של הפרויקט ב-Docs Agent.

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

  3. עוברים לספריית הבסיס של פרויקט סוכן העיצוב של Flutter.

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

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

    npm install

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

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

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

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

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

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

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

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

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

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

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

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

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

כדי להתכונן לעריכת הפקודה buttonstyle.ts:\

  1. מפעילים את אפליקציית VS Code.
  2. ב-VS Code, יוצרים חלון חדש על ידי בחירה באפשרות קובץ > חלון חדש.
  3. פותחים את הפרויקט של Flutter 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 > Startup Debugging (הפעלה > הפעלה מחדש של ניפוי באגים).

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

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

  3. כדי לפתוח את לוח הפקודות, לוחצים על View (תצוגה) > Command Palette (לוח פקודות).

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

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

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

צילום מסך של סוכן העיצוב Flutter עם פקודה חדשה גלויה

איור 2. פקודת סוכן חדשה של Flutter בחלון הפיתוח של VS Code Extension.

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

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

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

  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. ב-VS Code, פותחים את הקובץ flutter_theme_agent/src/extension.ts.

  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.

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

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

  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, מפעילים מחדש את הכלי לניפוי באגים על ידי בחירה באפשרות Run > Startup Debugging (הפעלה > הפעלה מחדש של ניפוי באגים), פעולה שמפעילה מחדש חלון נפרד של Extension Development Host.
  2. בחלון VS Code Extension Development Host, פותחים פרויקט פיתוח Flutter.
  3. באותו חלון, פותחים חלון של עורך קוד, מקלידים הערה שמתארת את הרכיב הרצוי בממשק המשתמש ובוחרים את התגובה.
  4. כדי לפתוח את לוח הפקודות, לוחצים על View (תצוגה) > Command Palette (לוח פקודות).
  5. ב-Command Palette, מקלידים Flutter Theme ובוחרים את הפקודה Flutter Theme Agent: My New Code Generator.

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

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

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

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