MVP Starter Kit شرح ببساطة (مع مخططات وكود حقيقي)
MVP Starter Kit: الأساسيات في مقال واحد — كود حقيقي، مخططات وخطوات ملموسة، مقتطفات من دورة تتكون من 43 درسًا.
دليل مباشر إلى الهدف: MVP Starter Kit مفكك مع مخططات وأمثلة عملية وأوامر مجربة. كل شيء من دورة منظمة من 11 فصلاً — إليك أفضلها.
- مقدمة وعقلية MVP
- التفكير والتحقق
- هندسة Starter Kit
- المصادقة والمستخدمين
- بناء جوهر MVP
CRUD مع Server Actions Next.js
الأهداف التعليمية
- فهم ما هي Server Action ولماذا تحل محل API REST لـ MVP
- كتابة إجراء إنشاء وقراءة وتحديث وحذف
- تحديث الواجهة باستخدام
revalidatePathبعد التعديل - التحقق من المدخلات من جانب الخادم قبل الكتابة في القاعدة
- فهم كيفية تأمين RLS لكل طلب تلقائياً
الفكرة: استدعاء دالة خادم من نموذج
تقليدياً، لتعديل البيانات، يرسل العميل طلب HTTP (fetch('/api/tasks', ...)) إلى مسار API، الذي يتحدث مع القاعدة ثم يعيد استجابة. تزيل Server Actions في Next.js هذه الطبقة: تكتب دالة موسومة "use server"، وتستدعيها مباشرة من نموذج أو مكون. ينشئ Next.js الطلب HTTP لك خلف الكواليس.
بالنسبة لـ MVP، هذا توفير كبير في الوقت: ملفات أقل، كود تسلسل أقل، لا إدارة يدوية لحالات التحميل لكل استدعاء. تكتب المنطق التجاري، ويتولى Next.js النقل.
عميل Supabase من جانب الخادم
كل Server Action تحتاج عميل Supabase يعرف المستخدم المتصل (عبر ملفات تعريف الجلسة). نركزه في مساعد:
مخطط Postgres وترحيلات Supabase
الأهداف التعليمية
- نمذجة الكيانات الأساسية لـ MVP في جداول Postgres
- كتابة ترحيل SQL مُصدر باستخدام CLI Supabase
- فهم وتفعيل Row Level Security (RLS) على كل جدول
- ربط البيانات بالمستخدم المتصل عبر
auth.uid() - الحفاظ على المخطط بسيطاً: نمذجة ما يطلبه MVP فقط
الفكرة: المخطط يروي ما يفعله منتجك
قبل كتابة أي سطر من كود التطبيق، اسأل نفسك سؤالاً بسيطاً: ما هي الكيانات الـ2 أو الـ3 التي يتعامل معها منتجك؟ تطبيق إدارة مهام يتعامل مع مشاريع ومهام. SaaS ملاحظات يتعامل مع ملاحظات. أداة فوترة تتعامل مع عملاء وفواتير. مخطط قاعدة البيانات هو الترجمة المباشرة لهذه الإجابة.
إغراء المبتدئ هو توقع كل شيء: وسوم، فئات، سجل، مرفقات، مشاركة. لـ MVP، نقطع. نبقي الجدول الرئيسي وعلاقته بالمستخدم، وهذا كل شيء. سنضيف الباقي عندما يطلبه عميل حقيقي.
نمذجة كيانات MVP
لنأخذ مثالاً ملموساً: MVP لإدارة مهام مشتركة. يكفي كيانان للإصدار الأول: projects وtasks. كل مشروع يخص مستخدماً، وكل مهمة تخص مشروعاً.
| الجدول | الأعمدة الرئيسية | العلاقة |
|---|---|---|
projects | id, user_id, name, created_at | يخص مستخدماً (auth.users) |
tasks | id, project_id, title, done, created_at | يخص مشروعاً |
لاحظ الاصطلاح: معرف uuid مولد تلقائياً، مفتاح خارجي للأب، created_at افتراضي. تتكرر هذه البنية لـ90% من جداول MVP.
كتابة ترحيل SQL
يُصدر Supabase المخطط عبر ملفات ترحيل SQL في supabase/migrations/. ننشئ ملفاً جديداً بـ CLI:
with check
يتحكم في الصفوف التي يمكن إدراجها أو تعديلها. يمنع مستخدماً من إنشاء مشروع باسم آخر.
anon (العام بطبيعته) قراءة قاعدتك كاملة. هذا أكبر تسرب بيانات لـ MVPs Supabase. فعّل RLS على كل جدول، بلا استثناء.تطبيق الترحيل
محلياً مع حاوية Supabase، ثم إلى القاعدة البعيدة:
Webhooks Stripe ومزامنة Supabase
الأهداف التعليمية
- فهم لماذا webhook هو المصدر الوحيد للحقيقة في الدفع
- إنشاء مسار webhook في Next.js
- التحقق من توقيع Stripe لرفض الطلبات المزيفة
- تحديث جدول الاشتراك في Supabase
- اختبار webhook محلياً بـ CLI Stripe
الفكرة: Stripe يُعلمك عند حدوث شيء
بعد الدفع، يرسل Stripe طلب HTTP إلى URL تعلنه: إنه webhook. يحمل الطلب حدثاً (checkout.session.completed، customer.subscription.deleted، إلخ). هذه المعلومة الوحيدة الموثوقة: صفحة العودة في المتصفح قد تُحدث أو تُغلق أو تكون مزيفة، لكن webhook يأتي من خوادم Stripe.
المبدأ إذن: لا تمنح الوصول المدفوع إلا عندما يخبرك webhook. أكثر متانة ولا يمكن الالتفاف عليه من مستخدم ذكي.
جدول الاشتراك في Supabase
يغطي هذا المقال المقتطفات الأكثر فائدة — الدورة الكاملة MVP Starter Kit (11 فصلاً، 43 درساً، تمارين مصححة ومشروع نهائي) تأخذك إلى النهاية.
./acceder-au-cours-complet cours gratuit : Vibe CodingFAQ
كم من الوقت لتعلم MVP Starter Kit؟
هل هناك متطلبات مسبقة؟
من أين تبدأ عملياً؟
📬 هل تريد تلقي هذا النوع من الأدلة أسبوعياً؟ اشترك مجاناً — كود حقيقي، صفر ثرثرة.