00:00:00Ada satu tahapan dalam proses pembangunan lama yang kini sudah tidak ada lagi.
00:00:03Dan kebanyakan tim belum tahu harus menggantinya dengan apa, jadi mereka tetap menjalankan
00:00:06proses lama tersebut hanya karena sudah terbiasa.
00:00:08Minggu ini, Jenny Wen merilis sebuah wawancara di podcast Lenny.
00:00:11Dia adalah kepala desain untuk Claude di Anthropic, dan sebelumnya menjabat sebagai direktur desain
00:00:16di Figma.
00:00:17Dalam episode tersebut, dia membahas bagaimana proses desain konvensional telah mati dan apa penggantinya.
00:00:21pengganti sebenarnya.
00:00:22Jadi kita akan membedah apa yang berubah, mengapa, dan meninjau proses tepat
00:00:26yang menggantikannya.
00:00:27Untuk memahami apa yang menggantikannya, Anda harus paham mengapa proses itu ada.
00:00:31Dalam proses lama, Anda menentukan persyaratan terlebih dahulu, lalu desainer akan membawanya ke
00:00:35Figma dan membuat maket tentang bagaimana tampilan aplikasi seharusnya.
00:00:38File Figma itu menjadi dokumen serah terima antara apa yang diinginkan dan apa yang dibangun.
00:00:43Seorang insinyur front-end kemudian akan mengubah file tersebut menjadi kode.
00:00:46Sementara itu, insinyur back-end membangun secara paralel, karena spek API sudah ditentukan
00:00:51di awal, sehingga kedua pihak bisa bergerak bersamaan dan semuanya terhubung di akhir.
00:00:55Jenny mendeskripsikan ini sebagai proses yang diperlakukan desainer seperti sebuah ritual.
00:00:58Ini adalah standar di seluruh industri.
00:01:00Kebanyakan orang yang menjelaskan mengapa ini berubah melewatkan alasan mengapa proses ini ada sedari awal.
00:01:05Simon Willison, pengembang yang menulis salah satu blog teknis paling banyak dibaca,
00:01:09mengulas ceramah Jenny di Berlin bulan Januari lalu dan menambahkan wawasan yang tersirat dalam ceramahnya.
00:01:14namun tidak dikatakan secara langsung.
00:01:16Membangun dengan AI secara signifikan mengurangi biaya akibat membangun sesuatu yang salah.
00:01:19Sebelum ada AI, arah yang keliru berarti pemborosan waktu rekayasa selama berbulan-bulan.
00:01:23Kesalahan kecil di front-end berarti 10 kali lipat kerja keras saat implementasi.
00:01:27Jadi tim membenarkan setiap tahapan.
00:01:28Riset, persona, perjalanan pengguna, wireframe, hingga dokumen spek.
00:01:33Semua itu adalah perlindungan agar tidak membangun sesuatu yang salah dalam skala besar.
00:01:36Jadi apa yang sebenarnya berubah dalam prosesnya?
00:01:38Kecepatan rekayasa (engineering) berubah lebih dulu.
00:01:40Dan perubahannya lebih cepat daripada yang disadari kebanyakan orang.
00:01:42Jenny bilang beberapa tahun lalu, 60 hingga 70% waktunya sebagai desainer dihabiskan untuk membuat maket dan prototipe.
00:01:48Sekarang hanya 30 hingga 40%.
00:01:49Dia tidak memutuskan untuk bekerja secara berbeda.
00:01:51Para insinyur di sekitarnya mulai menjalankan banyak agen secara paralel dan tiba-tiba
00:01:55hambatan utamanya bukan lagi di bagian rekayasa.
00:01:58Rekayasa berubah lebih dulu dan desain dipaksa untuk mengikuti.
00:02:00Garis waktu visi juga berubah.
00:02:02Dulu desain menghasilkan visi untuk 2 hingga 5 tahun ke depan.
00:02:04Kini teknologi bergerak sangat cepat sehingga cakupan 3 hingga 6 bulan adalah yang paling realistis.
00:02:09Dan visi itu tidak harus berupa presentasi dek lagi.
00:02:11Melainkan prototipe yang mengarahkan orang ke suatu tujuan.
00:02:13Hal yang sama terjadi pada tahap penerjemahan desain ke kode.
00:02:15Ketika sebuah agen AI bisa mengambil dokumen persyaratan dan membangun antarmuka yang berfungsi, maka tidak ada lagi
00:02:19lapisan penerjemahan.
00:02:20Agen AI yang menulis kodenya.
00:02:22Tidak ada file Figma untuk diterjemahkan karena memang tidak pernah ada file Figma.
00:02:25Selain itu, jika Anda menyukai konten kami, pertimbangkan untuk menekan tombol hype karena itu membantu kami
00:02:29membuat lebih banyak konten seperti ini dan menjangkau lebih banyak orang.
00:02:33Saat kami mengerjakan proyek klien, inilah pergeseran tepat yang harus kami lakukan.
00:02:36Kini proses desain telah berubah, namun bagian yang tidak berubah adalah persyaratan (requirements).
00:02:40Persyaratan yang buruk akan menyia-nyiakan seluruh proses pembangunan.
00:02:42Dan kebanyakan tim langsung melompat ke spesifikasi teknis.
00:02:44Itu urutan yang salah.
00:02:45Saat membangun prototipe, Anda tidak butuh tumpukan teknologi atau spek API.
00:02:48Anda hanya perlu tahu cukup banyak untuk membangun sesuatu yang terlihat dan terasa seperti produk asli
00:02:52agar bisa ditunjukkan kepada seseorang untuk mendapatkan jawaban ya atau tidak.
00:02:56Jadi sebelum menyentuh prototipe, mulailah dengan aktor.
00:02:58Aktor adalah orang yang berinteraksi dengan sistem.
00:03:01Orang spesifik dengan tujuan yang spesifik pula.
00:03:03Siapa yang menggunakannya akan menentukan apa yang perlu dilakukan sistem.
00:03:06Jika Anda punya seseorang yang mengirim konten dan seseorang yang menyetujuinya, itu adalah dua
00:03:10antarmuka berbeda dengan layar utama yang berbeda pula.
00:03:12Kemudian lihat di mana tampilan tersebut terpisah.
00:03:13Pada kebanyakan produk, dua aktor berbeda yang mengakses URL yang sama akan melihat
00:03:18hal yang sangat berbeda.
00:03:19Seorang admin melihat panel manajemen.
00:03:21Seorang pengguna biasa melihat dasbor mereka sendiri.
00:03:22Hal terakhir adalah batasan (constraints).
00:03:24Jangan beri tahu agen AI alat apa yang harus digunakan.
00:03:26Beri tahu apa yang tidak boleh dilakukan dan berapa batas biayanya.
00:03:28Ini juga akan membuat keputusan teknis jauh lebih mudah nantinya.
00:03:32Kini kami menerapkan semua aturan spesifik tersebut ke dalam prompt pembuat PRD ini, yang pada dasarnya
00:03:37mewawancarai Anda, bertindak sebagai pewawancara PRD, dan bertanya sesuai aturan,
00:03:42mengajukan berbagai pertanyaan berbeda kepada Anda.
00:03:44Dan di akhir, Anda akan mendapatkan file markdown PRD, yang akan digunakan pada
00:03:48tahap-tahap proses selanjutnya.
00:03:49File PRD itulah yang menjadi landasan bagi segalanya.
00:03:52Jadi langkah selanjutnya adalah mengubahnya menjadi struktur untuk front-end.
00:03:55Untuk ini, kami menggunakan prompt lapisan ini, yang pada dasarnya menyuruh agen untuk melihat PRD, yang sekali lagi
00:04:00bukanlah PRD lengkap dengan semua persyaratan teknis, untuk menghasilkan dua hal.
00:04:04Ini memintanya untuk membuat halaman dan modal yang akan ada di prototipe Anda dan
00:04:08kemudian alur pengguna (user flows).
00:04:09Tentu saja halaman dan modal penting untuk struktur agar semua yang perlu
00:04:14diimplementasikan agen di front-end sudah direncanakan sebelumnya.
00:04:17Kami terus membahas tentang perencanaan sebelum bertindak dan mengapa itu sangat penting bagi
00:04:21agen AI dan jendela konteks, jadi kita tidak perlu membahasnya terlalu dalam.
00:04:24Namun dengan alur pengguna, penting untuk mendefinisikan tindakan dari setiap aktor.
00:04:28Karena kita sudah fokus pada aktor itu sendiri dan bukan fiturnya, maka penting juga
00:04:32untuk mendefinisikan alur pengguna agar agen bisa mengimplementasikan status interaksi yang tepat
00:04:36dan navigasi yang benar untuk prototipe UI lengkap.
00:04:40Jadi kita berakhir dengan dua file di mana architecture.md berisi halaman, modal, dan alur pengguna
00:04:45yang telah kita bahas.
00:04:46Setelah itu, kami memintanya menginstal aplikasi Next.js karena itulah tumpukan teknologi yang
00:04:50biasa kami gunakan, Next.js dengan Supabase.
00:04:53Dan inilah hasil yang didapat.
00:04:55Secara keseluruhan desainnya terlihat bagus, tapi ada alasan khusus untuk itu.
00:04:58Juga, belum disebutkan sebelumnya, tapi yang dibangun adalah platform komunitas dengan kanal,
00:05:03produk, dan kursus.
00:05:04Ada dua aktor, yaitu anggota dan juga kreator, di mana kreator
00:05:08memiliki semua fungsi administratif seperti membuat kanal, menambahkan produk
00:05:12atau mengunggah kursus, serta melihat berbagai statistik.
00:05:15Menurut pendapat kami, untuk prototipe pertama yang dibuat, desainnya terlihat sangat bagus.
00:05:19Tapi UX-nya tidak terlalu bagus karena biasanya kita tidak ingin dasbor seperti ini.
00:05:23Dan itulah poin utamanya.
00:05:24Perbaikan semacam itu dulu memakan waktu berhari-hari, di sini hanya hitungan menit.
00:05:27Karena AI bisa melakukan modifikasi ini dengan sangat, sangat cepat.
00:05:30Dan karena belum ada back-end di sini, ia juga tidak perlu berurusan dengan hal-hal tambahan lainnya,
00:05:34ini murni prototipe front-end.
00:05:36Biasanya AI tidak benar-benar membuat situs web dan antarmuka yang tampak bagus seperti ini.
00:05:40Alasan mengapa ini terlihat bagus adalah karena kami menggunakan keahlian front-end umum
00:05:44yang ditawarkan Anthropic dalam salah satu blog mereka.
00:05:46Kami sangat menyarankan untuk menggunakan ini sebelum UI Anda diimplementasikan.
00:05:50Cukup simpan sebagai perintah slash atau 'skill' agar agen Anda bisa menggunakannya.
00:05:53Sekarang jika Anda bekerja untuk klien, Anda hanya perlu menunjukkan prototipe ini, yang
00:05:57berfungsi penuh dalam hal fitur dengan data tiruan (mock data), karena belum akan
00:06:01menggunakan basis data sekarang.
00:06:02Anda bisa menunjukkan ini kepada klien, dapatkan persetujuan mereka, dan jika tidak setuju, buat perubahan lalu
00:06:06lanjutkan ke sisa proses pembangunan.
00:06:08Daftar tugas ini adalah salah satu alasan mengapa kita sekarang bisa meminta agen ini membuat
00:06:12prototipe yang berfungsi penuh.
00:06:14Itu karena adanya daftar tugas ini, karena persistensi tugas, dan karena semuanya
00:06:17terstruktur.
00:06:18Inilah mengapa membuat file architecture.md sangat penting karena memungkinkan
00:06:23agen membangun daftar tugas yang dioptimalkan secara sempurna agar tidak terjadi halusinasi.
00:06:28Setelah itu kita pindah ke implementasi back-end.
00:06:30Biasanya ada dua hal yang bisa Anda lakukan.
00:06:32Anda bisa tetap menggunakan Next.js, memisahkan front-end di Next.js lalu mengimplementasikan
00:06:36back-end sebagai layanan Python terpisah.
00:06:39Tapi itu tergantung pada jenis aplikasi yang sedang Anda kerjakan.
00:06:42Untuk sebagian besar proyek yang Anda buat, Next.js saja sudah cukup.
00:06:46Anda butuh back-end Python terpisah secara spesifik saat butuh perpustakaan ekstensif
00:06:50yang tidak tersedia di Next.js atau jika Anda butuh orkestrasi tugas latar belakang yang serius
00:06:55untuk mengoptimalkan situs atau fungsinya.
00:06:57Dalam kasus itu, Anda mungkin butuh back-end terpisah.
00:06:59Jika tidak, back-end Next.js sudah mencakup hampir semua yang Anda butuhkan.
00:07:03Sebelum menyentuh back-end, kita perlu tahu apa yang sebenarnya dibutuhkan front-end darinya.
00:07:07Jadi kami menyuruh agen melihat kode front-end, PRD, dan file arsitektur lalu menulis
00:07:11sebuah spek API.
00:07:12Setelah itu, kami memintanya menggunakan ketiga dokumen tersebut untuk membuat skema Supabase lengkap karena
00:07:17kami menggunakan Supabase ditambah Next.js sebagai front-end.
00:07:20Pada dasarnya ia perlu membuat skema yang akan menampung data aplikasi.
00:07:25Biasanya jika Anda bertanya ke agen, ia akan menyuruh Anda mengambil kunci API
00:07:28dari database dan menempelkan kueri SQL secara manual untuk membuat tabel.
00:07:33Tapi alih-alih itu, Anda sebaiknya menggunakan Supabase MCP.
00:07:36Selalu coba gunakan MCP untuk layanan apa pun yang Anda gunakan karena itu mengotomatiskan
00:07:40banyak hal.
00:07:41Sebagai contoh, kami bahkan tidak perlu melihat proyeknya di sini.
00:07:43Ia otomatis membuat proyek, menjalankan kueri untuk skema, dan otomatis menjalankan
00:07:48migrasi.
00:07:49Jadi kami praktis tidak perlu melakukan apa-apa.
00:07:51Setelah database Anda siap, Anda akan menghubungkan front-end ke database.
00:07:55Sekali lagi, ada perbedaan yang jelas di sini.
00:07:57Anda tidak harus menghubungkan back-end ke database karena sudah terintegrasi di
00:08:00dalam front-end.
00:08:01Front-end langsung berkomunikasi dengan database, membuat integrasi dan kompleksitas keseluruhan
00:08:06jauh lebih mudah.
00:08:07Kini kami bermitra dengan Warp untuk video ini dan mereka baru saja merilis OZ, yang
00:08:11merupakan platform orkestrasi untuk berbagai agen cloud.
00:08:14Agen cloud ini sangat berguna untuk tugas-tugas yang ingin Anda delegasikan dan Anda tahu bahwa
00:08:19agen tersebut akan mampu menyelesaikannya sendiri.
00:08:21Sejauh ini, agen telah menghubungkan front-end ke database dan aplikasi pada dasarnya
00:08:26sudah berfungsi sesuai rencana.
00:08:27Tapi untuk menambahkan hal-hal seperti pemrosesan pembayaran, notifikasi baru, pembatasan akses (rate limiting), atau analitik
00:08:32pada situs, kita sebenarnya butuh lapisan API back-end khusus agar bisa mengintegrasikan semua itu.
00:08:37Untuk itu, kami membuat lingkungan menggunakan OZ dan menjalankan agen cloud, yang kami minta untuk membangun
00:08:41lapisan back-end khusus tersebut.
00:08:43Dan setelah sekitar 15 menit, tugas selesai dan semuanya sudah siap.
00:08:47Agar ini benar-benar berfungsi dan mulai menerima pengguna, yang tersisa hanyalah
00:08:51autentikasi Google, integrasi Stripe, dan beberapa detail kecil yang perlu kami perbaiki.
00:08:56Kini Anda telah melihat seluruh proses dan prompt-nya sudah ditampilkan di layar.
00:09:00Tapi jika Anda ingin semua prompt ini sebagai alur kerja langkah demi langkah yang bisa diikuti untuk
00:09:04proyek Anda sendiri, kami menyediakannya di AI Labs Pro.
00:09:06Bagi yang belum tahu, ini adalah komunitas kami di mana Anda mendapatkan templat siap pakai yang bisa
00:09:10langsung diterapkan pada proyek Anda untuk video ini dan semua video sebelumnya.
00:09:14Jika Anda merasa konten kami bermanfaat dan ingin mendukung kanal ini, ini adalah cara terbaik
00:09:18untuk melakukannya.
00:09:19Tautannya ada di deskripsi.
00:09:20Itu membawa kita ke akhir video ini.
00:09:22Jika Anda ingin mendukung kanal ini dan membantu kami terus membuat video seperti ini, Anda bisa
00:09:26melakukannya dengan menekan tombol Super Thanks di bawah.
00:09:28Seperti biasa, terima kasih telah menonton dan sampai jumpa di video berikutnya.