التطبيق لنظام التشغيل iOS و Android على Kotlin + Flutter UI

الدخول

مرحبا بالجميع. منذ بعض الوقت ، قررت إنشاء مشروعي لنظامي Android و iOS في نفس الوقت. بطبيعة الحال ، نشأ السؤال حول اختيار التكنولوجيا. نظرت أسبوعين إلى المداخن الشائعة واخترت Kotlin / Native. نظرًا لأنني مطور لنظام Android ، فقد كنت معتادًا على Kotlin لفترة طويلة ، لكن لم تكن لدي خبرة كبيرة في Swift وأردت الحصول على معظم الشفرة الشائعة في كلا النظامين. لذلك ، نشأ السؤال على الفور ، ولكن كيفية كتابة واجهة المستخدم لنظام التشغيل iOS. تشير نظرة سريعة على السوق إلى وجود Flutter ، مما يسمح لك بكتابة واجهة مستخدم لمنصتين في وقت واحد. في الواقع ، بدأت هذه القصة.

توضح هذه المقالة تجربة بناء Flutter باعتبارها واجهة مستخدم و Kotlin للمنطق الأساسي. مهم: تحت القط هناك الكثير من الصور والتعليمات حول كيفية تجميع المشروع

جدول المحتويات

• إنشاء مكتبة مشتركة على Kotlin
• إنشاء تطبيق Android
• إنشاء مشروع دائرة الرقابة الداخلية
• إضافة رفرفة إلى تطبيق Android
• إضافة رفرفة إلى مشروع دائرة الرقابة الداخلية
• الخاتمة

الجزء 1

إنشاء مكتبة مشتركة على Kotlin

1. اختر مكتبة Kotlin Mobile المشتركة
   
   
2. التالي
   
   
3. حدد مجلد العمل الخاص بنا ، حيث قمت هنا بإنشاء مجلد منفصل للمشروع. بما أنه سيكون لدي 4 مشاريع مختلفة ومن الملائم الاحتفاظ بها في مكان واحد
   
   
4. يبقى تحديد المسار إلى sdk.dir في sdk.dir ويبدأ المشروع في بناء ، لدي المسار /Users/vlad/Library/Android/sdk
   
   
5. هيكل المشروع ، وتغيير أسماء الحزمة من sample habr.example
   
   
6. حان الوقت لبدء النشر ، استدعاء wrapper . بعد ذلك ، سيظهر .gradlew .gradlew في مشروعنا وسيكون من الممكن التعامل معه من المحطة
   
   
7. تشغيل من المحطة. / ./gradlew publishToMavenLocal
   
   
8. بعد ذلك ، في مستودع التخزين المحلي ، سيكون لدينا 4 مجلدات تكمن فيها مكتباتنا
   
   

الجزء 2

إنشاء تطبيق Android

إنشاء مشروع الروبوت

1. في وقت كتابة هذا التقرير ، يتم إنشاء المشروع بتبعية "مكسورة" ، لذلك نحن إزالته في نهاية jre7 ، نحصل على koltin-stdlib ، وبعد ذلك يبدأ المشروع في البناء
   
   
2. افتح build.gradle وأضف mavenLocal قسم repositories . مهم! يجب أن يكون قسم repositories الجزء الموجود داخل allprojects وليس في buildScript
   
   
3. الآن يمكننا إضافة مكتبتنا كتبعية
   implementation 'habr.example:commonLibrary-jvm:0.0.1'
   
   
4. نفتح activity_main.xml ونحدد في معرف TextView main_activity_text
   
   
5. في MainActivity.kt فقط تعيين النص في TextView هذا
   
   
6. رائع ، في هذه المرحلة لدينا تطبيق Android يمكنه استخدام وظيفة hello() من مكتبتنا
   مرحبا () على المحاكي

   

الجزء 3

إنشاء مشروع دائرة الرقابة الداخلية

1. اختيار تطبيق عرض واحد
   
   
2. املأ المعلومات الأساسية وحدد المجلد. من المهم اختيار جذر المجلد لمشاريعنا الأخرى ، لأنه في Xcode سيخلق مجلد فرعي باسم المشروع
   
   
   
   
3. أولاً ، أضف CocoaPods . للقيام بذلك ، قم بتشغيل pod init في مجلد المشروع ، أغلق المشروع في Xcode وقم بتشغيل pod install . نرى أن التثبيت اكتمل بنجاح
   
   
4. مهم! CocoaPods لا تنصح بإضافة مجلد /Pods CocoaPods ، لكنني فعلت ذلك على أي حال. منذ بعد إضافة flutter ، سنقوم بإعادة تكوين التبعيات لكل build . حتى الآن ، أنا أحب هذا الحل أكثر من انسداد .git
5. افتح المشروع من خلال ملف Awesome App.xcworkspace
   
   
6. نفتح المحطة ، في ذلك انتقل إلى مجلد لدينا commonLibrary وتشغيل ./gradlew linkDebugFrameworkIos . بعد ذلك ، يظهر iOSFramework في مجلد build بنا iOSFramework
   
   
7. اختر الهدف
   
   
8. ولهذا الهدف نضيف الثنائي
   
   
9. اختر إضافة أخرى
   
   
10. حدد المسار إلى framework الذي تلقيته في الخطوة 6 ( commonLibrary.framework )
    
    
    
    
11. الآن في المشروع يجب أن يتم عرض هذا framework
    
    
12. انتقل إلى Build Settings وقم بتعطيل Enable Bitcode
    
    
13. أنت الآن بحاجة إلى تحديد المكان الذي تبحث فيه عن framework عملنا بالضبط ، افتح Framework Search Path
    
    
14. حدد المسار "${PODS_ROOT}/../../commonLibrary" . تأكد من اختيار recursive . بالطبع ، يمكنك الاستغناء عن هذا ، إذا قمت بتكوين المسار بدقة أكبر. ولكن نظرًا لأن هذه ليست سوى بداية المشروع ، فمن المهم الآن بالنسبة لنا التأكد من أن هذه المجموعة بأكملها ستعمل. ويمكننا تغيير الطريق وبعد ذلك
    
    
15. نحن بحاجة إلى التأكد من أنه مع كل build في Xcode framework gradle باستخدام gradle . Build Phases مفتوحة
    
    
16. أضف Script Phase جديدة
    
    
17. أضف رمز البرنامج النصي.
    
    

     cd "${PODS_ROOT}/../../commonLibrary" echo $(pwd) ./gradlew linkIos 

    
    هنا نذهب ببساطة إلى مجلد المشروع في مكتبتنا ./gradlew linkIos . هناك حاجة إلى مكالمة echo $(pwd) فقط لإظهارها في وحدة التحكم أي مجلد معين وصلنا إليه
    
    
