منذ إطلاقه الذي طال انتظاره، جذب فلاتر Flatter الكثير من الاهتمام، ونحن متحمسون له أيضاً. ونظراً لوجود موارد جديدة – ولكن قليلة – منتشرة عبر الإنترنت لتعلم فلاتر Flatter؛ فقد قمنا بتجميع دليل تعليمي يساعد المطورين على البدء بتطوير تطبيقات باستخدام فلاتر Flatter.
ما هو فلاتر Flatter، وما الذي يميزه؟ كونك مطور تطبيقات تستخدم فلاتر Flatter، تحتاج فقط إلى تذكر هذا الأمر: تم تصميم فلاتر Flatter للعمل مع أي جهاز مزود بشاشة ويعمل مع:
من السهل تنصيب فلاتر Flatter، ولكن ذلك يتوقف على نظام التشغيل الذي تستخدمه
السبب في أنَّه يُطلب منك تنصيب فلاتر Flatter قبل تنصيب دارت هو أنَّه عند تثبيت فلاتر Flatter، تقوم أيضاً بتثبيت دارت؛ لذا سيقرر فلاتر Flatter أي إصدار من دارت سيتم استخدامه.
إذا كنت جديداً على تطوير الأجهزة المحمولة بشكل عام، فستحتاج إلى تنزيل إكس كود “Xcode” (أداة لتطوير الآي أو إس) وآندرويد ستوديو أيضاً. بمجرد تنصيب فلاتر Flatter، فإنَّ تقنية توليد الشيفرة لمشروع جديد ستكون عبارة عن أمر برمجي واحد فقط.
يستخدم فلاتر Flatter لغة دارت لإنشاء التطبيقات؛ كما يستخدم كل من فلاتر Flatter وكروم نفس محرك العرض؛ محرك “SKIA”. وبدلاً من التفاعل مع واجهات برمجة التطبيقات الأصيلة “APIs”، فإنَّه يتحكم في كل بكسل على الشاشة.
والآن، بتَّ تعرف لماذا تختار جوجل لغة دارت؛ لذا فلنتعمق في الشرح.
اطلع على المستندات الرسمية للغة دارت، ومقاطع الفيديو التعليمية، وعينات من البرامج.
قم بتعديل أكوادك البرمجية على منصة دارت باد “DartPad” للمبتدئين، واحصل على خبرة أفضل بالعمل عليها.
الآن وبعد أن أصبحت على دراية بلغة دارت، يكون قد حان وقت الانتقال إلى معرفة أساسيات العمل على فلاتر Flatter.
افتح تبويبة المشروع على أندرويد ستوديو، وقم بتنزيل المحاكي، ونسخة آندرويد إذا لم تقم بذلك مسبقاً، وقم بتشغيل المشروع. وافهم الكيفية التي يجب عليك فيها هيكلة دليل المشروع، وفهم الغرض المخصص لكل ملف من الملفات.
الآن وبعد أن قمت بتنصيب فلاتر Flatter، توجد خطوة أخرى في هذا الدليل التعليمي لتعلم فلاتر Flatter، وهي القيام بما يقوم به جميع المطورين: استخدم التعليمات البرمجية التي يستخدمها الآخرون. ما نقصده هو تنصيب ملف الحزمة: “Pubspec”، المكتوب بلغة “YAML”.
تذكر؛ في فلاتر Flatter، كل شيء عبارة عن واجهة رسومية. الواجهات الرسومية تأتي بهيئتين: عديمة الحالة “Stateless” والتي تحتوي على حالة “Stateful”.
الودجيت عديمة الحالة هي تلك التي لا تتغير حالتها؛ مثل زر أو صورة. كما يوحي اسمها، فإنَّها لا تغير حالتها عند تنفيذ إجراء على الشاشة.
عندما تحتاج الواجهات الرسومية إلى الاحتفاظ ببعض الحالات مثل الصفحة الحالية في مستعرض الصفحات، أو علامة التبويب التي تم تحديدها في شريط التنقل السفلي؛ فإنَّ الواجهات الرسومية التي تتضمن حالة ستكون الخيار الصحيح الذي يجب استخدامه.
بدلاً من طريقة إنشاء واجهة رسومية “Widget build method”، فإنَّ الواجهة الرسومية ذات الحالة لديها طريقة بناء تسمى صراحة “setState”.
كما ذكرنا سابقاً في هذا المقال، فإنَّ كل شيء عبارة عن واجهة رسومية في فلاتر Flatter؛ بما في ذلك نماذج تخطيط الصفحات. الواجهات الرسومية مثل الصفوف والأعمدة والشبكة هي أدوات تخطيط – لا نراها على الشاشة – تساعد بقية الواجهات الرسومية المرئية على الترتيب والتقييد والمحاذاة.
يأتي فلاتر Flatter مع مجموعة من الواجهات الرسومية الأساسية القوية، والتي ستساعدك على إنشاء تصميمات مخصصة بالشكل الذي تريده.
إذا كان تطبيقك يتبع إرشادات الماتيريال ديزاين، فإنَّ فلاتر Flatter يحتوي على الكثير منها بشكل افتراضي. يوفر فلاتر Flatter العديد من الأدوات التي تدعم الماتيريال ديزاين. وهي تتضمن أدوات مثل “MaterialApp” و”AppBar” و”Skaffold”، وغيرها.
يحتوي فلاتر Flatter على حزمة مكونات كوبرتينو “Cupertino” التي تتمحور حول الآي أو إس، وتغطي أدوات مثل “CupertinoApp” و”CupertinoNavigationBar”، وغيرها.
لقد رأينا لغاية الآن واجهات رسومية تعرض المعلومات على الشاشة أو ترتب عناصر واجهة مستخدم أخرى. بالنسبة للتطبيق الحقيقي، من الضروري أيضاً أن يكون التطبيق تفاعلياً، مع الحصول على مدخلات المستخدم بأشكال مختلفة؛ مثل الإيماءات، والنقرات، وما إلى ذلك.
ولتحقيق ذلك، يحتوي فلاتر Flatter على عدد من الواجهات الرسومية ذات الحالة، مثل “Checkbox” و”Radio” و”Slider” و”InkWell” و”Form” و”TextField”، وغيرها. هذه الواجهات الرسومية قادرة بما يكفي على الحفاظ على حالتها.
حان الوقت الآن لتعلم فلاتر Flatter لإنشاء تطبيقات حقيقية؛ ونعني تلك التطبيقات التي تحتوي على العديد من الشاشات والصور، وغيرها.
إذاً لنبدأ.
يحتوي فلاتر Flatter على أداة تساعد على إنشاء نماذج تدير بكفاءة المتطلبات الأساسية للنماذج، على سبيل المثال، حالة النموذج، التحقق من صحته، إلخ.
للحصول على مدخلات المستخدم وجعل التطبيق تفاعلياً، نزيد من استخدام الإيماءات. يحتوي فلاتر Flatter على واجهات رسومية مضمنة مسبقاً لتغطية كل هذا.
لجعل التطبيقات جميلة وجذابة، نستخدم الصور. يوفر فلاتر Flatter أداة للصور لعرضها في تطبيق فلاتر Flatter من مصادر مختلفة.
لاستيعاب المزيد من البيانات، نستخدم القوائم “List” لإظهارها. يمكن أن تكون القوائم أفقية أو خطية. يحتوي فلاتر Flatter على أداتي جريد فيو “GridView” وليست فيو “ListView”؛ وهذه أداتان أساسيتان مختلفتان في طريق الاستخدام:
تحتوي معظم التطبيقات على شاشات متعددة تعرض البيانات بطريقة منظمة بصورة جيدة. في فلاتر Flatter، يمكن إجراء العمليات ذات الصلة بالتنقل ضمن التطبيقات باستخدام “Navigator”.
قد نحتاج إلى النظر في الأسئلة التالية:
وماذا عن الرسوم المتحركة في أثناء التنقل إلى شاشة جديدة؟
ترتبط معظم التطبيقات التي نراها في الوقت الحاضر بخادم خارجي، وتتصل به لجلب البيانات أو نشرها. في فلاتر Flatter، يمكننا استخدام تقنية نقل النص الفائق “HTTP” كطرف ثالث للقيام بمثل هذه الأمور.
لدى فلاتر Flatter عدد قليل من البوابات المتاحة، والتي تقوم بمثل هذه الأمور بشكل أكثر كفاءة.
في فلاتر Flatter، يوجد بشكل عام استراتيجيتان لترميز الكائنات وحفظ حالة الكائن الحالية بداخل ملف. التفسير اليدوي وحفظ الحالة الآلي باستخدام توليد الرموز.
يتم تعطيل انعكاس وقت التشغيل “Runtime reflection” في فلاتر Flatter، مما يؤدي إلى عدم وجود مكتبات مثل “GSON” أو “Jackson” أو “Moshi”.
في بعض الأحيان، نحتاج إلى حفظ البيانات في الذاكرة الداخلية لكي تكون متاحة بسرعة كلما احتجنا إليها.
في فلاتر Flatter، يتم استخدام أدوات إدارة الحزم “Pub” بكثرة. تلك طريقة رائعة للعمل بشكل جماعي ولمشاركة التعليمات البرمجية عبر التطبيقات دون الحاجة إلى تطوير كل شيء من الصفر.
مع وجود العديد من أدوات إدارة الحزم، قد تواجه مشكلات مثل التعارضات في تحليل الإصدارات.
في أي تطبيق نموذجي، من الحالات الشائعة الاستخدام أنَّ التغيير الذي تم إجراؤه في النقطة “أ”، يعكس بعض التغييرات في النقطة “ب”؛ وهذا ما يسمى إدارة الحالة.
لدى فلاتر Flatter منهجيات متعددة يمكنها إدارة حالة التطبيق بكفاءة. استناداً إلى حجم المشروع، يمكن تحديد التقنيات المناسبة. وسنناقش هنا بعض التقنيات الممكنة لإدارة الحالة.
المزود هو مزيج من حقن التبعية “Dependency injection” وإدارة الحالة المبنية مع الواجهات الرسومية.
إنَّ “BLoC” عبارة عن مكتبة بسيطة وقليلة الحجم وقابلة للاختبار بدرجة عالية لإدارة الحالة التي يمكن التنبؤ بها في لغة دارت.
عندما ينمو التطبيق، يصعب اختبار كل ميزة على حدة، ثم يأتي الانحدار “Regression” أيضاً. في مثل هذه الحالات، فإنَّ اختبار الأتمتة “Automation testing” هو الطريق الذي يجب المضي فيه؛ إذ يساعد على ضمان ثبات أداء التطبيق كما يتوقع منه قبل إصداره؛ وبذلك نتجنَّب الوقوع في مثل هذه المواقف.
ينقسم اختبار الأتمتة إلى ثلاث فئات:
الهدف من اختبار الوحدة هو اختبار وحدة معينة من التعليمات البرمجية، والذي يتحقق من أنَّ الكود البرمجي يعمل كما هو متوقع في سيناريوهات مختلفة. اختبار الوحدة سريع جداً ولا يتطلب جهازاً فعلياً لتنفيذه.
في أثناء إجراء اختبارات الوحدة، يجب أن تكون أي فئات تابعة قابلة للحقن، حتى نتمكن من تنفيذ حقن تجريبي أو وهمي للاعتمادية، والتحقق مما إذا كان كل شيء يعمل كما هو متوقع. لدى فلاتر Flatter منهجية محاكاة تساعد على إنشاء تنفيذ وهمي أو تجريبي.
اختبار الواجهات الرسومية في فلاتر Flatter عبارة عن تقنية لاختبار واجهة المستخدم.
الهدف من هذا الاختبار هو اختبار ما إذا كانت الواجهات الرسومية الخاصة بواجهة المستخدم تبدو كما هو متوقع، وتكون تفاعلية. اختبار الواجهات الرسومية لا يتطلب جهازاً مادياً.
الهدف هنا هو اختبار كيفية عمل الوحدات المتعددة معاً. يتم إجراء اختبار التكامل على جهاز أو محاكيات حقيقية، ويمكننا فيه إطلاق سلسلة من أحداث تفاعل المستخدم، مع توقع تنفيذ واجهة المستخدم أو رموز الوحدات بشكل صحيح.
يساعد التطوير المقاد بالاختبار “TDD” أو اختبارات الوحدة عندما يكون لدى صاحب المصلحة مهارات تقنية قوية. أما التطوير الموجه بالسلوك يتعلق بكتابة حالة اختبار من وجهة نظر المستخدم النهائي؛ والذي يكون مكتوباً بلغة إنجليزية بسيطة.
يمكن كتابة حالة الاختبار بالتنسيق التالي:
يساعد التطوير الموجه بالسلوك على فهم وظائف البرامج من منظور المستخدم النهائي، ويصبح نوعاً من الوثائق الوظيفية.
مسارات مهنية ذات صلة