Create كيفية إنشاء أول الرياضيات الزاوي مخصص مع سهولة

يمكن أن يكون الأمر سهلاً - قطعة من الكيك إذا أردت (Gby Gianna Ciaramello️)

EDIT: 13. 10. 2018 - تحقق من حزمة ومستودع @ الزاوي الامتدادات / نموذج لمعرفة كيفية تنفيذ الرياضيات الزاوي وفقا لأحدث نسخة من Angular CLI و Angular Devkit!

  • مكتبة ng addable حتى نتمكن من إضافة @ angular-extension / model
  • إنشاء خدمات نموذجية باستخدام اختبارات باستخدام ng g @ angular-schematics / model: model path / my-service

تحقق من تنفيذ الخطط وبناء العملية.

شعرت بالإثارة عندما أعلن فريق Angular & CLI أنهم يعملون في مجال الرياضيات.

إن الإنشاء التلقائي لقاعدة الكود وتحديثها بطريقة منظمة ومحددة يبدو وكأنه عمل شاق للغاية للمطورين

الكثير من الأشياء ممكنة بمساعدة الخطط بالفعل. بدءًا من المبادرات الرسمية ، مثل القدرة على تحديث بيانات تبعيات مشروعك وإنشاء ng أشياء مثل المكونات أو الأنابيب ، من خلال أشياء شبه رسمية (فريق Angular سابقًا) مثل nx مع الخطط لتوليد الخدمات لمكتبة إدارة حالة ngrx الشائعة وحتى الخطط الصغيرة المخصصة لمرة واحدة التي بدأت في الظهور على NPM.

حالات الاستخدام الممكنة وفوائد الرياضيات الزاوي

تتمتع الرياضيات بميزة كبيرة مقارنةً بالمقاربة الأكثر تقليدية للتعامل مع كتابة المهام الثقيلة مثل استخدام قوالب IDE أو وحدات الماكرو من حيث أنه يتم توزيعها بسهولة وإصدارها بشكل دلالي.

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

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

ثم يمكنهم التركيز على ما يهم حقًا - تنفيذ ميزات حقيقية للمستخدمين النهائيين!

ما سوف نتعلم

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

ماذا يعني عندما نتحدث عن المجموعات والخطط

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

  • مجموعة الخطط - (أو مجرد مجموعة كما هو مستخدم في هذه المقالة) هو مشروع (حزمة npm) يحتوي على مخطط واحد على الأقل
  • التخطيطي - عبارة عن "وصفة" يمكن تنفيذها باستخدام ng إنشاء <اسم - اسم> لإنشاء وضبط ملفات المشروع

إذا استخدمنا Angular CLI ، فيمكننا تشغيل العديد من الخطط افتراضيًا لأنها مدرجة في @ schematics / collection angular. يتيح لنا ذلك إنشاء أشياء مثل المكونات أو الخدمات أو الأنابيب خارج الصندوق.

يمكننا أيضًا تثبيت مجموعة إضافية من npm وتنفيذ مخططاتها عن طريق تمرير علامة جماعية إضافية إلى ng إنشاء مثل في المثال التالي ng إنشاء --collection .

كيفية إنشاء مجموعة الخطط الجديدة

لإنشاء مجموعة مخصصة خاصة بنا ، يجب علينا تثبيت زوجين من التبعيات أولاً. شكراً لمارتن هوشل على الإشارة إلى أن التبعيات قد تغيرت منذ نشر المقال الأصلي ولصورة رمز المثال العظيم!

  • @ الزاوي - devkit / الخطط ، @ الزاوي - devkit / الخطط ، CLI و @ الزاوي - devkit / الأساسية لتكون قادرة على تنفيذ الخطط من سطر الأوامر
  • @ المخططات / الخطط هذه مجموعة تحتوي على مخططات تستخدم لإنشاء مشاريع تجميع جديدة
  • rxjs هو تبعية الأقران

يمكننا تثبيتها على مستوى العالم (npm i -g) لتتمكن من تشغيل الأوامر المتاحة في كل مكان. لوضع كل شيء معا بشكل جيد ...

npm i -g @ angular-devkit / {schematics، schematics-cli، core} @ الخطط / الخطط

ثم يمكننا إنشاء مجموعتنا المخصصة الجديدة باستخدام schematics @ schematics / schematics: اسم مجموعة التخطيطي - اسم.

وأنا أتفق ، وهذا يبدو وكأنه أمر غير تقليدي جدا

دعنا نلقي بعض الضوء على ما يجري هناك ... تقبل مخططات القيادة الأمر المعلمة @ الخطط / الخطط: الخطط التي تتكون من جزأين ، اسم المجموعة (حزمة npm) @ الخطط / المخططات واسم المخططات المنفذة والتي يسمى funnily الخطط في قضيتنا. المعلمة الثانية - يستخدم الاسم لتقديم اسم مجموعتنا الجديدة.

سيؤدي تشغيل هذا الأمر إلى إنشاء مجلد جديد بهيكل مشروع لتطوير مجموعتنا الجديدة مع بعض أمثلة المخططات الوهمية ونصوص بناء واختبار مفيدة.

أبسط طريقة لإنشاء مخططات مخصصة جديدة

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

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

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

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

قم بإزالة جميع الخطط التي تم إنشاؤها افتراضيًا واستبدلها بخطط الخدمة المخصصة الجديدة

بعد ذلك ، يمكننا نسخ محتوى مخططات الخدمة Angular الأصلية الموجودة في node_modules / @ schematics / angular / service في src / my-custom-service لدينا.

سيتم كسر الواردات النسبية في index.ts ، لذا يتعين علينا استبدالها بالواردات المطلقة عن طريق استبدال .. / بـ @ schematics / angular /. يجب أن يتوقف برنامج التحويل البرمجي لـ Typescript عن الشكوى ، ويجب أن يكون من الممكن إجراء الاختبارات بنجاح باستخدام npm t.

لننظر إلى محتوى دليل الملفات. أنه يحتوي على بعض الدلائل والملفات ذات المظهر المضحك بأسماء مثل __name@dasherize__.service.ts والتي تُستخدم لتمكين قدرات المخططات.

في مثالنا ، يمثل __name__ رمزًا مميزًا سيحل محله اسم الخدمة المتوفر في ng. قم بإنشاء أمر خدمة اسم الخدمة الخاصة بي ويعد dasherize واحدًا من وظائف المساعد المقدمة والتي تقوم بإخراج أسماء ملفات موحدة لتحويل camelCase إلى أسماء ملفات منفصلة عن شرطة .

وبالمثل ، يحتوي الملف نفسه على قالب لملف الخدمة الذي سيتم إنشاؤه بواسطة Angular CLI ...

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

يمكن إنشاء هذه الخدمة باستخدام قالب مثل هذا ...

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

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

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

لتحقيق ذلك ، يتعين علينا إضافة خاصية واجهة جديدة في ملفات schema.json و schema.d.ts ...

schema.jsonschema.d.ts
تتمثل الطريقة الأكثر قابلية للتوسعة في إنشاء ملف schema.d.ts بمساعدة مكتبة المرافق ، ولكن في حالتنا يبدو أن التحرير اليدوي بسيط ومباشر بدرجة كافية

جيد ، نحن الآن قادرون على استخدام علامة واجهة - دون أي شكاوى من Angular CLI ولكن الخدمة التي تم إنشاؤها تنتهي في كلتا الحالتين. في الخطوة الأخيرة ، يتعين علينا ضبط قالب الخدمة للاستفادة من علمنا الجديد ...

كما نرى ، يدعم templating تقييم العبارات الشرطية مع <٪ = if (variableName)٪> محتوى <٪ =}٪> وعبارات متداخلة. هذه القدرات قوية جدًا وتمكننا من إنشاء قوالب معقدة عشوائية.

رائع! التخطيطي لدينا يولد خدمة مفيدة. الآن هو الوقت المناسب لاستخدامه في مشروع حقيقي ...

