Blazor من الصفر: الفصل 2 — أول تطبيق Blazor لك

· 2 دقيقة قراءة
Blazor .NET Web Development Series
Available in: العربية · English · Español · Français · Deutsch · Português · 한국어 · 日本語 · Русский · 中文 · हिन्दी · Polski · Türkçe · Bahasa Indonesia · Nederlands

مرحباً بك في الفصل 2 من Blazor من الصفر. إذا فاتك الفصل 1، اقرأه أولاً.

في هذا الفصل سننشئ تطبيق Blazor جديداً، نشغله محلياً، ونفهم دور الملفات المهمة.

الخطوة 1: إنشاء المشروع

من الطرفية:

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

هذا ينشئ تطبيق Blazor Web App على .NET 9 بالهيكل الافتراضي.

إذا طلبت منك الأداة اختيار نموذج التفاعلية، ابدأ بـ Interactive Server.

الخطوة 2: التشغيل محلياً

شغّل التطبيق:

dotnet watch

ثم افتح الرابط الذي يظهر في الطرفية (غالباً https://localhost:5xxx). يجب أن ترى الصفحات الافتراضية Home وCounter وWeather.

إذا عمل ذلك، فبيئة التطوير جاهزة.

الخطوة 3: فهم هيكل المشروع

هذه أهم الملفات والمجلدات التي تحتاج معرفتها أولاً:

  • Program.cs — تسجيل الخدمات وضبط HTTP pipeline.
  • Components/App.razor — المكوّن الجذري للتطبيق.
  • Components/Routes.razor — تعريف المسارات.
  • Components/Pages/ — الصفحات القابلة للتوجيه مثل Home وCounter.
  • Components/Layout/ — التخطيط المشترك (MainLayout.razor والقائمة).
  • wwwroot/ — الملفات الثابتة (CSS، الصور، favicon).
  • appsettings.json — قيم الإعدادات.

لا تحتاج لفهم كل ملف الآن. يكفي في هذه المرحلة معرفة مكان الواجهة ومكان إعداد التشغيل.

الخطوة 4: نفّذ أول تعديل

افتح Components/Pages/Home.razor واستبدل المحتوى بـ:

@page "/"

<PageTitle>Blazor من الصفر</PageTitle>

<h1>Blazor من الصفر</h1>
<p>الفصل 2 يعمل محلياً.</p>

احفظ الملف ثم حدّث المتصفح. مع dotnet watch سيظهر التغيير مباشرة.

هذا التعديل البسيط يؤكد الدورة الكاملة: تعديل -> بناء -> عرض.

الخطوة 5: اقرأ Program.cs مرة واحدة

لا تحتاج لحفظه، لكن تعرّف على الأسطر الأساسية:

  • AddRazorComponents() لتفعيل Razor components.
  • AddInteractiveServerComponents() لتفعيل المكوّنات التفاعلية على الخادم.
  • MapRazorComponents<App>() لربط المكوّن الجذري بنقاط النهاية.

هذه الأسطر توضّح كيف يبدأ التطبيق وما قدرات العرض المفعّلة.

مشاكل شائعة

إذا فشل التشغيل، فغالباً السبب أحد التالي:

  • إصدار SDK قديم: نفّذ dotnet --version وتأكد من .NET 9.
  • تحذير شهادة HTTPS: نفّذ dotnet dev-certs https --trust.
  • تعارض المنفذ: أوقف عمليات dotnet القديمة ثم أعد التشغيل.

القادم

في الفصل 3 سنتعمّق في المكوّنات: المعاملات، التركيب، وكيفية تنظيم واجهة قابلة لإعادة الاستخدام.