Android’den Vue.js’e: VSCode, Zorluklar ve Çözümler

Image prepared by Canva.

Hoş geldin. Yılbaşında çıktığım Vue.js macerasından altta gördüğün gibi farklı yazılarda bahsettim. Okuyup, alkış atıp geliyorsun lütfen.

DevDiscipline

Bir Android Geliştiricinin Vue.js, Quasar ile Tanışması

8 yıllık Android & Kotlin geliştiricisinin sıkılma itirafı: ING bankacılık uygulamasından Vue.js Quasar Framework ile cross-platform geliştirmeye geçiş.

Mayıs 2017 ve Ekim 2018 arası Protel’de junior Android geliştirici olarak çalıştığım dönemde çok güzel işler yapmıştık, çok şey öğrenmiştim. O zamanlar frontend ve backend taraflarını hiç merak etmezdim. Frontend başka bir dünyaydı. Backend ise bize veri sağlamak zorunda olan kölemizdi. :) Önceliğim kendi alanımda daha iyi olmaktı tabii ki ancak frontend’de Vue.js’i Türkiye’ye getiren insanlarla aynı ekipte, dirsek dirseğe çalıştığım için sürekli onların övgülerine şahit olurdum ve içten içe Vue.js’i çok merak ederdim.

Şu yazıda anlattığım gibi Android’den sıkılabileceğim ve başka bir heyecan arayacağım hiç aklıma gelmezdi. Vue.js’e olan bu eski merakımla birlikte Android’den Vue.js’e geçişte daha da heyecanlandım.

Başta Kotlin ve Android Studio alışkanlıklarımın Vue.js ve Visual Studio Code’da karşılanacağını bekledim. Farklı IDE’ler, farklı diller, farklı altyapılar… Bu yolda çok şey öğrendim ve çok kıyaslama, bağdaştırma yaptım. Lafı daha fazla uzatmadan konuya girişeyim.

Tarayıcı Cihaz Modu Balondur

Öncelikle, şu yazıda ayrıntılı bir şekilde bahsettiğim Mevbank Neo’nun gerçek bir Android cihazda nasıl göründüğünü güzelce test etmeli, Android cihazlarda karşılaşılan sıkıntılara bir göz atmalı ve hatalar, kaymalar varsa düzeltmeler yapmalıydım. Geliştirdikleri web uygulamasının çeşitli cihazlarda nasıl göründüğünü test etmek için frontend geliştiricilerin kullandıkları araçlardan ilki, Cihaz Modu (Device Mode) özelliğidir.

Cihaz Modu, web sitelerini farklı cihazlarda “simüle etmek” için kullanılan bir özelliktir. Geliştirici Araçları’nı (Dev Tools) açtıktan sonra açılan pencerede sol üstte bulunan “Cihaz Araç Kutusu’nu Aç (Toogle Device Mode)” butonuna tıklayarak bu modu etkinleştirebilirsiniz. Seçilen cihazın ekran boyutları, çözünürlüğü ve piksel yoğunluğu simüle edilir. Ayrıca, dokunma olayları ve ağ hızı gibi mobil özellikler de test edilebilir. Bu özellik, web sitenizin farklı cihazlarda nasıl görüneceğini ve çalışacağını hızlıca değerlendirmenizi sağlar.

Bu simülasyon, gerçek bir cihaz ekranı değil, yalnızca tarayıcı içinde boyutlandırmayı taklit eden basit bir çerçevedir; emülatör bile değildir. Capacitor aktifleşmez. $q.platform.is.capacitor gibi kod parçacıkları bu cihaz modunda çalışmaz. Hiç cihazmış gibi düşünmeyin, bir görüntüden ibarettir. Bu yüzden şahsen sadece UI tasarlarken mobil cihazlarda nasıl görüneceğine bakmak için kullanıyorum.

Şu modu kastediyorum:

Yazar tarafından ekran görüntüsü.

Geliştirici Modunu ve USB Hata Ayıklamayı Açın

Gerçek bir Android cihazı kullanmak için cihazın geliştirici seçeneklerinden USB hata ayıklama (USB debugging) özelliğini etkinleştirmeniz gerekiyor. Korkmayın, telefonunuz ve verileriniz herhangi bir zarar görmeyecek. Bunun için izlemeniz gereken adımlar şunlardır:

1. Android cihazınızda Ayarlar > Telefon Hakkında bölümüne gidin.

2. Yapı Numarası (Build Number) üzerine 7 kez tıklayarak geliştirici modunu açın.