كيفية اختبار الخطط مع المشاريع الحقيقية الزاوي CLI

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

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

بعد ذلك ، يمكننا الانتقال إلى مشروعنا المستهدف وتشغيل رابط npm الخاص بنا. بعد النجاح في الربط ، يمكننا تنفيذ ng g schematics-name -c-group-name لدينا لمعرفة ما إذا كان ينشئ ملفات ذات محتوى متوقع في المسار المتوقع.

اتبعني على Twitter للحصول على إشعار بأحدث منشورات المدونة وأشياء الواجهة الأمامية المثيرة للاهتمام

كيفية نشر مجموعة الخطط المخصصة ل npm

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

أنه يحتوي على بناء npm النصي الذي يجمع فقط مصادر Typescript في المكان. ادمج ذلك مع ملف .gitignore الافتراضي الذي يستثني ملفات جافا سكريبت المترجمة ، وحصلنا على خطأ "الوحدة النمطية غير موجود" عندما نقوم بتثبيت ومحاولة استخدام المجموعة التي تم نشرها فقط مع نشر npm دون أي تغيير.

إن أبسط طريقة لإنجاز هذا العمل هي إزالة القاعدة التي تتجاهل ملف .js الذي تم إنشاؤه من .gitignore بحيث يتم نشرها مع مصادر Typescript.

كن على دراية بوجود حلول أكثر أناقة مع تجميع مصادر Typescript في مجلد dist ونشر ذلك تمامًا ولكن مهلا ، هذه مجرد أداة تطوير وتعمل بشكل جيد بحيث تكون جيدة بما يكفي!

كيفية استخدام مجموعة الخطط الجديدة المخصصة في مشاريع أخرى

هذا الإصدار للأمام بشكل مباشر ، نقوم فقط بتثبيت المجموعة المنشورة حديثًا كما نفعل مع أي حزمة npm أخرى مع npm i -D-group-name.

ثم يمكننا تشغيل نانوغرام توليد اسم الخطط - اسم مجموعة لدينا. يمكن اختصار هذا إلى ng g schematics-name -c-our-collection-name وهو أسهل بكثير في الكتابة.

تذكر أن مجموعة واحدة يمكن أن تحتوي على أكثر من تخطيطي مفيد ...

مثال على مجموعة الخطط المخصصة

أحد الأسباب التي جعلتني مهتمًا بعلوم الرياضيات الزاويّة هو أنني كتبت مكتبة صغيرة لإدارة الولاية لـ Angular تسمى ngx-model.

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

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

تتناسب الرياضيات مع هذا السيناريو بشكل أفضل لأنهم يستفيدون من مدير الحزم الذي يستخدمه كل مطور للواجهة الأمامية المهتمين بنا. npm i -D @ angular-extensions / schematics و ng g model my-model -c @ angular-extensions / الخطط تكفي للحصول على الكرة المتداول.

أفكار حول ما يمكن أن تولد مع الخطط لدينا

تقوم مخططات طراز ngx بإنشاء ملفات اختبار وملفات مقابلة. أنها تحتوي على boilerplate اللازمة وطريقة مثال إضافي مع اختبار المقابلة.

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

تمتلك الرياضيات التي تولد نماذج مرجعية وأمثلة للاستخدام إمكانية هائلة لتقصير منحنى التعلم للمطورين الجدد الذين ينضمون إلى أي مشروع موجود

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

هذا كل شئ حتى الان!

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

من فضلك ، ساعد في نشر هذه النصائح على جمهور أوسع من خلال your والترويج للامتدادات الزائدة @ / الخطط مع GitHub إذا كنت مستخدمًا على طراز ngx ، فلا تنس إنشاء مخططاتك الخاصة واستمتع بوقتك. !

أيضا ، لا تتردد في التحقق من بعض المشاركات الزاوي أخرى مثيرة للاهتمام ...

و لا تنسى أبدا ، المستقبل مشرق
من الواضح المستقبل المشرق (Space بواسطة SpaceX)