Alat AI Ini Memetakan Basis Kode Apa Pun Sebelum Anda Menyentuhnya (Understand-Anything)

BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00Anda bergabung dengan tim baru, Anda mengkloning repo, dan membuka basis kodenya.
00:00:04Dan di sana, ada basis kode dengan 200.000 baris yang menatap Anda seperti rusa yang tertangkap lampu sorot.
00:00:09Jadi, Anda melakukan apa yang dilakukan setiap pengembang.
00:00:11Anda menggunakan grep, kita melompat antar file, dan mungkin meminta Claude untuk menjelaskan repo ini.
00:00:17Bagaimana jika Anda punya peta, peta interaktif nyata yang mengajari Anda basis kodenya?
00:00:22Alur, lapisan arsitektur, perubahan, dampak, inilah “understand anything”.
00:00:27Alat ini sudah meraih lebih dari 14.000 bintang di GitHub dalam beberapa minggu, dan banyak pengembang telah membicarakannya.
00:00:32tentangnya.
00:00:33Dalam satu menit ke depan, saya akan menunjukkan cara kerjanya dan bagaimana hal itu akan sangat mempercepat
00:00:36pemahaman Anda tentang basis kode Anda.
00:00:44“Understand anything” adalah plugin Claude Code sumber terbuka.
00:00:47Plugin ini juga dapat masuk ke dalam alur kerja dengan alat seperti Cursor, Copilot, dan Gemini CLI.
00:00:53Anda mengarahkannya ke repo bahkan ke basis pengetahuan, dan ia mengubah proyek tersebut menjadi basis pengetahuan grafik
00:00:58interaktif yang dapat dikueri.
00:01:00Ini dilakukan dengan analisis statis ditambah pemrosesan LLM multi-agen.
00:01:05Namun bagian pentingnya bukanlah tumpukan teknologinya.
00:01:07Bagian pentingnya adalah masalah yang sebenarnya diselesaikan, karena setiap pengembang pernah mengalami masalah ini.
00:01:13Anda baru dalam semacam basis kode warisan, aplikasi lama.
00:01:16Dokumentasinya sudah ketinggalan zaman.
00:01:18Insinyur yang tahu segalanya sudah pergi enam bulan lalu.
00:01:22Dan agen pengkodean AI Anda hanya terus menebak berulang kali.
00:01:26Di situlah alat ini menjadi sangat membantu.
00:01:28Jadi mari kita jalankan.
00:01:29Jika Anda menikmati alat pengkodean untuk mempercepat alur kerja Anda, pastikan untuk berlangganan.
00:01:33Kami memiliki video yang keluar sepanjang waktu.
00:01:35Sekarang ini adalah proyek berukuran sedang.
00:01:36Cukup besar untuk menjadi sangat menjengkelkan, tapi cukup kecil sehingga saya benar-benar bisa menunjukkan kepada Anda
00:01:40betapa kerennya ini.
00:01:42Ini hanya repo yang saya kloning dari microservices Google, dan cukup kecil sehingga kita benar-benar bisa
00:01:46menguji ini tanpa harus berpura-pura.
00:01:49Pertama, saya akan menginstal plugin-nya, di sini di Claude, plugin install, understand
00:01:54anything.
00:01:55Setelah ini dibuat, kita perlu memuat ulang plugin, tentu saja, lalu kita hanya perlu
00:01:58menjalankan “understand”.
00:02:00Sekarang ia akan memindai seluruh repo.
00:02:03Ia menarik struktur, hubungan, modul utama, dan kemungkinan konsep bisnis.
00:02:09Sekarang kita bisa menjalankan perintah dashboard untuk meluncurkan semuanya.
00:02:11Pertama, ini butuh waktu lama untuk dijalankan, seperti 30 menit, dan membakar banyak token.
00:02:16Jadi memiliki paket Claude yang bagus adalah suatu keharusan.
00:02:19Saya punya Claude Max, dan ini menggunakan 25% dari tarif saya, jadi ini membakar dan membakarnya dengan cepat.
00:02:24Tetapi setelah selesai, kita bisa membuka dashboard ini, dan ini adalah bagian yang sangat keren yang benar-benar
00:02:29terasa manfaatnya.
00:02:30Saya bisa memperkecil dan melihat arsitektur tingkat tinggi.
00:02:32Saya bisa memperbesar dan mengakses bagian internal.
00:02:35Saya bisa klik untuk melihat perincian kode dan bagaimana semua kode ini terhubung.
00:02:40Saya bahkan bisa mengklik dan melihat kodenya sendiri.
00:02:43Lalu saya bisa mencari sesuatu di sini seperti pembayaran.
00:02:46Biasanya saya harus melompat melalui rute, layanan, model, handler, hanya dokumen
00:02:52yang bahkan tidak berguna lagi, dan di sini alat ini menyatukan potongan-potongannya.
00:02:56Sekarang saya bisa klik “guided tour”, dan ia menelusuri alurnya secara berurutan.
00:03:01Titik masuk, validasi, logika, basis data, API eksternal, penanganan kesalahan.
00:03:07Itu sudah sangat berguna.
00:03:09Tur terpandu ini membedah semuanya.
00:03:11Kita bisa masuk ke dalamnya, mengakses komponen yang berbeda.
00:03:14Itulah perbedaannya antara, “Hei, ini grafik yang sangat keren, dan saya benar-benar akan
00:03:18memeriksa ini sebelum menyentuh kode produksi.”
00:03:20Tapi sekarang pertanyaan yang jelas adalah, bukankah kita sudah memiliki alat seperti ini?
00:03:25Sebagai pengembang, kita tidak terlalu membutuhkan dasbor yang lebih cantik.
00:03:29Kita butuh lebih sedikit waktu yang terbuang, dan alat ini mengejar salah satu penghisap waktu terbesar dalam perangkat lunak.
00:03:35Mendapatkan konteks, bukan?
00:03:37Di mana semua ini terhubung?
00:03:38Bagaimana ini berguna?
00:03:39Orang-orang mengujinya pada proyek besar, monolit Java lama, repo microservice, ratusan
00:03:45file, dan reaksinya agak seperti yang saya dapatkan di sini.
00:03:48Ini akan menyelamatkan dua minggu pertama saya di pekerjaan karena ia membedah semuanya,
00:03:53menghubungkan semuanya, dan menunjukkan kepada kita bagaimana semuanya terjalin.
00:03:56Itu adalah kasus penggunaan besar pertama, orientasi.
00:03:58Jadi alih-alih mengatakan, “Baca 12 halaman ini dan tanyakan jika ada yang membingungkan,” itu
00:04:03sudah membingungkan, kita sekarang bisa mengatakan, “Buka grafiknya, ambil tur, lalu kita bisa mengajukan pertanyaan yang lebih baik.”
00:04:08lebih baik.
00:04:09Sekarang, kasus penggunaan kedua yang sangat bagus adalah agen AI karena sebagian besar alat pengkodean AI hanya
00:04:14sebagus konteks yang kita berikan kepada mereka.
00:04:17Jika agen melihat tiga file, ia hanya akan menebak.
00:04:20Jika ia memiliki peta terstruktur sistem dengan domain, alur, dependensi, dan penjelasan nyata,
00:04:27ia memiliki peluang lebih baik untuk membuat perubahan yang tepat sejak awal.
00:04:30Lalu tentu saja ada refactoring, bukan?
00:04:32Sebelum kita menyentuh kode, kita sekarang bisa bertanya, “Apa yang bergantung pada kode ini?
00:04:36Alur apa yang dimilikinya?
00:04:38Apa yang mungkin rusak jika ia pindah?”
00:04:40Itulah cara Anda menghindari mengubah perubahan satu baris menjadi peristiwa besar.
00:04:44Dan inilah alasan sebenarnya pengembang cukup bersemangat dengan proyek ini.
00:04:48Bukan karena kita peduli dengan diagram, saya suka diagram, bukan?
00:04:51Itu keren, itu berguna, saya visual, tapi kita benci tersesat.
00:04:55Sekarang, di sinilah kita harus berhati-hati karena pengembang telah melihat alat visualisasi kode sebelumnya.
00:05:00Grafik IDE, navigasi gaya source graph, grafik NX, visualizer tree sitter, dan banyak
00:05:05dari mereka memiliki masalah yang sama persis.
00:05:09Apa yang mereka lakukan?
00:05:10Mereka menunjukkan struktur, tetapi mereka tidak menjelaskan makna sebenarnya.
00:05:13Mereka memberi tahu Anda file ini mengimpor file itu, hebat, tapi mengapa?
00:05:18Bagian dari alur mana ini?
00:05:19Di mana permintaan dimulai?
00:05:20Apa yang rusak jika saya mengubahnya?
00:05:22Itulah lapisan yang hilang.
00:05:24“Understand anything” mencoba menambahkan lapisan itu.
00:05:27Alih-alih hanya menunjukkan sebagai file TypeScript atau sesuatu yang lain, ia mencoba mengubah menjadi sesuatu
00:05:31yang lebih dekat dengan alur nyata tentang bagaimana segala sesuatu bekerja.
00:05:35Itu hal-hal besar di sini.
00:05:37Dari file ke makna, dari impor ke perilaku sistem, dari sini adalah bagian-bagiannya, ke sini
00:05:42adalah cara mesin bekerja.
00:05:43Dibandingkan dengan banyak alat kode LLM atau RAG, itu juga lebih visual dan lebih dapat diajarkan.
00:05:48Banyak alat kode AI pada dasarnya hanyalah kotak pencarian.
00:05:52Anda mengajukan pertanyaan, Anda mendapatkan jawaban.
00:05:54Ini memberi Anda perincian lengkap, membantu kami memahami ke mana arah segalanya, apa yang
00:06:00terjalin, bagaimana itu terhubung, dengan memungkinkan kita untuk benar-benar melihat kodenya.
00:06:04Sekarang mari kita bicara tentang apa yang sebenarnya disukai orang.
00:06:05Kemenangan yang jelas di sini adalah orientasi.
00:06:07Jika Anda bergabung dengan basis kode besar, ini memberi Anda titik awal yang baik.
00:06:12Juga lapisan arsitektur, bukan?
00:06:13Ini benar-benar dibangun.
00:06:15Anda bisa mulai di tingkat sistem dan kemudian menelusuri ke modul dan detail implementasi
00:06:20terperinci.
00:06:21Dampak perbedaan adalah satu hal besar lainnya.
00:06:23Setiap pengembang berpengalaman tahu ketakutan melakukan perubahan kecil dalam basis kode yang tidak mereka pahami sebenarnya
00:06:27belum.
00:06:29Untuk pengguna Claude Code, grafiknya juga bisa menjadi konteks yang lebih baik, jadi alih-alih membuang
00:06:34file acak ke dalam prompt, Anda memberikan agen pengetahuan arsitektur terstruktur.
00:06:39Ini juga gratis, berlisensi MIT, inkremental, dan dirancang untuk bekerja di berbagai lingkungan pengembang.
00:06:45Sekarang di sisi skeptis, ketika sebuah proyek meledak secepat ini, kita mulai bertanya,
00:06:49apakah ini berguna atau apakah itu hanya memenangkan algoritma GitHub?
00:06:53Itu pertanyaan yang bagus untuk diajukan.
00:06:55Ada juga dependensi LLM, itu berarti biaya token.
00:06:59Ini meledak pada biaya token.
00:07:02Jadi butuh waktu, itu butuh banyak token.
00:07:05Pastikan Anda memiliki paket yang bagus jika Anda akan menggunakan ini.
00:07:08Anda masih butuh penilaian yang baik.
00:07:09Ini hanya memberi Anda gambaran umum itu.
00:07:11Itu tidak menggantikan membaca kode.
00:07:13Itu hanya membantu Anda memahaminya lebih baik ke mana arah segalanya.
00:07:16Jika Anda menikmati alat pengkodean dan tip seperti ini, pastikan untuk berlangganan ke saluran better stack.
00:07:20Sampai jumpa di video lainnya.

Key Takeaway

Understand Anything mempercepat pemahaman basis kode warisan yang kompleks dengan memetakan hubungan fungsional dan alur sistem ke dalam grafik interaktif, sehingga membantu pengembang melakukan perubahan kode dengan risiko kesalahan yang lebih terukur.

Highlights

  • Understand Anything mengubah basis kode menjadi basis pengetahuan grafik interaktif dengan menggabungkan analisis statis dan pemrosesan LLM multi-agen.

  • Alat ini melampaui visualisasi struktur standar dengan menjelaskan perilaku sistem, alur permintaan, dan dependensi antar modul.

  • Penggunaan alat ini memerlukan konsumsi token LLM yang tinggi selama proses pemindaian awal yang bisa memakan waktu hingga 30 menit.

  • Tur terpandu pada grafik menyediakan alur kerja berurutan yang mencakup titik masuk, logika, validasi, basis data, API eksternal, hingga penanganan kesalahan.

  • Integrasi ini berfungsi sebagai plugin Claude Code yang kompatibel dengan alur kerja pengembangan seperti Cursor, Copilot, dan Gemini CLI.

Timeline

Masalah Kontekstual dalam Pengembangan Perangkat Lunak

  • Pengembang sering kali menghadapi kesulitan memahami basis kode besar dengan ribuan baris tanpa dokumentasi yang memadai.
  • Metode tradisional seperti menggunakan grep atau melompat antar file hanya memberikan gambaran parsial tentang cara kerja sistem.

