Gra­phCMS

SCREENGUIDE - - Inneres - TEXT: Meinolf Dros­te

De­cou­p­led Con­tent-Ma­nage­ment für Gra­phQL

So­ge­nann­te API-CMS, wie Con­tent­ful, Pris­mic oder Cos­mic JS, sind seit zwei Jah­ren er­folg­reich auf dem Markt. Bei sol­chen CMS wer­den die Da­ten mit ei­ner REST-API auf­ge­ru­fen und mo­di­fi­ziert. REST ist aber nicht un­be­dingt op­ti­mal zur Lö­sung vie­ler Pro­ble­me ge­eig­net. Des­halb setzt Face­book seit 2012 auf ei­ne neue API: Gra­phQL. Das Gra­phCMS ist ein de­cou­p­led Con­tent-Ma­nage­ment-Sys­tem für Gra­phQL.

Wäh­rend vie­le de­cou­p­led CMS noch mit der alt­be­währ­ten RESTAPI ar­bei­ten, set­zen die Ent­wick­ler des Gra­phCMS voll und ganz auf die Gra­phQL [gra­phcms.com]. Das dürf­te ein Al­lein­stel­lungs­merk­mal sein. Ih­re Mis­si­on be­schrei­ben die Ent­wick­ler so: „REST ba­sed, API-first con­tent ma­nage­ment sys­tems, so cal­led he­ad­less con­tent ma­nage­ment sys­tems en­t­e­red the land­scape as a lo­gi­cal con­se­quence. And whi­le REST is ba­si­cal­ly do­ing the trick, it has so­me li­mi­ta­ti­ons that ma­ke de­ve­lo­ping si­tes and ap­p­li­ca­ti­ons a pain. Our mis­si­on is to re­mo­ve the­se pain po­ints by using the po­wer of Gra­phQL and ta­ke the idea of a he­ad­less CMS to the next le­vel.” Ver­ant­wort­lich für die Ent­wick­lung des Gra­phCMS ist ei­ne noch klei­ne jun­ge Fir­ma in Gie­ßen. Die­se hat sich ganz der Ent­wick­lung des Gra­phCMS ge­wid­met. Das Er­geb­nis kann sich be­reits jetzt se­hen las­sen. Gra­phCMS ist aus­schließ­lich da­für ge­dacht, mit Gra­phQL zu ar­bei­ten. Des­halb ist das Gra­phCMS auch ein Gra­phQL-Ser­ver. Das Gra­phCMS ist ein bzw. ei­ne: • Ma­na­ged CMS (CAAS – Con­tent Ma­nage­ment as as ser­vice) • Gra­phQL-Ser­ver • Ba­ckend zur Er­stel­lung von Con­tent-Mo­del­len • Sys­tem zur Er­stel­lung, Pfle­ge und Ver­wal­tung von In­hal­ten • Me­di­en­ver­wal­tung Was ist „Con­tent Ma­nage­ment as a ser­vice”? Es han­delt sich hier­bei um Con­tent-Ma­nage­ment-Sys­te­me, die beim An­bie­ter des CMS in der Cloud be­trie­ben wer­den. In den meis­ten Fäl­len gibt es kei­ne Mög­lich­keit, ein sol­ches CMS auf Ih­rem ei­ge­nen Ser­ver zu hos­ten. Dies hat Vor- und Nach­tei­le. Vor­tei­le sind: kei­ne Auf­wän­de für Pfle­ge, Si­cher­heits-Up­dates oder gro­ße Up­grades auf ei­ne neue Ma­jor-Ver­si­on. Neue Fea­tu­res, Bug­fi­xes und Ver­bes­se­run­gen des Sys­tems wer­den nach Er­mes­sen des An­bie­ters re­gel­mä­ßig hin­zu­ge­fügt. Ein Nach­teil ist si­cher­lich die feh­len­de Mög­lich­keit, das Sys­tem nach ei­ge­nen Vor­stel­lun­gen und Be­dürf­nis­sen zu än­dern oder zu er­wei­tern. Es gibt kei­ne Mo­du­le oder Plug­ins, um wei­te­re Funk­tio­na­li­tä­ten hin­zu­zu­fü­gen. Sie müs­sen sich mit dem be­gnü­gen, was Sie vor­fin­den. Au­ßer­dem lie­gen Ih­re In­for­ma­tio­nen auf frem­den Ser­vern, so­dass das Sys­tem für in­ter­ne Da­ten nur be­dingt in­fra­ge kommt. Ei­ne um­fang­rei­che Eva­lu­ie­rung ei­nes sol­chen Sys­tems ist al­so vor ei­ner Ent­schei­dung, ob Sie es ein­set­zen möch­ten, un­be­dingt rat­sam. Wenn Sie sich für das Gra­phCMS ent­schei­den, steht Ih­nen ein Ba­ckend zur Ver­fü­gung, um Con­tent-Mo­del­le zu er­stel­len und na­tür­lich um In­hal­te und Me­di­en zu er­fas­sen und zu ver­wal­ten. In ei­nem Con­tent-Mo­dell wer­den die Fel­der und Re­la­tio­nen zu an­de­ren Con­tent-Mo­del­len fest­ge­legt (sie­he un­ten). Die­se kön­nen dann von Re­dak­teu­ren oh­ne tech­ni­sche Kennt­nis­se mit In­hal­ten be­füllt wer­den. Wie al­le an­de­ren API-CMS bie­tet auch das Gra­phCMS kei­ner­lei Mög­lich­kei­ten, in­ner­halb des CMS ein Front­end zu ent­wi­ckeln. Es gibt kei­ne The­mes wie bei Wor­dPress oder Dru­pal. Al­ler­dings kön­nen die ge­spei­cher­ten In­hal­te mit je­der po­pu­lä­ren Ja­vas­cript-

