E-Commerce WEB App in C# [Arabic] بناء تطبيق مبيعات كامل

Name: E-Commerce WEB App in C# [Arabic] بناء تطبيق مبيعات كامل
Rating: 4.3 (17 reviews)

بناء تطبيق ويب مبيعات كامل من الألف للياء بإستخدام ASP .NET API و Blazor

Created byAhmed Mohamady

Last updated 3/2026

Arabic

What you'll learn

تعلم بناء المشاريع العملاقة بشكل إحترافي كما في الشركات المحترفة
تعلم بناء تطبيق مبيعات كامل من الألف إلي الياء بتكنولوجيا ASP .Net Core
تعلم بناء واجهات التطبيقات بإستخدام Blazor و ربطها مع الجانب الخلفي للتطبيق
تعلم تناقل البيانات بين back-end و front-end بشكل أمن و إحترافي
تعلم طرق حمياة التطبيق و أستخدام الأمان في الدخول و الصلاحيات الخاصة بكل مستخدم

Course content

11 sections • 88 lectures • 13h 5m total length

Theoretical introduction to the course مقدمة نظرية عن الكورس8:24
في تلك التحلقة نقوم بعمل مقدمة نظرية و تحليل بسيط عن التطبيق الذي سوف نقوم ببنائة خلال حلقات الكورس
Required information to pass the course المطلوب لكي تجتاز الكورس2:46
في تلك الحلقة نقوم معا بإستعراض المعلومات و الدورات الأخري المساعدة و الهمه في إجتياز هذا الكورس

Create the api project إنشاء اللمشروع الأساسي7:09
في هذه الحلقة نقوم معا بإنشاء المشروع الأساسي لبناء التطبيق
Add the backend Data Transfer Objects DTOs إضافة كائنات نقل البيانات6:21
في هذه الحلقة نقوم معا بعمل فئات خاصة لنقل البيانات بين الجزء الخلفي للبتطبيق و الجزء الأمامي
Installing Entity Framework Core تثبيت بيئة عمل التعامل مع قاعدة البيانات9:34
خلال تلك الحلقة نقوم معا بشرح طريقة تثبيت أدوات الواصل مع قواعد البيانات في المشروع
Set configurations for db repository وضع بعض قواعد التعامل مع قاعدة البيانات8:19
في خلال تلك الحلقة نتعلم معا كيف نضع قواعد التواصل مع قاعدة البيانات للإستعلام و الإضافة الحذف و غيرها
Build the connection string script بناء نص الإتصال مع قاعدة البيانات6:49
في هذه الحلقة نقوم معا بوضع قواعد بناء نص الإتصال مع قواعد البيانات
Response structure هيكل الاستجابة5:45
بناء بعض هياكل الإستجابة للتعامل مع النسخه الأماميه من التطبيق
Link different models with auto-mapper الربط بين الكائنات بإستخدام أداه التقريب12:05
نقوم بإستخدام أداه جديده لكي تقوم بالربط بين الكائنات عبر خريطة الأسماء
Implement the products service كود تعديل المنتجات علي التطبيق8:03
في هذه الحلقة نقوم بعمل موديول خدمات لإضافة التعديل علي الأصناف في التطبيق
Create Products Controller إنشاء أدوات التحكم في المنتجات11:42
في هذه الحلقة نقوم بإنشاء أدوات تحكم للتحكم في منتجات و الربط بين النسخه الخلفيه و الماميه من التطبيق
Migrate and update the database إنشاء قاعدة البيانات الخاصة بالمشروع11:31
في تلك الحلقة نقوم معا بعمل إنشاء لقاعدة البيانات
Install swagger ui in visual studio api طريقة تركيب سواجر علي المشروع4:09
في هذه الحلقة نقوم بتهيئه نظام سواجر لمراقبة التحديثات مع ال API
Test and debug the main API أختبار و تصحيح الأخطاء الأولية10:20
اختبار وتصحيح أخطاء واجهة برمجة التطبيقات الرئيسية

