Kuttet hodet til WordPress da de skulle lage ny plattform for Citybox

Slik bygget design- og teknologiselskapet Heisenbug ny teknologiplattform for den norske hotellkjeden.

Den nye plattformen til Citybox skal gjøre det enda enklere for gjestene å gjøre alt selv. 📸: Citybox
Den nye plattformen til Citybox skal gjøre det enda enklere for gjestene å gjøre alt selv. 📸: Citybox Vis mer

Den norske hotellkjeden Citybox har spesialisert seg på selvbetjeningshoteller der gjestene gjør alt fra booking av rom til innsjekking på egen hånd. Den tekniske plattformen var imidlertid overmoden for utskiftning.

Nå er Citybox i gang med å rulle ut en helt ny teknologiplattform der nesten alt er bygget fra bunnen av. Den nye plattformen lages av teknologi- og designselskapet Heisenbug, som har spesialisert seg på blant annet løsninger for reiselivsbransjen.

Tibor Mæhlum, daglig leder og grunnlegger av Heisenbug. 📸: Heisenbug
Tibor Mæhlum, daglig leder og grunnlegger av Heisenbug. 📸: Heisenbug Vis mer

– Slik vi har bygget det, så har vi gitt Citybox et nesten blankt ark. Og så har vi brukt mye tid på hvordan vi kan lage en mest mulig sømløs gjestereise, sier Tibor Mæhlum, daglig leder og grunnlegger av Heisenbug.

Next.js oppå WordPress

Det gamle systemet var en WordPress-side med en bookingmodul laget i PHP. Systemet hadde en masse begrensninger, men det kanskje største problemet var at det ikke var mulig for kunden å administrere sin egen booking.

I det nye systemet har Heisenbug valgt – kanskje litt overraskende for noen – å beholde WordPress. Men bare som et headless CMS slik at Citybox kan fortsette å bruke WordPress til å legge inn og publisere innhold, som så leveres via API-er til en frontend laget i Next.js.

Markus Mæhlum er fullstack-utvikler og partner i Heisenbug. Han forteller at selv om de har erfaring med andre hodeløse CMS-systemer som Sanity, så hadde de gode grunner til å fortsette med WordPress denne gangen.

«Citybox var kjent med WordPress fra før, og det er open source så vi kunne tilpasse det som vi ville.»

– Citybox var kjent med WordPress fra før, og det er open source så vi kunne tilpasse det som vi ville. I dette prosjektet passet det best, siden kunden var vant med å bruke WordPress, sier Markus Mæhlum.

Next.js-frontenden kjører på Vercels skyplattform. Alt er kodet med TypeScript og det er brukt Tailwind CSS for styling og Framer Motion for animasjoner og effekter.

– Med den nye løsningen skal det være enklere å finne og booke rom. Vi har laget en priskalender der du kan finne den laveste prisen, og så kan du administrerere bookingen etterpå, sier Tibor Mæhlum.

Bygget API på toppen

En selvbetjeningsløsning for en hotellkjede er selvfølgelig mye mer enn bare en fin nettside. Tibor Mæhlum forteller at det var veldig mye som skulle knyttes sammen da den nye løsningen skulle bygges.

Hoteller bruker gjerne noe som kalles PMS-løsninger – Property Management System. I PMS-verdenen er det mye "legacy", og det å lage integrasjoner mot slike systemer kan ofte være en utfordring.

Heisenbug valgte å bygge sitt eget API som skulle ligge som et lag i mellom Next-applikasjonen og PMS-systemet til Citybox og "oversette".

– Vi har laget et eget API i Vercel Edge Functions som kommuniserer med PMS-systemets XML-API. Det er et API som ligger oppå deres, slik at vi kan snakke JSON-objekter, forklarer fullstack-utvikler Espen Sævig i Heisenbug.

Slik er den nye plattformen til Citybox skrudd sammen. API-er i Next.js som kjører i Vercel Edge Functions oversetter XML-dataene fra PMS-systemet til JSON som enklere kan brukes i Next-applikasjonen. 📸: Heisenbug
Slik er den nye plattformen til Citybox skrudd sammen. API-er i Next.js som kjører i Vercel Edge Functions oversetter XML-dataene fra PMS-systemet til JSON som enklere kan brukes i Next-applikasjonen. 📸: Heisenbug Vis mer

På backenden ellers benyttes Google Cloud og Firebase, for blant annet autentisering og "Min side" der kundene kan administrere bookingene sine.

– Så har vi en del cron-jobber som kjører i Google Cloud, blant annet til e-postutsendelser når man bestiller, sjekker inn, og så videre, sier Sævig.

Cronjobbene kjører i Google Cloud Run, som kaller på API-ruter laget i Next.js for å trigge utsendelse av e-post og SMS.

Håndtering av kommunikasjon via e-post og SMS gjøres via et system Heisenbug har utviklet selv:Heisenbug CAT. Dette er basert på Resend (React Email) og Sveve (SMS).

Satt i drift

Den nye løsningen er nå i drift og kan brukes både på kundens enheter, samt av Citybox' ansatte som legger inn informasjon i systemet via WordPress-løsningen.

Den nye løsningen skal være enklere å bruke og gi flere muligheter for både gjester og hotellansatte. 📸: Citybox
Den nye løsningen skal være enklere å bruke og gi flere muligheter for både gjester og hotellansatte. 📸: Citybox Vis mer

Det er også selvbetjente innsjekkingskiosker på hotellene. Disse vil snart også bli byttet ut med mer avanserte innsjekkingskiosker som vil bruke de samme API-ene som web-løsningen. De nye kioskene vil også få en rekke andre muligheter de ikke har i dag, som blant annet pass- og ID-sjekk.

Markedssjef Dorthea Berge sier til kode24 at hun er svært fornøyd med den nye løsningen, og mener den vil gjøre det enda enklere å være gjest hos dem.

Berge forteller at hotellkjeden har begynt en ganske aggressiv ekspansjon. Etter at de åpnet det første hotellet i Bergen i 2006, har de nå hoteller i blant annet Oslo, Kristiansand, Tallin og Antwerpen.

– Neste år åpner vi i Helsinki, Stockholm, Brussel, Stavanger og Tromsø. Det blir Nord-Norges største hotell, sier Berge.