Arsitektur Dokumentasi

Panduan ini memandu Anda membangun blog sederhana yang mengonsumsi API publik Tulis headless CMS. Anda akan mengambil posting yang diterbitkan dan menampilkannya di situs Anda sendiri — Tulis menangani konten, Anda menangani presentasi.

1. Siapkan kunci API dan ID workspace

Setiap permintaan API publik diautentikasi dengan dua informasi:

• Kunci API — token rahasia yang mengidentifikasi aplikasi Anda.
• ID Workspace — workspace (situs) tempat Anda membaca konten.

Keduanya tersedia dari dashboard Tulis Anda. Perlakukan kunci API seperti kata sandi: jangan pernah mengeksposnya di kode sisi klien (browser).

Semua panggilan publik memerlukan header ini:

Authorization: Bearer *** X-Workspace-ID: <WORKSPACE_ID>

2. Lihat posting terbaru

Lihat daftar posting yang diterbitkan dengan GET /v1/posts. Urutkan berdasarkan tanggal publikasi dan batasi hasil:

curl "https://YOUR_HOST/v1/posts?sort=published_at%20desc&per_page=10" \
  -H "Authorization: Bearer ***" \
  -H "X-Workspace-ID: <WORKSPACE_ID>"

Responsnya adalah daftar dengan paginasi di mana data berisi array objek posting.

3. Render daftar posting

Setiap objek posting mencakup title, excerpt, feature_image, dan slug. Buat daftar di mana setiap item menautkan ke /posts/{slug} di situs Anda:

const res = await fetch(
  "https://YOUR_HOST/v1/posts?sort=published_at%20desc&per_page=10",
  {
    headers: {
      Authorization: "Bearer <API_KEY>",
      "X-Workspace-ID": "<WORKSPACE_ID>",
    },
  }
);
const { data } = await res.json();

const list = data
  .map((post) => {
    const img = post.feature_image
      ? `<img src="${post.feature_image}" alt="${post.title}" />`
      : "";
    return `
      <article>
        ${img}
        <h2><a href="/posts/${post.slug}">${post.title}</a></h2>
        <p>${post.excerpt ?? ""}</p>
      </article>`;
  })
  .join("");

document.getElementById("posts").innerHTML = list;

Pengambilan sisi server sangat direkomendasikan. Karena kunci API harus tetap rahasia, lakukan permintaan ini dari server Anda (Node, lapisan data framework Anda, langkah build) dan kirimkan HTML yang sudah di-render ke browser. Jangan kirim <API_KEY> ke klien.

4. Render satu posting + SEO

Ketika pengunjung membuka /posts/{slug}, ambil satu posting dan render kontennya. Endpoint satu posting juga mengembalikan objek json_ld yang bisa Anda masukkan ke dalam <script type="application/ld+json"> untuk SEO:

const slug = "my-first-post";
const res = await fetch(
  `https://YOUR_HOST/v1/posts/${slug}`,
  {
    headers: {
      Authorization: "Bearer <API_KEY>",
      "X-Workspace-ID": "<WORKSPACE_ID>",
    },
  }
);
const { data, json_ld } = await res.json();

document.getElementById("post").innerHTML = data.content;

// Menyuntikkan data terstruktur untuk mesin pencari
const script = document.createElement("script");
script.type = "application/ld+json";
script.textContent = JSON.stringify(json_ld);
document.head.appendChild(script);

Payload json_ld mendeskripsikan artikel (judul, penulis, tanggal publikasi, dll.) sehingga mesin pencari dapat mengindeksnya dengan kaya.

Langkah selanjutnya

Untuk contoh yang lengkap dan dapat dijalankan dalam berbagai bahasa dan framework, lihat dokumentasi SDK.