3. Geliştirici moduna geçtikten sonra, Ayarlar > Geliştirici Seçenekleri altında USB Hata Ayıklama seçeneğini aktif hâle getirin.

Bir Vue.js-Quasar Projesini Gerçek Android Cihazda Nasıl Çalıştırabilirim?

Bir Vue.js-Quasar projesini bir Android cihazda çalıştırabilmek için öncelikle Capacitor kullanarak proje kök dizini içerisinde bir Android projesi oluşturmamız gerekiyor. Capacitor’ü de şu yazıda uzun uzun anlatmıştım. Terminal de şu komutlar çalıştırılır:

Projeye Capacitor’u ekle:

quasar mode add capacitor

Projeye Android platformunu ekle:

npx cap add android

Capacitor’ü kurduktan ve projeye Android platformunu ekledikten sonra, bir Vue.js-Quasar projesini bir Androidcihazda çalıştırabilmek için iki seçeneğimiz var: biri Android Studio kullanmak, diğeri ise kullanmamak. Şahsen tercih ettiğim seçenek tabii ki Android Studio kullandığımız versiyon.

Bir Vue.js Quasar Projesini Android Studio Kullanmadan Android Cihazda Çalıştırmak

Android Studio kullanmadan ADB (Android Debug Bridge) ile cihazınızda uygulamanızı çalıştırabilirsiniz. USB kablosu ile bağlı cihazınızı bilgisayarın görmesi için ADB’ye ihtiyacımız var. Şu yazıda ADB’yi uzun uzun anlattım.

Projenizi Quasar ile dev ortamında inceleyin:

Öncelikle projenizin çalışıp çalışmadığını, bir hata olup olmadığını görebilmek amacıyla hızlıca bir normal tarayıcı üzerinden çalıştırın.

quasar dev

Konsolda hata görmüyorsanız ve düzgün çalışıyorsa alttaki komutu çalıştırın. Bu komutla mobil kodlarının derlenip Android Studio’da açılması lazım:

quasar dev -m capacitor -T android

Android Studio’daki “Çalıştır” butonu ile projenizi emülatör veya cihazınıza gönderin.

Projenizi Quasar ile build edin:

Bu komuttan sonra android/app/build/outputs/apk/debug/dizininde APK dosyanız oluşacaktır.

quasar build -m capacitor -T android

Build işlemini Capacitor ile senkronize edin:

Build edilen Quasar dosyalarını Capacitor projesiyle senkronize edin:

npx cap sync android

Android cihazı ADB ile bağlama:

Cihazınızı USB üzerinden bilgisayarınıza bağlayın ve ADB ile cihazın bağlı olup olmadığını kontrol edin:

Uygulamayı cihaza gönderin:

APK oluşturulduktan sonra, ADB ile cihazınıza yükleyebilirsiniz:

adb install android/app/build/outputs/apk/debug/app-debug.apk

İsterseniz cd komutu ile terminal de APK dosyasının olduğu klasörü açıp orada sadece şu komutu çalıştırabilirsiniz:

adb install app-debug.apk

Uygulamayı cihazda çalıştırın:

Yüklenen APK’yi cihazınızda çalıştırmak için:

adb shell am start -n com.yourapp.package/com.yourapp.package.MainActivity

Bir Vue.js Quasar Projesini Android Studio Kullanarak Android Cihazda Çalıştırmak

Android Studio kullanarak projenizi gerçek bir cihazda çalıştırmak, özellikle gelişmiş hata ayıklama, simülasyon ve performans testleri için oldukça yararlıdır. Öncelikle bilgisayarınıza şuradan bizim keratayı indirmelisiniz.

1. İlk olarak Capacitor ile Android platformunu bir önceki maddede anlattığım gibi ekledikten sonra Android Studio’yu açın ve proje kök dizinindeki Android klasörünü içe aktarın. Bu, Android Studio’nun projenizi tanımasını, gerekli yapılandırmaları otomatik olarak yüklemesini ve Gradle ile paketleri indirmesini sağlar.

2. Cihazınızı USB ile bilgisayarınıza bağlayın ve geliştirici seçeneklerinde “USB hata ayıklama” nın açık olduğundan emin olun.

3. Android Studio’da “Run” düğmesine tıklayarak uygulamanızı cihazınıza yükleyin ve çalıştırın.

Android Developers

Android Studio ve Uygulama Araçları'nı İndirin - Android Geliştiricileri  |  Android Developers

Android Studio, uygulama oluşturuculara Android uygulamaları için optimize edilmiş entegre bir geliştirme ortamı (IDE) sağlar. Android Studio'yu hemen indirin.

Uygulama yüklendikten sonra, Android Studio’nun Logcat ekranında uygulamanızın çalışmasıyla ilgili çıktıları ve hataları canlı olarak izleyebilirsiniz. Bu, uygulamanızın performansını optimize etmenizi ve herhangi bir hatayı hızlıca tespit edip düzeltmenizi sağlar.

Logcat iyidir, severiz. Mobil uygulamamıza gelen bildirimi de hataları da console.log mesajlarını da gösterir. Bir de “Android Profiler” var ki sormayın gitsin.

Android Profiler

Android Studio içerisinde yer alan bir performans izleme aracıdır. Uygulamanızın CPU, bellek, ağ ve enerji tüketimi gibi performans metriklerini detaylı bir şekilde analiz etmenize olanak tanır. İşte Android Profiler’ın temel işlevleri:

1. CPU Profiler: Uygulamanızın CPU kullanımını izleyerek hangi işlemlerin fazla kaynak tükettiğini ve ana iş parçacığının hangi görevlerde yoğunlaştığını gösterir. Thread aktivitelerini izleyebilir ve performans darboğazlarını bulabilirsiniz.

2. Memory Profiler: Uygulamanızın bellek kullanımını izleyerek memory leaks (bellek sızıntıları) gibi sorunları tespit etmenize yardımcı olur. Ayrıca hangi nesnelerin bellekte ne kadar yer kapladığını ve bellek yönetiminin verimliliğini gözlemlemenize olanak tanır. Diyelim ki bir sayfayı açtığınız anda, yani sayfa geçişinde bir istek gönderiyorsunuz. Cevabın ne kadar memory harcadığını çok net görebilirsiniz. Uygulama webview bile olsa etkilidir. Bir iç içe for döngüsünün ne kadar zarar verdiğini görebilirsiniz.

3. Network Profiler: Yaptığınız ağ isteklerini izler, veri transferi miktarını ve hızını ölçer. Uygulamanızın internet bağlantısının nasıl kullanıldığını ve optimizasyon ihtiyacı olup olmadığını anlayabilirsiniz.

4. Energy Profiler: Enerji tüketimini izleyerek pil kullanımına nasıl etki ettiğini gösterir. Özellikle mobil cihazlarda pil ömrü optimizasyonu için önemlidir.

Bu araç, geliştirdiğiniz cross-platform webview uygulamaların bile performansını analiz etmek ve optimize etmek için oldukça güçlü ve kullanışlıdır. Tabii ki bir Vue.js Quasar uygulamasını cihazda çalıştırabilmek için Android Studio kullanmak zorunda değilsiniz ancak geliştirme sürecinizin daha verimli olmasını istiyorsanız kesinlikle kullanmalısınız.

Konsol Çıktısı ve Hataları Görmek

Vue.js ve Quasar projenizi bir Android cihazda çalıştırdıktan sonra, konsol çıktıları ve hata ayıklamaları için en iyi araçlardan biri Chrome DevTools’tur. Android cihazdaki uygulamanızın tarayıcı üzerinden hata ayıklamasını yapmak için şu adımları takip edebilirsiniz:

1. Chrome Üzerinden Cihazı Bağlayın:

Cihazınızı bilgisayara USB ile bağladıktan sonra, tarayıcınızda chrome://inspect/#devices sayfasını açın. Bu sayfada, bağlı cihazları ve cihazda çalışan webview’leri görebilirsiniz.

Yazar tarafından ekran görüntüsü

2. Uygulamanızı Seçin:

Burada, Vue.js Quasar uygulamanızın bağlantısını göreceksiniz. Yanında bir “Inspect” butonu bulunur. Bu butona tıkladığınızda uygulamanızın tarayıcı üzerindeki konsolunu ve hata ayıklama araçlarını görebileceğiniz Chrome DevTools açılır.

3. Console.log ve Hata Mesajları:

Uygulamanızda kullandığınız console.log() mesajları, hatalar ve diğer çıktılar bu konsolda gösterilir. Özellikle API çağrıları, komutlar, yanıtlar ve hata mesajları burada gözlemlenebilir.

4. Gerçek Zamanlı Hata Ayıklama:

Chrome DevTools’ta, Vue.js uygulamanızdaki herhangi bir kod parçasını anında inceleyebilir, console.log() çıktıları ve hata ayıklamaları yapabilirsiniz. Uygulamanızın bileşenlerine ve verilerine doğrudan müdahale edebilir, hataların kaynaklarını bulup çözebilirsiniz.

Ekstra İpuçları:

• Network ve Performance Tabları: Ayrıca, Network tabını kullanarak uygulamanızın internet bağlantısı üzerinden yaptığı tüm HTTP isteklerini görebilirsiniz. Burada, taleplerin ne kadar sürede işlendiğini ve herhangi bir hatayla karşılaşıp karşılaşmadığını detaylı olarak inceleyebilirsiniz.

• Breakpoints ve Debugging: Sources tabını kullanarak uygulamanızda breakpoint’ler (kesme noktaları) oluşturabilir, kodun belirli satırlarında durarak adım adım hata ayıklaması yapabilirsiniz.

• Vue DevTools: Chrome’a Vue.js için özel olarak hazırlanmış Vue DevTools eklentisini kurarak Vue bileşenlerini ve state yönetimini gerçek zamanlı olarak inceleyebilir, değişiklikler yapabilirsiniz. Bu eklenti ile Vue.js uygulamanızın verileri, lifecycle hook’ları ve bileşen yapısı üzerinde detaylı analiz yapmanız mümkün.

Android ve Vue.js Lifecycle (Yaşam Döngüsü) Karşılaştırması

Android Yaşam Döngüsü: Android uygulamalarında, bir Activity ya da Fragment’in yaşam döngüsünü kontrol etmek için onCreate(), onResume(), onPause() gibi metotlar kullanılır. Bu metotlar sayesinde uygulamanın belirli aşamalarında gerekli işlemleri yapabiliriz.

Vue.js Lifecycle Hooks (Yaşam Döngüsü Kancaları): Vue.js tarafında ise bileşenlerin yaşam döngüsünü yönetmek için lifecycle hooks kullanılır. mounted(), created(), updated() gibi yaşam döngüsü metotları, bileşenin ne zaman oluşturulacağını, ne zaman güncelleneceğini veya yok edileceğini kontrol etmenizi sağlar. Android ile benzer mantıkta çalışır ancak web dünyasına özgü bazı farklar vardır.

1. Uygulama vs Bileşen Temelli Yapı

• Android Lifecycle: Android’de yaşam döngüsü metotları, Activity ya da Fragment gibi uygulama düzeyinde yapıların yaşam döngüsünü yönetir. Bu yapılar, bir kullanıcı arayüzü ile ilişkili olup olmamasına bakılmaksızın uygulamanın tüm genel sürecini kapsar. Yani, Activity veya Fragment’lerin oluşturulması, duraklatılması ve sonlandırılması tüm uygulama süreçlerini etkileyebilir.

• Vue.js Lifecycle: Vue.js’te lifecycle metotları daha çok bileşen düzeyinde çalışır. Her bileşenin kendi yaşam döngüsü vardır ve bu lifecycle metotları yalnızca o bileşene özgüdür. Bileşenler, sayfanın belirli bölümlerinde yer alır ve tüm sayfayı değil, o bölümü etkiler. Yani, her bileşenin kendi bağımsız yaşam döngüsü bulunur, bu da bileşenlerin birbirine bağımlı olmadan yönetilebilmesini sağlar.

2. Bağlam (Context) Farkı

• Android: Android lifecycle metotları, Activity ya da Fragment gibi geniş kapsamlı bileşenler için geçerlidir. Yani bir onCreate() metodu çağrıldığında uygulamanın çok geniş bir kısmı etkilenir. Bağlam, bir uygulama seviyesi olup tüm kullanıcı arayüzü ve backend işlemleriyle iç içedir.

• Vue.js: Vue.js bileşenlerinde lifecycle hooks sadece o bileşenin HTML, CSS ve JS ile sınırlı parçasını kontrol eder. Vue bileşenleri DOM’da daha küçük bir kapsamda çalışır ve o bileşenin bağlamına özgü olarak yürütülür. Vue bileşenleri iç içe olabilir ve bir bileşenin lifecycle’ı, diğer bileşenin lifecycle’ından bağımsız olabilir.

3. State ve Data Yönetimi

