Vibe Coding App Full Stack lalu Deploy ke VPS Indonesia | Landing Page + Admin CMS
| Istilah | Arti |
|---|---|
| webcoding | Cara membuat aplikasi atau website dengan bantuan AI, sehingga pembuatnya tidak perlu menulis setiap baris kode satu per satu. |
| admin CMS | Halaman admin tempat pemilik website mengubah konten, status leads, dan password tanpa mengubah kode, seperti ditunjukkan di video ini. |
| front end | Bagian website yang dilihat pengunjung, seperti landing page, navigasi, dan form, yang di video ini dibuat lebih dulu sebelum backend. |
| PRD | Dokumen kebutuhan produk yang memuat front end, backend, fitur utama, dan alur pengguna, dibuat dengan AI sebagai landasan pembangunan project. |
| VPS | Server virtual yang disewa dari penyedia, dalam video ini dari Rumahweb, tempat website dijalankan agar bisa diakses semua orang. |
| Dokploy | Panel visual untuk memasang dan memperbarui aplikasi di VPS, yang otomatis men-deploy ulang saat branch main di GitHub berubah. |
| deploy | Memindahkan aplikasi dari komputer lokal ke server agar bisa diakses orang lain lewat internet. |
| GitHub | Tempat menyimpan kode proyek secara online, yang di video ini dipakai sebagai cadangan versi dan sumber deployment otomatis. |
| Cloudflare | Layanan pengelola nameserver dan DNS yang dipakai di video ini untuk mengarahkan domain ke alamat IP VPS. |
| domain | Alamat web yang mudah diingat, seperti nama website, yang diarahkan ke server agar bisa dibuka dengan HTTPS. |
| SSH | Cara masuk ke terminal VPS dari komputer memakai perintah ssh root dan alamat IP, lalu menjalankan perintah update server. |
| localhost | Alamat yang hanya bisa dibuka di komputer sendiri, misalnya port 3000 atau 5173, sebelum aplikasi dideploy ke server. |
Kristian Ekachandra membuat video tutorial tentang cara membangun website landing page dengan admin CMS memakai AI coding agent, lalu men-deploy-nya ke VPS di Indonesia. Ia menjelaskan bahwa membuat aplikasi lewat AI sudah makin mudah, tetapi banyak orang kesulitan membuat hasilnya online dan bisa diakses orang lain. Website contoh ditujukan untuk jasa AI automation, berisi informasi layanan dan form calon klien yang menyimpan nama, nomor WhatsApp, email, dan kebutuhan proyek. Admin CMS memungkinkan pemilik website mengubah konten tanpa meminta bantuan developer setiap kali ada perubahan. Pesannya, alur lengkap dari rancangan, pembangunan, sampai deployment bisa dipelajari pemula, asalkan rancangan dibuat terlebih dahulu sebelum AI mulai menulis kode.
Pembicara membuat PRD lewat AI chat dengan stack React, Prisma, dan PostgreSQL, lalu memasukkannya sebagai prd.md ke Google Antigravity. Ia membangun frontend lebih dulu, kemudian backend dengan mode plan aktif, menetapkan port 3000 untuk backend dan 5173 untuk frontend, serta menguji form dan ekspor CSV. Hasil proyek didorong ke GitHub dalam repo privat, lalu diubah menjadi multiservice untuk Dokploy. Di VPS Rumahweb yang mulai dari Rp50.000 per bulan, ia menginstal Dokploy, mengatur domain di Cloudflare, mengaktifkan HTTPS lewat Let's Encrypt, dan menghubungkan GitHub. Antigravity dengan model Opus 4.6 tidak berhasil memperbaiki bug backend, sehingga ia memakai Codex yang berhasil. Menurut pembicara, Opus 4.6 lebih baik untuk frontend, sedangkan GPT-5.5 lebih baik untuk backend.
Kata kunci
- webcoding
- Dokploy
- admin CMS
- VPS
- Membuat website dari nol dengan AI coding agent (webcoding), lengkap dengan admin CMS sehingga isi website bisa diubah.
- Menyiapkan PRD, front end dan back end, lalu deploy ke VPS memakai Dokploy lewat SSH dan GitHub sebagai provider.
- Mengatur domain dengan Cloudflare agar project bisa diakses orang lain.
Tulis catatan pribadimu untuk video ini. Catatan tersimpan di akunmu dan bisa dibuka dari perangkat mana pun.