ثلاث طرق صادقة نسبيا لإنشاء مشروع رفرفة

لذلك ، مع عرض Google لأول إصدار مستقر من Flutter ، والذي حدث في 4 ديسمبر 2018 ، بدأت عملية تغيير المشهد في مجالات برمجة الهاتف المحمول. لقد ظهر لاعب جديد ، قادر على تغيير قواعد اللعبة نفسها. الآن ، من قاعدة رمز واحدة ، يمكنك إنشاء تطبيقين أصليين (أي ، "أصليان" لوقت التشغيل) مرة واحدة - لنظامي التشغيل iOS و Android. على عكس ما يسمى التطبيقات المختلطة التي تستخدم JavaScript تحت الغطاء ، تعمل التطبيقات التي تم إنشاؤها على Flutter بسرعة وسلاسة ، نظرًا لأن الشفرة المكتوبة بلغة Dart البرمجية (لأولئك الذين لديهم دراية بلغة Java أو C # ستكون مريحة مع هذه اللغة) يتم تجميعها بعد ذلك ( AoT ، أي سابقًا ) إلى رمز الجهاز: بشكل منفصل لنظام Android ، وبشكل منفصل لنظام التشغيل iOS.

لذلك ، إذا درست Dart and Flutter ، فستتمكن من كتابة تطبيقات أصلية لأنظمة التشغيل المحمولة الأكثر شيوعًا ، أي كن مطور Android و iOS. وربما لا يكون هذا هو الحد ، حيث تم الإعلان عن أن Google تعمل على توسيع Flutter لتمكين إنشاء تطبيقات لنظام التشغيل Windows و Mac و Web (مشروع Flutter للويب يسمى Hummingbird - Hummingbird). نتيجة لذلك ، قد يتضح أن معرفة دارت ورفرفة يمكنك كتابة الكثير من الأشياء. لذلك ، دعا العديد من خبراء تكنولوجيا المعلومات 2018 - عام الرفرفة.

الآن إلى هذه النقطة. الآن سنفعل ما يلي

1. قم بتثبيت Flutter SDK ، وقم بإنشاء المشروع من سطر أوامر Windows.
2. قم بتثبيت JDK ، و Android Studio ، والمكونات الإضافية لـ Flutter و Dart ، وإنشاء مشروع في Android Studio.
3. قم بتثبيت VS Code ، وملحقات Flutter و Dart ، وإنشاء مشروع في VS Code.

تثبيت Flutter وإنشاء مشروع من سطر الأوامر

نذهب إلى صفحة تثبيت Flutter ، وحدد نظام التشغيل الخاص بك - Windows أو Mac أو Linux (هنا سيتم وصفه لنظام التشغيل Windows 10 ، باعتباره نظام التشغيل الأكثر شيوعًا) ، وقم بتنزيل الملف المضغوط الذي يحتوي على Flutter SDK . ثم قم بفك ضغط الرمز البريدي ، على سبيل المثال ، في مجلد المستخدم الحالي ، كما هو موضح في لقطة الشاشة:



الآن سنقوم بكتابة المسار إلى الرفرفة \ bin في متغير المسار الخاص ببيئة مستخدم Windows ( هذا الكمبيوتر -> الخصائص -> إعدادات النظام المتقدمة -> متغيرات البيئة ):



يمكنك إنشاء مشروع من سطر أوامر Windows:

flutter create my_app 

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

قم بتثبيت JDK و Android Studio (إلى جانب Android SDK) والإضافات الضرورية

قم بتنزيل أحدث إصدار من Java SE Development Kit 8 لنظام التشغيل الخاص بك (مطلوب لنظام Android SDK ) ، وقم بتثبيته على جهاز الكمبيوتر الخاص بك ، واتبع معالج التثبيت ، وقم بإنشاء متغير بيئة نظام JAVA_HOME مع المسار إلى JDK ، على سبيل المثال: C: \ Program Files \ Java \ jdk1.8.0_201 .



الآن قم بتنزيل Android Studio . نبدأ عملية التثبيت ، باتباع معالج التثبيت ، وننتبه إلى المسار حيث سيتم تثبيت Android SDK . نقوم بإنشاء متغير بيئة النظام ANDROID_SDK_TOOLS مع المسار إلى المجلد \ tools في Android SDK ، شيء مثل هذا:



عندما يكون كل شيء جاهزًا - قم بتشغيل Android Studio ، وقم بتثبيت الإضافات Flutter and Dart. للقيام بذلك ، في شاشة بدء Android Studio ، انقر على أيقونة الترس في أسفل اليمين وحدد Plugins:



في النافذة التي تفتح أدناه ، انقر على زر تصفح المستودعات ...



في سطر البحث ، أدخل رفرفة ، حدد وتثبيت (لقد قمت بالفعل بتثبيت البرنامج ، وبالتالي فإن الزر المناظر غير مرئي):



سيقدم Android Studio أيضًا تثبيت المكون الإضافي Dart الذي يعتمد عليه المكون الإضافي Flutter. نحن متفقون نتيجةً لذلك ، يجب أن يكون لديك مكونان على الأقل مثبتان:



نحن نعيد تشغيل Android Studio ، والآن دعونا نتأكد من أن كل شيء يسير على ما يرام. للقيام بذلك ، قم بتشغيل الأمر في موجه الأوامر:

 flutter doctor 

سيستغرق المسح عشر ثوانٍ ، ثم يمكنك رؤية شيء مثل هذا:



أو ربما سيكون هناك عنصر يحمل علامة الصليب الأحمر مع توضيح (باللغة الإنجليزية) أنك لم تقبل بعد أي تراخيص لـ Android SDK ، وعرضًا لقبولها ( Y / n ). اقبلهم بكتابة Y في سطر الأوامر. قد تضطر إلى القيام بذلك عدة مرات (إذا كان لديك العديد من التراخيص).

لذلك نحن مستعدون لإنشاء مشروع Flutter في Android Studio. بعد تثبيت الإضافات Flutter و Dart ، يجب أن يظهر خيار بدء مشروع جديد Flutter في الشاشة الأولية لبرنامج Android Studio. اخترها:



بعد ذلك ، نحن نتفق مع خيار تطبيق الرفرفة المحدد افتراضيًا وانقر فوق الزر " التالي" :



نشير إلى اسم المشروع ، والمسار إلى مجلد Flutter SDK ، والمسار إلى مجلد المشروع ، وتقديم وصف موجز للمشروع (اختياري) ، وانقر فوق التالي مرة أخرى:



أخيرًا ، نحدد اسم المجال (الذي سيتم استخدامه بالترتيب العكسي كمعرف تطبيق Android) ، واختيارياً ، دعم لغتي Kotlin و Swift (إذا لم يتم تحديدهما ، فسيتم دعم Java و Objective-C فقط افتراضيًا). انقر فوق الزر " إنهاء" .



اعتمادًا على أداء الكمبيوتر ، ننتظر بضع دقائق حتى يتم إنشاء المشروع ... تم! يجب أن يبدو شيء مثل هذا:



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

وأخيرًا ، قم بتثبيت VS Code ، والإضافات ، وإنشاء مشروع رفرفة ثالث

قم بتنزيل أحدث إصدار من Visual Studio Code لنظام التشغيل الخاص بك ، وتثبيته على جهاز الكمبيوتر الخاص بك ، وبعد معالج التثبيت ، وتشغيل VS Code. ثم ، على اللوحة الجانبية ، انقر فوق الزر Extensions (كما هو موضح بالسهم) أو على لوحة المفاتيح - Ctrl + Shift + X :



باستخدام البحث نحن نبحث عن امتداد رفرفة.



سوف يعرض VS Code ، كما في حالة Android Studio ، تثبيت الإضافة الإضافية الضرورية Dart. نحن تثبيته أيضا. نتيجةً لذلك ، يجب أن يكون لديك ملحقان نشطان (أو أكثر):



والآن نحن بصدد إنشاء مشروع الرفرفة. انقر على أيقونة الترس في الركن السفلي الأيسر وحدد Command Pallete ... (أو على لوحة المفاتيح - Ctr + Shift + P ). في سطر الأوامر Command Pallete ، نبدأ في كتابة رفرفة ، ومن القائمة التي تظهر ، حدد Flutter: New Project :



حدد اسم المشروع واضغط على المفتاح Enter :



يظهر مربع حوار يطالبك بتحديد المجلد الذي تريد إنشاء مشروع الرفرفة فيه. حدد وانقر فوق الزر باسم طويل حدد مجلدًا لإنشاء المشروع في :



لحظة الانتظار ... وفعلت!

ملخص

لقد قمنا بتثبيت البرنامج الضروري (كل شيء مجاني!) ، وقمنا بإنشاء مشروع Flutter بثلاث طرق مختلفة: من سطر الأوامر ، باستخدام Android Studio ، باستخدام VS Code. كيفية إنشاء مشروع وفي أي بيئة تطوير ( IDE ) من الأفضل أن تعمل معها - يقرر الجميع بنفسه. على سبيل المثال ، أفضل إنشاء مشروع بسرعة من سطر الأوامر ، ثم فتحه في VS Code والعمل معظم الوقت على المشروع فيه ، لأن كود VS سريع جدا. ولكن عندما تحتاج إلى اختبار مظهر وأداء التطبيق بشكل جيد ، أقوم بفتح المشروع في Android Studio لاستخدام Flutter Inspector المتوفر حتى الآن ، والذي ، كما قلت بالفعل ، يحتوي على عدد من الخيارات المفيدة للغاية.