Tabnine: Panduan dengan Proyek Demo

Menulis kode bisa terasa melelahkan ketika Anda terjebak pada boilerplate atau detail sintaks kecil. Friksi ini semakin terasa saat Anda bereksperimen dengan model AI baru dan hanya ingin fokus membangun. Tabnine membantu mengatasi perlambatan itu dengan pelengkapan kode berbasis AI langsung di editor Anda.

Di artikel ini, saya akan menjelaskan langkah demi langkah cara menggunakan Tabnine di Visual Studio Code (VS Code) untuk membuat editor gambar AI menggunakan model generasi gambar terbaru dari Google, Nano Banana. Di akhir artikel, kita akan memiliki aplikasi Python yang berfungsi yang memungkinkan pengguna menghasilkan dan mengedit gambar menggunakan prompt.

Bagi Anda yang ingin tetap mengikuti model generasi gambar Google terbaru, saya sarankan membaca panduan Nano Banana 2 kami.

Apa Itu Tabnine?

Tabnine adalah asisten pengodean bertenaga AI yang mirip dengan GitHub Copilot dan Cursor. Ini bekerja di sebagian besar editor populer seperti VS Code, PyCharm, Jupyter, dan lainnya.

Beberapa fitur utama Tabnine meliputi:

- Integrasi Jira: Tabnine dapat terhubung ke Jira, platform populer untuk mengelola proyek rekayasa perangkat lunak. Ini memudahkan pengelolaan pekerjaan dan memungkinkan Tabnine melacak tugas-tugas dalam pipeline.

- Perintah kustom: Tabnine dilengkapi dengan berbagai perintah, seperti "Explain code" atau "Fix code." Ini juga memungkinkan pengguna mendefinisikan perintah kustom berbasis prompt.

- Perilaku kustom: Tabnine memungkinkan Anda mengonfigurasi sebuah prompt yang membimbing cara model AI menjawab. Misalnya, jika Anda memiliki pedoman pengodean yang terdefinisi dengan baik, Anda dapat memberikannya agar kode yang dihasilkan mengikuti pedoman tersebut.

- Autocomplete cerdas: Memberikan saran baris penuh atau blok kode, bukan hanya nama variabel.

- Kontekstual: Tabnine beradaptasi dengan struktur proyek dan gaya pengodean Anda.

- Dukungan untuk banyak model AI: Tabnine mendukung model-model AI paling populer, sehingga mudah memilih mana yang akan digunakan.

- Pembelajaran tim: Dalam paket enterprise, Tabnine dapat belajar dari basis kode privat tim Anda untuk memberikan saran yang disesuaikan dengan pola perusahaan Anda.

Penyiapan Tabnine

Untuk memulai, kita perlu membuat akun Tabnine dan berlangganan salah satu paket mereka. Mereka menawarkan uji coba 14 hari, jadi Anda bisa mencobanya gratis. Setelah masa uji coba, Tabnine berharga $9 per bulan.

Setelah Anda membuat akun Tabnine, buka VS Code. Jika Anda belum memiliki VS Code, instal dari sini. Buka tab ekstensi dan ketik "tabnine" untuk menemukan ekstensi resmi.

Setelah ekstensi terpasang, kita akan diminta untuk masuk. Lalu kita dapat mengakses Tabnine di bilah menu kiri (opsi terakhir pada tangkapan layar ini).

Menjelajahi UI Tabnine

Sebelum membangun editor gambar AI kita, mari bahas secara singkat elemen utama Tabnine.

Saat kita membuka Tabnine, kita disambut antarmuka chat AI:

Di bagian atas, ada pemilih model. Di sini, kita dapat memilih model yang akan digunakan. Saya akan tetap menggunakan bawaan pada tutorial ini, Gemini 2.5 Pro.

Di bagian bawah, kita dapat mendefinisikan konteks. Ini menentukan apa yang ingin kita perlihatkan kepada model AI saat menjawab.

Secara bawaan, konteks mencakup berkas saat ini dan workspace (proyek). Kita dapat menambahkan hal lain, seperti Terminal, yang sangat berguna agar model mengetahui kesalahan saat kita mengalaminya. Kita juga dapat memberikan cuplikan kode tertentu menggunakan karakter "@" lalu mengetik nama fungsi yang ingin kita tambahkan ke konteks.

Di menu hamburger, kita dapat mengonfigurasi Tabnine:

Dua pengaturan yang patut diperhatikan adalah perilaku kustom dan perintah kustom. Di bagian perilaku kustom, kita dapat menyetel prompt yang membimbing model saat menghasilkan kode. Ini berguna ketika kita ingin kode mengikuti pedoman tertentu.

Bagian perintah memungkinkan pendefinisian perintah kustom yang dapat dieksekusi menggunakan /<command-name> di antarmuka chat. Perintah pada dasarnya adalah prompt untuk melakukan tindakan tertentu. Ini cara yang baik untuk menghemat waktu dan menghindari pengulangan prompt yang sama berulang kali.

Vibe-coding Editor Gambar AI dengan Tabnine

Di bagian ini, saya akan memandu Anda membangun aplikasi Python yang menggunakan Nano Banana, model generasi gambar terbaru Google, untuk mengedit gambar. Pengguna dapat menggunakan prompt untuk menghasilkan gambar atau menggabungkan dan mengedit gambar yang ada dengan prompt tersebut.

Tujuan saya adalah melihat apakah mungkin melakukan vibe-coding untuk aplikasi ini, artinya membangunnya sepenuhnya dari prompt sejak awal.

Semua kode yang dihasilkan dalam tutorial ini dapat ditemukan di repositori GitHub ini.

Membuat UI dasar

Untuk memulai, saya ingin membuat UI dasar tempat pengguna dapat memilih gambar dari komputer mereka dan mengetik prompt. Saya membuat folder baru dan membuka VS Code di folder tersebut. Saya tidak membuat berkas apa pun. Ini adalah prompt pertama saya:

Saya baru menyadari setelahnya bahwa saya lupa menyebutkan bahwa saya sedang membangun aplikasi Python. Entah bagaimana, saya beruntung, dan itu yang diasumsikan model AI. Ia menanggapi prompt saya dengan menjelaskan perintah yang akan dijalankan dan kode yang akan ditulisnya.

Untuk menerapkan perubahan, kita perlu menerapkannya satu per satu atau mengklik tombol "Apply All" di bagian bawah layar. Perlu dicatat bahwa beberapa perubahan melibatkan eksekusi perintah. Dalam kasus tersebut, perintah menginstal paket Python yang diperlukan dan membuat berkas serta folder untuk menyimpan kode.

Ini tampilan antarmukanya saat saya menjalankan skrip yang dibuatnya:

Di bagian atas, ada daftar semua gambar yang dipilih dan tombol untuk membuka pemilih berkas. Pengguna dapat memilih satu atau beberapa berkas, dan berkas yang dipilih akan didaftarkan. Namun, saat berkas baru dipilih, daftar lama ditimpa, jadi saya memintanya untuk menambahkan berkas baru ke daftar alih-alih menghapus yang lama.

Selanjutnya, saya ingin meningkatkan UI untuk menampilkan thumbnail gambar alih-alih path-nya:

Hasilnya seperti ini:

Fitur penting lainnya adalah kemampuan untuk dengan mudah menghapus gambar:

Dengan prompt ini, kode diubah sehingga saat kita klik kanan pada thumbnail, muncul menu pop-up yang memungkinkan kita menghapus gambar. Saya menginginkannya bekerja seperti ini, jadi saya meminta perubahan tersebut:

Ketika saya mencoba aplikasi setelah perubahan ini, penghapusan gambar tidak berfungsi lagi. Saya curiga karena saya menggunakan Mac, tetapi saya tidak mengatakannya. Saya ingin melihat apakah ia bisa mengetahuinya sendiri.

Ini bekerja dengan sangat baik, dan saya bisa klik kanan pada gambar untuk menghapusnya:

Langkah terakhir pada UI dasar adalah menambahkan kotak teks untuk prompt.

Dengan ini, UI dasar selesai. Kita bisa memilih gambar dan mengetik prompt. Namun, kita belum bisa menghasilkan gambar. Itu yang akan kita implementasikan di bagian berikutnya.

Mengintegrasikan Nano Banana

Agar kode tetap terorganisasi, saya memintanya membuat skrip Python baru dengan fungsi yang menggunakan API generatif AI Google dengan model gambar terbaru mereka untuk menghasilkan gambar.

Ia membuat skrip baru dan berkas .env. Berkas ini digunakan untuk menyimpan kunci API yang diperlukan untuk terhubung ke API Google. Jika Anda mengikuti langkahnya, Anda perlu membuat kunci API di sini dan menempatkannya di berkas .env.

Kemudian, saya memintanya menambahkan tombol baru ke antarmuka untuk memanggil fungsi pembuat gambar. Tombolnya ditambahkan, tetapi ketika saya mengkliknya, saya mendapat error. Jadi, saya memastikan menambahkan terminal ke konteks sebelum memintanya memperbaiki error tersebut.