• Android: Android’deki onCreate() ve onResume() gibi lifecycle metotlarında Activity ya da Fragment içindeki veriler (state) sıklıkla bundle’lar ya da view modeliyle taşınır. Ayrıca, uygulama durdurulup yeniden başlatıldığında onSaveInstanceState() metodu ile veriler kaydedilip geri yüklenebilir. Bu durum, uygulamanın farklı aşamalarında state yönetimini oldukça karmaşık hâle getirebilir. Biliyorum MVVM var, bu yazıda girmiyorum.

• Vue.js: Vue.js’te state ve data yönetimi daha basittir. Bileşenler içindeki data() fonksiyonu ile veriler saklanır ve Vue’nun reactivity sistemi sayesinde her veri güncellemesi anında bileşende gösterilir. Ayrıca, Vue.js bileşenlerinde veri yönetimi için Vuex, Pinia gibi global state yönetim araçları da kullanılabilir. Yani state değişiklikleri otomatik olarak Vue.js’in reactivity sistemine dâhil edilir ve manuel olarak state kurtarma gibi işlemler yapmanız gerekmez.

4. Asenkron İşlemler ve API Çağrıları

• Android: API çağrıları ve diğer asenkron işlemler genellikle lifecycle metotları içinde yapılır. Örneğin, onCreate() veya onResume() içinde API çağrısı yapılabilir ancak bu çağrıların cevapları alındığında Activity’nin hâlâ aktif olup olmadığını kontrol etmek gereklidir. Android’de bu tür asenkron işlemler karmaşık hâle gelebilir çünkü Activity veya Fragment sonlanmış olabilir ama işlemin cevabı hâlâ bekleniyor olabilir.

• Vue.js: Benzer şekilde, asenkron işlemler (API çağrıları, timer’lar vb.) mounted() ya da created() kancalarında genellikle lifecycle hooks içinde gerçekleştirilir. Vue.js’te bu işlemler, bileşenler DOM’a yüklendikten sonra yapılır ve bileşen yok olduğunda Vue’nun reactivity sistemi durumu kendiliğinden yönetir. Yani, bileşen DOM’dan kaldırıldığında Vue.js içindeki birçok reaktif yapı da yok edilir, manuel olarak işlemi iptal etmeye gerek kalmaz.

5. Memory Management (Bellek Yönetimi)

• Android: Android uygulamalarında memory leaks (bellek sızıntıları) sıkça karşılaşılan bir sorundur. Activity ya da Fragment yaşam döngüsü doğru yönetilmezse bir Activity kapandıktan sonra bile hâlâ bellekte kalabilir ve gereksiz bellek kullanımı yaratabilir. Android’de onDestroy() metodunda manuel olarak kaynakları temizlemek önemlidir.

• Vue.js: Vue.js, bellek yönetimi konusunda oldukça etkilidir. Vue bileşenleri DOM’dan kaldırıldığında ya da yok edildiğinde, bu bileşenlere bağlı olan veriler, olay dinleyicileri ve asenkron işlemler otomatik olarak temizlenir. Bu da Vue’nun destroyed() lifecycle hook’u ile yapılır. Manuel müdahale gerektiren durumlar çok nadirdir.

Emülatörden Tarayıcıya: Canlı Yenileme (HMR: Hot Module Replacement)

Android Studio’da uygulamanızı build edip cihazda çalıştırırken her değişiklikten sonra uygulamayı baştan çalıştırmak zorunda kalırdınız. Son Android Studio sürümleriyle ve Compose ile geliştirmeye çalıştılar ama kaçımız güveniyoruz ki? Hâlâ tekrar çalıştırmaya daha çok güveniyoruz.

Quasar’da ise tarayıcı üzerinde canlı yenileme özelliği (HMR) sayesinde bu iş çok daha hızlıdır. HMR, projede yaptığınız değişikliklerin tarayıcıda anında yansıtılmasını sağlar, böylece sürekli build ve deploy işlemi yapmanıza gerek kalmaz. Bu özellik ile özellikle UI geliştirme sırasında zamandan büyük tasarruf edersiniz.

Gradle vs Quasar CLI: Build Süreçleri

Gradle: Android Studio’da Gradle, bağımlılık yönetimi, modüler yapı desteği ve proje build işlemleri için güçlü bir yapı sağlar. Gradle’ın sunduğu modüler yapı, iOS’ta bile olmayan bir avantajdır. Android’de her modül, birbirini yalnızca bir kütüphane olarak görür ve bir modül derlendikten sonra kodda değişiklik yapılmadığı sürece tekrar derlenmez. Bu, büyük projelerde build sürelerini optimize etmenin etkili bir yoludur. Ayrıca, Gradle’ın otomatik olarak oluşturduğu R dosyası sayesinde, R.icon gibi kısa yollarla uygulamadaki kaynaklara (ikonlar, resimler, renkler, statik metinler…) kolayca erişilebilir.

