آموزش Blazor از صفر تا صد (و نکات و ترفندهای مبتدی)

رتبه: 5 ار 11 رای SSSSS
blazor
نویسنده: تیم تولید محتوا زمان مطالعه 9 دقیقه
Banner Image

شرکت نرم افزاری مایکروسافت نسخه جدید چارچوب .NET Core 3 را به بازار عرضه کرد البته این نسخه جدید شامل یک چارچوب طراحی وب جدید به نام Blazor بود. پس از این در ماه مه شرکت نرم افزاری مایکروسافت نسخه جدیدی از این چارچوب نرم افزاری یعنی Blazor 3.2 را منتشر کرد و با عنوان Blazor WebAssemble به عنوان نسخه آماده استفاده ارائه کرد. Blazor را میتوان یک تکنولوژی بی نظیر دانست زیرا میتوان گفت آینده دنیای جاوا اسکریپت است.

در واقع Blazer یک فریمورک جدید تحت وب هست که این امکان را به برنامه نویسان .Net میدهد تا از طریق Open Web Standards بتوانند کدهای خود را در مرورگر اجرا و تجربه جدیدی از ساخت برنامه‌های تک صفحه‌ای را داشته باشند. در ادامه این مقاله Blazor را به طور جامع بررسی خواهیم کرد.

Blazor چیست؟

Blazor فریم ورک مایکروسافت است که برای ایجاد UIهای غنی و تعاملی با سی شارپ استفاده می‌شود. برنامه های Blazor با استفاده از کامپوننت‌های Razor ساخته می‌شوند که یکی از قابلیت‌های ASP.NET است. این فایل‌ها از C# و HTML تشکیل شده اند.

انواع مدل Blazor

BLAZOR دارای دو مدل Server و WebAssemble است. مدل سرور با .NET Core 3. عرضه شد. اما WebAssemble در مرحله آزمایشی بود اما اکنون با Blazor 3.2 به طور کامل منتشر شده است. هر دو مدل از همان معماری اجزا گرا استفاده می کنند ، اما در نحوه اجرای آن اجزا بسیار متفاوت هستند.

Blazor Server

وقتی که شما با استفاده از این نسخه برنامه های خود را بنویسید کلیه برنامه ها روی کدهای ASP.NET Core میزبانی می شود که با فرمت و سینتکس Razor قابل دسترسی می باشد. برنامه هایی که با استفاده از این نسخه از Blazor نوشته می شوند می توانند به راحتی با Thin Client ها کار کنند و تمامی بخش های پردازشی روی سرور انجام می شود.

Blazor WebAssembly

زمانی که شما صفحه هایی را به صورت SPA خواهید داشت و به این صورت کار خواهند کرد که این صفحه ها روی کلاینت شما دانلود شده و بعد از آن مرورگر وب آنها را برای شما ران خواهد کرد. در این حالت کار به این صورت دنبال خواهد شد که تا زمانی که صفحه به طور کامل روی سیستم شما نیامده است چیزی به کاربر نمایش داده نمی شود.

مزایای Blazor

1- سرعت در رندر کردن صفحات

Blazor از کدهای C# استفاده می کند که به صورت یک جا کامپایل می شوند و سرعت بالاتری در این زمینه دارند. پس به جرات می توان گفت که سرعت بالا در رندر کردن صفحات یکی از مزایای اصلی ای می باشد که می توان برای Blazor مطرح کرد.

2- امکان ساخت PWA ها

برنامه های وب پیشرونده یا پراگرسیو برنامه هایی هستند که یک حالت میانی بین برنامه های نیتیو و نصبی روی سیستم و برنامه های تحت وب یا همان سایت ها را دارند. در این برنامه ها شما قادر خواهید بود تا با استفاده از یک برنامه سمت کاربر که از منابع کاربر استفاده می کند و به خوبی با سخت افزار ارتباط برقرار می کند. Blazor توانایی این را دارد که این نوع از برنامه نویسی را برای ما پیاده سازی کند.

3- قابلیت کار کردن به صورت آفلاین در کلاینت

با توجه به اینکه صفحات در این معماری به صورت کامپایل شده در اختیار کاربران قرار می گیرد این کد ها توانایی انجام کار های پردازشی را تا حدودی دارند و می توان به صورت آفلاین هم با آنها کار کرد.

