Posts

Showing posts with the label Javascript

Setup NodeJS Debugger di IntelliJ IDEA

Image
  D ebugging Node.js di IntelliJ IDEA adalah hal yang yang sangat membantu, berikut adalah panduan langkah demi langkah yang  saya buat dan juga akan menyertakan gambar dengan penjelasan yang jelas untuk membantu anda memahami setiap bagian. 1. Persiapan Awal Sebelum memulai, pastikan semua yang diperlukan sudah tersedia. Hal ini penting agar proses debugging berjalan lancar. IntelliJ IDEA Ultimate: Versi Ultimate diperlukan karena memiliki fitur debugging yang lengkap untuk Node.js. Versi Anda, IntelliJ IDEA 2025.2.1 , sudah sangat sesuai. * Node.js dan npm/pnpm: Pastikan versi Node.js dan package manager yang relevan (seperti npm atau pnpm) sudah terinstal dan dapat diakses dari terminal. Dari tangkapan layar, Anda menggunakan Node v22.19.0 dan pnpm v10.15.1 , yang merupakan versi modern dan stabil.    Proyek Node.js: Siapkan proyek Node.js Anda.      2. Mengatur Konfigurasi Debugger Langkah terpenting adalah membuat konfigurasi debugging di In...

Debug NestJS dengan PNPM di Intellij IDEA

Image
1.  Buka IntelliJ IDEA , lalu buka proyek. Project di buka di IDE 2.  Buka Konfigurasi Run/Debug Klik Run > Edit Configurations di menu atas. Klik tombol + di pojok kiri atas. Pilih Node.js sebagai konfigurasi baru. Edit Configurations   3. Konfigurasi Debugging Name : Isi dengan nama, misalnya Debug Dev . Node interpreter : Pilih Node.js versi 18 atau lebih tinggi (sesuai dengan engines.node di package.json ). Node parameters: --inspect-brk  pnpm : Milik saya terletak di ~/.nvm/versions/node/v18.20.4/bin/pnpm . Arguments : Masukkan dev --inspect-brk agar turbo berjalan dalam mode debug. Working directory : Pilih root proyek. Environment variables : Tambahkan NODE_OPTIONS=--inspect-brk . Klik Apply dan OK . 4. Jalankan Debugging Pilih konfigurasi Debug pnpm dev yang baru dibuat. Klik Debug ▶ (bukan Run ) di IntelliJ. 4.  Lihat Debug Tab di Bawah Klik : Debugger listening on ws://127.0.0.1:9229/38105022-0ee6-4b5d-bff3-d22845419201 Setelah dikl...

Belajar Dasar VueJs dan Vuetify

Image
Pasang VueJS CLI sudo yarn global add @vue/cli Buat VueJS Project vue create my-vuetify Masuk ke Project Folder cd my-vuetify Pasang Vuetify  vue add vuetify Jalankan VueJS Project yarn serve Penampakan di Browser Buka halaman berikut ini  http://localhost:8080/ . VueJS Vuetify di Browser. Mulai Belajar Vue dan Vuetify Lanjut belajar Vuetify dengan menggunakan sumber berikut ini: Daftar Isi Video 00:00:00 - Intro to Vuetify 00:02:09 - What is Material Design? 00:03:32 - First Look at Vuetify Code 00:06:51 - Typography 00:10:47 - Spacing 00:14:34 - Buttons 00:21:03 - Navigation 00:23:30 - Grid 00:29:59 - Card 00:35:08 - Store Navigation 00:45:30 - Home Page 01:08:18 - Store Page 01:23:35 - Cart Page 01:38:30 - Checkout Screen 01:57:07 - Conclusion Course interaktif dari video youtube diatas bisa ditemui di sini https://scrimba.com/learn/vuetify (Judi course: Learn Vuetify for free ). Semoga catatan ini bermanfaat buat yang baru mau belajar VueJS dan Vuetify....

Generate Spring dan VueJS Boilerplate dengan JHipster dan Docker

Image
  Logo JHipster JHipster merupakan sebuah development platform untuk meng- inisiasi   web project Java dan Javascript menjadi sebuah project yang terintegrasi (boilerplate) baik yang berupa monolitik hingga mikroservis dengan cepat.  (* Diperlukan pengetahuan dasar tentang Docker, Spring dan VueJS ). Disclaimer: Artikel ini saya tulis sebagai catatan pribadi dengan berpindah-pindah dari satu komputer ke komputer lain, maka struktur folder yang tampil dan juga tampilan gambar snapshot banyak yang berbeda-beda.  Perkenalan Untuk perkenalan bisa lihat slide berikut ini  https://www.jhipster.tech/presentation (sekitar 1-2 menit). Jika kita ingin membuat sebuah website yang kekinian dengan cepat, kita memiliki beberapa pilihan kode generator yang membantu kita menghemat banyak waktu,  dan memberikan kita perkakas juga meng- generate kode-kode umum yang diperlukan untuk memulai sebuah project web moderen. Akan tetapi, tidak mudah untuk menemukan kode generat...