التمرين - إنشاء واجهة مستخدم بمكونات Blazor

مكتمل

في هذا التمرين، تبدأ بإنشاء تطبيق Blazing Pizza جديد لشركة توصيل البيتزا. توفر لك الشركة CSS والصور و HTML الحالية من موقعها القديم للعمل معها.

Note

تستخدم هذه الوحدة واجهة سطر الأوامر .NET وVisual Studio Code للتطوير المحلي. بعد الانتهاء من هذه الوحدة، يمكنك تطبيق المفاهيم باستخدام Visual Studio لنظام التشغيل Windows وVisual Studio لـ Mac لـ macOS. للتطوير المستمر، يمكنك استخدام Visual Studio Code لأنظمة التشغيل Windows، وLinux، وmacOS.

تستخدم هذه الوحدة النمطية .NET 9.0 SDK. تأكد من تثبيت .NET 9.0 عن طريق تشغيل الأمر التالي في الوحدة الطرفية للأوامر المفضلة لديك:

dotnet --list-sdks

يظهر إخراج مشابه للمثال التالي:

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

تأكد من إدراج إصدار يبدأ بـ 9. إذا لم يتم سرد أي منها أو لم يتم العثور على الأمر، فقم بتثبيت أحدث .NET 9.0 SDK.

إذا كنت تقوم بإنشاء تطبيق Blazor الأول ، فاتبع إرشادات الإعداد ل Blazor لتثبيت الإصدار الصحيح من .NET والتحقق من إعداد جهازك بشكل صحيح. توقف عند خطوة إنشاء تطبيقك.

إنشاء مشروع Blazor جديد

يتيح لك NET. إنشاء مشاريع جديدة باستخدام أي إصدار من Visual Studio أو أوامر الوحدة الطرفية Terminal. توضح لك التمارين التالية الخطوات باستخدام terminal وVisual Studio Code.

1. فتح Visual Studio Code.

2. افتح terminal المتكاملة من Visual Studio Code عن طريق تحديد View. ثم في القائمة الرئيسية، حدد Terminal.

3. في terminal، انتقل إلى المكان الذي تريد إنشاء المشروع فيه.

4. قم بتشغيل أمر الوحدة الطرفية Terminal المسمى dotnet:

   dotnet new blazor -o BlazingPizza
   

   ينشئ هذا الأمر مشروع خادم Blazor جديد في مجلد يُسمى BlazingPizza.

5. حدّد الملف>فتح مجلد.

6. في مربع الحوار "Open"، انتقل إلى المجلد BlazingPizza وحدد Select Folder.

تمكّنك هذه الملفات من تشغيل تطبيق Blazor وتصحيحه باستخدام أدوات تصحيح الأخطاء في Visual Studio Code.

اختبار الإعداد الخاص بك

يمكنك اختيار استخدام terminal أو Visual Studio Code لتشغيل تطبيقك.

1. في نافذة Terminal، يمكنك بدء تشغيل تطبيق Blazor باستخدام:

   dotnet watch
   

   ينشئ هذا الأمر التطبيق ثم يبدأ تشغيله. الأمر watch يطلب من donet مراقبة جميع ملفات مشروعك. أي تغييرات تجريها على ملفات المشاريع تؤدي تلقائياً إلى إعادة بناء تطبيقك ثم إعادة تشغيله.

   يجب أن يفتح المتصفح الافتراضي لحاسوبك صفحة جديدة على http://localhost:5000.

2. لإيقاف التطبيق، حدد Ctrl + C في نافذة terminal.

يمكنك أيضاً تشغيل مشروعك وتصحيحه باستخدام Visual Studio Code.

1. في Visual Studio Code، حدد F5. أو من قائمة Run، حدد Start Debugging.

   ينبغي بناء التطبيق وفتح صفحة متصفح جديدة.

2. تتبدل Visual Studio Code أيضاً إلى نافذة Run and Debug التي تتيح لك إعادة تشغيل التطبيق أو إيقافه.

   لقطة شاشة لنافذة تصحيح الأخطاء في Visual Studio Code.

3. لإيقاف التطبيق، حدد Shift + F5.

تنزيل أصول Blazing Pizza وملفات بدء التشغيل

استنساخ ملفات مشروع تطبيق Blazor الحالية لفرقك من مستودع GitHub.

1. احذف مجلد BlazingPizza باستخدام مستكشف الملفات أو في Visual Studio Code.

2. في الجهاز، انسخ ملفات العمل الحالية إلى مجلد BlazingPizza جديد.

   git clone https://github.com/MicrosoftDocs/mslearn-interact-with-data-blazor-web-apps.git BlazingPizza
   

3. شغَّل الإصدار الحالي من التطبيق. حدد F5.

   لقطة شاشة تظهر تطبيق المشغل Blazing Pizza.

صنع بعض فطائر البيتزا

