Perjalanan Buat Website Sendiri (Part 1)

Jika kalian sudah sampai ke situs ini, kalian perlu tahu bahwa situs ini buatan saya sendiri. Situs ini bukan dari Wordpress ataupun Blogger, atau dari website builder lainnya. Saya yang buat front end dan back end-nya (ya tidak from scratch juga sih, pakai tools) dengan tangan saya sendiri. Nah di tulisan ini saya akan berbagi pengalaman saya mulai dari mengapa saya harus buat sendiri, proses belajar, kendala salama pembuatan, biaya yang saya keluarkan, hingga kesan-kesan saya selama perjalanan menganggumkan ini. Makanya baca sampai akhir ya.

Ini adalah bagian pertama dari tiga potongan cerita, untuk membaca bagian lain silakan langsung saja:

• Bagian 2
• Bagian 3

Awal Mula

Blog sudah merupakan trend yang ketinggalan zaman. Ya mungkin saya memang orang yang tidak suda update, hehehe. Saya sendiri sudah punya blog di sana-sini (kalau tidak salah) sejak saya SMA. Namun, saya memang bukan orang yang rajin hingga semua blog saya terbengkalai.

Lalu mengapa buat blog? Alasannya sebenarnya adalah untuk belajar coding. Awalnya saya hanya ingin belajar semua hal yang bisa dilakukan dengan Python. Bagi yang tidak tahu, Python itu adalah salah satu bahasa pemrograman yang paling populer saat ini. Saya suka dengan bahasa pemrograman ini karena (tidak bisa dipungkiri) syntax yang mudah dan (alasan yang lebih mulia adalah) komunitas yang besar. Komunitas ini menyebabkan banyak sekali library dan framework yang tersedia, salah satunya Django.

Bagi yang tidak tahu, library (menurut pengetahuan saya yang mungkin kurang valid) adalah seperangkat kode yang sudah dibuat/disusun orang dengan fungisonalitas tertentu sehingga orang lain bisa langsung memakainya tanpa harus buat dari awal. Sedangkan framework ya mirip-mirip sebenarnya, bedanya mungkin lebih ke cakupannya. Framework itu serangkaian kode yang kalau dipakai bisa langsung jadi program/aplikasi, tinggal si pemakai pilih-pilih pengaturan, tambah-tambah program sendiri, atau tambah plugin. Lah, apa lagi plugin? Ini kok tidak jadi cerita malah seperti tulisan buku paket sekolah?

Ya begitulah, kalau bingung mohon cari-cari sendiri ya, internet sudah mudah untuk cari informasi. Okey jadi saya belajar Django yang merupakan framework untuk membuat web. Pada saat itu saya baru selesai belajar TensorFlow (library Python untuk deep learning) dan saya memutuskan untuk belajar apapun yang penting Python. Padahal antara web development dan deep learning itu dua hal yang sangat berbeda. Kalau di masa SMA dulu mungkin saya tidak akan mau, karena saya idealis dan tidak suka bereksperimen. Namun sekarang saya sadar yang penting melakukan sesuatu, perkara nanti berguna apa tidak, ya, sebenarnya pasti berguna. Lho gimana sih? Maksudnya sekalipun tidak terpakai ilmu webnya, tapi pasti ilmu programming-nya pasti berguna.

Jadilah saya mengikuti salah satu tutorial paling terkenal di internet mengenai Pyhton, yaitu dari Real Python. Awalnya saya ikuti setiap langkah satu demi satu, tapi lama-lama saya merasa bosan dan juga kesulitan dengan materinya yang sangat luas. Jadi sembari saya belajar dari jalur belajar tersebut, saya juga belajar dari sumber-sumber lain yang menurut saya menarik. Hingga saya menemukan sebuah tutorial yang juga dari Real Python mengenai pembuatan blog dengan Django, Vue, dan GraphQL. Saat itu saya memutuskan sudahlah, coba saja tutorial buat blog itu dan rehat sejenak dari jalur belajarnya Real Python.

Belajar Pertama Kali

