Sistem manajemen konten (CMS) tanpa kepala memungkinkan Anda memisahkan fungsi manajemen konten dari logika yang menangani cara konten disajikan dalam aplikasi Anda.

Intinya, dengan mengintegrasikan CMS dalam aplikasi Anda, Anda dapat dengan mudah mengelola semua konten dalam satu aplikasi platform, dan kemudian, berbagi konten dengan lancar di berbagai saluran frontend, termasuk web dan seluler aplikasi.

Apa itu CMS Tanpa Kepala?

Sistem manajemen konten tanpa kepala memfasilitasi pembuatan dan pengelolaan konten dan aset digital, semuanya dalam satu platform. Tidak seperti CMS tradisional, konten dikirimkan melalui API seperti GraphQL API, sebuah alternatif dari RESTful API. Hal ini memungkinkan untuk berbagi konten di berbagai web dan aplikasi seluler.

Pendekatan ini memungkinkan pemisahan permasalahan antara pengelolaan konten dan penyajiannya—memastikan Anda dapat menyesuaikan caranya konten ditampilkan agar sesuai dengan aplikasi dan perangkat klien yang berbeda tanpa memengaruhi konten yang mendasarinya struktur.

Memulai Dengan CMS yang Berisi

Contentful adalah sistem manajemen konten tanpa kepala yang memungkinkan Anda membuat, mengelola, dan berbagi konten digital dan sumber daya media di seluruh aplikasi Anda menggunakan API-nya.

Untuk mulai menggunakan Contentful CMS, Anda harus membuat model konten terlebih dahulu.

Buat Model Konten

Ikuti langkah-langkah berikut untuk membuat model konten di Contentful.

1. Mengunjungi Situs web Contentful, buat akun, dan masuk untuk mengakses Anda ruang angkasa. Contentful mengatur semua konten terkait proyek dan aset terkait dalam ruang ini.
2. Di sudut kiri atas ruang Anda, klik Model konten tab untuk membuka halaman pengaturan.
3. Klik Tambahkan tipe konten tombol pada model konten pengaturan halaman. Tipe konten, dalam hal ini, mewakili model (struktur) untuk data yang akan Anda tambahkan ke Contentful.
4. Sekarang, masukkan a nama Dan keterangan untuk tipe konten Anda dalam modal pop-up. Contentful akan secara otomatis mengisi Pengidentifikasi Api bidang berdasarkan nama yang Anda berikan.
5. Selanjutnya, tentukan struktur konten itu sendiri. Klik Tambahkan bidang tombol untuk menambahkan beberapa bidang ke model konten Anda. Berikut beberapa bidang yang dapat Anda gunakan untuk model:

   user_ID = type 
   first_name = type 
   role = type 

6. Untuk menambahkan bidang, pilih jenis dari jendela pop-up jenis.
7. Sediakan sebuah nama bidang, lalu klik Tambahkan dan konfigurasikan tombol.
8. Terakhir, verifikasi properti bidang seperti yang diharapkan di konfirmasi halaman. Selain itu, saat masih berada di halaman konfirmasi, Anda dapat menentukan properti tambahan untuk bidang seperti aturan validasi apa pun.
9. Klik Mengonfirmasi untuk menambahkan bidang baru ke model.
10. Setelah Anda menambahkan semua bidang yang diperlukan ke model Anda, bidang tersebut akan muncul dalam format daftar, seperti yang ditunjukkan di bawah ini. Untuk menyelesaikan, klik Menyimpan tombol untuk menerapkan perubahan pada model konten.

Tambahkan Konten

Dengan model konten yang ada, lanjutkan dan tambahkan konten dengan mengikuti langkah-langkah berikut:

1. Arahkan ke Anda dasbor luar angkasa halaman dan klik Isi tab.
2. Pilih Jenis konten, model konten yang Anda buat, dari menu tarik-turun dalam bilah pencarian. Kemudian, klik Tambahkan entri tombol untuk menambahkan konten.
3. Selanjutnya, tambahkan konten ke editor konten. Untuk setiap entri, ingatlah untuk mengklik Menerbitkan untuk menyimpannya ke ruang Anda.

Hasilkan Kunci API

Terakhir, Anda perlu mengambil kunci API, yang akan Anda gunakan untuk membuat permintaan untuk mengambil data konten dari aplikasi React.

