Selamat Datang dan Mohon Maaf

Selamat datang dan mohon maaf jika aku menulis blog yang panjang lebar (mungkin untuk blog-blogku yang selanjutnya juga akan panjang lebar). Di sini aku hanya ingin mengucapkan selamat datang karena dari banyaknya website di dunia ini, kamu bisa menemukan websiteku. Aku mengapresiasi usahamu :). Selain itu, aku juga ingin membagikan latar belakang bagaimana awal mula aku membangun web ini dan kenapa ada sebuah blog. Menyadari bahwa aku adalah penulis yang idiot, maka mohon maaf jika urutan tulisan-tulisanku baik yang tulisan ini atau tulisan-tulisanku selanjutnya itu tidak tersusun rapi dan susah dimengerti, tapi aku akan berusaha sebaik mungkin.

Pertama

Awalnya, proyek ini lahir dari sebagai tempat untukku menampung perjalananku, sebagai tempat belajar, dan sebagai tempat yang nyaman dan bebas untukku mengekspresikan diri tanpa merasa tertekan. Karena aku rasa, aku sudah banyak belajar baik dari selama perkuliahan atau dari belajar mandiri. Aku rasa, akan percuma jika aku hanya mengetahui materi-materi itu tanpa menghasilkan sebuah projek. Sehingga aku memutuskan untuk membuat web pribadi lagi, ya lagi, berarti dulu udah pernah membuat web pribadi? memang sudah pernah, tapi aku rasa aku kurang puas dan perlu pembaruan banyak dan juga web pribadiku dahulu belom aku buat dengan framework dan kebanyakan hanya pakai html, css dan javascript. Oleh karena itu, seperti yang aku bilang sebelumnya, aku udah belajar berbagai materi, termasuk framework di waktu itu, sehingga aku perlu membuat ulang web pribadi dengan framework tersebut.

Oh ya, framework ini biasanya merujuk ke alat bantu atau kerangka kerja yang memudahkan membuat aplikasi baik frontend dan backend. Jadi untuk frontend ada frameworknya sendiri dan backend juga ada framworknya sendiri. Kemudian, framework yang aku pakai di awal ketika membuat web ini yaitu untuk frontend aku pakainya Vue.js dan untuk backend aku pakainya laravel. Meskipun saat ini aku udah ubah framework frontendnya menjadi Next.js (frameworknya React).

Blog

Aku banyak mengunjungi web-web pribadi milik para penggelut open source dan mereka kebanyakan memiliki blog pribadi yang menurutku mereka gunakan untuk membagikan ide mereka, pengalaman mereka, dan bahkan mereka membagikan tutorial yang berguna bagi orang lain. Alasan-alasan tersebut lah mengapa aku juga perlu menambahkan blog di webku ini. Tapi yang pasti isi blognya akan aku buat supaya sesuai dengan gayaku karena aku mempunyai motto:

original adalah kebanggaan saya.

Aku menyediakan toggle baca artikel dalam bahasa indonesia atau bahasa inggris yang secara default berbahasa indonesia. Jika ingin mengaktifkan baca dalam bahasa inggris kamu cukup checklist toggle yang ada di halaman blog. Aku sadar bahwa mungkin saja webku ini bisa saja dikunjungi oleh orang yang bukan dari indonesia, sehingga fitur ini akan sangat membantu, mengingat bahasa inggris adalah bahasa pengantar global yang paling sering digunakan oleh orang-orang beda negara.

Biasanya ketika aku membuat blog yaitu menentukan dulu topik yang ingin aku bagikan. Selanjutnya, aku memutuskan apakah akan ada versi bahasa inggrisnya atau tidak karena di kustom CMSku itu tidak wajib yang versi bahasa inggris. Anggap aja disini aku akan menulis blog dengan 2 versi bahasa, bahasa indonesia dan bahasa inggris. Inilah tahapannya:

aku akan menulisnya di google translate karena aku tidak mahir menulis blog dengan bahasa inggris (maaf). Di situ aku hanya perlu menulis dalam bahasa indonesia maka akan otomatis tertranslate menjadi bahasa inggris, meskupun begitu aku juga akan ngecek lagi apakah yang bahasa inggrisnya sesuai yang aku mau atau tidak.
Jika aku rasa udah puas dengan hasilnya, dari situ aku akan copy yang versi indonesia untuk artikel bahasa indonesia dan yang versi bahasa inggrisnya artikel bahasa inggris ke dalam kustom CMS yang aku buat.
Baru kemudian aku save dan akan muncul di halaman blog dengan 2 versi (kamu bisa memilih membaca versi yang mana dengan mengklik toggle baca dalam bahasa inggris).

Referensi

Mengingat kembali proses pembuatannya, sejak awal merancang versi pertama web ini, aku memang menghabiskan cukup banyak waktu mencari ide untuk halaman utama (landing page), sampai akhirnya menemukan konsep web design yang sangat menarik di Pinterest, dan juga menemukan web seorang penggelut open source projek Mas Anthony Fu dan web milik Frontend Developer Xuezhou Dai. Nah dari beberapa referensi itulah aku menyusun halaman-halaman webku. Terima kasih kepada Mas Anthony Fu dan pembuat design web yang aku temukan di pinterest, mungkin aku baru bisa mengucapkan terima kasih untuk kali ini, tapi kedepannya jika ada rezeki berlebih aku akan usahakan untuk menyeponsori kalian.

Cara Aku Buat Web Ini

Karena mungkin ada yang penasaran dengan bagaimana cara aku menyusun web ini dan bagaimana sih di balik layar webku ini, aku akan bagikan juga di sini.

Cari Alasan

Pertama kali jika aku ingin membuat sesuatu, apapun itu aku perlu alasannya terlebih dahulu, sehingga dengan alasan itu aku bisa dapat motivasi. Dari situ, motivasi bisa membantuku tetap semangat mengerjakan projek. Alasanku aku seperti yang aku sampaikan pada halaman about. Semua alasan asalkan bisa memotivasimu itu adalah yang perlu kalian temukan dahulu.

Design

Biasanya aku tidak akan langsung ngoding tanpa tahu designnya akan bagaimana karena menurutku akan mempersulitku dan menghambat projekku. Di sini, aku akan mengumpulkan berbagai referensi tema dari pinterest atau sumber lainnya di internet kira-kira kerangka bentukannya seperti apa. Setelah itu, aku biasanya menentukan main color dan genre webku vibesnya ingin seperti apa, fontnnya pakai apa, terus isinya tampilan apa aja.

Konsep Webku

Sebelumnya aku udah pernah membuat projek personal website juga, tapi masih statis dan jika aku ingin menambahkan sesuatu hal baru maka aku perlu ngoding lagi. Hal itu sangat menggangguku karena terlalu memakan waktu dan cukup ribet. Sehingga di projek ini aku membuatnya secara dinamis, artinya aku bisa menambah atau mengedit, menghapus sesuatu tanpa ngoding lagi. Aku akan bahas ini nanti.

Menggunakan AI

Di sini penggunaan AI udah tidak bisa dipisahkan lagi dari industri teknologi menurutku, karena bantuan AI sangat berarti bagiku, misalnya, AI bisa membantu mengecek typo dan error, mempercepat proses pembuatan software/web, mengurangi pekerjaan repetitif, brainstorming dan lain sebagainya. Tapi meskipun pakai AI, menurutku kita harus paham dulu dasar-dasar bahasa pemrograman web karena kode yang di berikan AI tidak selalu benar. Lalu, menurutku yang paling penting itu pakai AI juga ada aturannya dan tidak asal menyuruh AI karena jika kita tidak sesuai kaidah maka hasilnya pun kurang maksimal. Biasanya aku menggunakan AI dengan pendekatan Agentic Engineering jadi aku akan validasi hasil AI, testing, looping, sehingga tidak semerta-merta aku setuju aja dengan hasil AI. Selain itu, menurutku yang paling penting adalah diskusi dengan AI itu harus jelas supaya AI paham dengan ide kita. Aku biasanya akan menyampaikan ideku dahulu lalu minta dia mencarikan solusi lain jika mungkin ideku kurang best practice untuk kasus tersebut, lalu aku akan memutuskan akan menggunakan solusi yang terbaik untuk kasusku. Di sini aku lah yang menjadi pemandu bagi AI karena menurutku aku tidak ingin AI yang berbicara lebih keras dari pada aku, soalnya aku yang bertanggung jawab dari hasil kodenya jadi takutnya ketika aku ditanya soal projekku ini aku sendiri tidak paham.

Struktur Folder

Struktur folder untuk githubku / projekku ini menggunakan monorepo, single folder tapi di dalamnya ada bagian terpisah, yaitu bagian backend dan bagaian frontend.

Mulai dari Backend

Karena aku kerjakan sendirian, maka aku mulai dari backend dahulu, backend lah yang mengurusi logic bisnis web ku ini, dan sebelum memulai ngoding backend aku biasanya tentukan dahulu apinya apa aja untuk dikonsumsi frontend, kemudian, tablenya apa aja, relasinya bagaimana, lalu buat database mysql kosongan (untuk development) kemudian aku lanjut buat backendnya mulai dari aku buat migrationnya lalu aku buat modelnya berdasarkan table yang aku buat tadi, setelah itu, sebenarnya harusnya aku buat service layer untuk mengangani pure logic bisnisnya dan buat repository layer untuk menangani pencarian ke database karena dengan cara itu akan lebih bersih dan jelas pembagian tugasnya. Hal ini cukup aku sesali karena di projekku saat ini aku menggabungkan semua hal itu di dalam controller yang mana sebenarnya ini bukan merupakan best practice jika projek itu sudah mulai membesar karena tugas controller hanyalan menerima request dari client, lalu meneruskan ke service atau repository yang sesuai dan kemudian controller akan memberian responsenya ke client lagi. Aku cukup menyesali hal ini karena sebelum buat projek ini tuh kemarin aku belum belajar tentang architecture projek, sehingga aku gabungkan semua di controller yang mana sebenarnya tidak apa-apa jika projeknya kecil hingga medium. Setelah suatu fitur selesai biasanya aku akan membuat juga automation testing untuk menguji fitur - fitur itu beneran jalan, misalnya fitur admin berhasil menambah, mengedit, menghapus projek, nah itu aku testing karena dengan automation testing akan lebih cepat dibanding aku harus test manual dengan web. Di sini, projek ini pakai backend Laravel karena aku sambil memperdalam pemahamanku juga dan fiturnya lengkap terus dokumentasi laravel mudah dipahami menurutku.

Terus, webku ini ada 2 role, yaitu guest (user umum) dan admin (aku sendiri). Guest hanya bisa mengakses halaman-halaman public sedangkan admin bisa memanipulasi isi webnya, admin bisa memanipulasi mulai dari profile, experience, projek, sertifikat, skill, artwork, photo, blog, hingga kontak. Hal ini menjadi cukup lama selesainya karena logicnya cukup panjang juga. Kemudian karena di beberapa table di database itu ada properti foto dan file, maka untuk menyimpan hal itu di projekku supaya webku ini tetap bisa diakses semua orang, maka aku simpan semuanya di layanan cloud Cloudinary. Tinggal login dengan akun github lalu ambil api key dari situ terus di konfigurasikan di backend. Jika tidak seperti itu maka orang lain tidak akan mendapatkan img dan file yang ada di projekku ini, jadi Cloudinary itu dia yang bertugas menyimpan file dan fotonya kemudian url foto atau filenya disimpan di database neon.

Dan ketika udah selesai semua, aku akan aktifkan cors supaya api backend ini bisa di konsumsi frontend karena di laravel ini jika tidak di aktifkan maka jika backend mendapatkan url frontend mengakses apinya akan terjadi error CORS. Setelah itu aku biasanya akan melakukan end-to-end testing menggunakan Postman untuk memastikan lagi bahwa logic bisnisnya sesuai dengan cara aku import dokumentasi API-nya ke Postman.

Lanjut Frontend

Setelah backend menurutku sudah selesai, maka aku lanjut buat tampilan frontend, di sini frontend bertugas untuk tampilan web seperti apa. Kemudian aku juga harus memikirkan bagaimana struktur folder frontend supaya mudah di kelola, hingga memilih cara menghubungkan dengan backendnya mau dengan cara apa, aku hanya tahu dan familiar dengan 2 cara aja hingga saat ini, yaitu dengan cara Native Fetch API atau menggunakan library pihak ketiga, seperti Axios dan di luar sana masih ada beberapa cara menghubungkan frontend dengan backend (kalian bisa cari sendiri jika ingin). Di projek ini aku memilih menggunakan cara Native Fetch API. Lalu frontendnya aku pakai framework vuejs karena pada saat itu aku baru paham vuejs. Tapi baru-baru ini aku tulis ulang webku menggunakan Next.js. Kemudian, seperti yang aku bilang di awal bahwa designnya itu gabungan antara design yang aku temukan di Pinterest, web pribadi milik penggelut open source Mas Anthony Fu, dan web milik Frontend Developer Xuezhou Dai.

Dari situ aku dapat menggabungkan ketiga design menjadi satu bentuk utuh yang mana dari design Pinterest aku hanya mengambil design bagian visual tengahnya aja, untuk web Mas Anthony Fu, aku meniru banyak hal mulai dari style navbarnya, style blognya, style photo miliknya, hingga fitur ganti tema juga terinspirasi dari web milik Mas Anthony Fu. Kemudian untuk web milik Xuezhou Dai aku meniru animasi ganti-ganti karakter yang ada di halaman homepagenya. Sehingga, berikut ini adalah hasil akhirnya:

Oh iya info saja, bahwa foto yang dipajang di halaman homepage itu bisa diubah-ubah melalui panel admin, sehingga mungkin terkadang fotonya berubah-berubah.

Testing Setiap Selesai Satu Fitur

Setelah udah terintegrasi satu fitur aku biasanya tidak menguji secara manual karena akan melelahkan bagiku. Sehingga biasanya aku membuat unit test atau fitur test untuk memastikan bahwa fitur-fiturnya memang sesuai sebagaimana mestinya. Sebagai contoh, untuk fitur admin login, maka isi fitur test tersebut minimal harus mengetest bahwa:

Admin harus bisa login dengan email dan password yang benar.
Jika email atau passwordnya salah maka admin harusnya tidak bisa login dan admin menerima pesan error.

Mungkin masih banyak yang perlu di test selain 2 itu, jika kalian perlu melakukan test terhadap skenario-skenario lain ya silakan saja.

Aku lakukan hal ini ketika suatu fitur itu udah dibuatkan logicnya sehingga enaknya menurutku ya dibuatkan fitur test. Kemudian untuk fitur-fitur yang lainnya aku akan lakukan hal yang sama. Begitu terus hingga semua API yang ada di backend sudah terintegrasi dengan frontend.

CI/CD

Aku tambahkan Continous Integration dan Continous Development supaya ketika aku mengupdate sesuatu maka nanti akan menjalankan pengetesan jika lulus semua maka berarti sistem aman dan akan terdeploy secara otomatis ke provider yang aku gunakan. Di sini aku pakai vercel untuk frontend, render untuk backend/server, dan db neon untuk databasenya, aku akan jelaskan ini nanti.

Deploy

Setelah selesai, aku ingin projekku ini bisa diakses semua orang jadi aku deploy. Nah, tapi masalahnya aku tidak ingin keluar biaya dahulu untuk saat ini, sehingga aku ingin semuanya gratisan dahulu. Untuk deploy frontend aku terbiasa deploy ke Vercel. Kemudian, yang backend aku belum tahu mau deploy ke mana. Di sini aku berterima kasih kepada Google Gemini karena dari situ aku diajari deploy server/api gratis ke Render dengan cara integrasi dengan github lalu pilih repository, meskipun ada kekurangannya yaitu server akan tertidur jika tidak ada yang mengunjungi selama 15 menit terakhir (kalo tidak salah) tapi itu tidak masalah bagiku karena aku hanya tinggal berikan animasi loading aja di awal sambil menunggu server render bangun, jika udah bangun maka animasi loadingnya selesai dan web bisa diakses normal.

Namun, karena aku ingin Render tidak pernah tertidur aku bisa memanfaatkan uptimerobot, yaitu sebuah layanan yang menyediakan tier gratis selama tiap 5 menit akan memonitori / melakukan ping ke server render tadi. Caranya kita bisa buat api di backend yang akan dituju oleh UptimeRobot. Karena aku pakai laravel, sebenarnya bisa juga pakai api bawaan yang disediakan laravel untuk memantau server kita jalan tidak, yaitu endpoint /up. Nah, di UptimeRobot tinggal kita atur tujuannya ke endpoint itu sebagai tujuan UptimeRobot melakukan ping. Namun,pada pengaturan UptimeRobot, pilih tipe monitor HTTP(s) (bukan Ping ICMP biasa), karena Render memblokir Ping berbasis protokol ICMP pada free tier mereka. Gunakan metode HTTP GET untuk menembak alamat api render yang otomatis diberikan jika udah deploy server (backend) di render.

