بدأت كمطور ويب للواجهة الأمامية ثم أصبحت رفرفة مطور. أعتقد أن هناك بعض المفاهيم التي ساعدتني في تبني Flutter بشكل أسهل. كانت هناك أيضًا بعض المفاهيم الجديدة التي كانت مختلفة.
في هذه المقالة ، أريد أن أشارك تجربتي وألهم أي شخص يشعر بالشلل في اختيار نظام بيئي على الآخر من خلال إظهار كيفية انتقال المفاهيم وأي مفاهيم جديدة قابلة للتعلم.
المفاهيم التي تم نقلها
يعرض هذا القسم الأماكن التي يتشابه فيها تطوير الويب الأمامي و Flutter. يشرح المهارات التي لديك بالفعل والتي تعتبر ميزة لك إذا بدأت Flutter.
1. تنفيذ واجهات المستخدم (UIs)
لتنفيذ واجهة مستخدم معينة في الويب الأمامي ، يمكنك إنشاء عناصر HTML وتصميمها باستخدام CSS. لتنفيذ واجهات المستخدم في Flutter ، عليك إنشاء الحاجيات وأسلوبها مع HAS.
مثل CSS ، فإن ملف Color فئة في Dart تعمل مع "rgba" و "hex". كما هو الحال مع CSS ، يستخدم Flutter وحدات البكسل لوحدات المساحة والحجم.
في Flutter ، لدينا فئات Dart وتعدادها لجميع خصائص CSS وقيمها تقريبًا. فمثلا:
رفرفة لديه أيضا Column و Row الحاجيات. هذه هي مكافئ Flutter لـ display: flex في CSS. لتكوين justify-content و align-items الأنماط التي تستخدمها MainAxisAlignment و CrossAxisAlignment الخصائص. لضبط ملف flex-grow style ، قم بلف عنصر (عناصر) الطفل (العناصر) المصابة من ملف Column/Rowفي Expanded or Flexible.
بالنسبة لواجهات المستخدم المتقدمة ، يحتوي Flutter على الامتداد CustomPaint فئة - هو رفرفة ما Canvas API هو تطوير الويب. CustomPaint يمنحك رسامًا لرسم أي واجهة مستخدم كما يحلو لك. سوف تستخدم عادة ملفات CustomPaint عندما تريد شيئًا معقدًا حقًا. ايضا، CustomPaint هي طريقة الانتقال عندما لا تعمل مجموعة من الأدوات.
2. تطوير من أجل متعددة دقة الشاشة
تعمل مواقع الويب على المتصفحات وتعمل تطبيقات الجوال على الأجهزة. على هذا النحو ، أثناء التطوير لأي نظام أساسي ، عليك أن تضع النظام الأساسي في الاعتبار. كل منصة تنفذ نفس الميزات (الكاميرا ، الموقع ، الإخطارات ، إلخ) بطرق مختلفة.
بصفتك مطور ويب ، فأنت تفكر في استجابة موقع الويب الخاص بك. يمكنك استخدام استعلامات الوسائط للتعامل مع شكل موقع الويب الخاص بك في شاشات أصغر وأوسع.
بدءًا من تطوير الويب للجوال إلى Flutter ، لديك الامتداد MediaQuery فئة المساعد. ال MediaQuery فئة تمنحك الجهاز الحالي orientation (أفقي أو عمودي). كما أنه يمنحك منفذ العرض الحالي sizeأطلقت حملة devicePixelRatio، من بين معلومات الجهاز الأخرى. تمنحك هذه القيم معًا رؤى حول تكوين الجهاز المحمول. يمكنك استخدامها لتغيير شكل تطبيق الهاتف المحمول الخاص بك في مختلف أحجام الشاشات.
3. العمل مع المصححين والمحررين وأدوات سطر الأوامر
متصفحات سطح المكتب لديها أدوات للمطورين. تتضمن هذه الأدوات مفتشًا ووحدة تحكم وشاشة مراقبة وما إلى ذلك. تعمل هذه الأدوات على تحسين عملية تطوير الويب. Flutter أيضا لها خاصيتها DevTools. لديها مفتش القطعة ، مصحح الأخطاء ، مراقب الشبكة ، من بين ميزات أخرى.
دعم IDE مشابه أيضًا. يعد Visual Studio Code أحد أكثر IDE شيوعًا لتطوير الويب. هناك العديد من الامتدادات المتعلقة بالويب لـ VS Code. يدعم Flutter أيضًا رمز VS. لذلك أثناء الانتقال ، لا تحتاج إلى تغيير IDE. هناك امتدادات Dart و Flutter لـ VS Code. يعمل Flutter أيضًا بشكل جيد مع Android Studio. يدعم كل من Android Studio و VS Code Flutter DevTools. تكامل IDE يجعل أدوات Flutter كاملة.
تأتي معظم أطر عمل JavaScript الأمامية مع واجهة سطر الأوامر (CLI). على سبيل المثال: الزاوي CLI, إنشاء تطبيق React, عرض CLI، إلخ. يأتي Flutter أيضًا بميزة حصرية CLI. يسمح لك Flutter CLI ببناء وإنشاء وتطوير مشاريع Angular. لديها أوامر لتحليل واختبار مشاريع Flutter.
المفاهيم التي كانت جديدة
يتحدث هذا القسم عن المفاهيم الخاصة بـ Flutter والتي تكون أسهل أو غير موجودة في تطوير الويب. يشرح الأفكار التي يجب أن تضعها في اعتبارك عند دخولك إلى Flutter.
كيفية التعامل مع التمرير
عند التطوير للويب ، يتم التعامل مع سلوك التمرير الافتراضي بواسطة متصفحات الويب. ومع ذلك ، فأنت حر في تخصيص التمرير باستخدام CSS (باستخدام overflow).
هذا ليس هو الحال في Flutter. لا يتم تمرير مجموعات عناصر واجهة المستخدم افتراضيًا. عندما تشعر أن مجموعات عناصر واجهة المستخدم قد تتفوق ، يجب عليك تكوين التمرير بشكل استباقي.
في Flutter ، يمكنك تكوين التمرير باستخدام عناصر واجهة مستخدم غريبة تسمح بالتمرير. فمثلا: ListView, SingleChildScrollView, CustomScrollView، إلخ. تمنحك هذه الأدوات القابلة للتمرير تحكمًا كبيرًا في التمرير. مع CustomScrollView، يمكنك تكوين آليات التمرير الخبيرة والمعقدة داخل التطبيق.
على جانب Flutter ، باستخدام ScrollViews أمر لا مفر منه. Android و iOS ScrollView و UIScrollView للتعامل مع التمرير. يحتاج Flutter إلى طريقة لتوحيد العرض وتجربة المطور باستخدام ملفات ScrollViews، جدا.
قد يساعدك التوقف عن التفكير في تدفق بنية المستند وبدلاً من ذلك اعتبار التطبيق بمثابة لوحة مفتوحة لآليات الرسم الأصلية للجهاز.
2. تهيئة بيئة التطوير الخاصة بك
لإنشاء أبسط موقع ويب ، يمكنك إنشاء ملف بامتداد .html التمديد وفتحه في المتصفح. الرفرفة ليست بهذه البساطة. لاستخدام Flutter ، يجب أن تكون قد قمت بتثبيت Flutter SDK و تكوين Flutter لجهاز اختبار. لذلك إذا كنت تريد ترميز Flutter لنظام Android ، فأنت بحاجة إلى ذلك قم بإعداد Android SDK. ستحتاج أيضًا إلى تكوين جهاز Android واحد على الأقل (محاكي Android أو جهاز مادي).
هذا هو الحال بالنسبة لأجهزة Apple (iOS و macOS). بعد تثبيت Flutter على جهاز Mac ، ما زلت بحاجة إلى إعداد Xcode قبل المضي قدمًا. ستحتاج أيضًا على الأقل إلى جهاز محاكاة iOS أو iPhone لاختبار Flutter على iOS. يعد Flutter لسطح المكتب أيضًا إعدادًا كبيرًا. في نظام Windows ، تحتاج إلى إعداد Windows Development SDK باستخدام Visual Studio (وليس رمز VS). على نظام Linux ، ستقوم بتثبيت المزيد من الحزم.
بدون إعداد إضافي ، يعمل Flutter على المتصفحات. نتيجة لذلك ، يمكنك التغاضي عن الإعداد الإضافي للأجهزة المستهدفة. في معظم الحالات ، قد تستخدم Flutter لتطوير تطبيقات الأجهزة المحمولة. وبالتالي ، قد ترغب في إعداد Android أو iOS على الأقل. يأتي Flutter مع flutter doctor يأمر. يقوم هذا الأمر بالإبلاغ عن حالة إعداد التطوير الخاص بك. بهذه الطريقة ، تعرف ما يجب العمل عليه ، في الإعداد ، إذا لزم الأمر.
هذا لا يعني أن التطور في Flutter بطيء. يأتي Flutter بمحرك قوي. ال flutter run يسمح الأمر بإعادة التحميل السريع إلى جهاز الاختبار أثناء الترميز. ولكن بعد ذلك سوف تحتاج إلى الضغط R في الواقع لإعادة التحميل السريع. هذه ليست قضية. ملحق Flutter's VS Code يسمح بإعادة التحميل التلقائي عند تغيير الملف.
3. التعبئة والتغليف والنشر
يعد نشر مواقع الويب أرخص وأسهل مقارنة بنشر تطبيقات الأجهزة المحمولة. عند نشر مواقع الويب ، يمكنك الوصول إليها من خلال أسماء المجال. عادة ما يتم تجديد أسماء المجالات هذه سنويًا. ومع ذلك ، فهي اختيارية.
اليوم ، تقدم العديد من المنصات استضافة مجانية.
فمثلا: DigitalOcean يمنحك نطاقًا فرعيًا مجانيًا على .ondigitalocean.com.
يمكنك استخدام هذه المجالات إذا كنت تقوم بإنشاء موقع ويب للتوثيق. يمكنك أيضًا استخدامها عندما لا تكون قلقًا بشأن العلامة التجارية.
في عالم Flutter مع تطبيقات الهاتف المحمول ، عادة ما تقوم في معظم الحالات بنشر تطبيقك في مكانين.
يجب عليك تسجيل حساب مطور على كل من هذه المنصات. يتطلب تسجيل حساب مطور رسومًا أو اشتراكًا والتحقق من الهوية.
بالنسبة إلى App Store ، تحتاج إلى التسجيل في برنامج Apple Developer. تحتاج إلى صيانة اشتراك سنوي قدره 99 دولارًا. بالنسبة إلى Google Play ، تحتاج إلى إنشاء ملف دفعة واحدة بقيمة 25 دولارًا للحساب.
تراجع هذه المتاجر كل تطبيق تمت مراجعته قبل نشره.
ضع في اعتبارك أيضًا أن المستخدمين لا يستهلكون تحديثات التطبيق بسهولة. يجب على المستخدمين تحديث التطبيقات المثبتة بشكل صريح. هذا على عكس الويب حيث يمكن للجميع رؤية أحدث إصدار تم نشره من موقع ويب.
تعد إدارة التطبيقات المنشورة أكثر تطلبًا نسبيًا من إدارة مواقع الويب المنشورة. ومع ذلك ، هذا لا ينبغي أن يخيفك. بعد كل شيء ، هناك الملايين من التطبيقات التي تم نشرها في أي من المتاجر حتى تتمكن من إضافة التطبيقات الخاصة بك أيضًا.
أفكار إضافية حول الرفرفة
Flutter هي أداة مشتركة بين الأنظمة الأساسية لإنشاء تطبيقات سطح المكتب أو الهاتف المحمول أو الويب. تطبيقات Flutter مثالية للبكسل. يرسم Flutter نفس واجهة المستخدم على كل تطبيق بغض النظر عن النظام الأساسي المستهدف. هذا لأن كل تطبيق Flutter يحتوي على محرك Flutter. يعرض هذا المحرك رمز Flutter UI. يوفر Flutter لوحة قماشية لكل جهاز ويسمح لك بالطلاء كما تريد. يتواصل المحرك مع النظام الأساسي المستهدف للتعامل مع الأحداث والتفاعلات.
الرفرفة فعالة. لديها مستويات عالية الأداء. هذا لأنه مبني باستخدام Dart ويستفيد من ميزات Dart.
مع هذه الفوائد العديدة ، يعد Flutter خيارًا جيدًا للعديد من التطبيقات. توفر التطبيقات عبر الأنظمة الأساسية المال والوقت أثناء الإنتاج والصيانة. ومع ذلك ، قد لا تكون Flutter (والحلول عبر الأنظمة الأساسية) الخيار الأمثل في بعض الحالات.
لا تستخدم Flutter إذا كنت تريد من المستخدمين استخدام أدوات مطور النظام الأساسي مع تطبيقك. تعني أدوات مطور النظام الأساسي هنا أدوات خاصة بالجهاز مثل خيارات مطور Android. يتضمن أيضًا أدوات مطور المستعرض.
لا تستخدم Flutter للويب إذا كنت تتوقع أن تتفاعل ملحقات المتصفح مع موقع الويب.
أيضًا ، لا تستخدم Flutter للمواقع ذات المحتوى الثقيل.
وفي الختام
كانت هذه مراجعة للمهارات التي تنتقل من تطوير الويب الأمامي إلى العمل مع Flutter. ناقشنا أيضًا مفاهيم تطوير التطبيقات التي يجب أن تتعلمها كمطور ويب.
يعد Flutter أبسط لمطوري الويب لأن كلاهما يتضمن تنفيذ واجهات المستخدم. إذا بدأت Flutter ، فستكتشف أنه يمنحك تجربة مطور جيدة. جرب Flutter! استخدمه لبناء تطبيقات الجوال وبالطبع اعرض ما تقوم ببنائه.
هتاف!
