با برنامه های Blazor Hybrid رابط کاربری دسکتاپ و موبایل بسازید

دات نت و بلزور دنیای توسعه وب و اپلیکیشن موبایل را به هم نزدیکتر می کنند.

تعهد مایکروسافت به دنیای چند پلتفرمی شاید یکی از بزرگترین تغییرات پلتفرم توسعه آن در چند سال گذشته باشد. خرید Xamarin توسط این شرکت باعث ایجاد تغییری در دریا شد که ما را به محیط توسعه مبتنی بر ویژوال استودیو امروزی رساند که از یک طرف GitHub و از طرف دیگر .NET 6 چند پلتفرمی را با برنامه‌هایی که در مقیاس در سیستم‌های Kubernetes ابری اجرا می‌شوند، آورده است. دستگاه های تلفن همراه.

اخیراً من به توسعه جانشین ابزارهای رابط کاربری فرم‌های چند پلتفرمی Xamarin نگاه کردم: .NET’s Multiplatform App UI یا MAUI. مربوط به آن یکی دیگر از فناوری‌های رابط کاربری جدید مایکروسافت طراحی شده تا آن برنامه‌های کاربردی وب در مقیاس را به شما وارد کند. دستگاه ها و روی دسکتاپ شما. Blazor Hybrid با استفاده از چارچوب انعطاف‌پذیر رابط کاربری وب Blazor، این دو فناوری را با هم ترکیب می‌کند تا راهی برای ایجاد رابط‌های کاربری بیشتر از دسک‌تاپ و تلفن همراه به شما ارائه دهد و پشتیبانی از وب را اضافه کند با کنترل های رندر شده بومی در همه پلتفرم ها. p>

وب مدرن و توسعه مدرن دست به دست هم می دهند

چیزهای زیادی در مورد این رویکرد برای رابط‌های کاربری وجود دارد. به عنوان مثال، بر اساس چیزی است که من آن را درس کلیدی دهه گذشته در وب می دانم: ابتدا باید API های خود را طراحی کنیم. این باعث می شود UI فقط یک مشتری API دیگر باشد که از REST و JSON برای برقراری ارتباط با میکروسرویس ها استفاده می کند. سپس می‌توانیم رابط‌های کاربری متفاوتی داشته باشیم که در مقابل یک بک‌اند کار می‌کنند، همه از تماس‌های یکسانی استفاده می‌کنند و تأثیر یکسانی بر سرویس ما دارند. این طراحی را ساده می کند و به ما اجازه می دهد تا معماری برنامه ها را به طور قابل پیش بینی مقیاس بندی کنیم. در همان زمان، مجموعه ثابتی از APIها به این معنی است که صاحبان سرویس می‌توانند کد خود را بدون تأثیرگذاری بر مشتریان، به‌روزرسانی و ارتقا دهند.

این رویکرد منجر به توسعه مفاهیمی مانند Jamstack شد، با استفاده از جاوا اسکریپت، APIها و نشانه گذاری برای ارائه وب سایت های استاتیک پویا، طراحی و انتشار برنامه های کاربردی وب را ساده کرد. Blazor Hybrid این مفاهیم را می گیرد و در حالی که مرورگر را نادیده می گیرد و یک سطح رندر را در کنار بقیه برنامه شما تعبیه می کند، به کد شما می آورد. می توانید در صورت لزوم به صورت آفلاین کار کنید، مدلی که هنگام کار با محیط های قفل شده مانند پلت فرم آموزشی Windows 11 SE جالب تر می شود.

Blazor Hybrid در MAUI

پشتیبانی MAUI از Blazor Hybrid یکی از ویژگی های جالب پلتفرم جدید است. آن را فراتر از مشتریان دسکتاپ و تلفن همراه سنتی گسترش می دهد تا بتوانید عناصر تجربه کاربر را با برنامه های کاربردی وب به اشتراک بگذارید. از طرف وب، این گزینه برای برنامه های ASP.NET Core وجود دارد که کد را با پروژه های دیگر به اشتراک بگذارند، حجم کاری توسعه دهندگان را کاهش می دهد و به شما امکان می دهد یک بار توسعه دهید و سپس در تمام محیط های هدف خود ارائه دهید. اگرچه پروژه‌های ASP.NET Core بعید است که بخشی از همان پروژه کد MAUI باشند، اما همچنان می‌توانند بخشی از همان راه حل باشند و در صورت لزوم می‌توان کد را بین پروژه‌ها کپی کرد.

Blazor Hybrid در حال حاضر در حال پیش‌نمایش است، اما اگر می‌خواهید دامنه برنامه‌های وب ASP.NET Core موجود را گسترش دهید، ارزش کاوش را دارد. اولین قدم واضح این است که یک برنامه MAUI برای میزبانی کد خود بسازید، اگرچه شما محدود به یک رویکرد .NET UI نیستید، به خصوص اگر روی ارائه نسخه های دسکتاپ برنامه های کاربردی وب سازمانی موجود به مشتریان ویندوز متمرکز شده باشید.

