جعل وكلاء الذكاء الاصطناعي يفهمون الشاشة: الدليل العملي لتصميم Semantics في Jetpack Compose

جعل وكلاء الذكاء الاصطناعي يفهمون الشاشة: الدليل العملي لتصميم Semantics في Jetpack Compose

مقدمة

لجعل وكلاء الذكاء الاصطناعي وأدوات أتمتة الاختبار في Jetpack Compose يفهمون بدقة "ماذا يفعل هذا الزر"، فإن التصميم الصحيح لـ Semantics هو المفتاح.

يمتلك Compose داخلياً "Semantics Tree"، وهو يعمل كبنية دلالية تستعين بها إمكانية الوصول وUIAutomator وأدوات الذكاء الاصطناعي للتشغيل التلقائي (مثل Appium/UIAutomator/MCP). إنه يشبه ARIA و DOM في الويب.

الخصائص الرئيسية لـ Semantics

contentDescription

أساسي لإضافة معنى للأزرار التي تحتوي على أيقونات فقط.

IconButton(
    onClick = onDelete,
    modifier = Modifier.semantics {
        contentDescription = "حذف"
    }
) {
    Icon(Icons.Default.Delete, contentDescription = null)
}

يتعرف عليه الذكاء الاصطناعي وإمكانية الوصول كـ "زر حذف · قابل للنقر · دور Button".

role

يحدد نوع واجهة المستخدم للعنصر المخصص. مجرد Box(clickable) سيكون "شيء ما قابل للنقر"، لكن إضافة role يوضح المعنى كـ Button أو Switch أو Checkbox أو Tab.

Modifier.semantics {
    role = Role.Button
}

stateDescription

يُعلم الذكاء الاصطناعي بالحالة الحالية لواجهة المستخدم.

Modifier.semantics {
    stateDescription =
        if (subscribed) "مشترك"
        else "غير مشترك"
}

testTag

المعرّف الأهم لـ MCP وAppium ووكلاء واجهة المستخدم التلقائية. يتيح تعريفاً مستقراً لا يعتمد على الإحداثيات أو OCR أو تغييرات النص.

Modifier.testTag("login_button")

الإعداد للتكامل مع UIAutomator

لا ينشئ Compose تسلسلاً هرمياً مباشراً للـ View، لذا قد لا يرى UIAutomator الـ testTag. يمكن حل ذلك بإضافة ما يلي إلى الجذر:

Scaffold(
    modifier = Modifier.semantics {
        testTagsAsResourceId = true
    }
)

سيُتعرف على testTag كـ resource-id ويمكن استرداده مباشرةً من UIAutomator.

نمط التنفيذ الأكثر وضوحاً للذكاء الاصطناعي

أفضل الممارسات هي دمج خصائص متعددة.

Button(
    onClick = login,
    modifier = Modifier
        .testTag("login_button")
        .semantics {
            contentDescription = "تسجيل الدخول"
            role = Role.Button
        }
) {
    Text("تسجيل الدخول")
}

دمج واجهة مستخدم معقدة في معنى واحد

عند الرغبة في عرض تركيبة معقدة من أيقونات ونصوص و Badge للذكاء الاصطناعي كزر واحد، استخدم clearAndSetSemantics.

Modifier.clearAndSetSemantics {
    contentDescription = "إضافة المنتج إلى السلة"
    role = Role.Button
}

يمكن تجاهل البنية المتداخلة الداخلية ومجموعات الأيقونات، وتمرير المعنى فقط إلى الذكاء الاصطناعي.

ما يمكن تحقيقه بتصميم Semantics

استقرار التشغيل التلقائي

بوجود testTag، يمكن التشغيل المستقر دون إحداثيات أو OCR. حتى بعد إعادة تصميم واجهة المستخدم، لن تتعطل الأتمتة طالما ظل testTag كما هو. كما تتحسن مقاومة التعامل مع اللغات المتعددة.

تقليل عدد الرموز (Tokens)

عند الاعتماد على لقطات الشاشة فقط، يحتاج تحليل الصور إلى رموز ضخمة، لكن مع Semantics Tree يمكن معالجة البيانات كبيانات منظمة خفيفة.

[
  {"type": "Button", "label": "تسجيل الدخول"},
  {"type": "TextField", "label": "البريد الإلكتروني"},
  {"type": "TextField", "label": "كلمة المرور"}
]

فعّال بشكل خاص في عمليات التشغيل التلقائي الطويلة وتحليل الشاشات الواسعة، ويساهم في منع context overflow.

فهم الذكاء الاصطناعي للحالة

بفضل stateDescription، يمكن للذكاء الاصطناعي تقدير الحالة الحالية للشاشة واتخاذ قرارات مثل "الوضع الحالي متوقف، إذن دعني أضغط زر التشغيل". يمكّن هذا من فهم الشاشة كآلة حالة.

التحليل المنظم في تكامل MCP

بجلب Semantics Tree عبر MCP Server وتمريره إلى LLM Agent، يصبح فهم معنى الشاشة كاملاً وتقدير مرشحي العمليات التالية وتحليل انتقالات الحالة ممكناً.

Compose UI → Semantics Tree → MCP Server → LLM Agent

ملخص استخدام خصائص Semantics

خلاصة

Compose يمكّن من فصل "المظهر" عن "المعنى". جوهر تصميم Semantics هو القدرة على تصميم واجهة المستخدم للإنسان وبنية المعنى للذكاء الاصطناعي بشكل مستقل.

إذا كنت ستستخدم وكلاء الذكاء الاصطناعي وMCP وUIAutomator والاختبارات التلقائية E2E، فإن التوحيد القياسي التالي لكل مكوّن يوفر عائداً عالياً على الاستثمار:

Modifier
    .testTag(...)
    .semantics {
        contentDescription = ...
        role = ...
    }

تمرير "ما هو هذا الزر · ماذا يحدث عند الضغط · ما هي الحالة الآن" عبر Semantics بدلاً من اللون والموضع والحجم — هذا هو جوهر تصميم واجهة المستخدم المتوافقة مع الذكاء الاصطناعي.