PhoneGap ve Cordova’yı eski topraklar bilir. Mobil uygulama ihtiyaçlarını arttığında, benim gibi web uygulama geçmişi köklü olan yazılımcılara, Android Studio ve Xcode üzerinde native uygulama geliştirmek cidden ölüm geliyordu. Çünkü kullandığımız platformlara hiç benzemiyordu.
Mobil uygulamalara teknolojileri ilerledikçe, bizim mesleğin felsefesinde yatan “sorunlara çözüm bulmak” ile cross-platform mobil uygulama geliştirme araçları çıktı. Çok işimize yaramıştı. İlk cross-platform mobil uygulamayı, biletyol projemizde sevgili dostum Mahir Fatih Ünal’la birlikte Cordova+Vue.js ile yapmıştık. Mantık şuydu web sitesi gibi hazırla ve bu platformlar webview içinde, tıpkı tarayıcı açtığımız bir web sitesi gibi çalışıyordu.
Bu platformların en büyük sorunu native uygulamalar gibi cihaz kaynaklarına yeterince erişememesi ve performanstı.
Yıllar içinde cross-platformların performans ve diğer sorunlarına çözüm bulmak için native uygulama üreten platformlar çıktı.
Şahsen Flutter’ı acayip derecede sevdim, çok memnunum ve 3 tane projemde kullandım.
İşim gereği genellikle finansal yazılımlar yaptığım için etkin bir şekilde Vue.js kullanmaktayım. Flutter’da ise dart dilini kullanıyoruz. Artık yaşlanmaktan 🙂 dolayımıdır bilemiyorum ama platformalar arası geçişte eskisi kadar hızlı bir şekilde adaptasyon sağlayamıyorum. Çünkü web uygulama üzerinde 3-4 ay uğraşıp sonra mobil uygulamaya geçtiğimde, bir süre yeteri kadar verimli çalışamıyorum. Artan işler ve zaman yetmezliğinden dolayı kullandığım teknolojileri biraz sadeleştirmem gerekiyordu.
Kavgaya sebep olacak ama Angular ve React deneyimleyen biri olarak Vue.js bence en iyisi 🙂
Yoğun olarak Vue.js kullandığımdan dolayı mobil uygulamalarıda Capacitor platformu kullanarak yapmaya karar verdim.
Capacitor projenize dahil etmek ve yapılandırmak çok kolaydır. Projemizde olması gerekenler ise;
- package.json dosyası olmalı
- Web varlıkları için ayrı bir dizine sahip olmalıdır.
- Web varlıkları dizininin kökünde <head> etiketi olan bir index.html dosya olmalıdır.
Mevcut projemize NPM ile gerekli kütüphanelerimizi dahil ediyoruz.
npm install @capacitor/core
npm install @capacitor/cli --save-devProjemize gerekli kütüphaneleri ekledikten sonra CLI kullanarak proje içinde Capacitor başlatıyoruz.
npx cap initProjemize Android ve iOS desteği eklemek için aşağıdaki komutları çalıştırıyoruz. Electron desteğide mevcut olduğunu unutmayın.
npm install @capacitor/ios
npx cap add ios
npm install @capacitor/android
npx cap add androidiOS veya Android emulatorde projeyi açmak için aşağıdaki komutları çalıştırabilirsiniz.
npx cap run ios
npx cap run androidEğer Android veya iOS’a özel eklentiler eklemek için proje dosyalarını aşağıdaki komutlarla çalıştırabilirsiniz.
npx cap open ios
npx cap open androidBundan sonra tek yapmanız gereken projenizi run veya build etmektir. Capacitor hakkında daha geniş bilgi için dökümanlarını inceleyiniz.