Maskorama-profeten til VG hadde én utfordring: Feilstava kjendiser

Sånn lagde de Maskorama-profeten med Next.js, Fastify, Kubernetes og Wikipedia-skraping.

Maskorama-profeten på VG Nett lar nordmenn tippe hvem som skjuler seg bak maskene i Maskorama. Og like viktig; de kan se hvem andre tror skjuler seg. 📸: Ole Petter Baugerød Stokke
Maskorama-profeten på VG Nett lar nordmenn tippe hvem som skjuler seg bak maskene i Maskorama. Og like viktig; de kan se hvem andre tror skjuler seg. 📸: Ole Petter Baugerød Stokke Vis mer

NRK-programmet Maskorama ble et lyspunkt for mange under en tung koronahøst i fjor. Så mange som 1,4 millioner seere fikk med seg finalen, ifølge Kampanje.

Nå er Maskorama tilbake, og foreløpig er interessen høy også i år.

Så høy at VG denne sesongen har laga sin egen tjeneste for nordmenn som elsker å gjette hvilke kjendiser som skjuler seg bak de ekstravagante maskene: Maskorama-profeten.

Hvor den største utfordringen ikke var å takle flere hundre tusen tippinger og visninger, men nordmenns manglende evne til å stave.

Maskorama-profeten er laga av utviklerne Jarle Brenna og Sondre Nilsen.
Maskorama-profeten er laga av utviklerne Jarle Brenna og Sondre Nilsen. Vis mer

Bygd på EM-profeten

- Det ligger i VGs kjerne å lage innhold om det folk er opptatt av. Enten det er corona, OL eller i dette tilfellet: Maskorama, forteller VG-utvikler Sondre Nilsen til kode24.

- Initiativet til dette spesifikke prosjektet kom fra oss utviklere. Det har lenge vært en erkjennelse at vi burde lage mer "gøy" rundt planlagte rampelyshendelser som har stort engasjement hos folket, fortsetter han.

Nilsen fikk med seg VG-utvikleren Jarle Brenna, og sammen har de to gjort alt arbeidet på Maskorama-profeten. Men de fikk drahjelp av gammel kode.

- Vi bygde det med den tidligere publiserte "EM-profeten" som utgangspunkt, noe vi synes fungerte godt. Dette har vært et "mellom-andre-ting-prosjekt", så det var aldri tiltenkt at vi skulle utforske andre teknologier eller rammeverk i særlig grad, forklarer Nilsen.

Tipper du riktig kjendis får du poeng i Maskorama-profeten, og kan være med i ligaer for å klatre oppover ledertavlene. 📸: Ole Petter Baugerød Stokke
Tipper du riktig kjendis får du poeng i Maskorama-profeten, og kan være med i ligaer for å klatre oppover ledertavlene. 📸: Ole Petter Baugerød Stokke Vis mer

Next.js og Fastify

Frontenden til Maskorama-profeten er bygd med React-rammeverket Next.js. Det det gir VG-utviklerne fleksibiliteten de trenger, ifølge Nilsen.

Designet er bygd opp med CSS-moduler, men uten noen CSS-rammeverk - med unntak av et par elementer fra Material-UI.

Backenden er skrevet med rammeverket Fastify, som beskriver seg selv som et "Fast and low overhead web framework, for Node.js". Databasen er av typen MariaDB, som kaller seg "The open source relational database".

- API-et kjører i Kubernetes, slik at vi enkelt kan skalere ned og opp basert på hvor populært det er hos leserne, forteller VG-utvikler Jarle Brenna.

Takler hundretusenvis av visninger

Foreløpig er det levert over 100.000 tippinger fra 37.000 unike brukere i VGs Maskorama-profeten. Men også det å se hva andre tipper, og følge med på sin egen og andres poengsum i alle ligaene, driver mye trafikk. Dermed er bruken også høy gjennom hele uka.

- På enkelte dager har tjenesten har vært blant de mest besøkte på VGs flater, med rundt 500.000 visninger i døgnet. Men denne trafikken har vært uproblematisk, forteller Nilsen.

Tjenestens backend, altså Kubernetes-clusterne, ligger på to datasentre i Oslo, med AWS-servere parate ved behov. Frontendens statiske Javascript ligger på tradisjonelle Apache-webservere, også disse på to ulike datasentre.

- Valget av Fastify som rammeverk for API-et skyldes at det er raskt. Siden profeten behandler brukerdata kan vi i liten grad cache innholdet, hastighet blir derfor viktig. Det svakeste punktet vårt er MariaDB-databasen, men så langt har vi klart å ta unna trafikken uten problemer, forteller Brenna.

Hvordan løser Maskorama-profeten feilstava kjendisnavn? Med forslag, fra en stor skraping av Wikipedia. 📸: Ole Petter Baugerød Stokke
Hvordan løser Maskorama-profeten feilstava kjendisnavn? Med forslag, fra en stor skraping av Wikipedia. 📸: Ole Petter Baugerød Stokke Vis mer

Foreslår 7.000 navn

- Var det noe som viste seg å være vanskeligere enn dere trodde?

- Nei, men vi tok noen grundige forholdsregler, svarer Nilsen.

Én av dem var å unngå duplikater av kjendisforslag. For som nevnt er mye av poenget med Maskorama-profeten å se hvem andre tror skjuler seg bak maskene.

Hver kjendis skulle ha derfor ha én ID, og hvordan folk stava navnet skulle ikke ødelegge systemet. Om mange gjetter at Emil Solli-Tangen skjuler seg bak Snømonsteret, skal altså ikke topplista kunne bli "Emil Soli-Tangen", "Emil Solli Tangen", "Emil Sollitangen" og så videre.

- Løsningen ble en typeahead bestående av forslag på rundt 7.000 kjendisnavn. Denne listen ble komponert i forkant, ved å skrape et utvalg på rundt 200 Wikipedia-kategorier, forteller Nilsen.

- Tanken var at det ville spare oss for mye jobb med å gi leserne navneforslag, fremfor å eventuelt måtte behandle en stor andel fritekstforslag, som kanskje ikke kunne automerges med korrekt skrivemåte.