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

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

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

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

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

איור 1. סוכן עיצוב של Flutter פועל במארח פיתוח התוסף של VS Code חלון.

הגדרת פרויקט

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

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

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

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

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

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

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

  1. משכפלים את מאגר ה-Git באמצעות הפקודה הבאה.

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

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

    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 במכשיר. הבדיקה פותחת החלון של מארח פיתוח תוספים ב-VS, שבו התוסף החדש זמינים. בחלון החדש הזה מגדירים את מפתח ה-API שהתוסף משתמש בו גישה ל-Google Gemini API.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  4. בפלטת הפקודות, מקלידים Flutter ובוחרים את עיצוב ה-Flutter סוכן: יצירת פקודת FluttertterStyle.

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

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

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

איור 2. פקודה חדשה של Flutter Theme Agent בתוסף VS Code חלון של מארח פיתוח.

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

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

  1. יוצרים עותק של הקובץ flutter_theme_agent/src/colorscheme.ts בשם colorscheme2.ts בספרייה src/.
  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.

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

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

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

  1. בחלון הפרויקט של התוסף VS Code, מפעילים מחדש את ניפוי הבאגים באמצעות בחירה באפשרות הפעלה > להפעיל מחדש את ניפוי הבאגים, שמפעיל מחדש קובץ נפרד החלון Extension Development Host (מארח לפיתוח תוסף).
  2. בחלון תוספים לפיתוח תוספים של VS Code, פותחים Flutter פרויקט פיתוח.
  3. באותו חלון, פותחים חלון של עורך קוד, מקלידים תגובה שמתארת את רכיב ממשק המשתמש הרצוי ובוחרים את הטקסט של התגובה.
  4. כדי לפתוח את לוח הפקודות, בוחרים באפשרות View > (תצוגה >) פלטת הפקודות.
  5. בלוח הפקודות, מקלידים 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 כדי לשפר את האמינות של האפליקציה ואת היכולת להרחיב אותה.