𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝘂𝗻𝘁𝘂𝗸 𝗣𝗲𝗺𝘂𝗹𝗮: 𝗕𝗮𝗴𝗮𝗶𝗺𝗮𝗻𝗮 𝗦𝗮𝘆𝗮 𝗕𝗶𝗻𝗮 𝗮 𝗣𝗵𝗼𝘁𝗼 𝗕𝗼𝗼𝘁𝗵 𝗱𝗲𝗻𝗴𝗮𝗻 𝗖𝗹𝗮𝘂𝗱𝗲

Saya seorang penulis, bukan pengatur cara. Kemahiran teknikal saya terhenti pada HTML asas dari tahun 1999.

Tetapi saya baru sahaja membina satu alatan yang berfungsi sepenuhnya.

Saya membina sebuah photo booth berasaskan pelayar untuk acara MLH. Peserta boleh mengambil swafoto, menambah bingkai berjenama, dan menyimpannya ke telefon mereka. Tanpa stor aplikasi. Tanpa akaun. Hanya satu pautan.

Saya menggunakan kaedah yang dipanggil vibe coding dengan Claude. Ini adalah cara saya melakukannya dan apa yang saya pelajari.

𝗧𝗵𝗲 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆

Saya mahukan sesuatu yang boleh dipercayai untuk acara secara langsung. Claude menasihatkan agar tidak menggunakan rangka kerja (framework) yang kompleks. Sebaliknya, kami membina satu fail index.html tunggal.

  • Ia menggunakan HTML, CSS, dan JavaScript dalam satu fail.
  • Tiada langkah binaan (build steps) atau pemasangan.
  • Ia dihoskan secara percuma di GitHub Pages.
  • Ia mempunyai komponen yang lebih sedikit, jadi ia lebih sukar untuk rosak.

𝗧𝗵𝗲 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹 𝗕𝗶𝗹𝗱

Aplikasi ini menggunakan HTML canvas untuk menggabungkan swafoto dengan bingkai PNG lutsinar. Ini berlaku sepenuhnya di dalam pelayar.

  • Foto pengguna tidak pernah meninggalkan peranti mereka.
  • Ini melindungi privasi secara automatik.
  • Saya menambah gerak isyarat seperti pinch-to-zoom untuk penjajaran foto yang mudah.

Untuk menguruskan bingkai tanpa pelayan yang kompleks, saya menggunakan Supabase.

  • Penganjur memuat naik bingkai ke dalam storage bucket.
  • Peserta melihatnya melalui pautan awam.
  • Keselamatan dikendalikan oleh polisi pangkalan data, bukan kata laluan tersembunyi.

𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗚𝗼𝘁𝗰𝗵𝗮𝘀

Vibe coding membantu dari segi seni bina, tetapi anda mesti berwaspada dengan butiran operasi:

  • Tidur Pangkalan Data: Projek Supabase percuma akan berhenti seketika selepas tidak aktif. Anda mesti mengaktifkannya semula sebelum acara bermula.
  • Pencemaran Canvas (Canvas Tainting): Memuatkan imej dari sumber yang berbeza boleh merosakkan fungsi simpanan. Saya membetulkan ini menggunakan tetapan crossOrigin.
  • UX Mudah Alih: Pada telefon, saya menggunakan native share sheet. Ini membolehkan pengguna menyimpan foto terus ke dalam galeri kamera mereka dengan satu ketikan.

𝗠𝘆 𝗔𝗱𝘃𝗶𝗰𝗲 𝗳𝗼𝗿 𝗬𝗼𝘂

Jika anda ingin mencuba ini, ikut peraturan berikut:

  • Pilih projek dengan sempadan yang jelas. Sebuah photo booth mempunyai matlamat yang nyata. Aplikasi media sosial adalah terlalu besar.
  • Tanya AI untuk menjelaskan "mengapa." Penaakulan adalah lebih penting daripada kod.
  • Baca perbezaan (diffs). Jangan biarkan AI mengubah laman web anda tanpa anda menyemak perubahan tersebut terlebih dahulu.

Vibe coding tidak bermakna anda tidak memahami projek anda. Ia bermakna AI mengendalikan sintaks manakala anda mengendalikan logik dan pertimbangan (tradeoffs).

Source: https://dev.to/mlh/vibe-coding-for-beginners-how-i-built-a-working-photo-booth-web-app-with-claude-8ib

Optional learning community: https://t.me/GyaanSetuAi