Schematics in ANGULAR
Schematics in ANGULAR
جدول المصطلحات
مقدمة: ما هي Schematics؟
تُعد Schematics (أو قوالب التوليد) واحدة من أقوى أدوات Angular لتوليد الكود تلقائياً. تتيح لك إنشاء:
مكونات (Components)
خدمات (Services)
وحدات (Modules)
واجهات (Interfaces)
وغيرها...
الفوائد الرئيسية:
أتمتة المهام المتكررة: توفير الوقت والجهد
توحيد البنية: ضمان كتابة الكود ضمن هيكل موحد
تقليل الأخطاء: تقليل نسبة الأخطاء البشرية
التزام بمعايير الفريق: تطبيق نفس القوالب عبر جميع أعضاء الفريق
الإعداد والتهيئة
تثبيت الأدوات المطلوبة
bash
npm install -g @angular-devkit/schematics-cli
إنشاء مشروع Schematics جديد
لإنشاء schematic منفصل (مستقل عن مشروع Angular):
bash
mkdir my-schematics-project
cd my-schematics-project
schematics blank --name=my-schematic
هيكلية مجلد الـ Schematic
text
my-schematics-project/
├── src/
│ └── my-schematic/
│ ├── files/
│ ├── index.ts
│ ├── index_spec.ts
│ └── schema.json
├── collection.json
├── package.json
└── tsconfig.json
ملفات التهيئة الرئيسية
ملف collection.json
يحتوي على تعريفات جميع الـ schematics في المشروع:
json
{
"$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
"schematics": {
"my-schematic": {
"description": "إنشاء مكون Angular جديد",
"factory": "./my-schematic/index#mySchematic",
"schema": "./my-schematic/schema.json"
}
}
}
ملف schema.json
يحدد المعاملات (Parameters) التي يمكن تمريرها للـ schematic:
json
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "my-schematic-schema",
"title": "My Schematic Options",
"type": "object",
"properties": {
"name": {
"type": "string",
"description": "اسم المكون المراد إنشاؤه",
"x-prompt": "ما اسم المكون؟",
"default": "my-component"
},
"path": {
"type": "string",
"description": "مسار إنشاء المكون",
"default": "src/app"
}
},
"required": ["name"]
}
إنشاء القوالب (Templates)
هيكلية مجلد القوالب
text
src/my-schematic/files/
├── __name@dasherize__.component.ts.template
├── __name@dasherize__.component.html.template
└── __name@dasherize__.component.scss.template
مثال لقالب مكون TypeScript
الملف: __name@dasherize__.component.ts.template
typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-<%= dasherize(name) %>',
templateUrl: './<%= dasherize(name) %>.component.html',
styleUrls: ['./<%= dasherize(name) %>.component.scss']
})
export class <%= classify(name) %>Component implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
الدوال المساعدة:
dasherize: تحويل الاسم إلى kebab-case (myComponent → my-component)
classify: تحويل الاسم إلى PascalCase (my-component → MyComponent)
camelize: تحويل الاسم إلى camelCase (my-component → myComponent)
مثال لقالب HTML
html
<div class="<%= dasherize(name) %>-container">
<h2><%= classify(name) %> Component</h2>
<p>تم إنشاء هذا المكون باستخدام Schematic</p>
</div>
تنفيذ المنطق الرئيسي
ملف index.ts الرئيسي
typescript
import {
Rule, SchematicContext, Tree,
apply, url, applyTemplates, move,
chain, mergeWith, normalize
} from '@angular-devkit/schematics';
import { strings } from '@angular-devkit/core';
export interface SchematicOptions {
name: string;
path?: string;
}
export function mySchematic(options: SchematicOptions): Rule {
return (tree: Tree, context: SchematicContext) => {
context.logger.info(`جاري إنشاء ${options.name}...`);
const templateSource = apply(url('./files'), [
applyTemplates({
classify: strings.classify,
dasherize: strings.dasherize,
camelize: strings.camelize,
name: options.name,
path: options.path || 'src/app'
}),
move(normalize(`${options.path || 'src/app'}/${strings.dasherize(options.name)}`))
]);
return chain([mergeWith(templateSource)]);
};
}
اختبار وتشغيل الـ Schematic
البناء والتجربة المحلية
bash
npm run build
schematics .:my-schematic --name=test-component --dry-run=false
استخدام الـ Schematic في مشروع Angular
bash
cd ../my-angular-project
ng generate ./../my-schematics-project/src/collection.json:my-schematic --name=user-profile
الناتج المتوقع
سيتم إنشاء الملفات التالية تلقائياً:
text
src/app/user-profile/
├── user-profile.component.ts
├── user-profile.component.html
└── user-profile.component.scss
حالات استخدام متقدمة
تعديل ملفات موجودة
typescript
export function updateModule(options: any): Rule {
return (tree: Tree, context: SchematicContext) => {
const modulePath = 'src/app/app.module.ts';
if (tree.exists(modulePath)) {
const content = tree.read(modulePath)?.toString() || '';
const importStatement = `import { ${strings.classify(options.name)}Component } from './${strings.dasherize(options.name)}/${strings.dasherize(options.name)}.component';`;
const updatedContent = content.replace(
'imports: [',
`${importStatement}\nimports: [`
);
tree.overwrite(modulePath, updatedContent);
context.logger.info('تم تحديث module بنجاح');
}
return tree;
};
}
أفضل الممارسات
نصائح للتصميم
حافظ على البساطة: ابدأ بمتطلبات أساسية ثم أضف الميزات
قدم قيمة ملموسة: حل مشاكل حقيقية يواجهها الفريق
كن متسقاً: اتبع نفس التسميات والأنماط عبر جميع الـ schematics
نصائح للأداء
استخدم dry-run للاختبار: --dry-run=true لعرض التغييرات دون تطبيقها
تحقق من وجود الملفات: تجنب الكتابة فوق ملفات موجودة
سجل العمليات: استخدم context.logger لتتبع التنفيذ
نصائح للصيانة
اكتب اختبارات: استخدم index_spec.ts لاختبار المنطق
وثّق الاستخدام: أضف أمثلة في ملف README
اعتمد الإصدار: استخدم semantic versioning لإدارة التغييرات
الخاتمة
تعتبر Angular Schematics أداة قوية لتحسين سير عمل التطوير من خلال:
أتمتة المهام الروتينية: توفير ساعات من العمل اليدوي
ضمان الجودة: تطبيق معايير الكود بشكل ثابت
تسريع البدء: تمكين المطورين الجدد من البدء بسرعة
تقليل الأخطاء: القضاء على الأخطاء البشرية الشائعة
ليست هناك تعليقات: