Live - Ng- Vibe Coding Bulan Puasa Sesi 5 : Ganti Gambar Produk

Описание: Live - Ng- Vibe Coding Bulan Puasa Sesi 5 : Ganti Gambar Produk


Video ini merupakan Sesi 5 dari seri Ng-Vibe Coding yang fokus pada dua hal utama: personalisasi aset visual dan otomasi data informasi toko. Farhan Onlen mendemonstrasikan cara mengganti gambar produk default dengan gambar produk milik sendiri yang disimpan di Google Drive. Karena link standar dari Google Drive tidak bisa langsung terbaca sebagai gambar di website, tutorial ini menunjukkan penggunaan alat konverter khusus untuk mendapatkan link permanen yang bisa ditampilkan di web.
Selain itu, sesi ini memperkenalkan teknik agar bagian "Asset/Sidebar" (seperti informasi jam operasional Ramadan, varian favorit, dan area pengantaran) menjadi dinamis. Caranya adalah dengan memindahkan data tersebut dari kode HTML ke sheet baru di Google Sheets. Dengan bantuan Grok AI, kode diperbarui sehingga pemilik toko cukup mengedit data di spreadsheet saja jika ada perubahan informasi, tanpa perlu menyentuh atau mempublikasikan ulang kode di Google Sites.


Timeline Isi Konten
00:00 - 02:00 | Pembukaan: Evaluasi tampilan website sebelumnya dan rencana mengganti gambar produk menggunakan data dari Google Drive.
02:01 - 04:30 | Manajemen File di Google Drive: Membuat folder khusus untuk proyek website jualan dan mengatur akses folder menjadi "Siapa saja yang memiliki link" sebagai pelihat agar gambar bisa diakses publik.
04:31 - 07:15 | Pembuatan Aset Gambar AI: Menggunakan ChatGPT untuk menghasilkan gambar produk (seperti cireng mercon dan telur puyuh) sebagai pengganti foto produk asli bagi UMKM.
07:16 - 11:00 | Teknik Link Gambar Permanen: Penjelasan mengapa link gambar dari Facebook atau link Drive biasa tidak bisa digunakan langsung, serta demonstrasi penggunaan converter link Google Drive.
11:01 - 18:00 | Sinkronisasi Database Produk: Memasukkan link gambar yang sudah dikonversi ke dalam Google Sheets dan melakukan refresh website untuk melihat perubahan gambar cireng ori, ayam suwir, dan mozzarella.
18:01 - 21:00 | Konsep Sidebar Dinamis: Rencana memindahkan teks info Ramadan dan area pengantaran ke Google Sheets agar bisa diubah kapan saja tanpa edit kode.
21:01 - 28:00 | Prompting Grok AI: Meminta Grok AI membuatkan struktur kode baru agar bagian sidebar mengambil data dari URL CSV Google Sheets.
28:01 - 32:00 | Setup Sheet Sidebar: Membuat sheet baru bernama "Sidebar", mengisi informasi jam operasional dan varian favorit, serta mempublikasikannya ke web dalam format CSV.
32:01 - 38:00 | Update Kode & Deploy (Cireng 4): Menggabungkan kode baru dari Grok AI ke dalam editor, memasukkan link CSV sidebar, dan mempublikasikan halaman baru di Google Sites dengan nama "Cireng 4".
38:01 - 42:00 | Pengujian Perubahan Data: Demonstrasi mengubah radius pengantaran dari "Sekitar Malang" menjadi "10 KM" langsung dari Google Sheets dan melihat perubahannya secara instan di website.
42:01 - Selesai | Penutup & Evaluasi: Uji coba fungsi keranjang belanja pada versi terbaru dan rencana perbaikan tampilan CSS pada sesi berikutnya.


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...
halaman 3 : https://sites.google.com/view/jualcir...
halaman 4: https://sites.google.com/view/jualcir...

tabel sheet :

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

web konversi gambar dari drive

https://sites.google.com/view/menu-di...

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