4- ارتباط خوب با سرور

Blazor با سرور های ویندوزی کار می کند. این به این معنا است که وقتی فریم ورک Blazor را انتخاب کنید، هم سایت و هم سرور هر دو از زبان C# استفاده می کنند و این سازگاری کیفیت خوبی را به ارمغان خواهد آورد.

5- قابلیت استفاده مجدد از کدها

Blazor امکان استفاده از DLL ها را در اختیار شما قرار داده می شود و این چیزی جز امکان استفاده از کامپوننت ها و ماژول های قابل استفاده مجدد نیست. شما با استفاده از این ماژول ها می توانید قابلیت های بسیار خوبی را برای خود پیاده سازی کنید که به شما این امکان را می دهد که در زمان و انرژی ای که برای طراحی یک سایت می خواهید بگذارید صرفه جویی کنید.

6- انجام پردازش سمت کلاینت

Blazor به شما این امکان را می دهد که با استفاده از یک سیستم پردازشی قوی بتوانید از منابع سیستم کلاینتی که در حال استفاده از سایت شما است استفاده کنید، تا بدون نگرانی از مصرف منابع سرور، بتوانید پردازش های مختلف را به انجام برسانید.

معایب Blazor

1- نیاز به سرور های NET. و ویندوزی

سایت های طراحی شده با Blazor برای اجرا حتما باید از سرور های .NET و ویندوزی در آنها استفاده کنند که این موضوع یک ضعف برای این فریمورک شناخته میشود.

2- عدم مقیاس پذیری و Scalable نبودن

یکی از معایب Blazor ، Scalable نبودن سایت ها و محصولات نرم افزاری طراحی شده با این فریم ورک است. در صورتی که شما یک سایت اینترنتی را با استفاده از Blazor برای نفرات محدود طراحی کنید و تعداد کاربران شما به یک باره افزایش داشته باشد، سایت شما قادر نخواهد بود که با همان بازدهی روز اول کار کند.

3- عدم کار روی تین کلاینت ها

سایت ها و اپلیکیشن های تحت وب پیاده سازی شده با استفاده از فریم ورک Blazor امکان اجرا روی تین کلاینت ها(کامپیوتر های کوچک با منابع محدود) را ندارند و از این رو می توان این مورد را به عنوان یک ضعف بزرگ در Blazor عنوان کرد.

4- امکان تست و Debugging محدود

یکی دیگر از معایب Blazor امکان Debugging یا همان دیباگ کردن کد های برنامه می باشد. شما می توانید یک برنامه نوشته شده در Blazor را دیباگ کنید اما این دیباگ گردن به شما اطلاعاتی بسیار محدود را می دهد و با توجه به اینکه ماهیت کد های C# به گونه ای است که بسیار گسترده عمل می کنند احتمال رخ دادن خطا در داخل این برنامه ها بسیار بالا خواهد بود.

حتما در کنار این آموزش دانلود کنید: آموزش صفر تا صد سی شارپ

دانلود دروس آموزش Blazor

  • برای مشاهده بهتر ویدیوها در موبایل، گوشی را افقی نگه دارید. اگر اروری مشاهده کردید بخاطر روشن بودن وی پی ان است. بعد از پخش هر ویدیو، علامت دانلود روی آن نمایان می شود.
  • اگر روی دانلود کلیک کردید و ویدیو باز هم پخش شد، بعد از پخش ردن روی علامت سه نقطه پایینش کلیک و گزینه دانلود یا ذخیره را انتخاب کنید. از اینترنت دانلود منجر هم می توانید استفاده کنید. هر درسی مشکل داشت در نظرات اعلام کنید تا سریعا رفع شود. ضمنا هر چند وقت یک بار احتمالا دروس به روز می شوند.
  • هر درسی کار نکرد،حتما در بخش نظرات اعلام کنید تا مشکل سریعا رفع شود

از پیج Hamcker:

درس 1

درس 2

درس 3

درس 4

درس 5

درس 6

حتما در کنار این آموزش دانلود کنید: آموزش صفر تا صد Adobe xd برای طراحی رابط های کاربری زیبا

اصول و مبانی اولیه خیلی مهم

