Mengintegrasikan APIMart dengan Cline di VSCode

Documentation Index

Fetch the complete documentation index at: https://docs.apimart.ai/llms.txt

Use this file to discover all available pages before exploring further.

​

Pendahuluan

​

Prasyarat

1. Visual Studio Code sudah terinstal
   Unduh dan instal VSCode dari situs resmi
2. Ekstensi Cline sudah terinstal
   Cari “Cline” di marketplace ekstensi VSCode lalu instal
3. API key APIMart sudah diperoleh
   Masuk ke Konsol APIMart untuk mendapatkan API key Anda (diawali dengan sk-)

​

Langkah 1: Instal Ekstensi Cline

​

1.1 Buka Marketplace Ekstensi

1. Klik ikon Extensions di bilah aktivitas kiri (atau tekan Ctrl+Shift+X / Cmd+Shift+X)
2. Ketik Cline di kotak pencarian
3. Temukan ekstensi Cline (oleh Cline)
4. Klik tombol Install

​

1.2 Verifikasi Instalasi

1. Ikon Cline (kepala robot) akan muncul di bilah aktivitas kiri
2. Klik ikon tersebut untuk membuka sidebar Cline
3. Saat pertama dibuka, Anda akan melihat pesan sambutan “Hi, I’m Cline”
4. Dua opsi akan ditampilkan:
   • Get Started for Free - Gunakan uji coba gratis resmi
   • Use your own API key - Gunakan API key Anda sendiri

​

Langkah 2: Konfigurasikan API APIMart

​

2.1 Pilih untuk Menggunakan API Key Sendiri

1. Klik tombol Use your own API key
2. Tindakan ini akan membuka antarmuka konfigurasi API

​

2.2 Konfigurasikan Penyedia API

1. Perluas bagian Konfigurasi API
2. Pilih OpenAI Compatible dari dropdown API Provider
3. Opsi konfigurasi kompatibel OpenAI akan ditampilkan

​

2.3 Isi Konfigurasi API

​

2.4 Simpan Konfigurasi

1. Klik tombol Done di sudut kanan atas
2. Konfigurasi disimpan secara otomatis
3. Cline akan langsung terhubung ke APIMart menggunakan konfigurasi baru
4. Kembali ke antarmuka utama Cline yang menampilkan “What can I do for you?”

​

Langkah 3: Pilih Model yang Tepat

​

Model yang Direkomendasikan

• gpt-5 ⭐ Model terbaru, kualitas pembuatan kode tertinggi
  • Cocok untuk: Algoritma kompleks, desain arsitektur, refactoring kode
  • Fitur: Pemahaman kuat, kualitas kode tinggi
• gpt-4o Model berperforma tinggi
  • Cocok untuk: Pengembangan harian, review kode, perbaikan bug
  • Fitur: Cepat, kualitas stabil
• gpt-4o-mini 💰 Hemat biaya
  • Cocok untuk: Pembuatan kode sederhana, penulisan komentar, dokumentasi
  • Fitur: Nilai bagus, respons cepat

• claude-sonnet-4-5-20250929
  • Cocok untuk: Penalaran logika kompleks, optimasi algoritma
  • Fitur: Penalaran sangat baik, bagus untuk masalah kompleks
• claude-haiku-4-5-20251001
  • Cocok untuk: Penyelesaian kode cepat, tanya jawab sederhana
  • Fitur: Sangat cepat, biaya rendah

​

Beralih Model

1. Temukan tombol model di bawah kotak input (menampilkan model saat ini, misalnya openai-compatible:clau...)
2. Klik tombol ini untuk beralih model
3. Atau ubah kolom Model ID di pengaturan
4. Perubahan langsung berlaku, tidak perlu memulai ulang VSCode

​

Langkah 4: Mulai Menggunakan Cline

​

4.1 Percakapan Dasar

1. Antarmuka utama Cline akan menampilkan “What can I do for you?”
2. Masukkan permintaan Anda di kotak input bawah (menampilkan “Type your task here…”)
3. Contoh: “Buat fungsi untuk menghitung deret Fibonacci”
4. Tekan Enter untuk mengirim
5. AI akan menganalisis permintaan Anda, menghasilkan kode, dan dapat menerapkannya langsung ke proyek
6. Progres setiap langkah ditampilkan di sidebar

​

4.2 Pembuatan Kode

Please create a JavaScript function to validate email address format

Help me implement a user login form with email and password inputs using React Hooks

Write unit tests for the calculateTotal function using Jest

​

4.3 Penjelasan dan Perbaikan Kode

1. Pilih kode yang ingin diproses di editor
2. Klik kanan untuk melihat opsi Cline:
   • Explain with Cline - Menjelaskan fungsi dan logika kode
   • Improve with Cline - Mengoptimalkan dan memperbaiki kode
3. Pilih tindakan yang sesuai
4. Cline akan menampilkan hasil analisis dan saran perbaikan di sidebar

Refactor this code to improve readability and performance

​

4.4 Debugging Bug

1. Kirim pesan error atau kode bermasalah ke Cline
2. Contoh: “Kode ini memunculkan error: TypeError: Cannot read property ‘name’ of undefined”
3. AI akan menganalisis masalah dan memberikan solusi
4. Anda dapat menerapkan perbaikan secara langsung

​

4.5 Penjelasan Kode

1. Pilih cuplikan kode yang sulit dipahami
2. Ketik di Cline: “Jelaskan apa yang dilakukan kode ini”
3. AI akan memberikan penjelasan terperinci dan cara kerjanya

​

4.6 Pembuatan Dokumentasi

Add JSDoc comments to this function

Generate a README.md file for this project

​

Fitur Lanjutan

​

Operasi Multi-file

1. Buat beberapa file:
   Create a complete Express.js API with routes, controllers, and model files
   
2. Modifikasi batch:
   Replace all var with const or let in the project
   
3. Refactoring proyek:
   Migrate this project from JavaScript to TypeScript
   

​

Eksekusi Perintah Terminal

1. Instal dependensi:
   Install axios and dotenv packages
   
2. Jalankan skrip:
   Run npm test
   
3. Operasi Git:
   Create a Git commit with the message "feat: add user authentication"
   

1. Cline akan menampilkan “Cline wants to execute this command:” di sidebar
2. Menampilkan perintah spesifik (misalnya gcc fibonacci.c -o fibonacci.exe)
3. Dua tombol muncul di bagian bawah:
   • Run Command - Menjalankan perintah
   • Reject - Menolak eksekusi
4. Setelah mengeklik “Run Command”, perintah berjalan di terminal terintegrasi
5. Hasil ditampilkan di terminal dan sidebar Cline

​

Manajemen Konteks

• Konteks file saat ini: Otomatis menyertakan file yang sedang diedit
• Konteks kode terpilih: Otomatis menyertakan cuplikan kode yang Anda pilih
• Konteks struktur proyek: Memahami struktur proyek Anda
• Konteks pesan error: Otomatis menangkap pesan error terminal

​

Prompt Kustom

1. Temukan Custom Instructions di pengaturan Cline
2. Tambahkan preferensi Anda, misalnya:
   - Use TypeScript instead of JavaScript
   - Follow Airbnb code style
   - Use arrow function syntax
   - Prefer functional programming style
   
3. AI akan mengikuti instruksi ini dalam semua interaksi

​

FAQ

​

Q1: Cline mengatakan API key tidak valid?

1. Periksa format API Key:
   • Pastikan API Key diawali dengan sk-
   • Pastikan disalin lengkap tanpa spasi tambahan
2. Periksa Base URL:
   • Harus https://api.apimart.ai/v1
   • Perhatikan sufiks /v1
3. Verifikasi validitas key:
   • Periksa status key di Konsol APIMart
   • Pastikan saldo akun mencukupi
4. Konfigurasi ulang:
   • Hapus konfigurasi yang ada
   • Masukkan ulang API Key dan Base URL

​

Q2: Cline merespons lambat?

1. Beralih ke model yang lebih cepat:
   • Gunakan gpt-4o-mini atau claude-haiku-4-5-20251001
   • Model ini merespons lebih cepat
2. Kurangi panjang konteks:
   • Hindari mengirim kode yang sangat panjang sekaligus
   • Pecah tugas besar menjadi yang lebih kecil
3. Periksa koneksi jaringan:
   • Pastikan jaringan stabil
   • Pertimbangkan menggunakan server proxy
4. Optimalkan konten permintaan:
   • Ajukan pertanyaan yang lebih spesifik
   • Hindari pertanyaan yang samar atau terlalu luas

​

Q3: Cline menghasilkan kode berkualitas rendah?

1. Gunakan model berkualitas lebih tinggi:
   • Beralih ke gpt-5 atau claude-sonnet-4-5-20250929
   • Model ini menghasilkan kode berkualitas lebih tinggi
2. Berikan persyaratan yang lebih detail:
   • Sampaikan implementasi yang diharapkan dengan jelas
   • Berikan kode contoh atau referensi
   • Tentukan tech stack dan versi framework
3. Gunakan instruksi kustom:
   • Tambahkan standar kode di pengaturan
   • Tentukan gaya coding dan praktik terbaik
4. Optimasi iteratif:
   • Lakukan beberapa putaran percakapan dengan AI
   • Tingkatkan kualitas kode secara bertahap

​

Q4: Bagaimana mengelola biaya penggunaan API?

