Perjalanan Buat Website Sendiri (Part 3)

Jadi, bagaimana tentang Vue dan Nuxt? Bagaimana saya bisa membuat sistem back-end saya menjadi available di internet? Bagaimana akhir dari cerita pembuatan website blog ini? Berapa banyak biaya yang saya keluarkan untuk proyek ini? Langsung saja kita ke Tu-Li-San!

Bagi yang mau ke part lain, silakan pakai tautan di bawah ini.

• Bagian 1
• Bagian 2

Lanjut Belajar Sambil Mengode

Pertama kali belajar topik tentang webpage rendering ini, jujur saya kagum. Orang bisa ya kepikiran hal-hal seperti ini? Hebat memang dunia teknologi informasi zaman sekarang. Ego saya melambung lagi. Saya jadi tertarik menggunakan Nuxt.js. Kalau sekarang trennya seperti itu, bukankah lebih baik kalau saya bergerak cepat? Lalu, apakah saya akan mendapat masalah jika berpindah dari Vue ke Nuxt?

Di saat yang sama, karena pengetahuan saya bertambah mengenai SPA, saya jadi tahu mekanisme kerja Netlify. Netlify hanya mendukung hosting untuk aplikasi yang berfokus pada front-end. Jadi misalnya ada fungsi-fungsi yang perlu dilakukan back-end server, Netlify tidak bisa menanganinya. Karena itu, Netlify cocok untuk hosting aplikasi berbasis Vue. Pikiran saya waktu itu, Netlify harusnya tidak bisa digunakan untuk Server Side Rendering.

Saya jadi bimbang. Apakah saya harus benar-benar pindah ke Nuxt? Ya, sudahlah, pindah saja, hehehe.

Modal nekat didorong ego, saya pindah ke Nuxt. Kalau masalah Netlify, nanti Nuxt saya buat biar dia pakai Static Site Generation (SSG). Apa lagi itu? Ya kalau ini silakan cari sendiri ya. Intinya, Nuxt mendukung beberapa jenis rendering strategy. Jadi saya memang full ego hanya sekedar penasaran saja dengan Nuxt. Kalau nanti Nuxt tidak berjalan baik ya tidak apa-apa.

Saat pindah dari Vue ke Nuxt, ternyata sangat mudah. Syntax sangat mirip beserta fitur-fitur tambahan membuat Nuxt jadi menyenangkan. Proses penulisan kode pun juga lebih cepat.

Beberapa lamanya saya menulis kode, membuat program web blog. Masalah-masalah muncul dan membuat saya bingung. Dari sekian masalah, yang paling terasa sulit adalah manajemen komentar. Bukan pada kode atau Express atau Nuxt, tapi lebih kepada desain database-nya. Saya sampai perlu mengganti skema database untuk urusan komentar ini. Mengganti skema di MongoDB bukan masalah yang sulit sebenarnya, karena pada dasarnya MongoDB tidak memiliki skema. Yang menyebalkan adalah memperbarui data yang sudah tersimpan dengan skama lama. Perlu tulis script sendiri. Ya begitulah. Proyek ini saya niatkan untuk belajar. Salah ya sudah. Dikoreksi kalau bisa, kalau tidak ya diganti saja.

Tayang di Internet

Dengan berteman dengan waktu, saya akhirnya bisa menyelesaikan masalah-masalah tersebut. Blog saya jadi dan bisa dijalankan sacara lokal di laptop (horey...!). Yang kemudian harus dilakukan adalah, bagaimana untuk bisa menjadikannya tayang di internet.

Awalnya, saya ingin menyewa host di lembaga yang mudah dicari di internet. Harga yang ditawarkan biasanya ratusan ribu rupiah per tahun. Menurut saya, harga tersebut masih dalam batas kemampuan saya. Jika misal dalam satu tahun saya merasa proyek ini tidak ada manfaatnya, saya bisa berhenti bukan? Satu tahun saya rasa waktu yang cukup lama untuk bisa bereksperimen dan mencoba banyak hal mengenai web development.

Namun, saya ingat bahwa saat mengikuti kurikulumnya freeCodeCamp, saya menggunakan MongoDB Atlas. Karena pernah pakai, mudah sekali bagi saya untuk tiba-tiba mendapat banyak informasi mengenai layanan ini. Entah itu dari artikel di internet maupun video di Youtube. Apakah privasi kita terancam dalam dunia globalisasi sekarang ini? Anyway, MongoDB Atlas tidak hanya menyediakan layanan cloud database, tapi juga cloud functions atau serverless functions yang merupakan bagian dari Atlas App Services.

