Modern web teknolojileriyle geliştirilen uygulamalar artık yalnızca tarayıcıda çalışmak zorunda değil. React, Vue, Angular veya düz JavaScript ile geliştirilmiş bir web uygulaması; CapacitorJS sayesinde Android ve iOS üzerinde mağazadan indirilebilen gerçek bir mobil uygulama olarak çalıştırılabilir.

Buradaki en önemli nokta şudur:

Capacitor, web uygulamanızı baştan native bir uygulama olarak yazmaz. Mevcut web uygulamanızı native bir mobil uygulamanın içine yerleştirir ve web kodunuzun telefonun native özelliklerine erişmesini sağlar.

Capacitor'un resmi tanımıyla kendisi, web uygulamaları için kullanılan "cross-platform native runtime" yani platformlar arası native çalışma ortamıdır.

1. CapacitorJS Tam Olarak Ne İşe Yarar?

Örneğin React ile geliştirilmiş bir uygulamanız olduğunu düşünelim:

React
HTML
CSS
JavaScript
API
IndexedDB

Normalde bu uygulama tarayıcıda çalışır.

Kullanıcı:

Chrome
Safari
Edge

gibi bir tarayıcı açar ve uygulamanıza girer.

Capacitor eklediğinizde ise aynı uygulamayı:

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

şeklinde mobil uygulamaya dönüştürebilirsiniz.

Sonuçta Google Play Store ve Apple App Store'a yüklenebilen uygulamalar ortaya çıkar.

Üstelik web uygulamanız da çalışmaya devam eder.

Capacitor resmi olarak mevcut modern web projelerine sonradan eklenebilecek şekilde tasarlanmıştır.

2. Capacitor Bir Framework Değildir

Bu nokta oldukça önemlidir.

Capacitor'u:

"React Native'in alternatifi olan başka bir UI framework"

gibi düşünmemek gerekir.

Capacitor'un görevi farklıdır.

Örneğin:

React
    ↓
Arayüzü oluşturur

Capacitor
    ↓
Web uygulamasını native ortamda çalıştırır
    ↓
Native API'lere erişim sağlar

Yani React yine React'tir.

Vue yine Vue'dur.

Svelte yine Svelte'dir.

Capacitor bunların üzerine eklenir.

Bu nedenle Ionic kullanmak zorunda da değilsiniz. Capacitor herhangi bir modern web uygulamasıyla kullanılabilir.

3. Capacitor Nasıl Çalışır?

Capacitor'un çalışma mantığını anlamanın en kolay yolu WebView kavramını anlamaktır.

Mobil uygulamanın içerisinde bir WebView bulunur.

Basitleştirilmiş yapı şöyledir:

┌─────────────────────────────┐
│        Android / iOS        │
│                             │
│   ┌─────────────────────┐   │
│   │       WebView       │   │
│   │                     │   │
│   │      React App      │   │
│   │                     │   │
│   │   HTML / CSS / JS   │   │
│   └──────────┬──────────┘   │
│              │              │
│         Capacitor            │
│              │              │
│   ┌──────────▼──────────┐   │
│   │   Native APIs       │   │
│   │                     │   │
│   │ Camera              │   │
│   │ GPS                 │   │
│   │ Notifications       │   │
│   │ Files               │   │
│   │ Haptics             │   │
│   │ Network              │   │
│   └─────────────────────┘   │
└─────────────────────────────┘

React uygulamanız WebView içerisinde çalışır.

Capacitor ise WebView ile işletim sistemi arasındaki köprü görevi görür.

Resmi Capacitor mimarisinde de web uygulamasının WebView içerisinde çalıştığı ve native çağrıların runtime/plugin katmanı üzerinden işletim sistemine iletildiği açıklanıyor.

4. Peki WebView Kullanıyorsa Neden Native Uygulama Deniyor?

Çünkü uygulama sadece bir web sitesini açan basit bir tarayıcı değildir.

Örneğin React kodunuz:

Camera.getPhoto()

dediğinde Capacitor bunu native taraftaki kamera API'sine iletebilir.

Android tarafında Android API'leri,

iOS tarafında iOS API'leri kullanılır.

Web tarafında ise destekleniyorsa browser API'si kullanılabilir.

Bu nedenle JavaScript tarafında mümkün olduğunca ortak bir API kullanabilirsiniz.

Örneğin:

import { Camera } from '@capacitor/camera';

const photo = await Camera.getPhoto({
    quality: 90
});

Burada React kodunuz:

Android API

veya:

iOS API

ile doğrudan uğraşmaz.

Capacitor plugin'i bu işi sizin için yapar.

5. Capacitor Plugin Nedir?

Capacitor'un en önemli özelliklerinden biri plugin sistemidir.

Plugin'leri:

JavaScript ile native özellikler arasında köprü

olarak düşünebilirsiniz.

