مجموعة أفكار مشاريع Flutter لاحتراف التطوير بها

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

احتراف البرمجة يأتي بصناعة المشاريع، لا مشاهدة الفيديوهات على اليوتيوب  

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

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

 كل ما تحتاج معرفته حول Flutter و Dart 

فلاتر او Flutter ليست بلغة برمجة، هو عبارة عن SDK او Software Development Kit، أي عدة متكاملة. من خلالها يمكنك تطوير عناصر الواجهة (UI) لمشروع برمجي. بعبارة أخرى، لا يمكنك التطوير باستخدام Flutter وحده لأنه عدة متخصصة في تصميم الواجهات فقط، يلزمه دائما تقنية برمجية أخرى، والتي في معظم الأحيان هي Dart. ولغة Dart هي لغة برمجة من تطوير شركة Google تهدف إلى صناعة برمجيات قابلة للإشتغال في منصات متعددة (Multi Platform). 

 تعريف Flutter 

أثناء تهيئة Flutter، ستلاحظ في الأساس أنك تقوم بتحميل الـ SDK وتنصيبه فقط، أي لا تقوم بتحميل IDE يقوم بقراءة Flutter وترجمة الكود الخاص بها. تسمح لك حزمة Flutter من بناء واجهات احترافية مبنية على التقنيات الحديثة في عالم الـ UI/UX لمختلف البرمجيات بغض النظر عن المنصة. أي، يمكن استخدام Flutter في تكوين واجهات مواقع الويب، تطبيقات الموبايل، برمجيات سطح المكتب. وعلى أنظمة وبيئات تشغيل مختلفة مثل Windows, Mac, Linux وحتى Google Fuchsia. بعبارة أبسط، يمكن اعتبار Flutter كحزمة لبناء الـ Front End الخاص بمختلف أنواع البرمجيات.

 تعريف Dart 

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

لكون Flutter و Dart معا من تطوير شركة Google، وبينهما تناغم وتناسق في بنية التشكيل والتطوير، فيمكن الاعتماد عليهما سويا في بناء برمجية متكاملة من كل الجهات والأطراف. 

أهم إيجابيات Flutter و Dart 

يجلب الدمج بين تقنية Flutter و Dart مجموعة من الإيجابيات والمميزات التي ستكون السبب الأساسي وراء استخدام Flutter و Dart، أهمها: 

• تقنية واحدة لبيئة عمل متعددة: لا تحتاج لتعلم 10 تقنيات أو أكثر لصناعة موقع ويب، تطبيق موبايل، برمجية سطح المكتب ...إلخ. تعلمك لـFlutter و Dart يضمن لك تطوير برمجيات لشتى بيئات العمل والمنصات، وهذه أهم ميزة في تقنية Dart و Flutter. 
• يعتمد على الـ Widgets في تكوين عناصر المشروع: تقسيم البرمجية على شكل Widgets ( عناصر ان صح التعبير ) يسهل عملية تطويرها، وتشكل الستايل والديزاين الخاص بها على شكل Flutter ويفصلها عن باقي المحتوى الآخر، وفيكون تعديلها وتطويرها أسهل وأفضل. 
• استخدام مكتبات وعناصر تصميم واجهة كثيرة: بالرغم من اعتماد Flutter على تقنية الـ Material Design في اكتساب التصميم، لكن يمكن تغييرها والاعتماد على مكتبات وعناصر تصميم واجهة كثيرة ومختلفة. ولست ملزما بالإنصياع للخصائص الـ Default التي تجلبها Flutter. 
• مفتوح المصدر ويتم تحديثه باستمرار: إن كل من Flutter و Dart في يتقدمان بشكل كبير، وتقوم جوجل بتعبئتهما بالتحديثات اللازمة لتصحيح أي أخطاء، وجلب خصائص جديدة مع كل تحديث.

 أبرز سلبيات Flutter

