آموزش برنامه نویسی Angular و ASP.NET Core (بخش ششم)

• آموزش ایجاد پروژه در Angualr و ASP.Net Core (بخش پنجم)

باسلام. در بخش های قبل آموزش آنگولار و asp.net core ما به شما ساخت اولین پروژه را در ویژوال استودیو را در مجموعه ABLY یاد دادیم. در بخش قبل آموزش ایجاد اولین پروژه با ASP.Net Core 2  راجع به پروژه و فایل های مربوطه صحبت کردیم و حال تصمیم داریم ادامه آنرا به شما عزیزان توضیح دهیم.

آموزش برنامه نویسی Angular و ASP.NET Core (بخش ششم)

• آموزش ایجاد پروژه در Angualr و ASP.Net Core (بخش پنجم)

باسلام. در بخش های قبل آموزش آنگولار و asp.net core ما به شما ساخت اولین پروژه را در ویژوال استودیو را در مجموعه ABLY یاد دادیم. در بخش قبل آموزش ایجاد اولین پروژه با ASP.Net Core 2  راجع به پروژه و فایل های مربوطه صحبت کردیم و حال تصمیم داریم ادامه آنرا به شما عزیزان توضیح دهیم.

فایل tsconfig.json

نوع فایل tsconfig.json از نوع فایل TypeScript میباشد. کسانی که در مورد فایل تایپ اسکریپت اطلاعاتی دارند نیاز ندارند در مورد آن مطالعه کنند در غیراینصورت میبایست ادامه مقاله را مطالعه کنید. تایپ اسکریپت یک زبان برنامه نویسی رایگان و متن باز میباشد که توسط مایکروسافت توسعه داده شده و نگهداری میشود. کدهای تایپ اسکریپت به جاوا اسکریپت کامپایل میشود، بنابراین کدهای تایپ اسکریپت در هر مرورگری که با جاوااسکریپت سازگار باشد میتواند اجرا شود. دلیل استفاده از تایپ اسکریپت، فائق آمدن بر محدودیتها و کمبودهای موجود در زبان جاوااسکریپت بود، به عبارت دیگر ساده تر کردن کدنویسی برای برنامه نویس نسبت به جاوا اسکریپت دلیل پیدایش تایپ اسکریپت بود.
در این پروژه ما بصورت ویژه از تایپ اسکریپت استفاده میکنیم، چند دلیل برای استفاده از آن در زیر آمده است :
1)تایپ اسکریپت ویژگیهای زیادی نسبت به جاوااسکریپت دارد مانند دارا بودن static types، classes و interface ها. استفاده از آن در ویژوال استودیو به ما این امکان را میدهد تا از قابلیت IntelliSense آن استفاده کنیم.
2)برای یک پروژه بزرگ سمت کلاینت، تایپ اسکریپت به ما این امکان را میدهد تا کدهایی با قابلیت توسعه بنویسیم. در حالیکه استفاده از جاوااسکریپت در پروژه های بزرگ بسیار رنج آور میباشد.
همانطور که مطلع هستید پروژه آنگولار که قرار است آنرا کدنویسی کنیم از تایپ اسکریپت استفاده میکند. این تنها ما نیستیم که از تایپ اسکریپت تعریف میکنیم، در لینک زیر میتوانید مقاله ای در مورد یکپارچه شدن آنگولار با تایپ اسکریپت را مطالعه نمایید:

https://blogs.msdn.microsoft.com/typescript/2015/03/05/angular-2-built-on-types

همچنین در این زمینه میتوانید مقاله ای از ویکتور ساوکین را مطالعه نمایید :

https://vsavkin.com/writing-angular-2-in-typescript-1fa77c78d8e8

نگاهی به فایل tsconfig.json می اندازیم، محتویات این فایل میتواند مثل شکل زیر باشد:

{
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipDefaultLibCheck": true,
"skipLibCheck": true,
"strict": true,
"lib": [ "es6", "dom" ],
"types": [ "webpack-env" ]
},
"exclude": [ "bin", "node_modules" ],
"atom": { "rewriteTsconfig": false },
"angularCompilerOptions": {
"strictMetadataEmit": true
}
}

قسمت جالب کد بالا، بخش angularCompilerOptions میباشد. این کد میتواند جهت پیکره بندی کامپایلر آنگولار مورد استفاده قرار گیرد.تنظیمات بخش strictMetadataEmit به کامپایلر میگوید خطاهای موجود را بجای ذخیره در Log File سریعا گزارش دهد. برای اطلاعات بیشتر در مورد کامپایلر Angular AoT میتوانید به لینک زیر مراجعه کنید:

https://angular.io/guide/aot-compiler

فایل های پیکره بندی Webpack 

