🥣 👨‍👩‍👦 👋🏼 تطبيق جديد "قنديل البحر". لماذا ترفرف؟ 👌🏼 ↕️ 💙

يتحدث المدير الفني بوريس جورياتشيف عن كيفية عمل ميدوسا عليها لمدة عام وسبب كتابتها في Flutter

في 12 مايو ، تم إصدار تطبيقات Medusa المحمولة الجديدة ( iOS و Android ) - بعد عامين تقريبًا من قرارنا إعادة كتابتها. لماذا طويلة؟ لماذا لا تطبيقات أصلية؟ لماذا رفرفة؟ كل هذا رواه المدير الفني لميدوسا بوريس جورياتشيف.

على عكس تطبيقاتنا القديمة ، قررنا عدم جعل التطبيقات الجديدة أصلية. أولاً ، كتابة نفس الرمز مرتين أمر شاق. ثانيًا ، لن تعمل أبدًا بحيث يكون كل شيء متزامنًا ونفسًا في مشروعين مختلفين كتبهما أشخاص مختلفون. عادة ما يعمل شخص ما بشكل أبطأ ، يذهب شخص ما في إجازة ، شخص ما لديه دين تقني يجب إغلاقه. لقد دفعتنا كل خبرتنا في إنشاء ودعم التطبيقات الأصلية - إما أننا نفعل شيئًا خاطئًا ، أو أن هذا ليس ببساطة طريقنا. وبدأنا في البحث عن عملنا. لقد جربنا React Native و Ionic ، فكرنا في نهج Basecamp - كل شيء في الويب + طبقة أصلية رفيعة ، حتى حاولنا التقدم نحو تطبيق الويب التقدمي والبقاء على الإنترنت.

في الوقت نفسه ، حضرت مؤتمر Google I / O والتقيت بالأشخاص الذين يصنعون Flutter هناك. جربت Dart على الفور وعملت قليلاً على Flutter ، ولكن في ذلك الوقت لم تكن التكنولوجيا جاهزة بعد لـ Medusa: كان من المستحيل تضمين العديد من المواد التفاعلية والتضمين داخل موادنا ، ولكن هذا أمر بالغ الأهمية لوسائل الإعلام. لذلك قررت الانتظار حتى يكبر Flutter.

أثناء الانتظار ، قمنا بالكثير من الأشياء على الويب: أعدت كتابة الموقع ، وكتبت إصدارًا جديدًا من AMP. كتبنا ونقلنا جميع مشاريع Medusa إلى ui-kit - مكتبة واحدة من المكونات التي يستخدمها الموقع وبفضلها يمكن لعدد كبير من آليات اللعبة لدينا. قمنا بتقسيم إصدارات سطح المكتب والجوّال للموقع ، بحيث بدأ تشكيل الصفحات الموزعة (الصفحات الرئيسية والأقسام) في مكانين مختلفين وفقًا لقواعدهم الخاصة.

بالتوازي مع العمل على الموقع ، كنا نفكر في تطبيق جديد - توصلنا إلى الملاحة والمعاني والشاشات والميزات وما إلى ذلك.

بالتوازي مع ذلك ، حدثت تغييرات مهمة في هيكل القسم الفني. بدأنا في استخدام تقويم Google وأدوات التخطيط للاجتماعات بنشاط ، وقمنا بالتبديل من Trello إلى Basecamp. من الواضح أنه من الغريب التحدث عنه. لكن الأمر استغرق الكثير من الوقت والجهد لتبسيط الفوضى. جدول أعمال واضح للاجتماعات ، ومتابعة سريعة ، وملفات لم تضيع ، ونطاقات مخطط التل جعلت من الممكن التعامل مع تيار ضخم من المهام وعدم الموت.

لماذا لا يزال رفرفة. وقليلا عن دارت

عندما يتعلم الناس عن Flutter ، فإنهم يتعلمون حتمًا عن Dart. يبدو أنه يعتبر أكبر عيب في Flutter ، ولكن بالضبط حتى تحاول الكتابة عليه. إنه رائع حقًا. تتبع جافا سكريبت خاص جدًا.

Dart هي لغة برمجة تم تطويرها بواسطة Google. تم الإعلان عنه في عام 2011 ، أي أنها لا تزال لغة شابة. لم تصبح لغة برمجة رئيسية (على الأقل في الوقت الحالي) ، ولكن في نفس الوقت يتم استخدامها بنشاط في الشركة نفسها. بالإضافة إلى Google ، هناك شركات كبيرة أخرى ، على سبيل المثال ، Wrike ، والتي تستخدم Dart وتكتب مجموعة كاملة عليها.

