تخطَّ إلى المحتوى
مجلس الكود
دخول

من الـ Web للـ Mobile: التحوّل الذهني

الدرس 1 من 28 معاينة مجانية

الهدف

بعد هالدرس تعرف 5 فروق حقيقية بين الـ web والـ mobile، وتعرف ليش Capacitor هو الخيار الصح لك، وتعرف وين حدوده قبل ما تبدأ تكتب كود.

ليش هذا الحين؟

وصلت للمحور اللي كل اللي قبله كان يبني له.

الـ PRD اللي كتبته بالمحور 2 كان لتطبيق موبايل. والـ web app اللي بنيته بالمحور 5 ما كان منتج منفصل — كان المحرّك: قاعدة البيانات، الـ auth، الـ API. المحور هذا ياخذ المحرّك ويحطه بجيب المستخدم.

بس أكو غلطة يقع فيها كل واحد بهالنقطة: يفكر إن الـ mobile = web بس على شاشة أصغر. هالتفكير يكلفك أسابيع من إعادة الكتابة. الدرس هذا يوفّر عليك هالأسابيع — تتعلمه مرة وحدة قبل ما تلمس Capacitor.

قبل ما تكمّل، افتح الـ PRD مالك. راح تحتاجه بخطوة 3 لما نطلّع قائمة الـ native APIs.

الفكرة

الفرق الأول: اللمس مقابل الماوس

الـ web مصمّم للماوس — hover states، right-click، precision clicks. الـ mobile يشتغل بالأصابع. الإصبع دقته ±10px وما عنده hover. كل زر لازم يكون ≥44px، كل تفاعل يحتاج visual feedback فوري.

الفرق الثاني: Offline-first مقابل Always-on

الـ web يفترض إن عندك إنترنت. الـ mobile يشتغل في مترو، مصعد، صحراء. تطبيقك لازم يشتغل بدون إنترنت أو على الأقل يفشل بطريقة محترمة.

الفرق الثالث: App Lifecycle

الـ web ما عنده lifecycle — الصفحة تفتح وتقفل. الـ mobile عنده 3 حالات: foreground (الـ app مفتوح ويشتغل)، background (الـ app مخفي بس ما انقفل)، killed (الـ app وقف تماما). كودك لازم يتعامل مع الانتقال بين هذي الحالات — تحفظ state قبل الـ background، تتحقق من updates لما يرجع للـ foreground.

الفرق الرابع: Native Device APIs

الـ web ما يوصل لـ Camera بنفس الطريقة، ولا GPS بدقة عالية، ولا push notifications حقيقية، ولا Face ID. الـ mobile يعطيك كل هذا عبر plugins.

الفرق الخامس: Distribution

الـ web تنزّله على سيرفر وخلاص. الـ mobile يمر على App Store Review و Google Play Review — عملية تاخذ من 24 ساعة لـ 7 أيام وممكن ينرفض. هذا يغير كيف تخطط للـ releases.

ليش Capacitor؟

Capacitor ياخذ web app مكتوب بـ React/Next.js ويحوّله لـ .ipa (iOS) و .apk/.aab (Android) حقيقيين. مو WebView wrapper رخيص — هو native shell يحمّل web app ويعطيه وصول لكل الـ native APIs عبر plugins رسمية من Ionic.

ما تحتاج تتعلم Swift ولا Kotlin. نفس كودك، نفس مكتباتك، نتيجة native.

وين حدود Capacitor؟

الأشياء اللي Capacitor ما يكملها بشكل مريح:

  • Heavy 3D graphics أو AR (استخدم Unity أو RealityKit)
  • Bluetooth Low Energy معقد (community plugins موجودة بس unstable)
  • تطبيقات تحتاج 120fps smooth animation في كل شاشة (React Native أفضل هنا)
  • Background processing مكثف (audio streaming، GPS tracking المستمر)

لو تطبيقك مو في هذي القائمة — وغالبا مو — Capacitor هو الطريق.

