Τα συστήματα διαχείρισης περιεχομένου χωρίς κεφαλή (CMS) σάς δίνουν τη δυνατότητα να αποσυνδέσετε τις λειτουργίες διαχείρισης περιεχομένου από τη λογική που χειρίζεται τον τρόπο με τον οποίο παρουσιάζεται το περιεχόμενο στις εφαρμογές σας.

Ουσιαστικά, ενσωματώνοντας ένα CMS στην εφαρμογή σας, μπορείτε εύκολα να διαχειριστείτε το περιεχόμενο σε ένα μόνο πλατφόρμα και, στη συνέχεια, μοιραστείτε απρόσκοπτα το περιεχόμενο σε διάφορα κανάλια frontend, συμπεριλαμβανομένου του ιστού και των κινητών εφαρμογές.

Τι είναι ένα Headless CMS;

Ένα σύστημα διαχείρισης περιεχομένου χωρίς κεφάλι διευκολύνει τη δημιουργία και τη διαχείριση περιεχομένου και ψηφιακών στοιχείων όλα σε μία πλατφόρμα. Σε αντίθεση με το παραδοσιακό CMS, το περιεχόμενο παραδίδεται μέσω API όπως π.χ GraphQL API, μια εναλλακτική λύση στα RESTful API. Αυτό καθιστά δυνατή την κοινή χρήση του περιεχομένου σε διάφορες εφαρμογές ιστού και κινητών.

Αυτή η προσέγγιση επιτρέπει τον διαχωρισμό των ανησυχιών μεταξύ της διαχείρισης περιεχομένου και της παρουσίασής του — διασφαλίζοντας ότι μπορείτε να προσαρμόσετε τον τρόπο το περιεχόμενο εμφανίζεται για να ταιριάζει σε διαφορετικές εφαρμογές και συσκευές πελατών χωρίς να επηρεάζεται το υποκείμενο περιεχόμενο και το περιεχόμενο του δομή.

Ξεκινώντας με Περιεχόμενο CMS

Το Contentful είναι ένα σύστημα διαχείρισης περιεχομένου χωρίς κεφάλι που σας επιτρέπει να δημιουργείτε, να διαχειρίζεστε και να μοιράζεστε τους πόρους ψηφιακού περιεχομένου και πολυμέσων στις εφαρμογές σας χρησιμοποιώντας τα API του.

Για να ξεκινήσετε να χρησιμοποιείτε το Contentful CMS, πρέπει πρώτα να δημιουργήσετε ένα μοντέλο περιεχομένου.

Δημιουργήστε ένα μοντέλο περιεχομένου

Ακολουθήστε αυτά τα βήματα για να δημιουργήσετε ένα μοντέλο περιεχομένου στο Contentful.

1. Επίσκεψη Ο ιστότοπος του Contentful, δημιουργήστε έναν λογαριασμό και συνδεθείτε για να αποκτήσετε πρόσβαση χώρος. Το Contentful οργανώνει όλο το περιεχόμενο που σχετίζεται με το έργο και τα σχετικά στοιχεία μέσα σε αυτούς τους χώρους.
2. Στην επάνω αριστερή γωνία του χώρου σας, κάντε κλικ στο Μοντέλο περιεχομένου καρτέλα για να ανοίξετε τη σελίδα ρυθμίσεων.
3. Κάντε κλικ στο Προσθήκη τύπου περιεχομένου κουμπί στο μοντέλο περιεχομένου Ρυθμίσεις σελίδα. Ένας τύπος περιεχομένου, σε αυτήν την περίπτωση, αντιπροσωπεύει το μοντέλο (δομή) για τα δεδομένα που θα προσθέσετε στο Contentful.
4. Τώρα, πληκτρολογήστε a όνομα και περιγραφή για τον τύπο περιεχομένου σας στο αναδυόμενο παράθυρο. Το Contentful θα συμπληρώσει αυτόματα το Αναγνωριστικό Api πεδίο με βάση το όνομα που παρέχετε.
5. Στη συνέχεια, ορίστε την ίδια τη δομή περιεχομένου. Κάντε κλικ στο Προσθήκη πεδίου κουμπί για να προσθέσετε μερικά πεδία στο μοντέλο περιεχομένου σας. Ακολουθούν μερικά πεδία που μπορείτε να χρησιμοποιήσετε για το μοντέλο:

   user_ID = type 
   first_name = type 
   role = type 