ليس كل ما يلمع ذهبًا، فتقنيتي Flutter و Dart لا يبلغان حد المثالية، بل يشوبهما بعض العيوب والسلبيات التي بسببها قد تتخلى عن فكرة تعلم فلاتر او استخدامها بشكل عام، أهمها: 

• مشاكل الآداء لازالت موجودة: إن قمت بمقارنة تطبيق تم تطويره باستخدام Android Java و نفسه باستخدام Dart & Flutter، ستجد أن آدائه بالـ Java أفضل، وأكثر توافقا وأسهل. وهو عيب يلاحق في الحقيقة كل تقنيات الـ Hybrid. ولهذا لازال الكثيرون يعتمدون على الـ Native في تطوير البرمجيات. ربما التقنية الوحيدة التي استطاعت ان تكافئ آداء برمجيات الـ Native حتى الآن هي الـ React Native. 
• يتم إصدار برمجيات بحجم أكبر من المتوقع: ماذا لو كانت برمجية Hello World لتطبيق الموبايل حجمها 100mb؟ بالطبع هذه مبالغة، لكن Flutter & Dart تصدر البرمجيات بأحجام أكثر من المتوقع، وذلك نظرا لأنه يجب عليها ان تستخدم ملفات أكثر من أجل ضمان تشغيل التطبيق. 
• لغة Dart لازالت بحاجة للكثير من التحديثات: لغة البرمجة Dart لازالت نوعا ما محدودة، لا يمكنها أن تحقق لك كل الأهداف التي تريد تحقيقها في تطبيق الموبايل. تقول جوجل أنها ستقوم بإرسال تحديثات دورية لتجعلها مثالية قريبا، ونتمنى ذلك. 

ما الذي تحتاجه من معارف قبلية للبدء في التطوير بـ Flutter 

قبل البدء في التطوير باستخدام Dart و Flutter، ما التقنيات التي يجب أن تكتسبها قبل كل شيئ؟ 

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

ثانيا، تعتمد Dart على كود أشبه بالـ C لذلك يفضل أن تكون لديك تجربة سابقة في لغات مثل C او C++ وتعرف كيف تكتب أسطرا برمجية بها.

 تعتمد Dart على لغة البرمجة كائنية التوجه OOP، ويستحسن أن تكون قد برمجت مسبقا بلغة برمجية تعتمد على هذا الأساس، مثل Java او C++ نفسها. 

ثم أخيرًا، تقنيات تطوير الويب، مثل الـ HTML, CSS و أيضا الـ Javascript. إذ ستتعامل معها أيضا، خصوصا أثناء استخدام Flutter. 

 مجموعة أفكار لمشاريع يمكن بنائها باستخدام Flutter 

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

تطبيق شبيه بمنصة انستقرام Instagram - مستوى متوسط 

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

تطبيق تعقب أسعار العملات المشفرة والرقمية - مستوى متوسط 

يمكننا تصنيفه أيضا ضمن تصنيف المستوى المبتدئ، لكنه يتحول للمستوى المتوسط بإدراج تقنيات الـ Real Time وإمكانية الإطلاع على تاريخ العملة عبر Graph او مخطط. أما إن كان فقط عبارة عن استعراض للعملات المشفرة ومعلومات حولها، فيمكن تصنيفه في مستوى المبتدئ. عموما، بناء تطبيق يمكنك من خلاله جلب أشهر العملات المشفرة، ثم ترتيبها حسب قيمتها السوقية، وذكر أسعارها. أثناء النقر على احدى العملات يأخذك إلى صفحة مخصصة تستعرض كل المعلومات حول العملة المشفرة. يساعدك هذا المشروع على تعلم تصميم واجهات تطبيقات احترافية، وكذا التعامل مع الـ API's الخارجية. هذا رابط مشروع على جيتهاب قام بمحاكاة نفس الفكرة .

تطبيق استقبال طلبات الطعام - مستوى متقدم 

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

تطبيق تسجيل الملاحظات والمهام (ToDoList) - مستوى مبتدئ 

المشروع الذي قمت بتطويره بمختلف اللغات البرمجية، وجاء الدور على Fluter كذلك. يمكن اعتباره مشروع للمبتدئين، مشروع يجب أن تقوم بصناعته فور انتهائك من مشاهدة الدورة التي تتابعها لتعلم Flutter و Dart. المشروع بسيط للغاية، صفحة واحدة يمكن للمستخدم من خلالها إضافة نشاطات عليه أن يقوم بها، يمكن إضافتها على شكل Checklist. ثم فور الإنتهاء منها يتم إضافته إلى خانة " الأعمال المنتهية ". يمكنك تطويرها أكثر عبر إضافة مؤقت مثلا لجعلها خدمة تقوم بتذكيره بموعد العمل على المهمة أيضا. يوجد الكثير من المشاريع المشابهة، هذا مشروع على جيتهاب لتقنية ToDoList .

تطبيقات التوجيه (Guide) - مستوى مبتدئ 

تطبيقات التوجيه او الـ Guides هي عبارة عن تطبيق تشرح لك خدمة معينة او تطبيق آخر معين. مثلا، تطبيق Guide يشرح لك طريقة لعب لعبة Among US. لا يضم التطبيق الكثير من الأشياء، فقط عبارة عن مجموعة من الصفحات (Activities) التي يمكن الإنتقال لها عبر زرين Next , Previous تشرح لك في كل صفحة أساسيات عن طريقة اللعبة وطريقة تنصيب اللعبة. بالرغم من أن الهدف بسيط، لكن ستتدرب على تقنيات الـ UI من خالها، وإدماج الصور والأزرار والتعامل معها. 

تطبيق مراسلة مثل واتسآب - مستوى متوسط 

يمكنك صناعة تطبيق مراسلة بشكل حي (Real Time) شبيه بتطبيق Whatsapp بشكل كبير عبر تقنيتي Dart و Flutter. في الحقيقة، واحدة من المشاريع الأكثر انتشارا في شروحات اليوتيوب وجيتهاب حول Flutter هو طريقة صناعة تطبيق مراسلة. من خلال Flutter سيمكنك تهيئة الواجهات باحترافية كبيرة نفسها المستخدمة في أشهر تطبيقات المراسلة مثل واتسآب وتيليجرام. ومن خلال Dart سيمكنك إدارة الـ Back End الخاص بالمشروع من إدارة الرسائل واتصال بقواعد البيانات. خصوصا باستخدام تقنية Firebase. هذا مشروع كامل على جيتهاب عن طريقة صناعة تطبيق مراسلة باستخدام Flutter. 

تطبيق توصيات أفلام ومسلسلات - مستوى مبتدئ إلى متوسط 

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

صناعة تطبيق تبضع منتجات عبر الإنترنت - مستوى متقدم 

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

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

واجهة تسجيل دخول / صناعة حساب - مستوى مبتدئ 

أثناء استخدام Flutter عليك أن تعتاد على صناعة الواجهات أكثر من أي شيئ آخر، فهذا هو الهدف من Flutter في كل الأحوال. لذلك نقترح عليك من أجل التمرن أكثر على صناعة الواجهات، ان تقوم بصناعة صفحة تسجيل الدخول وصناعة الحساب (Login / Register) بستايلات مختلفة. فهي سهلة من حيث الصناعة والتطوير ولا تحتاج للكثير من الأقسام ولا العناصر في الصفحة. لذلك ستشعر بالأريحة في التلاعب بالأشكال والألوان الخاصة بها. فقط من أجل التدرب بالطبع. 

تطبيق متابعة حدث معين ( مثال SpaceX Go ) - مستوى متوسط 

تطبيق SpaceX Go، هو تطبيق مفتوح المصدر قد تم تطويره باستخدام Flutter. وفي حالة لم تكن تعرف ماهية التطبيق، فهو تطبيق لتعقب الصواريخ التي تُطلقها شركة SpaceX. يضم التطبيق توقيتا زمنيا لتاريخ إطلاق صاروخ SpaceX القادم ومعلومات كاملة الصواريخ السابقة، الشركة بنفسها، مقالات مقتبسة منها والمزيد. 