Örneğin resmi plugin'ler arasında:

• Camera

• Filesystem

• Geolocation

• Notifications

• Network

• Haptics

• Preferences

• Push Notifications

• Share

• Device

• Screen Orientation

gibi özellikler bulunur.

Örneğin telefonun titreşimini çalıştırmak için:

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

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

JavaScript kodunuz native tarafta gerekli işlemi tetikler.

6. Telefonun Kamerasını Kullanabilir miyim?

Evet.

Örneğin kullanıcı profil fotoğrafı yükleyecekse:

Profil Fotoğrafı
       │
       ▼
    Kamera
       │
       ▼
    Fotoğraf
       │
       ▼
    React
       │
       ▼
     API

Capacitor Camera plugin'i kullanabilirsiniz.

Bu sayede:

Kamera aç
Fotoğraf çek
Galeriden seç
Fotoğrafı al

gibi işlemler yapılabilir.

7. GPS Kullanabilir miyim?

Evet.

Örneğin:

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

const position =
    await Geolocation.getCurrentPosition();

ile konum alınabilir.

Böylece web uygulamanız:

React
  ↓
Capacitor
  ↓
Android / iOS Location API

şeklinde çalışabilir.

8. Bildirim Gönderebilir miyim?

Evet.

Capacitor ile:

Local Notification

ve

Push Notification

senaryoları desteklenebilir.

Örneğin bir yapılacaklar uygulamasında:

"Matematik ödevini yapmayı unutma."

şeklinde telefona bildirim gönderebilirsiniz.

Bu özellikle mobil uygulamalarda web sitesine göre önemli bir avantajdır.

9. Dosyalara Erişebilir miyim?

Evet.

Filesystem API'si sayesinde uygulamanın native dosya sistemiyle çalışabilirsiniz.

Örneğin:

PDF
Fotoğraf
JSON
Doküman
Offline veri

gibi içerikleri cihazda saklamak için kullanılabilir.

Bu özellikle offline çalışan uygulamalar için önemlidir.

10. Offline Uygulama Yapılabilir mi?

Evet.

Ama burada önemli bir ayrım vardır:

Offline çalışma özelliğini Capacitor tek başına sağlamaz.

Capacitor size native ortamı ve gerekli API'leri sağlar.

Offline mimariyi sizin uygulamanız oluşturur.

Örneğin:

React
   │
   ├── IndexedDB
   │
   ├── SQLite
   │
   └── API

gibi bir yapı kurulabilir.

Mobil tarafta:

React
   ↓
SQLite
   ↓
Sync
   ↓
API
   ↓
Server Database

şeklinde çalışabilirsiniz.

Bu nedenle Capacitor özellikle:

offline-first uygulamalar

için oldukça kullanışlıdır.

11. Web ve Mobil Uygulama Aynı Kod Olabilir mi?

Büyük ölçüde evet.

Örneğin:

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

gibi React kodunuz ortak olabilir.

Sonrasında:

Web
Android
iOS

aynı kod tabanını kullanabilir.

Ancak %100 aynı kod kullanmak zorunda değilsiniz.

Örneğin:

if (Capacitor.getPlatform() === 'ios') {
    // iOS özel davranış
}

gibi platforma özel kodlar yazabilirsiniz.

Dolayısıyla mimari şu hale gelebilir:

                 Ortak React Kodları
                         │
              ┌──────────┼──────────┐
              │          │          │
             Web      Android      iOS
              │          │          │
           Browser    Native      Native

12. Capacitor Mevcut React Projesine Eklenebilir mi?

Evet.

Bu Capacitor'un en güçlü taraflarından biridir.

Örneğin mevcut React projeniz varsa temel olarak:

npm install @capacitor/core @capacitor/cli

ardından:

npx cap init

ile Capacitor eklenebilir.

Android için:

npm install @capacitor/android
npx cap add android

iOS için:

npm install @capacitor/ios
npx cap add ios

kullanılır.

Dolayısıyla:

"Mobil uygulama yapmak için React projemi baştan yazmam gerekiyor."

gerekmez.

Bu, Capacitor'un en önemli avantajlarından biridir.

13. Build Mantığı Nasıl Çalışır?

Örneğin React projenizi build ettiniz:

npm run build

Sonuç:

dist/

veya kullandığınız yapıya göre:

build/

oluşur.

Capacitor bu web çıktısını native projeye aktarır.

Genel mantık:

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

Böylece Android projesi Android Studio'da, iOS projesi ise Xcode'da açılabilir.

14. Android Uygulaması Gerçekten APK/AAB Olur mu?

Evet.

Capacitor Android tarafında gerçek bir Android projesi oluşturur.

Bu proje:

Android Studio

ile açılabilir.

Buradan:

APK

veya Google Play Store için:

AAB

oluşturabilirsiniz.