Apa itu cloud? Cloud adalah bahasa Inggris dari awan. Hahaha bercanda. Saya tidak terlalu paham juga sebenarnya, dan tidak berusaha mencari tahu. Bagi saya yang penting itu saya bisa menggunakan layanannya sih. Yang saya gunakan di sini adalah serverless functions. Lalu apa itu serverless functions?

Jadi, dengan Atlas App Services melalui serverless functions mereka (yang disewa dari Amazon Web Services), saya bisa membuat API yang biasanya diatur oleh server back-end. Perbedaannya jika dengan kita hosting adalah, kalau serverless functions kita tidak hosting. Ya iyelah, bagaimana sih? Ya maksudnya, developer atau bisa juga user layanan tersebut, mereka tinggal mengatur fungsionalitas back-end yang mereka inginkan, tanpa harus memikirkan masalah server. Server tetap ada dalam serverless functions, hanya saja yang mengatur adalah penyedia layanannya (dalam cerita ini mungkin Amazon Web Servicel). Terdengar terlalu indah? Memang ada kekurangannya. Kekurangannya adalah fungsionalitas back-end tidak benar-benar aktif setiap saat. Mereka aktif jika ada permintaan, dan dalam menjalankan setiap fungsi biasanya ada batas waktu, misalnya 5 sampai 30 detik. Mungkin ada kekurangan-kekurangan lain, tapi itu di luar pengetahuan saya untuk membagikan pada para pembaca yang budiman, cantik/ganteng, dan manis sekalian ini.

Sewaktu mengetahui Atlas App Services, saya merasa bimbang lagi. Saya sebenarnya masih suka dengan pilihan sewa hosting sendiri. Yang menggoda bagi saya adalah adanya free tier yang disediakan oleh pihak MongoDB Atlas. Dan tentunya, paket gratis mereka sudah sangat lebih dari cukup untuk menjalankan sebuah proyek blog pribadi sederhana. Namun saya perlu menulis banyak fungsi baru di sana. Belum lagi kalau sewaktu-waktu mereka mencabut free tier mereka, situasi jadi runyam juga.

Akhirnya, saya memutuskan pakai saja Atlas App Services, hehehe. Tulis lagi kode fungsi saya rasa tidak terlalu sulit karena saya bisa mendasarkannya pada kode Express.js yang telah saya buat. Kalau MongoDB Atlas tiba-tiba menghapus free tier, ya sudah hapus saja akun di sana, nonaktifkan blog. Kode saya yang pakai Express tidak saya hapus. Kode ini bisa saya gunakan fitur manajemennya, jadi saya tetap punya interface untuk mengatur blog. Jadi saya tidak harus menggunakan MongoDB Atlas dalam hal ini, yang mana fitur-fiturnya lebih kepada data-data di database. Mungkin saja di masa depan saya benar-benar akan sewa hosting, siapa tahu? Kodenya sudah ada kok.

Pindah-pindah Saja Terus!

Menggunakan serverless functions di Atlas App Services lumayan susah kalau boleh saya bilang. Ini pertama kali saya menyentuh hal-hal beginian, jadi saya perlu banyak baca dokumentasi. Dokumentasinya banyaaaak karena fiturnya juga banyaaaaak. Perlu sabar cari bagian per bagian dari halaman per halaman. Selain itu, saya sendiri yang belum pinter banget memakai sistem databese juga lumayan kebingungan mengenai konsep query dan lain-lain. Databese-nya yang NoSQL lagi, heleh-heleh. Untungnya dokumentasi memang lengkap. Komunitas pengguna MongoDB juga besar jadi di forum-forum banyak pembahasan masalah-masalah yang pada saat itu saya temui.

Masalah yang paling besar adalah perpindahan dari Mongoose ke MongoDB driver yang biasa. Jadi, karena kurikulum freeCodeCamp memakai Mongoose, saya juga memakai Mongoose di kode Express saya. Namun, Atlass App Services memakai driver buatan mereka (ya iyalah). Jadi penulisan ulang kode fungsi saya agak lebih ribet. Yang paling ribet adalah menggunakan konsep aggregate. Saya tidak tahu apa defininya, tapi yang jelas dengan aggregate saya bisa melakukan pengolahan data bersamaan dengan proses permintaan data. Jadi yang mengolah ya dari pihak driver-nya. Misalnya mencampur dua koleksi dokumen dan menyaring data setiap dokumen.

