Müasir veb texnologiyaları tətbiqlərin yalnız brauzerdə deyil, həm də mobil cihazlarda real tətbiq kimi işləməsinə imkan verir. CapacitorJS vasitəsilə React, Vue, Angular və ya JavaScript ilə hazırlanmış veb tətbiqi Android və iOS tətbiqinə çevirmək və Google Play Store ilə Apple App Store-da yayımlamaq mümkündür.

Burada ən vacib məqam budur:

Capacitor mövcud veb tətbiqinizi sıfırdan Native tətbiq kimi yenidən yazmağı tələb etmir. O, mövcud veb tətbiqinizi Native mobil mühitdə işlədərək cihazın Native funksiyalarına çıxış imkanı yaradır.

1. CapacitorJS nə iş görür?

Tutaq ki, artıq React ilə hazırlanmış tətbiqiniz var:

React
HTML
CSS
JavaScript
API
IndexedDB

Normal halda bu tətbiq brauzerdə işləyir.

Capacitor əlavə etdikdə arxitektura belə olur:

                    React Web App
                         │
                         ▼
                      Capacitor
                    /          \
                   /            \
                  ▼              ▼
             Android            iOS

Veb tətbiqiniz işləməyə davam edir, eyni kod bazasından Android və iOS tətbiqləri yaratmaq mümkün olur.

2. Capacitor UI framework deyil

Capacitor-u React Native kimi başqa bir UI framework kimi düşünmək düzgün deyil.

Onun funksiyası fərqlidir.

React
    ↓
İstifadəçi interfeysini yaradır

Capacitor
    ↓
Veb tətbiqini Native mühitdə işlədir
    ↓
Native API-lərə çıxış verir

React yenə React olaraq qalır.

Vue yenə Vue olaraq qalır.

Capacitor mövcud veb tətbiqinizin üzərinə əlavə olunur.

Ionic istifadə etmək də məcburi deyil.

3. Capacitor necə işləyir?

Capacitor-u başa düşməyin ən asan yolu WebView anlayışını başa düşməkdir.

Mobil tətbiqin daxilində veb tətbiqinizin işlədiyi WebView yerləşir.

┌─────────────────────────────┐
│        Android / iOS        │
│                             │
│   ┌─────────────────────┐   │
│   │       WebView       │   │
│   │                     │   │
│   │      React App      │   │
│   │                     │   │
│   │   HTML / CSS / JS   │   │
│   └──────────┬──────────┘   │
│              │              │
│          Capacitor           │
│              │              │
│   ┌──────────▼──────────┐   │
│   │     Native APIs     │   │
│   │                     │   │
│   │ Kamera              │   │
│   │ GPS                 │   │
│   │ Bildirişlər         │   │
│   │ Fayllar             │   │
│   │ Haptics             │   │
│   │ Şəbəkə              │   │
│   └─────────────────────┘   │
└─────────────────────────────┘

React tətbiqiniz WebView daxilində işləyir.

Capacitor isə WebView ilə əməliyyat sistemi arasında körpü rolunu oynayır.

4. Niyə Native tətbiq hesab olunur?

Çünki bu, sadəcə veb saytın brauzerdə açılması deyil.

Məsələn, React tətbiqiniz:

Camera.getPhoto()

çağırışını edə bilər.

Capacitor isə bunu Android və ya iOS-un Native kamera API-lərinə ötürə bilər.

Beləliklə JavaScript tərəfində ortaq API istifadə edə, platformaya xas əməliyyatları isə Capacitor-a həvalə edə bilərsiniz.

5. Capacitor Plugin nədir?

Plugin-lər Capacitor-un ən vacib xüsusiyyətlərindən biridir.

Onları belə düşünmək olar:

JavaScript ilə cihazın Native funksiyaları arasında körpü.

Məsələn:

• Kamera

• Fayl sistemi

• Geolocation

• Bildirişlər

• Şəbəkə

• Haptics

• Preferences

• Push Notifications

• Share

• Device

• Screen Orientation

Məsələn:

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

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

Beləliklə JavaScript kodunuz Android və iOS API-lərini ayrıca yazmadan Native funksiyanı işə sala bilər.

6. Kamera istifadə etmək mümkündürmü?

Bəli.

İstifadəçiyə:

• fotoşəkil çəkmək;

• qalereyadan foto seçmək;

• profil şəkli yükləmək;

• sənəd şəkli çəkmək

imkanı verə bilərsiniz.

Məsələn:

Profil şəkli
     │
     ▼
   Kamera
     │
     ▼
    Foto
     │
     ▼
   React
     │
     ▼
    API

