خدمة دارت: صفحة ويب رفرفة

تدريب

في المرة الأخيرة أن الأمر انتهى على حقيقة أن يتلقى خادم الويب لدينا اسم نطاق وعلمت لإنشاء اتصال آمن مع العميل. ومع ذلك ، لا يزال لدينا أي شيء على الإطلاق نعرضه للمستخدم المستقبلي. على الرغم من أنه يمكننا بالفعل مشاركة فكرة بدء التشغيل والإعلان عن تاريخ إصدار MVP . صفحة الويب المعلوماتية مناسبة لهذه المهمة. دعنا نكتبها في Dart باستخدام إطار عمل FlutterWeb. ستصبح جميع تطبيقات الخدمة لعملائنا امتدادًا لهذه الصفحة بالذات. سنحاول إجراء التطوير بشكل تكيفي ومنظم قدر الإمكان ، بحيث يصبح التطوير والتجميعات للمنصات المطلوبة (web-android-iOS) مجرد روتين.







لنبدأ بتثبيت Flutter:

• قم بتثبيت git
• نقوم باستنساخ المستودع بإصدار بيتا من Flutter باستخدام الأمر

  git clone https://github.com/flutter/flutter.git -b beta

• لتشغيل أوامر flutter من سطر الأوامر ، يجب عليك تحديد المسار إلى ملفاته القابلة للتنفيذ في نظام التشغيل. لنفتح متغيرات نظام التشغيل ، لهذا نبدأ في إدخال "تغيير متغيرات بيئة المستخدم الحالية" في شريط البحث.
  
  
  
  
  
  
  
  في النافذة ، حدد متغير المسار وانقر فوق تغيير . في القائمة التي تفتح ، أنشئ سطرًا جديدًا بعنوان الملفات القابلة للتنفيذ flutter في نظام الملفات ، على سبيل المثال C: \ flutter \ bin
• قم بتثبيت امتداد VScode للرفرفة
• أعد تشغيل VScode (بحيث يتم تطبيق متغيرات نظام التشغيل الجديدة) وفي المحطة ، تحقق من حالة الرفرفة باستخدام الأمر
  
  
  
  

  flutter doctor

  
  
  
  
  
  
  أهم شيء هنا هو تثبيت flutter في الإصدار التجريبي (مع دعم تطوير الويب)
• الآن نقوم بتنشيط تطوير الويب مع الفريق
  
  
  
  

  flutter config --enable-web

أنشئ مشروعًا جديدًا وابدأ في التصحيح

نقوم بإنشاء مشروع جديد مع فريق

flutter create < >

دعنا نفتحه على الفور في VScode بالأمر

code < >

لنفتح ملف main.dart في مجلد lib ونبدأ في التصحيح باستخدام الأمر F5 :







ربما ، عند بدء التصحيح لأول مرة ، ستحتاج إلى تحديد Chrome كجهاز لتصحيح الأخطاء:







احذف محتويات ملف main.dart . أضف طريقة رئيسية فارغة وفئة جذر للتطبيق ، والتي تُرجع مثيلاً من MaterialApp في طريقة build () : بعد ذلك ، أنشئ المجموعة التالية من المجلدات الفرعية للمشروع: صف بإيجاز الغرض من كل منها:

• دي هو آلية للتواصل بين مكونات التطبيق. سيتم هنا إنشاء وتسجيل جميع الخدمات والمستودعات وعملاء الشبكة اللازمة لعمل التطبيق. سأستخدم مكتبة GetIt
• المجال - كائنات البيانات. فصول عرض البيانات
• الدقة - الألوان والخطوط والواردات من المسارات إلى الصور والخطوط. أي شيء متعلق بالموارد الثابتة
• service - خدمات للعمل مع البيانات
• واجهة المستخدم - الواجهة
• تيلس - المرافق طبقات

أضف التبعيات المطلوبة في ملف pubspec.yaml:

التحضير لتوسيع نطاق عناصر واجهة المستخدم

من المفترض أن تتكيف صفحتنا وفقًا لحجم شاشة جهاز العميل وموقعه (الوضع الرأسي أو الأفقي).



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

• Pixabay.com - مستودع صور المحتوى
• Paint.net - محرر رسومي

ضع الصور النهائية في مجلد / الأصول / الصور ، أضف هذا المسار إلى الموارد في ملف pubspec.yaml:







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

images.background(bool isPortrait).stub

للقيام بذلك ، في المجلد res ، قم بإنشاء ملف images.dart باستخدام فئات عناوين الصور:







لتوسيع نطاق الواجهة وأحجام الخطوط ، قمنا بتضمين مكتبة ScreenUtil . تتلخص وظيفته في شيئين:

• تسجيل حجم الشاشة "الأساسي". هنا تحتاج إلى ضبط عرض وارتفاع الشاشة التي يتم تنفيذ التخطيط الرئيسي لها والحاجة إلى قياس الخطوط.
• مجموعة من الامتدادات لتطبيق عامل القياس على الأرقام (العدد). على سبيل المثال ، تعني 100.w أن نتيجة هذا التعبير ستكون لشاشة 1920dp => 100dp ، ولشاشة iPhone8 بعرض 414dp => 100x (414/1920) = 21.6dp. أي خمس مرات أقل. هناك أيضًا امتدادات لارتفاع الخط وحجمه.