کم و بیش میبایست در مورد فایل webpack.config.js و webpack.config.vendor.js چند کلمه ای صحبت کنیم. این فایل ها بیشترین نقش را در کامپوننتهای سمت کلاینت پروژه برعهده دارند. Webpack مهمترین ماژولی میباشد که امروزه در برنامه های جاوااسکریپتی بکار میرود. وظیفه اصلی آن ایجاد و ساخت گراف وابستگی بین پکیج های NPM مورد استفاده در سمت کلاینت قبل از اجرا شدن برنامه میباشد. تمام پکیج ها در عملیاتی به نام bundling یکپارچه شده و در اختیار کلاینت قرار میگیرند. این کار مزایای زیر را دارد:

1)باعث کاهش درخواست های HTTP جهت بارگذاری برنامه میشود.
2)باعث افزایش کنترل بر روی فایل های استاتیک میشود. مانند بهینه کردن سایز فایل های css، نادیده گرفته شدن فایل های css و js ناموجود و سوئیچ کردن بین لینک های CDN و فایل هایی که بصورت لوکال بر روی سیستم موجود میباشند از ویژگیهای استفاده از webpack میباشد.

با پیکره بندی صحیح webpack همه ویژگیهای گفته شده در بالا قابل انجام هستند. تنها خبر بدی که ممکن است برای ما غافلگیرکننده باشد این است که پیکره بندی Webpack برای افراد مبتدی سخت میباشد، چون خواندن فایل پیکره بندی آن سخت و در لحظاتی میتواند گیج کننده باشد.
در پروژه آنگولاری که برروی آن کار خواهیم کرد دو فایل پیکره بندی وجود دارد: webpack.config.js و webpack.config.vendor.js
از فایل اولی جهت یکپارچه سازی کدهای اپلیکشن استفاده میگردد و از دومی جهت یکپارچه سازی وابستگی های مورد نیاز اسفاده میشود. اگر این دو فایل را باز کنیم، سه آبجکت را در آنها میبینیم:

1)شی ء sharedConfig که در یکپارچه سازی کدها هم درسمت کلاینت و هم در سمت سرور بکار میرود.
2)شیء clientBudleObject که جهت یکپارچه شدن با کدهای سمت کلاینت و اجرا شدن در مرورگر کاربرها بکار میرود.
3)شیء serverbundleConfig که جهت یکپارچه شدن با کدهای سمت سرور بکار میرود.

اگر علاقمند به مطالعه در مورد Webpack میباشید میتوانید از لینک رسمی زیر اطلاعات مناسبی را کسب نمایید:

https://webpack.js.org/

همچنین در نسخه Webpack 2.x یک سیستم اعتبارسنج جهت پیگیری خطاهای موجود اضافه گردیده است. این قابلیت برای آپدیت کردن فایل های پیکره بندی نیز کاربرد زیادی دارد. جهت مطالعه مقاله در مورد پیکره بندی صحیح Webpack برای آنگولار میتوانید به لینک زیر مراجعه کنید :

https://angular.io/docs/ts/latest/guide/webpack.html

بروزرسانی فایل webpack.config.js 

بعد از مهاجرت به Angular5 نیاز است فایل webpack.config.js بصورت دستی بروزرسانی شود. فایل webpack.config.js را در ویرایشگر ویژوال استودیو باز کنید و خط چهارم را بصورت زیر بروزرسانی کنید:

const AotPlugin = require('@ngtools/webpack').AngularCompilerPlugin;

بعد از آن، به پایین فایل رفته و خط sharedConfig:module:rules را یافته و عبارت test: /\.ts$/ را بصورت زیر جایگزین کنید.

[...]
module: {
rules: [
{ test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, [...]
[...]

رفع باگ از فایل webpack.config.vendor.js 

قبل از انجام هر کاری دیگری نیاز است باگی را از فایل webpack.config.vendor.js رفع کنیم. وجود این باگ باعث میشود که از عملکرد صحیح Angular5 جلوگیری بعمل آید. فایل را باز کنید و کدهای زیر را به sharedConfig.plugin اضافه کنید.

[...]
plugins: [
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps
these identifiers to the jQuery package (because Bootstrap expects it to be
a global variable)
new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/,
path.join(__dirname, './ClientApp')), // Workaround for
https://github.com/angular/angular/issues/11580
new
webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/,
path.join(__dirname, './ClientApp')), // Workaround for
https://github.com/angular/angular/issues/14898
new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/,
path.join(__dirname, './ClientApp')), // Workaround for
https://github.com/angular/angular/issues/20357
new webpack.IgnorePlugin(/^vertx$/) // Workaround for
https://github.com/stefanpenner/es6-promise/issues/100
]
[...]

جهت اطلاعات بیشتر در مورد این باگ و رفع آن به لینک گیت هاب در زیر مراجعه کنید:

 https://github.com/angular/angular/issues/20357

چرا از webpack استفاده میکنیم؟