Ia melakukan beberapa pembaruan pada berkas, tetapi error tetap ada. Saya mencoba memintanya memperbaiki, namun tidak berhasil. Ia mulai mengatakan model AI tidak ada, dan ingin mengubah kode ke arah yang saya tahu tidak tepat.

Untuk mengatasinya, saya harus memperbaiki kode secara manual. Saya pergi ke situs resmi Gemini dan menyalin serta menyesuaikan contoh kode dari sana.

Inilah salah satu alasan mengapa saya pikir penting memiliki pengetahuan dasar tentang pengodean, bahkan saat vibe coding. Sering terjadi kita menemui sesuatu yang tidak bisa diperbaiki oleh model AI, dan mengetahui cara pemrograman penting agar kita paham ketika apa yang dikatakan model tidak benar dan kita bisa memperbaikinya. Alat seperti ini seharusnya selalu digunakan untuk mempercepat proses, bukan menggantikannya sepenuhnya.

Namun, sekalipun harus menulis kode ini secara manual, Tabnine tetap membantu berkat kemampuan autocompletenya. Misalnya, saat saya ingin mengonversi path gambar yang dipilih menjadi gambar untuk diberikan ke model, saya cukup mulai mengetik apa yang saya inginkan dan mendapat kode yang benar:

Kita juga melihat di atas nama fungsi bahwa Tabnine menyediakan alat untuk mengedit, menguji, memperbaiki, menjelaskan, dan mendokumentasikan fungsi. Misalnya, saya menggunakan fungsi dokumentasi untuk mendokumentasikan kode, dan ia menampilkan diff dengan perubahan yang direncanakan, yang kemudian bisa saya terima atau tolak:

Hasil akhir

Aplikasi kini fungsional dan siap digunakan. Mari coba membuat action figure untuk seseorang dengan aksesori yang diambil dari gambar lain:

Berikut hasilnya:

Pengujian dengan Tabnine

Sangat penting menulis pengujian otomatis saat mengerjakan proyek. Salah satu fitur Tabnine adalah membantu kita menulis pengujian ini.

Fitur ini tersedia di tab "Test" atau dengan mengklik opsi "Test" di atas definisi fungsi. Saat kita melakukannya, Tabnine akan membuat rencana pengujian untuk fungsi tersebut.

Rencana pengujian terdiri dari skenario dengan perilaku yang diharapkan dari fungsi. Berikut beberapa skenario yang diidentifikasi Tabnine untuk fungsi kita:

Untuk menghasilkan pengujian untuk skenario tertentu, kita cukup mengkliknya. Ia akan menghasilkan fungsi pengujian untuk skenario tersebut, yang kemudian bisa kita integrasikan ke dalam rangkaian pengujian.

Saat saya menerapkan perubahan ini, berkas uji hanya berisi fungsi uji dan tidak ada yang lain. Import dan kelas pengujian pembungkusnya tidak ada. Saya harus kembali ke tab "Chat" untuk memintanya menyelesaikan implementasi uji. Setelah itu, saya mengalami error karena nama berkas yang dibuatnya salah. Seperti sebelumnya, saya memberi tahu bahwa terjadi error, dan ia memperbaikinya. Sekarang pengujiannya berjalan dengan sukses.

Saat saya menambahkan uji lain setelah ini, semuanya berjalan baik.

Kesimpulan

Tabnine menunjukkan potensinya sebagai alat yang kuat untuk pengembangan cepat dengan integrasi yang mudah ke editor kode populer. Kemampuan pengodean berbantuan AI mempercepat proses, memungkinkan pengembang fokus pada inovasi alih-alih tugas berulang.

Namun, upaya saya untuk membangun aplikasi murni melalui vibe-coding menyoroti pentingnya pemahaman dasar yang kuat tentang prinsip pengodean. Ketergantungan buta pada kode yang dihasilkan AI tanpa memverifikasi kesesuaiannya dapat menimbulkan komplikasi, membuat pengembang rentan terhadap kesalahan yang mungkin tidak sepenuhnya dipahami.

Tabnine sebagian besar berfungsi dengan efisien, namun sering terasa seolah model AI yang mendasari adalah penggerak utamanya, sebanding dengan alat lain seperti GitHub Copilot. Meskipun Tabnine memang alat yang berguna, pengalaman ini menegaskan nilai tak tergantikan dari pengetahuan pengodean tradisional untuk memastikan pengembangan aplikasi perangkat lunak kompleks yang efektif dan berkelanjutan.