تسمح تقنيات الويب الحديثة بتشغيل التطبيقات ليس فقط داخل المتصفح، ولكن أيضًا كتطبيقات حقيقية على الهواتف الذكية. باستخدام CapacitorJS، يمكن تحويل تطبيق ويب تم تطويره باستخدام React أو Vue أو Angular أو JavaScript إلى تطبيق Android وiOS يمكن نشره على Google Play Store وApple App Store.

والنقطة الأهم هي:

Capacitor لا يجبرك على إعادة كتابة تطبيق الويب الخاص بك كتطبيق Native من الصفر. بل يسمح بتشغيل تطبيق الويب الحالي داخل بيئة تطبيقات الهاتف الأصلية، مع توفير إمكانية الوصول إلى وظائف الجهاز الأصلية.

1. ما وظيفة CapacitorJS؟

لنفترض أن لديك تطبيق React موجودًا بالفعل:

React
HTML
CSS
JavaScript
API
IndexedDB

في الوضع الطبيعي يعمل التطبيق داخل المتصفح.

مع Capacitor تصبح البنية:

                    تطبيق React
                         │
                         ▼
                      Capacitor
                    /          \
                   /            \
                  ▼              ▼
             Android            iOS

ويستمر تطبيقك في العمل على الويب، بينما يمكن استخدام قاعدة الشيفرة نفسها لإنشاء تطبيقات Android وiOS.

2. Capacitor ليس إطارًا لبناء واجهة المستخدم

من المهم عدم اعتبار Capacitor إطارًا مشابهًا لـ React Native.

وظيفته مختلفة.

React
   ↓
يبني واجهة المستخدم

Capacitor
   ↓
يشغل تطبيق الويب داخل بيئة Native
   ↓
يوفر الوصول إلى Native APIs

React يبقى React، وVue يبقى Vue.

Capacitor يعمل فوق تطبيق الويب الموجود لديك.

كما أنك لست مضطرًا إلى استخدام Ionic. يمكن استخدام Capacitor بشكل مستقل مع أطر عمل الويب الحديثة.

3. كيف يعمل Capacitor؟

أسهل طريقة لفهم Capacitor هي فهم مفهوم WebView.

يحتوي تطبيق الهاتف على WebView يتم بداخله تشغيل تطبيق الويب.

┌─────────────────────────────┐
│        Android / iOS        │
│                             │
│   ┌─────────────────────┐   │
│   │       WebView       │   │
│   │                     │   │
│   │      React App      │   │
│   │                     │   │
│   │   HTML / CSS / JS   │   │
│   └──────────┬──────────┘   │
│              │              │
│           Capacitor          │
│              │              │
│   ┌──────────▼──────────┐   │
│   │    Native APIs      │   │
│   │                     │   │
│   │ الكاميرا             │   │
│   │ GPS                 │   │
│   │ الإشعارات            │   │
│   │ الملفات              │   │
│   │ الاهتزاز             │   │
│   │ الشبكة               │   │
│   └─────────────────────┘   │
└─────────────────────────────┘

يعمل تطبيق React داخل WebView.

أما Capacitor فيعمل كجسر بين WebView ونظام التشغيل.

4. لماذا يعتبر تطبيقًا Native؟

لأنه ليس مجرد فتح موقع الويب داخل متصفح.

على سبيل المثال، يمكن لتطبيق React استدعاء:

Camera.getPhoto()

ثم يقوم Capacitor بالتواصل مع واجهات الكاميرا الأصلية في Android أو iOS.

وبذلك يمكن استخدام واجهة JavaScript مشتركة، بينما يتولى Capacitor التعامل مع الاختلافات الخاصة بكل منصة.

5. ما هي Capacitor Plugins؟

تعتبر Plugins من أهم أجزاء Capacitor.

يمكن اعتبارها:

جسرًا بين JavaScript ووظائف الجهاز الأصلية.

ومن أمثلتها:

• الكاميرا

• نظام الملفات

• تحديد الموقع الجغرافي

• الإشعارات

• الشبكة

• الاهتزاز

• الإعدادات

• Push Notifications

• المشاركة

• معلومات الجهاز

• اتجاه الشاشة

مثال:

import { Haptics, ImpactStyle } from '@capacitor/haptics';

await Haptics.impact({
    style: ImpactStyle.Medium
});

وبذلك يمكن لشيفرة JavaScript تشغيل وظيفة Native دون الحاجة إلى تنفيذ APIs الخاصة بـ Android وiOS بشكل مباشر.

6. هل يمكن استخدام كاميرا الهاتف؟

نعم.

يمكنك السماح للمستخدم:

• بالتقاط صورة؛

• اختيار صورة من المعرض؛

• رفع صورة شخصية؛

• التقاط صور للمستندات.

مثال:

الصورة الشخصية
      │
      ▼
   الكاميرا
      │
      ▼
    الصورة
      │
      ▼
     React
      │
      ▼
      API