Create Exceptions handler middleware و ضع نظام لتتبع الأخطاء و معرفتها10:39
في تلك الحلقة نقوم بعمل برنامج وسيط لكي يتتبع أخطاء التطبيق و نقوم بمعرفتها
Implement Exceptions middleware in pipeline تنفيذ البرامج الوسيطة في التطبيق5:02
في تلك الحلقة نقوم بظبت إعدادات النظام عن طريق خط الإمدادات الرئيسي
Test Exceptions middleware عمل إختبار للأداه الوسيطه6:10
في تلك الحلقة نقوم بإختبار بسيط للأداه الوسيطة
Explanation of the benefits of making app log شرح نظرية سجل التطبيق8:51
في تلك الحلقة نقوم بعمل شرح نظري لأهميه و فائدة سجل التطبيق
Install the loggers libraries تثبيت المكتبات المساعده للسجل3:25
في تلك الحلقة نقوم بتثبيت بعض المكتبات التي سوف نستخدمها في بناء سجل التطبيق
Implement the app logger in the main pipeline تنفيذ سجل التطبيق10:09
في هذه الحلقة نقوم بعمل الإعدادات اللازمه لوضع السجل في منطقه تشغيل التطبيق الأساسيه
Test Logger and get log file إختبار سجل التطبيق و تسجيل بعض الأخطاء10:25
في تلك الحلقة نقوم بعمل إختبار بسيط للأكواد المسؤله عن تجميع ملف سجل النظام
Solving cross-origin resource sharing (CORS) problem حل مشكلة مشاركة المصادر7:06
في هذه الحلقة نقوم بشرح مشكله مشاركة المصادر و أيضا نقوم بشرح طريقة تفادي تلك المشكله

Introduction to Identity on ASP.NET Core مقدمة عن نظام الهويه9:24
في تلك الحلقة نقوم معا بعمل مقدمة بسيطه عن نظام الهويه المسخدم في بناء التطبيق
Introduction on authorization and authentication مقدمه عن نظام المصادقة7:12
في تلك الحلقة نقوم بوضع بعض الشرح النظري عن إستخدام المصادقة و التفويف في إي أس بي دوت نيت
Install ASP .Net core identity libraries تحميل المكتبات المساعدة لنظام الهويه4:01
في تلك الحلقة نقوم بتنصيب المكتبات المساعدة لنظام الهويه في التطبيق
Configure user identity options تكوين خيارات هوية المستخدم11:35
في تلك الحلقة تقوم بعمل الخيارات الأساسية لهويه المستخدم
Building role interfaces بناء واجهات تحقيق الصلاحيات10:08
بناء بعض الواجهات الخاصة بوضع القواعد للمستخدمين
Create the User management interface بناء واجهة التحكم في المستخدمين15:33
خلال تلك الحلقة نقوم بصنع واجهة و تنفيذها لكي نتحكم بيها في المستخدمين
Implement the token management إدارة رموز التواصل15:19
في تلك الحلقة نقوم بعمل أدوات لكي تدير الحصول علي رموز التواصل بين الجهه الأماميه و الخلفيه للتطبيق
Create Authentication service Interface إنشاء واجهة خدمة المصادقة9:22
في تلك الحلقة نقوم معا بعمل واجهة متخصصة في خدمات المصادقة و التسجيل في التطبيق
Set Login and user validation تعيين تسجيل الدخول والتحقق من صحة المستخدم10:54
في تلك الحلقة نقوم بتعيين بعض الشروط لتسجيل الدخول المستخدم
Implement Authentication service تنفيذ خدمة المصادقة9:28
حلقة خاصة لبناء أكواد المصادقة
Create registration method إنشاء داله تسجيل الدخول8:43
في تلك الحلقة نقوم بعمل داله خاصه لتسجيل الدخول في التطبيق
User Login method دالة تسجيل الدخول9:31
في هذه الحلقة نقوم بإنشاء داله لتسهيل دخول المستخدم إلي النظام
Create Authorization controller إنشاء وحدة تحكم التفويض5:47
حلقة بسيطه عن إنشاء وحدة التحكم في التفويض و الدخول للتطبيق
Migrate identity database بناء قاعدة بيانات المستخدمين11:54
في هذه الحلقة نقوم بعمل migrate
لقاعدة البيانات لكي نقوم بإنشاء الجداول الخاصة بالمستخدمين
Debugging the registration method إختبار و إصلاح دالة التسجيل في التطبيق13:01
في تلك الحلقة نقوم معا بعمل إختبار للأكواد المستخدمه في تسجيل الدخول للتطبيق و أيضا نقوم بتصحيح الأخطاء
Debugging the login method تصحيح أخطاء طريقة تسجيل الدخول9:44
نقوم في تلك الحلقة بعمل إختبار و تصحيح أخطاء نظام الدخول للتطبيق
Finalize the authentication section الانتهاء من قسم المصادقة7:12
في هذه الحلقة نقوم بتصحيح مشكله الحلقة الفائته و نقوم بختم قسم المصادقة

