Headless CMS: Fremtiden for mobilindhold

Hvad er en Headless CMS?

I takt med at digitale produkter fortsætter med at udvikle sig, gør det indhold, vi forbruger, også. Et skalerbart, cross-platform indholdsstyringssystem er afgørende for at sikre et produkts vækst. Traditionelle CMS-systemer tilbyder komforten ved at have indhold, redigeringsgrænseflade, skabeloner og brugerdefineret kode samlet i ét miljø. Men med ændringerne i denne mobile æra er det ikke længere nok. Vi har brug for en ny type CMS - en, der kan gøre indhold tilgængeligt via enhver kanal. Her kommer en Headless CMS ind i billedet. En headless CMS giver dig fordelene ved at administrere indhold og levere det til enhver kanal. API'en gør indhold tilgængeligt via enhver kanal og på enhver enhed ved hjælp af dine foretrukne værktøjer og programmeringssprog, plus det giver et højere niveau af sikkerhed og meget bedre skalerbarhed.

Hvad betyder det i praksis?

Hvad sker der, når du fjerner frontend fra et CMS? Den største forskel er, at et website ikke kan bygges med en headless CMS alene. Med en traditionel CMS sker alt på samme sted. En headless CMS har ikke funktionerne, der lader dig bygge dit site – den har ingen site-temaer eller skabeloner. For at bruge en headless CMS skal du først bygge et site eller en app, eller en anden oplevelse, og derefter bruge CMS'ens API til at integrere dit indhold i det.

Hvorfor skal du bekymre dig om Headless?

En headless CMS kommer med en API-venlig tilgang, som gør det muligt at publicere indhold via en API (enten RESTful eller GraphQL). Den giver dig mulighed for at bruge den samme API til at levere indhold på tværs af forskellige kanaler som Android- eller iOS-apps, smartwatches, AR/VR osv. En headless CMS giver udviklere mulighed for hurtigt at udnytte kreativitet. Med en traditionel CMS kan ændringer være tidskrævende; for eksempel, for at finjustere en del af dit site, skal du genimplementere hele CMS'en. Med en headless CMS kan du foretage ændringer i din frontend uden at påvirke backend-infrastrukturen, hvilket sparer dig tid og ressourcer, hvilket gør det meget bedre.

Traditionel vs. Headless CMS: Fordele og ulemper

Det kan være kompliceret at vælge mellem en headless og en traditionel CMS. Sandheden er, at de begge har potentielle fordele og ulemper.

Traditionel CMS Fordele

• Tillader nem tilpasning. Mange har drag-and-drop, hvilket gør det nemt for personer uden programmeringserfaring at arbejde problemfrit med dem.
• Det er nemmere at opsætte dit indhold på en traditionel CMS, da alt hvad du behøver (indholdsstyring, design osv.) allerede er tilgængeligt.

Traditionel CMS Ulemper

• Den koblede frontend og backend resulterer i mere tid og penge til vedligeholdelse og tilpasning.
• Traditionel CMS, f.eks. WordPress, er stærkt afhængig af plugins og temaer, som kan indeholde ondsindet kode eller fejl og sænke hastigheden på hjemmesiden eller bloggen.

Headless CMS Fordele

• Da frontend og backend er adskilt fra hinanden, gør det det muligt for dig at vælge den frontend-teknologi, der passer til dine behov. Dette giver også udvikleren fleksibilitet under udviklingsfasen.
• Platforme (blogs, websites osv.) bygget med headless CMS kan implementeres til at fungere på forskellige displays som web, mobil, AR/VR og så videre.

Headless CMS Ulemper

• De giver dig besværet med at administrere backend-infrastrukturer, opsætning af præsentationskomponenten af dit site, app.
• De kan være dyrere at implementere – omkostningerne ved at bygge en brugervenlig platform med analyse er høje sammenlignet med at bruge en traditionel CMS.

Bedste Anvendelsesscenarier for Headless CMS

Headless CMS kan have følgende anvendelsesscenarier:

• Static Site Generators (f.eks. Gridsome, Gatsby): Mange Jamstack-sites oprettet med statiske site-generatorer som Gridsome, Hugo eller Gatsby bruger den headless CMS til at administrere indhold. De kan ikke få adgang til en database, hvorfor indhold kan gemmes i en headless CMS og hentes via en API under build-tiden og implementeres som statiske filer.
• Mobilapps (iOS, Android): Fordelen ved en headless CMS for mobiludviklere er, at API'en giver dem mulighed for at levere indhold til en iOS/Android-app fra den samme backend, der administrerer indhold til deres website, hvilket holder tingene synkroniseret.
• Webapplikationer: Denne tilgang indebærer at levere indhold via en API, som derefter forbruges af en webapplikation, men tilbyder et centraliseret sted til at administrere indhold. Et eksempel er en e-handelsapplikation bygget ved hjælp af HTML, CSS og JavaScript med indhold og produktdata, der vedligeholdes i CMS'en og leveres via en ekstern API.

Typer af Headless CMS

Her er en liste over headless CMS'er, du måske vil tjekke ud:

• Contentful: En API-drevet headless CMS designet til at oprette, administrere og distribuere indhold til enhver platform. I modsætning til en traditionel CMS tilbyder de muligheden for at oprette din indholdsmodel, så du kan bestemme, hvilken type indhold du vil administrere.
• GraphCMS: En headless CMS for brugere, der ønsker at bygge en GraphQL-indholdsinfrastruktur til deres digitale produkter. Denne CMS er fuldt ud bygget API-fokuseret fra bunden, hvilket giver skabere mulighed for at definere strukturer, tilladelser og relationer for API-parametrene. I denne artikel bruger vi GraphCMS på grund af dets GraphQL API-tilgang.
• ButterCMS: En CMS, der giver fuldstændig frihed til at bygge et website eller en branded blog med fuld SEO og understøtter enhver tech-stack. Dette værktøj sparer dig penge og tid til webstedsudvikling. ButterCMS er et vedligeholdelsesfrit headless CMS-værktøj og kan integreres med ethvert sprog eller framework. Den kraftfulde grænseflade hjælper dig med at definere og tilpasse hvert element af dit website uden besvær.
• Directus: Et open-source værktøj, der indpakker brugerdefinerede SQL-databaser med en dynamisk API og leverer en intuitiv admin-app til styring af dets indhold. Selv-host gratis, eller brug on-demand Cloud-tjenesten til at administrere alle dine omnichannel digitale oplevelser.
• Sanity: En anden API-drevet platform til styring af struktureret indhold. Med Sanity kan du administrere din tekst, billeder og andre medier med API'er. Du kan også bruge den open-source single-page applikation Sanity Studio til hurtigt at opsætte et redigeringsmiljø, som du kan tilpasse.
• Agility: En JAMstack-fokuseret Headless CMS med indbygget sideadministration. Hurtigere at bygge, administrere og implementere. Agility CMS er en Content-First Headless CMS, der giver dig mulighed for at vælge ethvert programmeringssprog, samtidig med at du får den fleksibilitet, hastighed og kraft, der kommer fra lette API'er. Derfra kan du tilføje funktioner som Sideadministration, E-handel, Online Ticketing og Søgning. Agility CMS bliver en komplet Digital Experience Platform – hvilket sparer tid, fjerner begrænsninger og muliggør problemfri oplevelser på tværs af alle digitale kanaler.
• Netlify CMS: En gratis og open-source, git-baseret CMS skabt af Netlify. Den giver dig mulighed for at definere din indholdsmodel, integrerer tredjeparts godkendelse og udvider dens backend (en single-page app bygget på React).

Bemærk: Alle de nævnte eksempler har gratis og betalte versioner, undtagen Directus og Netlify CMS, som er gratis.

Bygning af et Projekt med Headless CMS og React (Tutorial)

I denne artikel vil vi bruge GraphCMS – et GraphQL API-orienteret headless indholdsstyringssystem, der tager sig af vores backend-arkitektur.

Brug af GraphCMS

Indhold er både dynamisk og multi-kanals, men nuværende indholdsstyringssystemer (CMS) mangler fleksibiliteten til at imødekomme kravene til moderne digital indholdsdistribution. GraphCMS er den første Headless CMS bygget omkring GraphQL og tilbyder en løsning på dette problem med sin mission om at facilitere en problemfri indholdsstrøm mellem indholdsskabere, udviklere og forbrugere.

GraphCMS accepterer næsten enhver form for data, du kan forestille dig, lige fra billeder, kort osv. Det gør også roller og tilladelser nemme. Mens andre headless CMS-løsninger findes, sigter GraphCMS mod at give en problemfri oplevelse for udviklere; gennem at udnytte en API-specifikation kaldet GraphQL. Den eliminerer behovet for flere SDK'er til at interagere med indholdslevering og giver simpel multi-kanals indholds tilgængelighed. Den gør det meget nemt at oprette rige indholdsapps.

GraphCMS og GraphQL

GraphCMS er udelukkende afhængig af GraphQL, dets rygrad API-specifikation. GraphQL er et API-forespørgselssprog og runtime. Det blev udviklet af Facebook i 2012 og frigivet som open-source i 2015. Siden da har virksomheder som Pinterest, Github, Twitter, Intuit, Coursera alle adopteret GraphQL til at drive deres mobilapps, websites og API'er. GraphQL ligner REST i sit kerneformål om at levere en specifikation til opbygning og anvendelse af API'er. Imidlertid har GraphQL, uofficielt kaldet "REST 2.0", optimeret forskellige nøglefunktionaliteter, der tilbydes af REST.

Den primære unikhed ved GraphQL inkluderer protokol-agnostisk brug, kontrolleret datahentning, redigerbare felter og typer samt dybdegående fejlhåndtering. Resultaterne inkluderer fjernelse af koderepetition, forebyggelse af over- og underhentning af data og en betydelig reduktion af netværksanmodninger.

Som et konkret eksempel, lad os tage forholdet mellem en forespørgsel til et nyhedsfeed. Et nyhedsfeed-indlæg har en forfatter, en titel og kommentarer. Hvis vi bruger en REST-baseret CMS, skulle vi foretage 3 separate serveranmodninger til disse 3 forskellige endpoints, hvorimod vi i en GraphQL-baseret CMS kun ville skulle foretage 1 anmodning for alle 3. Følgelig tilbyder resultaterne relativt hurtigere forespørgsler og mindre netværksbelastning – i et praktisk brugsscenarie ville det ikke kun være én enhed, der foretager flere anmodninger, men tusinder og millioner.

GraphQL reducerer kompleksiteten ved at opbygge API'er ved at abstrahere alle anmodninger til et enkelt endpoint. I modsætning til traditionelle REST API'er er den deklarativ; hvad der anmodes om, returneres.

GraphCMS har en generøs gratis plan med 1 million API-operationer pr. måned og 500 GB trafik. Desuden leverer GraphCMS en Graphiql admin-grænseflade, der giver dig fuld adgang til dine data, og du kan blot downloade det hele og derefter udføre create many mutations mod din nye backend for at migrere alt.

I denne artikel bruger vi den gratis plan med 1 million API-operationer pr. måned og 500 GB trafik. Du kan benytte den samme plan til test; for projekter, der kræver mere end dette, skal du tjekke deres prisside.

Opbygning af Vores Projekt: En Simpel Indkøbskurv

For at se kraften i Headless CMS ved hjælp af GraphCMS vil vi bygge en simpel indkøbskurv.

Kom godt i gang med GraphCMS

1. Opret en konto på GraphCMS. Du kan bruge den gratis plan.
2. Ved succesfuld tilmelding bliver du ført til dit dashboard. Klik på "create a new project".
3. Sørg for at klikke på "create a project from scratch".
4. Indstil projektdetaljer for projektet, udfyld hvad der er på billedet nedenfor, og klik "create".
5. I vores dashboard opretter vi vores modeller og indhold.
6. Vælg "schema" i sidebjælken på dashboardet for at oprette et schema.

GraphCMS har en fantastisk drag-and-drop UI, der gør det nemt at oprette et schema problemfrit på få minutter.

Lad os oprette vores systemfelter i vores schema:

• name: Type: String, Single line Text. Er påkrævet. Beskrivelse: Navnet på produktet.
• price: Type: int. Er påkrævet. Beskrivelse: Indeholder prisen på vores produkt.
• description: Type: String, Multi-line Text. Er påkrævet. Beskrivelse: Dette felt vil indeholde beskrivelsen af vores produkt.
• image: Type: File, som er en Asset Picker. Er påkrævet. Beskrivelse: Dette billedfelt vil indeholde billedet af vores produkt.