پس فهمیدیم که Blazor یک فریم‌ورک توسعه وب است که توسط مایکروسافت ایجاد شده و به توسعه‌دهندگان اجازه می‌دهد تا اپلیکیشن‌های وب تعاملی و مدرن را با استفاده از زبان برنامه‌نویسی #C و تکنولوژی‌های وب مانند HTML و CSS بسازند. Blazor از WebAssembly استفاده می‌کند تا کدهای #C را مستقیماً در مرورگر اجرا کند، بدون نیاز به پلاگین‌ها یا افزونه‌های اضافی. در این بخش و انتهای مطلب جذاب هم مفاهیم اولیه و اصلی Blazor را به زبان ساده و قابل فهم برای مبتدیان یاداوری می کنیم:

۱. مفاهیم پایه‌ای Blazor

  • Blazor چیست؟ Blazor یک فریم‌ورک توسعه وب است که به شما امکان می‌دهد اپلیکیشن‌های وب را با استفاده از #C و HTML/CSS بسازید. این فریم‌ورک از WebAssembly استفاده می‌کند تا کدهای #C را در مرورگر اجرا کند.

  • WebAssembly چیست؟ WebAssembly یک فرمت باینری است که به مرورگر اجازه می‌دهد کدهای نوشته شده به زبان‌هایی مانند #C را با سرعت بالا اجرا کند.

  • مزایای Blazor:

    • استفاده از #C برای توسعه وب.

    • اجرای کدهای #C در مرورگر بدون نیاز به پلاگین.

    • قابلیت استفاده از کتابخانه‌های موجود #C.

    • پشتیبانی از کامپوننت‌های قابل استفاده مجدد.

۲. نصب و راه‌اندازی Blazor

  • نصب .NET SDK: برای شروع کار با Blazor، ابتدا باید .NET SDK را از سایت رسمی مایکروسافت دانلود و نصب کنید.

  • ایجاد پروژه Blazor: پس از نصب .NET SDK، می‌توانید یک پروژه Blazor جدید ایجاد کنید. برای این کار، دستور زیر را در ترمینال یا Command Prompt اجرا کنید:

    dotnet new blazorwasm <span class="token parameter variable">-o MyBlazorApp

    این دستور یک پروژه Blazor جدید با نام MyBlazorApp ایجاد می‌کند.

  • اجرای پروژه:
    برای اجرای پروژه، به دایرکتوری پروژه بروید و دستور زیر را اجرا کنید:

    dotnet run

    سپس مرورگر خود را باز کنید و به آدرس https://localhost:5001 بروید تا پروژه را مشاهده کنید.

۳. ساختار پروژه Blazor

  • فایل‌ها و پوشه‌های اصلی:

    • Program.cs: نقطه شروع برنامه.

    • App.razor: کامپوننت اصلی برنامه.

    • Pages: شامل صفحات Razor (مانند Index.razor و Counter.razor).

    • Shared: شامل کامپوننت‌های مشترک (مانند MainLayout.razor و NavMenu.razor).

    • wwwroot: شامل فایل‌های استاتیک مانند CSS، JavaScript و تصاویر.

  • فایل‌های Razor: فایل‌های Razor ترکیبی از HTML و #C هستند و پسوند .razor دارند. این فایل‌ها برای ایجاد صفحات و کامپوننت‌ها استفاده می‌شوند.

۴. کامپوننت‌ها در Blazor

  • کامپوننت چیست؟
    کامپوننت‌ها بلوک‌های سازنده اپلیکیشن‌های Blazor هستند. هر کامپوننت می‌تواند شامل HTML، CSS و کدهای #C باشد.

  • ایجاد یک کامپوننت ساده: یک فایل جدید با پسوند .razor ایجاد کنید و کدهای زیر را در آن بنویسید:

    <h3>سلام، جهان!</h3>
    
    @code {
        private string message = "این یک کامپوننت ساده است.";
    }

    این کامپوننت یک عنوان و یک پیام ساده نمایش می‌دهد.

  • استفاده از کامپوننت: برای استفاده از کامپوننت در یک صفحه دیگر، کافی است نام آن را در فایل Razor دیگر فراخوانی کنید:

    <MyComponent />

