What is flutter framework? ماهو إطار البرمجة فلاطر "الرفرفة " ؟

 What is flutter framework? ماهو إطار البرمجة فلاطر "الرفرفة " ؟

ملاحظة سنستخدم في دروسنا كلمة الرفرفة وهي الترجمة الحرفية لكلمة flutter بدلا من كتابتها فلاطر 

ما هو تطوير المحمول؟ what is mobile development 

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

بينما تحتاج التطبيقات المستندة إلى الويب للتشغيل على مستعرض ويب ، تعتمد تطبيقات الهاتف المحمول على الجهاز نفسه. فيما يتعلق بأجهزة iOS ، يحتاج المطورون في المقام الأول إلى دعم iPhone و iPad. ومع ذلك ، بالنسبة لنظام Android ، هناك العديد من أنواع الأجهزة وأنظمة التشغيل للهواتف الذكية والأجهزة اللوحية ، مما يجعل تطوير تطبيقات الأجهزة المحمولة أكثر صعوبة.

أنواع تطبيقات الجوال types of mobile applications 

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

التطبيق الأصلي: تم تطوير هذه الأنواع من التطبيقات لدعم نظام أساسي معين مثل Android أو iOS. عند تطوير تطبيق iOS ، من المرجح أن تستخدم Swift ، وهي لغة جديدة نسبيًا أنشأتها Apple. من قبل ، كان المطورون يستخدمون XCode و Objective-C. أثناء استخدام تطبيقات Android ، ستستخدم Java. غالبًا ما يفضل المطورون التطبيقات الأصلية نظرًا لقدرتهم على الاستفادة الكاملة من وظائف الجهاز المحمول. يمكن أن يكون تطوير التطبيقات الأصلية مهمة صعبة عندما تريد دعم مستخدمي Android و iOS ، حيث يختلف الرمز لكل نظام أساسي.

التطبيق المختلط: يجمع التطبيق المختلط بين عناصر من كل من التطبيقات الأصلية وتطبيقات الويب. التطبيقات الهجينة مثل تطبيقات الويب ؛ تمت كتابة جزء كبير من التطبيق باستخدام تقنيات مثل HTML و CSS و JavaScript ، والتي يتم تغليفها بعد ذلك في تطبيق أصلي. على عكس تطبيق الويب النموذجي ، يحتوي التطبيق المختلط على متصفح مضمن خاص به وتطبيق shell الأصلي الخاص به. التطبيقات المختلطة هي نوع شائع من تطبيقات الأجهزة المحمولة لأنها لا تزال تسمح للمطورين باستخدام تقنيات الويب.

|

الصفحة الرئيسية للمدونة

دروس Flutter: دليل المبتدئين للتطبيقات عبر الأنظمة الأساسية

آرون زي

26 مايو 2020

محرر غلاف الصفحة

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

بعد قراءة اليوم ، ستحصل على نظرة عامة جيدة على Flutter وستنشئ تطبيق Flutter أساسيًا.

سوف نغطي ما يلي:

ما هو تطوير المحمول؟

ما هو Flutter؟

مزايا وقيود الرفرفة

المبادئ الأساسية في Flutter

إنشاء أول تطبيق Flutter

اختتام والموارد

ما هو تطوير المحمول؟

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

بينما تحتاج التطبيقات المستندة إلى الويب للتشغيل على مستعرض ويب ، تعتمد تطبيقات الهاتف المحمول على الجهاز نفسه. فيما يتعلق بأجهزة iOS ، يحتاج المطورون في المقام الأول إلى دعم iPhone و iPad. ومع ذلك ، بالنسبة لنظام Android ، هناك العديد من أنواع الأجهزة وأنظمة التشغيل للهواتف الذكية والأجهزة اللوحية ، مما يجعل تطوير تطبيقات الأجهزة المحمولة أكثر صعوبة.

أنواع تطبيقات الجوال

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

التطبيق الأصلي: تم تطوير هذه الأنواع من التطبيقات لدعم نظام أساسي معين مثل Android أو iOS. عند تطوير تطبيق iOS ، من المرجح أن تستخدم Swift ، وهي لغة جديدة نسبيًا أنشأتها Apple. من قبل ، كان المطورون يستخدمون XCode و Objective-C. أثناء استخدام تطبيقات Android ، ستستخدم Java. غالبًا ما يفضل المطورون التطبيقات الأصلية نظرًا لقدرتهم على الاستفادة الكاملة من وظائف الجهاز المحمول. يمكن أن يكون تطوير التطبيقات الأصلية مهمة صعبة عندما تريد دعم مستخدمي Android و iOS ، حيث يختلف الرمز لكل نظام أساسي.