قم بإنشاء ملف /utils/screen_util_ext.dart وطريقة تهيئة ثابتة فيه: أضف







مكالمة إلى طريقة التهيئة للتكبير إلى طريقة build () لعنصر واجهة المستخدم الجذر: قم







بتوسيع وظائف مكتبة التكبير / التصغير بعدة امتدادات إضافية في الملف /utils/screen_util_ext.dart :

حقن التبعية

حان الوقت لتنفيذ آلية لإنشاء وتسجيل مكونات التطبيق باستخدام مكتبة GetIt . في المجلد lib / DI / ، قم بإنشاء ملف di_container.dart . سنكتب فيه طريقة ثابتة getItInit () ونهيئ مثيلًا لحاوية GetIt . دعنا نسجل المكون الأول - مثيل لفئة الصور :







أضف استدعاءًا إلى طريقة التهيئة إلى main () : سيبدو







الوصول إلى مكون الصور كما يلي:







بنفس الطريقة ، دعنا نسجل فئة مع الموارد مع السلاسل.

صفحة كعب

الآن ، في مجلد واجهة المستخدم ، قم بإنشاء ملف stub.dart مع فئة صفحات StubScreen ، وقم بتوسيع فئة StatelessWidget الأساسية ، وتجاوز أسلوب البناء المجرد () . صفحتنا عبارة عن صورة في الخلفية وكتلتان للمعلومات أمامها ، يتم وضعهما حسب اتجاه الشاشة.

المستودعات والخدمات

لعرض الوقت المتبقي بشكل ديناميكي قبل الإصدار ، يجب عليك:

1. الحصول على إعدادات من الخادم مع تواريخ بدء التطوير والإصدار
2. إنشاء دفق الحدث لتغيير الوقت المتبقي
3. اجمع هذه البيانات عن طريق تمريرها إلى دفق الإخراج لعرضها على واجهة المستخدم

دعنا نصف كائنات المجال (POJOs) لهذه البيانات:











مستودعات لتلقي الإعدادات وإنشاء تدفق حدث:











خدمة لمنطق الحدث: قم بتسجيل







هذه المكونات في حاوية DI:

القطعة الوقت المتبقي

يمكن تمثيل الوقت المتبقي قبل الإصدار بأربعة أرقام: الأيام والساعات والدقائق والثواني. دعنا نمثل هذه المعلمات كتعداد:







فلنضيف وظائف إلى المعلمات باستخدام الامتداد:







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











من الضروري توضيح ما هي Animation و AnimationController و TickerProviderStateMixin هنا... لذا فإن AnimationController عبارة عن غلاف فوق معلمة قيمة مزدوجة بسيطة . تتغير قيمة هذه المعلمة خطيًا في النطاق من 0.0 إلى 1.0 (يمكن أيضًا تغييرها في الاتجاه المعاكس أو إعادة تعيينها إلى 0.0). ومع ذلك ، لتغيير هذه المعلمة ، يتم استخدام كائن TickerProviderStateMixin خاص ، وهو معلمة مطلوبة لـ AnimationController ويخبرها أن محرك الرسومات جاهز لإنشاء إطار جديد. بعد تلقي مثل هذه الإشارة ، يقوم AnimationController بحساب مقدار الوقت المنقضي من الإطار السابق ويحسب مقدار تغيير قيمته . كائنات الرسوم المتحركة الاشتراك في AnimationControllerوتحتوي على بعض وظائف اعتماد قيمة الإخراج على التغيير الخطي (في الوقت المناسب) لقيمة AnimationController .



يتم استدعاء طريقة تهيئة الحالة initState () مرة واحدة عند الإنشاء:







عندما يتم إتلاف حالة الأداة ، يتم استدعاء طريقة dispose () :











سيتم تمثيل عنصر واجهة المستخدم بواسطة مكدس ( Stack ) ، مع AnimatedBuilder للرقم والمقياس الموجود فيه :







يبقى تنفيذ رسم بدائي على شكل قوس:







إضافة 4 هذه الأدوات التي تظهر على الشاشة هي بذرة:

بناء وإطلاق

قبل إنشاء التطبيق ، يجب استبدال اسم ووصف التطبيق في ملفات ./web/index.html ./web/manifest.json و pubspec.yaml .



توقف عن تصحيح الأخطاء وقم بإنشاء إصدار التطبيق باستخدام الأمر

flutter build web

يقع التطبيق النهائي في دليل ./build/web/ . يرجى ملاحظة أن الملفات .last_build_id و main.dart.js.map هي ملفات خدمة ويمكن حذفها.

دعونا نضع التطبيق على الخادم المعد في المقالة السابقة. للقيام بذلك ، ما عليك سوى نسخ محتويات دليل ./build/web/ إلى / public / على خادمنا:

scp -r ./* root@91.230.60.120:/public/

النتيجة



رمز المصدر جيثب



الأسئلة والتعليقات مرحب بها. يمكنك الدردشة مع المؤلف في قناة Telegram .

بدلا من الاستنتاج

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