سوّها

أول شي، افتح مشروعك الحالي واسأل نفسك هذي الأسئلة قبل ما تلمس Capacitor:

خطوة 1: تحقق من اللمس

زين، افتح تطبيقك على موبايل من المتصفح أول. شوف كل زر — هل حجمه ≥44px؟ لو عندك className="px-2 py-1" على زر، هذا صغير وايد. غيّره لـ px-4 py-3 على الأقل.

# فتح على موبايل: شغّل dev server وبعدين افتح localhost على نفس الشبكة
pnpm dev
# على الموبايل: http://<IP الجهاز>:3000

خطوة 2: حدد الـ Lifecycle Events اللي تهمك

بعدين فكّر — هل تطبيقك يحتاج يحفظ شي لما يروح للـ background؟ مثلا المستخدم قاعد يعبّي form، يستقبل اتصال ويرجع — هل المعلومات موجودة؟ اكتب قائمة بالـ states اللي تحتاج تحفظها.

// هالكود يشتغل بعد ما تضيف Capacitor — ارسمه الحين كتخطيط
// import { App } from '@capacitor/app'
// App.addListener('appStateChange', ({ isActive }) => {
//   if (!isActive) saveFormState()
// })

خطوة 3: قائمة الـ Native APIs اللي تحتاجها

جهّز قائمة بكل الـ native features اللي تطبيقك يحتاجها. صدق، هذي الخطوة توفر عليك أسبوع. مثال:

✓ Camera — لرفع صور المنتجات
✓ Push Notifications — لتنبيهات الطلبات
✓ Geolocation — لتحديد موقع التوصيل
✗ Bluetooth — ما نحتاجه
✗ AR — ما نحتاجه

خطوة 4: قرر Network Strategy

لا تكمل مع Capacitor قبل ما تحدد: هل تطبيقك يشتغل offline؟ وإلا يفشل بـ error message واضح؟ الاثنين مقبولين — بس لازم تقرر الحين مو بعدين.

خطوة 5: تحقق من المتطلبات

قبل الدرس الجاي، تأكد إن عندك:

# Node.js ≥18
node --version

# Xcode (Mac بس، لـ iOS)
xcode-select --version

# Android Studio
# حمّله من developer.android.com/studio

# Java 17+
java --version

لو كل هذا موجود — أنت جاهز للدرس الجاي.

تأكّد

  • فتحت تطبيقك على موبايل browser وشفت أي أزرار صغيرة
  • كتبت قائمة native APIs اللي تحتاجها (≥1 وإلا ما تحتاج mobile app)
  • حددت strategy الـ offline
  • node --version يرجع 18+

إذا خرب شي

"التطبيق يشتغل على الـ browser الموبايل بس عمري ما جرّبت Capacitor" هذا طبيعي. الـ browser والـ Capacitor app يشتركون في نفس الكود، بس الـ Capacitor app يضيف native APIs فوقه. ماكو شي يتكسر من مجرد الإضافة.

"تطبيقي يستخدم API Routes في Next.js" Capacitor يحتاج static export (output: "export"). API routes ما تشتغل في static export. لازم تنقل API routes لسيرفر منفصل (نفس Supabase أو backend موجود) قبل ما تكمل.

"ما عندي Mac ولا أقدر أبني iOS" Capacitor يبني Android على Windows/Linux بدون مشكلة. لـ iOS تحتاج Mac أو cloud build service مثل Codemagic أو GitHub Actions + macOS runner. عاد، للمرحلة الأولى ركّز على Android.

شنو بعد؟

الدرس الجاي: Capacitor: حوّل الـ Web App لـ App حقيقي — نثبّت Capacitor، نضيف iOS و Android، ونسوي أول sync. الدرس ياخذ 20 دقيقة وبنهايته عندك .apk حقيقي.

محتاج مساعدة؟ راسلنا على mj@shakesbeard.net