التطبيق المختلط: يجمع التطبيق المختلط بين عناصر من كل من التطبيقات الأصلية وتطبيقات الويب. التطبيقات الهجينة مثل تطبيقات الويب ؛ تمت كتابة جزء كبير من التطبيق باستخدام تقنيات مثل HTML و CSS و JavaScript ، والتي يتم تغليفها بعد ذلك في تطبيق أصلي. على عكس تطبيق الويب النموذجي ، يحتوي التطبيق المختلط على متصفح مضمن خاص به وتطبيق shell الأصلي الخاص به. التطبيقات المختلطة هي نوع شائع من تطبيقات الأجهزة المحمولة لأنها لا تزال تسمح للمطورين باستخدام تقنيات الويب.

هل تبحث عن قراءة المزيد عن تطوير Android؟ تتعمق مقالتنا حول كيفية تطوير تطبيق Android في إنشاء تطبيقات Android أصلية.

ما هو Flutter؟

Flutter عبارة عن مجموعة تطوير برامج مفتوحة المصدر (SDK) "لبناء تطبيقات جميلة ومجمعة محليًا للجوال والويب وسطح المكتب من قاعدة شفرة واحدة".

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

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

يأتي Flutter مع مجموعة كبيرة من الأدوات المصممة مسبقًا (الصفوف ، والأعمدة ، والمداخن ، والحشو ، والوسط ، وما إلى ذلك) ، مما يسهل كثيرًا تصميم وتخطيط تطبيق الهاتف المحمول الخاص بك. هذا يعني أنه بدلاً من الاضطرار إلى وجود قواعد برمجية منفصلة لتطبيق iOS وتطبيق Android ، يمكنك استخدام Flutter والحصول على قاعدة بيانات واحدة لجميع الأنظمة الأساسية المختلفة التي تريد أن يدعمها تطبيقك. بعض الشركات التي تستخدم Flutter هي Google و Groupon و Alibaba و Square و eBay والمزيد.

كن مطور Flutter.

تتيح دورة Beginning Flutter من Educative للمبتدئين تعلم المفاهيم الأساسية ليصبحوا مطور Flutter متكامل

بداية Flutter: تطوير تطبيقات الجوال

تتكون الرفرفة Flutter أساسًا من جزأين:

مجموعة أدوات تطوير البرامج (SDK): مجموعة من الأدوات التي تساعدك في تطوير تطبيقك. على سبيل المثال ، سيكون لديك أدوات تقوم بترجمة التعليمات البرمجية الخاصة بك إلى كود أصلي لدعم iOS و Android.

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

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

مزايا و عيوب الرفرفة Flutter

مزايا Flutter

تطوير أسرع: يوفر Flutter تجميعًا سريعًا ، مما يسمح لك بمشاهدة نتائج تغييرات التعليمات البرمجية في الوقت الفعلي. هذه ميزة تسمى Hot-Reload ، والتي لا تستغرق سوى بضعة أجزاء من الثانية. يحب المطورون هذه الميزة لاستخدام Flutter لأنها تتيح لك إجراء تغييرات سريعة في واجهة المستخدم ، مما يعني تطوير تطبيقات جوال أكثر إنتاجية وديناميكية.

تعدد المنصات: من أبرز مزايا استخدام Flutter هي وظائفها عبر الأنظمة الأساسية. يحتاج المطورون فقط إلى كتابة قاعدة بيانات واحدة لتطبيقات متعددة (Android و iOS والويب). بالنسبة للجزء الأكبر ، يعتمد Flutter على عناصر واجهة المستخدم وتصميمات واجهة المستخدم ويحتاج ببساطة إلى التجميع والتحويل إلى رمز يدعم النظام الأساسي. هذا مفيد لأنه يسمح للمطورين بتخفيض وقت التطوير على نطاق واسع.

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

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

محددات Flutter العيوب

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

عمليات التكامل: بالنسبة لتطبيقات Android و iOS الأصلية ، هناك حلول مُعدة مسبقًا تتيح لها التكامل مع منصات CI مثل Travis أو Jenkins. في حين أن هناك بعض حلول Flutter الجاهزة لمنصات CI ، فأنت بحاجة إلى استخدام البرامج النصية المخصصة وصيانتها للبناء الآلي والاختبار والنشر.

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