1. Pilih model yang sesuai:
   • Gunakan gpt-4o-mini untuk pengembangan harian
   • Gunakan gpt-5 untuk tugas kompleks
2. Optimalkan pendekatan pertanyaan:
   • Sespesifik mungkin
   • Hindari mengulang pertanyaan yang sama
3. Gunakan pemilihan kode:
   • Pilih hanya bagian kode yang perlu diproses
   • Hindari mengirim konteks file utuh
4. Pantau penggunaan:
   • Periksa secara berkala Konsol APIMart
   • Pahami frekuensi dan biaya panggilan API

​

Q5: Cline tidak dapat mengakses file tertentu?

1. Periksa izin file:
   • Pastikan file memiliki izin baca/tulis
   • Terutama di sistem Linux/macOS
2. Periksa .gitignore:
   • Cline mengabaikan file di .gitignore secara default
   • Anda dapat menyesuaikan perilaku ini di pengaturan
3. Pengaturan workspace:
   • Pastikan file berada di dalam workspace VSCode
   • Periksa pengaturan kepercayaan workspace
4. Muat ulang VSCode:
   • Gunakan Ctrl+Shift+P / Cmd+Shift+P
   • Jalankan perintah “Reload Window”

​

Tips Penggunaan

​

1. Manfaatkan Konteks Sepenuhnya

I have an Express.js project using MongoDB database.
Please help me create a user authentication system including registration, login, and JWT token verification.
Project structure is:
- src/models/
- src/controllers/
- src/routes/
- src/middleware/

​

2. Pengembangan Bertahap

Step 1: Create the basic user model
Step 2: Add password encryption
Step 3: Implement registration and login endpoints
Step 4: Add JWT token verification

​

3. Asisten Review Kode

Please review this code, checking for:
1. Potential security issues
2. Performance optimization opportunities
3. Code style issues
4. Possible bugs

​

4. Pelajari Teknologi Baru

I want to learn React Hooks.
Please create a sample project demonstrating useState, useEffect, useContext usage,
and add detailed comments explaining how each Hook works.

​

5. Prototyping Cepat

Create a simple todo app with requirements:
- Use React and LocalStorage
- Can add, delete, mark as complete
- Simple CSS styling
- Complete in a single HTML file

​

6. Pair Programming

I'm implementing a sorting algorithm,
I wrote the first half, please help me complete the rest:

function quickSort(arr) {
    if (arr.length <= 1) return arr;
    const pivot = arr[0];
    // Please continue implementation...
}

​

Sorotan Fitur

• 💻 Pembuatan Kode Cerdas - Hasilkan kode berkualitas tinggi dari deskripsi bahasa alami
• 🔧 Refactoring Kode - Optimalkan struktur dan performa kode secara otomatis
• 🐛 Bantuan Debugging Bug - Temukan dan perbaiki masalah kode dengan cepat
• 📝 Pembuatan Dokumentasi - Hasilkan komentar, README, dokumentasi API
• 🧪 Penulisan Test Case - Hasilkan tes unit dan integrasi secara otomatis
• 🔄 Migrasi Kode - Konversi bahasa, migrasi framework
• 💡 Penjelasan Kode - Memahami logika kode kompleks
• 🎯 Saran Praktik Terbaik - Berikan standar kode dan saran optimasi
• 🚀 Prototyping Cepat - Validasi ide dan konsep dengan cepat
• 🤖 Eksekusi Perintah Terminal - Jalankan perintah pengembangan secara otomatis

​

Pintasan Keyboard

​

Praktik Terbaik

​

1. Deskripsi Tugas yang Jelas

Write a login feature

Create a user login feature with requirements:
- Use React and TypeScript
- Form validation (email format, password length)
- Use axios to call API
- Store JWT token to localStorage on successful login
- Error handling and user feedback

​

2. Berikan Informasi Konteks

• Tech stack dan framework yang digunakan
• Struktur file yang relevan
• Konvensi kode yang ada
• Dependensi pustaka pihak ketiga

​

3. Peningkatan Iteratif

1. Hasilkan fungsionalitas dasar terlebih dahulu
2. Uji dan validasi
3. Berikan umpan balik perbaikan
4. Perbaiki secara bertahap

​

4. Review Kode

• Periksa kebenaran logika
• Verifikasi keamanan
• Uji edge case
• Pastikan sesuai standar proyek

​

5. Pertahankan Kontinuitas Percakapan

Round 1: Create user model
Round 2: Based on the model just created, create CRUD endpoints
Round 3: Add permission validation to these endpoints

​

Dukungan & Bantuan

• 📚 Dokumentasi APIMart
• 📚 Dokumentasi Resmi Cline
• 💬 Komunitas Discord
• 🐦 Twitter @APIMart_
• 📧 Dukungan teknis: zhihong@apimart.ai

​

Tutorial Video