Capacitor ile Hibrit uygulama geliştirme

Published in

SDTR

5 min readAug 14, 2022

Merhabalar,

Bildiğiniz gibi mobil uygulama geliştirmek için bir çok yöntem var. Yaptığınız projeye, projenin süresine veya başka parametrelere bağlı olarak bu yöntemlerden birini seçebiliyoruz.

Bu yöntemler;

Native (ios: Objective-C, Swift android: Java, Kotlin)
Cross-Platform Native(Xamarin, React Native, Flutter)
Hybrid (Capacitor, Apache Cordova, Adobe PhoneGap)
PWA(Progressive Web Applications)(HTML, CSS, Javascript)

Ben bu yazımda sizlere Capacitor ile nasıl Hibrit uygulama geliştirilir, android ve ios’a nasıl uygulama çıkartılır, cli komutları nelerdir v.b. soruları cevaplamaya çalışacağım.

Teknik konulara geçmeden önce Hibrit Uygulama ve WebView nedir ve nasıl çalışır bunlara bakalım.

Hibrit mobil uygulama nedir?

Kısaca tek bir code base ile standart web teknolojilerini -Html, CSS ve javascript- kullanarak, bir çok mobil platformda çalışan uygulamalara hibrit uygulama diyebiliriz. Adının hibrit olmasının sebebi uygulamamızın aslında web uygulaması olduğu halde native bir şekilde kullanılabiliyor olmasından kaynaklanıyor.

Hibrit uygulama nasıl çalışır?

Hibrit uygulamalar mobil cihazda bir “web container” içinde çalıştırılır. Web Containerlar hibrit uygulamalarımız için bir browser runtime’ı sağlar. Bu sayede bir web uygulamamızı bir mobil cihazda çalıştırabiliyoruz.

Tabii web sayfasını sadece çalıştırarak ancak sayfaları görüntüleyebiliriz. Eğer cihazla da konuşmak istiyorsak -kameraya erişim gibi- bazı aracı teknolojiler kullanmamız gerekiyor.

Hibrit Uygulama Geliştirme Araçları

CapacitorJs
Apache Cordova
Adobe PhoneGap
Ionic Framework( Bir UI Framework’üdür Capacitor ile kullanılır)

Capacitor Nedir?

Şu anda v4.0'ı çıkarmış olan Capacitor, Ionic tarafından geliştirilmiş Ionic Framework, popüler web teknolojileri(Angular, React, Vue v.b.) ya da custom bir web sayfası ile de kullanılabilen bir hibrit uygulama geliştirme aracıdır. Kendi web sayfasında kendini “hibrit uygulamaların bir sonraki evrimi” olarak tanıtıyor. Aynı zamanda Apache Cordova ve Adobe PhoneGap’in manevi halefi olduğunu da belirtiyor. Bu nedenle bir çok Cordova plugini ile de geriye dönük uyumlu çalışabiliyor. Capacitor ayrıca PWA(Progressive Web Applications)’ı da destekliyor. Yani capacitor pluginleri PWA uygulamasında da sorunsuz çalışabiliyor.

Capacitor Plugin nedir?

Capacitor web sayfalarımızı göstermekle beraber cihaz ile web uygulamamız arasında köprü görevi görüyor. Eğer telefonun bir özelliğine erişmek istiyorsak onunla ilgili plugini web uygulamamıza eklememiz gerekiyor. Örneğin kameraya veya galeriye erişim için camera plugini’ni ya da pilin yüzde kaç kaldığını, şuan şarj ediliyor mu gibi bilgileri almak için device plugini’ni web projemize eklemek gerekiyor. Bu pluginleri npm ile projenize ekleyebilirsiniz.

Capacitor Community’si tarafından geliştirilen electron plugini ile de uygulamalarınızı desktop app olarak Linux, Mac ve Windows’ta çalıştırabilirsiniz.

Capacitor Pluginleri

Resmi Pluginler: Capastior takımı tarafından maintain edilen pluginlerdir. (Action Sheet, App, Camera, Google Maps v.b.)
Community Plugins: Capacitor Community’si tarafından maintain edilen pluginlerdir. Buradan açık kaynak pluginlere bakabilirsiniz.

Tabii native kadar cihazın tüm özelliklerine erişemesek de çoğu özelliğine erişebiliyoruz. Eğer bu pluginler işinizi görmüyorsa kendi plugin’inizi de geliştirip yayınlayabilirsiniz. Nasıl geliştireceğinize buradan bakabilirsiniz.

Capacitor Kurulum

Kurulum için gereksinimler aşağıda belirtilmiştir.

Nodejs versiyonu 14 veya üzeri
Android için
– Android Studio
– Android SDK Kurulumu
iOS için
– Xcode
– Xcode Command Line Tools
– Homebrew
– Cocoapods

Kurulum

Öncelikle eğer npm’i kurduysanız aşağıdaki komutu çalıştırın sonra aşağıda uygulamanız için gerekli olan soruları cevaplayın.
npm init @capacitor/app
Uygulamanın adını
? What is the name of your app?
Uygulamanın kurulacağı dosya yolu
? What directory should be used for your app?
Uygulama ID’si (ios için ak Bundle Id ve Android için Application Id’ye karşılık gelen benzersiz domain adı)
? What should be the App ID for your app?
Bu işlemlerden sonra verdiğimiz dosya yolunda bazı dosyalar oluşacaktır. Eğer node_modules klasörü yoksa oluşturmak için uygulama klasöründe aşağıdaki kodu çalıştırın. Ayrıca iki tane capacitor plugini(camera ve splash-screen) de default olarak gelecektir.
npm install