ساخت Blazor Hybrid برنامه MAUI مانند ساخت هر برنامه MAUI دیگری است. کنترل WebView2 مبتنی بر Chromium کد شما را در ویندوز میزبانی می کند. پلتفرم‌های غیرویندوزی از میزبان برنامه‌های وب خود برای محتوای Blazor استفاده می‌کنند. در عمل، این نباید هیچ مشکلی داشته باشد، زیرا Android از مرورگر Chromium استفاده می‌کند، و اگرچه Safari میزبان iOS ممکن است همه ویژگی‌های Chrome را نداشته باشد، باید از اجزای Blazor پشتیبانی کند.

اگر MAUI را به درستی در Visual Studio 2022 Preview راه‌اندازی کرده‌اید، باید گزینه ایجاد یک برنامه .NET MAUI Blazor را پیدا کنید. ایجاد این راه حل یک پروژه C# جدید با وابستگی های پلتفرم مورد نیاز برای تمام محیط های هدف راه اندازی می کند. این پروژه یک رابط کاربری ساده Blazor را تنظیم می کند که آماده اجرا و البته آماده تغییر است.

داشتن داربست از پیش ساخته شده بسیار کمک می کند، زیرا نشان می دهد که چگونه می توان از یک BlazorWebView< /a> در XAML برنامه شما و نحوه استفاده از محتوای Razor در HTML میزبان. از آنجایی که بیشتر منطق رابط کاربری برنامه شما در کد ASP.NET Core Razor میزبانی شده در WebView همراه با هر مؤلفه Blazor خواهد بود، قبل از شروع نوشتن رابط کاربری وب خود کار زیادی برای انجام دادن وجود ندارد. p>

مقدار اینجا در MAUI به اندازه اجرای کد Blazor در سمت کلاینت نیست. MAUI یک میزبان بین پلتفرمی مناسب برای کد Razor شما فراهم می‌کند، و در حالی که مهارت‌های C# شما در هر دو طرف تقسیم WebView به خوبی کار می‌کنند، آنچه مهم‌تر است ایجاد یک صفحه Blazor پاسخگو است که می‌تواند در تلفن‌ها و رایانه‌های شخصی مقیاس‌پذیر باشد.

Blazor Hybrid در سراسر Windows.NET

شما برای Blazor Hybrid محدود به MAUI نیستید. همچنین قرار است پشتیبانی شود حجم کار برای ابزارهای استاندارد UI .NET Windows بنابراین می‌توانید از آن در چارچوب‌های آشنا مانند Windows Presentation Foundation یا Windows Forms استفاده کنید. همانطور که در پیش نمایش است، باید نسخه پیش نمایش Visual Studio 2022 را با ابزارهای توسعه دسکتاپ دات نت نصب شده اجرا کنید.

هنگامی که ابزارهای خود را راه اندازی کردید، یک برنامه استاندارد WPF با استفاده از .NET 6 یا جدیدتر ایجاد کنید. (اگر دوست دارید در لبه توسعه دات نت باشید، می توانید از نسخه پیش نمایش فعلی .NET 7 استفاده کنید.) سپس، مدیر بسته WebView WPF NuGet را برای میزبانی کد Blazor خود نصب کنید. پس از نصب، می‌توانید با استفاده از Razor SDK، کدنویسی را شروع کنید تا عناصر Blazor رابط کاربری برنامه خود را بسازید.

این اکنون به شما امکان می دهد از اجزای Blazor در برنامه خود استفاده کنید، با استفاده از تکنیک های مشابهی که ما برای افزودن HTML و جاوا اسکریپت به WebView UI استفاده می کنیم. هنگامی که چارچوب یک برنامه وب را آماده کردید، می توانید از دستور Blazor’s Razor برای اضافه کردن اجزا و کدهای درون خطی در HTML خود استفاده کنید. اگر با سینتکس قدیمی ASP پیش از دات نت آشنا هستید، Razor با استفاده از سی شارپ درون خطی در HTML خود همراه با دستورالعمل های Razor برای افزودن عملکرد به دکمه ها و بارگیری اجزای نمایشگر که از کد C# شما کنترل می شوند، بسیار آشنا خواهد بود.< /p>

فراموش نکنید که XAML نمای خود را برای پیکربندی BlazorWebView که از URL محلی محتوای شما به عنوان صفحه شروع استفاده می کند، ویرایش کنید. سپس باید آماده کامپایل و اجرای هر کد Blazor باشید و از آن برای اتصال به سرویس های پشتیبان یا کار با محتوای محلی و جاسازی برنامه های وب در کد NET خود استفاده کنید.

دیدن آزمایش مایکروسافت با پلتفرم‌های رابط کاربری خود از این طریق جالب است. پس از ارائه یک دات نت چند پلتفرمی واحد، این رویکرد – ترکیب MAUI با ASP.NET Core – اکنون ارائه آن بسیار ساده تر شده است. در حالی که هنوز روزهای اولیه است، قطعاً در اینجا نوید و مدلی وجود دارد که می‌تواند رابط‌های کاربری را حتی بیشتر از چهار سیستم عامل محبوب دسکتاپ و تلفن همراه گسترش دهد.