API, wie Re­act, Vue oder An­gu­larJS, ab­ge­fragt wer­den – wenn die­se über ei­nen Gra­phQL-Cli­ent ver­fügt. Und na­tür­lich kön­nen Sie auch na­ti­ve iOS- oder An­dro­id-Apps ent­wi­ckeln. Das be­deu­tet, dass ein sol­ches CMS nicht für je­de Art App ge­eig­net ist. Auch wenn z.B. je­der Web­site-Typ da­mit pro­gram­miert wer­den könn­te, wä­re es si­cher­lich für ein ein­fa­ches Blog viel zu auf­wen­dig in der Um­set­zung. Aber für ei­ne App, de­ren Da­ten ein­fach pfleg­bar sein sol­len und die rund um die App noch nor­ma­len In­halt braucht, ist das Gra­phCMS ei­ne gu­te Wahl. Stel­len Sie sich vor, Sie ver­fü­gen über ei­ne Im­mo­bi­li­en-App und Web­site. Ab­ge­se­hen von den rei­nen Da­ten der Im­mo­bi­li­en be­nö­ti­gen Sie si­cher­lich noch zu­sätz­li­che In­hal­te, wie z.B. News aus Ih­rem Un­ter­neh­men. Für sol­che Use-Ca­ses ist das Gra­phCMS sehr gut ge­eig­net. Um mit dem CMS zu ar­bei­ten, reicht es aus, auf gra­phcms.com den Na­vi­ga­ti­ons-But­ton „Launch Be­ta” zu kli­cken und ei­ne der an­ge­bo­te­nen Re­gis­trie­rungs mög­lich­kei­ten zu nut­zen. Für den Start und klei­ne­re Pro­jek­te dürf­te die kos­ten­lo­se Ver­si­on aus­rei­chend sein.

DAS ROL­LEN- UND RECHTESYSTEM

Für die Ar­bei­ten im Ba­ckend sind drei ver­schie­de­ne Per­so­nen­grup­pen mit un­ter­schied­li­chem Know-how vor­ge­se­hen: • In­for­ma­ti­ons­ar­chi­tek­ten bzw. Ad­mi­nis­tra­to­ren er­stel­len die

Con­tent-Mo­del­le. • Con­tent-Ma­na­ger er­stel­len und pfle­gen die In­hal­te. • De­ve­l­oper er­stel­len die Gra­phQL-Ab­fra­gen, die in der App be­nö­tigt wer­den und ent­wi­ckeln das Web-Front­end und/oder ei­ne na­ti­ve App. Das be­deu­tet, dass der In­for­ma­ti­ons­ar­chi­tekt mit der Ar­beit be­ginnt. Ist das Con­tent-Mo­dell fer­tig, kön­nen Con­tent-Ma­na­ger und De­ve­l­oper par­al­lel ar­bei­ten. Die Be­nut­zer die­ser Rol­len kön­nen Sie über den Me­nüein­trag „Set­tings” hin­zu­fü­gen. Dort ste­hen die Rol­len Ad­mi­nis­tra­to­ren, Ent­wick­ler, Edi­to­ren und Cont­ri­bu­tors zur Ver­fü­gung. Die Rech­te für die­se Rol­len sind fest­ge­legt und kön­nen nicht ver­än­dert wer­den. Soll ein Be­nut­zer mehr Rech­te be­kom­men, muss er ei­ner an­de­ren Rol­le zu­ge­wie­sen wer­den. Es gibt noch ei­ne an­de­re Form der Be­rech­ti­gun­gen: Näm­lich CRUD (cre­at, re­ad, up­date, de­le­te) auf Feld­ebe­ne. Die­se gel­ten al­ler­dings nicht für Be­nut­zer, son­dern für API-Calls. Hat ein Feld nur ei­ne Re­ad-Be­rech­ti­gung, sind die API-Calls für crea­te, up­date und de­le­te nicht mög­lich. Der In­for­ma­ti­ons­ar­chi­tekt sieht nach der Re­gis­trie­rung ein ziem­lich lee­res Browser-Fens­ter mit ei­nem But­ton „Crea­te New Pro­ject” (Abb. 1). Ein Pro­jekt ist nicht mit Con­tent-Mo­del­len zu ver­wech­seln. Es ent­hält die Mo­del­le ei­nes Pro­jekts. Als klei­nes Bei­spiel wer­den wir den News-Be­reich ei­ner Web­site er­stel­len. Nach ei­nem Klick auf „Crea­te New Pro­ject” ge­ben Sie ei­nen Na­men und ei­ne Be­schrei­bung ein. Nen­nen wir das Pro­jekt „News”. Auf der Über­sichts­sei­te er­scheint jetzt ne­ben „Crea­te New Pro­ject” das neue Pro­jekt. Ein Klick dar­auf führt zum zu­ge­hö­ri­gen Dash­board (Abb. 2).

EiN CON­TENT-MO­DELL ER­STEL­LEN

Im In­halts­be­reich gibt es ei­ni­ge In­for­ma­tio­nen, An­kün­di­gun­gen und ei­nen Hin­weis auf den Slack Chan­nel. Im Na­vi­ga­ti­ons­be­reich fin­den sich al­le aus­zu­füh­ren­den Ak­tio­nen. Der In­for­ma­ti­ons­ar­chi­tekt wird sich nur für die bei­den Me­nü­punk­te „Con­tent” und „As­sets” in­ter­es­sie­ren. Da noch kein Con­tent-Mo­dell an­ge­legt wur­de, er­scheint ei­ne lee­re Sei­te mit nur ei­nem But­ton „Add Con­tent Mo­dell”. So funk­tio­niert das ge­sam­te User Interface des CMS, im­mer über­sicht­lich und fo­kus­siert auf we­ni­ge mög­li­che nächs­te Schrit­te. Ein Klick auf „Add” öff­net ein Pop-up mit drei Fel­dern: Dis­play Na­me, API ID und De­scrip­ti­on. Die ers­ten bei­den müs­sen aus­ge­füllt wer­den. Dis­play Na­me wird für die wei­te­re An­zei­ge im Ba­ckend be­nö­tigt, die API ID für die spä­te­re Front­end-Ent­wick­lung. Un­ser Bei­spiel be­nö­tigt nur ein ein­zel­nes Con­tent-Mo­dell „Post”. Der Con­tent-Be­reich soll­te da­nach wie in Ab­bil­dung 3 aus­se­hen.

EI­NEM CON­TENT-MO­DELL FEL­DER HIN­ZU­FÜ­GEN

Nach­dem ein lee­res Con­tent-Mo­dell für den Typ „Post” er­stellt wur­de, kön­nen Sie die be­nö­tig­ten Fel­der hin­zu­fü­gen. Ein­fach im Na­vi­ga­ti­ons­be­reich un­ter Con­tent auf das ge­wünsch­te Mo­dell kli­cken und auf der nächs­ten Sei­te auf „Add field”. Vier Sys­tem­fel­der wer­den vom CMS für je­des Con­tent-Mo­dell au­to­ma­tisch an­ge­legt: ID, Crea­ted At, Up­dated At und Pu­blis­hed. Lei­der fehlt zur­zeit noch ein Crea­ted By. Fol­gen­de zu­sätz­li­che Fel­der le­gen wir für ei­ne News an (Abb. 3): • Ti­tel • Sub­ti­tel • Slug (für die URL ei­ner Sei­te) • Tea­ser • Post • Pic­tu­re • Mo­re li­ke this Das Gra­phCMS ver­fügt ge­ne­rell über fol­gen­de Feld­ty­pen: Text, Num­ber, Boo­le­an, Re­la­ti­on, JSON ob­ject, Enu­me­ra­ti­on, Lo­ca­ti­on, Da­te and time, Me­dia, Co­lor (Abb. 4). Mit die­sen Feld­ty­pen las­sen sich sehr vie­le An­wen­dungs­fäl­le ab­de­cken. Der Typ „Text” ver­fügt über ver­schie­de­ne Va­ri­an­ten: Sing­le Li­ne, Mul­ti Li­ne, Slug, Rich Text und Mark­down. Die Ty­pen Rich Text und Mark­down bie­ten dem User ei­nen Wy­sy­wig-Edi­tor an. Das Feld „Mo­re li­ke this” ist ei­ne Re­fe­renz auf an­de­re NewsBei­trä­ge. Für das Hin­zu­fü­gen von Re­fe­ren­zen steht der Feld­typ „Re­la­ti­on” zur Ver­fü­gung. Im For­mu­lar müs­sen die Fel­der „Dis­play Na­me” und „Re­la­ti­on Na­me” ver­ge­ben wer­den. In­ter­es­sant wird es dar­un­ter. Es gibt je­weils zwei Be­rei­che für ei­ne Re­la­ti­on. Der lin­ke ist das Con­tent-Mo­dell, das ge­ra­de be­ar­bei­tet wird, der rech­te für das Mo­dell, das re­fe­ren­ziert wer­den soll. Da be­lie­big vie­le an­de­re News hin­zu­ge­fügt wer­den sol­len, ist hier „Ma­ny re­fe­rence” zu wäh­len. Auf der lin­ken Sei­te „One re­fe­rence”, da dort im­mer nur ei­ne News aus­ge­wählt wer­den soll. An­ders wä­re das z.B. für fol­gen­den Fall: Auf je­der Sei­te soll ein Mar­ke­ting-Tea­ser hin­zu­ge­fügt wer­den kön­nen. Dann muss je­de Re­la­ti­on auf „One re­fe­rence” ste­hen. Nach der Er­stel­lung ei­nes Con­tent-Mo­dells kön­nen die In­hal­te ein­ge­ge­ben wer­den.