18. نحن ندفع build phase بنا إلى القمة ، مباشرة بعد target dependencies
    
    
19. الآن افتح ViewController وأضف مكالمة إلى ViewController من المكتبة
    
    
20. نطلق مشروعنا ونرى
    
    

رائع ، هذا يعني أننا قمنا بتوصيل مكتبة Kotlin بشكل صحيح بمشروع iOS.
كل ما تبقى هو إضافة رفرفة ، كإطار لكتابة واجهة المستخدم ، إلى تطبيقاتنا ويمكنك البدء في تطوير المنتج

الجزء 4

إضافة رفرفة إلى تطبيق Android

ثم ساعدني مقال عن جيثب كثيرا

1. انتقل إلى المجلد الجذر حيث توجد جميع مشاريعنا وقم بعمل flutter create -t module flutter_ui
   
   
   
2. افتح settings.gradle وقم بتمكين وحدة الرفرفة الخاصة بنا كمشروع فرعي
   
   
   
3. افتح ملف build.gradle وأضف مشروعنا وفقًا
   
   
   
4. MainActivity.kt إلى FlutterActivity
   
   
   
5. أضف App.kt ، حيث سنقوم بتهيئة Flutter عند بدء تشغيل التطبيق
   
   
   
6. قم بتغيير البيان وقل أنه لدينا الآن فصل Application
   
   
   
7. تأكد من إضافة java8 ، دون أن تبدأ هذه الرفرفة
   
   
   
8. نرى واجهة المستخدم في سجلات Hello from JVM ، مما يعني أننا قمنا بتجميع واجهة المستخدم على Flutter والمكتبة الرئيسية في Kotlin / Native
   
   
   
   
   
9. أضف طريقة إلى MainActivity.kt بها من MainActivity.kt . هنا ، في حدث من Flutter ، نرجع hello() من مكتبة kotlin
   
   
   
10. وأضف رمزًا إلى main.dart والذي سوف يستدعي الطريقة الموجودة في الجزء iOS/Android- التطبيق
    
    
    
11. نحن نحصل عليها
    
    

الجزء 5

إضافة رفرفة إلى تطبيق iOS

1. تحديث لدينا Podfile
   

    flutter_application_path = File.expand_path("../flutter_ui", File.dirname(path)) eval(File.read( File.join( flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding) 

   
   
   
   
2. هذا مهم . أضف $(inherited) إلى السطر الأول من framework search paths . تأكد من التحقق من أن framework search paths ليست فارغة
   
   
   
   عندما تقوم بتغيير التبعيات في some/path/my_flutter/pubspec.yaml ، فإنك تحتاج إلى تشغيل flutter packages get من some/path/my_flutter لتحديث التبعيات في podhelper.rb . بعد ذلك ، قم بتشغيل pod install من some/path/MyApp
3. أضف Build Phase ، فقط للرفرفة. فوق ما أضفناه في الجزء 3 من Script phase
   
   

    "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed 

   
   
4. AppDelegate لدينا مع FlutterAppDelegate
   
   
5. تحديث ViewController
   
   
6. لف ViewController لدينا في NavigatorController
   
   
7. الآن يبدأ التطبيق. لكن ، في الوقت الحالي ، ليس لدينا صلة بين المكتبة والرفرفة
8. أضف هذا الرابط باستخدام FlutterMethodChannel
   
   
   
9. رائع ، الآن يستخدم تطبيق iOS flutter لـ UI و kotlin للمنطق الرئيسي.
   
   
   

الخاتمة

المهم أن أقول هنا: أنا لا أدعي أنك تعلمت شيئًا جديدًا أو فريدًا. شاركت للتو تجربتي ، لأنه من أجل جعل كل شيء يعمل معًا ، أمضيت حوالي 4 أيام عمل. ولم أتمكن من العثور على أمثلة لرمز المشروع الذي يستخدم كلا Kotlin / Native و Flutter

المشاريع النهائية

1. مجموعة المشروع
2. رفرفة-واجهة المستخدم
3. ios
4. الروبوت
5. مكتبة مشتركة

قائمة الروابط التي ساعدتني ، ولكن ليس على الفور

1. نفسه رفرفة
2. العلاقة بين الكود الأصلي وقنوات النظام الأساسي لرفرفة واجهة المستخدم
3. إضافة رفرفة إلى تطبيق جيثب الحالي
4. Kotlin Native نظرة عامة على السكان الأصليين