Mata Kuliah: Aplikasi Web (TW2). Durasi: 120 menit (Tatap Muka). Target: Mahasiswa semester 2.
Tujuan Pembelajaran
- Menjelaskan konsep headless CMS
- Membedakan headless dan CMS tradisional
- Mengambil konten dari API headless CMS
- Menampilkan konten pada aplikasi web
Capaian Pembelajaran
Mahasiswa mampu menjelaskan arsitektur headless CMS dan mengambil serta menampilkan konten dari API-nya ke dalam aplikasi web.
Konsep Materi
Sebagai contoh, sebuah perusahaan berita dapat menggunakan headless CMS untuk menyimpan artikel. Penulis mengelola artikel melalui antarmuka, sementara website, aplikasi ponsel, dan bahkan widget dihitung sebagai beberapa tampilan yang masing-masing mengambil artikel yang sama melalui API. Jika perusahaan ingin merombak tampilan website, cukup mengubah aplikasi depannya tanpa menyentuh isi artikel yang sudah tersimpan, karena data dan tampilan telah terpisah.
Nilai lain yang ditawarkan headless CMS adalah kecepatan pengembangan di sisi tampilan. Karena pengembang tidak perlu menyentuh sistem pengelolaan konten, ia dapat fokus pada pengalaman pengguna dan memakai teknologi apa pun yang paling sesuai. Pendekatan ini juga memungkinkan tim konten dan tim teknologi bekerja secara paralel tanpa saling menunggu, sehingga pembaruan konten maupun tampilan dapat berjalan bersamaan dan lebih cepat hingga pengguna.
Penting untuk dipahami bahwa pemisahan ini juga memperkenalkan tantangan. Pengembang perlu merancang alur penampilan konten di sisi depan, mengelola pemuatan dan kesalahan saat mengambil data, serta memastikan konten ditampilkan dengan benar pada berbagai perangkat. Tantangan ini justru memberi kendali penuh kepada pengembang atas pengalaman pengguna dibandingkan CMS tradisional yang template-nya dipaksakan.
Pola headless juga mengajarkan pentingnya konsistensi struktur data. Karena konten disajikan dalam bentuk JSON, pengembang depan harus mengetahui struktur tersebut, misalnya nama bidang untuk judul, isi, dan gambar. Kesepakatan struktur data antara pengelola konten dan pengembang tampilan menjadi kunci agar integrasi berjalan mulus dan data tampil dengan benar.
Dengan memahami headless CMS, mahasiswa memperoleh wawasan bahwa pengelolaan konten dan pengembangan aplikasi dapat berjalan sebagai dua pekerjaan yang saling mendukung namun terpisah. Keterampilan ini sangat relevan dengan cara tim bekerja pada sistem berskala besar. Di akhir sesi, mahasiswa diharapkan terbiasa membaca dokumentasi API, sebab dokumentasi itulah jembatan antara sistem CMS dan aplikasi depan yang dibangun.
Sebagai penutup, mahasiswa diminta menghubungkan kembali materi ini dengan materi sebelumnya: REST API memberi teknologi komunikasi, JSON memberi bahasa pertukaran, dan headless CMS memberi contoh nyata bagaimana keduanya digunakan dalam mengelola konten. Melihat keterkaitan antar pertemuan memperkuat pemahaman bahwa pengetahuan yang dipelajari bukan kepingan terpisah, melainkan satu rangkaian yang saling menopang.
CMS (Content Management System) adalah sistem yang memungkinkan pengelola konten membuat dan mengelola isi tanpa menulis kode. CMS tradisional seperti WordPress menggabungkan pengelolaan konten dan tampilan dalam satu aplikasi, sehingga halaman disusun dan dirender sekaligus. Sementara itu, headless CMS memisahkan kedua hal tersebut: konten dikelola dan disimpan pada satu sistem, tetapi tidak memiliki tampilan tetap. Konten disajikan melalui API, dan tampilan dibangun oleh aplikasi lain yang mengambil data tersebut.
Kata headless merujuk pada pemisahan bagian tampilan dari bagian konten dan data. Pada arsitektur ini, penulis tetap menggunakan antarmuka untuk manajemen konten, namun pengunjung tidak pernah melihat antarmuka tersebut. Aplikasi depan, baik website, aplikasi seluler, maupun desktop, mengambil konten dari API dan menampilkannya dengan tampilannya sendiri. Kebebasan memilih tampilan ini menjadi keunggulan utama headless CMS.
Dengan memisahkan konten dari tampilan, headless CMS memberikan fleksibilitas besar. Konten yang sama dapat disajikan ke banyak platform sekaligus hanya dengan satu pengelolaan. Karena konten disajikan melalui API yang baku, pengembang dapat membangun antarmuka apa pun tanpa terikat teknologi tertentu, dan memperbarui tampilan tanpa mengubah konten yang ada. Arsitektur ini sangat sesuai dengan pola REST yang telah dipelajari.
Berbagai platform headless CMS tersedia, baik berbentuk layanan maupun yang dapat diinstal sendiri. Penggunaannya mengikuti pola yang sama: pengelola menulis konten, API menyediakan endpoint untuk mengambilnya, dan aplikasi depan menampilkan isi. Fitur umum meliputi pengelolaan pengguna, penyimpanan aset, dan publikasi konten. Kemampuan berintegrasi dengan API menjadikan headless CMS bagian penting ekosistem aplikasi web modern.
Langkah Praktik
- Daftar akun pada platform headless CMS yang menyediakan API gratis.
- Buat tipe konten dan tambahkan beberapa isi.
- Cari alamat API yang menyediakan daftar konten.
- Buka alamat tersebut dan lihat respons JSON.
- Bangun halaman frontend sederhana yang mengambil dan menampilkan konten dari API melalui fetch.
Latihan / Proyek
- Tambahkan bidang baru pada tipe konten dan amati perubahannya pada JSON
- Tampilkan konten dengan format tanggal dan gambar
- Susun daftar fitur berdasarkan jumlah kategori
- Bandingkan kelebihan headless dan CMS tradisional
- Rancang skenario penerapan headless CMS pada proyek akhir
Rekap & Tindak Lanjut
Mahasiswa memahami arsitektur headless CMS, perbedaannya dengan CMS tradisional, serta mampu mengambil dan menampilkan konten dari API-nya. Kemampuan ini menambah satu cara aplikasi memperoleh data secara dinamis.