المبادئ الأساسية في Flutter

فهم الحاجيات

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

مثل المكونات في React ، تشكل عناصر واجهة المستخدم تسلسلاً هرميًا ويمكن أن تتداخل مع بعضها البعض. علاوة على ذلك ، ترث عناصر واجهة المستخدم خصائص من آبائهم.

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

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

عارض svg Flutter

إطار العمل Flutter

تم تنظيم إطار عمل Flutter في طبقات ، مع بناء كل طبقة على نفسها.

عارض svg Flutter

كما يتضح من الرسم البياني أعلاه ، فإن الطبقة منخفضة المستوى من Flutter هي محركها ، والذي تم إنشاؤه باستخدام C ++. يوفر المحرك عرضًا منخفض المستوى باستخدام Skia ، مكتبة رسومات Google.

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

إنشاء أول تطبيق Flutter

الآن بعد أن أصبح لديك نظرة عامة عالية المستوى على Flutter ، ستقوم بإنشاء أول تطبيق Flutter. ستتعلم كيفية إنشاء تطبيق أساسي وعملي hello world.

تركيب Flutter

هناك عدة طرق لتثبيت Flutter على جهازك ، ولكن أسهل طريقة هي تنزيل برنامج التثبيت من موقع Flutter على الويب أو عبر Github:

فيما يلي إرشادات الإعداد لأنظمة التشغيل المختلفة:

macOS

ويندوز

لينكس

بالنسبة إلى IDE ، سنستخدم رمز VS ، وهو خفيف الوزن ويوفر دعمًا وظيفيًا. عند استخدام VS Code ، تأكد من تثبيت المكون الإضافي Flutter ، والذي سيقوم بتثبيت Dart معه. يمكنك أيضًا استخدام Android Studio أو IntelliJ ، وهما خياران رائعان.

إنشاء مشروع Flutter

بمجرد تثبيت Flutter وإعداد التبعيات المطلوبة بناءً على IDE الخاص بك ، فقد حان الوقت لبدء مشروع Flutter الخاص بك!

لإنشاء مشروع Flutter في VS Code:

انقر فوق عرض> لوحة الأوامر .

اكتب "flutter" وحدد Flutter: New Project .

أدخل اسم المشروع وانقر فوق إدخال .

حدد أو أنشئ الدليل الأصلي الخاص بك.

انتظر حتى يتم إنشاء المشروع ، وسترى main.dartالملف.

تنفيذ المشروع Flutter

ابحث عن شريط حالة رمز VS الخاص بك في أسفل النافذة.

حدد جهازًا من محدد الجهاز .

انقر فوق أيقونات الإعدادات واختر رفرفة. ثم اختر تكوين التصحيح الخاص بك.

الآن انقر فوق Debug> Start Debugging .

سيتم تشغيل التطبيق ، وستتمكن من رؤية تطبيق المبتدئين.

الكود

انتقل إلى main.dart واستبدل الكود الحالي بما

1

import 'package:flutter/material.dart';

2

​

3

void main() => runApp(MyApp());

4

​

5

class MyApp extends StatelessWidget {

6

  @override

7

  Widget build(BuildContext context) {

8

    return MaterialApp(

9

      title: 'Welcome to Flutter',

10

      home: Scaffold(

11

        appBar: AppBar(

12

          title: Text('Welcome to Flutter'),

13

        ),

14

        body: Center(

15

          child: Text('Hello World'),

16

        ),

17

      ),

18

    );

19

  }

20

}

 

بعد تشغيل تطبيقك ، من المفترض أن ترى تطبيقًا أساسيًا يقول "Hello World".

تفسير إلكود Flutter:

ينشئ هذا التطبيق تصميمًا متعدد الأبعاد. المواد هي لغة تصميم مرئية شائعة لتطبيقات الجوال والويب. تقدم Flutter مجموعة متنوعة من أدوات المواد.

و MyAppالطبقة تمتد StatelessWidgetلجعل التطبيق نفسه القطعة.

و Scaffoldتوفر القطعة شريط التطبيق الافتراضي، والعنوان، والجسم. العنوان هو النص "مرحبًا بك في Flutter" ، والجسم عبارة عن أداة نصية فرعية تقول ، "Hello World."

الوظيفة الأساسية لعنصر واجهة المستخدم هي توفير build()طريقة تصف كيفية عرض عناصر واجهة المستخدم الفرعية من حيث شجرة عناصر واجهة المستخدم الهرمية.

الخاتمة Flutter

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