إعداد جهاز ال Mac للتطوير بـ Flutter

إعداد جهاز ال Mac للتطوير بـ Flutter

لتتمكن من إعداد جهاز ال Mac للتطوير بـ Flutter وتطبيق هذا الدرس يجب عليك أولاً ان تقوم بتطبيق الخطوات الواردة في درس ” إعداد جهاز ال Mac للتطوير والبرمجة “.

الخطوة الأولى: تنصيب dart

لتنصيب dart يمكن اضافة الأوامر التالية الى Terminal

 brew tap dart-lang/dart
 brew install dart

لمعرفة اصدار dart المنصب بجهاز ال Mac، يمكنك اضافة الأمر التالي الى Terminal

brew info dart

لتنصيب أحدث اصدار من dart بجهاز ال Mac، يمكنك اضافة الأمر التالي الى Terminal

 brew upgrade dart

للتبديل الى اصدار آخر من dart، يمكنك اضافة الأمر التالي الى Terminal

 brew switch dart 2.10.1

الخطوة الثانية: تشغيل Android Studio واعداده وتنصيب Android SDK و JDK

عند تشغيل Android Studio لأول مرة، فإنة النافذة التالية ستظهر، فاختر Do not import settings واضغط على OK

ستطلب منك قوقل ان تسمح له بجمع بعض البيانات اثناء استخدامك ل Android Studio ولك الحق بالرفض بالضغط على Don’t send او السماح لها بالضغط على الزر الآخر

ستظهر هذه الشاشة الخاصة بالاعداد المبسط ل Android Studio ، قم بالضغط على Next

في هذه الخطوة قم باختيار Custom لتكون عملية الاعداد بشكل اكثر مرونة ، واضغط مباشرة على Next

ستظهر الشاشة التالية والخاصة باختيار مسار المجلد الذي تريد ان تحمل وتنصب بداخله Java Development Kit (JDK) ، يفضل أن تتركه بدون تغيير وتضغط على Next

في هذه الخطوة اختر الثيم الذي يناسبك سواء كان داكنا او فاتحا واضغط على Next

في هذه الخطوة سنحمل Android SDK ، ويمكن تغيير أو اختيار مسار آخر له بالضغط على ايقونة المجلد اقصى يمين صندوق المسار

عند الضغط على ايقونة المجلد يمكنك اختيار المسار المطلوب، ونحن في هذا الدرس سننشئ مجلد باسم Android بداخل Documents ، وبداخل مجلد Android سننشئ مجلد باسم sdk

عند الضغط على ايقونة المجلد يمكنك اختيار المسار المطلوب، ونحن في هذا الدرس سننشئ مجلد باسم Android بداخل Documents ، وبداخل مجلد Android سننشئ مجلد باسم sdk

بداخل مجلد Anroid سنختار مجلد sdk الذي قمنا بإنشائه، ونضغط على زر Open

بداخل مجلد Anroid سنختار مجلد sdk الذي قمنا بإنشائه، ونضغط على زر Open

سيظهر المسار كما هو موضح بالصورة التالية، الآن يجب الضغط على Next

ستظهر الشاشة التالية، اضغط Next

ستظهر الشاشة التالية، حيث يجب الضغط على Finish للبدء بعملية تحميل ال Android SDK و ال JDK وغيرها من الملفات اللازمة واتمام جميع الاعدادات

ستظهر الشاشة التالية وستبدأ عملية تحميل الملفات، اتركه حتى تنتهي عملية التحميل

ستظهر الشاشة التالية وستبدأ عملية تحميل الملفات، اتركه حتى تنتهي عملية التحميل

أخيرا ستظهر هذه النافذة التي توضح انتهاء عملية التحميل، وما عليك الا الضغط على Finish

أخيرا ستظهر هذه النافذة التي توضح انتهاء عملية التحميل، وما عليك الا الضغط على Finish

الخطوة الثالثة: تنصيب اضافة Flutter Plugin للـ Android Studio

أولا يجب تشغيل تطبيق Android Studio والدخول على Configure->Plugins

يجب تشغيل تطبيق Android Studio والدخول على Configure->Plugins

ثانيا حدد Marketplace واكتب Flutter في صندوق البحث

حدد Marketplace واكتب Flutter في صندوق البحث

ثالثا اختر Flutter من القسم الايسر واضغط Install بالجانب الأيسر وسينبثق صندوق يدعوك الى تنصيب Dart Plugin ، ايضا اضغط على زر Install بداخله

اختر Flutter من القسم الايسر واضغط Install بالجانب الأيسر وسينبثق صندوق يدعوك الى تنصيب Dart Plugin ، ايضا اضغط على زر Install بداخله

الآن اضغط على Restart IDE لاعادة تشغيل Android Studio وتفعيل الاضافة

 اضغط على Restart IDE لاعادة تشغيل Android Studio وتفعيل الاضافة

الخطوة الرابعة: تحميل وتنصيب Flutter SDK

بعد اعادة تشغيل ال IDE ، اضغط على Create New Flutter Project