نظرًا لأن كل من Dart و Flutter مدعومتان من قبل نفس الشركة ، فإن هذا يجعل من الممكن تغيير اللغة إلى احتياجات Flutter. على حد علمي ، يتفاعل الفريقان بنشاط مع بعضهما البعض ، لذلك تظهر الرقائق باستمرار في اللغة ، مما يسمح لك بكتابة كود أكثر متعة على Flutter.

لن أحاول شرح ما يتألف منه Flutter - ويكيبيديا ستتعامل مع هذه المهمة بشكل أفضل ، لكنني سأقول فقط أنه من بين المؤلفين هناك أشخاص قدموا في Chromium.

في ديسمبر 2018 ، أصدر فريق Flutter مكتبة تضمين Webview في Flutter. كان الأمر خامًا ، وبالمناسبة ، لم يغادر بعد حالة معاينة المطورين ، ولكن هذه الحقيقة لم تتوقف للبدء في تقدير هيكل التطبيق المستقبلي. لقد جربت لعدة أشهر في وقت فراغي ، ثم تم اتخاذ قرار نهائي.

في البداية جلست لكتابة إصدار جديد من API خصيصًا للتطبيق. يمكن صياغة إيديولوجية واجهة برمجة التطبيقات هذه على النحو التالي: إذا كان من الممكن القيام بشيء ما على الواجهة الخلفية ، فأنت بحاجة إلى القيام بذلك على الواجهة الخلفية. وليس لأنه من الصعب القيام بشيء ما على العميل. الحقيقة هي أن الإصدارات على App Store و Google Play هي عملية شاقة وطويلة. تحتاج إلى التكيف مع جداول عملهم وتذكر أنه لن يقوم جميع المستخدمين بتحديث التطبيق على الفور. يمكن تجنب ذلك عندما يحدث المنطق الرئيسي على الخادم الخاص بك. هل تريد نقل العنوان بمقدار 10 بكسل لأسفل؟ مرحبا بك. هل تريد إزالة مكون أو إضافته بسرعة؟ لا مشاكل!

وللسبب نفسه ، تحتوي واجهة برمجة التطبيقات الخاصة بتطبيق الهاتف المحمول على أبسط المكونات الممكنة ، والتي يتم من خلالها تجميع أي مادة تقريبًا بشكل متكرر. أقول "تقريبًا" لأننا نعرض الألعاب من خلال WebView. لا يهم التطبيق ما يجب إظهاره - بطاقة أو بودكاست أو أخبار أو "Big Top". تتم معالجة كل شيء برمز واحد ، ومهمة التطبيق هي أخذ المكون وتقديمه (أو الانتقال إلى قائمة أطفاله واستدعائه بشكل متكرر).

حجة مهمة أخرى لصالح Flutter: المطور "يتحكم في جميع وحدات البكسل". عندما تحتاج إلى التأكد من وجود ظلال صحيحة في كل مكان ، كما هو الحال في التخطيط في Sketch ، أو تريد تغيير الشفافية على طول المنحنيات ، أو إذا كنت تريد أن تكون أحجام الخط وجميع الطباعة قابلة للتخصيص ، فإن كل شيء في Flutter بسيط وواقعي.

ميزة قاتلة أخرى في Flutter هي راحة التطوير. إعادة التحميل السريع ، التي اعتدت عليها كثيرًا في تطوير الويب ، والسرعة السريعة لإعادة تحميل التطبيق دون فقدان الحالة تجعل المهمة سهلة قدر الإمكان. لا تحتاج إلى الجلوس والانتظار حتى يتم إعادة إنشاء التطبيق ، ثم الانتظار حتى يعمل الرمز الجديد ، وتكرار الحالة التي تعمل فيها. كل شيء يحدث بسرعة وباردة.

النظام البيئي

على الرغم من أن Flutter و Dart ليسا تقنيات شائعة جدًا حتى الآن ، إلا أننا لم نواجه مشاكل في العثور على المكتبات. معظم ما هو مطلوب في التطبيق إما في الإطار نفسه أو على pub.dev. المجتمع لطيف للغاية وجاهز للمساعدة. هذا الاتصال هو نفس حقيقي للهواء النقي ، وداعم للغاية.