Bemærk: Klik på fanen 'Advance' for at vælge den påkrævede mulighed i vores felter.

Hvis alt gik vel, skal dit schema se ud som billedet nedenfor.

Vi har i øjeblikket intet indhold. Klik på 'Content' i sidebjælken, det vil føre dig til indholdssektionen, og klik på 'Create New'.

Lad os tilføje noget indhold, så vi kan vise det senere i vores app ved hjælp af React. Her er hvordan man tilføjer indhold.

Tilføj mere indhold, hvis du ønsker det. Her er vores resultat.

Næste skridt er at kopiere API-endpoint URL'en (Klik på Dashboard) – dette er det enkelte endpoint for kommunikation mellem vores React frontend og GraphCMS backend.

Lad os nu gøre vores API-endpoint tilgængeligt. Naviger til Settings under Public API Permission og klik på dropdown-menuen og vælg OPEN og klik på opdater-knappen.

Opsætning af React

Den nemmeste måde at opsætte React på er at bruge Create-React-App. (Dette er en officielt understøttet måde at oprette single-page React-applikationer på, og tilbyder en moderne build-opsætning uden konfiguration.) Vi vil bruge den til at bootstrap'e applikationen, vi vil bygge.

Fra din terminal, kør følgende kommando:

npx create-react-app smashing-stores && cd smashing-stores

Når installationen er succesfuld, start React-serveren ved at køre npm start.

Oprettelse af Vores Layout

Ved oprettelse af layoutet til vores projekt vil vi have fem forskellige komponenter:

• Navbar: Til at holde vores navigation og indkøbskurv-ikon.
• Allproducts: Til at vise en liste over alle produkter.
• Product: Markup'en for et enkelt produkt.
• Footer: Fodterdelen af vores app.
• Cart: Til at holde varerne i vores indkøbskurv.

For en hurtig opsætning vil vi bruge Bootstrap til at oprette vores komponenter. For at inkludere Bootstrap vil vi bruge bootstrap CDN. Åbn din index.html i public-mappen, og tilføj linket til head-sektionen:

https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css

Nu kan vi bruge bootstrap-klasser i vores applikation.

Opret derefter en /components mappe og opret følgende filer indeni:

• Navbar.js
• Allproducts.js
• Product.js
• Footer.js
• Cart.js

Navbar.js

Åbn Navbar.js og tilføj følgende kode:

import React from 'react'; const Navbar = () => { return (  ); }; export default Navbar; 

Vi har deklareret en funktionel komponent Navbar, vi returnerer vores nav-tag med en bootstrap-klasse af navbar navbar-light bg-light. Hvad disse klasser gør, er at anvende en Navbar med en lys baggrund. Inden i vores nav-element har vi inkluderet et anker-tag med et link til bare forward-slash (hjemmeside) og en klasse af navbar-brand.

Den stylet knap i Navbar-komponenten har en klasse kaldet navbar navbar-light bg-light. Hvad denne klasse gør, er at sikre, at vores knap har en lyseblå baggrundsfarve og en skygge, når den hoveres over.

Footer.js

Lad os nu oprette vores Footer. Åbn Footer.js filen og tilføj følgende kode til den:

import React from 'react'; import '../App.css'; const Footer = () => { return (  ); }; export default Footer; 

Vi har tilføjet kontakt-os e-mail ved hjælp af h5 og paragraph-element. Sidst, i denne footer-sektion, har vi tilføjet copyright med navnet "Smashing Stores".

Vores footer har brug for lidt styling, så vi tilføjer følgende styles til App.css filen:

footer { position: absolute; bottom: -55px; width: 100%; background-color: #333; color:#fff; } 

Forbindelse til GraphCMS Backend med GraphQL

For at forbinde vores applikation til backend'en skal vi installere et par GraphQL-pakker. Et af de biblioteker, vi kan bruge, er apollo-boost, som giver en klient mulighed for at forbinde til GraphQL-backend'en ved hjælp af en URI (Uniform Resource Identifier).

URI'en er den endpoint, der leveres af GraphCMS, og er tilgængelig i endpoint-sektionen af dashboardet.

Kør følgende kommando i din terminal for at installere de nødvendige pakker:

npm install apollo-boost graphql graphql-tag react-apollo

Når du er færdig med installationen, skal du opdatere index.js filen i /src mappen til følgende kode:

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { ApolloProvider } from "react-apollo"; import ApolloClient from "apollo-boost"; import * as serviceWorker from './serviceWorker'; const client = new ApolloClient({ uri: "" }); ReactDOM.render( , document.getElementById('root') ); serviceWorker.unregister(); 

Her har vi pakket hele vores applikation ind i ApolloProvider, som tager en enkelt prop: client. ApolloProvider indlæser GraphCMS-skemaet og giver os adgang til alle egenskaberne af datamodellen inde i vores applikation, hvilket er muligt, fordi vores App-komponent er en underordnet komponent af ApolloProvider-komponenten.

Visning af Vores Produkter

Hvis du er nået hertil, så klap dig selv på skulderen. 👍 Vi har været i stand til at indlæse vores skema fra GraphCMS ind i vores applikation.

Det næste skridt er at hente og vise vores produkter. Opret en /all-product mappe under /component mappen og opret derefter en index.js fil og tilføj følgende til den:

import gql from "graphql-tag"; const PRODUCTS_QUERY = gql` query { productses { id name price description createdAt image { id url } } } `; export default PRODUCTS_QUERY; 

Hvad er "productses"? Vores modelnavn er products, men GraphQL pluraliserer modeller, deraf navnet.

Derefter oprettede vi en variabel kaldet PRODUCTS_QUERY, der gemmer forespørgslen fra vores GraphQl backend. gql-funktionen bruges til at parse (analysere et objekt, som det var i vores skema) den almindelige streng, der indeholder GraphQL-koden (hvis du ikke er bekendt med backtick-syntaksen, kan du læse op på JavaScripts tagged template literals).

GraphCMS leverer en praktisk GraphQL-udforsker kaldet (graphiql) specifikt til at teste vores forespørgsel.

Nu hvor vores forespørgsel fungerer som den skal. Lad os gå videre og oprette vores produktkomponenter.

Oprettelse af Allproducts Komponenten

Åbn Allproducts.js filen og tilføj følgende kode til den:

import React, { Component } from 'react'; import { Query } from 'react-apollo'; import PRODUCTS_QUERY from './all-products/index'; import Product from './Product'; import Cart from './Cart'; import Navbar from './Navbar'; class Allproducts extends Component { constructor(props) { super(props); this.state = { cartitems: [] }; } addItem = (item) => { this.setState({ cartitems: this.state.cartitems.concat([item]) }); } render() { return (  {({ loading, error, data }) => { if (loading) return 
Fetching products.....
 if (error) return 
Error fetching products
 const items = data.productses; return ( 
 {items.map(item => )} 
 ) }}  ); } }; export default AllProducts; 

Her har vi pakket vores produkter ind i <Query/> komponenten og sendt PRODUCTS_QUERY som props. Apollo injicerede flere props i komponentens render prop-funktion. Disse props leverer selv information om tilstanden af netværksanmodningen:

• loading: Opstår under igangværende anmodninger.
• error: Opstår, når anmodningerne fejler.
• data: Er data modtaget fra serveren.

Endelig looper vi igennem alle de modtagne elementer og sender dem som en prop til vores Product-komponent. Før vi ser, hvordan det ser ud, lad os oprette vores Product-komponent.

Oprettelse af Product Komponenten

Åbn Product.js og tilføj følgende kode til den:

import React from 'react'; const Product = (props) => { return ( 
{props.product.name}
$ {props.product.price}
{props.product.description}
 props.addItem(props.product)}>Buy now
 ); } export default Product; 

Da vores Product.js er en funktionel komponent, der modtager produktdetaljer via props og viser dem, kalder vi addItem-funktionen på onClick-hændelseslytteren for at tilføje det aktuelle produkt til indkøbskurven, når der klikkes på den.

Importering af Vores Komponenter i App.js

Med vores komponenter opsat er det tid til at importere vores komponenter i vores App.js basekomponent.

Åbn den og tilføj følgende til den:

import React from 'react'; import './App.css'; import Footer from './components/Footer'; import Products from './components/Allproducts'; function App() { return ( 
 ); } export default App; 

Fra linje 3-4 importerede vi både Footer- og Products-komponenten i App-komponenten.

Skriv derefter npm start i din terminal, og naviger derefter til https://localhost:3000 i din browser, og du vil se følgende:

Oprettelse af Vores Cart Komponent

For at inkludere vores indkøbskurv-funktionalitet bliver vi nødt til at tilføje et par metoder til vores komponenter.

Lad os opdatere vores Allproducts.js fil til dette:

import React, { Component } from 'react'; import { Query } from 'react-apollo'; import PRODUCTS_QUERY from './all-products/index'; import Product from './Product'; import Cart from './Cart'; import Navbar from './Navbar'; class Allproducts extends Component { constructor(props) { super(props); this.state = { cartitems: [], show: false }; } addItem = (item) => { this.setState({ cartitems: this.state.cartitems.concat([item]) }); } showModal = () => { this.setState({ show: true }); }; hideModal = () => { this.setState({ show: false }); }; render() { return (  {({ loading, error, data }) => { if (loading) return 
Fetching
 if (error) return 
Error
 const items = data.productses; const itemssent = this.state.cartitems; return ( 
 {items.map(item => )} 
 ) }}  ); }; }; export default Allproducts; 

• showModal: Denne metode sætter show-tilstanden til true, så modalen kan være synlig for brugeren.
• hideModal: Denne metode sætter show-tilstanden til false for at skjule modalen.

Vi har oprettet en variabel ved navn itemssent, der holder tilstanden af alle indkøbskurvsvarene, vi får fra backend'en.

• cart: Den sender indkøbskurvens data til vores Navbar.
• show: Den udløser vores modalmetode.

Cart Komponent

• show: Den åbner indkøbskurv-modalen.
• Items: Den modtager og gemmer data sendt fra Navbar, så den kan vises, når det er nødvendigt.
• handleClose: Den lukker modalen.

Lad os opdatere vores Navbar.js fil med følgende kode:

import React from 'react'; const Navbar = (props) => { return (  ); }; export default Navbar; 

Vi har tilføjet en onClick-hændelse, der tager en funktion, som udløser indkøbskurv-modalen.

Endelig tjekker vi antallet af varer i vores indkøbskurv ved at bruge .length JavaScript-metoden.

Opret derefter en Cart.js fil og tilføj følgende kode til den:

import React from 'react'; const Cart = ({ handleClose, show, items }) => { return ( 
 {items.map(item => ( 
{item.name}
$ {item.price}
 ))} Total items: {items.length} close
 ); }; export default Cart; 

I vores overordnede div har vi brugt en ternær operator, der skifter mellem synlighed og skjult tilstand. Næste, for at vi kan vise elementerne i vores indkøbskurv-modal, mapper vi igennem vores elementer.

Sidst, i denne sektion, for at tjekke det samlede antal varer i vores indkøbskurv, bruger vi .length JavaScript-metoden.

Åbn din app.css og tilføj følgende kode til den:

.modal { position: fixed; top: 0; left: 0; width:100%; height: 100%; background: rgba(0, 0, 0, 0.6); } .main-modal { position:fixed; background: white; width: 80%; height: auto; top:50%; left:50%; padding: 10px; transform: translate(-50%,-50%); } .display-block { display: block; } .display-none { display: none; } 

Endelig åbn indkøbskurven, tilføj varer til den og se den via 'Cart'-knappen:

Konklusion

Konceptet lært i denne artikel kan hjælpe dig med at oprette næsten enhver form for webapplikation uden at skulle betale så meget opmærksomhed på din backend-infrastruktur. Du kan tage det videre ved at oprette en fuldt udbygget e-handelsbutik og tilføje betaling osv. Jeg vil gerne se, hvad du har været i stand til at lave i kommentarfeltet.

Den understøttende repository for denne artikel er tilgængelig på Github.

Referencer

Yderligere læsning:

• Hvad er Strapi CMS? Strapi er en open-source headless CMS til iOS, Android eller Progressive Web Apps.

Hvis du vil læse andre artikler, der ligner Headless CMS: Fremtiden for mobilindhold, kan du besøge kategorien Teknologi.