يتيح مكوّن Pages/Index.razor للعملاء تحديد فطائر البيتزا التي يرغبون في طلبها وتكوينها. يستجيب المكوّن لعنوان URL الجذر الخاص بالتطبيق.

أنشأ الفريق أيضا فصولا لتمثيل النماذج في التطبيق. راجع نموذج PizzaSpecial الحالي.

1. في مستكشف ملفات Visual Studio Code، قم بتوسيع مجلد Model . ثم حدد PizzaSpecial.

   namespace BlazingPizza;
   
   /// <summary>
   /// Represents a pre-configured template for a pizza a user can order
   /// </summary>
   public class PizzaSpecial
   {
       public int Id { get; set; }
   
       public string Name { get; set; }
   
       public decimal BasePrice { get; set; }
   
       public string Description { get; set; }
   
       public string ImageUrl { get; set; }
   
       public string GetFormattedBasePrice() => BasePrice.ToString("0.00");
   }    
   

   لاحظ أن طلب البيتزا يحتوي على Nameو BasePriceDescriptionو وImageUrl.

2. في مستكشف الملفات، بادر بتوسيع Pages، ثم حدد Index.razor.

   @page "/"
   
   <h1>Blazing Pizzas</h1>
   
   

   في الوقت الحالي، لا يوجد سوى علامة H1 واحدة للعنوان. ستضيف تعليمة برمجية لإنشاء عروض بيتزا خاصة.

3. ضمن العلامة <h1>، أضف تعليمة #C البرمجية هذه:

   @code {
       List<PizzaSpecial> specials = new();
   
       protected override void OnInitialized()
       {
           specials.AddRange(new List<PizzaSpecial>
           {
               new PizzaSpecial { Name = "The Baconatorizor", BasePrice =  11.99M, Description = "It has EVERY kind of bacon", ImageUrl="img/pizzas/bacon.jpg"},
               new PizzaSpecial { Name = "Buffalo chicken", BasePrice =  12.75M, Description = "Spicy chicken, hot sauce, and blue cheese, guaranteed to warm you up", ImageUrl="img/pizzas/meaty.jpg"},
               new PizzaSpecial { Name = "Veggie Delight", BasePrice =  11.5M, Description = "It's like salad, but on a pizza", ImageUrl="img/pizzas/salad.jpg"},
               new PizzaSpecial { Name = "Margherita", BasePrice =  9.99M, Description = "Traditional Italian pizza with tomatoes and basil", ImageUrl="img/pizzas/margherita.jpg"},
               new PizzaSpecial { Name = "Basic Cheese Pizza", BasePrice =  11.99M, Description = "It's cheesy and delicious. Why wouldn't you want one?", ImageUrl="img/pizzas/cheese.jpg"},
               new PizzaSpecial { Name = "Classic pepperoni", BasePrice =  10.5M, Description = "It's the pizza you grew up with, but Blazing hot!", ImageUrl="img/pizzas/pepperoni.jpg" }               
           });
       }
   }
   

   تقوم الكتلة @code بإنشاء مصفوفة تحتوي على عروض البيتزا الخاصة. عند تكوين الصفحة، فإنها تضيف ست فطائر بيتزا إلى المصفوفة.

4. حدد F5 أو حدد Run. ثم حدد Start Debugging.

   عندما يتم تجميع التطبيق وتشغيله ، لا ترى أي شيء. لا يتم استخدام التعليمة البرمجية بواسطة أي شيء في HTML من جانب العميل. لنصلح ذلك الآن.

5. اضغط على Shift + F5 أو حدد Stop Debugging.

6. في Index.razor، استخدم التعليمة البرمجية التالية بدلاً من <h1>Blazing Pizzas</h1>:

   <div class="main">
     <h1>Blazing Pizzas</h1>
     <ul class="pizza-cards">
       @if (specials != null)
       {
         @foreach (var special in specials)
         {
           <li style="background-image: url('@special.ImageUrl')">
             <div class="pizza-info">
                 <span class="title">@special.Name</span>
                     @special.Description
                   <span class="price">@special.GetFormattedBasePrice()</span>
             </div>
           </li>
         }
       }
     </ul>
   </div>
   

   تجمع هذا التعليمة البرمجية بين محتوى HTML العادي بجانب توجيهات التكرار والوصول للأعضاء. تنشئ الحلقة @foreach علامة <li> لكل بيتزا في الصفيفة specials.

   داخل التكرار الحلقي، كل بيتزا خاصة تعرض اسمها ووصفها وسعرها وصورتها مع توجيهات الأعضاء.

7. حدد F5 أو حدد Run. ثم حدد Start Debugging.

   لقطة شاشة لقائمة أنواع البيتزا لدى blazing.

لديك الآن مكون أساسي للبيتزا يتيح للعملاء طلب بيتزا. في التمارين التالية ، يمكنك تحسين هذا المكون.