INHALTSERFASSUNG MIT DEM GRA­PHCMS

Um In­halt zu ei­nem Con­tent-Mo­dell hin­zu­zu­fü­gen, reicht ein Klick auf das + Icon in der Na­vi­ga­ti­ons­leis­te un­ter­halb des Me­nüein­trags „Con­tent”. Es öff­net sich ein selbst­er­klä­ren­des For­mu­lar mit al­len Fel­dern des Con­tent-Mo­dells. Je nach Feld­typ un­ter­schei­den sich die Fel­der. Bei man­chen er­scheint ein Rich­text- oder Mark­down-Edi­tor, bei an­de­ren ein ein­fa­ches Text­feld. La­bels zei­gen im­mer an, um was für ei­nen Feld­typ es sich han­delt. Al­le Fel­der ver­fü­gen über ei­ne klei­ne Vor­an­sicht. Lei­der wer­den For­mu­la­re mit sehr vie­len Fel­dern schnell un­über­sicht­lich. Ein we­nig Ab­hil­fe schafft hier die Mög­lich­keit, je­den Feld­be­reich ein­zu­klap­pen (Abb. 5). Bes­ser wä­re je­doch die Mög­lich­keit, bei der Er­stel­lung des Con­tent-Mo­dells zu­sam­men­ge­hö­ri­ge Fel­der auf ver­schie­de­nen „Sei­ten” ei­nes For­mu­lars zu grup­pie­ren (Mul­ti­form) und über ho­ri­zon­ta­le oder ver­ti­ka­le Na­vi­ga­ti­onstabs er­reich­bar zu ma­chen. In­halt be­ar­bei­ten: Um In­hal­te zu be­ar­bei­ten, reicht ein Klick auf den Link des Con­tent-Mo­dells in der Na­vi­ga­ti­on. Es wird dann ei­ne Sei­te mit ei­ner ta­bel­la­ri­schen Über­sicht al­ler In­hal­te die­ses Con­tent-Mo­dells an­ge­zeigt (Abb. 6). Da­bei kön­nen meh­re­re Zei­len se­lek­tiert und auf ein­mal ge­löscht wer­den. Ein Klick auf das Blei­stift­sym­bol ruft den Ein­trag zum Be­ar­bei­ten auf. Lei­der feh­len in der In­halts­über­sicht wich­ti­ge In­for­ma­tio­nen, wie das Er­stel­lungs­da­tum und der Au­tor. Es feh­len auch Fil­ter- und Such­mög­lich­kei­ten. Die Sor­tie­rung in­ner­halb ein­zel­ner Spal­ten ist für ei­ne In­halts­ver­wal­tung ei­nes CMS ein­fach zu we­nig. Bleibt zu hof­fen, dass die Ent­wick­ler des Gra­phCMS sol­che Funk­tio­nen bald hin­zu­fü­gen.

Auch die Me­di­en­ver­wal­tung, über As­sets in der Na­vi­ga­ti­on zu er­rei­chen, ist sehr ein­fach ge­hal­ten. Das Bes­te ist si­cher­lich, dass ein Mul­ti­fi­le-Upload un­ter­stützt wird. Sie kön­nen Bil­der vom ei­ge­nen Rech­ner, Face­book, Ins­ta­gram, Goog­le Dri­ve und Drop­box hoch­la­den. Lei­der kön­nen Sie kei­ne Me­t­a­da­ten, wie ei­nen Co­py­right-Hin­weis oder ei­nen Text für das Alt-At­tri­but zum Bild hin­zu­fü­gen. Dies müs­sen Sie im Con­tent-Mo­dell mit ei­ge­nen Fel­dern lö­sen. An­sons­ten ist le­dig­lich ei­ne Sei­te mit al­len As­sets er­reich­bar. Über ein Pop-up-Over­lay lässt sich durch al­le Bil­der blät­tern (Abb. 7). Ähn­lich wie die In­halts­ver­wal­tung soll­te die Me­di­en­ver­wal­tung noch durch Fil­ter- und Such­op­tio­nen er­wei­tert wer­den.

DER API-EX­PLO­RER