7. GPS istifadə etmək mümkündürmü?

Bəli.

Məsələn:

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

const position =
    await Geolocation.getCurrentPosition();

Bu yolla veb tətbiqiniz Capacitor vasitəsilə Android və iOS-un lokasiya xidmətlərindən istifadə edə bilər.

8. Bildiriş göndərmək mümkündürmü?

Bəli.

Capacitor həm Local Notification, həm də Push Notification ssenarilərini dəstəkləyir.

Məsələn, planner tətbiqi istifadəçinin telefonuna:

"Riyaziyyat ev tapşırığını etməyi unutma."

şəklində bildiriş göndərə bilər.

Bu, adi veb saytla müqayisədə mühüm üstünlükdür.

9. Offline işləmək mümkündürmü?

Bəli.

Lakin burada vacib bir məqam var:

Capacitor özü avtomatik olaraq Offline sistemi yaratmır.

Məsələn:

Web
 ↓
IndexedDB

Mobile
 ↓
SQLite

istifadə edə bilərsiniz.

Sonra məlumatların sinxronizasiyası:

Local Database
      ↓
Sync Engine
      ↓
API
      ↓
Server Database

şəklində qurula bilər.

Bu yanaşma Planner, Todo, təhsil və məhsuldarlıq tətbiqləri üçün xüsusilə faydalıdır.

10. Web və mobil eyni kodu istifadə edə bilərmi?

Böyük ölçüdə, bəli.

React layihəniz belə ola bilər:

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

Bu kodun böyük hissəsi:

Web
Android
iOS

arasında ortaq istifadə edilə bilər.

Lazım olduqda platformaya xüsusi kod da yazmaq mümkündür.

11. Mövcud React layihəsinə Capacitor əlavə etmək mümkündürmü?

Bəli.

Bu, Capacitor-un ən böyük üstünlüklərindən biridir.

Mövcud React tətbiqini sıfırdan yazmaq əvəzinə ona Capacitor əlavə edə bilərsiniz.

Əsas quraşdırma:

npm install @capacitor/core @capacitor/cli

Sonra:

npx cap init

Android üçün:

npm install @capacitor/android
npx cap add android

iOS üçün:

npm install @capacitor/ios
npx cap add ios

Beləliklə mövcud React tətbiqiniz layihənin əsas hissəsi olaraq qalır.

12. Build prosesi necə işləyir?

Əvvəlcə React tətbiqini build edirsiniz:

npm run build

Sonra Capacitor yaradılmış veb fayllarını Native layihələrlə sinxronlaşdırır.

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

Android layihəsi Android Studio-da, iOS layihəsi isə Xcode-da açıla bilər.

13. APK və AAB yaratmaq mümkündürmü?

Bəli.

Capacitor real Android layihəsi yaradır.

Android Studio vasitəsilə:

APK

və Google Play üçün:

AAB

yaratmaq mümkündür.

Sonra tətbiq Google Play-də yayımlana bilər.

14. iOS necə olur?

Capacitor real iOS layihəsi yaradır və bu layihə Xcode ilə açılır.

Ümumi proses:

React
  ↓
Capacitor
  ↓
Xcode
  ↓
iOS App
  ↓
App Store

Daha sonra Apple-ın normal test, imzalama və yayımlama prosesindən istifadə edilir.

15. Capacitor və Ionic eyni şeydirmi?

Xeyr.

Ionic əsasən UI framework və komponent sistemidir.

Capacitor isə Native Runtime-dır.

İstəsəniz:

React
   +
Ionic
   +
Capacitor

istifadə edə bilərsiniz.

Amma:

React
   +
Capacitor

şəklində Ionic olmadan da işləmək mümkündür.

16. Capacitor yoxsa React Native?

Əsas fərq istifadəçi interfeysinin necə işləməsidir.

Capacitor

React
  ↓
HTML
CSS
JavaScript
  ↓
WebView
  ↓
Native APIs

React Native

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

Capacitor ilə mövcud veb tətbiqinizin interfeysinin böyük hissəsini qorumaq mümkündür.

React Native-də isə UI React Native komponentləri ilə qurulur.

Buna görə artıq böyük React veb tətbiqiniz varsa, Capacitor daha az yenidən işləmə tələb edə bilər.

17. Google Login və OAuth necə işləyir?

Autentifikasiya sisteminin böyük hissəsini ortaq saxlamaq mümkündür, lakin mobil platformalarda əlavə konfiqurasiya tələb oluna bilər.

Web:

Web
 ↓
Google OAuth
 ↓
Backend