Introduction about payment app مقدمة عن تطبيق الدفع4:20
في هذه الحلقة نقوم بعمل مقدمه نظرية عن طرق الدفع في تطبيقات الويب
Create payment database بناء قاعدة بيانات نظام الدفع9:01
خلال تلك الحلقة نقوم بإعداد الجداول الأساسية لنظام الدفع في التطبيق
Create payment service إنشاء خدمة الدفع8:33
في هذه الحلقة نقوم معا ببناء خدمات الدفع في التطبيق
Payment controllers إنشاء أدوات الدفع11:13
في هذه الحلقة نقوم معا بكتابه أكواد أدوات الدفع

Create cart system services إنشاء خدمات عربة التسوق9:16
تشمل الحلقة بناء بعض الجداول الخاصة بعربة التسوق و أيضا الخدمات الخاصة بها
Create the cart main service إنشاء ملف عربة التسوق الرئيسي6:03
في هذه الحلقة نقوم بإنشاء ملف خدمات عربة التسوق الرئيسية
Implement do checkout function تنفيذ دالة الدفع علي التطبيق10:53
معا في تلك الحلقة نقوم بتنفيذ داله دفع الأموال ألي التطبيق
Create cart controller إنشاء دالة التحكم في عربة التسوق7:27
في هذا القسم نقوم معا ببناء نموزج التحكم في عربة التسوق للربط بين واجهة التطبيق و الجهة الخلفية
End of back-end section نهاية القسم الخلفي1:19
خلال تلك الحلقة نستعرض ما وصلنا له من تقدم خلال المشروع و أيضا نشرح مستقبل الكورس
Add Get product by Category حلقة إضافية لجلب الأصناف بالمجموعات9:48
خلال تلك الحلقة نضيف دالة لإرجاع البضائع بالمجوعات حسب تصنيفها

Create Blazor project إنشاء مشروع بلازور4:29
نقوم سويا في هذه الحلقة بإنشاء أول مشروع بلازور بإستخدام الفيجوال إستوديو
Benefits of building UI with Blazor فوائد بناء الواجهات بإستخدام بلازور7:19
خلال هذه المحاضرة نستعرض أحد أهم فوائد بناء الواجهات بإستخدام تقنية بلازور
Install front-end dependencies libraries تثبيت المكتبات الأساسية لواجهة التطبيق9:34
في هذه الحلقة نقوم بعمل حلقة عن المكتبات التي سوف نستخدمها في بناء واجهات التطبيق
Fixing the 'browser-wasm' runtime problem حل مشكله مكتابات وسم7:44
حل مشكله مكتبة wasm الخاصة بواجهة بلازور
Create interface Token Service إنشاء ملف خدمات التشفير في الواجهة9:28
خلال تلك الحلقة نقوم معا بعمل ملف للأدوات التي تساعد في إنشاء رموز التشفير في واجهة المستخدم
Create the Http Client helper إنشاء مساعد عميل الواجهة6:12
فيهذه الحلقة نقوم معا بعمل ملف مساعد للوصول من الواجهة للجه الخلفية
Create API call helper إنشاء أداه للمساعدة في التواصل6:21
في هذه الحلقة نقوم بإنشاء أداه للمساعده في ربط الواجهات مع الجهات الخلفية في التطبيق
Create front-end services إنشاء وحدات المساعده في التطبيق الأمامي12:28
خلال تلك الحلقة نقوم بإنشاء بعض مكونات أدوات خدمات الجهات الأماميه من التطبيق
Complete the front-end services إكمال وحدات المساعدة في التطبيق الأمامي7:48
في تلك الحلقة نقوم بإكمال الوحدات المساعدة في التطبيقات الأماميه
Create authentication services إنشاء دوال المصادقة8:57
في تلك الحلقة نقوم معا بعمل دوال لإتمام المصادقة علي المستخدمين من ناحيه الواجهات الأماميه
Create Custom Authentication Provider إنشاء موفر مصادقة مخصص9:36
Create UI Token handler إنشاء معالج رموز لواجهة المستخدم10:26

