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

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

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

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

لقطة شاشة لتطبيق Flutter Theme Agent الذي يعمل في 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 لـ VS Code، اتّبِع تعليمات التثبيت.

استنساخ المشروع وضبطه

نزِّل رمز المشروع واستخدِم الأمر npm لتثبيت الملحقات المطلوبة وضبط المشروع. تحتاج إلى استخدام برنامج التحكّم في المصدر git لاسترداد رمز المصدر للمشروع.
لتنزيل رمز المشروع وضبطه:

  1. استنسِخ مستودع git باستخدام الأمر التالي.

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

  2. يمكنك اختياريًا ضبط مستودع git المحلي لاستخدام ميزة "الفحص الخفيف"، لكي لا يتوفّر لديك سوى ملفات مشروع "مساعد مستندات Google".

    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 Code تتوفّر فيها الإضافة الجديدة. في هذه النافذة الجديدة، يمكنك ضبط مفتاح واجهة برمجة التطبيقات الذي تستخدمه الإضافة للوصول إلى واجهة برمجة التطبيقات Google Gemini API.

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

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

  8. اضبط مفتاح واجهة برمجة التطبيقات كإعداد. في حقل إعدادات البحث، اكتب flutter theme، واختَر علامة التبويب المستخدم، وفي الإعداد Google > Gemini: مفتاح واجهة برمجة التطبيقات، انقر على الرابط تعديل في settings.json، وأضِف مفتاح واجهة برمجة تطبيقات 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 هي أبسط طريقة ل تغيير سلوك الإضافة وإمكاناتها.

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

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

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

  1. ابدأ تطبيق VS Code.
  2. في VS Code، أنشئ نافذة جديدة من خلال اختيار ملف > نافذة جديدة.
  3. افتح مشروع Flutter Theme Agent من خلال اختيار ملف > فتح مجلد، واختيار مجلد 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. في نافذة مضيف تطوير الإضافات في 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 وإرسال طلب وتقديم الردّ.

لقطة شاشة لوكيل مظهر Flutter مع ظهور الأمر الجديد

الشكل 2: الأمر الجديد Flutter Theme Agent في نافذة "مضيف التطوير" إضافة VS Code

توضِّح هذه المجموعة من التعليمات كيفية إنشاء أمر جديد باستخدام رمز أمر حالي، وهو 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 Code مضيف تطوير الإضافة، وليس في نافذة VS Code التي حرّرت فيها رمز الإضافة.

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

  1. في نافذة مشروع إضافة VS Code، أعِد تشغيل أداة تصحيح الأخطاء من خلال اختيار تشغيل > إعادة تشغيل تصحيح الأخطاء، ما يؤدي إلى إعادة تشغيل نافذة مضيف تطوير الإضافة منفصلة.
  2. في نافذة مضيف تطوير الإضافات في VS Code، افتح مشروع تطوير Flutter.
  3. في النافذة نفسها، افتح نافذة محرِّر الرموز البرمجية، واكتب تعليقًا يصف مكوّن واجهة المستخدم الذي تريده، ثم اختَر نص هذا التعليق.
  4. افتح لوحة الأوامر من خلال اختيار عرض > لوحة الأوامر.
  5. في لوحة الأوامر، اكتب Flutter Theme واختَر الأمر Flutter Theme Agent: My New Code Generator (وكيل مظاهر Flutter: أداة إنشاء الرموز الجديدة).

مراجع إضافية

لمزيد من المعلومات عن مشروع Flutter Theme Agent، يُرجى الاطّلاع على مستودع الرموز البرمجية. إذا كنت بحاجة إلى مساعدة في إنشاء التطبيق أو كنت تبحث عن مطوّرين متعاونين، يمكنك الاطّلاع على خادم Discord في منتدى Google Developers.

تطبيقات الإصدار العلني

إذا كنت تخطّط لنشر Flutter Theme Agent لجمهور كبير، يُرجى العِلم أنّ استخدامك لواجهة برمجة التطبيقات Google Gemini API قد يخضع لقيود معدل الإرسال وغيرها من قيود الاستخدام. إذا كنت تفكر في إنشاء تطبيق متاح للجميع باستخدام نموذج Gemini، اطّلِع على خدمات Google Cloud Vertex AI لزيادة قابلية التطبيق للتوسّع والموثوقية.