۵. اتصال داده‌ها (Data Binding)

  • اتصال یک‌طرفه (One-Way Binding): برای نمایش داده‌ها در HTML، از نماد @ استفاده کنید:

    <p>@message</p>
    
    @code {
        private string message = "این یک پیام است.";
    }
  • اتصال دوطرفه (Two-Way Binding): برای اتصال دوطرفه، از دایرکتیو bind@ استفاده کنید:

    <input @bind="message" />
    
    @code {
        private string message = "این یک پیام است.";
    }

    هر تغییری در input، مقدار message را به‌روز می‌کند و بالعکس.

۶. رویدادها (Events)

  • رویداد کلیک (Click Event): برای پاسخ به رویداد کلیک، از دایرکتیو @onclick استفاده کنید:

    <button @onclick="SayHello">کلیک کنید</button>
    
    @code {
        private void SayHello() {
            Console.WriteLine("سلام!");
        }
    }
  • رویداد تغییر (Change Event): برای پاسخ به تغییرات در input، از دایرکتیو onchange@ استفاده کنید:

    <input @onchange="OnInputChange" />
    
    @code {
        private void OnInputChange(ChangeEventArgs e) {
            Console.WriteLine(e.Value);
        }
    }

۷. راه‌اندازی و پیکربندی

  • پیکربندی سرویس‌ها: در فایل Program.cs، می‌توانید سرویس‌های مورد نیاز را پیکربندی کنید:

    builder.Services.AddSingleton<MyService>();
  • استفاده از سرویس‌ها: برای استفاده از سرویس‌ها در کامپوننت‌ها، از تزریق وابستگی (Dependency Injection) استفاده کنید:

    @inject MyService myService

در ادامه حتما دانلود کنید: آموزش صفر تا صد جاوااسکریپت (رایگان)

profile name
تیم تولید محتوا

بخندید کتاب بخونید و خوب باشید تا جامعه مون به آرامش برسه. لطفا ! هر سوالی دارید در بخش نظرات مطرح کنید. ما یا سایر هموطنان عزیز پاسخ خواهیم داد. برای کمک به سایت ما و گسترش آموزش در بین هموطنان، در سایتها، وبلاگ ها و شبکه های اجتماعی لینک سایت ما را درج کنید.

مطالب پیشنهادی برای شما

محصولات مرتبط

مشاهده همه

دیدگاهتان را بنویسید

1 2 3 4 5

10 نظر درباره «آموزش Blazor از صفر تا صد (و نکات و ترفندهای مبتدی)»

  • حمزه ارکیا
    حمزه ارکیا آیا این دیدگاه مفید بود ؟

    اقا پک اموزشی جاوا اسکریپت تون خییییلی خفن بود به موقع هم ارسال شد. این موزشای رایگانتون پیش پک تون خیلی داغونن :/ ملتو گذاشتین سرکار چی ن اینا؟؟؟؟؟

    پاسخ
  • مهسا
    مهسا آیا این دیدگاه مفید بود ؟

    آموزش خیلی خوبی هست ممنونم

    پاسخ
  • مهسا
    مهسا آیا این دیدگاه مفید بود ؟

    سلام و ممنون از آموزش خوبتون
    یه سوال داشتم: در آموزش ها که با ویژوال استودیو 2019 هست، پروژه به صورت پیش فرض به سه بخش client server shared تقسیم شده. من با ویژوال استودیو 2022 کار میکنم و وقتی پروژه جدید میسازم این سه بخش رو نمیبینم، ایا لازمه پروژم رو به این سه بخش تقسیم کنم؟

    پاسخ
    • علی رشیدی

      سه تا پروژه باید خودت بسازی.
      به گیت هابم برو دانلود کن گذاشتم اونجا
      https://github.com/alirashidi1993/Blazor_WASM_CRUD_AspNetCoreWebAPI

  • باران
    باران آیا این دیدگاه مفید بود ؟

    با سلام ممنون از آموزش خوبتون
    آیا ما نمیتونیم برای آموزش blazor source کدها رو داشته باشیم ?

    پاسخ
  • محمد
    محمد آیا این دیدگاه مفید بود ؟

    سلام ممنونم بابت آموزش های خوبتون سورس کد این آموزش و رو گیت نزاشتین؟

    پاسخ
مشاهده همه نظرات
سبد خرید
سبد خرید شما خالی است
× جهت نصب روی دکمه زیر در گوشی کلیک نمائید
آی او اس
سپس در مرحله بعد برروی دکمه "Add To Home Screen" کلیک نمائید