Päättömän sisällönhallintajärjestelmän (CMS) avulla voit irrottaa sisällönhallintatoiminnot logiikasta, joka käsittelee sisällön esittämistä sovelluksissasi.

Pohjimmiltaan integroimalla CMS: n sovellukseesi voit helposti hallita sisältöä yhdellä kertaa alustalla ja jakaa sitten sisältöä saumattomasti eri käyttöliittymäkanaville, mukaan lukien verkko ja mobiili sovellukset.

Mikä on päätön CMS?

Päätön sisällönhallintajärjestelmä helpottaa sisällön ja digitaalisen omaisuuden luomista ja hallintaa yhdellä alustalla. Toisin kuin perinteinen sisällönhallintajärjestelmä, sisältö toimitetaan API: iden, kuten GraphQL API, vaihtoehto RESTful API: ille. Tämä mahdollistaa sisällön jakamisen eri verkko- ja mobiilisovelluksissa.

Tämä lähestymistapa mahdollistaa huolenaiheiden erottamisen sisällönhallinnan ja sen esittämisen välillä, mikä varmistaa, että voit räätälöidä miten sisältö näytetään sopimaan eri asiakassovelluksiin ja -laitteisiin vaikuttamatta taustalla olevaan sisältöön ja siihen rakenne.

Contentful CMS: n käytön aloittaminen

Contentful on päätön sisällönhallintajärjestelmä, jonka avulla voit luoda, hallita ja jakaa digitaalista sisältöäsi ja mediaresurssejasi sovelluksissasi sen API-liittymien avulla.

Jotta voit aloittaa Contentful CMS: n käytön, sinun on ensin luotava sisältömalli.

Luo sisältömalli

Seuraa näitä ohjeita luodaksesi sisältömallin Contentfulille.

1. Vierailla Contentfulin verkkosivusto, luo tili ja kirjaudu sisään päästäksesi tiliisi tilaa. Contentful järjestää kaiken projektiin liittyvän sisällön ja siihen liittyvän omaisuuden näissä tiloissa.
2. Napsauta tilan vasemmassa yläkulmassa -kuvaketta Sisällön malli -välilehteä avataksesi asetussivun.
3. Klikkaa Lisää sisältötyyppi -painiketta sisältömallissa asetukset sivu. Sisältötyyppi edustaa tässä tapauksessa mallia (rakennetta) datalle, jota lisäät Contentfuliin.
4. Syötä nyt a nimi ja kuvaus sisältötyypillesi ponnahdusikkunassa. Contentful täyttää automaattisesti Api-tunniste kenttään antamasi nimen perusteella.
5. Määritä seuraavaksi itse sisältörakenne. Klikkaa Lisää kenttä -painiketta lisätäksesi pari kenttää sisältömalliisi. Tässä on muutamia kenttiä, joita voit käyttää mallissa:

   user_ID = type 
   first_name = type 
   role = type 

6. Voit lisätä kenttiä valitsemalla tyyppi tyypit ponnahdusikkunasta.
7. Tarjota kenttä nimija napsauta sitten Lisää ja määritä -painiketta.
8. Varmista lopuksi, että kentän ominaisuudet ovat odotetusti vahvistus sivu. Lisäksi vahvistussivulla ollessasi voit määrittää kenttiin lisäominaisuuksia, kuten mahdollisia vahvistussääntöjä.
9. Klikkaus Vahvistaa lisätäksesi uuden kentän malliin.
10. Kun olet lisännyt kaikki tarvittavat kentät malliisi, ne näkyvät luettelomuodossa alla olevan kuvan mukaisesti. Viimeistele napsauttamalla Tallentaa -painiketta ottaaksesi muutokset käyttöön sisältömallissa.

Lisää Sisältö

Kun sisältömalli on käytössä, jatka ja lisää sisältö seuraavasti:

