فايب كودينج: الدرس الخامس | ربط الواجهة بالـ API و بناء لوحة تحكم المشاريع والدفع في أداه الويب

في هذا الدرس الخامس من كورس الفايب كودينج، ننتقل إلى مرحلة ربط الواجهة الأمامية (UI) بالواجهات البرمجية (API) التي تم إنشاؤها سابقاً. مقترحات التواقيت الرئيسية (Timestamp Suggestions) | التوقيت | الوصف (بالعربية) | | :---: | :--- | | *0:00* | *مقدمة الدرس الخامس: ربط الـ UI بالـ API* | | 0:19 | مراجعة سريعة للدروس السابقة (الفكرة، البويلر بليت، بناء الـ API). | | 2:12 | استعراض أمثلة من الـ API المنجزة (Virtual Model, Watermark, Shadow). | | 4:46 | **البدء بربط الواجهة: تخطيط لوحة تحكم المشاريع**. | | 7:08 | التفكير في هيكلة قواعد البيانات (Database Workflow) والبروجكت ID. | | 8:56 | توجيه الذكاء الاصطناعي لإنشاء صفحة 'AI Studio' ضمن الداشبورد. | | 10:46 | استخدام الذكاء الاصطناعي (ChatGPT) لتحويل الداشبورد إلى نظام مشاريع. | | 17:28 | تصحيح أخطاء عدم حفظ البروجكت ID في الداتابيز (تعديل Prisma Schema). | | 27:05 | اختبار وإصلاح مشاكل عملية بناء المشروع (NPM Run Build). | | 29:15 | تعديل وإصلاح خاصية مشاركة المشاريع (Sharing) مع أعضاء الـ Organization. | | 35:31 | تحسينات بسيطة على الواجهة وإضافة روابط. | | 38:13 | *تخطيط وظيفة رفع الصور وخصم الكريديت* (Upload, Before/After Slider, Backblaze). | | 42:07 | توجيه الأمر التفصيلي للذكاء الاصطناعي لربط الرفع بالداتابيز. | | 48:13 | نجاح رفع الصورة وظهورها في منطقة العمل (Canvas). | | 50:59 | *بدء ربط واجهة الاب سكيل (Upscale) بالـ API* (وصول حد كلود الأقصى). | | 52:01 | استكمال العمل عبر ChatGPT: نجاح ربط الاب سكيل وخصم 2 كريديت. | | 58:32 | إتمام بقية الأدوات (Remove Background, Improve Quality) وتفعيل الهيستوري والإكسبورت. | | 59:46 | *البدء بتأسيس نظام الدفع (Billing)* وتفعيل الدفع اليدوي. | | 1:03:36 | كيفية تعديل خطط الدفع (Packages) في ملف السيدز (Seeds). | | 1:06:02 | **إعداد وتفعيل بوابة دفع سترايب (Stripe)**. | | 1:11:57 | اختبار عملية الدفع عبر سترايب باستخدام بطاقة تجريبية. | | 1:17:11 | إعداد وتفعيل بوابة دفع باي بال (PayPal). | | 1:23:32 | كيفية إنشاء وتفعيل أكواد الخصم (Discount Codes). | | 1:25:35 | إعداد كوبونات العروض اللايف تايم (AppSumo). | | 1:29:07 | أهمية إعداد الفواتير (Invoices) وتفاصيلها لعملاء الشركات. | | 1:33:40 | **تغيير شكل الواجهة الأمامية والـ Theme (UI/Style)**. | | 1:40:37 | توجيه الذكاء الاصطناعي لتغيير الواجهة بشكل كامل (ملفات Tailwind والـ CSS). | | 1:42:04 | خاتمة وملخص خطوات بناء الـ MVP. |