موقعك يمكن أن يصبح تطبيقًا: دليلك الودّي إلى Capacitor

تخيّل معي هذا المشهد: أنهيت موقعك بـ React أو Next.js، وأرسلت الرابط لصديق، فكان أول ردّ منه: «حلو! وين ألاقيه على Google Play؟». هنا يبدأ السؤال الذي مرّ على كل Frontend developer: هل أتعلّم Kotlin وSwift من الصفر؟ هل أعيد كتابة كل شيء بـ React Native أو Flutter؟ الخبر الجميل أن هناك طريقًا أقصر بكثير، اسمه Capacitor. في هذا المقال سنمشي معًا خطوة بخطوة: ما هو، وكيف يعمل، ومتى يكون فعلًا الخيار المناسب لك. Capacitor في جملة واحدة Capacitor أداة مجانية ومفتوحة المصدر من فريق Ionic، تأخذ تطبيق الويب الذي كتبته أنت (HTML وCSS وJavaScript) وتضعه داخل تطبيق native حقيقي على Android وiOS. يعني: نفس الكود الذي تعرفه، لكن النتيجة تطبيق يُنزَّل من المتجر، له أيقونة على شاشة الهاتف، ويستطيع أن يفتح الكاميرا ويرسل الإشعارات ويعرف الموقع. أنت تبني موقعًا جيدًا، وCapacitor يحوّله إلى تطبيق ويعطيه مفاتيح الهاتف. كيف يعمل؟ بدون تعقيد الفكرة كلها قائمة على ثلاث قطع، وإذا فهمتها فهمت Capacitor كله: تطبيق الويب: كودك كما هو، يعمل داخل WebView، وهو متصفح صغير مدمج داخل التطبيق. الجسر (Bridge): عندما تطلب من JavaScript شيئًا من الهاتف، مثل الكاميرا، يترجم Capacitor طلبك إلى كود native ويعيد لك النتيجة على شكل Promise عادي تمامًا. مشاريع native حقيقية: يُنشئ لك مشروع Android Studio ومشروع Xcode، وهما ملكك، تفتحهما وتعدّل عليهما متى احتجت. هل تريد أن ترى كم هو بسيط؟ هذا كل ما تحتاجه لفتح كاميرا الهاتف الحقيقية: import { Camera, CameraResultType } from '@capacitor/camera'; const photo = await Camera.getPhoto({ quality: 90, resultType: CameraResultType.Uri, }); بضعة أسطر من JavaScript تعرفها جيدًا، ولا سطر واحد من Kotlin أو Swift. لماذا يحبّه مطوّرو الويب؟ كود واحد، ثلاث منصات: الويب وAndroid وiOS من مشروع واحد، بدل ثلاثة مشاريع تتعب في مزامنتها. تبدأ بما تعرفه: مهاراتك الحالية في الـ Frontend تكفي لتطلق أول تطبيق. ميزات الهاتف جاهزة: الكاميرا والإشعارات والموقع والملفات والاهتزاز والمشاركة، عبر plugins رسمية تستدعيها مثل أي مكتبة. حضور في المتاجر: تطبيقك يُنشر على Google Play وApp Store مثل أي تطبيق آخر. لا تبدأ من الصفر: تضيفه إلى مشروعك الموجود دون أن تعيد كتابته. من الموقع إلى التطبيق في 4 خطوات جهّز مشروعك، وافتح الـ terminal، ولنبدأ: # 1) التثبيت npm i @capacitor/core npm i -D @capacitor/cli # 2) التهيئة npx cap init # 3) إضافة المنصات npm i @capacitor/android @capacitor/ios npx cap add android npx cap add ios # 4) البناء والمزامنة والفتح npm run build npx cap sync npx cap open android ومن الآن فصاعدًا، بعد كل تعديل على كود الويب يكفيك أمران: npm run build ثم npx cap sync، وتطبيقك محدَّث. التفاصيل كاملة في دليل الـ workflow الرسمي. هل هو مناسب لمشروعك؟ اختره بثقة إذا: عندك موقع أو لوحة تحكم أو تطبيق محتوى، وتريد نسخة موبايل بسرعة. فريقك فريق ويب، والوقت أو الميزانية محدودان. تطبيقك يعتمد على الشاشات والنماذج والقوائم أكثر من الرسوميات الثقيلة. فكّر مرتين إذا: تبني لعبة ثقيلة أو تطبيقًا مليئًا بالأنيميشن المعقّد. هنا قد يكون Flutter أو native خالص أنسب. أسئلة تخطر على بالك الآن هل يجب أن أعيد كتابة مشروعي؟ لا. تضيف Capacitor إلى المشروع الموجود، وكودك يبقى كما هو. هل هو مجاني؟ نعم، Capacitor مفتوح المصدر ومجاني بالكامل. هل أحتاج جهاز Mac؟ لـ Android لا، يعمل على Windows بلا مشكلة. أما بناء نسخة iOS فيحتاج Mac مع Xcode. نصائح صغيرة توفّر عليك ساعات مع Next.js أضف output: 'export'، لأن Capacitor يعرض ملفات ثابتة ولا يوجد server داخل التطبيق. صمّم للموبايل أولًا (mobile-first)، وانتبه للمساحات الآمنة حول الـ notch. جرّب على هاتف حقيقي باكرًا، فالإحساس على الجهاز يختلف عن المتصفح. تحدّي نهاية الأسبوع اختر مشروعًا صغيرًا عندك، حتى لو كان to-do list بسيطة، واتبع الخطوات الأربع أعلاه. لن يأخذ الأمر أكثر من جلسة واحدة، وستشعر بشعور مختلف تمامًا عندما ترى موقعك بأيقونة حقيقية على شاشة هاتفك. وعندما ينجح الأمر، شاركنا صورة لتطبيقك، نحب أن نرى ما بنيته. روابط تساعدك في الطريق وثائق Capacitor الرئيسية البداية: تثبيت Capacitor في مشروعك الـ Workflow: build وsync وopen الـ APIs والـ plugins الرسمية مثال: Camera plugin دليل Android · دليل iOS كيف تكتب plugin خاصًا بك