به زبان ساده علت استفاده از webpack این است که استفاده از آن موثرترین روش برای بهینه سازی سیستم های ماژولار مانند Angular و RxJs و هر اپلیکشنی که بر پایه جاوااسکریپت باشد را ارائه میدهد. اما سوالی که در اینجا پیش میآید این است که سیستم ماژولار چیست؟ هر پکیج، کتابخانه یا برنامه ای که به فایلها و قسمت های کوچکتر قابل تقسیم شدن باشد، بطوریکه این بخش ها یا فایل ها به یکدیگر وابسته هستند و با کلمات کلیدی مثل import و required میتوانند در هنگام نیاز همدیگر را فراخوانی نموده و از قابلیتهای هم استفاده کنند.ASP.NET ، Java و Python از این نمونه زبانهای برنامه نویسی هستند. این زبانها شبیه زبانهای برنامه نویسی اسکریپتی مانند PHP و JavaScript نیستند.Webpack میتواند فایل های JS/CSS مرتبط به هم را یکپارچه کرده و از این فایلها در سیستم های ماژولار استفاده کند .ما در مقایسه با SystemJS از Webpack استفاده میکنیم زیرا Webpack قابلیت انعطاف بالاتری نسبت به SystemJS دارد. Webpack بهترین روش جهت یکپارچه سازی اپلیکشن ها را ارائه میکند. Webpack از  بیشترین پشتیبانی در .Net Core 2.0 برخوردار است. برای اینکه webpack را مجبور کنیم تا تغییرات قبلی را در فایل پیکربندی مجددا کامپایل کند (کدهایی که برای رفع باگ موجود به فایل webpack.config.vendor.js اضافه کرده بودیم) دستور زیر را در خط فرمان و در ریشه پروژه وارد میکنیم:

node node_modules/webpack/bin/webpack.js --config  webpack.config.vendor.js>

بعنوان پیشنهاد میتوان جهت اعمال کامپایل دوباره، پوشه dist را از مسیر /wwwroot/dist/ حذف نمود. توصیه میگردد هر زمان فایل هایی مثل package.json بروزرسانی شد، بصورت دستی دستور npm update را در خط فرمان اجرا کنید تا فایل webpack.config.js دوباره کامپایل شود.

کدهای سمت سرور

در این بخش قصد داریم نگاهی به کدهای سمت سرور بیاندازیم. در این بخش درباره محتویات پوشه /Controllers/ و /Views/ صحبت خواهیم کرد.

فایل HomeController.cs 

این فایل در پوشه controllers قرار دارد. اگر محتویات فایل startup.cs را به یاد داشته باشید، تمام درخواستهای وب به controller منتهی میشود، در واقع مسئول دریافت و پردازش درخواستهای وب controller  میباشد. به عبارت دیگر HomeContoller به درخواستهایی که از صفحه SPA آنگولار صادر میشود رسیدگی کرده و View های مربوطه را بازمیگرداند.

فایل SampleDataController.cs 

کنترلر Home نمونه ای استاندارد از کنترلرهای MVC میباشد که View های مرتبط با کنترلر را بازمیگرداند، برعکس فایل SampleDataController.cs تنها فایلی است که داده ها را بصورت json بازمیگرداند. این ویژگی باعث میشود که این فایل بسیار به فایل های از نوع APIController شبیه باشد. در MVC6 هر دوی این فایل ها یکی شده اند و تفاوتی با یکدیگر ندارند. بزودی در مقاله های بعدی در مورد Backend .Net Core مطالبی را خواهیم آموخت. اپلیکشن را در حالت Debug با زدن دکمه F5 اجرا کنید و در قسمت آدرس URL بجای عبارت /home عبارت /api/SampleData/WeatherForecasts قرار دهید. URL نهایی شبیه لینک زیر خواهد بود:

http://localhost:<port>/api/SampleData/WeatherForecasts

بعد از اجرای لینک بالا صفحه ای شبیه به تصویر زیر در خروجی نمایان خواهد شد:

داده های بالا بصورت json از سمت سرور ارسال گردیده اند. دوباره به صفحه Home برگردید تا View آن نمایش داده شود. سپس از منوی سمت چپ بر روی Fetch data کلیک کنید تا دوباره داده های قبلی فراخوانی شود.تصویر زیر نشان دهنده عملیات انجام شده میباشد:

داده های نمایش داده شده همان داده هایی هستند که در بخش قبلی از طریق URL فراخوانی گردیدند، ولی اینبار از طریق پروژه SPA در آنگولار نمایش داده شده اند.تمام عناصر GUI، لینک منوها، عناوین صفحه، کدهای HTML، استایل های CSS و غیره در پوشه /ClientApp/ میباشند.کدهای سمت سرور داده های مورد نیاز جهت نمایش را فراهم کرده و به سمت کلاینت میفرستند.در بخش بعدی مقاله پوشه /Views/  را مورد بررسی قرار میدهیم.

منبع مورداستفاده: 

ASP.NET.Core.2.and.Angular.5.Full-Stack.Web.Development.with..NET.Core.and.Angular

" تهیه شده در مجموعه و سایت ABLY "