7. هل يمكن استخدام GPS؟

نعم.

مثال:

import { Geolocation } from '@capacitor/geolocation';

const position =
    await Geolocation.getCurrentPosition();

يمكن بذلك لتطبيق الويب الوصول إلى خدمات الموقع في Android وiOS من خلال Capacitor.

8. هل يمكن إرسال الإشعارات؟

نعم.

يدعم Capacitor الإشعارات المحلية وPush Notifications.

على سبيل المثال، يمكن لتطبيق تخطيط المهام إرسال رسالة مثل:

"لا تنسَ إنجاز واجب الرياضيات."

إلى هاتف المستخدم.

وهذه ميزة مهمة مقارنة بموقع ويب تقليدي.

9. هل يمكن تشغيل التطبيق دون اتصال بالإنترنت؟

نعم.

لكن يجب توضيح نقطة مهمة:

Capacitor وحده لا ينشئ نظام Offline تلقائيًا.

يمكنك تصميم نظام تخزين محلي باستخدام تقنيات مثل:

Web
 ↓
IndexedDB

Mobile
 ↓
SQLite

ثم بناء نظام مزامنة:

قاعدة البيانات المحلية
        ↓
محرك المزامنة
        ↓
API
        ↓
قاعدة بيانات الخادم

وهذا مفيد جدًا لتطبيقات Planner وTodo والتعليم والإنتاجية.

10. هل يمكن استخدام نفس الكود للويب والموبايل؟

إلى حد كبير، نعم.

يمكن أن يحتوي مشروع React على:

src/
├── components/
├── pages/
├── services/
├── hooks/
├── api/
└── utils/

ويمكن مشاركة جزء كبير من هذا الكود بين:

Web
Android
iOS

لكن يمكن أيضًا كتابة كود خاص بكل منصة عندما تكون هناك حاجة لذلك.

11. هل يمكن إضافة Capacitor إلى مشروع React موجود؟

نعم.

وهذه واحدة من أكبر مزايا Capacitor.

بدل إعادة بناء التطبيق من البداية، يمكن إضافة Capacitor إلى مشروع React الحالي.

التثبيت الأساسي:

npm install @capacitor/core @capacitor/cli

ثم:

npx cap init

لـ Android:

npm install @capacitor/android
npx cap add android

ولـ iOS:

npm install @capacitor/ios
npx cap add ios

ويظل مشروع React الحالي هو الأساس.

12. كيف تتم عملية Build؟

أولًا يتم إنشاء نسخة الإنتاج من تطبيق React:

npm run build

ثم يقوم Capacitor بمزامنة ملفات الويب مع المشروع الأصلي الخاص بـ Android أو iOS.

React Source
     │
     ▼
npm run build
     │
     ▼
Web Build
     │
     ▼
Capacitor
     │
     ├───────────────┐
     ▼               ▼
 Android            iOS

يمكن فتح مشروع Android باستخدام Android Studio، ومشروع iOS باستخدام Xcode.

13. هل يمكن إنشاء APK وAAB؟

نعم.

ينشئ Capacitor مشروع Android حقيقيًا.

ومن خلال Android Studio يمكنك إنشاء:

APK

أو حزمة Google Play:

AAB

وبعد ذلك يمكن نشر التطبيق على Google Play.

14. ماذا عن iOS؟

ينشئ Capacitor مشروع iOS حقيقيًا يمكن فتحه باستخدام Xcode.

المسار العام:

React
  ↓
Capacitor
  ↓
Xcode
  ↓
تطبيق iOS
  ↓
App Store

ثم تستخدم إجراءات Apple العادية للاختبار والتوقيع والنشر.

15. هل Capacitor وIonic شيء واحد؟

لا.

Ionic هو بشكل أساسي إطار لواجهة المستخدم ومجموعة من المكونات.

أما Capacitor فهو Native Runtime.

يمكنك استخدام:

React
   +
Ionic
   +
Capacitor

لكن يمكنك أيضًا استخدام:

React
   +
Capacitor

دون Ionic.

16. Capacitor أم React Native؟

الاختلاف الأساسي هو طريقة بناء واجهة المستخدم.

Capacitor

React
  ↓
HTML
CSS
JavaScript
  ↓
WebView
  ↓
Native APIs

React Native

React
  ↓
React Native
  ↓
Native UI Components
  ↓
iOS / Android

مع Capacitor يمكنك الاحتفاظ بجزء كبير من واجهة تطبيق الويب الموجودة لديك.

أما React Native فيعتمد على مكونات React Native لبناء الواجهة.

لذلك إذا كان لديك بالفعل مشروع React كبير، فقد يوفر Capacitor الكثير من وقت إعادة التطوير.

17. ماذا عن Google Login وOAuth؟

يمكن مشاركة جزء كبير من نظام المصادقة، ولكن تطبيقات الهاتف تحتاج إلى إعدادات إضافية.

على الويب:

Web
 ↓
Google OAuth
 ↓
Backend