Mobil tərəfdə isə Native OAuth Flow, Deep Links, Universal Links və ya App Links istifadə edilə bilər.

Capacitor bütün OAuth problemlərini avtomatik həll etmir.

Lakin əsas autentifikasiya məntiqi və Backend böyük ölçüdə ortaq qala bilər.

18. Capacitor ilə Native kod yazmaq mümkündürmü?

Bəli.

Əgər hazır Plugin ehtiyacınız olan funksiyanı təmin etmirsə, öz Capacitor Plugin-inizi yarada bilərsiniz.

Android:

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

iOS:

React
  ↓
Custom Capacitor Plugin
  ↓
Swift
  ↓
iOS Native API

Yəni yalnız mövcud Plugin-lərlə məhdudlaşmırsınız.

19. Capacitor-un çatışmazlıqları

WebView-dən asılılıq

UI WebView daxilində işləyir. Buna görə çox xüsusi Native interfeyslər tam Native tətbiq qədər təbii görünməyə bilər.

Plugin ehtiyacı

Bəzi xüsusi cihaz funksiyaları üçün hazır Plugin və ya öz Plugin-inizi yaratmaq lazım ola bilər.

Android və iOS fərqləri

Aşağıdakı sahələrdə platformalar arasında fərqlər mövcuddur:

• İcazələr

• Bildirişlər

• Background Tasks

• OAuth

• Fayl sistemi

• Bluetooth

Bu fərqlər lazım olduqda ayrıca idarə edilməlidir.

Ağır qrafik tətbiqləri

Çox ağır 3D tətbiqlər, oyunlar və yüksək FPS tələb edən layihələr üçün Native texnologiyalar və ya xüsusi oyun mühərrikləri daha uyğun ola bilər.

20. Capacitor kimlər üçün uyğundur?

Capacitor xüsusilə:

• React developer-lər;

• Vue developer-lər;

• Angular developer-lər;

• JavaScript developer-lər;

• mövcud veb tətbiqi olan komandalar;

• SaaS tətbiqləri;

• Planner tətbiqləri;

• məhsuldarlıq tətbiqləri;

• e-commerce tətbiqləri;

• API əsaslı tətbiqlər;

• Offline-first tətbiqlər

üçün uyğundur.

Ən böyük üstünlüyü artıq işləyən veb tətbiqiniz olduqda ortaya çıxır.

21. Real layihə arxitekturası

Məsələn, Planner tətbiqini nəzərdən keçirək:

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

Offline məlumatlar üçün:

Web
 ↓
IndexedDB

Mobile
 ↓
SQLite

Sinxronizasiya:

Local Database
      ↓
Sync Engine
      ↓
API
      ↓
Server Database

Bu arxitektura Web və Mobile-ın eyni məhsulun hissələri olduğu layihələr üçün xüsusilə əlverişlidir.

22. Capacitor-un ən sadə tərifi

Bir cümlə ilə:

Capacitor React, Vue və Angular kimi texnologiyalarla hazırlanmış veb tətbiqlərin Android və iOS-da işləməsinə və JavaScript vasitəsilə cihazın Native funksiyalarına çıxış əldə etməsinə imkan verən Native Runtime-dır.

Daha sadə desək:

React tətbiqiniz var
        ↓
Capacitor əlavə edirsiniz
        ↓
Android + iOS layihələri yaradırsınız
        ↓
Veb tətbiqiniz mobil cihazda işləyir
        ↓
Plugin-lər cihaz funksiyalarına çıxış verir
        ↓
Android və iOS tətbiqləri yaradırsınız

Nəticə

Capacitor-un əsas gücü:

Veb developer-lərə mümkün qədər az yenidən kod yazmaqla Native mobil dünyaya keçməyə imkan verməsidir.

Əgər yalnız Android və iOS üçün çox ağır qrafikalı və Native xüsusiyyətlərə ciddi şəkildə bağlı tətbiq hazırlayırsınızsa, React Native və ya birbaşa Native development daha uyğun ola bilər.

Lakin artıq güclü React/vəb tətbiqiniz varsa və:

• Web/PWA

• Android

• iOS

• Offline işləmə

• Kamera və GPS

• Bildirişlər

• Native cihaz funksiyaları

• App Store

• Google Play

dəstəyi istəyirsinizsə və bunları böyük ölçüdə ortaq kod bazasından idarə etmək istəyirsinizsə, Capacitor çox güclü seçimdir.

Ən böyük üstünlüyü isə budur:

Mövcud React tətbiqinizi mobil tətbiqə çevirmək üçün hər şeyi sıfırdan yenidən yazmaq məcburiyyətində deyilsiniz.