Create the login component إنشاء أداة تسجيل دخول المستخدم8:22
في هذه الحلقة نقوم معا بعمل أداه بسيطه بإستخدام بلازور للتسجيل الدخول في التطبيق
Create the logout component إنشاء أداة تسجيل الخروج من التطبيق8:45
في هذه الحلقة نقوم معا بعمل أداه لتسجيل الخروج من التطبيق
Download free CSS template front-end أستيراد أكواد جاهزة لعمل الواجهات2:43
في تلك الحلقة نقوم معا بالبحث عن واجهة رسومية جاهزه لكي نستخدمها كواجهة للمشروع
Add CSS Template to the project إضافة ملفات الواجهة في المشروع7:10
في هذه الحلقة نقوم بتركيب ملفات أدوات الواجهات إلي المشروع الرئيسي
Create Blazor pages components إنشاء أدوات محتوي الصفحات10:52
في هذه الحلقة نقوم معا بعمل للأدوات التي سوف تكون محتوي للصفحات الخاصة بالتطبيق
Add Blazor components to home page إضافة المكونات للصفحة الرئيسية6:40
خلال تلك الحلقة نقوم معا بإضافة يعض المكونات للصفحة الرئيسية
Add search component إضافة أداة البحث لصفحة التطبيق8:04
في تلك الحلقة نقوم بإضافة أداه مخصوصة مساعده في البحث عن الأصناف
Add the authentication view إضافة أداة التحقق في الصفحة الرئيسية7:26
في هذه الحلقة نقوم معا بإضافة أداة لكي يتم التحقق من المستخدم في الصفحة الرئيسية
Set Search for product code وضع كود البحث عن الأصناف9:37
في هذه الحلقة نقوم بوضع الأكواد النهائية لكي نبحث عن الأصناف في قاعدة البيانات
Create The product component إنشاء وحدة الأصناف الرئيسية علي الشاشة15:35
في هذه الحلق نقوم معا ببناء الوحدة التي سوف يظهر عليها الصنف أو المنتج علي الشاشة الخاصة بالتطبيق
Set the pages routes تعيين مسارات الصفحات5:17
خلال تلك الحلقات سنقوم بتعيين مسارات الصفحات للتطبيق

Debugging and fixing the user interface استكشاف أخطاء واجهة المستخدم وإصلاحها14:13
خلال تلك الحلقة نقوم بعمل إختبار لواجهة المستخدم و إصلاح الربط بينها و بين البرنامج الخلفي
Fixing the category main page إصلاح الصفحة الرئيسية للفئة7:04
في هذه المحاضرة نقوم معا بعمل تصلبليح لببعض الأخطاء في شاشة الفئات الرئيسية
Debugging and fixing login page تتبع أخطاء صفحة تسجيل الدخول و إصلاحها16:34
خلال تلك الحلقة سنقوم بتتبع أخطاء صفحة تسجيل الدخول و المصادقة علي المستخدمين و إصلاح الأخطاء معا
Create new cookies serves إنشاء وحده جديدة للتعامل مع الكوكيز9:38
بسبب التداخل مع واجهة العمل قررنا تغير الأكواد المستخدمه في التعامل مع الكوكيز "ملفات الإرتباط" و بنائها من جديد
Fixing the authentication UI إصلاح واجهة المستخدم للمصادقة5:31
في تلك الحلقة نقوم بعمل إصلاحات أخيرة في نظام المصادقة حتي يظهر المستخدم في النظام
Create Toast Message Service إنشاء خدمة لرسائل التنبيه9:42
في هذه الحلقة سنتعلّم كيفية إنشاء خدمة Toast Message داخل تطبيق
E-Commerce باستخدام Blazor، وذلك لعرض رسائل تنبيه للمستخدم بشكل احترافي
عند تنفيذ العمليات المختلفة مثل الإضافة، الحفظ، أو حدوث أخطاء.
سنقوم بإنشاء خدمة مستقلة لإدارة رسائل التنبيه، وطريقة استخدامها داخل
الـ Components، مع شرح أفضل الممارسات لتحسين تجربة المستخدم
وتوحيد أسلوب عرض الرسائل داخل التطبيق.
Create User Registration Page إنشاء صفحة تسجيل المستخدم6:22
في هذه الحلقة سنتعرّف على كيفية إنشاء شاشة تسجيل مستخدم جديد (Registration)داخل تطبيق E-Commerce باستخدام Blazor.
سنقوم ببناء واجهة التسجيل، وربط الحقول بالـ Model، والتحقق من صحة البيانات(Validation)، مع شرح كيفية تجهيز الشاشة لتكون قابلة للربط لاحقًامع نظام تسجيل الدخول والباك إند.

