حول مشروع SwiftUI الى الـ Android مع Skip

ديسمبر 25, 2023

خلال السنوات الماضيه طلعت ادوات Cross platform مختلفه من اشهرها Flutter و React Native

لكن هذه الحلول الاداء فيها مو بذاك المستوى ولا يترقى لمستوى الـ Native ولكنها الأقرب للـ Native من مثلا Xamarin و Ionic
ايضا احجام التطبيق تصبح جدا كبيره عند برمجتها عن طريق الـ Cross platform

لكن هذه السنة Jetbrains اطلقت الـ Jetpack Compose Multiplatform للـ iOS بنسخة Alpha
الاداء في Multiplatform تقوم بتحويل واجهة الـ Android للـ iOS بمعنى يتم برمجة المشروع بـ Kotlin و
Jetpack Compose
ومشاركة تصميم الواجهة بين الـ iOS و الـ Android وايضا مشاركة الـ Network layer و Database الخ بين النظامين ، كأداة فهي افضل من بقيت الـ Cross platform لكن لازالت سيئه مع الـ iOS

عشان تتضح الصوره اكثر مع Jetpack Compose Multiplatform تبرمج Native بلغة Kotlin و ايطار Jetpack Compose في الـ Android والاداة تشاركها مع الـ iOS باستخدام مكتبات خارجيه ومن الي شفته الواجهات الـ iOS تكون مطابقة لواجهة الـ Adnroid بمعنى بتصميم Material Design

لكن قبل شهرين تقريبا تم اطلاق نسخة الـ Preview لأداة جديد تدعى Skip
وظيفتها مختلفه فهيا لمطورين SwiftUI بمعنى تبرمج Native بلغة Swift وايطار SwiftUI وبإستخدام مكتبات Skip تحول الواجهة الى الـ Android ، النتيجه كود Native في iOS وايضا Native في في الـ Android
الامر اشبه انك تبرمج Native في الـ Android وتعتمد على مكتبات خارجيه
الكود النهائي هو Native مكتوب بلغة Kotlin و ايطار Jetpack Compose

كمبدا فاداة Skip هي افضل اداة من بين جميع ادوات او ايطارات الـ Cross platfrom

مع العلم النتيجة النهائية مع Skip راح تكون كود SwiftUI في الـ iOS وكود Jetpack Compose في الـ Android !
وتستطيع بكل سهولة تعديل الكود او اضافة اكواد خاصة في iOS او اكواد خصه لـ Android ماراح يكون في شي مخفي عنك

فتقدر تبسط الموضوع بأن Jetpack Compose Multiplatform لمطورين الـ Android لإطلاق تطبيقهم للـ iOS بشكل Native تقريباً
و Skip لمطورين الـ iOS لاطلاق تطبيقهم الـ Android بشكل Native

ماهو Skip

هو عباره عن اداة تحول مشروع لغة Swift و وايطار SwiftUI الى لغة Kotlin و ايطار Jetpack Compose

ماهي مميزات Skip

  • تطبيقات Skip لا تبدو Native ولكنها فعلياً Native
  • شفافيه كامله : لا يوجد جزء من تطبيقك مخفي، Skip يقوم بتحويل اكود Swift الى Kotlin
  • وعند اسخدامك لـ Skip فانت تستطيع مشاهدة اكواد SwiftUI وايضا اكواد Comppose وتعديلها وتخصيصها كما تريد
  • خفيف كالريشه : لا يعتمد تطبيقك المكتوب بلغة Swift وايطار عمل SwiftUI على اي مكتبات خارجيه ، وتطبيق الـ Android الناتج يحتاج فقط الى بعض مكتبات Skip مفتوحة المصدر
  • كفاءة في استخدام الـ Memory : تطبيقات Skip تعمل بأفضل اداة في كلا النظامين iOS و Android
  • بيئة تطوير مثالية: بيئة تطوير Skip هي Xcode، بيئة تطوير التطبيقات الرائدة لنظام iOS. لعمل تخصيصاتك الخاصه على الـ Android، افتح المشروع في Android Studio
  • مفتوح المصدر بشكل اساسي: مترجم Skip ليس سوى نصف القصة. الايطار الأساسية التي تدعم تطوير تطبيقات iOS، مثل Foundation و SwiftUI، أصبحت متاحة على Android من خلال مكتبات Skip المجانية ومفتوحة المصدر
  • متوافق مع CI: يُحول Skip الـ Unit Test أيضًا! ، يمكنك التأكد بان الـ Logic يعمل بشكل متطابق في كلا النظامين
  • قابل للإزالة: كودك هو ملك لك – سواء كانت مدخلات Swift أو مخرجات Kotlin – لذلك لن تكون مقيدًا بالاعتماد المستمر على مترجم Skip.

ماهي عيوب Skip

  •  Skip يعتمد على نظام iOS 16 وأعلى
  •  Skip لازال في بدايته فحاليا لا يدعم المكتبات الخارجيه
    عند تواصلي معاهم افادوا بان المكتبات الصغيره راح تتحول بدون مشاكل لكن المعقده يحتاجوا يطلقوا مكتبات لتحويلها بشكل صحيح.
    بمعنى تستطيع برمجة تطبيقات بدون الاعتماد على مكتبات الخارجيه او تستطيع اضافة اكواد خاصه في الـ iOS و الـ Android بشكل منفصل ،مثلا في حال اردت اظهار اعلانات بإستخدام Admob او شراء داخل التطبيق او استخدام Firebase او Database في الوضع الحالي لا يوجد مكتبات لتحويلها بشكل تلقائي
  • الاصدار الأول سيتم اطلاقه في العام القادم ولازال لا يوجد تاريخ محدد له

كيفية تثبيت Skip

بداية الموقع الرسمي له هو Skip

اما بخصوص خطوات التثبيت

١- اول شي لازم تحمل اخر نسخة من الـ Xcode من متجر التطبيقات الماك

٢- حمل اخر نسخة من Android Studio من هنا

٣- حمل Homebrew في حال ماكان مثبته في جهازك بفتح تطبيق Terminal وكتابة هذا الامر

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

٤- في تطبيق Terminal اكتب هذا الامر لتثبيت Skip

brew install skiptools/skip/skip

٥- الان اكتب هذا الامر

skip doctor

النتيجة يجب أن تكون بهذا الشكل

في حال وجود علامة x معناه في شي ناقص وغير مثبت عندك فقم بتثبيته

٦- الموافقه على شروط رخصه استخدام Android Studio
هذه الخطوه هيا اغث خطوه واوقات ماراح تزبط معاك من أول مره لذلك سوف اشرحها بالتفصيل
اذا زبط معاك من اول طريقة تجاهل بقية الطرق

للموافقه على رخصه استخدام Android Studio تحتاج تكون على نسخة Java 1.8 او كما يطلق عليها البعض Java 8 لكن Skip يحتاج Java 17 لذلك في حال ماكنت محمل Java 1.8 او Java 17 فحملهم من موقع اوراكل

وتقدر تتأكد من النسخه الحاليه بهذا السطر

java -version

اذا كانت نسخة 1.8 فامورك تمام اذا لا تقدر تثبت نسخة 1.8 بإستخدام الامرين

brew tap homebrew/cask-versions

brew install --cask adoptopenjdk8

الان تأكد بأن النسخه 1.8
 في حال كانت على نسخة 17 مثلا فاستخدم هذا الامر للتحويل لنسخه 1.8

export JAVA_HOME=$(/usr/libexec/java_home -v 1.8)
export PATH=$JAVA_HOME/bin:$PATH

الان للموافقه على الشروط استخدم هذا الامر

sdkmanager --licenses

في حال ماكنت مثبت Android Studio الا الان فراح تطلعلك اسئله يتوجب عليك الاجابه على جميع بـ y

لكن اذا كنت مستخدم Android Studio سابقاً كمثلا مستخدم Flutter فانت وافقت على الشروط مسبقا ولا يوجد حاجة لهذه الخطوه

في حال الامر السابق لم يعمل ، فاتح تطبيق Android Studio ومن ثم افتح صفحة SDK Manager
وانسخ موقع Android Studio Location

وبعدها اكتب هذا الامر في الـ Terminal

cd /Users/[User Name]/Library/Android/sdk/cmdline-tools/latest/bin/

لا تنسى تغيير اسمك بدل من [User Name]

وبعدها اكتب هذا الامر

./sdkmanager --licenses

ووافق على كل الشروط بكتابة حرف y والضغط على زر انتر

الان في حال مثبت نسخه Java 17 فلا تحتاج الى تثبيتها ولكن اذا لم تحملها فاكتب هذا الامر لتثبيتها

brew install openjdk@17

وللتحويل لنسخه Java 17 اكتب هذا الامر

export JAVA_HOME=$(/usr/libexec/java_home -v 17)
export PATH=$JAVA_HOME/bin:$PATH

تأكد من انها صارت نسخه 17 باستخدام هذا الأمر

java -version

اذا النسخه ١٧ فانتقل لاخر خطوه

٧- اخر خطوه استخدام هذا الامر ويجب ان يتم بنجاح !


skip checkup

النتيجة يجب ان تكون بهذا الشكل

في حال اتبعت جميع الخطوات فغالبا سوف تنجح العملية

لكن في حال واجهة مشاكل فاستخدم هذا الامر


skip checkup -v

وبعدها احفظ محتوى الـ Terminal باستخدام command + S وارسل الملف للدعم عبر هذا الايميل
skip[at]skip.tools
بدل الـ [at] بعلامة @

ايضا تستطيع فتح issue في صفحتهم في Github

كيف تستخدم Skip وتنشأ مشروع جديد

بإستخدام هذا الامر تستطيع انشاء مشروع جديد

skip init --open-xcode --appid=[bundle.id] [project-name] [AppName]

بدل الـ [bundle.id] باسم فريد
وبدل [project-name] باسم المشروع
وبدل [AppName] باسم التطبيق

مثال للاستخدام

skip init --open-xcode --appid=com.basel.MyDemoApp myDemoProject MyDemoApp

النتيجة راح تكون بهذا الشكل

قبل ما تعمل Run للمشروع تحتاج انك تحمل الـ Emulator في الـ Android Studio

افتح تطبيق Android Studio وانشأ اي مشروع جديد وبعدها افتح صفحة Device Manager وثبت اي جهاز واي اصدار نظام قد جربت اصدار 34 و 33 وما واجهة فيهم مشاكل

انا قمت بتحميل جهاز Pixel 6 واصدار 33

فتقدر الان تفتح الـ Emolator من الـ Terminal بهذا الاوامر

امر الوصول لمجلد الـ Emulator

cd ~/Library/Android/sdk/emulator

امر عرض جميع الـ Emolator المثبته في الجهاز

./emulator -list-avds

امر تشغل نسخة Pixel 6 بما انها هيا النسخه المثبته في جهازي

./emulator -avd Pixel_6_API_33

تشغيل المشروع

يتوجب عليك تشغيل الـ Emulator قبل الضغط على زر Run في الـ Xcode

كما لاحظت سابقا بعد كتابتك لامر

skip init --open-xcode --appid=[bundle.id] [project-name] [AppName]

انفتح المشروع في الـ Xcode

الان بعد تشغيلك للـ Emulator شغل المشروع في الـ Xcode باي جهاز تريده

راح تطلع لك هذه الرسالة وافق عليها ، اعمل Trust

قد تواجهة هذا الخطأ