1. Klik Pengaturan menu tarik-turun di sudut kanan atas halaman dasbor. Kemudian, pilih Kunci API pilihan.
2. Klik Tambahkan kunci API tombol untuk membuka halaman pengaturan kunci API.
3. Contentful akan secara otomatis menghasilkan dan mengisi kunci API di halaman pengaturan kunci API. Anda hanya perlu memberikan nama untuk mengidentifikasi kumpulan kunci secara unik.

Untuk memanfaatkan Contentful API untuk mengambil data, Anda memerlukan ID ruang dan itu token akses. Perhatikan, ada dua jenis token akses: Kunci API Pengiriman Konten Dan API Pratinjau Konten. Di lingkungan produksi, Anda memerlukan kunci Content Delivery API.

Namun, dalam pengembangan, Anda hanya memerlukan ID ruang dan API Pratinjau Konten kunci. Salin kedua kunci ini dan mari selami kodenya.

Anda dapat menemukan kode proyek ini di dalamnya GitHub gudang.

Buat Proyek Bereaksi

Untuk memulai, Anda bisa perancah aplikasi React menggunakan create-react-app. Kalau tidak, menyiapkan proyek React menggunakan Vite. Setelah membuat proyek Anda, lanjutkan dan instal paket ini.

npm install contentful

Sekarang, buat a .env file di direktori root folder proyek Anda, dan tambahkan kunci API sebagai berikut:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Buat Hook useContentful

Dalam src direktori, buat folder baru dan beri nama kait. Di dalam folder ini, tambahkan yang baru gunakanContentful.jsx file, dan sertakan kode berikut.

import { createClient } from"contentful";
exportdefault useContentful = () => {
const accessToken = import.meta.env.VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN;
const spaceID = import.meta.env.VITE_REACT_APP_CONTENTFUL_SPACE_ID;
const client = createClient({
 space: spaceID,
 accessToken: accessToken,
 host: "preview.contentful.com",
 environment: 'master',
 });
const getUsers = async () => {
try {
const data = await client.getEntries({
 content_type: "users",
 select: "fields"
 });
const sanitizedData = data.items.map((item) => {
return {
 ...item.fields 
 };
 }); 
return sanitizedData;
 } catch (error) {
console.log(`Error fetching users ${error}`);
 }
 };
return { getUsers };
};

Kode kait khusus ini akan mengambil data dari ruang Contentful. Hal ini dicapai dengan, pertama, membuat koneksi ke ruang Contentful tertentu menggunakan token akses dan ID ruang yang disediakan.

Kemudian, pengaitnya menggunakan Klien yang puas dalam dapatkanPengguna berfungsi untuk mengambil entri dari tipe konten tertentu, dalam hal ini, kode mengambil entri dari pengguna tipe konten, khususnya hanya memilih bidangnya. Data yang diambil kemudian dibersihkan dan dikembalikan sebagai array objek pengguna.

Perbarui File App.jsx

Buka Aplikasi.jsx file, hapus kode React boilerplate, dan perbarui dengan kode berikut.

import { useEffect, useState } from"react";
import useContentful from"./hooks/useContentful";
const App = () => {
const [users, setUsers] = useState([]);
const { getUsers} = useContentful();
 useEffect(() => {
 getUsers().then((response) => response && setUsers(response));
 });
return (
 <>

Contentful CMS With React Tutorial</h1>
 {users.map((user, index) => (


 {user.userId} </p> 

 {user.firstName} </p>

 {user.role} </p>

 </div> 
 ))} 
 </>
 );
};
exportdefault App

Dengan gunakan Contentful kaitnya, Anda dapat mengambil dan menampilkan data konten dari Contentful CMS di browser. Terakhir, mulai server pengembangan untuk memperbarui perubahan yang dilakukan pada aplikasi.

npm run dev

Besar! Anda seharusnya bisa mengambil dan merender konten yang Anda tambahkan di Contentful dari aplikasi React. Silakan dan menata aplikasi React menggunakan Tailwinduntuk memberikan tampilan yang fantastis.

Manajemen Konten Menjadi Mudah

Memasukkan CMS tanpa kepala ke dalam sistem Anda dapat menyederhanakan proses pengembangan secara signifikan, memungkinkan Anda berkonsentrasi dalam membangun logika aplikasi inti; daripada menghabiskan banyak waktu untuk tugas pengelolaan konten.