أما على الهاتف فقد تحتاج إلى Native OAuth Flow أو Deep Links أو Universal Links أو App Links حسب تصميم النظام.

Capacitor لا يحل تلقائيًا جميع مشاكل إعداد OAuth، ولكن يمكن مشاركة منطق المصادقة والـBackend إلى حد كبير.

18. هل يمكن كتابة Native Code مع Capacitor؟

نعم.

إذا لم يوفر Plugin موجود الوظيفة التي تحتاج إليها، يمكنك إنشاء Capacitor Plugin خاص بك.

Android:

React
  ↓
Custom Capacitor Plugin
  ↓
Kotlin / Java
  ↓
Android Native API

iOS:

React
  ↓
Custom Capacitor Plugin
  ↓
Swift
  ↓
iOS Native API

وهذا يعني أنك لست مقيدًا بالـPlugins الموجودة فقط.

19. ما عيوب Capacitor؟

الاعتماد على WebView

واجهة التطبيق تعمل داخل WebView، ولذلك قد تكون بعض الواجهات المتخصصة أقل طبيعية من التطبيقات Native بالكامل.

الحاجة إلى Plugins

قد تحتاج إلى Plugin جاهز أو Plugin مخصص للوصول إلى بعض الوظائف المتقدمة.

اختلاف Android وiOS

هناك اختلافات في:

• الصلاحيات

• الإشعارات

• مهام الخلفية

• OAuth

• نظام الملفات

• Bluetooth

ويجب التعامل معها بشكل منفصل عند الحاجة.

التطبيقات الرسومية الثقيلة

الألعاب ثلاثية الأبعاد والتطبيقات ذات الرسوميات الثقيلة جدًا قد تكون أكثر ملاءمة للتطوير Native أو استخدام محركات متخصصة.

20. لمن يناسب Capacitor؟

يعتبر Capacitor مناسبًا بشكل خاص لـ:

• مطوري React

• مطوري Vue

• مطوري Angular

• مطوري JavaScript

• الفرق التي لديها تطبيقات ويب موجودة

• تطبيقات SaaS

• تطبيقات Planner

• تطبيقات الإنتاجية

• تطبيقات التجارة الإلكترونية

• التطبيقات المعتمدة على API

• تطبيقات Offline-first

وتظهر فائدته الأكبر عندما يكون لديك تطبيق ويب يعمل بالفعل.

21. مثال على بنية حقيقية

لنفترض أن لديك تطبيق Planner:

                    PLANNER
                       │
              ┌────────┴────────┐
              │                 │
             Web              Mobile
              │                 │
           React             React
              │                 │
              │             Capacitor
              │              /      \
              │             /        \
              ▼            ▼          ▼
           Browser      Android      iOS
              │
              └──────────┬──────────┘
                         │
                        API
                         │
                    Laravel
                         │
                    PostgreSQL

بالنسبة للتخزين المحلي:

Web
 ↓
IndexedDB

Mobile
 ↓
SQLite

وبالنسبة للمزامنة:

Local Database
      ↓
Sync Engine
      ↓
API
      ↓
Server Database

وهذا النموذج مناسب جدًا عندما يكون الويب والموبايل جزءًا من المنتج نفسه.

22. أبسط تعريف لـ Capacitor

يمكن تعريفه بجملة واحدة:

Capacitor هو Native Runtime يسمح لتطبيقات الويب التي تم تطويرها باستخدام React أو Vue أو Angular بالعمل على Android وiOS، مع توفير إمكانية الوصول إلى وظائف الجهاز الأصلية باستخدام JavaScript.

وبطريقة أبسط:

لديك تطبيق React
        ↓
تضيف Capacitor
        ↓
تنشئ مشاريع Android + iOS
        ↓
يعمل تطبيق الويب على الهاتف
        ↓
Plugins توفر وظائف الهاتف
        ↓
تنشئ تطبيقات Android وiOS

الخلاصة

القوة الأساسية لـ Capacitor هي:

السماح لمطور الويب بالانتقال إلى عالم تطبيقات الهاتف الأصلية مع أقل قدر ممكن من إعادة كتابة الكود.

إذا كنت تقوم ببناء تطبيق يعتمد بشكل كبير على الوظائف الأصلية ورسوميات كثيفة جدًا، فقد يكون React Native أو التطوير Native المباشر خيارًا أفضل.

أما إذا كان لديك بالفعل تطبيق React قوي وتريد إضافة:

• Web/PWA

• Android

• iOS

• العمل دون اتصال

• الكاميرا وGPS

• الإشعارات

• وظائف الجهاز الأصلية

• النشر على App Store

• النشر على Google Play

باستخدام قاعدة كود مشتركة إلى حد كبير، فإن Capacitor يعد خيارًا قويًا جدًا.

وأهم ميزة عند تحويل تطبيق React موجود إلى تطبيق هاتف هي:

لا تحتاج إلى إعادة بناء التطبيق بالكامل من الصفر.