Saat itu saya kurang lebih paham mengenai konsep website dan blog secara umum. Website itu serangkaian dokumen yang bisa dibagikan diinternet, dan blog termasuk jenis website yang biasanya berisi konten-konten yang sering diperbarui/ditambah untuk bisa dinikmati orang secara umum. Dalam membuat website atau blog, kita bisa mengguanakan konsep static web atau dynamic web. Kalau statis, si web atau halaman yang dimaksud sudah jadi. Kalau kita ingin buka, si server tinggal kirim. Kalau dinamis, si web atau halaman yang dimaksud belum jadi. Saat kita minta web tersebut, si server susun dulu dokumennya, baru setelah jadi dia kirim ke kita. Mungkin kita bisa buat perumpamaan beli kue. Kalau statis, kuenya sudah ada nih di toko kue, tinggal kita beli dan kuenya kita bawa pulang atau dikirim ke rumah kita (atau rumah orang terkasih [ini kok terlalu detail ya, kan cuma perumpamaan {ya ga pa pa lah, saya memang suka detail orangnya}]). Namun kalau dinamis itu seperti kita pesen dulu.

Nah, kalau buat blog pakai Django, otomatis konsepnya adalah dinamis. Data blogpost - termasuk penulis, kategori, tag, dll - akan disimpan dalam sebuah sistem database. Melalui Django, orang yang terkait bisa menulis, menambah, mengurangi, menyunting apa-apa saja dalam database itu. Selain itu, Django juga bisa menghasilkan data yang dapat digunakan untuk menampilkan blog, entah itu berupa dokumen/halaman jadi atau data mentah yang disebarkan melalui internet. Django juga bertugas mengatur data dari pengunjung blog, misal komentar dan like.

Sampai di sini, semua informasi yang saya sampaikan di atas sudah saya ketahui sebelumnya. Maka mulailah saya belajar hal-hal yang baru. Dimulai dari front end, back end, dan API. Mengapa saya harus belajar ketiga hal tersebut? Karena tutorial yang saya ikuti tadi memakai ketiga konsep tersebut. Secara kasar sebenarnya saya tahu definisi ketiganya, tapi secara lengkap saya tidak paham. Mengapa tidak jadi satu saja sih semuanya, tidak usah dibagi-bagi seperti itu? Namun saya ikuti saja tutorialnya.

Jadi ternyata Django akan jadi back end, lalu Vue akan jadi front end, dan GraphQL sepertinya bisa saya sebut API (?). Kemudian saya ikuti semua lines of code yang tertera dalam halaman web di tutorial. Untuk Django seingat saya tidak ada kendala yang berarti. Buat aplikasi, pengaturan admin, membuat model data, tidak ada yang baru sejauh ini. GraphQL sendiri adalah benda terpisah dari Django jadi perlu instal plugin. Kelebihan Django khususnya dan Python umumnya terlihat di sini bahwa sudah ada orang yang buat perantara antara Django dan GraphQL, jadi seseorang amatir seperti saya tinggal ikuti langkah-langkah di sebuah webpage tutorial dan sesekali (dengan malasnya) membuka web dokumentasi.

Lain cerita dengan Vue. Saat itu, saya belajar bahwa Vue itu ditulis dengan JavaScript. Saya menyadari seberapa sombongnya saya, mengkuti tutorial tanpa bekal yang cukup. Sakit kepala bener deh! Mulai dari instalasi sudah ketemu masalah. Library atau framework yang menggunakan JavaScript perlu dipasang melalui Node.js dan NPM. Perlu diketahui komputer yang saya gunakan menggunakan Linux tepatnya Debian, dan untuk menginstal Node terdapat beberapa cara. Cara pertama (yang sebenarnya lebih saya suka) adalah dengan menggunakan sudo apt install-nya Debian. Saat saya menggunakan cara ini, ternyata versi Node yang saya dapat lumayan lama. Hal ini membuat Vue versi terbaru tidak bisa diinstal. Kebetulan pada saat itu Vue versi 3 sudah rilis. Okey, muspro, cara pertama gagal lalu apa cara kedua? Cara kedua adalah dengan download kode Node lalu build di komputer. Jujur saya merasa cara ini terlalu repot dan saya merasa malas melakukannya. Jadi saya memilih cara ketiga yang sedikit 'kotor' bagi para pecinta Linux murni, yaitu dengan Snap package. Dengan Snap saya bisa memilih banyak versi Node termasuk yang terbaru. Memang ada kendala lain dengan proses instalasi Vue karena muncul versi Vue dan Node terbaru yang beda dari tutorial, tapi tidak masalah. Intinya, kesulitan dalam penginstalan Vue bisa teratasi.