capacitor.config.json

Capacitor, projemiz oluştuktan sonra capacitor.config.json adında bir dosyayı da oluşturdu. Bu dosyada aslında cevapladığımız bilgilerin olduğunu görebilirsiniz. Capacitor mobil uygulamamızı çalıştırırken bu dosyada ki bilgileri kullanıyor. Uygulamayla ve Pluginlerle ilgili yada genel olarak uygulamayı geliştirme açısından bazı ayarları burada yönetiyoruz.

{
   "appId": "com.example.app", 
   "appName": "capacitor-demo",
   "bundledWebRuntime": false,
   "webDir": "dist",
   "plugins": {
      "SplashScreen": {
          "launchShowDuration": 0
      }
   }
}

Bu dosyada dikkat etmemiz gereken en önemli alan webDir dir. Capacitor mobil uygulamayı çıkartırken her zaman projemizin build alınmış ve içinde index.html dosyasının olduğu bir klasör yolu ister. Bu yolu yanlış verirsek mobil uygulamayı çıkartamayabilir. İşte bu yolu capacitor’e söylediğimiz yer “webDir”. Dosya da yer alan diğer propertylere buradan bakabilirsiniz.

manifest.json

Capacitor’un oluşturduğu bir diğer dosya da manifest.json dosyasıdır. Bu dosya, PWA için uygulamamız hakkında bazı bilgiler içerir. Tabii sadece bu dosya PWA uygulaması oluşturmak için yeterli değildir. Çok daha farklı bir konu olduğu için, buradan nasıl oluşturacağınızla ilgili daha detaylı bilgilere ulaşabilirsiniz.

Web uygulamamızı ayağa kaldırmak için npm start komutunu uygulama klasöründe çalıştıralım.

Bir de söylemeye gerek duymadım ama uygulamamız mobilde çalışacağı için responsive bir şekilde geliştirme yapmak çok önem kazanıyor.

iOS ve Android için CLI komutları

Web uygulamamızın mobil platformlarda ki projelerini çıkartmak ve yönetmek için capacitor’un cli komutlarını kullanacağız.
Bu komutları kullanmak için uygulama klasörümüzde
npm i @capacitor/cli komutunu çalıştırıp ilgili paketi yükleyelim.

Android ve iOS npm paketleri

Android için npm i @capacitor/android komutunu,
iOS için npm i @capacitor/ios komutunu çalıştırın.

Android platformu için uygulama çıkarma komutu

Aşağıdaki komut ile android adında, android uygulamasının bulunduğu bir klasör oluşturuyoruz.
npx cap add android

iOS platformu için uygulama çıkarma komutu

Aşağıdaki komut ile ios adında, ios uygulamasının bulunduğu bir klasör oluşturuyoruz.
npx cap add ios

Web uygulamasının build alınmış son halini çıkartma komutu

Aşağıdaki komut ile dist adında, web uygulamasının build alınmış son halinin bulunduğu bir klasör oluşturuyoruz.
npm run-script build

Bu komutları uygulama klasöründe çalıştırın. Aşağıdaki görselde projenin son halini görebilirsiniz.

uygulamaların bulunduğu **android, ios** ve **dist** klasörleri

Bu aşamadan sonra npx cap sync komutunu çalıştırıyoruz. Ayrıca bu komutu uygulamanızda yaptığınız her değişiklik veya eklenen her plugin için de tekrar çalıştırmamız gerekiyor. Bunu web uygulamamızdaki değişiklikler mobil uygulamalarımıza da yansısın diye yapıyoruz.

Android ve iOS klasörlerimiz oluştuysa bunları ister capacitor’un cli komutlarıyla isterseniz de kendi ide’lerinde(Xcode, Android Studio) açma veya çalıştırma işlemlerini yapabilirsiniz.

npx cap open android/ios android veya ios klasörlerini kendi idelerinde açar (android için Android Studio ios için Xcode’u)
npx cap run android/ios Android Studio veya Xcode’u çalıştırır.

Avantajlar

Tek bir code base üzerinden geliştirme yapılabilmesi
Open Source olması
Eğer web developer iseniz yabancı olmadığınız bir ortamda kod yazma
Hızlı geliştirme, aynı anda iki platforma da uygulama çıkartma
Plugin’lerin PWA uygulamasında çalışabilmesi
Electron plugini ile bir çok işletim sisteminde çalışan desktop uygulaması geliştirme

Dezavantajlar

Web componentler kullanıldığı için native uygulama hissi vermemesi(UI,UX).
Her şeyi yapamama. Eğer 3D oyunlar gibi yüksek performans isteyen uygulamalar geliştiriyorsanız capacitor bunun için uygun olmayabilir.
Pluginlere bağımlı uygulamalar geliştirme. Eğer mevcut pluginler işinizi görmüyorsa kendi plugininizi yazmak zorunda kalmanız.

Teşekkürler.