الصفحة الرئيسية>كود مصدر ASP>فئات أخرى
تنزيل

إنشاء تطبيق لمشاركة الصور باستخدام Blazor Web Assembly المستضاف وWeb API وgRPC وDuende Identity Server

سنقوم ببناء موقع ويب بسيط حيث يمكن للأشخاص نشر الصور والتعليقات.

  • يمكن للجميع تصفح الصور والتعليقات الموجودة.
  • يمكن للمستخدمين المعتمدين فقط تحميل الصور والتعليقات الجديدة.
  • يمكن لمالك الصورة فقط تحرير الصورة أو حذفها.
  • يمكن لمالك التعليق فقط حذف التعليق أو تحديثه.

سنقوم ببناء 3 أجزاء.

  • FrontEnd ، وهو تطبيق ويب Blazor Client مقترن بمضيف الويب الأساسي ASP.NET الخاص به.
  • ستتكون الواجهة الخلفية ، التي تم إنشاؤها باستخدام .NET 7.0، من
    • خدمة REST لإدارة الصور
    • خدمة gRPC للتعليقات
  • سيكون موفر الهوية هو مشروع Duende الخاص بنا.

1.1 - عميل الواجهة الأمامية

  • عميل بليزر
  • أتش تي أم أل 5
  • سي اس اس 3
  • افتح معرف اتصال العميل

سيتفاعل هذا المشروع مع المستخدم من خلال المتصفح من خلال إنشاء واجهة مستخدم HTML ديناميكيًا وسيتحدث مع الخادم الخاص به باستخدام gRPC Web و HttpClient .

1.2 - الواجهة الخلفية للواجهة الأمامية (BFF)

  • مضيف الويب ASP.Net الأساسي
  • يرب
  • Duende.Bff.Yarp

يستضيف هذا المشروع تطبيق Blazor Client ويخدمه. كما أنه يعمل بمثابة وكيل عكسي لإعادة توجيه المكالمات إلى الواجهات الخلفية لـ REST وgRpc.

2.1 - خدمة استراحة الصور

  • .NET 7 وحدة تحكم واجهة برمجة تطبيقات الويب
  • إطار الكيان الأساسية 7.0
  • قاعدة بيانات سكليتي
  • مصادقة عميل Duende

2.2 - تعليقات خدمة gRPC

  • خدمة .NET 7 gRPC
  • إطار الكيان الأساسية 7.0
  • قاعدة بيانات سكليتي
  • مصادقة عميل Duende

ستكون هذه المشاريع مسؤولة عن تخزين البيانات على الخادم والاستجابة لطلبات العميل من خلال http وjson وprotobuf.

  1. خادم المصادقة
    • خادم الهوية 4 (دويندي)
    • جوهر إطار الكيان

سيهتم هذا المشروع بجزء المصادقة. سيتم إصدار رموز JWT التي سيتم استخدامها بواسطة تطبيق العميل للوصول إلى الخدمات.

ما تحتاج إلى معرفته بالفعل:

  • ج #
  • أتش تي أم أل 5
  • سي اس اس 3

ما الذي ستتعلمه:

  • استراحة
  • جي آر بي سي
  • بليزر
  • وحدة تحكم ASP.NET Core 7.0 Web API
  • خدمة ASP.NET Core 7.0 gRPC
  • إطار الكيان الأساسية 7.0
  • اختيال / OpenAPI
  • كورس
  • يرب
  • المصادقة والتفويض
  • OAuth 2 وفتح معرف الاتصال
  • خادم الهوية 4 (دويندي)
  • إذن بسيط
  • ترخيص مالك المورد
  • العمارة النظيفة
  • اختبار الوحدة باستخدام bUnit
  • إمكانية التشغيل التفاعلي لجافا سكريبت

قبل أن تبدأ

في وقت كتابة هذا البرنامج التعليمي، لا يمكن استخدام .NET Core 7.0 إلا مع Visual Studio 2022. يوصى بتثبيت أحدث إصدار من Visual Studio 2022 للعمل مع .NET Core 7.0.

  • قم بتثبيت أحدث إصدار من Visual Studio 2022 مع عبء عمل ASP.NET وتطوير الويب
  • قم بتثبيت .NET Core 7.0 عن طريق تنزيل .NET Core 7.0 SDK

قد ترغب في الانتقال إلى وثائق البدء للحصول على مجموعة محدثة من الإرشادات.

سير العمل لدينا

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

كيفية متابعة هذا البرنامج التعليمي

إذا بدأت من Lab01 واتبعت كل readme.md، فيمكنك إكمال كل معمل والاستمرار في التمرين التالي باستخدام الكود الخاص بك. لا حاجة لفتح مجلدات Start أو Solution المتوفرة في هذا الريبو.

  • مجلدات Start هي نقاط البداية لكل خطوة.
  • تعد مجلدات Solution هي الإصدارات النهائية لكل خطوة، ويتم تقديمها لك فقط في حالة رغبتك في التحقق من الشكل المفترض لمشروعك في نهاية كل مختبر.

ما عليك فعله هو فتح مجلد Start المتوافق مع الدرس التطبيقي الذي تريد تجربته ( Lab01/Start لكي تبدأ من الصفر) واتباع الإرشادات التي تجدها في ملف readme.md . عند الانتهاء، لا تتردد في مقارنة عملك بالحل المتوفر في مجلد Solution .

للبدء

  1. افتح مجلد Labs
  2. انتقل إلى المجلد الفرعي Lab01
  3. انتقل إلى المجلد الفرعي Start .
  4. اتبع الإرشادات الموجودة في ملف readme.md للمتابعة

إذا كنت تريد أن ترى التطبيق النهائي