Hier wird es für Ent­wick­ler in­ter­es­sant. Der API-Ex­plo­rer ist ein in­ter­ak­ti­ves Werk­zeug, um Gra­phQL Que­ries zu schrei­ben und zu tes­ten (Abb. 8). Der Ex­plo­rer bie­tet ei­ne her­aus­ra­gen­de Au­to­com­ple­te-Funk­ti­on für al­le Con­tent-Mo­del­le, Fel­der, Fil­ter und Sor­tier­mög­lich­kei­ten. Ein­fach an be­lie­bi­ger Stel­le Ctrl-Space ein­ge­ben, und der Ex­plo­rer zeigt entweder al­le Fel­der an, die ab­ge­fragt, oder al­le Fil­ter re­spek­ti­ve Sor­tie­run­gen, die für ei­ne Qu­e­ry be­nutzt wer­den kön­nen. Wenn ei­ne Qu­e­ry ge­star­tet wird, er­scheint das Er­geb­nis im Fens­ter auf der rech­ten Sei­te des APIEx­plo­rer. Va­li­die­rungs­feh­ler wer­den eben­so dort an­ge­zeigt. Wird die Au­to­com­ple­te-Funk­ti­on ein­mal zu un­über­sicht­lich, kön­nen Sie über den Link „Docs” ei­ne Voll­text­su­che über das Sche­ma al­ler Con­tent-Mo­del­le durch­füh­ren. Ist ei­ne Qu­e­ry fer­tig­ge­stellt und ge­tes­tet, kann die­se 1:1 für die Ja­vas­cript-Front­en­dEnt­wick­lung ein­ge­setzt wer­den. Ent­wick­ler wer­den von die­sem Kom­fort si­cher­lich be­geis­tert sein.

DIE FRONT­END-ENT­WICK­LUNG

Um in die Front­end-Ent­wick­lung für das Gra­phCMS ein­zu­stei­gen, bie­tet sich ein Bei­spiel-Pro­jekt der Ent­wick­ler auf Git­hub an: goo. gl/Kz­diWJ. Das Pro­jekt ist ei­ne Ser­ver-Si­de ren­de­red App mit Re­act, Next.js, Apol­lo und dem Gra­phCMS (sie­he Sei­te 81). Ein­fach per Git klo­nen, ins Ter­mi­nal ge­hen und mit „npm in­stall” star­ten. Be­vor Sie das Pro­jekt bzw. den lo­ka­len Ser­ver mit „npm start” auf­ru­fen, müs­sen Sie die End­point URL aus dem Set­tings-Be­reich des Gra­phCMS ko­pie­ren (Abb. 9). Die­se muss dann in die Da­tei in­itC­li­ent.js im lib-Ver­zeich­nis des Pro­jekts ein­ge­tra­gen wer­den. Der Co­de zeigt ei­nen gro­ßen Vor­teil der Gra­phQL-Ar­chi­tek­tur im Ver­gleich zur REST-API: Es gibt nur ei­nen ein­zi­gen End­point. Im Bei­spiel­pro­jekt gibt es ver­schie­de­ne Con­tent-Mo­del­le für Ar­tists, Re­cor­ds und Re­views. Wir wer­den das Bei­spiel­pro­jekt le­dig­lich als Grund­la­ge für un­se­ren Co­de nut­zen, um mit un­se­rem Gra­phCMS-Pro­jekt „News” zu ar­bei­ten. Es gibt dort nur ein Con­tent-Mo­dell „Posts”. Das stellt die Struk­tur der News-Ein­trä­ge dar. Im Con­tent-Mo­dell soll­ten die Be­rech­ti­gun­gen für al­le Fel­der auf „Re­ad” ste­hen. Die ser­ver.js-Da­tei muss mit fol­gen­den Zei­len er­gänzt wer­den: Das sind die Rou­tes un­se­rer An­wen­dung. Ei­ne Rou­te für ei­ne Sei­te mit al­len Posts und ei­ne Rou­te für die De­tail­sei­ten, die da­zu auf das Feld „slug” zu­grei­fen. Al­le Zei­len des Bei­spiel­pro­jekts, die sich auf ar­tists, re­views und re­cor­ds be­zie­hen, kön­nen ge­löscht wer­den. Im pa­ges-Ver­zeich­nis lö­schen wir die ar­tists.js so­wie das ar­tists- und das re­views-Ver­zeich­nis. Die re­cor­ds.js

be­nen­nen wir in posts.js und das re­cor­ds-Ver­zeich­nis in posts um. In der in­dex.js lö­schen wir al­le Zei­len un­ter­halb der im­por­tAn­wei­sun­gen und fü­gen Fol­gen­des ein: In die­sem Ar­ti­kel ge­hen wir nicht auf De­tails der Re­act-Ent­wick­lung ein, son­dern nur auf Gra­phQL. Der da­für in­ter­es­san­te Teil ist die Kon­stan­te al­lPosts. Dort wur­de ein­fach ei­ne im API-Ex­plo­rer des Gra­phCMS er­zeug­te Qu­e­ry rein­ko­piert. Der ge­sam­te Co­de kann als Grund­la­ge für je­de Art von Über­sicht­sei­ten die­nen: Blogs, Pro­duk­te in ei­nem Shop, News usw. Na­tür­lich braucht je­der Ein­trag auch ei­ne De­tail­sei­te. Hier­zu be­ar­bei­ten wir die de­tails.js im posts-Ver­zeich­nis. Gä­be es ein Blog auf un­se­rer Site, müss­te le­dig­lich ei­ne de­tails.js in ei­nem Ver­zeich­nis blogs an­ge­legt wer­den. In der de­tails.js lö­schen wir wie­der al­le Zei­len au­ßer die im­ports und fü­gen fol­gen­den Co­de ein. Al­le Än­de­run­gen sind be­wusst ein­fach ge­hal­ten. Et­was kom­pli­zier­ter sind die Re­fe­ren­zen auf ähn­li­che Bei­trä­ge: In­ter­es­sant ist hier, wie ein­fach es ist, wei­te­re Da­ten in ei­ner Qu­e­ry mit ab­zu­fra­gen. In die­sem Fall aus dem ent­ries-Feld, in dem sich die Re­fe­ren­zen auf wei­te­re in­ter­es­san­te Bei­trä­ge (si­mi­lar ent­ries) zu ei­nem Post be­fin­den.

