Mau Go-Live Tanpa Error? Ini Alur Kerja & Checklist Wajib Vendor Laxy!
Alur pengerjaan undangan Laxy.Motions membutuhkan kolaborasi terstruktur antara pengumpulan konten visual, setup database Google Sheets, pengisian Data Editor visual, kustomisasi injector tema, hingga proses hosting. Melalui checklist go-live ini, vendor dapat memastikan seluruh fungsi undangan seperti tombol buka, RSVP, ucapan restu, dan audio musik berjalan normal tanpa kendala sebelum diserahkan kepada klien.
Bayangkan Anda memiliki klien (misal: Andy & Zhea) yang undangannya harus segera live besok pagi. Karena terburu-buru, Anda langsung mengunggah file HTML ke hosting tanpa menguji kecocokan ID Undangan di Apps Script dan lupa menyetel hak akses "Anyone" saat deploy API Google Sheets. Hasilnya, tamu undangan panik karena tombol RSVP mereka error CORS dan menampilkan pesan gagal. Dengan mengikuti peta alur checklist ini, kesalahan fatal akibat terburu-buru tersebut bisa dicegah 100%.
✨ Keuntungan Mengikuti Peta Alur Kerja & Checklist
- Mengurangi Retur/Komplain Klien: Menghilangkan resiko error memalukan (seperti link lagu rusak atau form RSVP macet) saat undangan disebarkan.
- Proses Kerja Lebih Efisien: Membagi pengerjaan menjadi 7 tahapan logis sehingga Anda dapat menyelesaikan satu undangan dalam waktu kurang dari 30 menit.
- Standarisasi Kualitas Vendor: Membantu tim desainer Anda bekerja dengan standar kualitas (SOP) yang konsisten untuk setiap pesanan.
🗺️ Peta Alur Kerja Pembuatan Undangan (7 Tahap)
Berikut adalah 7 tahapan logis pembuatan undangan Laxy Motions dari tahap awal hingga penyerahan tautan:
1. Tahap Pengumpulan Materi (Mempelai)
Kirim formulir data ke pengantin untuk diisi (nama, tanggal, tempat, link peta, no rekening, dan lagu mp3 kesukaan). Kumpulkan foto prewedding mereka dan kompres ukurannya menggunakan alat kompresi gratis seperti TinyPNG agar ukuran file ringan di bawah 500KB per foto.
2. Tahap Pembuatan Database Google Sheet
Salin file RSVP_SheetTemplate.xlsx (ada di subfolder _backend/ pada setiap folder template, misalnya templates/jawa/_backend/) ke Google Drive Anda, ubah formatnya ke Google Sheets, ganti nama file sesuai mempelai, hapus baris contoh bawaan, lalu isi daftar nama tamu pada tab Tamu agar link personal dapat dibuat otomatis.
3. Tahap Pengisian Konten via Data Editor
Buka program Data Editor (tools/data-editor/index.html) di browser lokal Anda. Isi seluruh data mempelai, acara, kisah cinta, rekening bank, dan pengaturan visibilitas menu sesuai materi pengantin.
4. Tahap Otorisasi & Deploy Apps Script
Buka Google Sheets pengantin, klik menu Extensions → Apps Script. Klik Generate All di Data Editor, buka tab Code.gs, salin kodenya, lalu tempelkan ke editor Apps Script. Nilai UNDANGAN_ID di kode ini sudah sama dengan undangan_id yang Anda isi di Data Editor (detail di Setup GSheet & Apps Script). Deploy kode tersebut sebagai Web App (pilih Execute as: Me, Who has access: Anyone), lalu salin URL web app-nya.
5. Tahap Konfigurasi Akhir data.json & Injector
Tempel URL web app tadi ke kolom rsvpApiUrl di Data Editor Anda, lalu klik Generate All sekali lagi untuk mengunduh berkas data.json final. Simpan data.json di root folder template klien Anda. Buka file assets/js/theme-injector.js untuk menyelaraskan palet warna tema, ketebalan overlay foto, dan tipografi.
Jika Anda mengedit data.json demo bawaan template secara manual, ganti juga rsvpApiUrl dengan URL web app Anda dan ubah disable_rsvp_submit menjadi false. File demo memakai nilai true, sehingga form RSVP dan ucapan hanya berjalan dalam mode demo dan tidak menyimpan apa pun ke Google Sheet. Data Editor sudah memakai false secara bawaan.
6. Tahap Upload Berkas & Hosting
Unggah seluruh file undangan pengantin (berkas index.html, data.json, .htaccess, dan subfolder assets/ berisi gambar prewedding) ke server hosting Anda di dalam subfolder khusus pengantin (misal: public_html/andy-zhea/). Pastikan .htaccess sudah memuat domain Anda, karena file bawaan memblokir JS dan CSS di domain lain. Caranya ada di Daftarkan Domain di .htaccess.
7. Tahap Pengujian Live & Handover
Buka tautan undangan live di browser Anda dengan tambahan parameter ?debug=true (misal: https://websiteundangan.com/?debug=true) untuk menonaktifkan proteksi klik kanan dan shortcut DevTools sementara. Lakukan pengetesan checklist wajib di bawah ini sebelum menyerahkan link undangan resmi ke klien.
📋 Tabel Checklist Uji Kelayakan Go-Live
Sebelum mengirimkan link undangan ke mempelai, pastikan Anda mencentang (lulus) seluruh checklist kelayakan di bawah ini:
| No | Item yang Diuji | Cara Pengujian | Kriteria Lulus |
|---|---|---|---|
| 1 | Tombol "Buka Undangan" | Klik tombol buka di layar splash cover. | Layar bergeser & audio berbunyi |
| 2 | Pemuatan Data JSON | Periksa nama pengantin, detail tanggal, dan alamat acara. | Teks tampil utuh (bukan dummy) |
| 3 | Keterbacaan Teks Cover | Periksa kontras teks putih nama pengantin di atas foto cover. | Kontras tinggi (tambah overlay jika buram) |
| 4 | Fungsi Form RSVP | Coba lakukan submit kehadiran RSVP (hadir/tidak hadir). | Data masuk ke GSheet (tanpa error CORS) |
| 5 | Kirim Buku Ucapan | Ketik ucapan doa restu dan kirim. | Ucapan muncul di list (GSheet terupdate) |
| 6 | Tombol Kado Copy | Klik tombol salin di kartu rekening kado digital (teksnya "Salin No. Rekening" di template Jawa, "Salin" di template lain). | Teks tombol berubah menjadi "Tersalin!" |
| 7 | Link Personal (?to=) | Buka URL undangan dengan tambahan parameter ?to=Budi+Santoso. |
Nama tamu "Budi Santoso" muncul di cover |
Buat folder kosong cadangan di lokal komputer Anda bernama MASTER_TEMPLATE yang berisi file index.html, folder assets/, dan Code.gs bawaan yang belum dikustomisasi. Setiap kali ada klien baru, cukup duplikat (Copy-Paste) seluruh folder MASTER_TEMPLATE tersebut ke folder baru (misal: andy-zhea/) agar Anda tidak merusak source-code master template.
🔗 Modul Panduan Terkait
Lanjut ke panduan kustomisasi desain visual atau setup database:
💡 Pertanyaan Sering Ditanya (FAQ)
Tidak perlu. Anda cukup membuka file Google Sheets pengantin di Google Drive Anda, lalu ketik nama tamu baru beserta jumlah max_pax di baris paling bawah tab Tamu. Sistem API Google Sheets akan membaca data baru tersebut secara real-time tanpa perlu redeploy.
Ini adalah kebijakan keamanan mutlak dari browser modern (Chrome, Safari) yang melarang suara berbunyi otomatis sebelum ada interaksi fisik dari pengguna (klik/tap). Oleh karena itu, Laxy menyiasatinya dengan memutar lagu tepat saat tamu mengklik tombol Buka Undangan di halaman splash cover.
Tidak. Nama folder hosting (misal: andy-zhea/) hanya mempengaruhi link utama undangan pengantin yang disebarkan ke publik. Apps Script Google Sheets mengidentifikasi database berdasarkan ID spreadsheet dan konstanta UNDANGAN_ID di Code.gs, bukan nama folder hosting Anda.