Intinya
Ekstensi Apidog VS Code memungkinkan Anda mengirim permintaan API, mengelola koleksi, menjalankan pengujian, dan berbagi ruang kerja dengan tim Anda – semuanya tanpa meninggalkan editor Anda. Penyiapan memakan waktu kurang dari lima menit: instal ekstensi, masuk ke akun Apidog gratis Anda, dan ruang kerja Anda akan dimuat langsung di bilah sisi VS Code.
Pendahuluan
Apidog dimulai sebagai aplikasi desktop untuk desain, pengujian, dan dokumentasi API. Seiring waktu, tim merilis ekstensi VS Code yang membawa ruang kerja yang sama langsung ke editor Anda. Ekstensi ini tidak menduplikasi Apidog – ia terhubung ke ruang kerja Anda yang sudah ada, sehingga koleksi, lingkungan, dan kasus uji tetap sinkron baik Anda di VS Code, aplikasi desktop, atau antarmuka web.
Panduan ini akan membahas alur kerja lengkap: menginstal ekstensi, menghubungkan ke ruang kerja Anda, mengirim permintaan, menjalankan pengujian, dan menggunakan ekstensi VS Code bersama dengan aplikasi desktop.
Langkah 1: Instal ekstensi Apidog VS Code
Buka VS Code dan klik ikon Ekstensi di bilah sisi kiri (atau tekan Ctrl+Shift+X / Cmd+Shift+X).
Cari "Apidog" di bilah pencarian Marketplace Ekstensi. Cari ekstensi yang diterbitkan oleh Apidog Inc. – ia menampilkan logo Apidog (ikon gelap dengan huruf API yang digayakan).
Klik Instal. VS Code menginstal ekstensi dan menambahkan ikon Apidog ke Bilah Aktivitas Anda di sisi kiri.
Setelah instalasi, klik ikon Apidog di Bilah Aktivitas. VS Code akan membuka panel Apidog di bilah sisi.
Langkah 2: Masuk ke akun Apidog Anda
Panel Apidog menampilkan tombol "Masuk". Klik tombol tersebut.
Sebuah tab browser akan terbuka ke halaman autentikasi Apidog. Jika Anda sudah memiliki akun Apidog, masukkan email dan kata sandi Anda. Jika Anda belum memiliki akun, klik "Daftar" – tingkat gratis hanya memerlukan alamat email. Tanpa kartu kredit.
Setelah masuk, browser akan menampilkan konfirmasi dan meminta Anda untuk kembali ke VS Code. Klik "Buka VS Code" atau kembali ke VS Code secara manual.
VS Code menyelesaikan proses autentikasi dan memuat ruang kerja Apidog Anda di bilah sisi.
Seperti apa tampilan bilah sisi setelah masuk: Panel kiri menampilkan tampilan pohon (tree view) ruang kerja Anda. Di bagian atas, Anda melihat nama ruang kerja Anda. Di bawahnya, koleksi Anda muncul sebagai folder. Setiap koleksi akan diperluas untuk menampilkan permintaan di dalamnya, yang diatur berdasarkan struktur folder. Lingkungan muncul dalam menu tarik-turun (dropdown) di bagian atas panel.
Langkah 3: Navigasi koleksi Anda
Bilah sisi Apidog di VS Code mencerminkan struktur koleksi dari ruang kerja Apidog Anda secara persis.
Untuk menjelajahi koleksi, klik panah di samping nama koleksi. Ini akan diperluas untuk menampilkan folder dan permintaan. Folder akan diperluas lebih lanjut menjadi permintaan individual.
Setiap permintaan muncul sebagai item baris dengan lencana berwarna yang menunjukkan metode HTTP (GET dengan warna hijau, POST dengan warna biru, PUT dengan warna oranye, DELETE dengan warna merah). Mengklik permintaan akan membukanya di area editor VS Code sebagai tab.
Menggunakan bilah pencarian: Di bagian atas panel Apidog, terdapat kolom pencarian. Ketik kata kunci apa pun untuk memfilter koleksi Anda berdasarkan nama permintaan, URL, atau metode. Ini berguna ketika ruang kerja Anda memiliki puluhan koleksi.
Beralih ruang kerja: Jika akun Apidog Anda tergabung dalam beberapa ruang kerja (pribadi, tim, atau spesifik proyek), pemilih ruang kerja di bagian atas panel memungkinkan Anda beralih di antara keduanya.
Langkah 4: Kirim permintaan
Saat Anda membuka permintaan dari bilah sisi, permintaan tersebut akan dimuat di area editor utama sebagai tab. Antarmuka permintaan memiliki tata letak yang familier:
Bilah atas: Pemilih metode (menu tarik-turun dengan GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS), kolom URL, dan tombol Kirim.
Tab di bawah URL: Params, Headers, Body, Auth, Pre-request Scripts, Tests, Settings. Setiap tab membuka bagian konfigurasi yang relevan.
Untuk mengirim permintaan:
- Konfirmasi metode dan URL di bilah atas
- Tambahkan header yang diperlukan di tab Headers
- Jika permintaan memiliki body (POST, PUT), klik Body dan pilih tipe konten (JSON, form data, binary, dll.)
- Klik Kirim
Respons akan muncul di bagian bawah tab. Ini menunjukkan kode status, waktu respons, dan ukuran respons. Tab di bawah respons memungkinkan Anda melihat body (dengan penyorotan sintaks untuk JSON dan XML), header, cookie, dan hasil pengujian.
Menggunakan lingkungan: Pemilih lingkungan di bagian atas panel Apidog mengatur lingkungan aktif. Variabel seperti {{base_url}} atau {{token}} akan diselesaikan ke nilai-nilai yang ditentukan di lingkungan tersebut. Beralih lingkungan untuk menjalankan permintaan yang sama terhadap pengembangan (dev), staging, atau produksi tanpa mengedit URL.
Langkah 5: Edit dan buat permintaan
Anda dapat mengedit permintaan yang ada langsung di VS Code. Perubahan akan disinkronkan ke ruang kerja Apidog Anda secara otomatis.
Untuk membuat permintaan baru:
- Klik kanan koleksi atau folder di bilah sisi
- Pilih "Permintaan Baru"
- Tab permintaan kosong akan terbuka
- Atur metode, URL, header, dan body
- Tekan
Ctrl+S/Cmd+Suntuk menyimpan
Permintaan baru akan muncul di bilah sisi dan dapat segera diakses dari aplikasi desktop Apidog, antarmuka web, atau VS Code rekan tim mana pun.
Mengganti nama dan mengatur: Klik kanan permintaan atau folder apa pun di bilah sisi untuk mengakses opsi ganti nama, pindah, duplikasi, dan hapus. Penyusunan ulang dengan seret-dan-lepas (drag-and-drop) berfungsi di dalam bilah sisi.
Langkah 6: Jalankan pengujian
Apidog mendukung asertasi pengujian yang berjalan setelah setiap respons. Di tab Tests dari permintaan yang terbuka, Anda dapat menulis asertasi berbasis JavaScript:
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');
});
Setelah mengklik Kirim, tab Tests di bagian respons menunjukkan asertasi mana yang berhasil dan mana yang gagal, dengan jumlah berhasil/gagal dan pesan kesalahan untuk kegagalan.
Menjalankan koleksi: Klik kanan koleksi atau folder di bilah sisi dan pilih "Jalankan Koleksi". Sebuah panel eksekutor akan terbuka di mana Anda dapat mengatur iterasi, penundaan antar permintaan, dan lingkungan. Klik Jalankan untuk mengeksekusi semua permintaan secara berurutan. Hasilnya menunjukkan status berhasil/gagal untuk setiap asertasi permintaan.
Langkah 7: Gunakan ekstensi VS Code dan aplikasi desktop secara bersamaan
Ekstensi VS Code dan aplikasi desktop berbagi ruang kerja yang sama secara real-time. Tidak ada versi "utama" – keduanya adalah dua tampilan dari data yang sama.
Alur kerja umum yang menggunakan keduanya:
Rancang di desktop, uji di VS Code: Gunakan aplikasi desktop Apidog untuk menentukan skema API Anda, menulis dokumentasi, dan menyiapkan mock server. Kemudian beralih ke VS Code untuk menjalankan permintaan dan menulis asertasi pengujian tanpa meninggalkan lingkungan pengembangan Anda.
Tinjauan API Tim: Seorang pengembang backend memperbarui endpoint di aplikasi desktop. Seorang pengembang frontend membuka VS Code dengan ekstensi Apidog dan segera melihat permintaan yang diperbarui dengan parameter baru. Tidak ada pull request, tidak ada file JSON untuk diimpor.
Penulisan pengujian dalam konteks: Anda sedang menulis kode di VS Code untuk mengonsumsi API. Tanpa berpindah jendela, Anda dapat membuka panel Apidog, menemukan endpoint yang relevan, menjalankannya, memeriksa bentuk respons, dan kembali ke kode Anda – tetap berada dalam aplikasi yang sama sepanjang waktu.
Apa yang aplikasi desktop lakukan lebih baik: Desain skema, penyiapan mock server, penerbitan dokumentasi API, dan pengelolaan sejumlah besar lingkungan. Ini adalah fitur yang diutamakan di aplikasi desktop yang dapat Anda referensikan dari VS Code tetapi lebih mudah dikonfigurasi dalam tampilan desktop layar penuh.
Langkah 8: Berbagi dengan tim Anda
Jika Anda bekerja dengan satu atau dua pengembang lain, tambahkan mereka ke ruang kerja Apidog Anda. Dari antarmuka web atau aplikasi desktop Apidog, buka pengaturan ruang kerja Anda dan undang rekan tim melalui email.
Setelah mereka menerima undangan dan menginstal ekstensi VS Code, bilah sisi mereka akan menampilkan koleksi yang sama dengan yang Anda lihat. Permintaan apa pun yang mereka tambahkan atau modifikasi akan segera muncul untuk semua orang.
Tingkat gratis mendukung hingga tiga pengguna. Perubahan disinkronkan melalui cloud Apidog – tidak ada operasi git, tidak ada ekspor file, tidak ada konflik penggabungan.
Pertanyaan yang Sering Diajukan
Apakah ekstensi Apidog VS Code berfungsi tanpa aplikasi desktop?Ya. Ekstensi ini adalah klien lengkap untuk ruang kerja Apidog Anda. Anda tidak perlu menginstal aplikasi desktop untuk menggunakan ekstensi.
Dapatkah saya menggunakan ekstensi Apidog VS Code secara offline?Anda dapat melihat dan mengedit koleksi yang di-cache saat offline. Mengirim permintaan ke API eksternal memerlukan akses internet (begitu juga menyinkronkan perubahan). Dukungan offline penuh bergantung pada status cache ruang kerja Apidog Anda.
Bagaimana cara mengimpor koleksi Thunder Client atau Postman yang sudah ada?Di aplikasi desktop atau antarmuka web Apidog, buka Impor dan pilih format yang sesuai (Thunder Client JSON, Postman collection v2.1, OpenAPI, dll.). Koleksi yang diimpor akan muncul di ruang kerja Anda dan segera dapat diakses dari ekstensi VS Code.
Apakah ekstensi VS Code sama dengan membuat proyek baru di Apidog?Tidak. Ekstensi ini terhubung ke ruang kerja Apidog Anda yang sudah ada. Anda membuat dan mengelola ruang kerja dari aplikasi desktop atau antarmuka web. Ekstensi VS Code adalah klien yang memungkinkan Anda bekerja di dalam ruang kerja tersebut dari VS Code.
Dapatkah beberapa orang membuka koleksi yang sama secara bersamaan?Ya. Ekstensi ini tidak mengunci koleksi untuk diedit. Jika dua pengguna mengedit permintaan yang sama secara bersamaan, simpanan terakhir yang akan berlaku. Untuk pengeditan terkoordinasi, gunakan fitur kolaborasi aplikasi desktop.
Apakah ekstensi mendukung pelengkapan otomatis variabel lingkungan?Ya. Saat mengetik {{ di kolom URL atau parameter, ekstensi akan menyarankan variabel yang tersedia dari lingkungan aktif. Ini membantu menghindari kesalahan ketik pada nama variabel.
Ekstensi Apidog VS Code paling baik berfungsi sebagai alat utama Anda sehari-hari ketika Anda sudah melakukan pengembangan API di dalam VS Code. Biaya penyiapan dua menit akan cepat balik modal setelah koleksi, lingkungan, dan ruang kerja tim Anda semuanya dapat diakses tanpa berpindah jendela.