يمكنك فعل المثل، اختر حدث معين أو شركة معينة، مثلا Nasa او شركة Samsung مثلا ( حدث إطلاق هاتف Samsung Galaxy S22 مثلا ). ثم قم بصناعة مؤقت لموعد الإطلاق، معلومات عن الجهاز والشركة، تغريدات مقتبسة منها، والمزيد. المشروع يستطيع أن يضم كتلة عناصر مختلفة مما قد يجعله في المستوى المتوسط. رابط مشروع SpaceX Go على جيتهاب. 

تطبيق البحث عن كتب - مستوى مبتدئ حتى متقدم 

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

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

تطبيق Feed للمواقع والمدونات - مستوى مبتدئ حتى متوسط 

يدمج هذا المشروع بين كل من تحسين تصميم الواجهات، إلى التعامل مع الـ API's وبعض خصائص الـ Back End معا. يمكنك من خلال هذا المشروع صناعة تطبيق يقوم بجلب المحتوى بشكل مختزل من منصات او مدونات مختلفة. على سبيل المثال، بافتراض أن تطبيقك يتخصص في مجال السينما والأفلام، يمكنك استخراج التغريدات من تويتر الخاصة بشركات أفلام ( Marvel, DC, Paramount, Netflix ...) كما يمكن جلب الـ Feed او المحتوى التابع لمواقع ومدونات في صنف الأفلام. ثم عرضها كلها في تطبيقك الخاص. هذا رابط مشروع مفتوح المصدر باستخدام فلاتر يقوم بجلب المحتوى من منصة Medium، رابط المشروع .

 كيف تبدأ في التطوير باستخدام Flutter و Dart؟ 

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

• أولا، عليك تنصيب البرمجيات الأساسية للتطوير بـ Dart و Flutter. أهمها Git من أجل تحميل Flutter SDK، ثم برمجية Android Studio ( إن كنت تريد استخدام فلاتر لتطوير تطبيقات الموبايل )، او برمجية VS Code لتطوير برمجيات الويب بفلاتر. 
• توجه إلى الرابط التالي لتحميل Flutter SDK. قم  باختيار نظام التشغيل الذي تعتمده، وتلقائيا ستشرح لك المنصة كل الخطوات التي يجب عليك فعلها لتنصيب فلاتر، من تحميله أولا، ثم تشغيل سطر الأوامر، وتنصيب Flutter داخل جهازك. يُفضل تنصيب Flutter دائما في المسار الرئيسي C:/ في حاسوبك. 
• قد يطلب منك بعدا إدراج Flutter Variable في النظام، وذلك من أجل تشغيل Flutter من أي برنامج ومن أي جهاز. 
• بعدها سيمكنك فتح CMD وتنفيذ أي أمر في Flutter من أجل معرفة إن تم تنصيبه. وبالطريقة التالية، تكون قد نصبت Flutter وجاهز للبدء في التطوير باستخدامها. 

مصادر إضافية لاحتراف Flutter 

يوجد الكثير من المصادر في الإنترنت التي تضمن لك تعلم Flutter و Dart من البداية، هذه مجموعة من أفضل الكورسات التي صادفناها وننصحك باتباعها: 

• كورس بالعربية على اليوتيوب من 100 فيديو يشرح لك كل شيئ عن فلاتر وإنشاء مشروع في النهاية ( الرابط ) 
• كورس لتعلم Flutter من خلال فيديو واحد مدته 4 ساعات من FreeCodeCamp ( الرابط  ) 
• كورس الدليل الكامل لـ Flutter و Dart لسنة 2022 مقدم من منصة Udemy ( الرابط )
• كورس دليل المطورين الكامل لتقنيتي Dart و Flutter مقدم من منصة Udemy ( الرابط )

 وفي الختام 

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