قم بإنشاء قاعدة بيانات خدمة الصور REST

  • افتح Lab15SolutionblazorPhotoSharingApplicationPhotoSharingApplication.sln في Visual Studio
  • بناء الحل
  • تأكد من أن لديك مشاريع ناشئة متعددة:
    • IdentityServer
    • استراحة
    • جي آر بي سي
    • الواجهة الأمامية.الخادم

ابدأ التطبيق

لتسجيل الدخول

  • اسم المستخدم: أليس
  • كلمة المرور: Pass123$

أو

  • اسم المستخدم: bob
  • كلمة المرور: Pass123$

ملاحظة أخيرة قبل أن نبدأ

أفترض أنك مبرمج C# مهتم ببناء تطبيق ويب. اعتمادًا على عمرك، ربما تكون قد استخدمت بالفعل صفحات asp وaspx وmvc و/أو razor وتريد الآن تجربة blazor. ربما تكون على دراية بـ HTML وCSS وربما استخدمت بعض إطارات عمل جافا سكريبت مثل Angular أو React أو Vue.

سأقوم بربط عدد كبير من الوثائق حول مفاهيم وتقنيات الويب، لذلك لا تقلق إذا لم تكن خبيرًا في مطور الويب، فيمكنك تعلم كل شيء على طول الطريق. يجب أن تتقن لغة C# على الأقل، وإلا سيكون من الصعب متابعة هذا البرنامج التعليمي. معظم الكود الذي سنكتبه سيكون في الواقع C#. سنقوم أيضًا بكتابة بعض HTML، ولكن من السهل تعلم ذلك، لذا لن يمثل ذلك مشكلة.

المختبرات

  • المختبر 01 - واجهة بليزر
    • استكشاف بنية مشروع Blazor Web Assembly وإنشاء صفحتنا الأولى
  • معمل 02 - الواجهة الأمامية: طرق عرض إضافية
    • العمارة النظيفة
    • حقن التبعية
    • استخدام مكتبات Blazor الإضافية من خلال حزم NuGet
    • الطرق
    • ربط البيانات
    • التعامل مع الأحداث
  • المختبر 03 - الواجهة الأمامية: تصميم واجهة المستخدم باستخدام MatBlazor
    • تصميم المواد
    • ماتبلازور
    • صفحات التخطيط
  • المعمل 04 - الواجهة الأمامية - مكتبات ومكونات Razor Class
    • إنشاء مكتبة فئة الحلاقة
    • استخدام مكتبة Razor Class من داخل المشروع
    • مكونات ماكينة الحلاقة
    • مكونات الوالدين والطفل
    • ملكيات
    • عمليات الاسترجاعات للحدث
  • المختبر 05 - الواجهة الخلفية: Web API مع ASP.NET Core 7.0 وVisual Studio 2022
    • بروتوكول الراحة
    • Asp.NET واجهة برمجة التطبيقات الأساسية للويب
    • وحدات التحكم
    • الإجراءات
    • الطرق
    • ملزم
    • جوهر إطار الكيان
    • JSON
    • اختيال / OpenAPI
  • معمل 06 - الواجهة الأمامية: الاتصال بالواجهة الخلفية
    • httpClient
    • تكوين هتبكلينت
    • GetFromJsonAsync
    • PostAsJsonAsync
    • PutAsJsonAsync
    • حذفAsync
    • قراءة من JsonAsync
    • كورس
    • يرب
  • معمل 07 - الواجهة الأمامية: التعليقات
    • المزيد من الهندسة المعمارية النظيفة
    • المزيد من المكونات
  • التمرين 08 - الواجهة الخلفية: gRPC مع ASP.NET Core 7.0 وVisual Studio 2022
    • المزيد من الهندسة المعمارية النظيفة
    • جي آر بي سي
    • بروتوبوف
    • gRPC في Asp.Net Core
  • معمل 09 - الواجهة الأمامية: الاتصال بالواجهة الخلفية
    • ويب جي آر بي سي
    • ويب عميل gRPC في .NET Core
    • إعدادات
    • كورس
    • يرب
  • معمل 10 - الأمان: المصادقة والترخيص
    • خادم هوية Duende
    • تكوين خدمة REST لمصادقة حامل JWT
    • تكوين خدمة gRPC لمصادقة حامل JWT
    • تكوين عميل Blazor لمصادقة JWT Bearer
    • تفويض بسيط مع سمة التفويض
    • استرداد وتمرير JWT Bearer Tokens باستخدام إطار عمل Duende.Bff.Yarp
  • معمل 11 - الأمن: الترخيص المعتمد على الموارد
    • خدمة التفويض
    • السياسات
    • متطلبات
    • معالجات
  • معمل 12 – تحسين الأداء
    • تقسيم جدول إطار الكيان
    • قم بتنزيل ملف من خدمة REST Web API
    • التخزين المؤقت للمتصفح
  • معمل 13 - التحقق من الصحة
    • شروح البيانات
    • التحقق من صحة بطلاقة في الخدمة الأساسية
    • التحقق من صحة بطلاقة في خدمة ASP.NET Core REST
    • التحقق من صحة بطلاقة في Blazor مع Blazored.FluentValidation
  • معمل 14 - وحدة اختبار مكونات Blazor باستخدام bUnit
    • اختبار الوحدة
    • السخرية
    • xUnit
    • موك
    • وحدة
  • المختبر 15 - إمكانية التشغيل التفاعلي بين Blazor وJavascript
    • IJSRuntime
    • استدعاء وظيفة JavaScript في ASP.NET Core Blazor
    • استدعاء أساليب .NET من وظائف JavaScript في ASP.NET Core Blazor
    • Blazor JavaScript عزل ومراجع الكائنات
    • نشرة
    • exif.js
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل