Memulai dengan v0: Dari Prompt hingga Produksi
VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Ini adalah landing page acara yang saya buat sendiri hanya dalam beberapa menit.
00:00:05Halaman ini bahkan dilengkapi dengan fitur uji coba virtual berbasis AI.
00:00:09Atasan saya memberikan proyek ini, dan V0 membantu saya mewujudkan ide menjadi perangkat lunak nyata.
00:00:14Dalam video ini, saya akan menunjukkan apa itu V0 dan cara membangun proyek langkah demi langkah.
00:00:19Jadi, apa itu V0?
00:00:21AI memang memudahkan kita untuk menghasilkan kode.
00:00:23V0 memanfaatkan kekuatan tersebut ke dalam format yang memudahkan siapa saja membuat aplikasi nyata
00:00:28dan situs web, atau berkolaborasi dengan developer.
00:00:30V0 dirancang untuk membantu Anda beralih dari nol hingga siap rilis secepat mungkin.
00:00:36Begini cara kerja V0.
00:00:37Anda cukup mendeskripsikan aplikasi, agen, atau situs web yang diinginkan, lalu V0 akan menghasilkan kodenya
00:00:42dalam pratinjau langsung.
00:00:43Anda bisa melakukan perubahan dan memodifikasi proyek dengan berinteraksi langsung dengan V0, memberi tahu perubahan apa yang harus dibuat,
00:00:48dan V0 akan menyelesaikannya untuk Anda.
00:00:49V0 menghasilkan perangkat lunak nyata menggunakan Vercel dan Next.js, tetapi V0 bukan sekadar pembuat situs web.
00:00:56Alat ini bisa menghasilkan aplikasi nyata, menghubungkannya ke AI dan database, serta menghasilkan kode yang bisa digunakan
00:01:00dan diterapkan oleh developer.
00:01:02Hal ini dimungkinkan karena V0 dibuat oleh Vercel, pencipta framework Next.js,
00:01:08yang digunakan oleh merek-merek ternama seperti Under Armour, Stripe, dan Notion.
00:01:11Jadi, saat V0 membangun dan menerapkan aplikasi Next.js Anda, Anda menggunakan kode dan infrastruktur aman yang sama
00:01:15dengan yang digunakan oleh perusahaan-perusahaan top di dunia.
00:01:19Mari kita lihat beberapa proyek agar Anda bisa melihat langsung cara kerja V0 dan betapa mudahnya untuk memulai.
00:01:24Katakanlah saya berada di tim pemasaran, dan saya memiliki dua proyek besar yang harus diselesaikan minggu ini.
00:01:27Pertama, saya harus membuat halaman acara untuk produk baru yang akan kami luncurkan.
00:01:31Kedua, saya perlu memperbarui landing page di situs web kami.
00:01:34Mari kita mulai dengan halaman acara terlebih dahulu.
00:01:36Acara ini adalah pesta peluncuran produk di mana kami akan merilis jam tangan baru bernama Son of
00:01:40Ali.
00:01:41Saya ingin membuat landing page yang modis dan menarik untuk membangun antusiasme, serta menciptakan pengalaman
00:01:45uji coba virtual yang interaktif bagi pengunjung agar mereka mau mendaftar.
00:01:48Jadi, saya akan meminta V0 untuk melakukan hal tersebut.
00:01:53Saya sudah selesai menulis perintahnya.
00:01:54Sekarang saya akan mengirimkan instruksinya, dan V0 akan mulai membangun.
00:01:59Selagi V0 sedang membangun, saya ingin menunjukkan apa yang membuatnya sangat andal.
00:02:02Jika Anda mengklik Settings, lalu Integrations, Anda akan melihat semua integrasi yang tersedia
00:02:07untuk Anda di V0.
00:02:09Pertama, Anda bisa melihat bahwa V0 sudah memiliki AI bawaan.
00:02:12Alat ini akan menggunakan AI SDK untuk membangun fitur-fitur AI dan AI gateway untuk memberikan akses ke
00:02:17ratusan model AI secara otomatis pada aplikasi Anda.
00:02:20Anda juga bisa membangun atau menghubungkan ke database untuk mendukung backend aplikasi Anda, bahkan
00:02:25menerima pembayaran melalui Stripe.
00:02:27Dengan integrasi ini, Anda bisa membangun aplikasi berbasis AI yang lengkap dan fungsional.
00:02:32Baiklah, mari kita periksa halaman acara kita.
00:02:34V0 telah selesai membangun versi pertama ini, jadi mari kita uji coba.
00:02:38Saya akan mengunggah foto diri saya, dan sistem akan memberikan empat
00:02:44opsi gambar hasil uji coba jam tangan virtual seperti yang kita minta.
00:02:49Luar biasa, V0 benar-benar telah menerima instruksi saya dan memperbarui kodenya.
00:02:55Jika kita melihat bagian editor, Anda bisa melihat bahwa V0 sedang aktif memperbarui kode Next.js.
00:03:00Editor ini juga memudahkan developer untuk meninjau dan mengedit kode.
00:03:04Baiklah, V0 selesai melakukan perubahan dan hasilnya terlihat sangat bagus.
00:03:09Sebelum saya memublikasikannya, saya ingin membagikannya kepada tim untuk mendapatkan umpan balik.
00:03:12Jadi, saya bisa mengklik Share lalu menyalin tautannya dan mengirimkan obrolan serta pratinjau tersebut kepada tim saya.
00:03:18Apa yang mereka lihat pada pratinjau ini akan sama persis dengan apa yang dilihat pengguna saat saya memublikasikan halaman ini,
00:03:22jadi saya tidak perlu khawatir ada hal yang berubah saat saya benar-benar menerapkannya.
00:03:26Setelah tim saya meninjau halamannya, saya siap memberikan URL khusus dan memublikasikannya.
00:03:31Hebatnya lagi, proses ini sebenarnya telah membuat proyek di Vercel untuk kreasi V0
00:03:36yang telah saya buat.
00:03:37Jadi, jika saya mengklik Inspect on Vercel, saya bisa langsung melihat proyek tersebut.
00:03:42Di dalam proyek itu, saya bisa melihat semua analitik, kesalahan, dan riwayat lengkap dari deployment yang dilakukan.
00:03:48Luar biasa, saya telah memublikasikan aplikasi ini ke tahap produksi.
00:03:51Jadi sekarang saya bisa mengunjungi situs webnya secara langsung dan ini adalah apa yang akan dilihat pengguna, saya bisa membagikan
00:03:56tautan tersebut agar mereka bisa mengaksesnya secara publik.
00:03:59Yang sangat keren dari V0 adalah saya bisa memilih untuk menambahkan domain khusus.
00:04:03Saya bisa menyesuaikan domain di .vercel.app, membeli domain baru, atau menambahkan domain yang sudah
00:04:09saya miliki.
00:04:10Karena ini adalah halaman untuk acara satu kali, saya akan menyesuaikan domain utamanya lalu
00:04:14memublikasikannya kembali.
00:04:15Bagus.
00:04:16Sekarang domain tersebut telah diperbarui dan saya bisa mengakses halaman yang sama di domain baru yang
00:04:21telah saya edit dan tambahkan.
00:04:23Selesai!
00:04:24V0 kini telah menerapkan aplikasi saya di infrastruktur Vercel dan sekarang sudah bisa diakses oleh siapa saja secara publik.
00:04:30Sekarang mari kita lanjut ke proyek berikutnya, yaitu memperbarui landing page yang sudah
00:04:34dipublikasikan di situs pemasaran kami.
00:04:36Tim pengembangan kami mengelola situs tersebut dan mengontrol versi kodenya melalui GitHub, jadi saya harus
00:04:41melakukan pembaruan ini sebagai bagian dari alur kerja mereka.
00:04:44Kabar baiknya adalah V0 memudahkan saya untuk melakukan hal tersebut dengan tepat.
00:04:48Saya akan membuka jendela V0 baru dan mengklik import dari GitHub.
00:04:52Saya sudah memiliki URL untuk repositori GitHub yang ingin saya akses,
00:04:56jadi saya akan menempelkannya ke bilah atas dan mengklik import.
00:05:01Dan begitu saja, V0 langsung mengimpor repositori tersebut.
00:05:05Sekarang V0 telah berhasil mengimpor repositori dan saya siap untuk melakukan perubahan.
00:05:08Yang ingin saya lakukan adalah menambahkan banner di bagian atas halaman pemasaran ini untuk mengarahkan pengunjung
00:05:12ke landing page acara yang baru saja kita buat, sehingga mereka bisa mendaftar untuk acara peluncuran
00:05:17Son of Ali.
00:05:18Jadi, saya akan meminta V0 untuk melakukan hal tersebut.
00:05:21Selagi V0 melakukan perubahan, saya akan mengklik menu Git.
00:05:27Anda bisa melihat bahwa V0 telah secara otomatis membuatkan cabang (branch) baru untuk saya, yang akan memudahkan
00:05:31developer kami untuk meninjau dan menguji perubahan sebelum menggabungkannya (merge) ke dalam
00:05:35situs utama.
00:05:36Baiklah, V0 telah melakukan perubahan, jadi sekarang saatnya membuat pull request agar
00:05:42tim saya bisa meninjaunya.
00:05:44Saya akan mengklik open PR lalu klik open pull request.
00:05:49Sekarang jika saya mengklik view PR, saya bisa melihat bahwa pull request saya telah dibuka di GitHub.
00:05:54Dan karena situs kami berada di Vercel, pratinjau build telah dibuat secara otomatis.
00:05:59Jadi tidak hanya developer yang bisa meninjau kodenya, tetapi seluruh tim juga bisa melihat seperti apa
00:06:03tampilan pembaruannya dan memberikan masukan melalui kolom komentar.
00:06:06Dan itu saja.
00:06:07Saya baru saja membuat perubahan pada situs pemasaran kami sendiri tanpa harus membuat tiket tugas untuk tim teknik,
00:06:11dan mereka bisa meninjau perubahan tersebut sebagai bagian dari proses yang sudah ada.
00:06:15Kami membangun V0 untuk tim yang bekerja dengan developer, baik itu bagian pemasaran, produk, founder,
00:06:19atau bahkan para insinyur itu sendiri.
00:06:22Dengan V0, siapa saja bisa mengubah ide mereka menjadi perangkat lunak nyata dan berkolaborasi pada aplikasi serta
00:06:27situs web yang sudah ada.
00:06:28Kunjungi v0.app dan luncurkan proyek pertama Anda hari ini.