Headless CMS -pohjaisen kuvagallerian rakentaminen verkkosivuille

Abstract

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.

This thesis goes over the process of using modern web development techniques to build an image gallery with a headless content management system working in the back. The client company is Psyche’s Royale Gaming ry which is currently developing a mobile game called ALT Zone, and in addition a website for the game. The aim of the thesis is to find out the functionality of headless CMS, deploy a software called Directus, and develop a User Interface for the gallery.

Directus was taken to use by researching instructions from the official Directus documentation. The structure of the CMS was designed and implemented by considering the functionality of Directus and the needs of the image gallery. The User Interface was made with Next.js and the programming language used was TypeScript. The code for the gallery was organized by following the FSD-architecture.

As a result, the ALT Zone website got a working image gallery with its data maintained in a headless CMS. The images that are visible on the gallery, can be managed through the Directus Data Studio App. Some improvements that the gallery page will get in the future, is a new design for the UI.