6 pelajaran dari membuat website Wedding Invitation sendiri
--
Bermodalkan ilmu dan pengalaman bekerja sebagai software engineer membuat saya berinisiatif untuk membuat website undangan pernikahan secara mandiri. Butuh waktu 3 bulan untuk development hingga akhirnya up to production. Berikut ini 6 pelajaran yang bisa dipetik dari proses pembuatan website tersebut.
1. Requirements gathering
Requirements dikumpulkan dengan cara survey kepada diri sendiri, calon istri, anggota keluarga dan tamu undangan selaku user. Kemudian hasil requirement gathering-nya dibentuk menjadi persona dan user story.
User 1: internal (diri sendiri, calon istri, keluarga)
- punya informasi pernikahan: pengantin, acara, galeri
- butuh konfirmasi kehadiran dari tamu
- ingin mendapat ucapan dari tamu
- ingin mengirim undangan melalui media sosial
User 2: tamu undangan
- mayoritas memiliki smartphone/laptop
- butuh informasi pernikahan
- ingin memberikan ucapan dan RSVP
2. Software Design
Requirements telah dikumpulkan dan identifikasi user telah dilaksanakan. Tahap berikutnya adalah software design berdasarkan requirements tersebut.
Di sisi user, diketahui bahwa gadget yang mereka gunakan adalah smartphone android/iOS atau laptop windows/macOS/Linux. Kesamaannya adalah masing-masing sistem operasi memiliki browser internet. Maka dibuatlah undangan dalam bentuk website.
Di sisi server, disediakan code frontend dan backend. Frontend dibuat dari backbone dan visual design dari HTML dan CSS dengan template dari bootstrap. Selain itu, pada frontend disematkan animasi dan fitur fetch data ke server yang ditulis dengan bahasa pemgrograman vanilla javascript. Pada backend, digunakan nodejs server dengan framework Nestjs yang strongly typed dengan Typescript, memiliki arsitektur modular, dan membuat abstraksi dari boilerplate code server nodejs.
Untuk deployment server, digunakan Virtual Private Server (VPS) linux dengan resource storage 20 GB dan memory RAM 1 GB. Resource tersebut sudah cukup untuk menjalankan 2 Docker container, yaitu container mongodb untuk database dan container aplikasi yang mencakup frontend dan backend. Provider VPS yang saya pilih adalah idcloudhost yang merupakan perusahaan lokal dan menyediakan VPS dengan biaya sewa kurang lebih 50.000 per bulan, lebih murah dibanding provider lain.
Dapatkan free credit senilai Rp50.000 dari idcloudhost dengan memasukkan code referral ckgfjw atau klik https://console.idcloudhost.com/referral/ckgfjw
3. Visual Design
Untuk mempercantik tampilan website, calon istri saya memilih color palette, mendesain grafis background image dan memilih font untuk seluruh isi undangan menggunakan Canva. Berbagai konfigurasi bisa diatur, contohnya layout background mobile/desktop atau download dalam format .png atau .jpg. Ada juga berbagai template, pilihan icon cantik, atau vektor grafis yang gratis maupun premium.
Semua desain grafis kami bisa dilakukan dengan mudah dan cepat (dan kadang gratis!) dengan Canva. Gunakan referral link ini untuk mendapat icon, template, dan image premium di Canva https://www.canva.com/join/vmh-kbb-dbm
4. Prototyping & Iterating
Prototype website sudah bisa diakses secara terbatas dan testing telah dilakukan oleh saya dan calon istri. Tahap berikutnya adalah testing prototype tersebut kepada internal keluarga, sehingga didapat feedback untuk perbaikan di iterasi berikutnya. Feedback-nya serta identifikasi root cause-nya antara lain:
Animasi tidak berfungsi di beberapa jenis smartphone
- tidak ada javascript
Gagal input ucapan
- form tidak menyimpan data ucapan
- fetch API salah format body
Setelah dilakukan iterasi perbaikan, masalah diatas dapat diatasi. Khusus untuk animasi tidak berfungsi, solusinya adalah menjadikan animasi bersifat trivial.
5. Security Enhancement
Masalah security muncul ketika prototyping sedang berlangsung dan butuh untuk diperbaiki segera. Masalah tersebut beserta solusinya adalah sebagai berikut.
- Unauthenticated user masuk ke database dan mengganti isinya dengan perintah untuk melakukan pembayaran
- container database diganti dengan container baru
- atur autentikasi database terlebih dahulu
2. Brute force ke VPS melalui SSH (port 22)
- masih terkendali karena password tidak terpecahkan
- Disable SSH dengan password
- block IP yang gagal dengan fail2ban
3. Form data ucapan dianggap tidak aman
- Tambah CSRF Token
4. Browser menolak untuk membuka website karena belum secured.
- Gunakan SSL agar website diakses dengan HTTPS
SSL dan domain website saya sewa melalui provider lokal idcloudhost dengan biaya terjangkau. Dapatkan penawaran dan promonya dengan menggunakan referral link ini https://my.idcloudhost.com/aff.php?aff=10507
6. Periodic Maintenance
Website berhasil masuk ke production dan disebar ke tamu undangan. Undangan pun diterima dengan baik oleh para tamu. Ucapan selamat dan doa serta RSVP pun berdatangan. Maka kebutuhan user dalam tahap ini berhasil dipenuhi.
Production berjalan lancar karena maintenance yang baik. VPS dipantau agar selalu up dengan menyediakan resource yang cukup. Database dibackup secara berkala dengan cara diexport ke lokal storage.
Setelah acara selesai, website ditutup karena sudah tidak diperlukan lagi. Sampai tahap ini, pekerjaan saya sebagai developer telah selesai.
Menurut saya, membuat website sendiri seperti Wedding Invitation memberikan pengalaman yang berarti bagi seorang developer seperti saya, mulai dari development code fullstack, menyiapkan dan memaintain infrastruktur, sampai memilih provider yang cocok. Semoga pengalaman yang saya bagikan ini bisa menjadi pelajaran juga untuk sahabat ya.
Karena sahabat sudah setia membaca sampai akhir, saya berikan 4 M (Makasih mas, makasih mbak) hehe :D
Template website undangan digital ini saya sajikan secara public melalui github. Akses di sini:
Infrastruktur yang saya butuhkan tersedia di idcloudhost dengan biaya sewa yang terjangkau untuk resource yang sesuai kebutuhan saya. Dapatkan penawaran dan promo gratisnya dengan referral link berikut ini.
Free credit senilai Rp50.000 untuk sewa VPS