Setelah itu, saya ikuti lagi tutorialnya, baris per baris. Jujur saya tidak bisa memahami apa yang saya tulis sendiri. JavaScript punya syntax yang mirip dengan C memang, tapi terdapat banyak titik dua, ada simbol '=>' yang aneh, juga keyword asing seperti 'new', dll. Ditambah lagi dengan Vue yang mencampurkan antara JavaScript, HTML, dan CSS. Yah mungkin tidak bisa disebut saya ikuti tutorial itu baris per baris, tapi lebih ke kata per kata, simbol per simbol. Pada akhirnya, semua kode sudah saya tulis dan saya siap mencoba menjalankannya. Namun, sesuatu yang sebenarnya mudah diduga terjadi. Vue.js tidak menampilkan halaman blog! Masalah utama adalah pada Apollo. Benda itu adalah semacam plugin yang membuat Vue bisa menggunakan GraphQL. Di program yang saya tulis Apollo tidak terdeteksi, atau mungkin juga terdeteksi tapi tidak bisa digunakan. Padahal, Django saya bekerja dengan baik. Mulailah saya mencari-cari cara mengatasinya.

Dimulai dari baca dokumentasi Apollo. Di sana terdapat banyak halaman yang di setiap halamannya banyak kode. Saya buka satu demi satu, mencari mana yang relevan. Saat saya sudah ketemu, saya coba di kode saya. Tidak terjadi apa-apa. Saya coba lagi kode di halaman yang lain. Malah error. Saya cari di Google, buka setiap pertanyaan StackOverflow, tulis masing-masing jawabannya, tidak berhasil. Cari lagi di blog-blog dengan unsur tutorial, masih tidak bisa. Saya super stres tidak hanya karena saya tidak menemukan jawabannya, tapi juga karena saya terpaksa baca kode program asing dan mengira-ira apa maksudnya. Memangnya siapa suruh ikut tutorial pakai JavaScript? Arogansi dan kesombongan saya menuai hukumannya.

Setelah lama mencari-cari, tulis kode dari sana-sini, hapus-tulis kode yang sama dari dokumentasi berharap cuma salah ketik, tidak ada hasil dan program Vue tetap tidak bisa menampilkan isi blog. Akhirnya saya berdamai dengan ego dan arogansi saya. Saya uninstall Vue yang sudah saya instal sebelumnya.

Apa saya menyerah? Tentu tidak! Ego saya berdamai dengan keadaan, bukan menyerah dengan tantangan. Ingat kalau saya pakai Vue dengan versi yang berbeda dengan tutorial? Jadi inilah saat saya mulai patuh dengan setiap tulisan di tutorial. Saya uninstall Vue 3 untuk selanjutnya saya instal Vue 2 alias versi Vue yang tertera di tutorial. Lalu saya jalankan, dan hasilnya? Berhasil! Data blog bisa tertampil di browser! Saya lega. Saya mulai bernafas normal dan tenang.

Proses belajar ini saya teruskan tapi tidak sampai selesai. Bagian-bagian yang tidak saya teruskan adalah di tampilan. Saya merasa saya ingin fokus ke back end dan intregasinya melalui API, karena masalah desain-mendesain saya tidak terlalu pandai. Saya bukan orang yang nyeni jadi saya tidak terlalu tertarik dengan front end.

Belajar Kedua Kali

Petualangan saya di depan layar laptop berlanjut saat suatu hari saya melihat sebuah halaman web menarik di layar handphone. Chrome di Android punya fitur Discover yang akan menampilkan halaman-halaman webwsite di browser home yang relevan dengan kebiasaan kita browsing. Pada saat itu, muncul sebuah tutorial dari Eric's Dev Blog mengenai pembuatan aplikasi dengan Django dan Vue. Saya buka situs tersebut. Ternyata, tutorial tersebut menggunakan Django, Vue dan surprise surprise, GraphQL. Sama persis dengan tutorial dari Real Python, yang membedakan adalah waktu terbitnya dan tentunya penulisnya. Eric's Dev Blog lebih baru yang berarti, versi library dan framework yang diguanakan juga lebih baru.

Bagi yang masih bingung, aplikasi itu bukan hanya terbatas pada aplikasi Android atau aplikasi HP ya. Aplikasi itu ya program, orang bisa menggunakannya untuk melakukan suatu tugas. Aplikasi bisa ada di komputer, HP, atau juga web di internet.

Okey, sekalipun asal-usulnya tidak jelas, saya memutuskan untuk mengerjakan tutorial Eric's Dev Blog tersebut. Yang jelas, isi tutorialnya kurang lebih sama dengan Real Python jadi sudah ada pengalaman jadi kalau ada masalah tidak akan terlalu bingung. Yang pasti, ego saya seperti mendapat hadiah karena sebelumnya sudah bersedia berdamai, hehehe.

