spa30

مشروع سوق

سنقوم ببناء تطبيق ويب بسيط حيث يمكن للأشخاص إدارة المنتجات التي يرغبون في بيعها.

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

سنقوم ببناء 3 مشاريع. سيكون مشروع FrontEnd عبارة عن تطبيق ويب تقدمي تم إنشاؤه باستخدام Vuejs وVue Router وVuetify، بينما سنقوم من جانب الخادم ببناء تطبيقين ويب .NET Core 3.0 باستخدام Visual Studio 2019: أحدهما سيكشف عن REST API بينما سيهتم الثاني المصادقة باستخدام Identity Server 4.

1. عميل الواجهة الأمامية
   • جافا سكريبت (ECMAScript 2015+)
   • أتش تي أم أل 5
   • سي اس اس 3
   • فيو.جي إس 2
   • راوتر فيو
   • فويتيفي
   • افتح معرف اتصال العميل
   • جلب واجهة برمجة التطبيقات
   • واجهة برمجة تطبيقات الكاميرا الأصلية

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

2. خدمة الراحة
   • .NET Core 3.0 Web API Controller
   • إطار الكيان الأساسي 3.0
   • قاعدة بيانات خادم SQL
   • مصادقة عميل خادم الهوية

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

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

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

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

• ج #
• جافا سكريبت (ECMAScript 2015+)
• أتش تي أم أل 5
• سي اس اس 3

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

• ما هو الراحة
• ما هو .NET كور
• ASP.NET الأساسية
• ما هي وحدة تحكم واجهة برمجة تطبيقات الويب
• العوسق
• الوسيطة
• متغيرات البيئة
• التكوين الأساسي لـ ASP.NET
• حقن التبعية
• جوهر إطار الكيان
• ساعي البريد
• كورس
• Vue.js
• راوتر فيو
• جلب واجهة برمجة التطبيقات
• حزمة الويب
• فويتيفي
• المصادقة والتفويض
• OAuth 2 وفتح معرف الاتصال
• خادم الهوية 4
• ترخيص مالك المورد

قبل أن تبدأ، تحتاج

• Visual Studio 2019 (إصدار المجتمع يكفي)

تأكد من تثبيت عبء العمل "تطوير .NET Core عبر الأنظمة الأساسية". يمكنك التحقق من أحمال العمل وتثبيتها عن طريق تشغيل Visual Studio Installer.

• كود الاستوديو المرئي
• العقدة

لمزيد من المعلومات حول تثبيت .NET Core

يرجى الاطلاع على https://www.microsoft.com/net/download/windows

---

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

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

يحتوي هذا المجلد على مجلد فرعي مختلف. يمثل كل مجلد فرعي مرحلة في مشروعنا. مجلدات "البدء" هي نقاط البداية لكل خطوة. مجلدات "الحل" هي الإصدارات النهائية لكل خطوة، ويتم تقديمها لك فقط في حالة رغبتك في التحقق من الشكل المفترض لمشروعك في نهاية كل مختبر. ما عليك فعله هو فتح مجلد البدء المتوافق مع الدرس التطبيقي الذي تريد تجربته (على سبيل المثال Lab01/Start للبدء) واتباع الإرشادات التي تجدها في ملف readme.md . عند الانتهاء، لا تتردد في مقارنة عملك بالحل المتوفر في مجلد الحلول.

للبدء

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

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

قم بتكوين تطبيق خادم الهوية وبدء تشغيله

• افتح Lab08SolutionMarketPlaceIdentityServerIdentityServer.sln في Visual Studio
• قم ببناء المشروع ولكن لا تبدأه من Visual Studio
• افتح موجه الأوامر ضمن المجلد Lab08SolutionMarketPlaceIdentityServer
• اكتب dotnet run /seed
• انتقل إلى http://localhost:5002 وتأكد من تشغيل المشروع

قم بتكوين خدمة REST وبدء تشغيلها

• افتح Lab08SolutionMarketPlaceMarketplaceMarketPlace.sln في Visual Studio
• قم ببناء المشروع وبدء تشغيله من Visual Studio

تكوين وبدء تشغيل عميل Javascript

• افتح Lab08SolutionMarketPlacespaclient في Visual Studio Code
• افتح نافذة طرفية
• اكتب npm install
• اكتب npm run serve

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

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