00:00:00Kebanyakan dari kalian sudah mengenal shad cn sebagai salah satu pustaka ui yang paling banyak digunakan,
00:00:04tetapi menggunakan agen ai untuk membangun dengannya bisa menjadi masalah.
00:00:08Jika kalian membuat landing page sekali jadi,
00:00:10kalian tidak akan menghadapi masalah besar,
00:00:12tetapi jika kalian membangun aplikasi baru atau mengimplementasikan fitur baru,
00:00:15semuanya bisa rusak dan merusak bagian lain dari aplikasi juga.
00:00:18Namun ini bukan hal baru,
00:00:19masalah ini sudah terpecahkan dan inilah cara para insinyur membangun aplikasi sekarang.
00:00:23Agen ai selalu menguji kode yang mereka tulis,
00:00:26tetapi agen-agen ini menjadi tidak dapat diandalkan dengan konteks yang besar.
00:00:29Oleh karena itu kita perlu cara untuk memastikan bahwa agen menyelesaikan pekerjaan yang diberikan kepada mereka.
00:00:34Di sinilah konsep agentic loops muncul,
00:00:36dan anthropic memecahkan masalah ini dengan menggunakan loop ralph.
00:00:39Untuk memecahkan masalah ui saya,
00:00:41saya mencoba mengimplementasikan loop ralph dan pada awalnya gagal total,
00:00:44tetapi saya segera menyadari bahwa itu bukan karena loop ralph-nya,
00:00:47melainkan karena proses yang telah saya implementasikan dengannya.
00:00:50Jadi ralph sebenarnya adalah plugin baru yang telah dirilis oleh anthropic sendiri,
00:00:54tetapi ini bukan ide orisinal mereka.
00:00:56Ini didasarkan pada teknik dari orang lain dan anthropic mengimplementasikan serta meng-open source-kannya.
00:01:01Pada dasarnya ralph adalah sebuah loop dan jika kalian tahu tentang claud code hooks,
00:01:04ini menggunakan stop hooks yang berjalan ketika claud berhenti mengeluarkan jawaban.
00:01:08Segera setelah berhenti,
00:01:09agen ai diberi file prompt awalnya lagi dan ini memungkinkannya untuk meningkatkan pekerjaannya secara iteratif.
00:01:15Sekarang ada pertanyaan penting: kapan sebenarnya loop ini keluar?
00:01:18Ada sesuatu yang disebut completion promise yang bisa berupa kata apa pun yang kalian masukkan.
00:01:22Ketika claud merasa tugasnya sudah selesai,
00:01:24ia mengeluarkan promise ini sendiri.
00:01:26Misalnya dalam kasus ini promise-nya adalah kata complete.
00:01:28Jika promise ada dalam return prompt maka loop tidak berjalan lagi,
00:01:31jadi sampai claud mengeluarkan promise,
00:01:33ia tidak berhenti.
00:01:34Ini memastikan bahwa claud tidak berhenti begitu saja kapan pun ia mau.
00:01:37Setelah kalian menginstal plugin,
00:01:39kalian akan memiliki tiga perintah: perintah loop ralph,
00:01:41perintah cancel,
00:01:42dan perintah help.
00:01:43Dalam perintah loop kalian perlu memberikan prompt yang diberikan kepada agen berulang kali.
00:01:47Terkadang ia mungkin mendapatkan tugas yang tidak mungkin yang tidak dapat diselesaikannya dan mungkin terjebak dalam infinite loop,
00:01:53jadi menetapkan jumlah iterasi maksimum adalah praktik yang sangat baik.
00:01:57Saya akan meninggalkan link ke repo di bawah karena mereka memiliki beberapa praktik terbaik yang bagus untuk prompt yang dapat kalian berikan ke loop ralph,
00:02:04tetapi dalam video ini saya hanya akan membahas yang terkait dengan workflow ui yang akan saya tunjukkan kepada kalian.
00:02:09Jadi katakanlah kita ingin mengimplementasikan dua fitur dalam aplikasi ini.
00:02:13Yang pertama adalah command palette di mana kita menambahkan menu untuk mencari melalui aplikasi kita dan mengeksekusi perintah lain.
00:02:19Untuk memastikan bahwa fitur baru ini tidak merusak bagian lain dari aplikasi,
00:02:22kalian akan memulai dengan tes.
00:02:24Ini disebut test driven development.
00:02:26Jika kalian tidak familiar dengan ini,
00:02:27kalian bisa meminta claud code untuk menyiapkan struktur tdd untuk kalian di mana ia membuat folder tes end-to-end,
00:02:33folder screenshots untuk memeriksa masalah ui,
00:02:35dan tes yang sesuai juga.
00:02:36Fitur lain yang akan kita implementasikan adalah board view di database yang mirip dengan apa yang notion memungkinkan kita lakukan dengan database mereka.
00:02:43Jika kalian sudah paham,
00:02:44test driven development adalah pendekatan di mana tes ditulis sebelum kode diimplementasikan,
00:02:48tetapi ini berarti bahwa tes awal akan selalu gagal.
00:02:51Jadi jika saya mengimplementasikan fitur command palette,
00:02:53saya tidak akan langsung mulai menulis kodenya.
00:02:55Sebaliknya saya akan menulis tes yang detail untuk itu terlebih dahulu.
00:02:59Kemudian kita menulis jumlah kode minimum yang diperlukan untuk melewati tes tersebut.
00:03:03Setelah itu selesai,
00:03:04kita refactor dan menambahkan lebih banyak fungsionalitas,
00:03:06dan dengan setiap penambahan kita memastikan tes masih lulus.
00:03:09Hal menarik lainnya adalah bahwa tes-tes ini otomatis dan playwright dapat diimpor dan digunakan untuk verifikasi visual.
00:03:15Jika kalian berpikir bahwa kita menggunakan playwright mcp untuk memverifikasi ini secara otonom melalui browser,
00:03:20kalian salah.
00:03:20Dengan tdd untuk setiap perilaku fungsional kalian dapat mengambil screenshot.
00:03:24Misalnya jika perilaku fungsionalnya adalah menambahkan kartu maka screenshot akan menunjukkan kartu yang ditambahkan ke board.
00:03:30Jadi sekarang yang harus dilakukan agen ai adalah melihat screenshot tersebut dan memastikan tidak ada masalah dalam cara komponen shad cn ini diimplementasikan.
00:03:37File tes ini memastikan bahwa setiap kali sesuatu yang baru ditambahkan atau saat sebuah fitur sedang dibangun,
00:03:42semua persyaratan perilaku kita terpenuhi.
00:03:44Tetapi dalam kasus kita,
00:03:45kita ingin menggunakan screenshot murni untuk verifikasi ui.
00:03:48Tetapi jika kita sudah memiliki tdd,
00:03:50mengapa kita membutuhkan loop ralph?
00:03:51Seperti yang sudah saya nyatakan,
00:03:53dengan tugas yang lebih besar dan jendela konteks yang hampir penuh,
00:03:56model-model ini tiba-tiba berhenti dari tugasnya dan memerlukan input manusia yang konstan.
00:04:00Oleh karena itu saya dapat menulis tes sebelumnya untuk jenis fungsi apa pun yang saya inginkan,
00:04:05kemudian menggunakan loop untuk menginstruksikannya tentang apa yang harus dilakukan dan ia dapat bekerja secara otonom dengan memberi tahu ia workflow apa yang harus diikuti dan kemudian memberinya kondisi kapan ia bisa mengeluarkan promise.
00:04:16Ia menyelesaikan tugas dan keluar dari loop yang dalam kasus ini adalah ketika ia melewati semua 25 tes unik.
00:04:21Jadi menggunakan perintah slash ralph,
00:04:22saya memberinya prompt sehingga ia akan membangun fitur command palette secara iteratif.
00:04:26Dalam prompt tersebut kita pada dasarnya memberi tahu ia untuk mengimplementasikan fitur tersebut bersama dengan beberapa persyaratan dasar yang tidak terlalu penting karena persyaratan dapat ditemukan dalam tes juga,
00:04:36tetapi kita memang menguraikan seluruh workflow.
00:04:39Dalam workflow itu ia seharusnya mulai dengan menjalankan tes.
00:04:41Ia tahu bahwa tes akan gagal dan setelah itu ia perlu mengimplementasikan komponen untuk membuatnya lulus,
00:04:46jadi itulah tujuan keseluruhannya.
00:04:48Sekarang jika ini adalah tugas yang jauh lebih luas,
00:04:50kemungkinan ketika jendela konteks penuh atau claud menjadi bingung,
00:04:53ia akan berhenti secara otomatis.
00:04:55Ia tidak akan pernah mengeluarkan completion promise dan karena ia tidak pernah mengeluarkan promise,
00:05:00prompt akan diberikan kembali lagi dan ia harus memulai dari awal,
00:05:03yang berarti ia akan terus bekerja secara iteratif.
00:05:05Tetapi karena ini adalah tugas yang lebih kecil,
00:05:07ia benar-benar dapat mengimplementasikan semuanya dalam sekali jalan,
00:05:10menulis semua komponen dan membuat semua tes lulus.
00:05:13Sekarang setelah tes lulus,
00:05:14workflow memberi tahu ia untuk meninjau semua screenshot untuk command palette.
00:05:17Ini adalah screenshot yang diambil pada tahap yang berbeda untuk memastikan bahwa ui,
00:05:21baik itu shad cn atau pustaka komponen lainnya yang kalian gunakan,
00:05:24diimplementasikan dengan benar dan tidak ada masalah kecil.
00:05:27Setelah itu ia harus menjalankan tes lagi dan memastikan mereka masih lulus setelah perubahan ui.
00:05:31Karena semua tes lulus dan screenshot ditinjau,
00:05:34ia mengeluarkan completion promise.
00:05:35Di sinilah loop berhenti dan tidak berlanjut lagi.
00:05:38Tetapi ada masalah yang sangat besar dengan ini yang tidak saya sadari dalam fitur command palette karena ada sangat sedikit kemungkinan kesalahan ui di sana.
00:05:45Namun ketika saya pindah ke mengimplementasikan board view,
00:05:47saya menyadari ada kesalahan besar dalam sistemnya.
00:05:50Saya mulai dengan mengimplementasikan board dengan prompt yang sama.
00:05:53Persyaratannya berbeda tentu saja,
00:05:54tetapi workflow-nya hampir sama.
00:05:56Sekarang saya agak terkejut ketika ia menyelesaikan semua persyaratan dalam sekali jalan.
00:06:00Jangan salah paham,
00:06:01ia benar-benar memastikan bahwa semua tes lulus,
00:06:03tetapi saat ia melakukan itu ada kasus di mana jumlah tes yang berhasil benar-benar menurun karena dengan mengubah sesuatu ia akan merusak sesuatu yang lain,
00:06:10dan inilah mengapa tdd sebenarnya sangat penting karena pengujian rekursif ini dan memastikan bahwa semuanya berfungsi.
00:06:16Tetapi masalah utamanya adalah setelah ia memverifikasi bahwa ia sudah selesai dan saya pergi dan memeriksa ui,
00:06:21sebagian besar hal diimplementasikan dengan benar tetapi ia sepenuhnya melewatkan beberapa kesalahan ui seperti yang ini.
00:06:26Saya juga memeriksa screenshot dan kesalahannya muncul di screenshot tersebut juga.
00:06:30Jadi saya bertanya padanya dan kami menganalisis apa yang sebenarnya salah.
00:06:34Masalah sebenarnya adalah kegagalan proses,
00:06:36khususnya dalam hal memperbaiki ui.
00:06:37Yang terjadi adalah ia memang melewati semua tes karena ia seharusnya menjalankan file tes berulang kali,
00:06:42tetapi tidak ada tes khusus untuk ui selain screenshot.
00:06:45Ia melirik beberapa dari mereka dan bahkan mengabaikan beberapa kesalahan ui yang ia lihat.
00:06:49Beberapa file benar-benar diabaikan,
00:06:50jadi masalah utamanya adalah ia mengeluarkan pernyataan promise secara prematur dan tidak memverifikasi apakah ui benar-benar diperbaiki.
00:06:57Kami melalui seluruh sesi brainstorming tentang bagaimana kami bisa memperbaiki ini dan saya bahkan memberi praktik terbaik penulisan prompt dari repo ke clod code,
00:07:04tetapi pada akhirnya kami menemukan beberapa aturan spesifik dan perubahan dalam proses yang akan memastikan ui selalu benar.
00:07:10Sekarang ini tidak ada hubungannya dengan tes karena mereka akan selalu berjalan.
00:07:14Prompt yang kami gunakan untuk command palette sangat membantu ketika fitur atau implementasinya sangat besar di mana clod tidak berhalusinasi bahwa ia telah menyelesaikan tugas tetapi sebaliknya karena jendela konteks yang penuh atau kompleksitas tugas,
00:07:25ia berhenti tiba-tiba.
00:07:26Sekarang clod code sudah sangat otonom,
00:07:28tidak ada keraguan tentang itu,
00:07:29tetapi masih ada masalah seperti ini yang perlu kita perbaiki.
00:07:32Jadi kami mengubah sejumlah hal dalam prompt utama.
00:07:35Yang pertama adalah protokol verifikasi screenshot.
00:07:37Kami menambahkan prefix sederhana ke setiap gambar yang memberi tahu clod apakah ia telah membaca screenshot atau tidak.
00:07:42Tetapi ketika saya pertama kali mengimplementasikan ini,
00:07:45ia masih tidak membaca semua gambar.
00:07:47Ia akan membaca beberapa,
00:07:48menulis verified di atasnya dan sama seperti sebelumnya ia akan berhenti lebih awal.
00:07:52Jadi untuk mengatasi ini kami mendorongnya untuk berpikir dengan cara yang berbeda.
00:07:55Kami memberi tahu ia bahwa setelah ia mengganti nama semua screenshot,
00:07:59ia seharusnya tidak mengeluarkan promise dulu,
00:08:01yang berarti ia tidak boleh menganggap tugas selesai dan ia harus membiarkan iterasi berikutnya mengonfirmasi penyelesaian,
00:08:06jadi setidaknya dua loop harus berjalan.
00:08:08Yang terjadi dalam verifikasi berikutnya adalah bahwa clod memverifikasi semua file memiliki prefix verified.
00:08:13Tentu saja ini berarti kami harus mengubah tes dan memisahkan verifikasi gambar dari tes fungsional.
00:08:18Iterasi berikutnya memastikan bahwa semua gambar memiliki hasil verified dan jika clod melewatkan apa pun,
00:08:23ia melihatnya lagi dan memperbaiki output.
00:08:25Dengan perubahan ini,
00:08:26kesalahan ui kecil yang kami hadapi akhirnya diperbaiki dan ia dapat mengimplementasikan semua fitur ini dengan benar.
00:08:31Jadi ketika ia memasuki loop berikutnya,
00:08:33ia menjalankan tes lagi.
00:08:34Karena ia menemukan beberapa kesalahan,
00:08:36ia memperbaikinya dan karena semua file memiliki kata verified di dalamnya,
00:08:39ia menjalankan satu tes terakhir.
00:08:41Kali ini ia menyelesaikan tugasnya dalam dua loop dan dapat memperbaiki semua kesalahan ui utama dalam aplikasi.
00:08:46Mari kita bicara tentang automata sekarang.
00:08:48Setelah mengajar jutaan orang cara membangun dengan ai,
00:08:50kami mulai mengimplementasikan workflow ini sendiri.
00:08:53Kami menemukan bahwa kami dapat membangun produk yang lebih baik lebih cepat dari sebelumnya.
00:08:57Kami membantu mewujudkan ide-ide kalian,
00:08:59baik itu aplikasi atau situs web.
00:09:00Mungkin kalian telah menonton video kami sambil berpikir saya punya ide bagus tetapi saya tidak punya tim teknologi untuk membangunnya.
00:09:06Itulah tepatnya di mana kami masuk.
00:09:08Anggap kami sebagai co-pilot teknis kalian.
00:09:10Kami menerapkan workflow yang sama yang telah kami ajarkan kepada jutaan orang secara langsung ke proyek kalian,
00:09:15mengubah konsep menjadi solusi nyata yang berfungsi tanpa sakit kepala mempekerjakan atau mengelola tim dev.
00:09:20Siap untuk mempercepat ide kalian menjadi kenyataan?
00:09:22Hubungi kami di hello@automata.dev.
00:09:24Jika kalian ingin mendukung channel dan membantu kami terus membuat video seperti ini,
00:09:28kalian dapat melakukannya dengan menggunakan tombol super thanks di bawah.
00:09:31Seperti biasa,
00:09:32terima kasih telah menonton dan sampai jumpa di video berikutnya..