RE­ACT COMPONENTS

Re­act ist kein Ja­vas­cript Frame­work wie An­gu­lar. Re­act ist ein­zig und al­lein da­zu ge­dacht, User-In­ter­faces mit Kom­po­nen­ten zu ent­wi­ckeln. Für un­ser klei­nes Pro­jekt kön­nen wir fast al­le Kom- me­dia.gra­phcms.com/re­si­ze=w:80,h:80,fit:crop/${Post.

po­nen­ten im components-Ver­zeich­nis so las­sen, wie sie sind. Le­dig­lich in der nav.js lö­schen wir im <nav>-Tag al­les und fü­gen Fol­gen­des hin­zu. Der Co­de er­zeugt nur ei­nen Me­nüein­trag zur News-Über­sichts­sei­te: Jetzt muss noch die Re­cor­dDe­tails.js in Pos­tDe­tails.js um­be­nannt und der Co­de im ex­port de­fault er­setzt wer­den: Für ei­nen Post in un­se­ren News be­nut­zen wir die Re­act-Kom­po­nen­te Re­ac­tMark­down und für die „si­mi­lar ent­ries” die Kom­po­nen­te Grid aus dem Gra­phCMS-Bei­spiel­pro­jekt. Das war’s. Wir ha­ben ein ein­fa­ches Front­end für un­ser Gra­phCMS-Pro­jekt ent­wi­ckelt. Än­de­run­gen am In­halt im CMS sind wie bei klas­si­schen CMS so­fort auf der Web­site zu se­hen. Durch Ein­ga­be von „npm start” im Ter­mi­nal kön­nen Sie die Web­site lo­kal star­ten und im Browser un­ter lo­cal­host:3000 auf­ru­fen. Für Live De­ploy­ments ist now.sh sehr gut ge­eig­net (sie­he In­fos auf der nächs­ten Sei­te). Now wird auch im Ter­mi­nal in­stal­liert: „$ now -g installation”. Nach der Installation sto­ßen Sie mit „$ now” den Build-Pro­zess auf dem Ser­ver von now.sh an. Kur­ze Zeit spä­ter ist die Web­site un­ter ei­ner Sub­do­main von Now er­reich­bar. Die­se sieht so oder ähn­lich aus: https://mdros­te­b­log­z­nzt­sci­anh. now. sh .Da nie­mand sich solch ei­ne URL mer­ken kann, ist es mög­lich, durch „$ now ln mdros­te­b­log-znzt­sci­anh mdros­te­b­log” auf ei­nen merk­ba­ren Na­men um­zu­stel­len. Die­ses klei­ne Pro­jekt ist un­ter mdros­te.now.sh er­reich­bar. Den Qu­ell­code fin­den Sie un­ter goo.gl/ajw5FQ.

FA­ZIT

Ja­vas­cript We­bapps mit Ser­ver- und Cli­ent-Si­de (Uni­ver­sal) Ren­de­ring wer­den im­mer po­pu­lä­rer. Die Front­end-Ent­wick­lung wird dank Frame­works wie Gra­phQL deut­lich ein­fa­cher. Und ein CMS wie das Gra­phCMS bie­tet Con­tent-Ma­na­gern die glei­chen An­nehm­lich­kei­ten bei der Inhaltserfassung- und ver­wal­tung wie her­kömm­li­che CMS. Da das Gra­phCMS ein Ma­na­ged Sys­tem in der Cloud ist, fal­len kei­ner­lei Auf­wän­de für Up­dates an. Auch um die lei­di­ge Si­cher­heits­pro­ble­ma­tik müs­sen Sie sich nicht mehr selbst küm­mern bzw. Di­enst­leis­ter da­mit be­auf­tra­gen. Das Gra­phCMS ist noch in ei­ner Be­ta-Pha­se und wird stän­dig wei­ter­ent­wi­ckelt. Wenn Sie mor­gen Ih­ren Ac­count auf­ru­fen, kann es durch­aus sein, dass sich an der ei­nen oder an­de­ren Stel­le et­was ge­än­dert hat. Und na­tür­lich fal­len noch vie­le Bug­fi­xes an. Ih­re Da­ten sind aber nie ge­fähr­det, und Sie kön­nen mit der Ar­beit an Ih­ren Con­tent-Mo­del­len und na­tür­lich auch am Con­tent ganz nor­mal wei­ter­ma­chen. Häu­fig al­ler­dings an­ge­neh­mer und mit ei­nem Fea­tu­re mehr als am vor­he­ri­gen Tag. Das jüngs­te Up­date führ­te fol­gen­de Ver­bes­se­run­gen ein: • ei­ne sta­bi­le­re Ar­chi­tek­tur mit gro­ßen Per­for­mance-Ge­win­nen • Feld-ba­sier­te CRUD-Be­rech­ti­gun­gen • ei­nen kom­plett ge­än­der­ten Feld­typ für Enu­me­ra­ti­ons, die in al­len Con­tent-Mo­del­len wie­der­ver­wend­bar sind • ver­bes­ser­te Rich­text- und Mark­down-Edi­to­ren. Sie kön­nen Bil­der jetzt auch di­rekt im Rich­text-Feld ein­fü­gen. So wie Sie es von an­de­ren CMS ken­nen. Für das nächs­te Up­date sind be­reits ei­ne Viel­zahl wei­te­rer Ver­bes­se­run­gen und neue Fea­tu­res an­ge­kün­digt. Da­zu ge­hö­ren ei­ne ver­bes­ser­te Ober­flä­che für Con­tent-Ma­na­ger, be­nut­zer­de­fi­nier­te Fel­der für As­sets, so­dass Sie et­wa Fel­der für das alt-At­tri­but, Co­py­right und Be­schrei­bung er­gän­zen kön­nen, In­li­ne-In­halts­er­zeu­gung für Re­la­tio­nen – und der Au­tor ei­nes Bei­trags wird den De­fault-Sys­tem­fel­dern hin­zu­ge­fügt wer­den. Wei­te­re In­for­ma­tio­nen da­zu fin­den Sie im Blog von Gra­phCMS [goo.gl/d6sWGh].

RE­ACT

Re­act ist ei­ne Ja­vaS­cript-Bi­b­lio­thek von Face­book, zur ver­ein­fach­ten Ent­wick­lung von Be­nut­zer­ober­flä­chen. In Re­act sind al­le Ele­men­te der Be­nut­zer­ober­flä­che Kom­po­nen­ten. Ei­ne Kom­po­nen­te kap­selt so­wohl das be­nö­tig­te HTML als auch das CSS, das für das De­sign der Kom­po­nen­ten zu­stän­dig ist. Die­ser Aspekt und die Tat­sa­che, dass so­wohl das HTML als auch das CSS in Ja­vas­cript bzw. JSX ge­schrie­ben wer­den muss, ist für Ent­wick­ler zu­nächst sehr ge­wöh­nungs­be­dürf­tig. Vie­le ha­ben al­ler­dings auch die Vor­tei­le die­ser Vor­ge­hens­wei­se ent­deckt, und so wird Re­act im­mer po­pu­lä­rer. Fol­gen­der Co­de zeigt ei­ne klei­ne Bei­spiel­kom­po­nen­te: Zu­sätz­li­che Frame­works wie Gra­phQL, Apol­lo und Next ver­ein­fa­chen die Ar­beit mit Re­act und bie­ten zu­sätz­li­che Fea­tu­res wie Uni­ver­sal Ja­vaS­cript und Rou­ting.

NEXT

Next ist ein klei­nes Frame­work für uni­ver­sal (ser­ver-si­de und cli­ent-si­de ren­de­ring) Re­act Ja­vas­cript-We­bapps. Next er­mög­licht ei­ne ein­fa­che Im­ple­men­tie­rung al­ler Rou­tes ei­ner We­bapp. Ein­zi­ge Vorraus­set­zung ist ein Ver­zeich­nis 'pa­ges'. Dort lie­gen al­le js-Da­tei­en, die, ver­ein­facht ge­sagt, die Sei­ten ei­ner Web­site ge­ne­rie­ren. Die Ver­zeich­nis­struk­tur stellt die Web­site-Struk­tur dar. Für die Na­vi­ga­ti­on in­ner­halb der Site stellt Next au­to­ma­tisch Cli­ent-Si­de Ren­de­ring zur Ver­fü­gung. Da­zu müs­sen Links le­dig­lich die Link API nut­zen. Der Co­de für ei­nen Link wird dann so im­ple­men­tiert: Next im­ple­men­tiert all die kom­pli­zier­ten Din­ge der Browser lo­ca­ti­on.his­to­ry, die bei Cli­ent-Si­de Ren­de­ring so an­fal­len. Der Browser-Back-But­ton funk­tio­niert „out of the box”. Im Link Tag müss­ten Sie üb­ri­gens nicht zwin­gend ei­nen a Tag nut­zen. Ein but­ton oder div könn­ten auch ein­ge­setzt wer­den. Die wich­tigs­ten Fea­tu­res von Next sind: • Ser­ver-Si­de Ren­de­ring • Au­to­ma­ti­sches Co­de Split­ting für op­ti­mier­te La­de­zei­ten • Cli­ent-Si­de Rou­ting und Ren­de­ring • Web­pack Front­end-Ent­wick­lung Dies sind nur ei­ni­ge der Vor­tei­le bei der Ent­wick­lung mit next.js. In die­sem Tutorial fin­den Sie die Grund­la­gen der We­bapp-Ent­wick­lung mit Next: learnnext­js.com.

APOL­LO

Apol­lo ist ein Gra­phQL Cli­ent, der es Ent­wick­lern er­mög­licht, ex­akt die Da­ten von ei­nem Gra­phQL-Ser­ver ab­zu­fra­gen, die für ei­ne Re­act-Kom­po­nen­te be­nö­tigt wer­den. Dar­über hin­aus kön­nen mit Apol­lo Da­ten ver­än­dert wer­den. Apol­lo ana­ly­siert auch die Que­ries und die Re­sul­ta­te, um ei­nen Cli­ent-Si­de Ca­che auf­zu­bau­en, der im­mer ak­tu­ell ge­hal­ten wird, wenn neue Que­ries ab­ge­schickt wer­den und neue Da­ten vom Gra­phQL-Ser­ver beim Cli­ent an­kom­men. Au­ßer­dem wer­den Apol­lo und die in­ter­ak­ti­ve Ober­flä­che Gra­phiQL vom Gra­phCMS API Ex­plo­rer ge­nutzt. Dies er­mög­licht es Ent­wick­lern, Que­ries zu schrei­ben und nach er­folg­rei­chem Test ein­fach in den ent­spre­chen­den Co­de der We­bapp zu ko­pie­ren. Durch den Ein­satz von Apol­lo sind Ent­wick­ler in der La­ge, Gra­phQL Que­ries zu schrei­ben und Da­ten ab­zu­fra­gen, oh­ne sich um De­tails der Im­ple­men­tie­rung küm­mern zu müs­sen. Das Da­ta­bin­ding funk­tio­niert ein­fach.

NOW

NOW ist ein De­ploy­ment- und Hos­ting-Ser­vice für sta­ti­sche und dy­na­mi­sche Si­tes, die mit No­de.js, Web­pack und z.B. Re­act.js ent­wi­ckelt wur­den. NOW stammt von den­sel­ben Ent­wick­lern wie NEXT. Mit der kos­ten­lo­sen Ver­si­on von NOW kön­nen be­lie­big vie­le Sub­do­mais de­ployt und ge­hos­tet wer­den. Ob Sie ei­ne „ech­te” Do­main be­nö­ti­gen, müs­sen Sie selbst ent­schei­den. Ei­ne Sub­do­main wie mei­ne-fir­ma.now.sh mag mit­un­ter auch aus­rei­chen. Be­nö­ti­gen Sie aber ei­ne Do­main, dann kos­tet das 15 Eu­ro pro Mo­nat für fünf Do­mains. Für 50 bis 200 US-Dol­lar kön­nen Sie auch En­ter­pri­se-Si­tes (viel Vo­lu­men und Traf­fic) mit NOW ver­wal­ten und hos­ten. Wenn Sie mit der Kom­man­do­zei­le nicht so ver­traut sind, kön­nen Sie auch ei­ne Desk­top-Ver­si­on von NOW be­nut­zen. Die­se ist für Win­dows und MacOS ver­füg­bar. Pro­bie­ren Sie es doch ein­fach mal mit ei­ner sta­ti­schen Web­site aus. Wech­seln Sie im CLI in das Ver­zeich­nis ei­ner Ih­rer Web­sites und ge­ben Sie dann „$ now” ein. Kurz da­nach ist die Site auf now.sh er­reich­bar. Wei­te­re In­for­ma­tio­nen er­hal­ten Sie hier: goo.gl/AtHJcK.

Abb. 2: Das Dash­board ei­nes Gra­phCMS-Pro­jekts

Abb. 3: Das Con­tent-Mo­dell des Bei­spiel-Pro­jekts

Abb. 1: Die Start­sei­te vom Gra­phCMS

Abb. 5: Inhaltserfassung mit dem Gra­phCMS

Abb. 4: Die Feld­ty­pen des Gra­phCMS

Abb. 6: Die In­halts­ver­wal­tung

Abb. 10: Screen­shot der De­mo-We­bapp

Twit­ter: @mdwp Kom­men­tie­ren: screen­gui.de/36/gra­phcms

Meinolf Dros­te ist seit über 20 Jah­ren in der Webentwicklung tä­tig und seit zwölf Jah­ren In­ha­ber der auf Dru­pal spe­zia­li­sier­ten We­bA­gen­tur mdwp* [mdwp.de]. Seit zwei Jah­ren ge­hö­ren auch die in die­sem Ar­ti­kel be­schrie­be­nen Tools und Tech­ni­ken zum Port­fo­lio.

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.