Perlu digaris bawahi bahwa meskipun trik ini bekerja dengan sempurna, ada satu jebakan aturan dari Render yang wajib kamu ketahui yaitu:

Batas 750 Jam Gratis: Render memberikan kuota Free Instance Hours sebesar 750 jam per bulan per akun.
Perhitungan Jam: 1 bulan penuh (31 hari x 24 jam) totalnya adalah 744 jam.
Risikonya:
- Jika di akun Render tersebut Anda hanya memiliki 1 aplikasi layanan web gratis, maka trik UptimeRobot aman digunakan. Aplikasimu akan menyala 24/7 penuh dan sisa kuota Anda masih cukup (750 - 744 = sisa 6 jam).
- Namun, jika kamu memiliki 2 atau lebih aplikasi gratis di akun yang sama, kuota 750 jam tersebut akan dibagi dan dipakai bersamaan. Memaksa satu aplikasi menyala 24/7 akan membuat kuota 750 jam kamu habis di pertengahan bulan, dan Render akan menonaktifkan (suspend) semua aplikasi gratismu hingga bulan berikutnya.

Selain itu untuk meningkatkan performa webku, aku juga perlu tambahakan caching di sisi frontend, yaitu teknik menyimpan data-data yang sering diakses itu di simpan di penyimpanan sementara (cache) seperti di simpan di localStorage supaya setiap kali user perlu data yang sama, maka Client tidak perlu mengambil ke server lagi dan cukup ambil data yang ada di cache tadi. Jika cache tidak dihapus secara manual oleh user, maka data yang ada di penyimpanan sementara tadi datanya akan tersimpan hingga batas waktu yang ditentukan. Kemudian aku juga aku memberi batas waktu kapan guest kalo refresh web akan ngambil data ke server. Langkah ini aku lakukan kemarin untuk framework Vue.js yang secara default itu Vue.js adalah SPA (Single Page Application) yang mana sisi clientlah yang merender HTML sehingga untuk melakukan cache konten bisa menggunakan localStorage dan membuat fungsi kustom useSWR supaya tersinkronisasi otomatis dengan localStorage.

Karena aku baru-baru ini mengubah seluruh kode dari framework Vue.js menjadi Next.js (framework React) maka caranya sedikit berbeda, hal ini karena Next.js secara default adalah SSR (Server Side Rendering) yang server akan mengirimkan HTML yang udah jadi sehingga jika ingin menyimpan cache ke localStorage sangat tidak disarankan karena bisa menyebabkan Hydration Error, yaitu kondisi dimana HTML tidak tahu apa-apa tentang isi localStorage (yang hanya ada di browser) karena HTML tersebut dibuat di server (SSR). Sehingga, praktik terbaik di Next.js adalah dengan menggunakan fitur revalidate (bagian dari Data Cache bawaan Next.js). Hal ini karena Next.js adalah framework berbasis server, melakukan cache langsung di sisi server jauh lebih efisien daripada memaksa browser mengunduh data lalu menyimpannya di localStorage.

Lalu untuk databasenya aku pakai database neon dari Vercel, jadi lewat projek yang kita deploy itu pergi ke menu storage, nah di situ tinggal buat database dan pilih neon karena gratis hingga saat ini dan dapatnya 0.5GiB. Menurutku itu lumayan gede sih dan lebih dari cukup untuk projekku ini. Nah dari situ, tantangan terbesarnya adalah menghubungkan ketiganya supaya bisa jalan tanpa error, mulai dari konfigurasi db neon aku tambahkan ke env di server Render, aku tambahkan env juga di vercel untuk base url supaya mengarah ke server api yang ada di Render. Setelah banyak percobaan error dan akhirnya sukses juga dapat terhubung, sehingga bisa dibilang webku ini sudah dinamis.

Maintenance

Setelah semuanya berfungsi maka aku hingga saat ini memaintain atau mengelola supaya tetap aman dan sering juga aku update tampilan webnya atau jika ada ide baru aku akan menambahkan fitur-fitur baru ke webku ini.

Mungkin, seperti itu aja alur aku membuat projek webku ini, semoga bisa memantu jika kalian ingin juga web kalian dinamis seperti yang aku rasakan, feel free ya untuk mencobanya jika penasaran.

Terima kasih sudah membaca!