00:00:00Selamat datang di Vibe Coding 101. Jika Anda seseorang yang tidak tahu cara coding tapi tetap ingin
00:00:04mewujudkan sebuah ide, mungkin situs portofolio, proyek sampingan, atau sesuatu yang selalu
00:00:10ingin Anda bangun, video ini cocok untuk Anda. Di akhir video, Anda akan bisa membangun platform nyata
00:00:15tanpa menulis satu baris kode pun. Dan jika Anda seorang developer, video ini juga akan bermanfaat
00:00:21karena terkadang Anda hanya ingin menyelesaikan sesuatu dengan cepat tanpa perlu over-engineering. Jadi di video ini,
00:00:26saya akan memandu Anda melalui proses lengkap Vibe Coding, praktik terbaik di setiap langkahnya,
00:00:32dan kita akan membangun proyek nyata bersama. Untuk membangun aplikasi ini, kita akan menggunakan Abacus AI
00:00:37Deep Agent. Ini platform favorit saya untuk tugas terkait AI apa pun karena hanya dengan satu langganan,
00:00:43Anda bisa membangun aplikasi, situs web, presentasi, dan hampir apa saja. Saya sering menggunakannya untuk Vibe
00:00:50Coding karena saya perhatikan platform ini menghasilkan lebih sedikit error dan sangat terjangkau dibanding yang lain
00:00:54yang pernah saya coba. Saya sudah sertakan tautannya di deskripsi, jadi pastikan untuk mengeceknya.
00:00:59Ada lima langkah untuk melakukan Vibe coding aplikasi dengan benar. Kebanyakan orang sudah tahu langkah-langkah ini,
00:01:05tapi masalahnya mereka tidak tahu praktik terbaik di dalam setiap langkah, itulah sebabnya mereka
00:01:09mendapatkan hasil yang buruk dan tidak konsisten dari AI. Jadi mari kita perbaiki itu. Langkah pertama adalah
00:01:14fase ideasi. Di sinilah Anda memutuskan apa yang ingin dibangun. Bisa berupa situs portofolio atau
00:01:19apa pun. Jika belum punya ide, Anda juga bisa menggunakan AI untuk mendapatkan saran ide. Yang
00:01:25saya gunakan adalah Abacus Chat LLM, dan ini bekerja sangat baik untuk hal ini. Ia secara otomatis memilih model AI
00:01:31terbaik berdasarkan tugasnya, jadi Anda mendapatkan hasil yang lebih baik tanpa harus memikirkan model mana
00:01:36yang harus digunakan. Setelah punya ide, hal berikutnya yang harus dilakukan adalah menuliskannya. Buka saja
00:01:42Google Docs atau Word dan jelaskan ide Anda dalam bahasa sehari-hari. Apa yang Anda buat di sini disebut
00:01:47dokumen kebutuhan produk (PRD). Jangan biarkan nama itu menakuti Anda. Untuk Vibe coding, PRD hanyalah sebuah
00:01:53dokumen satu sampai dua halaman yang menjelaskan apa yang ingin Anda bangun. Dokumen ini nantinya akan menjadi prompt awal Anda.
00:01:59Saya menggunakan template PRD sederhana dari artikel ini. Terima kasih kepada penulisnya, dan silakan cek
00:02:05artikelnya jika ingin belajar lebih lanjut. Jika Anda ingin template yang siap isi,
00:02:09tautan unduhannya ada di deskripsi. Mari kita ulas bagian-bagiannya dengan cepat. Di bagian deskripsi satu kalimat,
00:02:14jelaskan saja aplikasi Anda dalam satu kalimat. Kita sedang membangun situs web pembagi pengeluaran (expense splitter)
00:02:20untuk video ini. Deskripsi kita bisa seperti ini. Bagian selanjutnya adalah untuk
00:02:25menjelaskan untuk siapa produk ini dan masalah apa yang diselesaikannya. Setelah itu, sertakan beberapa
00:02:31fitur utama aplikasi Anda. Tidak perlu teknis, tulis saja apa yang Anda inginkan dalam bahasa santai,
00:02:36dan hanya sebutkan fitur-fitur utamanya. Bagian berikutnya adalah menyebutkan apa yang tidak perlu dibangun,
00:02:41agar proyek Anda tidak meluas ke mana-mana. Jika tidak yakin, Anda bisa melewatkan ini untuk sekarang.
00:02:47Berikutnya adalah bagian alur pengguna (user flow), yang menjelaskan alur utama aplikasi tersebut. Dan ini juga
00:02:52opsional. Dan yang terakhir adalah bagian kriteria keberhasilan. Di sini Anda cukup menyebutkan kriteria keberhasilan
00:02:58untuk fitur-fitur Anda. Dan ini juga opsional. Selesai. Jika ini terasa berat,
00:03:03satu jalan pintas yang bisa digunakan adalah cukup isi deskripsi satu kalimat saja,
00:03:07tempel templatenya ke chatllm, dan minta AI untuk melengkapi PRD-nya untuk Anda. Setelah itu selesai,
00:03:13Anda siap untuk langkah kedua. Di fase ini, Anda akan memilih platform vibe coding dan menempelkan PRD Anda
00:03:19sebagai prompt awal. Sangat penting untuk memilih platform coding yang bagus karena tentunya,
00:03:25jika ingin hasil yang luar biasa, Anda perlu menggunakan platform yang luar biasa. Jadi saya akan menggunakan Abacus AI
00:03:30Deep Agent. Yang perlu Anda lakukan hanyalah menyalin PRD Anda dan menempelkannya ke kotak prompt. Jika ingin aplikasi Anda
00:03:36dengan desain tertentu, Anda bisa mengunggah file desain dan memintanya menggunakannya sebagai referensi. Tapi ingat
00:03:41bahwa Anda tidak bisa langsung mengunggah file Figma. Cara lainnya, Anda cukup mendeskripsikan desain Anda
00:03:47dalam bahasa sehari-hari. Sekarang klik kirim dan tunggu. Setelah Anda mengirim permintaan, agen mungkin menanyakan beberapa
00:03:53pertanyaan lanjutan. Sebagian besar non-teknis, jadi tulis saja preferensi Anda. Jika ada yang tidak Anda pahami,
00:03:59Anda bisa meminta AI untuk menjelaskan maksudnya. Setelah Anda mengirim preferensi, agen tersebut
00:04:05akan mulai memprogram aplikasi Anda. Ini bagian favorit saya karena saya bisa sambil scroll
00:04:10reels sambil menontonnya menghasilkan kode untuk saya. Beberapa saat kemudian. Oke, sepertinya aplikasi kita
00:04:17sudah siap. Sekarang kita siap untuk langkah berikutnya. Fase ini adalah tentang menguji aplikasi, memperbaiki bug,
00:04:23meningkatkan desain, atau menambah fitur. Dan di sinilah kebanyakan orang melakukan kesalahan. Sebelum membahas
00:04:28hal itu, mari kita lihat platform kita dengan cepat. Aplikasi kita berjalan dengan baik. Sekarang mari kita bahas
00:04:58apa yang tidak boleh dilakukan dalam tahap uji dan perbaikan ini. Salah satu kesalahan besar yang dilakukan banyak orang
00:05:04adalah mereka mencatat semua yang perlu diperbaiki dan memasukkannya ke dalam satu prompt raksasa. AI tidak bekerja dengan baik
00:05:09dengan cara itu. Praktik terbaiknya adalah memperbaiki satu hal dalam satu waktu dan sangat spesifik dalam prompt Anda.
00:05:15Misalnya ada tombol yang tidak berfungsi. Jangan tulis prompt seperti ini. Sebaliknya, gunakan
00:05:20template prompt ini untuk memperbaiki masalah Anda. Selanjutnya, mari kita lihat proses penambahan fitur tambahan.
00:05:25Anda sudah mendeskripsikan fitur di PRD Anda. Gunakan kembali format yang sama. Contohnya, di situs kita,
00:05:32mari tambahkan pembagian pengeluaran yang tidak merata. Saat ini, saat kita membuat pengeluaran, biayanya dibagi
00:05:38rata. Tapi dengan pembagian tidak merata, saya bisa mengatur biaya per orang. Sesuai template kita,
00:05:44saya telah membuat deskripsi untuk fitur baru kita. Sekarang mari kembali ke agen dan menempelkannya. Tapi
00:05:50sebelum itu, pastikan untuk menambahkan baris ini, baru kemudian Anda bisa tempel deskripsinya. Sekarang kirim dan
00:05:56mari kita tunggu. Fitur baru kita sudah siap. Mari kita uji. Dan semuanya terlihat oke. Itu saja
00:06:17untuk langkah ini. Tambahkan satu fitur, uji, dan ulangi. Masih ada beberapa hal yang ingin saya tambahkan
00:06:23sebelum lanjut ke langkah berikutnya. Pertama, jangan ragu untuk kembali ke perubahan lama (revert). Kembali
00:06:29ke perubahan lama berarti Anda kembali ke versi kode yang sebelumnya. Mungkin ada kasus di mana
00:06:33menambah fitur baru atau memperbaiki bug justru merusak hal lain. Dalam hal ini, cukup beri tahu
00:06:39AI bahwa perubahan baru merusak kode dan minta untuk diperbaiki. Ini akan berhasil hampir setiap saat.
00:06:44Tapi jika tidak berhasil, cara terbaik adalah kembali ke versi lama. Hal berikutnya
00:06:49yang ingin saya tambahkan adalah jangan ragu untuk mengubah template prompt yang sudah saya berikan.
00:06:54Itu membawa kita ke langkah selanjutnya. Validasi akhir. Setelah semua fitur ditambahkan,
00:06:59Anda perlu melakukan pengujian akhir pada aplikasi Anda. Tidak ada yang rumit. Cukup telusuri
00:07:04platform Anda dan uji setiap fitur. Pastikan setiap output benar dan setiap perilaku
00:07:09sesuai harapan. Jika melihat masalah, kembali lagi ke fase uji dan perbaikan. Dan itu
00:07:14intinya adalah memastikan semuanya berfungsi sebelum diaktifkan. Langkah terakhir adalah
00:07:20deployment. Dengan Abacus AI Deep Agent, deployment hanya butuh beberapa klik. Untuk men-deploy aplikasi Anda,
00:07:27cari tombol deploy di bagian atas. Klik deploy dan Anda akan melihat tiga opsi. Gunakan domain
00:07:33Abacus AI, domain kustom, atau subdomain kustom. Memilih domain Abacus berarti URL situs yang di-deploy
00:07:40akan mengikuti pola ini. Jika menggunakan domain kustom, Anda perlu membeli domain dan
00:07:45mengarahkannya ke Abacus via pengaturan DNS. Subdomain lebih sederhana. Jika Anda punya domain, Anda bisa menggunakan
00:07:51sesuatu seperti ini sebagai subdomain tanpa membeli apa pun lagi. Untuk sekarang, gunakan saja domain
00:07:57Abacus. Berikan nama yang Anda inginkan dan ini akan menjadi URL situs web Anda setelah deployment.
00:08:03Dan selamat! Aplikasi Vibe Coded pertama kita akhirnya online. Anda bisa membagikan URL ini kepada orang lain
00:08:09agar mereka juga bisa mulai menggunakan aplikasi Anda. Sebelum Anda pergi dan membuat aplikasi sendiri, ada satu
00:08:14hal terakhir yang ingin saya sampaikan. Aplikasi murni hasil Vibe Coded tidak ideal untuk produk komersial skala besar.
00:08:20Aplikasi ini paling cocok untuk proyek pribadi, alat bantu kecil, prototipe, dan pengguna terbatas. Itu karena
00:08:26mungkin ada masalah keamanan, performa, dan juga batasan skalabilitas. Jika Anda berencana untuk menjadi besar,
00:08:32Anda akhirnya akan membutuhkan developer. Dan itulah dia. Lima langkah Vibe Coding dengan praktik terbaik
00:08:38yang benar-benar berhasil. Pastikan untuk mencoba Abacus AI Deep Agent. Tautannya ada di deskripsi.
00:08:44Jika video ini membantu Anda, pastikan untuk like, share, subscribe, dan beri komentar di bawah.
00:08:49Sampai jumpa di video berikutnya!