بالإضافة إلى ذلك ، تدعم Google نفسها Flutter بشكل جيد. نستخدم Firebase للدفع والتحليلات والملفات الشخصية وتخزين بيانات المستخدم (سجل القراءة ومواقع الحلقات والإشارات المرجعية) ، وكل شيء "يعمل فقط" هناك. بالطبع ، كشخص لم يسبق له أن كتب تطبيقات أصلية من قبل ، في بعض الأحيان يكون من الصعب التسلق إلى ملفات التدرج أو وضع الخصائص في info.plist. ولكن عادة ما يكون كل شيء مبتسمًا ، ولا يوجد شيء معقد بشكل لا يصدق.

اختلافات المنصة

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

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

المثال الأبسط والأكثر حيوية هو التمرير السريع للخلف في iOS. مساحة الشاشة التي تقبل التمرير صغيرة جدًا بشكل افتراضي ، حوالي 20 بكسل. هذه هي الطريقة التي يعمل بها تطبيق البريد على أجهزة iPhone ، وهو غير مريح للغاية. على تويتر ، تم توسيع هذه المنطقة قليلاً ، بينما في Telegram ، فهي ببساطة ضخمة! Telegram على Android لديه نوع خاص من التنقل من قائمة الدردشة إلى الدردشة ، إنه تقاطع بين iOS و Android. نعم ، الإرشادات رائعة ، ولكن على iPhone XR ، فإن الوصول بإصبعك إلى الحافة اليسرى العلوية من الجهاز غير مريح للغاية. لذلك قررنا (بالطبع ، الاعتماد على البيانات) أنه في تطبيق "ميدوسا" ، سيكون الزر "رجوع" على iOS أدناه. ولكن على Android لن يكون على الإطلاق. للقيام بذلك ، هناك svaypas (svaypas الخاص بنا وجديد Android) وزر نظام "رجوع".

يقول زميلي ، المدير الفني لـ Medusa Nastya Yarovaya:

لدي أيدي صغيرة وهاتف كبير. يبدو الأمر سخيفًا ، لكنه أثر على قرارين مهمين في عملية التطوير. أولاً ، اقترحت زيادة منطقة التمرير مرة أخرى بشكل كبير (زادت إلى 50٪) - وهو الانحراف الأول عن المبادئ التوجيهية. بعد ذلك ، عندما عملنا على أزرار التنقل والوظيفة داخل المادة ، اقترحت وضع زر الرجوع في القائمة العامة أدناه - وهذا انحراف آخر عن النمط المعتاد في الواجهة. الآن يمكنك الوصول إليه بإبهامك ، لأنه يتم تمريره من خلاله.

نحن نعلم أننا سنطير بالتأكيد لأننا انتهكنا عددًا من توصيات Apple و Google. ولكن ، إذا كان هناك أي شيء ، فإننا نستخدم أيضًا الهواتف ونفهم أن العديد من الأنماط عفا عليها الزمن ، حيث تم اختراعها للأجهزة بمقدار النصف.

القليل من الممارسة: كيف يعمل في Flutter

بعد React والأطر التفاعلية الأخرى ، يمكنك إنشاء نموذج أولي على Flutter في غضون يومين. فكرة عامة عن Flutter - كل شيء هو عنصر واجهة مستخدم. Flutter يعطي نموذجين (في الواقع ثلاثة): يمكنك استخدام الحاجيات المادية التي تتبع مفهوم التصميم المادي. يمكنك استخدام أدوات Cupertino المصغرة - الأدوات التي تبدو وتتصرف على iOS. ويمكنك كتابة كل شيء بنفسك.

تقريبًا ، هناك نوعان من الأدوات التي يتفاعل معها المطور: عديم الحالة والحالة.

الحاجيات عديمة الحالة هي أدوات زائد أو ناقص لا تحتوي على منطق داخلها يجب أن يغير حالة الأداة.

الحاجيات ذات الحالة لها وظيفة setState (مرحبا ، رد فعل!). يمكنك تغيير الحالة ، وإعادة رسم القطعة.

ولكن بالطبع ، لن يذهب تطبيق كبير على setState البسيط إلى حد بعيد ، لذلك هناك حاجة إلى حل إدارة الدولة.

هناك العديد من الحلول لـ Flutter. على سبيل المثال ، هناك نمط BloC يتم فيه استخدام التدفقات والأحداث من مصادر البيانات ، فهي تحتوي على منطق الأعمال الذي يثير ولادة أحداث جديدة. يتم الاستماع إلى هذه الأحداث من خلال الحاجيات ، وتستجيب الحاجيات للتغييرات.

