Membuat Agen AI Memahami Layar: Panduan Praktis Desain Semantics di Jetpack Compose

Membuat Agen AI Memahami Layar: Panduan Praktis Desain Semantics di Jetpack Compose

Pendahuluan

Untuk membuat agen AI dan alat otomasi pengujian di Jetpack Compose memahami secara akurat "apa yang dilakukan tombol ini", desain Semantics yang tepat adalah kuncinya.

Compose secara internal memiliki "Semantics Tree" yang berfungsi sebagai struktur semantik yang dirujuk oleh aksesibilitas, pengujian UI, dan AI operasi otomatis (seperti Appium/UIAutomator/MCP). Ini setara dengan ARIA dan DOM di web.

Atribut Utama Semantics

contentDescription

Atribut paling dasar untuk memberikan makna pada tombol yang hanya memiliki ikon.

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

AI dan aksesibilitas mengenalinya sebagai "tombol Hapus · dapat diklik · peran Button".

role

Menentukan jenis UI untuk komponen kustom. Box(clickable) biasa akan menjadi "sesuatu yang dapat diklik", tetapi dengan menambahkan role, maknanya menjadi jelas seperti Button, Switch, Checkbox, Tab, dll.

Modifier.semantics {
    role = Role.Button
}

stateDescription

Memberi tahu AI tentang keadaan UI saat ini.

Modifier.semantics {
    stateDescription =
        if (subscribed) "Berlangganan"
        else "Belum berlangganan"
}

testTag

Pengidentifikasi terpenting untuk MCP, Appium, dan agen UI otomatis. Memungkinkan identifikasi stabil yang tidak bergantung pada koordinat, OCR, atau perubahan teks.

Modifier.testTag("login_button")

Pengaturan untuk Integrasi UIAutomator

Compose tidak membuat hierarki View secara langsung, sehingga UIAutomator mungkin tidak dapat melihat testTag. Ini dapat diselesaikan dengan menambahkan berikut ke root:

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

testTag akan dikenali sebagai resource-id dan dapat diambil langsung dari UIAutomator.

Pola Implementasi yang Paling Mudah Dipahami AI

Praktik terbaik adalah menggabungkan beberapa atribut.

Button(
    onClick = login,
    modifier = Modifier
        .testTag("login_button")
        .semantics {
            contentDescription = "Masuk"
            role = Role.Button
        }
) {
    Text("Masuk")
}

Menggabungkan UI Kompleks dalam Satu Makna

Untuk menampilkan kombinasi kompleks ikon, teks, dan Badge kepada AI sebagai satu tombol, gunakan clearAndSetSemantics.

Modifier.clearAndSetSemantics {
    contentDescription = "Tambahkan produk ke keranjang"
    role = Role.Button
}

Struktur bersarang internal dan kelompok ikon dapat diabaikan, hanya makna yang diteruskan ke AI.

Yang Dapat Dicapai dengan Desain Semantics

Stabilisasi Otomasi

Dengan testTag, operasi stabil dapat dilakukan tanpa koordinat atau OCR. Bahkan setelah mendesain ulang UI, otomasi tidak rusak selama testTag tetap sama. Dukungan multibahasa juga menjadi lebih kuat.

Pengurangan Jumlah Token

Jika hanya mengandalkan screenshot, analisis gambar memerlukan banyak token, tetapi dengan Semantics Tree dapat ditangani sebagai data terstruktur yang ringan.

[
  {"type": "Button", "label": "Masuk"},
  {"type": "TextField", "label": "Email"},
  {"type": "TextField", "label": "Kata sandi"}
]

Sangat efektif untuk operasi otomatis jangka panjang dan analisis layar berskala besar, juga berkontribusi pada pencegahan context overflow.

Pemahaman Keadaan oleh AI

Berkat stateDescription, AI dapat memperkirakan keadaan layar saat ini dan membuat keputusan seperti "sekarang sedang berhenti, jadi saya akan menekan tombol putar". Memungkinkan layar dipahami sebagai mesin status.

Analisis Terstruktur dalam Integrasi MCP

Dengan mengambil Semantics Tree melalui MCP Server dan meneruskannya ke LLM Agent, pemahaman makna seluruh layar, estimasi kandidat operasi berikutnya, dan analisis transisi status menjadi mungkin.

Compose UI → Semantics Tree → MCP Server → LLM Agent

Ringkasan Penggunaan Atribut Semantics

Kesimpulan

Compose memungkinkan pemisahan "tampilan" dari "makna". Inti desain Semantics terletak pada kemampuan untuk mendesain UI untuk manusia dan struktur makna untuk AI secara independen.

Jika Anda akan menggunakan agen AI, MCP, UIAutomator, dan pengujian E2E otomatis, standarisasi berikut untuk setiap komponen memberikan return on investment yang tinggi:

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

Menyampaikan "apa tombol ini · apa yang terjadi saat ditekan · dalam keadaan apa sekarang" melalui Semantics daripada warna, posisi, dan ukuran — inilah inti desain UI yang kuat untuk AI.