Compose Multiplatform مع Kotlin: دليل شامل

مرحبًا بك في الدليل الأكثر تفصيلاً لـ Compose Multiplatform (CMP) — التقنية الحديثة من JetBrains التي تتيح لك بناء واجهات مستخدم أصلية (Native) لأنظمة Android و iOS و Desktop (Windows و macOS و Linux) و Web، باستخدام كود واحد بلغة Kotlin. في هذا المقال، سنغطي كل شيء بدءًا من التثبيت وصولاً إلى التقنيات المتقدمة وأفضل الممارسات.

1. ما هو Compose Multiplatform ولماذا تحتاجه؟

Compose Multiplatform هو إطار عمل تصريحي (Declarative Framework) لبناء واجهات المستخدم، مبني على Jetpack Compose من Google، ولكنه مُوسّع ليعمل على منصات متعددة. على عكس الطرق التقليدية (مثل استخدام XML منفصل لنظام Android و SwiftUI لنظام iOS)، يتيح لك CMP كتابة منطق واجهة المستخدم مرة واحدة وترجمته إلى كود أصلي لكل منصة مستهدفة.

لماذا تحتاج إليه؟ أولاً، يقلل وقت التطوير بشكل كبير: بدلاً من دعم قاعدتي كود أو أكثر، تعمل على قاعدة واحدة. ثانيًا، تناسق واجهة المستخدم: منطق الأعمال والمظهر الخارجي للتطبيق متطابقان على جميع المنصات، مما يبسط عملية الاختبار والصيانة. ثالثًا، الوصول إلى واجهات برمجة التطبيقات الأصلية (Native APIs): يمكنك استخدام كود خاص بالمنصة (مثل الكاميرا أو تحديد الموقع الجغرافي) عبر آلية expect/actual، دون مغادرة بيئة Kotlin.

يعتبر Compose Multiplatform مثاليًا للشركات الناشئة وفرق المنتجات والمطورين الذين يرغبون في الوصول إلى أكبر عدد ممكن من المستخدمين دون تكرار الجهد. المكتبة في تطور مستمر من قبل JetBrains والمجتمع، وتعتبر في عام 2025 واحدة من أكثر الحلول الواعدة في عالم التطوير عبر المنصات.

2. التثبيت

نظرًا لأن Compose Multiplatform ليس مكتبة بالمعنى التقليدي (مثل حزمة pip)، بل هو مجموعة من الإضافات (Plugins) والإعدادات لـ Gradle، فإن التثبيت يتم عبر نظام بناء Kotlin Multiplatform. إليك الخطوات الدقيقة لإنشاء مشروع جديد:

الخطوة 1: إنشاء مشروع عبر IntelliJ IDEA (موصى به)

افتح IntelliJ IDEA (الإصدار Community أو Ultimate)، واختر File → New → Project. في المعالج، اختر قالب Compose Multiplatform. حدد اسم المشروع واضغط "Finish". سيقوم IDE تلقائيًا بإنشاء الهيكل وجميع التبعيات الضرورية.

الخطوة 2: الإعداد اليدوي (للمشاريع القائمة)

أضف الكود التالي إلى ملف build.gradle.kts الرئيسي:

plugins {
    kotlin("multiplatform") version "2.0.21"
    id("org.jetbrains.compose") version "1.7.1"
    id("org.jetbrains.kotlin.plugin.compose") version "2.0.21"
}

kotlin {
    androidTarget()
    listOf(
        iosX64(),
        iosArm64(),
        iosSimulatorArm64()
    ).forEach { iosTarget ->
        iosTarget.binaries.framework {
            baseName = "ComposeApp"
            isStatic = true
        }
    }

    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation(compose.runtime)
                implementation(compose.foundation)
                implementation(compose.material3)
                implementation(compose.ui)
            }
        }
        val androidMain by getting {
            dependencies {
                implementation("androidx.activity:activity-compose:1.9.3")
            }
        }
    }
}

هام: يجب أن تكون إصدارات الإضافات و Kotlin متوافقة. يمكنك دائمًا العثور على الإصدارات الحالية على مستودع GitHub الخاص بـ Compose Multiplatform.

3. بداية سريعة — مثال عملي بسيط

بعد إنشاء المشروع، افتح الملف commonMain/kotlin/App.kt واستبدل محتواه بالكود التالي:

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
i