DEV Community

Cover image for Cara Menggunakan Apidog di Dalam VS Code
Walse
Walse

Posted on • Originally published at apidog.com

Cara Menggunakan Apidog di Dalam VS Code

Intinya

Ekstensi Apidog VS Code memungkinkan Anda mengirim permintaan API, mengelola koleksi, menjalankan pengujian, dan berbagi ruang kerja dengan tim – langsung di editor Anda. Penyiapannya cepat: instal ekstensi, login ke akun Apidog gratis Anda, dan ruang kerja Anda langsung tersedia di bilah sisi VS Code.

Coba Apidog hari ini

💡 Apidog adalah platform pengembangan API lengkap dan gratis. Ekstensi VS Code menghubungkan editor Anda langsung ke ruang kerja Apidog sehingga Anda bisa menguji API, menulis dokumentasi, dan berkolaborasi tanpa pindah aplikasi. Coba Apidog gratis, tanpa kartu kredit.

Pendahuluan

Apidog awalnya adalah aplikasi desktop untuk desain, pengujian, dan dokumentasi API. Kini, ekstensi VS Code membawa workspace yang sama ke editor Anda. Ekstensi ini terhubung ke ruang kerja yang sudah ada – koleksi, environment, dan test case tetap sinkron di VS Code, desktop, maupun web.

Panduan ini membahas langkah teknis: instalasi ekstensi, koneksi workspace, kirim permintaan, jalankan test, dan kolaborasi dengan aplikasi desktop.

Langkah 1: Instal Ekstensi Apidog VS Code

  1. Buka VS Code, klik ikon Ekstensi di kiri (atau tekan Ctrl+Shift+X / Cmd+Shift+X).
  2. Cari "Apidog" di marketplace. Pilih ekstensi dari Apidog Inc. (logo gelap bertuliskan API).
  3. Klik Install. Setelah terpasang, ikon Apidog muncul di Bilah Aktivitas kiri.
  4. Klik ikon Apidog untuk membuka panel Apidog di bilah sisi VS Code.

Langkah 2: Masuk ke Akun Apidog Anda

  1. Di panel Apidog, klik tombol "Masuk".
  2. Browser akan terbuka ke halaman login Apidog. Masukkan email dan password.
    • Jika belum punya akun, klik "Daftar" (cukup email, tanpa kartu kredit).
  3. Setelah berhasil login, browser akan konfirmasi dan minta kembali ke VS Code.
  4. Setelah kembali di VS Code, workspace Apidog Anda otomatis termuat di bilah sisi.

Tampilan setelah login:

  • Panel kiri menampilkan tree view workspace Anda.
  • Bagian atas: nama workspace.
  • Di bawahnya: koleksi (folder), bisa diperluas jadi daftar permintaan.
  • Environment muncul di dropdown atas panel.

Langkah 3: Navigasi Koleksi Anda

  • Bilah sisi Apidog di VS Code menampilkan struktur koleksi sesuai workspace Apidog Anda.
  • Klik panah di samping nama koleksi untuk expand folder dan daftar permintaan.
  • Setiap permintaan ditandai lencana warna sesuai HTTP method (GET hijau, POST biru, PUT oranye, DELETE merah). Klik untuk membuka di tab editor.

Tips:

  • Pencarian: Atas panel Apidog ada search bar. Ketik kata kunci (nama permintaan, URL, method) untuk filter koleksi.
  • Workspace switcher: Jika punya beberapa workspace, gunakan dropdown di atas panel untuk pindah workspace.

Langkah 4: Kirim Permintaan

Ketika Anda membuka permintaan, akan tampil di tab utama editor:

  • Bar atas: Dropdown method (GET, POST, dll.), kolom URL, tombol Kirim.
  • Tab di bawah: Params, Headers, Body, Auth, Pre-request Scripts, Tests, Settings.

Kirim permintaan:

  1. Pastikan method & URL benar di bar atas.
  2. Tambah header di tab Headers.
  3. Jika perlu body (POST/PUT), klik Body, pilih tipe konten (JSON, form data, dsb).
  4. Klik Kirim.

Response muncul di bagian bawah:

  • Status code, waktu, ukuran.
  • Tab body (dengan syntax highlight), headers, cookies, hasil test.

Menggunakan environment:

Dropdown environment di atas panel Apidog menentukan environment aktif. Variabel seperti {{base_url}} atau {{token}} otomatis terisi sesuai environment. Ganti environment untuk testing di dev, staging, production tanpa edit URL.

Langkah 5: Edit & Buat Permintaan

Anda bisa edit permintaan langsung di VS Code dan perubahan sinkron ke workspace Apidog.

Buat permintaan baru:

  1. Klik kanan koleksi/folder di bilah sisi.
  2. Pilih "Permintaan Baru".
  3. Tab request kosong akan terbuka.
  4. Atur method, URL, header, body sesuai kebutuhan.
  5. Tekan Ctrl+S / Cmd+S untuk menyimpan.

Permintaan baru langsung muncul di panel dan bisa diakses dari desktop, web, atau VS Code tim Anda.

Rename & pengaturan lain:

Klik kanan permintaan/folder untuk rename, move, duplicate, atau delete. Drag-and-drop juga didukung pada sidebar.

Langkah 6: Jalankan Pengujian

Apidog mendukung assertion test berbasis JavaScript yang berjalan setelah response API.

Di tab Tests pada permintaan, tulis script seperti:

pm.test("Status adalah 200", function () {
  pm.response.to.have.status(200);
});

pm.test("Respons berisi ID pengguna", function () {
  const json = pm.response.json();
  pm.expect(json.id).to.be.a('number');
});
Enter fullscreen mode Exit fullscreen mode

Setelah klik Kirim, tab Tests di response akan menunjukkan test mana yang lolos/gagal, lengkap dengan summary dan error message.

Jalankan koleksi:

  • Klik kanan koleksi/folder → "Jalankan Koleksi".
  • Panel executor terbuka: atur iterasi, delay, environment.
  • Klik Jalankan. Hasil: status test tiap permintaan.

Langkah 7: Gunakan Ekstensi VS Code & Aplikasi Desktop Bersamaan

Ekstensi VS Code dan aplikasi desktop berbagi workspace real-time, tanpa versi utama. Keduanya sinkron.

Contoh alur kerja:

  • Rancang di desktop, uji di VS Code: Definisikan schema, dokumentasi, dan mock server di desktop. Jalankan permintaan & test di VS Code tanpa keluar dari coding environment.
  • Review API tim: Backend update endpoint via desktop, frontend buka VS Code dan langsung lihat update tanpa import file.
  • Tulis test dalam konteks kode: Coding di VS Code, cek endpoint langsung di sidebar Apidog, jalankan, cek respons, dan lanjut coding.

Aplikasi desktop unggul untuk:

Desain schema, setup mock server, publish dokumentasi, kelola banyak environment. Fitur ini lebih powerful di desktop view, tapi tetap bisa diakses dari VS Code.

Langkah 8: Berbagi dengan Tim Anda

Kolaborasi mudah:

  1. Dari web/desktop Apidog, buka pengaturan workspace.
  2. Invite anggota tim via email.
  3. Setelah join & install ekstensi, mereka lihat koleksi yang sama.
  4. Perubahan apapun langsung sinkron untuk semua anggota.

Tingkat gratis mendukung 3 user. Sync via cloud Apidog, tanpa git, tanpa file import/export, tanpa merge conflict.

Pertanyaan yang Sering Diajukan

Apakah ekstensi Apidog VS Code bisa tanpa aplikasi desktop?

Ya. Ekstensi adalah client penuh untuk workspace Apidog Anda. Tidak perlu install desktop app.

Bisa dipakai offline?

Anda bisa lihat/edit koleksi yang sudah di-cache. Kirim permintaan ke API eksternal dan sync perubahan tetap butuh internet. Dukungan offline penuh tergantung status cache workspace.

Bagaimana impor koleksi Thunder Client/Postman?

Di desktop/web Apidog, buka Impor dan pilih format (Thunder Client JSON, Postman v2.1, OpenAPI, dll). Koleksi yang diimpor langsung tersedia di ekstensi VS Code.

Apakah ekstensi VS Code membuat project baru di Apidog?

Tidak. Ekstensi hanya menghubungkan ke workspace yang sudah ada. Buat workspace dari desktop/web. VS Code hanya client untuk bekerja di workspace Anda.

Apakah koleksi bisa dibuka banyak orang sekaligus?

Ya. Tidak ada locking. Jika dua user edit permintaan sama, simpanan terakhir yang berlaku. Untuk edit terkoordinasi, gunakan fitur kolaborasi di desktop app.

Apakah mendukung auto-complete variabel environment?

Ya. Saat mengetik {{ di kolom URL atau parameter, ekstensi menyarankan variabel environment aktif. Ini mencegah typo pada nama variabel.

Ekstensi Apidog VS Code sangat cocok untuk workflow pengembangan API langsung di VS Code. Setup hanya butuh dua menit, dan Anda langsung bisa akses koleksi, environment, serta kolaborasi tim – tanpa perlu pindah aplikasi.

Top comments (0)