Di sisi Django, tidak ada kendala sama sekali. Tutorialnya jelas lengkap dengan penjelasan yang diperlukan. Sedikit ada perbedaan di sana-sini tapi tidak ada masalah saat dijalankan satu per satu. GraphQL di sisi Django pun juga tidak ada masalah.

Lalu bagaimanan dengan Vue? Ternyata lancar juga. Sama seperti di bagian Django, tutorial ini memberikan kode dan penjelasanan yang cukup dan tidak bertele-tele sehingga mudah diikuti. Memang terkadang perlu cari-cari di internet, tapi itupun juga mudah karena penjelasan tutorial sudah memberikan kata kunci yang diperlukan. Akhirnya setelah semuanya selesai, data-data blog bisa tertampil di browser melalui Django, GraphQL, dan Vue. Pengalaman yang lebih menyenangkan dibandingkan waktu pertama kali belajar.

Kedengarannya sedikit membosankan ya? Mungkin. Namun ada beberapa hal yang terjadi selama saya mengerjakan tutorial ini. Yang pertama adalah saya berkenalan dengan Tailwind CSS. Tutorial Eric's Dev Blog memang hampir sama dengan Real Python, tapi ada satu tambahan yaitu penggunaan Tailwind. Saya tidak sebut ini sebagai perbedaan besar karena sifatnya murni hanya tambahan. Kalau tidak diikuti sebenarnya tidak apa-apa. CSS dalam web development adalah kode yang berfungsi untuk mengatur gaya tampilan website. Jadi tanpa CSS ya situsnya tetap ada, hanya mungkin kurang enak dipandang.

Kejadian kedua adalah saya menemukan channel Youtube Fireship. Channel ini memberikan penjelasan mengenai web development tapi dengan cara yang lebih menarik dibandingkan dengan channel lain yang pernah saya tonton. Mengapa? Kerena videonya singkat-singkat. Lah, bukannya malah jadi pusing ya lihatnya? Tidak, coba saja sendiri. Memang mungkin saat bicara masalah video tutorial, maka yang terlintas di pikiran kita adalah video berjam-jam atau satu playlist yang berisi puluhan video. Kita cenderung menginginkan penjelasan yang detail dan selangkap-lengkapnya. Salah satu yang saya sukai adalah freeCodeCamp. Channel ini bisa dikatakan channel tutorial pemrograman yang paling lengkap di Youtube. Lalu mengapa Fireship dengan videonya yang singkat-singkat jadi menarik?

Well kita tetap perlu penjelasan yang detail dan lengkap. Hal ini berlaku juga untuk video yang berjam-jam lamanya. Namun, di titik tertentu kita perlu gambaran menyeluruh atau benang merah dari suatu hal. Entah itu sebelum, selama, atau setelah kita belajar. Contoh misalnya bermain catur. Ada banyak aturan bermain catur. Jika kita misalnya langsung belajar aturan-aturan tersebut, kita akan bingung. Misal gerakan pion maju satu langkah ke depan, kuda jalan 'L' ke mana saja, gajah jalan miring, menteri jalan ke mana saja, raja jalan ke mana saja satu langkah, dll. Tanpa kita tahu tujuannya, maka ya sulit membayangkan itu semua untuk apa. Begitu juga dengan pragramming. Kadang kita perlu tahu program macam apa yang mungkin kita buat dari sebuah library atau framework, kelebihannya, batasannya-batasannya, dan juga yang sangat penting adalah komunitas penggunanya. Jadi saya merasa Fireship sangat membantu saya dalam memahami arah dan memperluas pandangan saat mengerjakan sebuah proyek.

Saat bertemu dengna Tailwind dan Fireship, saya jadi tambah tertarik dengan web development. Saya yang tadinya tidak terlalu tertarik dengan front-end, jadi mulai mempelajari lebih dalam. Tutorial Eric's Dev Blog memang lumayan jelas dan lengkap, tapi masalah tampilan memang tidak tercakup semua. Ia hanya memberikan tautan GitHub tempat proyek itu tersimpan. Saya yang merasa kurang jika hanya meniru di GitHub akhirnya coba mencari template sendiri. Kemudian saya menemukan sebuah template yang bagus yang menggunakan Tailwind buatan TailGrids.

Saya coba terapkan di hasil kerja saya dari tutorial dan berhasil! Tidak ada kendala yang berarti, hanya memang kodenya rumit yang kadang saya tidak terlalu paham mengapa harus ini dan itu.

Bersambung ke bagian 2.