أنشِئ أداة إنشاء رموز Flutter باستخدام الذكاء الاصطناعي (AI) من خلال Gemini

يمكنك إنشاء أداة مساعد في الترميز لإنشاء واجهات مستخدم في Flutter أو أي مكوّن رمز برمجي تريد تكراره بسرعة. يمكن أن يكون إنشاء واجهات المستخدم ممتعًا ومجزيًا، ولكنه عمل شاق أيضًا. لا يتعلق الأمر فقط بالحصول على التعليمات البرمجية بشكل صحيح، بل يتعلق أيضًا بالحصول على الشكل والمظهر الصحيحين، وحث فريقك على الاتفاق على اتجاه التصميم.

يشرح لك هذا الفيديو التعليمي كيفية توسيع أداة Flutter Theme Agent، وهي أداة للمساعدة في الترميز مستندة إلى الذكاء الاصطناعي (AI) أنشأها فريق علاقات المطوّرين على Flutter في Google. هذا المشروع مفتوح المصدر هو إضافة لـ Visual Studio Code (VS Code) يعمل على إنشاء مكوّنات معينة من مظهر Flutter أو كائن ThemeData، بما في ذلك أنظمة الألوان وأنماط النصوص وأنماط الأزرار. يمكنك تعديل المشروع لجعل هذه الدوال الحالية تعمل بشكل أفضل بالنسبة لك، أو إنشاء أوامر جديدة لدعم سير عمل التطوير الخاص بك بشكل أفضل.

للحصول على نظرة عامة في الفيديو حول المشروع وكيفية تمديده، بما في ذلك معلومات من المسؤولين عن إنشائه، يمكنك الانتقال إلى مقالة AI Flutter Code Generator - Build with Google AI. خلاف ذلك، يمكنك البدء في تمديد المشروع باتباع الإرشادات أدناه.

لقطة شاشة لـ Flutter Theme Agent قيد التشغيل في VS Code

الشكل 1. وكيل مظهر Flutter الذي يتم تشغيله في نافذة مضيف تطوير إضافات الرموز VS

إعداد المشروع

سترشدك هذه التعليمات خلال عملية إعداد مشروع 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 المحلي لاستخدام عمليّات الدفع المتعدّدة، وبالتالي لا يكون لديك سوى الملفات الخاصة بمشروع "وكيل المستندات".

    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. شغِّل أمر install لتنزيل التبعيات وتهيئة المشروع:

    npm install

إعداد الإضافة واختبارها

من المفترض أن تتمكّن الآن من اختبار عملية التثبيت من خلال تشغيل أداة Flutter Theme Agent كإضافة لتطوير برامج VS Code على جهازك. يفتح الاختبار نافذة منفصلة لمضيف تطوير الإضافات في رمز VS حيث تتوفّر الإضافة الجديدة. في هذه النافذة الجديدة، يمكنك ضبط مفتاح واجهة برمجة التطبيقات الذي تستخدمه الإضافة للوصول إلى Google Gemini API.

لضبط الإعداد واختباره:

  1. ابدأ تشغيل تطبيق VS Code.
  2. في رمز VS، أنشئ نافذة جديدة عن طريق اختيار ملف > نافذة جديدة.
  3. افتح مشروع وكيل مظهر Flutter من خلال اختيار ملف > فتح المجلد، واختيار المجلد flutter_theme_agent/.
  4. في VS Code، افتح ملف flutter_theme_agent/package.json.
  5. شغِّل الإضافة في وضع تصحيح الأخطاء من خلال اختيار تشغيل > بدء تصحيح الأخطاء. تفتح هذه الخطوة نافذة منفصلة لمضيف تطوير الإضافات في رمز VS Code.
  6. افتح إعدادات VS Code من خلال اختيار الرمز > الإعدادات > الإعدادات.
  7. احصل على مفتاح واجهة برمجة تطبيقات Google Gemini من الموقع الإلكتروني لمطوّري الذكاء الاصطناعي التوليدي وانسخ السلسلة الرئيسية.

  8. اضبط مفتاح واجهة برمجة التطبيقات كإعدادات ضبط. في الحقل إعدادات البحث، اكتب flutter theme، ثم اختَر علامة التبويب المستخدم، وفي إعداد Google > Gemini: Api Key، انقر على الرابط Edit in settings.json وأضِف مفتاح واجهة برمجة تطبيقات Gemini:

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

  9. احفظ التغييرات في ملف settings.json وأغلق علامات تبويب الإعدادات.