Yani sonuç yalnızca:

"telefonda açılan web sitesi"

değildir.

Play Store'a yüklenebilen Android uygulaması elde edersiniz.

15. iOS Tarafında Ne Olur?

Benzer şekilde Capacitor:

ios/

altında native iOS projesi oluşturur.

Bu proje:

Xcode

ile açılır.

Sonrasında Apple'ın normal uygulama yayınlama süreci kullanılır.

Yani:

React
  ↓
Capacitor
  ↓
Xcode
  ↓
iOS App
  ↓
App Store

şeklinde ilerler.

16. Capacitor ile Ionic Aynı Şey mi?

Hayır.

Bu çok sık karıştırılır.

Ionic:

UI framework / component sistemi

Capacitor:

Native runtime

olarak düşünülebilir.

Örneğin:

React
   +
Ionic
   +
Capacitor

kullanabilirsiniz.

Ama:

React
   +
Capacitor

da kullanabilirsiniz.

Ionic kullanmak zorunlu değildir. Capacitor herhangi bir web framework'ü ile kullanılabilir.

17. Capacitor ile React Native Arasındaki Temel Fark

En önemli fark uygulamanın UI'ının nasıl çalıştığıdır.

Capacitor

React
  ↓
HTML
CSS
JavaScript
  ↓
WebView
  ↓
Native APIs

React Native

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

Capacitor'da mevcut web arayüzünüzü büyük ölçüde koruyabilirsiniz.

React Native'de ise UI, React Native bileşenleriyle oluşturulur.

Bu nedenle zaten ciddi bir React web uygulamanız varsa Capacitor çok daha az yeniden geliştirme gerektirebilir.

18. Performansı Nasıl?

Capacitor uygulamasının UI katmanı WebView üzerinde çalışır.

Bu nedenle:

"Tamamen native UI kullanıyor"

demek doğru değildir.

Ancak modern Android ve iOS WebView motorları oldukça gelişmiştir.

Özellikle:

CRUD uygulamaları
Dashboard
Planner
Todo
Eğitim uygulamaları
E-ticaret
Form uygulamaları
İçerik uygulamaları
API tabanlı uygulamalar

gibi uygulamalarda Capacitor gayet uygun olabilir.

Ancak:

çok ağır 3D oyun
çok yoğun grafik
yüksek FPS isteyen uygulamalar
çok yoğun native animasyon

gibi senaryolarda doğrudan native veya farklı çözümler daha uygun olabilir.

19. Capacitor'un En Büyük Avantajı

Bence Capacitor'un en önemli avantajı şudur:

Tek bir web uygulamasını merkeze alarak birden fazla platforma çıkabilmeniz.

Örneğin:

             React
               │
       ┌───────┼────────┐
       │       │        │
       ▼       ▼        ▼
      Web   Android    iOS

Aynı:

API
Authentication
Business Logic
React Components
State Management

büyük ölçüde ortak kullanılabilir.

Bu geliştirme maliyetini ciddi şekilde azaltabilir.

20. Google Login Gibi İşlemler Nasıl Olur?

Örneğin uygulamanızda:

Google ile giriş

olduğunu düşünelim.

Web'de:

Browser
   ↓
Google OAuth
   ↓
Backend

kullanabilirsiniz.

Mobilde ise Capacitor sayesinde native OAuth akışı veya uygun bir plugin kullanılabilir.

Burada önemli olan nokta:

Capacitor otomatik olarak bütün authentication problemlerini çözmez.

OAuth redirect URI, deep link, Universal Links/App Links ve Google tarafındaki client yapılandırması doğru yapılmalıdır.

Ancak React uygulamanızın authentication mimarisinin önemli kısmı ortak kalabilir.

21. Capacitor Sadece Telefon İçin mi?

Hayır.

Temel hedef:

Web
Android
iOS

olsa da Capacitor'un yaklaşımı web teknolojileriyle native platformlar arasında ortak bir yapı kurmaktır.

Ayrıca PWA senaryolarını da destekler.

Dolayısıyla tek bir ürün:

favplan.app
      │
      ├── Web
      ├── PWA
      ├── Android
      └── iOS

şeklinde geliştirilebilir.

22. Capacitor Native Kod Yazmaya İzin Veriyor mu?

Evet.

Bu da önemli bir avantajdır.

Hazır plugin ihtiyacınızı karşılamıyorsa kendi plugin'inizi yazabilirsiniz.

Örneğin:

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

veya:

React
  ↓
Custom Capacitor Plugin
  ↓
iOS Swift
  ↓
Native API

oluşturabilirsiniz.

Capacitor'un plugin mimarisi JavaScript ile native API'ler arasında ortak bir arayüz sağlamaya yöneliktir.

Bu nedenle:

"Capacitor kullanırsam native özelliklere erişemem."

yanlış bir düşüncedir.

