مهندسین فناوری اطلاعات توسعه دهنده ما امروز با یک وبلاگ عالی دیگر بازگشته اند. امروز ما Blazor را در Asp.Net و روش صحیح پیکربندی محیط توسعه با یک نمونه برنامه مورد بحث قرار خواهیم داد.
در حال حاضر چگونه برنامه های وب را توسعه می دهیم؟
توسعه یک برنامه وب فرآیندی است که به چندین چیز نیاز دارد. یکی از این موارد توسعه سمت سرور و دیگری توسعه سمت مشتری است. در مورد توسعه سمت سرور، ما از زبان های سمت سرور مانند C#، Java، PHP و غیره استفاده می کنیم. از طرف دیگر، توسعه سمت کلاینت از انواع چارچوب های JS از جمله React، Angular و Vue استفاده می کند.
یادگیری زبان هم از سرور و هم از مشتری برای جلوتر ماندن از رقبا مهم است. با این حال، در عصر مدرن، یادگیری دو نوع زبان مختلف برای ایجاد برنامه های کاربردی وب کاملاً معکوس به نظر می رسد.
آیا می توانیم از سی # برای توسعه سرور و مشتری استفاده کنیم؟
بله، امکان استفاده از سی شارپ برای هر دو نوع توسعه وجود دارد و این کار با کمک Blazor انجام می شود که رابط کاربری تعاملی وب ایجاد می کند. این امر به کاهش نیاز توسعه دهندگان به یادگیری جاوا اسکریپت همراه با C کمک می کند و روند توسعه را هموار می کند. کد C # هم روی سرور و هم در مرورگر مشتری کار می کند و به توسعه دهندگان این امکان را می دهد تا به جای یادگیری مهارت های کاملاً جدید، با مهارت های موجود کار کنند.
بلزور چیست؟
Blazor مجموعه ای از ابزارهای ایجاد شده توسط تیم Microsoft ASP.NET برای برنامه های کلاینت دات نت و WebAssembly است.
- Blazor بر روی ابزارهای وب موجود مانند HTML و CSS ساخته شده است و از سی # و سینتکس Razor به جای جاوا اسکریپت برای رابط کاربری وب استفاده می کند.
- همچنین مزایای یک برنامه غنی و مدرن یک صفحه ای را با استفاده از دات نت به صورت سرتاسری به شما می دهد.
- Blazor اساساً Razor و C # را در یک پروژه مشتری که فقط در یک مرورگر وب اجرا می شود ترکیب می کند.
چگونه مرورگر می تواند کد C # را اجرا کند؟
به طور کلی، مرورگرها فقط کد جاوا اسکریپت را اجرا می کنند و در نتیجه ممکن است اجرای کد C# در مرورگر شما غیرممکن به نظر برسد. با این حال، این کار با ابزار کمتر شناخته شده ای به نام WebAssembly انجام می شود.
WebAssembly یک زبان سطح پایین است که از لحاظ استفاده از فرمت باینری کاملاً شبیه به اسمبلر است. با این حال، این می تواند در یک مرورگر وب مدرن کار کند. Blazor کد C # را در مرورگر با استفاده از WebAssembly اجرا می کند. این به آن اجازه می دهد تا در محیط امنیتی ایمن مانند JavaScript Frameworks اجرا شود، همانطور که React انجام می دهد. این به توسعه دهندگان اجازه می دهد تا تقریباً از هر زبان برنامه نویسی مرورگر استفاده کنند، نه فقط C#.
WebAssembly بر اساس استانداردهای مختلف وب باز است و بخشی طبیعی از تمام مرورگرهای وب مدرن، از جمله مرورگرهای ساخته شده برای دستگاه های تلفن همراه است. در نتیجه، نیاز خاصی برای اجرای برنامه های Blazor بر روی دستگاه کاربر شما وجود ندارد و در نتیجه احتمال ایجاد مزاحمت های غیر ضروری برای آنها کاهش می یابد.
مدل های هاست بلزور
Blazor دو مدل میزبانی مختلف را در اختیار توسعه دهندگان قرار می دهد. اینها Blazor WebAssembly هستند که در سمت کلاینت اجرا می شوند و Blazor Server که در سمت سرور اجرا می شوند.
Blazor WebAssembly
Blazor WebAssembly مدل میزبانی سمت مشتری است و مستقیماً در مرورگر WebAssembly کار می کند. بنابراین، هر چیزی که یک برنامه نیاز دارد مستقیماً در مرورگر دانلود می شود (کد برنامه کامپایل شده، وابستگی ها و زمان اجرا دات نت).
حرفه ای ها:
- Blazor WebAssembly در واقع نیازی به اتصال فعال به سرور ندارد.
- از منابع مشتری استفاده می کند و بنابراین بار روی سیستم سرور شما را کاهش می دهد.
- Blazor WebAssembly برای میزبانی برنامه به یک وب سرور کامل ASP.NET Core نیاز ندارد.
معایب:
- پردازش اولین درخواست Blazor WebAssembly کمی زمان می برد، زیرا کل برنامه وب و داده های مورد نیاز خود را در مرورگر مشتری دانلود می کند.
- همچنین به قابلیت های مرورگر مورد استفاده مشتری محدود می شود.
- برنامه وب شما ممکن است خیلی سختگیرانه نباشد، زیرا کاربران شما ممکن است سخت افزار مناسبی از سوی مشتری برای پشتیبانی از آن نداشته باشند.
سرور Blazor
سرور Blazor یک مدل میزبانی سرور نامیده می شود که برنامه وب را روی سرور شما اجرا می کند و آن را از یک برنامه ASP.NET Core می سازد. این همچنین به یک اتصال SignalR بین سرور و مشتری نیاز دارد. هر بار که یک رویداد در سیستم مشتری رخ می دهد، اطلاعات آن از طریق اتصال منتقل می شود و توسط سرور پردازش می شود، که تفاوت را برای HTML تولید شده محاسبه می کند.
سپس، به جای ارسال مجدد تمام HTML از طریق پیوند، سرور فقط تفاوت را ارسال می کند تا زمان پاسخ را کاهش دهد. سپس توسط مرورگر به روز می شود.
Blazor از معماری برنامه تک صفحه ای استفاده می کند که به صورت پویا همان صفحه را در پاسخ به اقدامات کاربر بازنویسی می کند، مانند مورد React.
حرفه ای ها:
- برنامه وب بسیار سریعتر بارگیری می شود، زیرا بارگیری اولیه در مرورگر مشتری به میزان قابل توجهی کاهش می یابد.
- سرور Blazor می تواند از منابع سرور شما استفاده کند.
- مشتری شما برای استفاده از برنامه وب فقط به مرورگر نیاز دارد.
- برنامه بسیار امن تر است زیرا کد آن توسط مشتری ارسال نمی شود.
معایب:
- برنامه برای میزبانی به یک هسته کامل ASP.NET نیاز دارد.
- سرور Blazor همیشه به یک اتصال فعال به سرور نیاز دارد.
- برنامه ممکن است به دلیل سفر دو طرفه داده در هر رویداد تاخیر داشته باشد.
- مقیاس پذیری برنامه با Blazor Server بسیار دشوارتر از Blazor WebAssembly است.
چرا بلزور؟
Blazor با دادن دسترسی کاربران به سیستم توسعه کامل پشته با چارچوب دات نت، توسعه وب را بسیار آسان تر و پربارتر می کند. مزایایی که با Blazor دریافت می کنید در اینجا آمده است:
- دات نت دارای مجموعه بزرگی از APIها است که همه آنها با Blazor در دسترس هستند.
- از زبان های مدرن مختلف مانند C# می توان برای آسان تر کردن و جالب تر کردن فرآیند توسعه استفاده کرد.
- Blazor را می توان به راحتی در Visual Studio و Visual Studio Code کدگذاری کرد که بهترین IDE ها در همه پلتفرم ها هستند.
- Blazor مزایای عملکرد مختلفی را ارائه می دهد و بسته به مدل میزبانی که استفاده می کنید توسعه را بسیار آسان می کند.
- Blazor همچنین از ویژگی های چارچوب SPA (برنامه تک صفحه ای) مانند:
- مسیریابی
- لوازم تزئینی
- تزریق اعتیاد
- تعامل با جاوا اسکریپت
- فرم ها و اعتبار سنجی
- نمایش سرور
کجا می توانیم از Blazor استفاده کنیم؟
Blazor WebAssembly را می توان در هر مرورگر مدرنی استفاده کرد و تنها شرط آن این است که دستگاه مشتری از برنامه وب شما با منابع مورد نیاز پشتیبانی کند. لیست مرورگرهای پشتیبانی شده توسط Blazor به شرح زیر است:
- IE
- لبه، پایان
- فایرفاکس
- کروم
- سافاری
- IOS Safari
- اپرا مینی
- مرورگر اندروید
- مرورگر بلک بری
- اپرا موبایل
- کروم برای اندروید
- فایرفاکس برای آندروید
- IE Mobile
- مرورگر UC برای اندروید
- اینترنت سامسونگ
راه اندازی محیط
برای راه اندازی Blazor بر روی ماشین محلی خود، به دو چیز نیاز دارید، یعنی. NET SDK 3.1 یا بالاتر و IDE (محیط توسعه یکپارچه).
1 Net SDK 3.1 یا جدیدتر را نصب کنید:
ابتدا باید نصب کنیدNET SDK 3.1یا هر نسخه بعدی برای بررسی اینکه آیا NET Core SDK روی دستگاه شما نصب شده است یا خیر، وارد کنیدDotnet-list-SDKدر خط فرمان دستور داده و مانند تصویر زیر اینتر را فشار دهید.
همانطور که در تصویر بالا مشاهده می کنید، در دستگاه من، اگر متوجه شدیدNET Core SDK 5.0.401نصب شد. اگر .NET Core SDK 3.1 یا بالاتر را نصب نکرده اید، لطفاً آن را از این URL نصب کنید.
2. محیط توسعه یکپارچه (IDE) برای توسعه برنامه Blazor:
برای توسعه اپلیکیشن Blazor می توانید از هر یک از IDE های زیر استفاده کنید.
- ویژوال استودیو 2019
- کد ویژوال استودیو
- Net Core CLI
بیا شروع کنیم
از آنجایی که همه چیز آماده است و کار می کند، بیایید شروع کنیم:
1. ما 2 پروژه Blazor ایجاد خواهیم کرد. یکی از پروژه های Blazor توسط سرور (Blazor Server App) و دیگری توسط مشتری (Blazor WebAssembly App) میزبانی می شود. ویژوال استودیو 2019 را باز کنید و روی گزینه Create New Project کلیک کنید، همانطور که در تصویر زیر نشان داده شده است:
2. وقتی روی گزینه Create New Project کلیک کنید، پنجره Create New Project باز می شود. در جعبه متن جستجو، Blazor را جستجو کنید و در اینجا دو گزینه برای ایجاد پروژه های Blazor پیدا خواهید کرد، مانند شکل زیر:
ابتدا گزینه Blazor Server App را انتخاب کرده و مانند تصویر بالا روی دکمه Next کلیک کنید.
3. با کلیک بر روی دکمه Next، پنجره پیکربندی پروژه جدید باز می شود. در اینجا باید نام پروژه (BlazorServer) و مکانی را که می خواهید پروژه ایجاد کنید را مشخص کنید. همچنین نام راه حل (BlazorApplication) را مشخص کرده و در نهایت کلیک کنیدمورد بعدیهمانطور که در تصویر زیر نشان داده شده است را فشار دهید.
4. با کلیک بر روی دکمه Next، پنجره با اطلاعات اضافی باز می شود. در اینجا باید نسخه هدف دات نت فریم ورک، انواع احراز هویت و غیره را انتخاب کنید. .NET 5.0 که نسخه فعلی است را انتخاب کنید و به سادگی روی دکمه Create کلیک کنید، همانطور که در تصویر زیر نشان داده شده است:
5. سپس روی دکمه Create کلیک کنید، که یک برنامه سرور Blazor با ساختار فایل و پوشه پیش فرض ایجاد می کند.
6. حالا سریع یک پروژه دیگر اضافه کنید، یعنی. برای میزبانی توسط مشتری روی راه حل کلیک راست کرده و Add را انتخاب کنید اضافه کردن -> پروژه جدید … گزینه مطابق شکل زیر:
7. مشابه مرحله 2، این بار یک پنجره پروژه جدید باز می شود. الگوی اسمبلی وب را مطابق شکل زیر انتخاب کنید:
8. روی Next کلیک کنید و نام پروژه مناسب را مطابق شکل زیر وارد کنید:
9. مرحله بعدی مانند مرحله 4 است که باید فریم Target را انتخاب کرده و دکمه ایجاد را فشار دهیم، پروژه Blazor WebAssembly را در راه حل ما ایجاد می کند و به شکل زیر خواهد بود:
10. حالا بیایید راه حل خود را برای اجرای همزمان هر دو پروژه پیکربندی کنیم. بر روی راه حل کلیک راست کرده و گزینه تنظیم یک پروژه راه اندازی را از منوی زمینه انتخاب کنید. پنجره ای مانند تصویر زیر باز می شود:
مطابق تصویر بالا گزینه را انتخاب کرده و روی Apply کلیک کنید. اکنون می توانید هر دو پروژه را همزمان شروع کنید.
11. برای شروع پروژه، F5 را فشار دهید، مانند تصویر زیر، دو پنجره / تب مرورگر باز می شود:
تصویر اول توسط اپلیکیشن سرور Blazor و تصویر دوم توسط اپلیکیشن Blazor WebAssembly اجرا می شود. هر دو برنامه همانطور که انتظار می رود کار می کنند.
Blazor Server و Blazor WebAssembly تنها دو روش متفاوت برای میزبانی برنامه Blazor هستند. همه چیز در برنامه Blazor یک جزء تیغ است. اجزای سازنده بلوک های اصلی برنامه Blazor هستند. روشی که ما این کامپوننت ها را می سازیم برای برنامه سرور Blazor مانند برنامه Blazor WebAssembly یکسان است.
جزء بلزور
فایل های کامپوننت دارای پسوند .razor هستند. کامپوننت ها را می توان تودرتو، استفاده مجدد، در چندین پروژه به اشتراک گذاشت. در Solution Explorer، فایل Counter.razor را در زیر پوشه pages باز کنید. به شکل زیر خواهد بود:
اگر می بینید، ترکیبی از دو چیز است:
- نشانه گذاری HTML
- کد سی # (در بلوک کد @)
هنگامی که برنامه کامپایل می شود، کد HTML و C # به یک فراخوانی جزء تبدیل می شود و نام کلاس مانند فایل کامپوننت خواهد بود. نام کلاس جزء باید با حروف بزرگ شروع شود. در غیر این صورت با خطای کامپایل مواجه خواهید شد.
هنگامی که در مرورگر به “/ Counter” می رویم جزء Counter بالا نمایش داده می شود و این در بالای فایل به عنوان دستور صفحه @ نشان داده می شود. شما همچنین می توانید این مؤلفه را با استفاده از نحو HTML در هر مؤلفه دیگری جاسازی کنید.
نتیجه
با دنبال کردن این وبلاگ، باید بتوانید اهمیت استفاده از Blazor برای توسعه اپلیکیشن وب خود را درک کنید. اگر در حین راه اندازی یا ایجاد با مشکلی مواجه شدید، لطفاً در نظر خود در زیر دریغ نکنید و ما مطمئناً به زودی پاسخ خواهیم داد.
انتشار راهنمای کامل برای استفاده از Blazor در Asp.Net Core اولین بار در مجله DEV IT ظاهر شد.