بعد اعادة تشغيل ال IDE ، اضغط على Create New Flutter Project

اختر Flutter Application واضغط على Next

اختر Flutter Application واضغط على Next

سيظهر صندوق كتابة مسار مجلد Flutter SDK فارغا، حيث يمكنك تنصيب ال Flutter في المسار الذي تريد بالضغط على Install SDK

سيظهر صندوق كتابة مسار مجلد Flutter SDK فارغا، حيث يمكنك تنصيب ال Flutter في المسار الذي تريد بالضغط على Install SDK

بعد ضغطك على Install SDK ستظهر النافذة التالية، اختر Documents ومن ثم اضغط على Open

بعد ضغطك على Install SDK ستظهر النافذة التالية، اختر Documents ومن ثم اضغط على Open

ستظهر لك نافذة تكوين المشروع بالشكل التالي الى ان يكتمل تحميل Flutter

ستظهر لك نافذة تكوين المشروع بالشكل التالي الى ان يكتمل تحميل Flutter

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

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

اضغط Finish للبدء ببرمجة تطبيقك

اضغط Finish للبدء ببرمجة تطبيقك

ستنبثق النافذة التالية التي تطلب كلمة المرور لحساب الادمن بجهازك، فضع كلمة المرور واضغط Install Software

ستنبثق النافذة التالية التي تطلب كلمة المرور لحساب الادمن بجهازك، فضع كلمة المرور واضغط Install Software

الخطوة الخامسة: تنصيب اضافة Flutter Plugin للـ Visual Studio Code

بعد تشغيل Visual Studio Code اضغط على زر Extensions ورمزه هو مربع مقسم لاربع مربعات متساوية واحداها مفصول عن المربع الام، ويمكن ملاحظته بوضوح في صورة الشاشة التالية

بعد تشغيل Visual Studio Code اضغط على زر Extensions ورمزه هو مربع مقسم لاربع مربعات متساوية واحداها مفصول عن المربع الام، ويمكن ملاحظته بوضوح في صورة الشاشة التالية

او يمكنك الدخول الى ال Extensions من خلال القائمة الرئيسية Code => Preferences => Extensions

او يمكنك الدخول الى ال Extensions من خلال القائمة الرئيسية Code => Preferences => Extensions

ابحث عن Flutter بكتابة الكلمة في صندوق البحث ومن ثم اضغط على النتيجة Flutter واخيرا اضغط على زر Install الذي سيظهر لتنصيب Flutter بالجانب الايمن من النافذة

ابحث عن Flutter بكتابة الكلمة في صندوق البحث ومن ثم اضغط على النتيجة Flutter واخيرا اضغط على زر Install الذي سيظهر لتنصيب Flutter بالجانب الايسر من النافذة

سيكون شكل الجانب الايمن من الشاشة كالتالي عند اتمام تنصيب اضافة Flutter

سيكون شكل الجانب الايمن من الشاشة كالتالي عند اتمام تنصيب اضافة Flutter

الخطوة السادسة: تنفيذ إعدادات Flutter الرئيسية

الآن شغل ال Terminal واكتب الأمر التالي، لتحرير ملف .bash_profile أو ملف .zshrc أو .zprofile إذا كان zsh هو ال shell الافتراضي

nano ~/.bash_profile

أو ( إذا كان zsh هو ال shell الافتراضي )

nano ~/.zshrc

أو

nano ~/.zprofile

اكتب الكود التالي بداخل الملف، وايضا قم بتشغيل ال finder واذهب الى مسار مجلد ال flutter وادخله

export PATH="$PATH:
اكتب الكود التالي بداخل الملف، وايضا قم بتشغيل ال finder واذهب الى مسار مجلد ال flutter وادخله

اسحب مجلد bin الى ال Terminal الى قرب آخر احرف تمت كتابته بالكود بالخطوة السابقة، والتأكد من أن مؤشر الكتابة موجود بعد آخر حرف أو رمز تمت كتابته بكود الخطوة السابقة.

اسحب مجلد bin الى ال Terminal الى قرب آخر احرف تمت كتابته بالكود بالخطوة السابقة، والتأكد من أن مؤشر الكتابة موجود بعد آخر حرف أو رمز تمت كتابته بكود الخطوة السابقة.

الآن أغلق جملة النص البرمجي بعلامة التنصيص ( ” ) ومن ثم احفظ الملف واخرج باستخدام الكيبورد بالضغط على Ctrl و x