Gerekirse doğrudan native kod yazabilirsiniz.

23. Capacitor'un Dezavantajları

Her teknolojide olduğu gibi Capacitor'un da dezavantajları vardır.

1. WebView bağımlılığı

UI WebView içerisinde çalışır.

Bu nedenle bazı özel native UI davranışlarında tamamen native uygulama kadar doğal olmayabilir.

2. Native özelliklerde plugin ihtiyacı

Özel bir telefon özelliği kullanacaksanız:

Hazır plugin

bulmanız veya:

Custom Plugin

yazmanız gerekebilir.

3. Platform farklılıkları

Android ve iOS aynı davranmaz.

Örneğin:

Permissions
Notifications
Background Tasks
OAuth
File System
Bluetooth

gibi konularda platform farklılıklarıyla uğraşmanız gerekebilir.

4. Çok ağır grafik uygulamaları

WebView tabanlı mimari:

3D oyun
çok yoğun grafik
çok yüksek FPS

gibi uygulamalar için her zaman ideal değildir.

24. Capacitor Kimler İçin İdeal?

Özellikle şu geliştiriciler için çok mantıklıdır:

React geliştiricileri
Vue geliştiricileri
Angular geliştiricileri
JavaScript geliştiricileri
Web uygulaması geliştiren ekipler

Özellikle zaten çalışan bir web uygulamanız varsa Capacitor ciddi avantaj sağlar.

Örneğin:

Mevcut React uygulaması
          │
          ▼
       Capacitor
          │
     ┌────┴────┐
     ▼         ▼
 Android      iOS

şeklinde ilerleyebilirsiniz.

25. Bir Projeyi Capacitor'a Taşımak Ne Kadar Zor?

Mevcut uygulamanın yapısına bağlıdır.

Basit bir React uygulaması için oldukça kolay olabilir.

Ancak uygulamanızda:

Authentication
IndexedDB
Service Worker
PWA
File Upload
OAuth
Push Notifications
Offline Sync
Deep Links
Background Processing

gibi özellikler varsa mobil davranışların ayrıca ele alınması gerekir.

Yani:

Capacitor eklemek kolaydır.

ama:

Web uygulamasını kaliteli bir mobil uygulamaya dönüştürmek ayrı bir mühendislik işidir.

Bu ikisini birbirinden ayırmak gerekir.

26. Gerçek Hayatta Mimari Nasıl Olabilir?

Örneğin bir planner uygulamasını ele alalım.

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

Offline veri için:

Web
 ↓
IndexedDB

Mobile
 ↓
SQLite

kullanılabilir.

Sync:

Local DB
   ↓
Sync Engine
   ↓
API
   ↓
Server DB

şeklinde tasarlanabilir.

Bu yaklaşım özellikle web uygulamasını ve mobil uygulamayı aynı ürünün parçaları olarak geliştirmek isteyen ekipler için oldukça güçlüdür.

27. En Basit Şekilde Capacitor'u Nasıl Tanımlayabiliriz?

Capacitor'u tek cümleyle anlatmak gerekirse:

Capacitor, web teknolojileriyle geliştirdiğiniz uygulamanızı Android ve iOS üzerinde native bir uygulama olarak çalıştırmanızı ve JavaScript üzerinden cihazın native özelliklerine erişmenizi sağlayan bir runtime'dır.

Daha basit anlatırsak:

React uygulaman var
        ↓
Capacitor ekliyorsun
        ↓
Android + iOS projesi oluşuyor
        ↓
Web kodun mobilde çalışıyor
        ↓
Plugin'lerle telefon özelliklerine erişiyorsun
        ↓
APK/AAB + iOS uygulaması oluşturuyorsun

İşin Özü Şu ki;

Capacitor'un asıl gücü:

"Web geliştiricisinin native mobil dünyaya mümkün olduğunca az yeniden geliştirme ile geçmesini sağlamak."

Eğer sıfırdan yalnızca iOS ve Android için çok yoğun native bir uygulama geliştiriyorsanız React Native veya doğrudan native geliştirme daha uygun olabilir.

Ancak zaten güçlü bir React/web uygulamanız varsa ve bunun:

• Android uygulamasını,

• iOS uygulamasını,

• PWA/web sürümünü,

• offline çalışma özelliklerini,

• kamera/GPS/bildirim gibi native özelliklerini,

• App Store ve Google Play dağıtımını

tek bir ana kod tabanından yönetmek istiyorsanız Capacitor çok güçlü bir seçenektir.

Özellikle mevcut bir React projesini mobil uygulamaya dönüştürmek isteyen web geliştiricileri için Capacitor'un en büyük avantajı, "mobil uygulamayı yeniden yazmak" yerine mevcut web uygulamasını native platformlarla buluşturmasıdır.

Resmî kaynak: Capacitor Documentation