Farih.co.id
Home Programming Bagaimana Mengintegrasikan CMS yang Contentful Dengan React

Bagaimana Mengintegrasikan CMS yang Contentful Dengan React

By - September 5, 2023, 1:10 pm

Table of content:

[Hide] [Show]

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


Baca Juga:

VIDEO MUO HARI INI

GULIR UNTUK MELANJUTKAN ISI

Baca Juga:

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


Baca Juga:

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.

Baca Juga:

Pendekatan ini memungkinkan pemisahan kekhawatiran antara pengelolaan konten dan presentasinya—memastikan Anda dapat menyesuaikan cara konten ditampilkan agar sesuai dengan aplikasi dan perangkat klien yang berbeda tanpa memengaruhi konten yang mendasarinya dan strukturnya.

Baca Juga:

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.

Baca Juga:

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

Baca Juga:

Buat Model Konten

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

Baca Juga:

  1. Mengunjungi Situs web Contentfulbuat akun, dan masuk untuk mengakses Anda ruang angkasa. Contentful mengatur semua konten terkait proyek dan aset terkait dalam ruang ini.
    Beranda Contentful di situs web resmi

    Baca Juga:

  2. Di sudut kiri atas ruang Anda, klik Model konten tab untuk membuka halaman pengaturan.
    Tab Model Konten di Ruang Contentful.

    Baca Juga:

  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.
    Tombol Tambahkan Tipe Konten pada halaman pengaturan model konten.

    Baca Juga:

  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.
    Formulir jendela Pop Tipe Konten baru pada halaman pengaturan model konten.

    Baca Juga:

  5. Selanjutnya, tentukan struktur konten itu sendiri. Klik Tambahkan bidang tombol untuk menambahkan beberapa bidang ke model konten Anda.
    Tombol Tambahkan bidang pada halaman pengaturan model konten

    Baca Juga:

    Berikut beberapa bidang yang dapat Anda gunakan untuk model:

    Baca Juga: 

     user_ID = type <number>
    first_name = type <text (short)>
    role = type <text (short)>
  6. Untuk menambahkan bidang, pilih jenis dari jendela pop-up jenis.
    Jendela Pop Up Types menampilkan beberapa tipe data.

    Baca Juga:

  7. Sediakan sebuah nama bidanglalu klik Tambahkan dan konfigurasikan tombol.
    Halaman Pengaturan Bidang

    Baca Juga:

  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.
    Halaman pengaturan konfirmasi untuk bidang model konten

    Baca Juga:

  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.
    Daftar bidang yang disertakan dalam model konten

    Baca Juga:

Tambahkan Konten

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

Baca Juga:

  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.
    Tab Konten di ruang Contentful.

    Baca Juga:

  3. Selanjutnya, tambahkan konten ke editor konten. Untuk setiap entri, ingatlah untuk mengklik Menerbitkan untuk menyimpannya ke ruang Anda.
    Editor Konten Contentful.

    Baca Juga:

Baca Juga:

Hasilkan Kunci API

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

Baca Juga:

  1. Klik Pengaturan menu tarik-turun di sudut kanan atas halaman dasbor. Kemudian, pilih Kunci API pilihan.
    Menu drop-down pengaturan Contentful CMS dengan daftar opsi pengaturan.

    Baca Juga:

  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.
    Halaman pengaturan kunci API CMS yang penuh konten

    Baca Juga:

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.

Baca Juga:

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

Baca Juga:

Anda dapat menemukan kode proyek ini di dalamnya GitHub gudang.

Baca Juga:

Baca Juga:

Buat Proyek Bereaksi

Untuk memulai, Anda dapat melakukan scaffold pada aplikasi React menggunakan create-react-app. Alternatifnya, siapkan proyek React menggunakan Vite. Setelah membuat proyek Anda, lanjutkan dan instal paket ini.

Baca Juga: 

 npm install contentful

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

Baca Juga: 

 VITE_REACT_APP_CONTENTFUL_SPACE_ID="<space-id>" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN="<content-preview-API-access-token>"
        

            

                Baca Juga:

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.

Baca Juga: 

 import { createClient } from "contentful";
export default useContentful = () => {
        

            

                Baca Juga:            

            

                                
                            

        


  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',
  });
        

            

                Baca Juga:            

            

                                
                            

        


  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}`);
    }
        

            

                Baca Juga:            

            

                                
                            

        


  };
  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.

Baca Juga:

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.

Baca Juga:

Perbarui File App.jsx

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

Baca Juga: 

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

            

                Baca Juga:            

            

                                
                            

        


  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
        

            

                Baca Juga:

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.

Baca Juga: 

 npm run dev

Besar! Anda seharusnya bisa mengambil dan merender konten yang Anda tambahkan di Contentful dari aplikasi React. Silakan dan tata gaya aplikasi React menggunakan Tailwind untuk memberikan tampilan yang fantastis.

Baca Juga:

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.

Baca Juga:

Baca Juga:

Comment
Share:
Next

Prev

Artikel Terkait

Leave a Reply

Your email address will not be published. Required fields are marked *

Ad

Don't show again Yes, I would!