Posted by Pelajari cara menghubungkan Contentful CMS dengan aplikasi React Anda untuk manajemen konten yang efisien dan pembangunan situs web yang dinamis.
Sistem manajemen konten (CMS) berbasis headless memungkinkan Anda untuk memisahkan fungsi manajemen konten dari logika yang mengatur cara konten tersebut disajikan dalam aplikasi Anda.
Pada dasarnya, dengan mengintegrasikan CMS dalam aplikasi Anda, Anda dapat dengan mudah mengelola konten dalam satu platform, dan kemudian dengan lancar membagikan konten tersebut melalui berbagai saluran frontend, termasuk aplikasi web dan seluler.
Apa Itu Headless CMS ?
Sebuah sistem manajemen konten Headless memudahkan pembuatan dan pengelolaan konten dan aset digital dalam satu platform. Berbeda dengan CMS tradisional, konten disampaikan melalui API seperti GraphQL API, sebagai alternatif untuk RESTful API.
Ini memungkinkan berbagi konten di berbagai aplikasi web dan seluler. Pendekatan ini memungkinkan pemisahan tanggung jawab antara manajemen konten dan presentasinya, memastikan Anda dapat menyesuaikan tampilan konten sesuai dengan berbagai aplikasi klien dan perangkat tanpa memengaruhi konten dasar dan strukturnya.
Cara Memulai Contentful CMS di React
Contentful merupakan sistem manajemen konten tanpa kepala yang memungkinkan Anda membuat, mengelola, dan berbagi konten digital dan sumber daya media Anda di seluruh aplikasi Anda menggunakan API-nya.
Untuk memulai menggunakan Contentful CMS, Anda pertama-tama perlu membuat model konten.
Membuat sebuah Model Konten
Ikuti langkah-langkah berikut untuk membuat model konten di Contentful.
- Kunjungi situs web Contentful, buat akun, atau login untuk mengakses ruang Anda.
Contentful mengorganisir semua konten terkait proyek dan aset terkait dalam ruang-ruang ini. - klik tab Model konten untuk membuka halaman pengaturan.
- Pada halaman pengaturan model konten, klik tombol Tambah tipe konten. Sebuah tipe konten, dalam hal ini, mewakili model (struktur) untuk data yang akan Anda tambahkan ke Contentful.
- Selanjutnya, masukkan nama dan deskripsi untuk tipe konten Anda dalam modal pop-up.
Contentful akan secara otomatis mengisi bidang Api Identifier berdasarkan nama yang Anda berikan. - Selanjutnya, tentukan struktur kontennya sendiri. Klik tombol Tambahkan bidang untuk menambahkan beberapa bidang ke model konten Anda.
Berikut beberapa field yang dapat Anda gunakan untuk model tersebut:
user_ID = type <number>
first_name = type <text (short)>
role = type <text (short)>- Untuk menambahkan bidang, pilih “Tipe” dari jendela pop-up tipe.
- Berikan nama bidang, lalu klik tombol Tambah dan konfigurasikan.
- Terakhir, pastikan properti bidang sesuai dengan yang diharapkan pada halaman konfirmasi.
Selain itu, selama masih berada di halaman konfirmasi, Anda dapat menentukan properti tambahan untuk bidang seperti aturan validasi. - Klik Konfirmasi untuk menambahkan bidang baru ke model.
Setelah Anda menambahkan semua bidang yang diperlukan ke model Anda, mereka akan muncul dalam format daftar, seperti yang ditunjukkan di bawah ini.
Untuk menyelesaikan, klik tombol Simpan untuk menerapkan perubahan ke model konten.
Menambahkan Konten
Dengan model konten yang telah dibuat, lanjutkan dan tambahkan kontennya dengan mengikuti langkah-langkah berikut:
- Pergilah ke halaman dasbor space Anda dan klik tab Konten.
- Pilih Jenis Konten, yaitu model konten yang telah Anda buat, dari menu drop-down dalam bilah pencarian.
- Kemudian, klik tombol Tambah entri untuk menambahkan konten.
- Kemudian, tambahkan konten ke editor konten. Ingatlah untuk mengklik Publikasikan untuk menyimpannya ke space Anda.
Generate API Keys
Terakhir, Anda perlu mengambil kunci API Anda, yang akan digunakan untuk membuat permintaan guna mengambil data konten dari aplikasi React.
- Klik menu drop-down Pengaturan di sudut kanan atas halaman dasbor. Kemudian, pilih opsi kunci API.
- Klik tombol Add API key untuk membuka halaman pengaturan API keys
- Contentful akan secara otomatis menghasilkan dan mengisi API Key di halaman pengaturan API Key.
Anda hanya perlu memberikan nama untuk mengidentifikasi secara unik Key set tersebut, Agar dapat memanfaatkan API Contentful untuk mengambil data, diperlukan ID ruang dan token akses.
Harap dicatat bahwa terdapat dua jenis token akses: API Key Pengiriman Konten dan API Key Pratinjau Konten.
Di lingkungan produksi, Anda akan membutuhkan API Key Pengiriman Konten. Namun, dalam pengembangan, Anda hanya memerlukan ID ruang dan API Key Pratinjau Konten. Salin kedua Key ini dan mari kita masuk ke dalam kode.
Membuat React Project
Untuk memulai, Anda dapat membuat sebuah aplikasi React menggunakan create-react-app.
Sebagai alternatif, Anda dapat menyiapkan React Project menggunakan Vite. Setelah membuat proyek Anda, lanjutkan dengan menginstal paket ini.
npm install contentful
Selanjutnya, buat file .env di direktori root folder proyek Anda, dan tambahkan API Key seperti berikut:
VITE_REACT_APP_CONTENTFUL_SPACE_ID="<space-id>"
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN="<content-preview-API-access-token>"Buatlah Hook useContentful
Di dalam direktori src, buat folder baru bernama hooks. Di dalam folder ini, tambahkan file baru dengan nama useContentful.jsx, dan sertakan kode berikut.
import { createClient } from "contentful";
export default 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 kustom hook ini akan mengambil data dari ruang Contentful. Ini mencapainya dengan, pertama, menjalin koneksi ke ruang Contentful tertentu menggunakan token akses dan ID ruang yang disediakan.
Selanjutnya, hook ini menggunakan klien Contentful dalam fungsi getUsers untuk mengambil entri dari tipe konten tertentu, dalam hal ini, kode mengambil entri tipe konten pengguna, khususnya hanya memilih bidang-bidangnya.
Data yang diambil kemudian dinormalisasi dan dikembalikan sebagai array objek pengguna.
Perbarui berkas App.jsx
Buka berkas App.jsx, hapus kode React bawaan, dan gantilah 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 (
<>
<h1>Contentful CMS With React Tutorial</h1>
{users.map((user, index) => (
<div key={index}>
<p> {user.userId} </p>
<p > {user.firstName} </p>
<p > {user.role} </p>
</div>
))}
</>
);
};
export default App
Dengan menggunakan hook useContentful, Anda dapat mengambil dan menampilkan data konten dari Contentful CMS di peramban.
Terakhir, mulai server pengembangan untuk memperbarui perubahan yang telah dilakukan pada aplikasi.
npm run dev
Lanjutkan dan desain aplikasi React menggunakan Tailwind untuk memberikan tampilan yang lebih bagus.
Anda bisa melihat langsung kodingan diatas di Github contentful.
Baca Juga Cara Menggunakan ChatGPT API OpenAI untuk Pemula
Kesimpulan
Mengintegrasikan Headless CMS ke dalam sistem Anda dapat secara signifikan mempermudah proses pengembangan, memungkinkan Anda fokus pada membangun logika aplikasi inti daripada menghabiskan banyak waktu untuk tugas-tugas pengelolaan konten.
Itulah artikel tentang Contentful CMS di React, semoga artikel ini dapat menyelesaikan permasalahan anda.
