الهدف
بعد هالدرس عندك Supabase Realtime يسجّل تغييرات فورية بين الـ mobile والـ web، بنيت optimistic UI يحدّث الشاشة قبل ما ينكتب في الـ database، وتعرف تحل conflict لما يعدّل مستخدم نفس البيانات من جهازين.
ليش هذا الحين؟
كثير من المؤسسين يبنون mobile app منفصل تماما عن web app — بكودين ومنطقين مختلفين. هذا غلط يكلفك أسابيع من الـ sync bugs. الـ Capacitor app بطبيعته "thin client" — منطق العمل يبقى على السيرفر، والـ client بس يعرض. هذا يعني الـ mobile والـ web يتشاركون نفس الـ backend وغالبا نفس قاعدة البيانات بدون أي تعقيد إضافي.
الفكرة
Architecture الصحيح:
Next.js (Web) ←→ Supabase ←→ Capacitor (Mobile)
↑ ↑
Server-side logic Thin client
API Routes بس UI + events
الـ business logic (validation، permissions، pricing) تبقى في Supabase RLS policies أو Next.js API Routes — مو في الـ mobile app. الـ mobile app يستدعي APIs، يعرض نتائج، يرسل events.
Optimistic UI:
عند كل تغيير، حدّث الـ UI فورا محليا وبعدين دزّ للسيرفر. لو فشل السيرفر، ارجع للـ state القديم. هذا يخلي التطبيق يبين سريع حتى على اتصال بطيء.
Conflict Resolution:
لو فتح نفس المستخدم الـ web والـ mobile وعدّل نفس السجل — أي نسخة تفوز؟ القاعدة الأبسط: Last Write Wins باستخدام updated_at timestamp. لو تحتاج شي أعقد (collaborative editing) استخدم CRDTs — بس ما تحتاجها في 99% من الـ apps.