Mengapa saya perlu proses pengolahan seperti itu? Satu contoh saja ya, misalnya pada komentar pos. Ini adalah bagian paling membuat sakit kepala menurut saya. Komentar di blog saya ini memiliki beberapa aturan. Antara lain: adanya persetujuan sebelum bisa tayang, lalu memisahkan antara komentar utama dengan komentar balasan, lalu memiliki rujukan jika balasan itu bukan balasan langsung ke komentar utama ('@name' yang bisa diklik dan mengarahkan ke komentar rujukan). Sebuah sistem yang inspirasinya dari komentar Youtube. Nah, di sini saya perlu menggunakan aggregate untuk menyatukan data pos dengan data komentar saat pengunjung meminta halaman suatu pos, juga saya perlu menyaring dan hanya mengikutkan komentar yang sudah di setujui. Proses ini sebenarnya bisa dilakukan setelah permintaan atau query, yaitu di fungsi yang ditulis di JavaScript. Namun, cara ini tidak efisien karena akan menimbulkan beberapa query berlainan ke database. Ya kira-kira seperti itu.

Okey, setelah berulang kali mencoba dan mengetes, back-end di Atlas App Services saya ini akhirnya bisa memenuhi semua fungsi yang dibutuhkan. Akan tetapi (biar tidak 'namun' lagi), saya jadi takut dengan keamanan API. Apakah aman jika API ini tidak diberi pengamanan dan langsung terhubung ke front-end? Saya coba cari-cari di internet, tapi tidak ada jawaban yang jelas menurut saya. Biasanya, penjelasan tentang keamanan API itu untuk aplikasi yang punya user account. Misalnya media sosial atau e-commerce. Kalau untuk blog pribadi seperti ini ya biasanya tidak ada penjelasan pengamaman. Ya akhirnya saya memutuskan untuk memakai sistem autentikasi bawaan Atlas App Services dan Netlify serverless functions. Netlify punya serverless functions juga? Iya ternyata. Lalu mengapa harus pakai Atlas App Services? Karena Atlas App Services yang bisa terhubung dengan database. Mengapa perlu pakai Netlify serverless functions? Ya terserah saya donk, website punya saya ini! Hehehe, bercanda. Alasannya adalah karena saya ingin menyembunyikan API Atlas App Services.

Memakai Netlify Functions (sebutan bagi serverless functions mereka) tidak terlalu rumit sebenarnya. Yang agak perlu mikir itu mengetesnya. Saya perlu menginstal Netlify CLI dulu di komputer saya. Netlify CLI adalah, apa ya? Saya juga kurang paham. Intinya, program ini akan memberikan fitur-fitur dan fungsionalitas yang bisa digunakan untuk proyek yang akan menggunakan hosting Netlify. Salah satunya pengetesan yang ingin saya lakukan. Ya detailnya sebenarnya tidak ribet, hanya perlu paham bahwa Node dan NPM saya ini dari Snap, jadi tidak bisa untuk global jadi perlu pakai npx. Ya begitulah. Ada masalah vulnerability juga, tapi kalau forum, katanya itu memang normal, ya sudah. Ya begitulah, hehehe. Dengan semua pengalaman dan ilmu yang saya dapatkan, seperti yang sudah saya ceritakan sebelumnya, maka semakin lama semakin mudah bagi saya untuk menyelesaikan masalah-masalah yang timbul. Semoga para pembaca juga bertambah nih ilmu dan pengalamannya karena baca tulisan ini, hehehe.

Saya lalu deploy kode Nuxt saya ke Netlify. Ada sedikit masalah di bagian Netlify Funcions. Untungnya masalah tersebut bisa cepat ditemukan sumbernya. Terdapat perbedaan kode antara menggunakan server Netlify untuk hosting yang asli dengan yang lokal yang mengggunakan Netlify CLI. Jadi saya perbaiki dan deploy ulang. Setelah itu, tidak ada masalah yang berarti.

Semacam Ringkasan (dan yang Hampir Lupa)

Jadi pada titik ini, proyek ini sama dengan blog yang kalian baca sekarang. Ringkasannya, blog ini menggunakan Nuxt.js, Tailwind CSS, MongoDB Atlas App Services, dan Netlify dengan Netlify Functions. Tidak ada sepeserpun uang yang saya keluarkan untuk mendapatkan situs proyek saya ini tayang di internet. Namun, tidak asik kalau domain masih ada embel-embel '.netlify.app'. Untuk pengaturan domain, Netlify memberikan opsi 'custom domain', bisa dari mereka atau dari pihak lain. Kalau dari pihak Netlify, sulit juga untuk pembayarannya karena pasti perlu transaksi luar negeri. Lagian, pasti mahal juga. Karena itu saya beli domain di DomaiNesia yang paling murah yaitu ekstensi '.my.id'. Harganya ~15k untuk setahun pertama. Untuk pasang di Netlify, saya perlu baca artikel dari DomaiNesia dan dokumentasi Netlify. Ada sedikit ketidak akuratan di sana-sini, jadi perlu coba ini-itu, dan akhirnya 'naftena.my.id' bisa diakses semua orang. Netlify juga menyediakan sertifikasi gratis bekerja sama dengan Let's Encrypt dan prosesnya dilakukan secara otomatis. Saya sendiri tidak paham apa itu dan apa fungsinya sertifikat web, jadi saya sangat senang mengetahui saya tidak harus mengurusi masalah tersebut.

Oh iya hampir lupa. Karena sekarang saya pakai Atlas App Services, maka cara menangani static file jadi berbeda. Kalau bingung dengan istilah ini, jadi contoh saja ya, static file itu misalnya gambar-gambar yang dipakai di pos ini. Sebelumnya, saya pakai penyimpanan server, karena kalau sewa hosting 'kan seperti pakai komputer utuh. Namun, saya tidak bisa melakukan cara yang sama di serverless functions. Karena itu, berkas-berkas yang diperlukan mesti di upload ke penyedia layanan lain dulu. Istilahnya image hosting. Cari-cari, eh ternyata Google Photos bisa digunakan untuk melakukan ini. Ya sudah, saya lakukan seperti itu dan berjalan dengan lumayan baik. Mungkin terkadang akan error atau loading-nya lama, tapi tidak masalah untuk proyek kecil-kecilan ini. Besok-besok akan saya cari cara yang lebih baik lagi.

Sampai sini, mungkin akan ada perubahan-perubahan yang saya lakukan pada blog ini. Jadi mungkin blog yang kalian lihat sekarang ini tidak sama persis dengan apa yang ada di tulisan ini. Mungkin akan ada tulisan lain yang membahas perubahan-perubahan tersebut, mungkin juga tidak. Tinggal apakah ceritanya menarik untuk dibuat tulisan atau tidak.

Kesan dan Penutup

Sebelum mengakhiri, saya ingin memberikan kesan saya selama perjalan saya membuat website blog ini. Tim Henson pernah bilang bahwa kesalahan pemula yang paling sering dilakukan dalam bermain gitar adalah belajar berlari sebelum belajar berjalan. Well, saya rasa itu yang saya lakukan, meski bukan dalam belajar gitar. Sekalipun hal tersebut adalah kesalahan, tapi itu menyenangkan. Saya merasa memiliki motivasi saat saya melihat hasil dari kegiatan yang saya lakukan. Sekalipun memang ada stres yang besar saat saya tidak tahu apa-apa. Namun yang jelas, saat kita melakukan kesalahan seperti itu, kita harus fair dan mau untuk mengulang kembali belajar hal-hal yang kita lewati. Saya buktikan dengan kembali belajar JavaScript dan back-end dari awal. Jadi, saya merasa sedang berpetualang dalam dunia web development, dan saya tidak membatasi diri saya untuk mencoba berbagai macam hal. Saya tidak takut salah, dan tidak menekan/menuntut diri saya untuk menghasilkan sesuatu yang worth it. Prosesnya itu sudah worth it kok.

Akhirnya, kita sudah sampai di ujung tulisan ini. Bagian apa yang menurut kalian paling menarik dari perjalanan ini? Tulis di kolom komentar, ya. Kalian juga bisa tulis komentar tentang koreksi, kritik, saran, atau pertanyaan. Silakan, bebas-bebas saja. Terima kasih, dan sampai jumpa lagi di tulisan-tulisan lainnya!