Live - Ng- Vibe Coding Bulan Puasa Sesi 3 : Buat Keranjang belanja seperti toko online

Описание: Live - Ng- Vibe Coding Bulan Puasa Sesi 3 : Buat Keranjang belanja seperti toko online


Video ini merupakan Sesi 3 dari seri Ng-Vibe Coding yang berfokus pada transformasi desain website jualan agar memiliki antarmuka yang lebih profesional layaknya toko online (e-commerce). Jika pada sesi sebelumnya website masih sangat sederhana, di sesi ini fokus utamanya adalah merombak fitur keranjang belanja menggunakan bantuan Grok AI.

Perubahan teknis yang dilakukan meliputi pemindahan posisi keranjang belanja dari bawah ke bilah samping (sidebar) yang muncul dari kanan dengan efek overlay gelap. Selain itu, ditambahkan fitur-fitur interaktif seperti:
Manajemen Item: Tombol tambah/kurang jumlah produk dan tombol hapus item dengan konfirmasi pop-up.
Catatan Khusus: Ikon pensil untuk memberikan catatan tambahan pada setiap produk (misalnya: "saus manis" atau "cabe tambah") yang akan otomatis terkirim ke pesan WhatsApp penjual.
Antarmuka Modern: Penambahan floating icon keranjang dengan badge angka jumlah item, gambar thumbnail produk di dalam keranjang, serta notifikasi toast saat menambahkan barang.

Sesi ini diakhiri dengan langkah praktis memperbarui website di Google Sites dengan cara membuat halaman beranda baru (Cireng 2) tanpa menghapus jejak pengerjaan sebelumnya.

Timeline Isi Konten

00:00 - 02:00 | Pembukaan & Review: Evaluasi hasil website dari sesi sebelumnya dan rencana perubahan desain keranjang belanja.
02:01 - 05:00 | Menyusun Prompt AI: Memberikan instruksi detail kepada Grok AI untuk memisahkan kolom keranjang dengan formulir konfirmasi dan meminta tampilan dari sisi samping.
05:01 - 08:00 | Penjelasan Fitur Baru: AI memberikan kode terbaru dengan fitur slide-in sidebar, input jumlah kuantitas minimal satu, dan logika tombol checkout yang nonaktif jika keranjang kosong.
08:01 - 12:00 | Pengujian Awal & Fitur Catatan: Menjalankan kode di W3Schools, mencoba input catatan tambahan per item, dan memverifikasi hasilnya di format pesan WhatsApp.
12:01 - 15:00 | Optimasi Antarmuka: Meminta AI menambahkan floating icon di pojok kanan bawah, angka kecil (badge) di atas ikon, serta fitur notifikasi toast.
15:01 - 20:00 | Sinkronisasi Data: Menghubungkan kembali kode baru dengan API Google Sheets dari sesi sebelumnya agar gambar produk dan data harga muncul secara otomatis.
20:01 - 25:00 | Perbaikan User Experience (UX): Menginstruksikan AI untuk mengganti fungsi alert sistem yang mengganggu dengan pop-up konfirmasi hapus item yang lebih estetik.
25:01 - 31:00 | Update Google Sites: Proses menyematkan (embed) kode baru ke Google Sites, menyembunyikan navigasi lama, dan menetapkan halaman desain terbaru sebagai "Beranda".
31:01 - Selesai | Penyesuaian Akhir & Penutup: Mengatur posisi ikon menggunakan CSS agar tidak tertutup elemen lain dan kesimpulan sesi pembuatan website dengan AI.

Apakah Anda ingin saya membuatkan Infografis mengenai alur kerja integrasi antara Grok AI, Google Sheets, dan Google Sites agar Anda memiliki panduan visual untuk proyek ini?


contoh web

beranda : https://sites.google.com/view/jualcir...
halaman 1 : https://sites.google.com/view/jualcir...
halaman 2 : https://sites.google.com/view/jualcir...

tabel sheet :

https://docs.google.com/spreadsheets/...

#farhanonlen #VibeCoding
#LiveCoding
#BulanPuasa
#RamadhanCoding
#WebsiteJualan
#BelajarCoding
#UMKMGoDigital
#TokoOnlineGratis
#FarhanOnlen