قد يرغب أولئك الذين يأتون بعد React في تجربة Redux. من الناحية النظرية ، لا ينبغي أن تكون هناك مشكلة إذا كتبت في رد فعل باستخدام هذا النهج.

جربت كلا النهجين وانتهيت باختيار ثالث. يستخدم تطبيق قنديل البحر الموفر. هذه مكتبة لم تكتبها Google ، ولكن من المثير للاهتمام أن Google ، بعد أن جربت Provider في المنزل ، بدأت في التخلي عن BloC بل وقررت تكرار Provider كمكتبة منفصلة. ولكن في النهاية ، تخلى عن فكرة تكرار رمز شخص آخر وبدأ في استخدام وصيانة ما ولد كمصدر مفتوح.

جهاز المزود بسيط للغاية. هذه القطعة التي توجد داخلها دولة. يتم تغيير هذه الحالة من خلال الوظائف التي تستدعي إعلامًا داخليًا (). هذه الأدوات التي يجب أن تستجيب للتغييرات موجودة في شجرة عناصر واجهة الاستخدام - فهي إما تابعة مباشرة لمزود القطعة أو أطفال لأطفالها. عند استدعاء notifyListeners () ، يحصل الأطفال على قيم جديدة من خلال السياق ويحدث إعادة البناء.

عادة ، يتم الإعلان عن مقدمي الخدمة في "أعلى" التطبيق ، ويمكنك استخدام العديد من مقدمي الخدمة في وقت واحد - كل منهم مسؤول عن منطق الأعمال الخاص به.

الآن نستخدم ثمانية موفرين "يستمعون" في أماكن مختلفة من التطبيق. على سبيل المثال ، إليك كيفية عمل مزود الإشارات المرجعية ، وبفضله يمكن للقراء حفظ موادهم المفضلة وقراءتها في وضع عدم الاتصال ومن نفس المكان على أجهزة مختلفة.

تمت إضافة رد الفعل إلى المثيل للتغييرات على المستند من Firebase ، والتي تحتوي على مفاتيح للمواد التي تم وضع إشارة عليها من قبل القراء. لكل onChange من هذا المستند ، يتم تحديث المتغير المرتبط في الموفر ويطلق عليه إشعار Listeners. ونتيجة لذلك ، تعرض جميع عناصر واجهة المستخدم التي تستمع إلى هذا المزود الرمز الصحيح.

من خلال مقدمي الخدمات ، تم تبديل موضوع التطبيق أيضًا. يحتوي التطبيق على ThemeProvider ، الذي يحتوي في حد ذاته على حالتين من السمات - وفي الواقع ، إنها مجرد خريطة مع تسمية الألوان والألوان نفسها.

ونتيجة لذلك ، يأتي اللون الصحيح إلى القطعة مثل هذا:

TextSpan(
	text: block['data']['first'],
	style: TextStyle(
		color: Provider.of<ThemeProvider>(context)
        .current
        .bodyFontColor,                            
  fontFamily: 'Proxima Nova',
));

كود الموفر ، إذا تم تبسيطه ، سيكون:

class ThemeProvider extends ChangeNotifier {
  CustomThemeData current;
  
  CustomThemeData blackTheme = CustomThemeData(
    name: 'black',
    bodyFontColor: Color.fromRGBO(184, 184, 184, 1),
    ...
  );
  
  CustomThemeData lightTheme = CustomThemeData(
    name: 'black',
    bodyFontColor: Color.fromRGBO(184, 184, 184, 1),
    ...
  );
  
  ThemeProvider(withTheme, withFontMultiplier, withAutoTheme) {
    theme = withTheme;
    autoTheme = withAutoTheme;
    current = withTheme == 'light' ? lightTheme : blackTheme;
  }
}

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

ماذا بعد

في الأسابيع الأخيرة ، قمنا باختبار التطبيق الجديد بنشاط على مجموعة من عدة مئات من قراء ميدوسا. سنخبرك بكيفية سير الاختبار في مقالة منفصلة ، لكني سألاحظ فقط أن Flutter حقق كل توقعاتي. نعم ، لديه طريقة لتطوير ، نعم ، ليس كل المكتبات الغنية بالميزات ، ولكن ، مع ملاحظة السرعة التي يتحرك بها كل شيء ، أنا ، على الأقل بالنسبة لي ، استنتج أن Flutter مع Medusa سيكون لفترة طويلة.