Breadigree

Miféle webfejlesztőnek nincs legalább egy Wordpresses projektje a portfóliójában, nem igaz? Nos én ezt egy kicsit tovább gondoltam és úgy döntöttem, hogy egy Headless Wordpress alkalmazást fogok készíteni ami egy létező WP oldal adatbázisából olvassa ki a számára szükséges adatokat és jeleníti meg a felhasználónak. Egyszerű kalandnak hangzik? Nos ha ingyen akarod megúszni a dolgot mint ahogy én akkor közel sem az. Hogy őszinte legyek be kellett járnom a hét óperenciát mire találtam egy tárhelyet amire nemcsak rá tudok telepíteni egy Wordpress oldalt de a szolgáltató még meg is engedi hogy távoli hívásokkal le tudjam kérni a tartalmát.

De hogy az oldalról is beszéljek, a Breadigree egy fiktív pékség Nuxt.js-ben írt weboldala ami péktermékeket, kategóriákat (tageket), egy képgalériát és blog bejegyzéseket jelenít meg amiket egy távoli Wordpress oldal REST API végpontjairól olvas ki. A Wordpress oldalon telepítettem egy általam írt PHP plugint ami lehetővé teszi hogy az admin vezérlőfalon új termékeket és kategóriákat lehessen felvenni pont úgy mint egy új blog bejegyzést (lévén hogy az adatbázisban tényleg blog bejegyzések, legalábbis ugyanabban a táblában vannak elmentve csak egy mező megkülönbözteti őket a valódi posztoktól), illetve egy képgaléria "szerkesztő" oldalt ad hozzá amivel ki lehet választani a médiatárból a megfelelő képeket. Mindezt és a Worpresses blog cikkeket egy REST végpontból olvassa ki a frontend ami úgy mellesleg minden WP telepítés alaptartozéka (ha a tulajdonos nem tiltja le szándékosan egy bővítménnyel), tehát bármilyen Wordpresses oldalnak készíthetünk ugyanígy egy alternatív kinézetet. És mivel viszonylag nagy adatforgalom történik valahányszor sok dolgot kell lekérnie egyszerre, a frontend 60 percig cache-el (elment) minden választ hogy ne keljen feleslegesen újra lekérdezni olyan adatokat amit már ismerünk és kis valószínűséggel fognak megváltozni.

A frontend oldal Nuxt.js 4-ben íródott főleg Tailwind osztályokkal. A Wordpress backend megtalálható a https://wpbackend.fabokarpad.hu oldalon.

Github forráskód: https://github.com/FarpadGit/Breadigree