6. Για να προσθέσετε πεδία, επιλέξτε το τύπος από το αναδυόμενο παράθυρο τύπους.
7. Παρέχουν μια όνομα πεδίουκαι, στη συνέχεια, κάντε κλικ στο Προσθήκη και διαμόρφωση κουμπί.
8. Τέλος, επαληθεύστε ότι οι ιδιότητες του πεδίου είναι όπως αναμένεται στο επιβεβαίωση σελίδα. Επιπλέον, ενώ βρίσκεστε ακόμα στη σελίδα επιβεβαίωσης, μπορείτε να καθορίσετε πρόσθετες ιδιότητες για τα πεδία, όπως τυχόν κανόνες επικύρωσης.
9. Κάντε κλικ Επιβεβαιώνω για να προσθέσετε το νέο πεδίο στο μοντέλο.
10. Αφού προσθέσετε όλα τα απαραίτητα πεδία στο μοντέλο σας, θα εμφανιστούν σε μορφή λίστας, όπως φαίνεται παρακάτω. Για οριστικοποίηση, κάντε κλικ στο Αποθηκεύσετε κουμπί για να εφαρμόσετε τις αλλαγές στο μοντέλο περιεχομένου.

Προσθέστε το Περιεχόμενο

Με το μοντέλο περιεχομένου στη θέση του, προχωρήστε και προσθέστε το περιεχόμενο ακολουθώντας αυτά τα βήματα:

1. Πλοηγηθείτε στο δικό σας διαστημικό ταμπλό σελίδα και κάντε κλικ στο Περιεχόμενο αυτί.
2. Επίλεξε το Τύπος περιεχομένου, το μοντέλο περιεχομένου που έχετε δημιουργήσει, από το αναπτυσσόμενο μενού στη γραμμή αναζήτησης. Στη συνέχεια, κάντε κλικ στο Προσθήκη καταχώρισης κουμπί για προσθήκη περιεχομένου.
3. Στη συνέχεια, προσθέστε το περιεχόμενο στο συντάκτης περιεχομένου. Για κάθε καταχώρηση, θυμηθείτε να κάνετε κλικ Δημοσιεύω για να το αποθηκεύσετε στον χώρο σας.

Δημιουργία κλειδιών API

Τέλος, πρέπει να πάρετε τα κλειδιά API, τα οποία θα χρησιμοποιήσετε για να υποβάλετε αιτήματα ανάκτησης των δεδομένων περιεχομένου από την εφαρμογή React.

1. Κάντε κλικ στο Ρυθμίσεις αναπτυσσόμενο μενού στην επάνω δεξιά γωνία της σελίδας του πίνακα ελέγχου. Στη συνέχεια, επιλέξτε το Κλειδιά API επιλογή.
2. Κάντε κλικ στο Προσθήκη κλειδιού API κουμπί για να ανοίξετε τη σελίδα ρυθμίσεων κλειδιών API.
3. Το Contentful θα δημιουργήσει και θα συμπληρώσει αυτόματα τα κλειδιά API στη σελίδα ρυθμίσεων κλειδιών API. Χρειάζεται μόνο να δώσετε ένα όνομα για να προσδιορίσετε μοναδικά το σύνολο των κλειδιών.

Για να χρησιμοποιήσετε Contentful API για την ανάκτηση δεδομένων, χρειάζεστε το ID χώρου και το διακριτικό πρόσβασης. Σημειώστε ότι υπάρχουν δύο τύποι διακριτικών πρόσβασης: Κλειδί API παράδοσης περιεχομένου και API προεπισκόπησης περιεχομένου. Σε περιβάλλον παραγωγής, θα χρειαστείτε το κλειδί Content Delivery API.

