اشتراکها
سلام - من از ویژوال استودیو 2015 استفاده میکنم - همه چیو رعایت کردم همه چی درست کار میکنه اما مشکلی که هست اینکه عکسهای افزونه رو لود نمیکنه - تو برگه InspectElement تب Consol هم پیغام
Failed to load resource: the server responded with a status of 500 (Internal Server Error
رو نشون میده. کلافه شدم نمیدونم مشکل از چیه!
مطالب
معرفی Bit Platform
پلتفرم Bit یک پروژه تماما Open Source در GitHub میباشد که هدف آن تسهیل توسعه نرم افزار با کیفیت و پرفرمنس بالا بر بستر ASP.NET Core و زبان #C است که با آن بتوان فقط با یکبار کدنویسی و با کمک استانداردهای وب همچون HTML / CSS و Web Assembly ، خروجیهایی چون Android / iOS / Windows را با دسترسی کامل به امکانات سیستمعامل به همراه برنامههای تحت وب SPA و PWA (با یا بدون Pre-Rendering) گرفت.
پلتفرم Bit تا به اینجا از دو قسمت Bit Blazor Components (شامل بیش از ۳۰ کمپوننت کاربردی، کم حجم و High Performance مانند Tree / Multi Select / Data Grid / Date Picker / Color Picker و...) به همراه Bit Project Templates (قالب پروژههای حاوی امکانات پر استفاده) تشکیل شده است.
برخی مواردی که در رابطه با آنها صحبت شد، ممکن است برای شما آشنا نباشند، بنابراین قبل از بررسی مفصلتر Bit Platform، نگاهی به آن میاندازیم:
وب اسمبلی چیست؟
برای درک بهتر وب اسمبلی ابتدا باید بدانیم این تکنولوژی اصلا از کجا آمده و هدف آن چیست؟
میدانیم که مرورگرها پروایدر صفحات وب هستند و ما برای اینکه بتوانیم اپلیکیشنی که ساختیم را در محیط وب برای کاربران به اشتراک بگذاریم باید از این مرورگرها و زبان ارتباطی آنها پیروی کنیم. این زبانهای ارتباطی مشخصا سه چیز است: HTML CSS JavaScript
اما آیا راهی هست که بتوان بجای JavaScript از زبانهای دیگر هم در سمت مرورگر استفاده کرد؟
وب اسمبلی یا همان WASM، آمده تا به ما اجازه دهد از هر زبانی که خروجی به Web Assembly دارد، برای تعاملات UI استفاده کنیم. یعنی با زبان هایی مثل #C / C++ / C و... میتوان کدی نوشت که مرورگر آن را اجرا کند. این یک تحول بزرگ است که امروزه تمامی مرورگرها (به جز مرورگرهایی که از دور خارج شده اند) از آن پشتیانی میکنند چرا که Web Assembly به یکی از اجزای استاندارد وب تبدیل شده است.
اطلاعات بیشتر در رابطه با وب اسمبلی را میتوانید از این مقاله بخوانید.
تعریف SPA و PWA:
SPA: Single Page Application
PWA: Progressive Web Application
در گذشته برای رندر کردن صفحات وب با عوض شدن URL یا درخواست کاربر برای دریافت اطلاعات جدید از سرور و نمایش آن ، صفحه مرورگر ملزم به رفرش شدن مجدد و از سر گیری کل فرایند تولید HTML میشد. طبیعتا این تکرار برای کاربر هنگام استفاده از اپلیکیشن خیلی خوشایند نبود چرا که هربار میبایست زمانی بیشتر صرف تولید مجدد صفحات را منتظر میماند. اما در مقابل آن Single Page Application (SPA)ها این پروسه را تغیر داد.
در رویکرد SPA، کل CSS , HTML و JS ای که برای اجرای هر صفحه ای از اپلیکیشن نیاز هست در همان لود اولیه برنامه توسط مرورگر دانلود خواهد شد. با این روش هنگام تغییر URL صفحات مرورگر دیگر نیازی به لود دوباره اسکریپتها ندارد. همچنین وقتی قرار است اطلاعات جدیدی از سرور آپدیت و نمایش داده شود این درخواست بصورت یک دستور Ajax به سرور ارسال شده و سرور با فرمت JSON اطلاعات درخواست شده را پاسخ میدهد. در نهایت مرورگر نیز اطلاعات برگشتی از سرور را مجدد جای گذاری میکند و کل این روند بدون هیچگونه رفرش دوباره صفحه انجام میشود.
در نتیجهی این امر، کاربر تجربه خوشایندتری هنگام کار کردن با SPAها خواهد داشت. اما همانقدر که این تجربه در طول زمان استفاده از برنامه بهبود یافت، لود اولیه اپلیکیشن را کندتر کرد، چرا که اپلیکیشن میبایست همه کدهای مورد نیاز خود برای صفحاتش را در همان ابتدا دانلود کند.(در ادامه با قابلیت Pre-Rendering این اشکال را تا حدود زیادی رفع میکنیم)
با استفاده از PWA میتوانید وبسایتهای SPA را بصورت یک برنامه نصبی و تمام صفحه، با آیکن مجزایی همانند اپلیکیشنهای دیگر در موبایل و دسکتاپ داشته باشید. همچنین وقتی از PWA استفاده میکنیم برنامه وب میتواند به صورت آفلاین نیز کار کند.
البته حتی در برنامههایی که لازم نیست آفلاین کار کنند، در صورت قطعی ارتباط کاربر با شبکه، به جای دیدن دایناسور معروف، اینکه برنامه در هر حالتی باز شود و به صورتی کاربر پسند و قطعی نت به وی اعلام شود ایده خیلی بهتری است (":
قابلیت Pre-Rendering:
هدف Pre-Rendering بهبود گشت گذار کاربر در سایت است. شیوه کارکرد آن به این صورت است که وقتی کاربر وارد وبسایت میشود، سرور در همان ابتدای کار و جلوتر از اتمام دانلود اسمبلیها، فایلی حاوی HTML ، CSSهای صفحه ای که کاربر درخواست کرده را در سمت سرور میسازد و به مرورگر ارسال میکند. در همین حین، اسمبلیها نیز توسط مرورگر دانلود میشوند و برنامه از محتوای صرف خارج شده و حالت تعاملی میگیرد. اصطلاحا به این قابلیت Server-Side Rendering(SSR) نیز میگویند. در این حالت کاربر زودتر محتوایی از برنامه را میبیند و تجربه بهتری خواهد داشت. این امر در بررسی Search Engineها و سئو وبسایت نیز تاثیر بسزایی دارد.
نگاهی به Blazor:
تا اینجا هر آنچه که نیاز بود برای درک بهتر از Blazor بدانیم را فهمیدیم، اما خود Blazor چیست؟ در یک توضیح کوتاه، فریمورکی ارائه شده توسط مایکروسافت میباشد برای پیادهسازی UI و منطق برنامهها شامل امکانات Routing ، Binding و...
بلیزر در انواع مختلفی ارائه شده که هرکدام کاربرد مشخصی دارد:
Blazor Server
در بلیزر سرور پردازشها جهت تعامل UI درون سرور اجرا خواهد شد. برای مثال وقتی کاربر روی دکمه ای کلیک میکند و آن دکمه مقداری عددی را افزایش میدهد که از قضا متن یک Label به آن عدد وابسته است، رویداد کلیک شدن این دکمه توسط SignalR WebSocket به سرور ارسال شده و سرور تغیر متن Label را روی همان وب سوکت به کلاینت ارسال میکند.
با توجه به این که تعامل کاربر با صفحات برنامه، بسته به میزان کندی اینترنت کاربر، ممکن است کند شود و همچنین Blazor Server قابلیت PWA شدن ندارد و علاوه بر این بار پردازش زیادی روی سرور میاندازد (بسته به پیچیدگی پروژه) و در نهایت ممکن است در آن از Component هایی استفاده کنیم که چون در حالت Blazor Server پردازش سمت سرور بوده، متوجه حجم دانلود بالای آنها نشویم و کمی بعدتر که با Blazor Hybrid میخواهیم خروجی Android / iOS بگیریم متوجه حجم بالای آنها شویم، استفاده از Blazor Server را در Production توصیه نمیکنیم، ولی این حالت برای Debugging بهترین تجربه را ارائه میدهد، بالاخص با امکان Hot Reload و دیدن آنی تغییرات C# / HTML / CSS در ظاهر و رفتار برنامه موقع کدنویسی.
Blazor WebAssembly
در بلیزر وب اسمبلی منطق مثال قبلی که با C# .NET نوشته شده است، روی مرورگر و با کمک Web Assembly اجرا میشود و نیازی به ارتباط جاری با سرور توسط SignalR نیست. این باعث میشود که با بلیزر وب اسمبلی بتوان اپلیکیشنهای PWA نیز نوشت.
یک برنامه Blazor Web Assembly میتواند چیزی در حدود دو الی سه مگ حجم داشته باشد که در دنیای امروزه حجم بالایی به حساب نمیاید، با این حال با کمک Pre Rendering و CDN میتوان تجربه کاربر را تا حدود زیادی بهبود داد.
برای مثال سایت Componentهای Bit Platform جزو معدود دموهای Componentهای Blazor است که در حالت Blazor Web Assembly ارائه میشود و شما میتوانید با باز کردن آن، تجربه حدودی کاربرانتان را در حین استفاده از Blazor Web Assembly ببینید. به علاوه، در dotnet 7 سرعت عملکرد Blazor Web Assembly بهبود قابل توجهی پیدا کرده است.
Blazor Hybrid
از Blazor Hybrid زمانی استفاده میکنیم که بخواهیم برنامههای موبایل را برای Android , iOS و برنامههای Desktop را برای ویندوز، با کمک HTML , CSS توسعه دهیم. نکته اصلی در Blazor Hybrid این است که اگر چه از Web View برای نمایش HTML / CSS استفاده شده، اما منطق سمت کلاینت برنامه که با C# .NET توسعه داده شده است، بیرون Web View و به صورت Native اجرا میشود که ضمن داشتن Performance بالا، به تمامی امکانات سیستم عامل دسترسی دارد. علاوه بر دسترسی به کل امکانات Android / iOS Sdk در همان C# .NET ، عمده کتابخانههای مطرح مانند Firebase، با ابزار Binding Library ارائه شده توسط مایکروسافت، دارای Wrapper قابل استفاده در C# .NET هستند و ساختن Wrapper برای هر کتابخانه Objective-C ، Kotlin، Java، Swift با این ابزار فراهم است.
اگر شما در حال حاضر فقط #HTML , CSS , C بدانید، اکنون با بلیزر میتوانید هر اپلیکیشنی که بخواهید توسعه دهید. از وبسایتهای SPA گرفته تا اپهای موبایل Android ، IOS و برنامههای دسکتاپی برای Windows , Mac و بزودی نیز برای Linux
معرفی پکیج Bit Blazor UI:
پکیج Bit Blazor UI مجموعه ای از کامپوننتهای مرسومی است که بر پایه بلیزر نوشته شده و به ما این امکان را میدهد تا المانهای پیچیده ای مثل Date Picker , Grid , Color Picker , File Upload , DropDown و بسیاری از المانهای دیگر را با شکلی بهینه، بدون نیاز به اینکه خودمان بخواهیم برای هر یک از اینها از نو کدنویسی کنیم، آن را در اختیار داشته باشیم.
عمده مشکل کامپوننتهای ارائه شده برای بلیزر حجم نسبتا بالای آن است که باعث میشد بیشتر در مصارفی از قبیل ایجاد Admin Panel کارایی داشته باشد. اما این موضوع به خوبی در Bit Blazor UI مدیریت شده و در حال حاضر با بیش از 30 کامپوننت با حجم بسیار پایینی، چیزی حدود 200 کیلوبایت قابل نصب است. از لحاظ حجمی نسبت به رقبای خود برتری منحصر به فردی دارد که باعث میشود به راحتی حتی در اپلیکیشنهای موبایل هم قابل استفاده باشد و کماکان پرفرمنس خوبی ارائه دهد.
این کامپوننتها با ظاهر Fluent پیاده سازی شده و میتوانید لیست کامپوننتهای بلیزر Bit را از این لینک ببینید.
معرفی Bit TodoTemplate:
قبل از اینکه به معرفی Bit TodoTemplate بپردازیم باید بدانیم که اصلا پروژههای Template چه هستند. در واقع وقتی شما Visual Studio را باز میکنید و روی گزینه Create New Project کلیک میکنید با لیستی از پروژههای تمپلیت روبرو میشوید که هرکدام چهارچوب خاصی را با اهدافی متفاوت در اختیارتان قرار میدهند.
Bit Platform هم Project Template ای با نام TodoTemplate توسعه داده که میتوانید پروژههای خودتان را از روی آن بسازید، اما چه امکاناتی به ما میدهد؟
در یک جمله، هر آنچه تا به اینجا توضیح داده شد بصورت یکجا در TodoTemplate وجود دارد.
در واقع TodoTemplate چهارچوبی را فراهم کرده تا شما تنها با دانستن همین مفاهیمی که در این مقاله خواندید، از همان ابتدا امکاناتی چون صفحات SignUp، SignIn یا Email Confirmation و... را داشته باشید و در نهایت بتوانید تمامی خروجیهای قابل تصور را بگیرید.
اما چگونه؟
در TodoTemplate همه این قابلیتها تنها درون یک فایل و با کمترین تغیر ممکن نوع خروجی کدی که نوشته اید را مشخص میکند. این تنظیمات به شکل زیر است :
<BlazorMode> ... </BlazorMode> <WebAppDeploymentType> ... </WebAppDeploymentType>
شما میتوانید با تنظیم <BlazorMode> بین انواع hosting modelهای بلیزر سوییچ کنید. مثلا برای زمانی که در محیط development هستید نوع بلیزر را Blazor Server قرار دهید تا از قابلیتهای debugging بهتری برخوردار باشید ، وقتی میخواهید وبسایت تکمیل شده تان را بصورت SPA / PWA پابلیش کنید نوع بلیزر را به Blazor WebAssembly و برای پابلیشهای Android ، IOS ، Windows ، Mac نوع بلیزر را به Blazor Hybrid تغیر دهید.
به علاوه، شما تنها با تغیر <WebAppDeploymentType> قادر خواهید بود بین SPA (پیش فرض)، SSR و PWA سوئیچ کنید.
قابلیتهای TodoTemplate در اینجا به پایان نمیرسد و بخشی دیگر از این قابلیتها به شرح زیر است :
- وجود سیستم Exception handling در سرور و کلاینت (این موضوع به گونه ای بر اساس Best Practiceها پیاده سازی شده که اپلیکیشن را از بروز هر خطایی که بخواهد موجب Crash کردن برنامه شود ایزوله کرده)
- وجود سیستم User Authentication بر اساس JWT که شما در همان ابتدا که از این تمپلیت پروژه جدیدی میسازید صفحات SignIn ، SignUp را خواهید داشت.
- پکیج Bit Blazor UI که بالاتر درمورد آن صحبت کرده ایم از همان ابتدا در TodoTemplate نصب و تنظیم شده تا بتوانید به راحتی صفحات جدید با استفاده از آن بسازید.
- کانفیگ استاندارد Swagger در سمت سرور.
- ارسال ایمیل در روند SignUp.
- وجود خاصیت AutoInject برای سادهسازی تزریق وابستگی ها.
- و بسیاری موراد دیگر که در داکیومنتهای پروژه میتوانید آنهارا ببینید.
با استفاده از TodoTemplate پروژه ای با نام Todo ساخته شده که میتوانید چندین مدل از خروجیهای این پروژه را در لینکهای پایین ببینید و پرفرمنس آن را بررسی کنید.
توجه داشته باشید هدف TodoTemplate ارائه ساختار Clean Architecture نبوده ، بلکه هدف ارائه بیشترین امکانات با سادهترین حالت کدنویسی ممکن بوده که قابل استفاده برای همگان باشد و شما میتوانید از هر پترنی که میخواهید براحتی در آن استفاده کنید.
پلتفرم Bit یک تیم توسعه کاملا فعال تشکیل داده که بطور مداوم در حال بررسی و آنالیز خطاهای احتمالی ، ایشوهای ثبت شده و افزودن قابلیتهای جدید میباشد که شما به محض استفاده از این محصولات میتوانید در صورت بروز هر اشکال فنی برای آن ایشو ثبت کنید تا تیم مربوطه آن را بررسی و در دستور کار قرار دهد. در ادامه پلتفرم Bit قصد دارد بزودی تمپلیت جدیدی با نام Admin Panel Template با امکاناتی مناسب برای Admin Panel مثل Dashboard و Chart و... با تمرکز بر Clean Architecture نیز ارائه کند. چیزی که مشخص است اوپن سورس بودن تقریبا %100 کارها میباشد از جلسات و گزارشات کاری گرفته تا جزئیات کارهایی که انجام میشود و مسیری که در آینده این پروژه طی خواهد کرد.
میتوانید اطلاعات بیشتر و مرحله به مرحله برای شروع استفاده از این ابزارها را در منابعی که معرفی میشود دنبال کنید.
منابع:
مشارکت در پروژه:
- شما میتوانید این پروژه را در گیتهاب مشاهده کنید.
- برای اشکالات یا قابلیت هایی که میخواهید برطرف شود Issue ثبت کنید.
- پروژه را Fork کنید و Star دهید.
- ایشوهایی که وجود دارد را برطرف کنید و Pull Request ارسال کنید.
- برای در جریان بودن از روند توسعه در جلسات برنامه ریزی (Planning Meeting) و گزارشات هفتگی (Standup Meeting ) که همه اینها در Microsoft Teams برگزار میشود شرکت کنید.
مطالب
آشنایی با فرمت OPML
OPML یا Outline Processor Markup Language اساسا فایلی است مبتنی بر XML که امروزه بیشتر جهت توزیع لینکهای تغذیه خبری سایتها (RSS/Atom و امثال آن) مورد استفاده قرار میگیرد.
به بیانی سادهتر، بجای اینکه بگویند ما به این 100 وبلاگ علاقمند هستیم و لینک تک تک آنها را به شما ارائه بدهند، یک فایل OPML استاندارد از آنها درست کرده و در اختیار شما قرار میدهند. به این صورت با چند کلیک ساده، این فایل در نرم افزار فیدخوان شما import شده و آدرسها بلافاصله قابل استفاده خواهند بود.
نمونهای از این فرمت:
<?xml version="1.0" encoding="UTF-8"?> <opml version="1.0"> <head> <title>Subscriptions in Google Reader</title> </head> <body> <outline title="Programming"> <outline text="Vahid's Blog" title="Vahid's Blog" type="atom" xmlUrl="http://feeds.feedburner.com/vahidnasiri" htmlUrl="https://www.dntips.ir/"/>
نحوه استفاده از آنها در Google reader
بعد از ورود به قسمت تنظیمات Google reader ، با استفاده از قسمت import/export میتوان یک فایل OPML را به آن معرفی کرد (شکل زیر):
و یا با استفاده از برنامه باکیفیت و رایگان FeedDemon و قسمت import feeds آن میتوان یک فایل OPML را به برنامه وارد کرد. البته اینجا امکانات بیشتری را نسبت به Google reader دراختیار شما قرار میدهد و میتوانید از لیست دریافتی، موارد مورد نظر را انتخاب کنید و نه تمامی آنها را.
اگر علاقمند بودید که این فایلها را در برنامههای دات نت خود import کنید، کتابخانه سورس باز Argotic Syndication Framework این امکان را در اختیار شما قرار میدهد.
به روز رسانی
- «از کدام فیدخوان تحت وب استفاده میکنید؟»
- «به روز رسانی فایل OPML وبلاگهای IT ایرانی؛ شهریور 94»
فرض کنید در پروژهی جاری خودتون قصد دارید یک سیستم مدیریت سطوح دسترسی کاربران رو با انعطاف بالا پیاده سازی کنید . مثلا سیستم شما دارای صفحات مختلفی هستش که هر گروه کاربری اجازه دسترسی به هر صفحه رو نداره ... هدف اینه که شما این گروههای کاربری و سطوح دسترسی برای هر گروه رو برای سیستم مشخص کنید .
مثلا فقط کاربرانی که دسترسی admin دارن بتونن به صفحات مدیریتی دسترسی داشته باشن و ....
برای این منظور در دات نت کلاسی با نام Role Provider وجود داره که در ادامهی این مبحث به کار با اون میپردازیم.
مثلا فرض کنید قرار بر اینه که سطوح دسترسی رو از بانک اطلاعاتی استخراج کنیم . کلاس مذکور در فضای نام System.Web.Security قرار گرفته . برای شروع ما نیاز داریم یک نمونه از این کلاس رو پیاده سازی کرده و چند تابع از اون رو بازنویسی کنیم .
پیاده سازی کلاس به این صورته :
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Security; namespace Myproject.Security { public class CustomRoleProvider : RoleProvider { } }
خب در مرحلهی بعد دو تابع از این کلاس رو بازنویسی میکنیم . اول تابع GetRolesForUser که در این مقاله وظیفهی استخراج لیست مجوزها برای هر کاربر رو از بانک اطلاعاتی داره که به شکل زیر پیاده سازی میشه .
public override string[] GetRolesForUser(string username) { using (DatabaseEntities db = new DatabaseEntities()) { User user = db.Users.FirstOrDefault(u => u.UserName.Equals(username, StringComparison.CurrentCultureIgnoreCase)); var roles = from ur in user.UserRoles from r in db.Roles where ur.RoleId == r.Id select r.Name; if (roles != null) return roles.ToArray(); else return new string[] {}; ; } }
همونطور که میبینید در تابع بالا از کلاس CustomRoleProvider ما عملیات استخراج لیست مجوزهای دسترسی مربوط به هر کاربر رو از بانک اطلاعاتی انجام دادیم . توجه داشته باشین که شما میتونید این واکشی رو از هر محیط دیگه ای جز بانک اطلاعاتی هم بسته به نوع کارتون انجام بدید .
تابع بعد IsUserInRole نام داره که با بازنویسی اون مشخص میکنیم که ایا یک کاربر دارای مجوز لازم برای دسترسی هست یا نه . اون رو به شکل زیر بازنویسی میکنیم.
public override bool IsUserInRole(string username, string roleName) { using (DatabaseEntities db = new DatabaseEntities()) { User user = db.Users.FirstOrDefault(u => u.UserName.Equals(username, StringComparison.CurrentCultureIgnoreCase)); var roles = from ur in user.UserRoles from r in db.Roles where ur.RoleId == r.Id select r.Name; if (user != null) return roles.Any(r => r.Equals(roleName, StringComparison.CurrentCultureIgnoreCase)); else return false; } }
همونطور که شاهد هستید در تابع بالا بعد از واکشی لیست مجوزهای ثبت شده برای هر کاربر بررسی انجام میشه که ایا اولا کاربر یک کاربر ثبت شده هست و ثانیا اینکه ایا درخواستی که ارسال کرده برای دسترسی به یک بخش مجوز اون رو داره یا خیر ...
این نکته رو یاد آور بشم که این توابع رو میشه به شکلهای مختلفی پیاده سازی کرد و اونچه که در اینجا نوشته شده فقط جهت مثال هستش . مثلا تابع IsUserInRole رو میشه به شکل زیر هم نوشت و این بسته به شرایط کاری داره که قصد انجام اون رو دارید ....
public override bool IsUserInRole(string username, string roleName) { return this.GetRolesForUser(username).Contains(roleName); }
خب میرسیم به بخش معرفی این Provider در web.config که به صورت زیر انجام میشه ...
<system.web> ... <rolemanager cacherolesincookie="true" defaultprovider="CustomRoleProvider" enabled="true"> <providers> <clear /> <add name="CustomRoleProvider" type="Myproject.Security.CustomRoleProvider" /> </providers> </rolemanager> ... </system.web>
توجه داشته باشید که مجوزهای هر کاربر با معرفی بالا بعد از یک بار واکشی در کوکی ذخیره میشه و دیگه هر بار، بار اضافه برای واکشی از بانک اطلاعاتی به برنامه تحمیل نمیشه ...
حالا به این صورت میتونیم مثلا یک Controller رو محافظت کنیم در برابر درخواست از جانب کاربرانی که سطح دسترسی به اون رو ندارند .
using System; using System.Web.Mvc; namespace MyProject.Areas.Admin.Controllers { [Authorize(Roles = "Administrators")] public class HomeController : Controller { // // GET: /Admin/Home/ public ActionResult Index() { return View(); } } }
توجه داشته باشید که کنترل مجوز برای بررسی وجود مجوز در بخشهای کوچکتر هم مانند اکشنها و ... میتونه در نظر گرفته بشه .
جهت اطلاع
پروژهی DNTIdentity به ASP.NET Core 2.1 ارتقاء داده شد.
- مشاهدهی لیست کامل تغییرات
برای اجرای آن فقط کافی است:
- ابتدا SDK جدید را نصب کنید.
- سپس مجوز SSL آنرا تبدیل به مجوز امن و قابل اطمینان کنید.
- در ادامه به پوشهی DataLayer مراجعه کرده و ابتدا دستور dotnet restore را صادر کنید. بعد از آن دو فایل cmd موجود در آنرا اجرا کنید. فایل اول مهاجرتها را تولید میکند و فایل دوم، آنها را به بانک اطلاعاتی از نوع LocalDB اعمال خواهد کرد. بانک اطلاعاتی تولید شده را در پوشهی wwwroot/App_Data میتوانید مشاهده کنید.
- در آخر به پوشهی اصلی برنامه مراجعه کرده و دو فایل bat موجود در آنرا اجرا کنید. اولی وابستگیها را بازیابی میکند و دومی برنامه را کامپایل کرده و سپس بر روی پورت SSL 5001 ارائه میدهد که بلافاصله در مرورگر قابل مشاهده خواهد بود.
برای اجرای این مراحل نیاز به IDE خاصی ندارید. همینقدر که SDK جدید را نصب کرده باشید، کافی است.
پروژهی DNTIdentity به ASP.NET Core 2.1 ارتقاء داده شد.
- مشاهدهی لیست کامل تغییرات
برای اجرای آن فقط کافی است:
- ابتدا SDK جدید را نصب کنید.
- سپس مجوز SSL آنرا تبدیل به مجوز امن و قابل اطمینان کنید.
- در ادامه به پوشهی DataLayer مراجعه کرده و ابتدا دستور dotnet restore را صادر کنید. بعد از آن دو فایل cmd موجود در آنرا اجرا کنید. فایل اول مهاجرتها را تولید میکند و فایل دوم، آنها را به بانک اطلاعاتی از نوع LocalDB اعمال خواهد کرد. بانک اطلاعاتی تولید شده را در پوشهی wwwroot/App_Data میتوانید مشاهده کنید.
- در آخر به پوشهی اصلی برنامه مراجعه کرده و دو فایل bat موجود در آنرا اجرا کنید. اولی وابستگیها را بازیابی میکند و دومی برنامه را کامپایل کرده و سپس بر روی پورت SSL 5001 ارائه میدهد که بلافاصله در مرورگر قابل مشاهده خواهد بود.
برای اجرای این مراحل نیاز به IDE خاصی ندارید. همینقدر که SDK جدید را نصب کرده باشید، کافی است.
سیستمهای مدیریت ماژول یا باندل کنندههای جاوااسکریپتی، چندی است که دچار تنوع زیادی شدهاند و هر از گاهی، چهرههای جدیدی خود نمایی میکنند. اگر با انگولار 2 آشنا باشید قطعا با SystemJs که یکی دیگر از این گونه باندل کننده هاست آشنایید. در این سری قصد داریم که با یک باندل کنندهی تقریبا همه کاره با نام webpack آشنا شویم.
قدم دوم نصب webpack میباشد. برای نصب وب پک دو راه وجود دارد:
اگر دقت کنید اسکریپتی با نام bundle.js در فایل html رجوع داده شده است که در پروژه وجود خارجی ندارد و قصد این است که این فایل را با استفاده از وب پک تولید کنیم.
حال با استفاده از دستور npm run webpack ./main.js bundle.js ، وب پک فراخوانی شده و تک فایل main.js را باندل میکند.
مقدمه و توضیحی بر اینکه چه لزومی بر باندل کنندههای جاوااسکریپتی هست؟
زمانیکه جاوا اسکریپت پا به عرصهی وجود گذاشت، در توسعهی برنامههای کلاینت، از سیستمهای بیلد استفادهای نمیشد و شاید بتوان سادهترین دلیل آن را عدم احتیاج جاوااسکریپت به کامپایل دانست. ولی با گذشت زمان و عوض شدن چهرهی برنامههای سمت کلاینت و بزرگتر شدن آنها، برنامه نویسان با مشکلاتی از قبیل نگه داری و امنیت، در برنامههای بزرگ رو به رو بودند.
در پاسخ به بزرگ شدن پروژهها قطعا شما این پیشنهاد را خواهید داد که بایستی برنامه را به قسمتها و یا ماژولهای کوچکتری بشکنیم، تا هم نگه داری از آن سادهتر شود و هم احتمال بروز خطا در حین انجام پروژه کاهش یابد. اما باید به یاد داشت که این قسمتهای کوچک شده به معنای یک تگ اسکریپت جدا در صفحات وب برنامه میباشند و این مساله به این معنا خواهد بود که برای هر یک از آنها، مرورگر بایستی به میزبان، درخواستی را ارسال کرده و فایلها را جداگانه دریافت کند. قطعا پاسخ به این مشکل دوباره چسباندن این ماژولها به یکدیگر است تا مرورگر فقط یک درخواست را برای این فایلها ارسال کند. این مسئله همچنین برای فایلهای css و تصاویر نیز صادق میباشد.
دومین مشکلی که با ماژول سازی برنامه با آن روبه رو میشویم، بالا رفتن حجم کد و درنتیجه بالا رفتن ترافیک مصرفی خواهد بود که این مسئله نیز بایستی توسط یک Minifier حل شود. مشکل بعدی، وابستگی ماژولها به یکدیگر است .در صورتی که در اضافه کردن یک ماژول به وابستگیهای آن دقت نداشته باشیم، باعث بروز خطا در برنامه میشویم. با استفاده از یک باندلر میتوانیم وابستگیهای هر ماژول را تعریف کنیم تا این مسئله نیز حل شود.
آخرین مسالهای که به ذهن میآید نیز میتوان قابلیتهای جدید ES6 را نام برد که به صورت سراسری در تمامی مرورگرها ممکن است هنوز قابل استفاده نباشند و شما به عنوان برنامه نویس قصد بهره بردن از آنها را داشته باشید. درنتیجه راهکار، استفاده از یک ترانسپایلر است که میتوان از معروفترین آنها تایپ اسکریپت و babel را نام برد .
راهکارهای مختلف برای حل مشکلات ذکر شده
در صورتی که با فریمورکهای سمت سرور آشنایی داشته باشید، حتما با سیستمهای باندل کننده و Minify کنندهی آنها برخورد داشته اید. به طور مثال فریمورک Asp.Net Mvc دارای یک باندل کنندهی توکار است که مشکل بسته بندی کردن کل ماژولها و همچنین Minify کردن آنها را حل میکند. ولی تا آخرین اطلاعی که دارم، مشکل وابستگی ماژولها به جز اینکه برنامه نویس به صورت دستی ترتیب اضافه شدن را رعایت نماید، قابل حل نیست. همچنین در اینجا استفاده از یک ترانسپایلر نیز مقدور نمیباشد.
راه حل دیگر استفاده از Task Runnerهای جاوا اسکریپتی مانند گرانت و گالپ میباشد که تمامی مسائلی که پیشتر ذکر شد، به وسیلهی آنها قابل حل است؛ به جز مسئلهی وابستگی ماژولها به یکدیگر که بایستی به صورت دستی توسط برنامه نویس ترتیب آنها رعایت شود یا از فریمورک هایی مانند browserify و ... استفاده شود.
راه حل webpack
تفاوت وب پک با TaskRunnerهای جاوا اسکریپتی را میتوان در اینجا بیان کرد که وب پک در انجام یک وظیفه تخصص وافری دارد و آن وظیفه نیز پردازش فایلهای ورودی و خروجی داده شده به آن است که با استفاده از کامپوننتهایی که با نام loader از آن نام میبرد، این وظیفه را انجام میدهد. با استفاده از این لودرها شما نتیجهای را که از یک TaskRunner انتظار دارید، خواهید گرفت؛ مانند ترنسپایل کردن ماژولها، بسته بندی ماژولها، Minify کردن آنها و در نهایت قابلیتی که معمولا در Task Runnerها موجود نیست و وب پک امکان انجام آن را دارد، ترکیب فایلهای Css با فایلهای جاوا اسکریپت برنامه است. این کار برای تصاویر و فونتهای برنامه نیز قابل انجام است.
پیش فرضهای کار با webpack
دو پیش فرض مهم در شروع به کار با وب پک از این قرارند:
1. وب پک برای نصب Assetهای سمت کلاینت شما از NPM استفاده میکند و انتظار دارد که شما نیز این پکیج منیجر بهره ببرید و به طور مثال از bower استفاده نکنید.
2.استفاده از یک سیستم ماژولار ( اینکه از کدام یک استفاده میکنید مهم نیست Commonjs ، amd ، es6 و...)
نصب webpack و شروع کار
webpack یکی از صدها ماژولهای نوشته شدهی با استفاده از پلتفرم nodejs میباشد. پس اول از همه چیز در صورتیکه nodejs بر روی سیستم شما نصب نیست، آن را دریافت و نصب کنید.
قبل از شروع به کار بهتر است که یک محیط کار تمیز ( یک فولدر خالی) را آماده کنید و سپس با اجرای دستور npm init، یک بستر برای کار با npm را داشته باشیم. میتوانید به صورت دستی نیز یک فایل package.json را اضافه کنید و گزینههای مدنظرتان را به آن اضافه کنید.
من با اجرای این دستور و جواب دادن به سوالاتش یک خروجی فایل package.json با این محتوا را ایجاد کردم :
{ "name": "dntwebpack", "version": "1.0.0", "description": "a webpack tutorial", "main": "main.js", "scripts": { }, "author": "mehdi", "license": "MIT" }
1. نصب وب پک به صورت گلوبال ( سراسری ) با استفاده از دستور :npm install -g webpack ، با اجرای این دستور قابلیت استفاده از وب پک را در همه جا با استفاده از خط فرمان، خواهید داشت.
2. ایراد روش اول این است که ممکن است در آینده بخواهید در پروژههای گوناگون از دو نسخهی متفاوت وب پک استفاده کنید و به خاطر نسخهای که به طور سراسری نصب شده است به مشکل بر بخورید. پس با استفاده از دستور npm install -D webpack یا npm install --save-dev webpack وب پک را به صورت محلی برای پروژه نصب میکنیم ( کاربرد پرچم D- یا --save-dev این است که وب پک در قسمت وابستگیهایی که فقط جهت توسعهی پروژه هستند، در فایل package.json اضافه میشود).
در ادامه در محیط کاری که ایجاد کردیم، دو فایل دیگر را ایجاد میکنیم. اولی یک فایل سادهی html جهت اینکه اسکریپتهای پروژه را به آن اضافه کنیم و دیگری یک فایل اسکریپت جهت اینکه آن را به وب پک بدهیم.
فایل html را index.html نام گذاری کردم و اسکریپت سمپل را نیز main.js. محتوای هر دوفایل به این صورت میباشد:
<html> <!-- index.html --> <head> first part of webpack tut! </head> <body> <h1>webpack is awesome !</h1> <script src="bundle.js"></script> </body> </html>
//main.js //start of the journey with webpack console.log(`i'm bundled by webpack`);
حالا نوبت به این میرسد که تک فایل main.js را به وب پک بدهیم.
در صورتی که وب پک را به صورت سراسری نصب کرده باشید، این کار ساده است. در خط فرمان با فراخوانی وب پک با دستور webpack ./main.js bundle.js
فایل bundle.js را تولید میکنیم.
فایل bundle.js را تولید میکنیم.
در صورتی که وب پک به صورت محلی در پروژه نصب شده باشد، فایل package.json را باز کرده و در قسمت scripts، یک ورودی جدید را به اسم webpack به همراه فرمان مورد نظر، به آن میدهیم. محتوای فایل package.json پس از این کار به صورت زیر خواهد بود:
{ "name": "dntwebpack", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" ,"webpack":"webpack" }, "author": "mehdi", "license": "ISC", "devDependencies": { "webpack": "^1.13.1" } }
در صورتی که اجرای دستور بالا موفقیت آمیز باشد، پاسخی مشابه به زیر را باید دریافت کنید:
در قسمت بعدی با تنظیمات پیشرفتهتر و loaderهای وب پک آشنا میشویم .
فایلهای پروژه dntwebpack.zip (جهت اجرای آنی احتیاج به نصب وبپک را دارید که این کار با استفاده از دستور npm install در فولدر پروژه قابل انجام است).
نظرات اشتراکها
تست و دیباگ درخواست های OAuth2
مخزن سورس کد فوق در این آدرس در گیت هاب میباشد
توضیحات و آموزش استفاده از ابزار فوق نیز در این آدرس میباشد