دليل لتعلم فلاتر Flatter

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

دليل لتعلم فلاتر Flatter

1. فلاتر Flatter: ما هو وكيفية وسبب استخدامه

ما هو فلاتر Flatter، وما الذي يميزه؟ كونك مطور تطبيقات تستخدم فلاتر Flatter، تحتاج فقط إلى تذكر هذا الأمر: تم تصميم فلاتر Flatter للعمل مع أي جهاز مزود بشاشة ويعمل مع:

  • الآي أو إس والآندرويد.
  • الحواسيب والويب (مع دعم تطبيقات الويب التقدمية “PWA”).
  • الأتمتة.
  • أجهزة راسبيري باي “Raspberry Pi”.

2. تنصيب فلاتر Flatter

من السهل تنصيب فلاتر Flatter، ولكن ذلك يتوقف على نظام التشغيل الذي تستخدمه

السبب في أنَّه يُطلب منك تنصيب فلاتر Flatter قبل تنصيب دارت هو أنَّه عند تثبيت فلاتر Flatter، تقوم أيضاً بتثبيت دارت؛ لذا سيقرر فلاتر Flatter أي إصدار من دارت سيتم استخدامه.

إذا كنت جديداً على تطوير الأجهزة المحمولة بشكل عام، فستحتاج إلى تنزيل إكس كود “Xcode” (أداة لتطوير الآي أو إس) وآندرويد ستوديو أيضاً. بمجرد تنصيب فلاتر Flatter، فإنَّ تقنية توليد الشيفرة لمشروع جديد ستكون عبارة عن أمر برمجي واحد فقط.

3. أساسيات لغة دارت

يستخدم فلاتر Flatter لغة دارت لإنشاء التطبيقات؛ كما يستخدم كل من فلاتر Flatter وكروم نفس محرك العرض؛ محرك “SKIA”. وبدلاً من التفاعل مع واجهات برمجة التطبيقات الأصيلة “APIs”، فإنَّه يتحكم في كل بكسل على الشاشة.

والآن، بتَّ تعرف لماذا تختار جوجل لغة دارت؛ لذا فلنتعمق في الشرح.

تعلُّم لغة دارت

اطلع على المستندات الرسمية للغة دارت، ومقاطع الفيديو التعليمية، وعينات من البرامج.

واظب على التدريب

قم بتعديل أكوادك البرمجية على منصة دارت باد “DartPad” للمبتدئين، واحصل على خبرة أفضل بالعمل عليها.

4. أساسيات فلاتر Flatter

الآن وبعد أن أصبحت على دراية بلغة دارت، يكون قد حان وقت الانتقال إلى معرفة أساسيات العمل على فلاتر Flatter.

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

الآن وبعد أن قمت بتنصيب فلاتر Flatter، توجد خطوة أخرى في هذا الدليل التعليمي لتعلم فلاتر Flatter، وهي القيام بما يقوم به جميع المطورين: استخدم التعليمات البرمجية التي يستخدمها الآخرون. ما نقصده هو تنصيب ملف الحزمة: “Pubspec”، المكتوب بلغة “YAML”.

5. الويدجيت (الواجهات الرسومية)

تذكر؛ في فلاتر Flatter، كل شيء عبارة عن واجهة رسومية. الواجهات الرسومية تأتي بهيئتين: عديمة الحالة “Stateless” والتي تحتوي على حالة “Stateful”.

الودجيت عديمة الحالة هي تلك التي لا تتغير حالتها؛ مثل زر أو صورة. كما يوحي اسمها، فإنَّها لا تغير حالتها عند تنفيذ إجراء على الشاشة.

عندما تحتاج الواجهات الرسومية إلى الاحتفاظ ببعض الحالات مثل الصفحة الحالية في مستعرض الصفحات، أو علامة التبويب التي تم تحديدها في شريط التنقل السفلي؛ فإنَّ الواجهات الرسومية التي تتضمن حالة ستكون الخيار الصحيح الذي يجب استخدامه.

بدلاً من طريقة إنشاء واجهة رسومية “Widget build method”، فإنَّ الواجهة الرسومية ذات الحالة لديها طريقة بناء تسمى صراحة “setState”.

6. تخطيط الصفحات في فلاتر Flatter

كما ذكرنا سابقاً في هذا المقال، فإنَّ كل شيء عبارة عن واجهة رسومية في فلاتر Flatter؛ بما في ذلك نماذج تخطيط الصفحات. الواجهات الرسومية مثل الصفوف والأعمدة والشبكة هي أدوات تخطيط – لا نراها على الشاشة – تساعد بقية الواجهات الرسومية المرئية على الترتيب والتقييد والمحاذاة.

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

إذا كان تطبيقك يتبع إرشادات الماتيريال ديزاين، فإنَّ فلاتر Flatter يحتوي على الكثير منها بشكل افتراضي. يوفر فلاتر Flatter العديد من الأدوات التي تدعم الماتيريال ديزاين. وهي تتضمن أدوات مثل “MaterialApp” و”AppBar” و”Skaffold”، وغيرها.

يحتوي فلاتر Flatter على حزمة مكونات كوبرتينو “Cupertino” التي تتمحور حول الآي أو إس، وتغطي أدوات مثل “CupertinoApp” و”CupertinoNavigationBar”، وغيرها.

7. الواجهات الرسومية التفاعلية “Interactive Widgets”

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

ولتحقيق ذلك، يحتوي فلاتر Flatter على عدد من الواجهات الرسومية ذات الحالة، مثل “Checkbox” و”Radio” و”Slider” و”InkWell” و”Form” و”TextField”، وغيرها. هذه الواجهات الرسومية قادرة بما يكفي على الحفاظ على حالتها.

8. دليل فلاتر Flatter

حان الوقت الآن لتعلم فلاتر Flatter لإنشاء تطبيقات حقيقية؛ ونعني تلك التطبيقات التي تحتوي على العديد من الشاشات والصور، وغيرها.

إذاً لنبدأ.

  •  النماذج

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

  •  الإيماءات

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

  •  الصور

لجعل التطبيقات جميلة وجذابة، نستخدم الصور. يوفر فلاتر Flatter أداة للصور لعرضها في تطبيق فلاتر Flatter من مصادر مختلفة.

  1. عرض الصور من الشبكة.
  2. عرض الصور مع حيز مخصص ورسوم متحركة متلاشية.
  3. في بعض الأحيان يكون من المفيد تحميل الصورة من الشبكة وتخزينها مؤقتاً في التخزين الداخلي لكي تكون متاحة بسرعة في المرة القادمة.

9. عرض بيانات أكثر باستخدام القوائم

لاستيعاب المزيد من البيانات، نستخدم القوائم “List” لإظهارها. يمكن أن تكون القوائم أفقية أو خطية. يحتوي فلاتر Flatter على أداتي جريد فيو “GridView” وليست فيو “ListView”؛ وهذه أداتان أساسيتان مختلفتان في طريق الاستخدام:

  1. إنشاء قوائم شبكية.
  2. إنشاء قوائم أفقية.
  3. يمكن أن تحتوي القوائم على عناصر تختلف في أنماطها.
  4. شريط التطبيقات العائم وشريط التمرير باستخدام أداة سيلفر ليست “SliverList”.
  5. في بعض الأحيان تحتوي القوائم على عناصر أكثر بما يتناسب مع طريقة عرض الشاشة. في مثل هذه الحالات، لا يكون من المنطقي بناء جميع العناصر في وقت واحد. يحتوي فلاتر Flatter على أداة “ListView.Builder” الذي يستخدم نهج خاصاً لإنشاء عناصر القوائم بكفاءة.

التنقل بين المسارات
التنقل بين المسارات