Αλλά, κατά την ανάπτυξη, χρειάζεστε μόνο το αναγνωριστικό χώρου και το API προεπισκόπησης περιεχομένου κλειδί. Αντιγράψτε αυτά τα δύο κλειδιά και ας βουτήξουμε στον κώδικα.

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό GitHub αποθήκη.

Δημιουργήστε ένα React Project

Για να ξεκινήσετε, μπορείτε σκελετό μια εφαρμογή React χρησιμοποιώντας το create-react-app. Εναλλακτικά, ρυθμίστε ένα έργο React χρησιμοποιώντας το Vite. Αφού δημιουργήσετε το έργο σας, προχωρήστε και εγκαταστήστε αυτό το πακέτο.

npm install contentful

Τώρα, δημιουργήστε ένα .env αρχείο στον ριζικό κατάλογο του φακέλου του έργου σας και προσθέστε τα κλειδιά API ως εξής:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Δημιουργήστε το useContentful Hook

Στο src κατάλογο, δημιουργήστε έναν νέο φάκελο και ονομάστε τον αγκίστρια. Μέσα σε αυτόν τον φάκελο, προσθέστε έναν νέο useContentful.jsx αρχείο και συμπεριλάβετε τον ακόλουθο κώδικα.

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

Αυτός ο προσαρμοσμένος κώδικας αγκίστρου θα ανακτήσει τα δεδομένα από τον Περιεχόμενο χώρο. Αυτό το επιτυγχάνει, πρώτα, δημιουργώντας μια σύνδεση με έναν συγκεκριμένο χώρο περιεχομένου χρησιμοποιώντας το παρεχόμενο διακριτικό πρόσβασης και το αναγνωριστικό χώρου.

Στη συνέχεια, το άγκιστρο χρησιμοποιεί το ικανοποιημένος πελάτης μέσα στο getUsers λειτουργία για ανάκτηση καταχωρήσεις συγκεκριμένου τύπου περιεχομένου, σε αυτήν την περίπτωση, ο κώδικας ανακτά τις καταχωρήσεις του χρήστες τύπο περιεχομένου, επιλέγοντας συγκεκριμένα μόνο τα πεδία τους. Τα δεδομένα που λαμβάνονται στη συνέχεια απολυμαίνονται και επιστρέφονται ως μια σειρά από αντικείμενα χρήστη.

Ενημερώστε το Αρχείο App.jsx

Ανοιξε το App.jsx αρχείο, διαγράψτε τον κωδικό React του boilerplate και ενημερώστε τον με τον ακόλουθο κώδικα.

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

Με την χρήσηΠεριεχόμενος Μπορείτε να ανακτήσετε και να εμφανίσετε τα δεδομένα περιεχομένου από το Contentful CMS στο πρόγραμμα περιήγησης. Τέλος, ξεκινήστε τον διακομιστή ανάπτυξης για να ενημερώσετε τις αλλαγές που έγιναν στην εφαρμογή.

npm run dev

Εξαιρετική! Θα πρέπει να μπορείτε να ανακτήσετε και να αποδώσετε τα περιεχόμενα που προσθέσατε στο Contentful από την εφαρμογή React. Προχώρα και στυλ της εφαρμογής React χρησιμοποιώντας το Tailwindγια να του δώσει μια φανταστική εμφάνιση.

Η διαχείριση περιεχομένου έγινε εύκολη

Η ενσωμάτωση ενός χωρίς κεφάλι CMS στο σύστημά σας μπορεί να εξορθολογίσει σημαντικά τη διαδικασία ανάπτυξης, επιτρέποντάς σας να επικεντρωθείτε στη δημιουργία της βασικής λογικής της εφαρμογής. αντί να ξοδεύετε σημαντικό χρόνο σε εργασίες διαχείρισης περιεχομένου.