Create Admin Panel Base إنشاء الأساس الخاص بلوحة التحكم6:44
في هذه الحلقة سنقوم بإنشاء الهيكل الأساسي للـ Admin Panel داخل تطبيقE-Commerce باستخدام Blazor، مع إضافة الملفات والتنظيم الصحيح للمجلداتوتجهيز اللوحة لتكون جاهزة لإضافة شاشات الإدارة المختلفة لاحقًا.
Create Category Module (C#) إنشاء وحدة إضافة التصنيفات9:22
في هذه الحلقة سنقوم بإنشاء صفحة إضافة التصنيفات (Category) داخل لوحة تحكمالمدير باستخدام C#،
مع تجهيز الـ Model والـ Logic اللازمين تمهيدًالربط الصفحة بالواجهة وقاعدة البيانات في الحلقات القادمة.
Complete Category Page & CRUD إضافة HTML وتنفيذ عمليات الكاتيجوري17:59
في هذه الحلقة سنكمل بناء صفحة إدارة التصنيفات (Category) داخل لوحة التحكم بإضافة كود HTML في صفحة Blazor، وتنفيذ واختبار عملياتCRUD (إضافة، تعديل، حذف، عرض) للتأكد من عمل الكاتيجوري بشكل كامل.
Fix Backend Integration Issues حل مشكلات الربط مع الباك إند13:31
في هذه الحلقة سنتعامل مع بعض المشكلات الشائعة أثناء ربط تطبيق Blazorبالـ Backend، مع شرح أسباب الأخطاء وطريقة تحليلها وحلها لضمان عمل العمليات بشكل صحيح داخل لوحة التحكم.
Fix Category Update Save Issue حل مشكلة حفظ تعديل الكاتجوري4:18
في هذه الحلقة سنقوم بحل مشكلة عدم حفظ التعديلات على الكاتجوري داخل التطبيق، حيث سنقوم بتحليل سبب المشكلة سواء من جهة الـ Backend باستخدام ASP.Net أو من خلال الـ Frontend باستخدام Blazor، ثم نطبق الحل الصحيح لضمان تحديث البيانات بشكل سليم وانعكاسها مباشرة في واجهة المستخدم.
Build Products CRUD Screen بناء شاشة إدارة الأصناف (CRUD)15:55
في هذه الحلقة سنقوم ببناء شاشة إدارة الأصناف (Products) بشكل كامل، حيث سنطبق عمليات الـ CRUD (إضافة - عرض - تعديل - حذف) باستخدام ASP.Net في الـ Backend وBlazor في الـ Frontend، مع ربط الواجهة بقاعدة البيانات وتنفيذ العمليات بشكل عملي داخل التطبيق.
Fix Category Not Showing in Products حل مشكلة ظهور الكاتجوري10:24
في هذه الحلقة سنقوم بحل مشكلة عدم ظهور الكاتجوري داخل قائمة المنتجات، حيث سنقوم بتتبع مصدر المشكلة سواء من الـ Backend في ASP.Net أو من الـ Frontend في Blazor، مع التأكد من صحة الربط بين البيانات (Relations) وطريقة جلبها وعرضها بشكل صحيح. كما سنتناول أيضًا مجموعة من المشكلات المتنوعة التي قد تظهر أثناء تطوير شاشة المنتجات، ونتعلم كيفية تحليلها وحلها بطريقة عملية.
UI & Products Display Fixes تحسين عرض المنتجات والواجهة12:30
في هذه الحلقة سنقوم بتنفيذ مجموعة من التحسينات والإصلاحات على عرض المنتجات داخل التطبيق، بالإضافة إلى تحسين تجربة المستخدم في الواجهة (UI)، حيث سنعمل على ضبط طريقة عرض البيانات، معالجة بعض المشاكل البصرية، وتحسين تنظيم العناصر داخل الصفحات باستخدام Blazor وربطها بشكل أفضل مع الـ Backend المبني بـ ASP.Net.

Requirements

معرفة قويه بلغة ال C#
معرفة قويه بأدوات .NET مثل entity framework and LINQ
معرفة بمعمارية ASP .NET API
معرفة ولو بسيطه بأداه بناء الواجهات Blazor

Description

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

و أيضا أخترنا لغات برمجة من أكتر لغات البرمجة المنتشرة علي مستوي العالم و هي لغة السي شارب و قررنا بناء التطبيق بإستخدام معمارية ASP .Net API و أيضا واجهات تطبيق بإستخدام Blazor و الذي أصبح حاليا من أكتر أدوات بناء الواجهات عبر العالم.

الكورس مكون من عده نقاط وهي
1- أولا سنقوم بالتعرف علي التطبيق عبر عمل تحليل و رسم مبسط للتطبيق.

2- نقوم بإنشاء تطبيق Back-end بإستخدام معمارية ASP .NET API.
3- نقوم ببناء قواعد البيانات للتطبيق بإستخدام entity framework.
4- يتم تنفيذ قواعد البيانات علي قواعد بيانات Microsoft SQL Server.
5- نقوم بعمل أقسام للتطبيق للبضائع و المشتريات من داخل التطبيق.
6- بعد ذالك نقوم ببناء واجهات التطبيق بإستخدام Blazor.
7- سنتعلم طريقة ربط الواجهات الخلفية Back-end و الواجهات الأمامية Front-end.
8- سنتعلم طرق الحماية و تصنيف المستخدمين داخل التطبيق.

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

Who this course is for:

لكل شخص يريد أن يطور نفسه في مجال برمجه الويب
لكل شخص يبحث عن ترقية أو عمل جديد في مجال ASP .Net MVC Core
لكل شخص يريد أن يتعلم باء تطبيق كامل بأسلوب Clean code
لكل شخص يطمح في مستقبل أفضل في مجال برمجه ال .NET

E-Commerce WEB App in C# [Arabic] بناء تطبيق مبيعات كامل

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 11min

Create Backend api application بناء التطبيق الأساسي12 lectures • 1hr 42min

Handle the backend Utilities بناء البرمجيات المساعدة8 lectures • 1hr 2min

User authentication and authorization المصادقة و الصلاحيات للمستخدمين17 lectures • 2hr 49min

Payment system in app نظام الدفع في التطبيق4 lectures • 33min

Cart system نظام عربة التسوق6 lectures • 45min

Create Blazor user interface إنشاء الواجهة بلازور12 lectures • 1hr 40min

Building UI blazor components بناء مكونات واجهة المستخدم11 lectures • 1hr 31min

Improve UI/UX interface تحسين واجهة المستخدم/تجربة المستخدم7 lectures • 1hr 9min

Admin Panel Development إنشاء لوحة تحكم المدير (Admin Panel)8 lectures • 1hr 31min

Requirements

Description

Who this course is for: