Menyelesaikan Side Project dengan LLM dan Cursor

xguru · 2025-01-07T09:50:23+09:00

Sejak sekitar 5 tahun lalu mulai menjalani peran Engineering Manager, sehingga kesempatan menulis kode secara langsung dalam pekerjaan utama berkurang Di luar pekerjaan, tetap mengerjakan proyek pribadi secara konsisten untuk menjaga insting pemrograman dan mengasah kemampuan teknis Dulu, karena keterbatasan waktu, pengerjaan proyek sering berjalan lambat dan kerap berhenti sebelum selesai Namun, pada 2024, mulai terbiasa membuat dan merilis alat yang dibutuhkan dengan relatif cepat hingga versi pertamanya benar-benar “selesai” Contoh side project yang baru-baru ini diselesaikan jsonplayground.com : formatter JSON sekaligus menyediakan fitur JQ yang berjalan di dalam browser (memanfaatkan WebAssembly), sehingga data tidak dikirim ke luar webtomarkdown.com : mengubah file menjadi Markdown atau mengekstrak sebagian situs web ke bentuk Markdown agar bisa diberikan ke LLM sebagai konteks Draf perbaikan desain untuk halaman klub penerbangan Evergreen Soaring Membuat ekstensi Chrome untuk mengotomatiskan respons terhadap pesan yang masuk ke klub penerbangan fitinterval.com : menyediakan fitur timer interval untuk berolahraga Latar belakang pemanfaatan LLM dan Cursor IDE LLM sangat meningkatkan produktivitas side project Terutama lewat Cursor IDE, proses memanfaatkan LLM untuk pekerjaan coding menjadi lebih nyaman Dalam tulisan ini, penulis membagikan alur umum membuat proyek baru agar pembaca bisa mencoba menerapkannya Karena LLM tidak berguna untuk semua area, kita perlu mencobanya sendiri dan memilih bagian mana yang cocok untuk diterapkan Contoh proyek: situs web pelacak kebiasaan Ingin mereplikasi aplikasi pelacak kebiasaan yang saat ini digunakan dalam bentuk situs web Semua data disimpan di perangkat lokal demi menjaga privasi pengguna Mulai menyusun spesifikasi Mula-mula memberi penjelasan singkat ke ChatGPT, lalu memperjelas spesifikasi aplikasi sambil menjawab pertanyaan lanjutan Setelah cukup konkret, meminta agar spesifikasi dirapikan sampai “orang lain bisa membuat seluruh aplikasi hanya dengan melihat spesifikasi ini” Menyebutkan niat menggunakan TypeScript, React, dan Tailwind CSS agar spesifikasi dibuat berdasarkan stack tersebut Spesifikasi akhir disimpan di SPEC.md untuk dijadikan referensi selama proses pengembangan Bootstrap proyek Menggunakan Vite untuk menyiapkan kerangka proyek dengan cepat Melakukan pengaturan awal dengan perintah npm create vite@latest ., lalu menaruh SPEC.md di folder proyek Menggunakan fitur agent di Composer milik Cursor IDE untuk mengotomatiskan konfigurasi Tailwind, modifikasi file dasar, dan sebagainya Dengan cara ini, fitur tahap awal seperti layout UX yang diharapkan, penggunaan localStorage, dan ekspor Markdown bisa diimplementasikan dalam waktu singkat Bekerja berulang dalam unit kecil Alih-alih meminta terlalu banyak fitur sekaligus, perbaikan yang dibutuhkan dipecah lalu pembaruan diminta ke LLM secara bertahap Misalnya, perubahan UX, perbaikan bug, dan lain-lain dipisahkan dalam unit kecil lalu diarahkan lewat mode Chat atau Composer Gambar dilampirkan ke Chat untuk menjelaskan desain yang diinginkan, lalu LLM diminta mengimplementasikannya ke dalam kode Menyiapkan deployment berkelanjutan Mengacu pada GitHub Actions untuk menyiapkan deployment otomatis ke GitHub Pages setelah build berjalan setiap kali ada commit ke branch main Di Cursor, tautan ke file contoh .yml dari repo lain diberikan agar LLM bisa merujuknya saat menyusun pipeline deployment Tips umum Rapikan dulu gambaran umum dan detail proyek dengan LLM, lalu simpan untuk konteks di tahap berikutnya Gunakan alat atau template open source untuk bootstrap proyek dan pengaturan strukturnya Siapkan sekaligus alat pengembangan yang esensial dan struktur direktori, lalu ikuti pola proyek yang mudah dikelola Gunakan Cursor Composer (mode agent) dan sejenisnya untuk memulai proyek dengan cepat Gunakan campuran Claude-3.5-Sonnet dan o1 (model) Manfaatkan o1 untuk pekerjaan draf awal yang cakupannya luas Sekitar 80% pekerjaan revisi dan penguatan detail dilakukan dengan Claude-3.5-Sonnet Pilih mode yang sesuai (Chat, Composer biasa, Composer agent) Chat: digunakan saat perubahan diperlukan pada lokasi yang spesifik dan hasil revisi perlu diperiksa setiap saat Composer(biasa): untuk penambahan fitur lintas banyak file atau perubahan multifile Composer(agent): belum terlalu sering dipakai, tetapi berguna saat membutuhkan pekerjaan otomatis seperti menjalankan perintah, lint, atau revisi berulang (tetap lebih baik dikelola dalam unit kecil) Saat memberikan konteks, sertakan file, dokumen, tautan, dan sebagainya yang spesifik Jika perlu, atur agar seluruh codebase bisa ditinjau di mode Chat sehingga LLM dapat mencari dan mengusulkan kode yang sesuai konteks Simpan dokumen terkait proyek dalam format Markdown (SPEC.md dan sebagainya) agar bisa disertakan sebagai konteks Manfaatkan file .cursorrules di folder proyek Bisa digunakan untuk melarang penggunaan library tertentu, atau mewajibkan penggunaan Tailwind, pustaka komponen shadcn, dan sebagainya Dengan mendefinisikan aturan yang ingin tercermin dalam prompt sejak awal, hasil bisa lebih sering diarahkan ke bentuk yang diinginkan pada sebagian besar permintaan Bekerjalah sambil tetap memahami kode secara keseluruhan Jaga kualitas dan struktur kode agar tidak muncul situasi ketika LLM gagal melakukan debugging Terus pecah pekerjaan menjadi unit-unit kecil dan, bila perlu, manfaatkan LLM untuk refactoring atau pemisahan modul Penutup Dengan pendekatan seperti ini, jika proyek bisa cepat diselesaikan hingga menjadi versi yang siap dirilis, maka meski sempat berhenti sejenak, akan jauh lebih mudah untuk mulai lagi Kebiasaan menyelesaikan hal-hal kecil membantu menjaga momentum, dan kita bisa cepat melihat hasil kecil yang memberi motivasi

(zohaib.me)

66 poin oleh xguru 2025-01-07 | 3 komentar | Bagikan ke WhatsApp

Sejak sekitar 5 tahun lalu mulai menjalani peran Engineering Manager, sehingga kesempatan menulis kode secara langsung dalam pekerjaan utama berkurang
Di luar pekerjaan, tetap mengerjakan proyek pribadi secara konsisten untuk menjaga insting pemrograman dan mengasah kemampuan teknis
Dulu, karena keterbatasan waktu, pengerjaan proyek sering berjalan lambat dan kerap berhenti sebelum selesai
Namun, pada 2024, mulai terbiasa membuat dan merilis alat yang dibutuhkan dengan relatif cepat hingga versi pertamanya benar-benar “selesai”

Contoh side project yang baru-baru ini diselesaikan

jsonplayground.com : formatter JSON sekaligus menyediakan fitur JQ yang berjalan di dalam browser (memanfaatkan WebAssembly), sehingga data tidak dikirim ke luar
webtomarkdown.com : mengubah file menjadi Markdown atau mengekstrak sebagian situs web ke bentuk Markdown agar bisa diberikan ke LLM sebagai konteks
Draf perbaikan desain untuk halaman klub penerbangan Evergreen Soaring
Membuat ekstensi Chrome untuk mengotomatiskan respons terhadap pesan yang masuk ke klub penerbangan
fitinterval.com : menyediakan fitur timer interval untuk berolahraga

Latar belakang pemanfaatan LLM dan Cursor IDE

LLM sangat meningkatkan produktivitas side project
Terutama lewat Cursor IDE, proses memanfaatkan LLM untuk pekerjaan coding menjadi lebih nyaman
Dalam tulisan ini, penulis membagikan alur umum membuat proyek baru agar pembaca bisa mencoba menerapkannya
Karena LLM tidak berguna untuk semua area, kita perlu mencobanya sendiri dan memilih bagian mana yang cocok untuk diterapkan

Contoh proyek: situs web pelacak kebiasaan

Ingin mereplikasi aplikasi pelacak kebiasaan yang saat ini digunakan dalam bentuk situs web
Semua data disimpan di perangkat lokal demi menjaga privasi pengguna

Mulai menyusun spesifikasi

Mula-mula memberi penjelasan singkat ke ChatGPT, lalu memperjelas spesifikasi aplikasi sambil menjawab pertanyaan lanjutan
Setelah cukup konkret, meminta agar spesifikasi dirapikan sampai “orang lain bisa membuat seluruh aplikasi hanya dengan melihat spesifikasi ini”
Menyebutkan niat menggunakan TypeScript, React, dan Tailwind CSS agar spesifikasi dibuat berdasarkan stack tersebut
Spesifikasi akhir disimpan di SPEC.md untuk dijadikan referensi selama proses pengembangan

Bootstrap proyek

Menggunakan Vite untuk menyiapkan kerangka proyek dengan cepat
Melakukan pengaturan awal dengan perintah npm create vite@latest ., lalu menaruh SPEC.md di folder proyek
Menggunakan fitur agent di Composer milik Cursor IDE untuk mengotomatiskan konfigurasi Tailwind, modifikasi file dasar, dan sebagainya
Dengan cara ini, fitur tahap awal seperti layout UX yang diharapkan, penggunaan localStorage, dan ekspor Markdown bisa diimplementasikan dalam waktu singkat

Bekerja berulang dalam unit kecil

Alih-alih meminta terlalu banyak fitur sekaligus, perbaikan yang dibutuhkan dipecah lalu pembaruan diminta ke LLM secara bertahap
Misalnya, perubahan UX, perbaikan bug, dan lain-lain dipisahkan dalam unit kecil lalu diarahkan lewat mode Chat atau Composer
Gambar dilampirkan ke Chat untuk menjelaskan desain yang diinginkan, lalu LLM diminta mengimplementasikannya ke dalam kode

Menyiapkan deployment berkelanjutan

Mengacu pada GitHub Actions untuk menyiapkan deployment otomatis ke GitHub Pages setelah build berjalan setiap kali ada commit ke branch main
Di Cursor, tautan ke file contoh .yml dari repo lain diberikan agar LLM bisa merujuknya saat menyusun pipeline deployment

Tips umum

Rapikan dulu gambaran umum dan detail proyek dengan LLM, lalu simpan untuk konteks di tahap berikutnya
Gunakan alat atau template open source untuk bootstrap proyek dan pengaturan strukturnya
- Siapkan sekaligus alat pengembangan yang esensial dan struktur direktori, lalu ikuti pola proyek yang mudah dikelola
Gunakan Cursor Composer (mode agent) dan sejenisnya untuk memulai proyek dengan cepat
Gunakan campuran Claude-3.5-Sonnet dan o1 (model)
- Manfaatkan o1 untuk pekerjaan draf awal yang cakupannya luas
- Sekitar 80% pekerjaan revisi dan penguatan detail dilakukan dengan Claude-3.5-Sonnet
Pilih mode yang sesuai (Chat, Composer biasa, Composer agent)
- Chat: digunakan saat perubahan diperlukan pada lokasi yang spesifik dan hasil revisi perlu diperiksa setiap saat
- Composer(biasa): untuk penambahan fitur lintas banyak file atau perubahan multifile
- Composer(agent): belum terlalu sering dipakai, tetapi berguna saat membutuhkan pekerjaan otomatis seperti menjalankan perintah, lint, atau revisi berulang (tetap lebih baik dikelola dalam unit kecil)
Saat memberikan konteks, sertakan file, dokumen, tautan, dan sebagainya yang spesifik
- Jika perlu, atur agar seluruh codebase bisa ditinjau di mode Chat sehingga LLM dapat mencari dan mengusulkan kode yang sesuai konteks
Simpan dokumen terkait proyek dalam format Markdown (SPEC.md dan sebagainya) agar bisa disertakan sebagai konteks
Manfaatkan file .cursorrules di folder proyek
- Bisa digunakan untuk melarang penggunaan library tertentu, atau mewajibkan penggunaan Tailwind, pustaka komponen shadcn, dan sebagainya
- Dengan mendefinisikan aturan yang ingin tercermin dalam prompt sejak awal, hasil bisa lebih sering diarahkan ke bentuk yang diinginkan pada sebagian besar permintaan
Bekerjalah sambil tetap memahami kode secara keseluruhan
- Jaga kualitas dan struktur kode agar tidak muncul situasi ketika LLM gagal melakukan debugging
- Terus pecah pekerjaan menjadi unit-unit kecil dan, bila perlu, manfaatkan LLM untuk refactoring atau pemisahan modul

Penutup

Dengan pendekatan seperti ini, jika proyek bisa cepat diselesaikan hingga menjadi versi yang siap dirilis, maka meski sempat berhenti sejenak, akan jauh lebih mudah untuk mulai lagi
Kebiasaan menyelesaikan hal-hal kecil membantu menjaga momentum, dan kita bisa cepat melihat hasil kecil yang memberi motivasi

3 komentar

fbtmdxor 2025-01-08

Terima kasih atas informasinya yang bermanfaat!

ragingwind 2025-01-08

Upaya yang dicoba terlihat mirip-mirip.

netcleaner 2025-01-07

Baru-baru ini saya juga mencoba membuat proyek kecil dengan Cursor dan LLM menggunakan metode yang mirip seperti di atas, dan produktivitasnya sangat baik.
Dengan membuat SPEC atau PRD menggunakan LLM lalu menyertakannya sebagai konteks di Cursor, kemudian menetapkan aturan untuk teknologi yang akan digunakan lewat cursorrules, setelah itu memberi tugas satu per satu melalui Composer, hasil kodenya keluar dengan baik dan konsisten.