Cara kerja TinaCMS

TinaCMS adalah sistem manajemen konten (headless CMS) yang dirancang agar konten tetap tersimpan sebagai file di dalam repositori Git Anda. Salah satu keunggulannya adalah fleksibilitas dalam memilih mode operasi — Anda dapat menggunakan layanan cloud-nya (TinaCloud) atau menjalankannya sendiri (self-hosted).

Frontend TinaCMS

Frontend pada TinaCMS memiliki dua komponen utama:

1. Portal Penyuntingan: Ini adalah sebuah portal yang berjalan pada port yang sama dengan situs web Anda, yang secara default dapat diakses melalui rute /admin/index.html.
2. Definisi Model Konten (Scheme): Di sinilah Anda mendefinisikan skema dan konfigurasi lainnya. Konfigurasi ini akan mengontrol kolom-kolom (fields) apa saja yang muncul saat Anda menyunting konten di situs web Anda. Gambar: Akses portal konten melalui rute /admin/index.html pada situs web Anda.

Contoh scheme berupa config.ts yang langsung diadaptasi dari zod.

{
 type: "image",
 name: "heroImage",
 label: "Hero Image",
 required: false,
},
{
 type: "boolean",
 name: "draft",
 label: "Draft",
 required: false,
 default: false,
},

Backend TinaCMS

TinaCloud

Backend pada TinaCMS merupakan API konten GraphQL Anda. Anggap saja ini sebagai sebuah basis data dan server yang mengindeks file-file Git Anda untuk pengambilan data yang efisien dan mengekspos endpoint.

Gambar: Data berpindah dari GitHub ke situs web Anda melalui Backend TinaCMS.

Pengaturan seperti ini dapat dicapai dengan menggunakan TinaCloud—layanan berbayar dari tim TinaCMS—atau dengan menggunakan basis data Anda sendiri. Selama pengembangan lokal, versi lokal dari server akan berjalan, memungkinkan pengalaman penyuntingan yang sama meskipun sedang luring (offline).

Self-hosted

Mode self-hosted memungkinkan Anda menjalankan backend TinaCMS tanpa menggunakan layanan TinaCloud. Dengan cara ini, seluruh komponen backend seperti autentikasi, database, dan koneksi ke Git dijalankan di server Anda sendiri.

Sumber data utama (source of truth) konten berada di dalam file Markdown atau JSON di repositori Git Anda.

Backend self-hosted hanya berfungsi sebagai data layer yang menyediakan API GraphQL dan manajemen metadata konten.

Komponen Utama

• API Endpoint Titik akses (misalnya route API di Next.js) yang menangani query GraphQL untuk konten Anda.
• Database Adapter Bertugas melakukan indexing dan querying terhadap file Markdown/JSON melalui database seperti MongoDB atau LevelDB.
• Git Provider Menyimpan perubahan konten ke repositori Git (melalui commit dan push otomatis).
• Auth Provider Menangani autentikasi pengguna editor. Anda bisa menggunakan sistem login sendiri atau mengintegrasikan sebagian layanan TinaCloud hanya untuk otorisasi.

Penutup

Karena sifat dan kerjanya yang mandiri, menyediakan API sendiri, TinaCMS tidak terikat (agnostik) pada framework manapun. Tina dapat dijalankan di Next, Gatsby Astro, Vue, Hugo dan lainnya.

Selain itu, TinaCMS juga tetap berfungsi normal ketika menggunakan remark dan rehype, yang mana sebagian CMS tidak kompatibel dengan itu.