10. التنقل بين الشاشات (والتي تعرف باسم المسارات)

تحتوي معظم التطبيقات على شاشات متعددة تعرض البيانات بطريقة منظمة بصورة جيدة. في فلاتر Flatter، يمكن إجراء العمليات ذات الصلة بالتنقل ضمن التطبيقات باستخدام “Navigator”.

  1. التنقل إلى شاشة جديدة والعودة منها.
  2. تمرير البيانات إلى شاشات جديدة واسترجاع النتائج.

قد نحتاج إلى النظر في الأسئلة التالية:

  • كم مساراً لدينا؟
  • كيف نبدأ كل مسار؟
  • ما هي البيانات المطلوبة لكل مسار؟
  1. لإدارة كل هذا بكفاءة، يقوم فلاتر Flatter بتسمية المسارات.
  2. تمرير الدالات “Arguments” في المسارات المسماة.

وماذا عن الرسوم المتحركة في أثناء التنقل إلى شاشة جديدة؟

11. الربط مع الشبكات

ترتبط معظم التطبيقات التي نراها في الوقت الحاضر بخادم خارجي، وتتصل به لجلب البيانات أو نشرها. في فلاتر Flatter، يمكننا استخدام تقنية نقل النص الفائق “HTTP” كطرف ثالث للقيام بمثل هذه الأمور.

  1. جلب البيانات من الشبكة.
  2. تقديم طلبات موثقة.
  3. العمل مع مقابس الويب “Web sockets”.

لدى فلاتر Flatter عدد قليل من البوابات المتاحة، والتي تقوم بمثل هذه الأمور بشكل أكثر كفاءة.

12. جسون “JSON” – ترميز الكائنات باستعمال جافا سكريبت – وحفظ حالة الكائن الحالية بداخل ملف “Serialization”

في فلاتر Flatter، يوجد بشكل عام استراتيجيتان لترميز الكائنات وحفظ حالة الكائن الحالية بداخل ملف. التفسير اليدوي وحفظ الحالة الآلي باستخدام توليد الرموز.

يتم تعطيل انعكاس وقت التشغيل “Runtime reflection” في فلاتر Flatter، مما يؤدي إلى عدم وجود مكتبات مثل “GSON” أو “Jackson” أو “Moshi”.

تسلسل البيانات

في بعض الأحيان، نحتاج إلى حفظ البيانات في الذاكرة الداخلية لكي تكون متاحة بسرعة كلما احتجنا إليها.

  1. إذا كان لديك كمية صغيرة نسبياً من البيانات ليتم تخزينها في زوج المفتاح والقيمة “Key-value pair”. ضع في اعتبارك استخدام تفضيلات مشتركة.
  2. يمكنك أيضاً قراءة الملفات وحفظها على قرص تخزين.
  3. إذا كان التطبيق يحتاج إلى الاستمرار باستخدام كمية كبيرة من البيانات ويتطلب أيضاً الاستعلام عنها، يُنصح باستخدام قاعدة بيانات إس كيو لايت “SQLite”.

13. إدارة التبعية “Dependency Management”

في فلاتر Flatter، يتم استخدام أدوات إدارة الحزم “Pub” بكثرة. تلك طريقة رائعة للعمل بشكل جماعي ولمشاركة التعليمات البرمجية عبر التطبيقات دون الحاجة إلى تطوير كل شيء من الصفر.

مع وجود العديد من أدوات إدارة الحزم، قد تواجه مشكلات مثل التعارضات في تحليل الإصدارات.

14. إدارة الحالة “State Management”

مقدمة

في أي تطبيق نموذجي، من الحالات الشائعة الاستخدام أنَّ التغيير الذي تم إجراؤه في النقطة “أ”، يعكس بعض التغييرات في النقطة “ب”؛ وهذا ما يسمى إدارة الحالة.

لدى فلاتر Flatter منهجيات متعددة يمكنها إدارة حالة التطبيق بكفاءة. استناداً إلى حجم المشروع، يمكن تحديد التقنيات المناسبة. وسنناقش هنا بعض التقنيات الممكنة لإدارة الحالة.

  1. طريقة “setState”.
  2. إنهيريتد ويدجيت “Inherited Widget”.
  3. حزمة مزود الخدمة “The Provider Package”.

المزود هو مزيج من حقن التبعية “Dependency injection” وإدارة الحالة المبنية مع الواجهات الرسومية.

  1. نمط “BLoC”.

إنَّ “BLoC” عبارة عن مكتبة بسيطة وقليلة الحجم وقابلة للاختبار بدرجة عالية لإدارة الحالة التي يمكن التنبؤ بها في لغة دارت.

15. الاختبار

عندما ينمو التطبيق، يصعب اختبار كل ميزة على حدة، ثم يأتي الانحدار “Regression” أيضاً. في مثل هذه الحالات، فإنَّ اختبار الأتمتة “Automation testing” هو الطريق الذي يجب المضي فيه؛ إذ يساعد على ضمان ثبات أداء التطبيق كما يتوقع منه قبل إصداره؛ وبذلك نتجنَّب الوقوع في مثل هذه المواقف.

ينقسم اختبار الأتمتة إلى ثلاث فئات:

  1. اختبار الوحدة الذي يختبر وظيفة واحدة أو طريقة أو تصنيفاً.
  2. اختبار الواجهة الرسومية الذي يختبر عنصراً واحداً في واجهة المستخدم.
  3. اختبار التكامل “Integration test” الذي يختبر تطبيقاً كاملاً أو جزءاً كبيراً من التطبيق.
  • اختبار الوحدة

الهدف من اختبار الوحدة هو اختبار وحدة معينة من التعليمات البرمجية، والذي يتحقق من أنَّ الكود البرمجي يعمل كما هو متوقع في سيناريوهات مختلفة. اختبار الوحدة سريع جداً ولا يتطلب جهازاً فعلياً لتنفيذه.

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

  • اختبار الواجهة الرسومية

اختبار الواجهات الرسومية في فلاتر Flatter عبارة عن تقنية لاختبار واجهة المستخدم.

الهدف من هذا الاختبار هو اختبار ما إذا كانت الواجهات الرسومية الخاصة بواجهة المستخدم تبدو كما هو متوقع، وتكون تفاعلية. اختبار الواجهات الرسومية لا يتطلب جهازاً مادياً.

  • اختبار التكامل

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

  • التطوير الموجه بالسلوك “Behavior-driven development”

يساعد التطوير المقاد بالاختبار “TDD” أو اختبارات الوحدة عندما يكون لدى صاحب المصلحة مهارات تقنية قوية. أما التطوير الموجه بالسلوك يتعلق بكتابة حالة اختبار من وجهة نظر المستخدم النهائي؛ والذي يكون مكتوباً بلغة إنجليزية بسيطة.

يمكن كتابة حالة الاختبار بالتنسيق التالي:

  • المعطى: السياق الأولي في بداية السيناريو، في بند واحد أو أكثر؛
  • الزمن: الحدث الذي أطلق السيناريو؛
  • ثم: النتيجة المتوقعة، في بند واحد أو أكثر.

يساعد التطوير الموجه بالسلوك على فهم وظائف البرامج من منظور المستخدم النهائي، ويصبح نوعاً من الوثائق الوظيفية.

المصدر

Shares

مسارات مهنية ذات صلة

المسارات الوظيفية لإنتاج الفيديوهات

كيف تصنع لنفسك مساراً مهنياً في مجال اختبار البرمجيات؟

10 نصائح قد تُساعدك في تحديد المسار المهني

error: Content is protected !!
We use cookies to improve your experience on our website. By browsing this website, you agree to our use of cookies.

تسجيل الدخول

إنشاء حساب

كلمة سر منسية