Headless CMS -pohjaisen kuvagallerian rakentaminen verkkosivuille
Hakola, Kaisa (2025)
Hakola, Kaisa
2025
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202504257689
https://urn.fi/URN:NBN:fi:amk-202504257689
Tiivistelmä
Tässä opinnäytetyössä rakennettiin moderneja verkkosivutekniikoita käyttäen kuvagalleria, jolle pystytettiin headless CMS -järjestelmä sisällönhallintaa varten. Toimeksiantaja on Psyche’s Royale Gaming ry, joka on kehittämässä ALT Zone -nimistä mobiilipeliä sekä sille verkkosivuja. Tavoitteena oli ottaa selvää headless CMS:n tarkoituksesta ja toiminnallisuudesta, ottaa käyttöön Directus niminen sisällönhallintajärjestelmä sekä rakentaa kuvagallerialle käyttöliittymä.
Opinnäytetyön teoriaosuus keskittyy headless CMS:n ja Directuksen toiminnallisuuden selvittämiseen sekä käyttöliittymän tarvitsemien teknologioiden läpikäymiseen. Kehitystyöhön kuului kuvagallerian kehittäminen verkkosivuille, joka sisälsi frontend-puolen, eli käyttöliittymän koodaamisen, sekä Directuksen käyttöön ottamisen.
Directus otettiin käyttöön seuraamalla palvelun omaa virallista dokumentaatiota ja ohjeistusta. Sisällönhallintajärjestelmän rakenne suunniteltiin ja toteutettiin Directuksen toiminnallisuuden sekä kuvagallerian tarpeiden pohjalta. Kuvat ja niiden tarvitsema data lisättiin Directuksen Data Studio App -verkkosovellukseen, jossa niitä voivat muokata myös sellaiset verkkosivuprojektiin kuuluvat jäsenet, joiden tekniset taidot eivät riittäisi tietokannan tai koodin käsittelyyn. Käyttöliittymä tehtiin Next.js-pohjaiseen projektiin, jonka ohjelmointikielenä toimi TypeScript. Kuvagallerian koodi järjesteltiin projektissa käytettävän FSD-arkkitehtuurin mukaisesti.
Tuloksena syntyi toimiva kuvagalleria, jonka sisältö on tallessa Directus-palvelussa. Kuvagalleria on nähtävillä ALT Zone -mobiilipelin virallisilla verkkosivuilla, ja ylläpitäjät pystyvät hallitsemaan galleriassa näkyviä kuvia Directuksen kautta. Kuvagallerian ilme tulee muuttumaan lähitulevaisuudessa, sillä projektin UI/UX-suunnittelijoilla on opinnäytetyön kirjoittamisen aikana kesken verkkosivujen ulkonäön uudistaminen. Myös gallerian ulkonäköä kehitetään tulevaisuudessa.
Opinnäytetyön teoriaosuus keskittyy headless CMS:n ja Directuksen toiminnallisuuden selvittämiseen sekä käyttöliittymän tarvitsemien teknologioiden läpikäymiseen. Kehitystyöhön kuului kuvagallerian kehittäminen verkkosivuille, joka sisälsi frontend-puolen, eli käyttöliittymän koodaamisen, sekä Directuksen käyttöön ottamisen.
Directus otettiin käyttöön seuraamalla palvelun omaa virallista dokumentaatiota ja ohjeistusta. Sisällönhallintajärjestelmän rakenne suunniteltiin ja toteutettiin Directuksen toiminnallisuuden sekä kuvagallerian tarpeiden pohjalta. Kuvat ja niiden tarvitsema data lisättiin Directuksen Data Studio App -verkkosovellukseen, jossa niitä voivat muokata myös sellaiset verkkosivuprojektiin kuuluvat jäsenet, joiden tekniset taidot eivät riittäisi tietokannan tai koodin käsittelyyn. Käyttöliittymä tehtiin Next.js-pohjaiseen projektiin, jonka ohjelmointikielenä toimi TypeScript. Kuvagallerian koodi järjesteltiin projektissa käytettävän FSD-arkkitehtuurin mukaisesti.
Tuloksena syntyi toimiva kuvagalleria, jonka sisältö on tallessa Directus-palvelussa. Kuvagalleria on nähtävillä ALT Zone -mobiilipelin virallisilla verkkosivuilla, ja ylläpitäjät pystyvät hallitsemaan galleriassa näkyviä kuvia Directuksen kautta. Kuvagallerian ilme tulee muuttumaan lähitulevaisuudessa, sillä projektin UI/UX-suunnittelijoilla on opinnäytetyön kirjoittamisen aikana kesken verkkosivujen ulkonäön uudistaminen. Myös gallerian ulkonäköä kehitetään tulevaisuudessa.