30pings

Masalah: Bagaimana caranya menambahkan URL API ke dalam project Vue.js? Ketika berhadapan dengan sebuah nilai yang akan digunakan dalam project dan tidak ingin mengotori source code, contohnya variabel URL untuk API, kita menggunakan domain berbeda dalam development dan production (misal http://localhost:7000 untuk development, dan https://example.com untuk production). Solusi: Kita bisa menggunakan ENV / file .env. Cukup tambahkan .env di root project. Lalu tambahkan nilai apapun di dalamnya, tapi dengan syarat selalu didahului oleh VUE_APP_* pada nama variablenya. Contoh untuk API_URL, kita bisa menggunakan VUE_APP_API_URL. Lalu pada file yang membutuhkan variable ini, untuk bisa mendapatkan nilainya, ambil dengan metode process.env.VUE_APP_NAMAVAR . Troubleshooting Jika variable tidak bekerja atau menghasilkan null/undefined, restart server terlebih dahulu (npm run serve).

Ini adalah error yang terjadi karena Vue memiliki beberapa versi: Runtime saja (untuk menjalankan Vue.js) dan Runtime+Template compiler (untuk menjalankan vue.js + mengkompilasi file template .vue). Untuk lebih lengkapnya kenapa ini terjadi, lihat  https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only Untuk mengatasinya, tambahkan file "vue.config.js" jika belum ada di root project anda. Masukkan kode berikut: module .exports = { runtimeCompiler: true } Mulai lagi npm run serve setelah kode dimasukkan.

Keuntungan modularisasi Kode bisa dishare ke project lain (helpers, dll) Modul `:core` Modul `:core` biasanya diinclude sebagai dependency oleh modul lain. Modul `:core` berisi dependency yang dibutuhkan oleh modul lain misal: `Retrofit`, `Gson`. Struktur `:core` inti dari app `:features` `:feature-a` fitur A activity A1 activity A2 layout AndroidManifest `:feature-b` fitur B `:helpers` kumpulan helpers yang bisa dishare ke project lain `:models` semua model `:api` data repository / Rest API Referensi  Modul `:core` : https://medium.com/mindorks/writing-a-modular-project-on-android-304f3b09cb37 .     Catatan: artikel ini memiliki struktur dimana model berada di dalam satu modul.

Sejak akhir tahun 2018, fungsi compile pada Gradle dapat digantikan dengan ` api ` dan ` implementation `. Apa bedanya? Untuk project modular, kedua kata kunci ini berguna dalam menentukan apa fungsi/class dari sebuah library/module bisa digunakan di anak module atau dependency-nya. Contoh: ``` [module A] <- [library X]     |     v [module B] ``` Jika `library x` dimasukkan dengan `api`, `library x` dapat digunakan oleh `module B`. Sebaliknya, dengan `implementation`, `library x` tidak dapat dipanggil di `module B`. Note: `Module B` bisa sebagai module atau project lain yang membutuhkan `module A`.