لاختبار أوامر الإضافات:

  1. في نافذة مضيف تطوير الإضافات في رمز VS، اكتب تعليقًا برمجيًا يصف مكوّن واجهة المستخدم الذي تريد إنشاءه.
  2. حدد نص التعليق الذي يتضمن خصائص المكون.
  3. افتح لوحة الأوامر عن طريق اختيار عرض > لوحة الأوامر.
  4. في "لوحة الأوامر"، اكتب Flutter Theme واختَر أحد الأوامر التي تبدأ بهذه البادئة.

تعديل الأمر الحالي

تعديل الأوامر المتوفّرة في أداة Flutter Theme Agent هو أبسط طريقة لتغيير سلوك الإضافة وإمكاناتها.

يستخدم كل من أمرَي التعليق والمراجعة بعض الإجراءات لتقديم لقطة مع أمثلة على التعليمات البرمجية والتعليقات لهذا الرمز، بالإضافة إلى بعض التعليمات العامة للنموذج اللغوي للذكاء الاصطناعي (AI). توجه معلومات السياق الفوري هذه النموذج اللغوي في Gemini في إنشاء رد. من خلال تغيير تعليمات المطالبة أو الأمثلة أو كليهما في التعليق أو أمر المراجعة، يمكنك تغيير سلوك كل أمر من الأوامر الحالية.

توضّح هذه المجموعة من التعليمات كيفية تعديل الأمر buttonstyle.ts من خلال تغيير نص الأمر.

للاستعداد لتعديل الأمر buttonstyle.ts:\

  1. ابدأ تشغيل تطبيق VS Code.
  2. في رمز VS، أنشئ نافذة جديدة عن طريق اختيار ملف > نافذة جديدة.
  3. افتح مشروع وكيل مظهر Flutter من خلال اختيار ملف > فتح المجلد، واختيار المجلد 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. في نافذة مضيف تطوير الإضافات في رمز VS، اختَر تعليقًا برمجيًا في نافذة المحرّر يصف نمط الزرّ الذي تريده، على سبيل المثال:

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

  3. افتح لوحة الأوامر عن طريق اختيار عرض > لوحة الأوامر.

  4. في "لوحة الأوامر"، اكتب Flutter واختَر الأمر عامل مظهر Flutter: إنشاء Flutter ButtonStyle.

إنشاء طلب جديد

يمكنك توسيع نطاق وكيل Flutter Theme Agent من خلال إنشاء أوامر جديدة تنفّذ مهامًا جديدة تمامًا باستخدام Gemini API. كل ملف أوامر، مثل buttonstyle.ts وcolorscheme.ts، غالبًا ما يكون مستقلاً في أغلب الأحيان، ويتضمّن رمزًا لجمع النصوص من المحرِّر النشط، وإنشاء طلب، والربط بواجهة برمجة تطبيقات Gemini، وإرسال طلب، وتقديم الردّ.

لقطة شاشة لـ Flutter Theme Agent يظهر فيها أمر جديد

الشكل 2. الأمر الجديد في Flutter Theme Agent في نافذة VS Code Extension Development Host

توضّح هذه المجموعة من التعليمات كيفية إنشاء طلب جديد باستخدام رمز أحد الطلبات الحالية، وهو colorscheme.ts، كنموذج. سيؤدي هذا التحديث إلى تغيير الأمر بحيث لا يشمل بنية التضمين للكائن ColorScheme، وبذلك لن تضطر إلى إزالة هذه البنية بعد إنشائها وعرض الناتج بشكل أسرع.

لإنشاء أمر ينشئ قائمة ألوان فقط لكائن ColorScheme:

  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.

لدمج الأمر name مع حزمة الإضافة:

  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، وليس في نافذة VS Code التي عدَّلت فيها رمز الإضافة.

لاختبار الأمر المعدّل:

  1. في نافذة مشروع إضافة VS Code، أعِد تشغيل برنامج تصحيح الأخطاء عن طريق اختيار تشغيل > إعادة تشغيل تصحيح الأخطاء، ما يؤدي إلى إعادة تشغيل نافذة مضيف تطوير الإضافة المنفصلة.
  2. في نافذة مضيف تطوير الإضافات في VS Code، افتح مشروع تطوير Flutter.
  3. في نفس النافذة، افتح نافذة محرر التعليمات البرمجية، واكتب تعليقًا يصف مكون واجهة المستخدم الذي تريده، وحدد نص التعليق هذا.
  4. افتح لوحة الأوامر عن طريق اختيار عرض > لوحة الأوامر.
  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 لزيادة قابلية توسّع تطبيقك وموثوقيته.