Basis kode yang mencapai 200.000 baris sering membuat pengembang baru kesulitan karena dokumentasi yang ketinggalan zaman dan kehilangan insinyur kunci yang memahami arsitektur sistem. Alat pemetaan interaktif hadir untuk menggantikan pencarian manual yang tidak efisien.

Mekanisme Kerja dan Implementasi Alat

  • Plugin ini mengintegrasikan analisis statis dan pemrosesan LLM multi-agen untuk membangun grafik pengetahuan.
  • Proses pemindaian awal pada basis kode menengah memakan waktu sekitar 30 menit dan mengonsumsi token LLM dalam jumlah besar.

Setelah plugin diinstal melalui Claude Code, alat memindai struktur, modul, dan konsep bisnis dalam repo. Dasbor interaktif memungkinkan pengguna melakukan navigasi arsitektur dari tingkat sistem hingga detail implementasi kode spesifik.

Manfaat Praktis dalam Alur Kerja Pengembang

  • Fitur 'guided tour' membedah alur sistem secara berurutan mulai dari titik masuk hingga penanganan kesalahan.
  • Alat ini berfungsi sebagai basis pengetahuan terstruktur yang meningkatkan akurasi agen AI dalam membuat perubahan kode.
  • Visualisasi dependensi membantu pengembang memprediksi dampak perubahan sebelum menyentuh kode produksi.

Fitur tur terpandu menyatukan potongan-potongan informasi yang tersebar di rute, layanan, dan model. Kemampuan untuk melihat dependensi secara visual secara signifikan mengurangi waktu orientasi bagi pengembang yang baru masuk ke sebuah proyek.

Diferensiasi dan Batasan Alat

  • Alat ini membedakan diri dari visualisator kode tradisional dengan berfokus pada makna perilaku sistem daripada sekadar struktur file.
  • Ketergantungan pada LLM berarti biaya operasional token tetap menjadi faktor krusial bagi pengguna.
  • Visualisasi ini tidak menggantikan kebutuhan pengembang untuk tetap membaca dan memvalidasi kode secara manual.

Alat ini mencoba mengisi celah yang ditinggalkan oleh grafik IDE standar dengan menambahkan lapisan konteks tentang mengapa satu file mengimpor file lainnya. Meskipun sangat membantu, penilaian manusia tetap diperlukan untuk mengambil keputusan akhir terkait refactoring kode.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video