Vue.js ve Quasar CLI: Quasar CLI, Vue.js projelerinde build süreçlerini oldukça basit ve hızlı hâle getirir. Özellikle Hot Module Replacement (HMR) gibi özellikler sayesinde, her değişiklikten sonra tüm projeyi baştan build etmek yerine sadece güncellenen bölümleri yenileyerek büyük bir hız kazandırır. Öte yandan, Gradle’daki gibi modüler bir yapıya sahip olmaması, büyük projelerde aynı esnekliği sağlamayaz. Vue.js projelerinde bir dosyaya erişmek istediğinizde, o dosyayı mutlaka manuel olarak import etmeniz gerekir. Bu da Android’deki R dosyası gibi merkezi bir erişim kolaylığı sağlamaz.

XML’den Vue.js Template’lerine Geçiş

Şu yazıda bu farkı uzun uzun anlatmıştım. Android projelerinde XML kullanarak layout’ları tanımlarken Vue.js projelerinde HTML benzeri template yapısı kullanılır. Quasar framework’ü ile birlikte gelen hazır bileşenler sayesinde UI geliştirme süreci çok daha hızlı hâle gelir. Örneğin, bir buton ya da form oluşturmak istediğinizde Quasar bileşenlerini kullanarak çok kısa sürede etkileşimli kullanıcı arayüzleri oluşturabilirsiniz.

<template>
  <q-btn label="Gönder" color="primary" @click="sendMessage" />
</template>

Bu örnek, Android’deki Button bileşenine oldukça benzer ancak Vue.js’te HTML temelli bir yapıda çalışmak, tasarım ve geliştirme süreçlerini oldukça hızlandırır.

Visual Studio Code Yadırgamalarım

Android Studio’dan Visual Studio’ya geçtiğimde ilk işim, Android Studio’da sıkça kullandığım çift shift (Double Shift) özelliğini eklemek oldu. Android Studio’da çift shift tuşuna bastığında dosya ve sınıflar arasında hızlıca arama yapabiliyordum. VS Code’a geçtiğimde de bu özelliği “Go to File” (Ctrl+P) ve “Quick Open” ile sağlamaya çalıştım. Tabii, aynı hissi vermiyor ama işimi gördü.

Yorum satırına çevirme kısayolunda zorlandım. Android Studio, seçili metnin yorum satırı olup olmadığını algılar; kısayol tuşuna bastığım zaman otomatik olarak ya yorumlar ya da yorumdan çıkarırdı ancak VS Code’ da, yorum satırını yorumdan çıkarmak için Ctrl+7, bir satırı yorum satırına dönüştürmek için Ctrl+6 kısayollarını kullanıyorum.

Android Studio’da Ctrl+D ile bulunduğum satırın altına aynı satırı kopyalayabiliyordum. VS Code’dasatırı kopyalamak için Shift+Alt+Down kullanabilirdim ama alışkanlık işte… Hemen Ctrl+D ‘ye çevirdim. Kodda Hızlı Arama (Find in Path) ikisinde de Ctrl+Shift+F olduğu için teşekkürler çocuklar.

Visual Studio Code’da Vue.js Quasar projeleri için debugging işlemi oldukça basit. Chrome veya Edge tarayıcısı ile doğrudan hata ayıklama yapabilir, breakpoint’ler ekleyerek kodu adım adım inceleyebilirsin. Bununla ilgili daha detaylı bir rehberi yakında paylaşacağım ancak şimdilik launch.json dosyasını aşağıdaki şekilde düzenleyerek tarayıcıda debugging yapmaya başlayabilirsin.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Quasar: Launch Chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "breakOnLoad": true,
      "skipFiles": ["<node_internals>/**"],
      "trace": true
    }
  ]
}

Sonuç

Android’ den Vue.js ve Quasar’a geçiş ilk başta korkutucu görünse de zamanla projeleri hızla geliştirmeye olanak tanıyor. Gradle’ın modüler yapısını ve R dosyası gibi avantajları özlenebilir ancak Quasar CLI ve HMR ile projeleri daha hızlı ve esnek geliştirmek de mümkündür.. Ayrıca Vue.js’in bileşen bazlı yapısı ve yaşam döngüsü kancaları, Android’in Fragment yönetimi kadar güçlü ve işlevsel.