1. Navigoi omaan tilaa kojelautaan sivu ja napsauta Sisältö -välilehti.
2. Valitse Sisältötyyppi, luomasi sisältömalli, hakupalkin avattavasta valikosta. Napsauta sitten Lisää merkintä -painiketta lisätäksesi sisältöä.
3. Lisää seuraavaksi sisältö kohteeseen sisällön editori. Muista klikata jokaisen merkinnän kohdalla Julkaista tallentaaksesi sen omaan tilaan.

Luo API-avaimia

Lopuksi sinun on tartuttava API-avaimesi, joita käytät pyyntöjen hakea sisältötietoja React-sovelluksesta.

1. Klikkaa asetukset avattavasta valikosta kojelautasivun oikeassa yläkulmassa. Valitse sitten API-avaimet vaihtoehto.
2. Klikkaa Lisää API-avain -painiketta avataksesi API-avaimien asetussivun.
3. Contentful luo ja täyttää automaattisesti API-avaimet API-avaimien asetussivulla. Sinun tarvitsee vain antaa nimi, jotta voit tunnistaa avainjoukon yksilöllisesti.

Jotta voit käyttää Contentful API: ita tietojen hakemiseen, tarvitset tilan tunnus ja pääsytunnus. Huomaa, että käyttöoikeuksia on kahdenlaisia: Content Delivery API -avain ja Content Preview API. Tuotantoympäristössä tarvitset Content Delivery API -avaimen.

Mutta kehitysvaiheessa tarvitset vain tilatunnuksen ja Content Preview API avain. Kopioi nämä kaksi avainta ja sukeltakaamme koodiin.

Löydät tämän projektin koodin siitä GitHub arkisto.

Luo React-projekti

Pääset alkuun rakentaa React-sovellus käyttämällä luo-react-sovellusta. Vaihtoehtoisesti perustaa React-projekti Viten avulla. Kun olet luonut projektisi, jatka ja asenna tämä paketti.

npm install contentful

Luo nyt a .env tiedosto projektikansiosi juurihakemistoon ja lisää API-avaimet seuraavasti:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Luo useContentful Hook

Vuonna src hakemistoon, luo uusi kansio ja anna sille nimi koukut. Lisää tähän kansioon uusi useContentful.jsx tiedosto ja sisällytä seuraava koodi.

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

Tämä mukautettu koukkukoodi hakee tiedot Sisältötilasta. Se saavuttaa tämän luomalla ensin yhteyden tiettyyn Contentful-tilaan käyttämällä toimitettua käyttöoikeustunnusta ja tilatunnusta.

Sitten koukku käyttää Tyytyväinen asiakas sisällä getUsers noutotoiminto merkinnät tietyn sisältötyypin, tässä tapauksessa koodi hakee merkinnät käyttäjiä sisältötyyppiä, valitsemalla vain niiden kentät. Haettu data desinfioidaan ja palautetaan käyttäjäobjektien joukkona.

Päivitä App.jsx-tiedosto

Avaa App.jsx tiedosto, poista tiivistelmä React-koodi ja päivitä se seuraavalla koodilla.

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

Kanssa useContentful koukku, voit hakea ja näyttää sisältötiedot Contentful CMS: stä selaimessa. Käynnistä lopuksi kehityspalvelin päivittääksesi sovellukseen tehdyt muutokset.

npm run dev

Loistava! Sinun pitäisi pystyä hakemaan ja renderöimään Contentfuliin lisäämäsi sisältö React-sovelluksesta. Mene eteenpäin ja tyyli React-sovellus käyttämällä Tailwindiaantaa sille upea ulkonäkö.

Sisällönhallinta on helppoa

Päättömän sisällönhallintajärjestelmän sisällyttäminen järjestelmään voi merkittävästi virtaviivaistaa kehitysprosessia, jolloin voit keskittyä ydinsovelluslogiikan rakentamiseen. sen sijaan, että käyttäisit paljon aikaa sisällönhallintatehtäviin.