آموزش ایجاد پروژه در آنگولار و ASP.Net Core
ایجاد اولین پروژه با ASP.Net Core 2 (بخش چهارم)
آموزش ایجاد پروژه در آنگولار و ASP.Net Core (بخش پنجم)
باسلام. در بخش قبل آموزش آنگولار و asp.net core ما به شما ساخت اولین پروژه را در ویژوال استودیو را در مجموعه ABLY یاد دادیم. حال در این بخش از آموزش ایجاد اولین پروژه با ASP.Net Core 2 می خواهیم راجع به پروژه و فایل های مربوطه صحبت کنیم.
ایجاد اولین پروژه با ASP.Net Core 2 (بخش چهارم)
آموزش ایجاد پروژه در Angualr و ASP.Net Core (بخش پنجم)
باسلام. در بخش قبل آموزش آنگولار و asp.net core ما به شما ساخت اولین پروژه را در ویژوال استودیو را در مجموعه ABLY یاد دادیم. حال در این بخش از آموزش ایجاد اولین پروژه با ASP.Net Core 2 می خواهیم راجع به پروژه و فایل های مربوطه صحبت کنیم.
برای درک بهتر، به فایل program.cs در ASP.NET Core 1.0 نگاهی میاندازیم :
public class Program
{
public static void Main(string[] args)
{
var host = new WebHostBuilder()
.UseKestrel()
.UseContentRoot(Directory.GetCurrentDirectory())
.UseIISIntegration()
.UseStartup<Startup>()
.UseApplicationInsights()
.Build();
host.Run();
}
}
این فایل برای موارد زیر در نظر گرفته شده بود:
1) نصب و راه اندازی وب سرور Kestrel
2) آماده سازی فولدر Content، در این فولدر فایل های پیکره بندی و فایل appsetting.json قرار گرفته است.
3) یکپارچه سازی IIS
4) معرفی کلاس Startup.cs (این کلاس در فایل Startup.cs تعریف شده است.)
5) و در آخر، ساخت و اجرای IWebHost
در NET Core 1.0. همه مراحل گفته شده میبایست در کلاس program.cs تعریف شده و بصورت دستی در فایل Startup.cs پیکره بندی شود. در NET Core 2.0. نیز میتوانیم همین مراحل را تکرار کنیم، با استفاده از متد ()WebHost.CreateDefaultBuilder میتوان هر زمان نیاز به تغییرات بود، مقادیر پیش فرض را براحتی تغییر داد.
اگر علاقمند به مطالعه بیشتر در مورد کلاس WebHost.cs میباشید میتوانید از لینک زیر استفاده کنید:
https://github.com/aspnet/MetaPackages/blob/rel/2.0.0/src/Microsoft.AspNetCore/WebHost.cs
آموزش ایجاد پروژه در آنگولار و ASP.Net Core
فایل Startup.cs
اجازه دهید نگاهی به فایل Startup.cs بیاندازیم. اگر شما برنامه نویس NET. هستید حتما با این فایل آشنایی دارید، این فایل جایگزین فایل Global.asax برای انجام کارهای قبلی شده است. فایل Startup.cs برای اولین بار در اپلیکشن های بر پایه Owin معرفی گردید. OWIN مخفف عبارت (Open Web Interface for .NET) بوده و قسمتی از پروژه Katana میباشد. پروژه Katana مجموعه ای از کامپوننتها بود که در سال 2013 توسط مایکروسافت برای ساخت و میزبانی از وب اپلیکشن های بر پایه OWIN معرفی گردید. برای اطلاعات بیشتر در مورد آن میتوانید به لینک زیر مراجعه کنید:
https://www.asp.net/aspnet/overview/owin-and-katana
فایل Global.asax بصورت کامل بازنویسی شد، این فایل بسیار سبک گردید، این بدین معنیست که این فایل فقط شامل موارد لازم و ضروری برای راه اندازی وب اپلیکشن میباشد. بصورت ویژه فایل Startup.cs محلی است که عملیاتهای زیر در آن انجام میگیرد:
1) در این فایل سرویس ها اضافه و پیکره بندی میشوند. عملیات تزریق وابستگی نیز در این فایل انجام میگیرد.
2) در این فایل، در متد Configure میتوان با اضافه کردن پکیجهای Middleware مربوطه، درخواست های HTTP را پیکره بندی نمود.
برای درک بهتر آنچه گفته شد اجازه دهید به خطوط زیر در فایل Startup.cs نگاهی بیندازیم:
// This method gets called by the runtime. Use this method to configure the
HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true
});
}
else
{
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
routes.MapSpaFallbackRoute(
name: "spa-fallback",
defaults: new { controller = "Home", action = "Index" });
});
}
پیاده سازی متد Configure را در بالا میبینید. کد بالا خوانایی بالایی دارد، براحتی میتوانیم هرآنچه در آن اتفاق میافتد را ببینیم:
خطوط اولیه شامل عبارت شرطی if-then-else میباشد که برای مدیریت Exception ها بکار میرود. در هنگام بروز خطای زمان اجرا، با نشان دادن یک صفحه به کاربر بروز خطا اطلاع داده میشود. این بهترین و ساده ترین روش برای نشان دادن خطاهای زمان اجرای برنامه است.
با استفاده از ()app.UseStaticFiles میتوانیم فایل های موجود در پوشه wwwroot مانند فایل های JS، CSS و تصاویر را فراخوانی کنیم. بصورت پیش فرض اپلیکشن های ASP.NET Core فایلهای استاتیک را فراخوانی نمیکنند. بنابراین با کمک متد بالا در فایل Startup.cs میتوان این مشکل را حل نمود.
در مورد فایل ()app.UseMvc بصورت مفصل در بخش های بعدی صحبت خواهیم کرد.(در بخش Backend with .NET Core ). بطور خلاصه میتوان گفت در این متد قوانین مربوط به مسیریابی در وب اپلیکشن قرار دارد. همانطور که میبینید بصورت پیش فرض عملیات روتینگ برای کنترلر Home و اکشن متد Index آورده شده است. یعنی برای اولین بار در هنگام اجرای برنامه اکشن متد Index در کنترلر Home فراخوانی میشود.
تصمیم داریم با انجام یک تست نحوه کارکرد Middleware ها را بهتر متوجه شویم. از طریق پنجره Solution Explorer به پوشه wwwroot رفته و یک فایل جدید به نام test.html را به آن اضافه کنید. پس از انجام کار محتویات زیر را به آن اضافه کنید:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Time for a test!</title>
</head>
<body>
Hello there!
<br /><br />
This is a test to see if the StaticFiles middleware is working
properly.
</body>
</html>
در حالت Debug برنامه را اجرا میکنیم، میتوان توسط دکمه Run یا کلید F5 این کار را نیز انجام داد. آدرسی بصورت زیر در Address Bar نشان داده میشود:
http://localhost:<port>/test.html
بعد از اجرای برنامه خروجی بشکل زیر نشان داده میشود:
سپس به فایل Startup.cs رفته و ()app.UseStaticFiles را کامنت کنید تا از بارگذاری این خط جلوگیری بعمل آید.
()app.UseStaticFiles//
بعد از کامنت این خط برنامه را اجرا کنید، برنامه اجرا شده و صفحه زیر را نشان میدهد:
همانطور که انتظار میرفت فایل های استاتیک فراخوانی نگردید. برای مطالعه بیشتر در مورد فایل های استاتیک و StaticFiles Middleware در .NET Core به لینک زیر مراجعه فرمائید:
https://docs.asp.net/en/latest/fundamentals/static-files.html
اجازه دهید به بخش دیگری از کد داخل عبارت شرطی if-then-else بپردازیم. منظورمان متد ()UseWebpackDevMiddleware میباشد که در آن عبارت HotModuleReplacement برابر با true مقداردهی شده است. این یکی از ویژگیهای مهمی است که در پکیج Microsoft.AspNetCore.SpaService آمده است و برای کسانی که Webpack استفاده میکنند مناسب میباشد. در ادامه در مورد آن صحبت خواهیم کرد. اکنون وقت مناسبی است که نگاهی به فایل های json بیاندازیم. هر کدام از اینها فایل های مربوط به پیکره بندی میباشند.
فایل appsettings.json
این فایل جایگزین فایل Web.Config شده است. فایل Web.Config دارای فرمت XML بود ولی فایل appsettings.json دارای ساختار json بوده که نسبت به فایلهای XML کوچکتر و خواناتر میباشند. فایل پیکره بندی جدید دارای ساختار key/value میباشد که میتواند از منابع مختلفی فراخوانی شود.
زمانی که بخواهیم اینگونه فایل ها را فراخوانی کنیم، توسط تزریق وابستگی میتوان به آنها دسترسی داشت به صورت زیر:
public SampleController(IConfiguration configuration)
{
var myValue = configuration["Logging:IncludeScopes"];
}
شایان ذکر است که یک فایل دیگر به نام appsettings.Development.json بصورت تو در تو در زیر فایل appsettings.json قرار دارد. این فایل همانند فایل Web.Debug.Config در ASP.NET 4.0 بوده و همان وظایف را بر عهده دارد.
در ادامه فایل Package.json را مورد بررسی قرار میدهیم.
فایل package.json
این فایل یک فایل پیکره بندی NPM میباشد. این فایل شامل لیستی از پکیج های NPM میباشد که برنامه نویس میبایست قبل از اجرای پروژه آنها را بارگذاری کند. NPM مخفف Node Package Manager میباشد که بعنوان مدیریت پکیج برای محیط های جاوااسکریپت مانند Node.JS معرفی گردید. در سالهای اخیر بعنوان مدیریت بسته در فریم ورکها و ابزارهای جاوا اسکریپت مورد استفاده قرار گرفته است. میتوانید از نظر عملکرد آن را شبیه Nuget برای دنیای جاوااسکریپت در نظر بگیرید.
گرچه NPM ابزاری خط فرمانی است اما آسانترین روش برای استفاده از آن در ویژوال استودیو پیکره بندی صحیح فایل package.json میباشد. همانطور که گفته شد این فایل دربردارنده پکیج های NPM میباشد. این پکیج ها بلافاصله پس از دانلود در پوشه node_modules قرار میگیرند. این پوشه بصورت پیش فرض در ویژوال استودیو مخفی میباشد. به هر حال تمام پکیج های دریافت شده در مسیر /Dependencies/npm قابل مشاهده است. بزودی عملیات حذف، اضافه و ویرایش را بر روی فایل package.json انجام خواهیم داد. در قالب پروژه آنگولار نیز فایلی به نام package.json وجود دارد، اگر آنرا باز کنیدتعداد زیادی از پکیج مشاهده میکنید. در این فایل همه پکیج های آنگولار، ابزارها و ابزاری به نام Karma مشاهده میکنید. ابزار Karma ابزاریست که جهت تست جاوااسکریپت و تایپ اسکریپت بکار میرود). همانطور که در این فایلها مشاهده میکنید همه پکیج ها بصورت ساختار استاندارد json معرفی شده اند. معرفی آنها بصورت key/value بوده بصورتی که key نام پکیج و value بیانگر نسخه مورد استفاده از آن پکیج میباشد. جهت سفارشی سازی بخش value میتوان از قوانین مربوط به npmJS استفاده کرد. جهت مطالعه بیشتر در مورد این قوانین و نحوه استفاده به لینک زیر مراجعه کنید :
https://docs.npmjs.com/files/package.json
نحوه Upgrade یا Downgrade آنگولار
همانطور که مشاهده میکنید، قالب پروژه آنگولار از شماره نسخه های یکسانی استفاده میکند.(شماره ورژن همه پکیج ها برابر میباشد). این انتخاب باعث میشود که کدهای ما با نسخه های جدیدتر پکیج ها تداخلی نداشته باشد و با خطای زمان اجرا و خطاهای کامپایلر مواجه نشویم. پکیج های مورد استفاده در زمان نوشتن این مقاله بصورت زیر میباشد:
"@angular/animations": "5.0.2",
"@angular/common": "5.0.2",
"@angular/compiler": "5.0.2",
"@angular/compiler-cli": "5.0.2",
"@angular/core": "5.0.2",
"@angular/forms": "5.0.2",
"@angular/http": "5.0.2",
"@angular/platform-browser": "5.0.2",
"@angular/platform-browser-dynamic": "5.0.2",
"@angular/platform-server": "5.0.2",
"@angular/router": "5.0.2"
همانطور که مشاهده میکنید شماره نسخه برای همه پکیج ها یکسان میباشد.
نسخه نهایی آنگولار 5 به نام Pentagonal Donut در یکم نوامبر سال 2017 معرفی گردیده است. برای اینکه خواننده مقاله تجربه بهتری کسب کند در طول آموزش از آخرین نسخه نهایی آنگولار 5 استفاده خواهیم کرد. براحتی میتوانیم با تغییر شماره نسخه پکیج نسبت به Upgrade یا Downgrade کردن پکیج اقدام کنیم. بلافاصله پس از تغییر، ویژوال استودیو بصورت اتوماتیک تغییر را اعمال میکند.
Upgrade یا Downgrade دیگر پکیج ها
همانطور که انتظار میرود، در صورت Upgrade یا Downgrade آنگولار به نسخه 5.0 میبایست برخی از پکیج های موجود را Upgrade یا Downgrade نمائیم. در زیر تمام پکیج هایی که در فایل package.json مورد استفاده قرار داده ایم را مشاهده میکنید. پکیج هایی که حتما در طول آموزش مورد استفاده قرار گرفته اند بصورت هایلایت مشخص گردیده اند.
{
“name”: “TestMakerFree”,
“private”: true,
“version”: “0.0.0”,
“scripts”: {
“test”: “karma start ClientApp/test/karma.conf.js”
},
“dependencies”: {
“@angular/animations”: “5.0.2”,
“@angular/common”: “5.0.2”,
“@angular/compiler”: “5.0.2”,
“@angular/compiler-cli”: “5.0.2”,
“@angular/core”: “5.0.2”,
“@angular/forms”: “5.0.2”,
“@angular/http”: “5.0.2”,
“@angular/platform-browser”: “5.0.2”,
“@angular/platform-browser-dynamic”: “5.0.2”,
“@angular/platform-server”: “5.0.2”,
“@angular/router”: “5.0.2”,
“@ngtools/webpack”: “1.8.2”,
“@types/webpack-env”: “1.13.2”,
“angular2-template-loader”: “0.6.2”,
“aspnet-prerendering”: “3.0.1”,
“aspnet-webpack”: “2.0.1”,
“awesome-typescript-loader”: “3.4.0”,
“bootstrap”: “3.3.7”,
“css”: “2.2.1”,
“css-loader”: “0.28.7”,
“es6-shim”: “0.35.3”,
“event-source-polyfill”: “0.0.9”,
“expose-loader”: “0.7.3”,
“extract-text-webpack-plugin”: “2.1.2”,
“file-loader”: “1.1.5”,
“html-loader”: “0.5.1”,
“isomorphic-fetch”: “2.2.1”,
“jquery”: “3.2.1”,
“json-loader”: “0.5.7”,
“preboot”: “5.1.7”,
“raw-loader”: “0.5.1”,
“reflect-metadata”: “0.1.10”,
“rxjs”: “5.5.2”,
“style-loader”: “0.19.0”,
“to-string-loader”: “1.1.5”,
“es6-shim”: “0.35.3”,
“typescript”: “2.4.2”,
“url-loader”: “0.6.2”,
“webpack”: “2.6.1”,
“webpack-hot-middleware”: “2.20.0”,
“webpack-merge”: “4.1.1”,
“zone.js”: “0.8.12”
},
“devDependencies”: {
“@types/chai”: “4.0.1”,
“@types/jasmine”: “2.5.53”,
“chai”: “4.0.2”,
“jasmine-core”: “2.6.4”,
“karma”: “1.7.0”,
“karma-chai”: “0.1.0”,
“karma-chrome-launcher”: “2.2.0”,
“karma-cli”: “1.0.1”,
“karma-jasmine”: “1.1.0”,
“karma-webpack”: “2.0.3”
}
}
نکته: توصیه میگردد بعد از اعمال تغییرات بالا در فایل package.json با استفاده از خط فرمان و دستور npm update نسبت به آپدیت پکیج های NPM اقدام کنید. بعضی مواقع ویژوال استودیو بصورت اتوماتیک تغییرات را اعمال نمیکند، ولی با استفاده از روش گفته شده میتوان مطمئن شد که تغییرات اعمال میگردند.
در بخش بعد آموزش ایجاد پروژه در Angualr و ASP.Net Core فایل tsconfig.json را مورد بررسی قرار خواهیم داد.
منبع مورداستفاده:
ASP.NET.Core.2.and.Angular.5.Full-Stack.Web.Development.with..NET.Core.and.Angular
"تهیه شده در سایت و مجموعه ABLY"