Memasukkan Tulisan di Medium ke Website-mu Hanya Dengan HTML + Javascript

Beberapa minggu yang lalu, saya memikirkan untuk me-redesign website portofolio saya. Saya ingin menambahkan fitur seperti Medium yang dapat menulis dan menampilkan hasil tulisan saya. Namun, karena kesibukan dan hal lainnya, saya tidak sempat untuk memulai proses redesign dan akhirnya ide tersebut masih sebatas keinginan saja. Namun di sisi lain, Saya ingin sekali mewujudkan hal tersebut agar website portofolio saya tidak hanya sekedar menampilkan hasil karya website saya.

Saya teringat bahwa saya telah menulis beberapa tulisan di akun medium saya. Melihat hal tersebut, saya yakin bahwa ada caranya jika tulisan-tulisan di akun saya langsung ditampilkan di website portofolio saya. Dengan begitu, jelas-jelas tidak butuh effort banyak. Tidak perlu membuat fitur menulis dan langsung terintegrasi dengan data yang ada di Medium. Singkat cerita, akhirnya saya menemukan caranya dan akan membagikan kepada kalian semua.

Tulisan saya di medium yang tampil di website portofolio saya

Siapkan file HTML dan Javascript

Saya akan memberikan contoh cara pembuatannya dengan hasil website yang sangat sederhana. Oleh karena itu, setidaknya kalian perlu menyiapkan file HTML dan Javascript.

Struktrur folder:

folder-anda
--index.html
--script.js

Siapkan dan Hubungkan HTML dengan Javascript

Buat tag <ul> yang nantinya akan diisi dengan artikel-artikel yang didapatkan dari medium. Kemudian hubungkan file html dan javascript dengan tag <script> di bagian bawah.

File index.html:

Buat fungsi untuk mendapatkan tulisan di akun medium

Kita buat asyncronous function untuk mengambil data dari medium. Kenapa asyncronous? Karena pada fungsi yang akan kita buat, terdapat fetching data menggunakan fungsi fetch() yang mana kita perlu menggunakan await di depan pemanggilan fungsi fetch() untuk menunggu fungsi tersebut selesai dijalankan sebelum lanjut ke baris selanjutnya.

Pada kode di atas, saya memanggil API rss2json yang memiliki query parameter rss_url dengan nilai link medium saya. Kenapa butuh melalui rss2json? Hal tersebut dikarenakan jika kita mengakses “https://medium.com/feed/@albarranaufala” , data yang muncul adalah data dengan format RSS, sedangkan yang kita inginkan adalah data json untuk mempermudah kita dalam menggunakannya di Javascript.

Perbedaan RSS dan JSON

Tampilkan data ke HTML

Langsung saja kita tampilkan dengan memanipulasi DOM yang ada di HTML.

Jadi keseluruhan isi file script.js adalah sebagai berikut:

Hasilnya akan seperti ini:

Hasil Tampilan Website

Mudah bukan? Silakan dicoba di website kalian masing-masing dan jangan lupa tepuk tangannya hehe :)

Bye bye~~