الآن أغلق جملة النص البرمجي بعلامة التنصيص ( " ) ومن ثم احفظ الملف واخرج

اضغط على Ctrl و y من خلال الكيبورد لحفظ الملف واغلاق المحرر

اضغط على Ctrl و y من خلال الكيبورد لحفظ الملف واغلاق المحرر

اضغط Enter لتتم عمليتي الحفظ والخروج

اضغط Enter لتتم عمليتي الحفظ والخروج

الآن أضف الأوامر التالية الى ال Terminal من اجل اعتماد النسخة المستقرة من flutter

flutter channel stable
flutter upgrade --force

بعد انتهاء تغيير ال flutter للنسخة المستقرة، أضف الأمر التالي الى Terminal ولكن لا تضغط على Return او Enter ، حيث اننا في هذه الخطوة سنحدد مسار Android SDK ليتعرف عليه Flutter

flutter config --android-sdk 

ادخل من ال finder الى مسار مجلد Android SDK واسحب المجلد الى ال Terminal كما فعلناها بالخطوات السابقة لمسار Flutter

سيظهر المسار بنفس هذه الطريقة، اضغط Enter او Return واعد تشغيل ال Terminal

الآن أضف هذا الأمر الى Terminal واضغط على على Enter او Return ( ٤٫١ هو اصدار Android Studio ويجب تغييره للاصدار المنصب لديك )

ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1

في هذه الخطوة ستوافق على اتفاقيات تراخيص الأندرويد Android باضافة الأمر التالي والضغط على Enter او Return

flutter doctor --android-licenses

سيظهر السؤال التالي، اكتب y واضغط Enter او Return

في جميع الاتفاقيات التي ستظهر اكتب y واضغط Enter او Return

الخطوة السابعة: فحص اذا ما تمت جميع الخطوات بشكل صحيح، وان flutter يعمل بشكل جيد

لاتمام هذه الخطوة يجب ادخال الأمر التالي الى Terminal

flutter doctor

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

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

كيف يمكنني تشغيل جهاز أندرويد افتراضي؟

شغل Android Studio واذهب الى Configure واضغط على AVD Manager

شغل Android Studio واذهب الى Configure واضغط على AVD Manager

يمكنك تشغيل جهاز الاندرويد الافتراضي المنشأ مسبقا بالضغط على ايقونة التشغيل الخضراء والتي تشبه ازرار تشغيل مقاطع الفيديو في المشغلات المختلفة

يمكنك تشغيل جهاز الاندرويد الافتراضي المنشأ مسبقا بالضغط على ايقونة التشغيل الخضراء والتي تشبه ازرار تشغيل مقاطع الفيديو في المشغلات المختلفة

سيشتغل جهاز الأندرويد الافتراضي بالشكل الموضح بالصورة التالية

يمكنك أيضا انشاء جهاز آخر بمواصفات مختلفة حسب حاجتك بدلا من تشغيل الجهاز المعد مسبقا بالضغط على Create Virtual Device

يمكنك أيضا  انشاء جهاز آخر بمواصفات مختلفة حسب حاجتك بدلا من تشغيل الجهاز المعد مسبقا بالضغط على Create Virtual Device

بعد الضغط على Create Virtual Device ستظهر النافذة التالية، حيث يمكنك اختيار فئة الجهاز ومن ثم اختيار الجهاز المطلوب والضغط على Next

بعد الضغط على Create Virtual Device ستظهر النافذة التالية، حيث يمكنك اختيار فئة الجهاز ومن ثم اختيار الجهاز المطلوب والضغط على Next

اختر اصدار Android الذي تحتاجه في مشروعك واضغط على Next

اختر اصدار Android الذي تحتاجه في مشروعك واضغط على Next

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

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

يمكنك الآن تشغيل الجهاز الافتراضي الجديد بنفس الخطوة التي اتبعناها في السطور السابقة بالضغط على ايقونة التشغيل الشبيهة بايقونة تشغيل الفيديو او الصوت في المشغلات المختلفة

يمكنك الآن تشغيل الجهاز الافتراضي الجديد بنفس الخطوة التي اتبعناها في السطور السابقة بالضغط على ايقونة التشغيل الشبيهة بايقونة تشغيل الفيديو او الصوت في المشغلات المختلفة

عندما تنشئ مشروعا جديدا او تفتح احد المشاريع باستخدام Android Studio، وتريد أن تشغل جهازا افتراضيا من خلال AVD Manager فيجب عليك الضغط على ايقونة رمز الموبايل التي تحوي ايضا شعار اندرويد صغير فوق الجزء السفلي الايمن من رمز الموبايل

عندما تنشئ مشروعا جديدا او تفتح احد المشاريع باستخدام Android Studio، وتريد أن تشغل جهازا افتراضيا من خلال AVD Manager فيجب عليك الضغط على ايقونة رمز الموبايل التي تحوي ايضا شعار اندرويد صغير فوق الجزء السفلي الايمن من رمز الموبايل

كيف يمكنني تشغيل جهاز آيفون افتراضي من خلال Android Studio؟

بكل بساطة اضغط على خانة اختيار الجهاز لبناء التطبيق وتشغيله بداخله، وعادة يكون الاختيار الظاهر No Devices والسبب عدم وجود جهاز افتراضي يعمل في الوقت الحالي ، وسيظهر لك خيار … حيث يجب عليك ان تضغط عليه

×

مرحبا!

إنقر على أحد ممثلينا بالأسفل لفتح محادثة معه أو تواصل معنا عبر [email protected]

× كيف يمكنني أن أخدمك؟