The Gradle version 6.0.1 is below the minimum supported version 8.1.1 at /usr/local/bin/gradle. Update with the command: brew upgrade gradle.

كل الي عليك تحدث الـ Gradle بهذا الامر

brew install gradle

راح يحدثه لنسخه 8.5 لكن الخطأ راح يظل موجود في الـ Xcode

لانه تحتاج تعمل خطوه اضافيه

تأكد من النسخه في هذا المسار ، بكتابة هذا الامر

/usr/local/bin/gradle -v

راح تلاحظ انها لازالت على نسخة 6.0.1

لذلك يتوجب عليك تحديثها بكتابة هذا الامر

ln -sf $(brew --prefix)/opt/gradle/libexec/bin/gradle /usr/local/bin/gradle

تأكد مره اخرى بأن النسخه تغيرت باستخدم هذا الامر

/usr/local/bin/gradle -v

الان راح تصير النسخه 8.5

تقدر الان تشغل المشروع في الـ Xcode

مع ملاحظة بان اول Build راح يطول عند عمل Run لكن بعدها راح يصير سريع

النتيجة

كما تلاحظ في الفيديو ، الكود كود SwiftUI
وعند تشغيل المشروع كل النظامين حافظوا على نفس ستايل الافتراضي لتطبيقات النظامين

كيف تحديث Skip

بطبيعة الحال بشكل دوري راح يتم إصدار تحديث جديد لـ Skip
لذلك لأجل التحديث لاخر نسخة

اكتب هذا الامر في الـ Terminal

 skip upgrade

احدث تحديث عند كتابتي لهذا المقال هي نسخة Skip 0.7.38

كيف تشغل الـ Preview في SwiftUI ؟

من الامور التي سوف تلاحظها هو عدم امكانية تشغيل الـ Preview في اي مشروع مع Skip

سبب المشكلة انه الـ Preview راح يحاول يشغل الـ Android لكنه لن يعمل في الـ Preview
لذلك الحل هو انك تعطيله في وضع الـ Preview

عن طريقة اضافة هذا الـ Script

if [ "${ENABLE_PREVIEWS}" == "YES" ]; then
    echo "note: skipping skip due to ENABLE_PREVIEWS"
    exit 0
fi

لاحظ الصوره هذه لمعرفة اين تضعه

كيف كتابة كود مخصص لنظام معين ؟

قد تحتاج الي اضافة اكواد مخصصه لنظام معين

والطريقة هيا بإستخدام احدى الطرق التالية

#if SKIP
print("Android")
#endif

#if !SKIP
print("iOS")
#endif

    
#if SKIP
print("Android")
#else
print("iOS")
#endif

    
#if os(Android)
print("Android")
#else
print("iOS")
#endif

ايضا تستطيع اضافته ضمن الـ Modifier مثال

Text("Hello World")
    #if SKIP
// Android
    .italic()
    #else
// iOS
    .bold()
    #endif

في الكود السابق في نسخة الـ Android الخط راح يكون italic اما نسخة الـ iOS راح يكون bold

ما الفرق بين Skip والـ Cross platform الأخرى مثل Flutter

هذه الصورة توضح الفرق

الصوره السابقة تم اخدها من هذه الصفحة

هل يمكن استخدام Database مع Skip ؟

Skip وفرت مكتبة بإسم SkipSQL مبنيه على SQLite3

هل يمكن استخدام Firebase مع Skip ؟

Skip تعمل على توفير مكتبة بإسم  SkipBase

هل يمكن استخدام الترجمة Localization مع Skip ؟

حاليا غير مدعومه ، لكن بمجرد دعمها فقط سوف تحتاج تعديل ملف Localizable.xcstrings وسيتم تلقائيا تحويله للـ Android بشكل تلقائي

هل يمكن استخدام Lottie animations مع Skip ؟

Skip وفرت مكتبة بإسم  SkipMotion لدعم Lottie