Jouluradion sivustolle uutta säpinää Headless-toteutuksella
![](https://www.itewiki.fi/write/post_images/16558.jpg)
Marraskuun alusta loppiaiseen soinut Jouluradio tavoitti vuonna 2018 jälleen ennätysmäärän kuulijoita. Kanava keräsi radiovastaanottimien äärelle joulukuun aikana 787 000 viikkokuuntelijaa ja oli Suomen 5. kuunnelluin radiokanava. Tässä artikkelissa kerromme, miten ja miksi toteutimme Jouluradion uuden verkkopalvelun WordPress + React -yhdistelmänä.
Kuumalinja keräsi viestien tulvan
Joulu kolkuttelee jo kulman takana, joten on hyvä muistella vuoden takaista Jouluradio.fi -uudistusta. FM-taajuuden tueksi, 2018 syksyllä avattiin Jouluradion uudet verkkosivut, joiden välityksellä joulumusiikin vannoutuneet ystävät saivat sesongin ajan nauttia FM-taajuuden lisäksi yhdeksästä muusta kanavasta verkossa. Verkkosivuille tehtiin joulun aikaan parhaimmillaan lähes 50 000 käyntiä päivässä.
Sivuston toiminnallisuuksista suureen suosioon nousi Kuumalinja-palauteseinä, joka keräsi käyttäjiltä yli 2500 viestiä. Kuumalinja onkin matalan kynnyksen kanava, sillä käyttäjille tarjottiin simppelisti input-kenttä ja Lähetä-nappi. Viestit lähtivät anonyymina seinälle, josta muutkin käyttäjät niitä saivat lukea. Suosion myötä Kuumalinjaan toteutettiin toiminnallisuus, jolla jouluradiolaiset voivat lähettää vastauksia kuuntelijoiden viesteihin. Alunperin Kuumalinja suunniteltiin, koska toiveena oli siirtää Jouluradion ja kuuntelijoiden vuorovaikutusta Facebookista verkkosivuille.
Kanavaa striimeinä valikoimaan
Uudistuksen myötä Jouluradion player-osuus sijoitettiin sivun vasempaan laitaan, jolloin se on aina samalla tavalla näkyvillä. Huolimatta siitä, että Play-napista tehtiin suhteellisen iso ongelmaksi muodostui se, etteivät käyttäjät tienneet, mistä radion saa päälle. Universaali play-ikoni ei ollutkaan niin universaali kuin kuviteltiin. Painikkeesta saatiin käytettävämpi, kun ikonin yhteyteen lisättiin kehoteteksti. Play-napin lisäksi Playerista voi nähdä soivan kappaleen nimen ja esittäjän, siirtyä selaamaan viimeksi soitettuja tai vaihtaa kanavaa kanavalistalta.
Kanavien tekninen toteutus pähkinänkuoressa:
Nettiradion eri kanavat striimattiin ulkoisesta järjestelmästä. Striimien lisäksi integraationa tehtiin webhook, jonne järjestelmä lähetti soivan kappaleen metatiedot kappaleen vaihtuessa eri kanavilla ja se lähetettiin websocketilla frontendille. Samalla soiva kappale lisättiin tietokantaan, jolloin voitiin ylläpitää tietoa viimeksi soitetuista kappaleista.
Joulu kolkuttelee jo kulman takana, joten on hyvä muistella vuoden takaista Jouluradio.fi -uudistusta. FM-taajuuden tueksi, 2018 syksyllä avattiin Jouluradion uudet verkkosivut, joiden välityksellä joulumusiikin vannoutuneet ystävät saivat sesongin ajan nauttia FM-taajuuden lisäksi yhdeksästä muusta kanavasta verkossa. Verkkosivuille tehtiin joulun aikaan parhaimmillaan lähes 50 000 käyntiä päivässä.
Sivuston toiminnallisuuksista suureen suosioon nousi Kuumalinja-palauteseinä, joka keräsi käyttäjiltä yli 2500 viestiä. Kuumalinja onkin matalan kynnyksen kanava, sillä käyttäjille tarjottiin simppelisti input-kenttä ja Lähetä-nappi. Viestit lähtivät anonyymina seinälle, josta muutkin käyttäjät niitä saivat lukea. Suosion myötä Kuumalinjaan toteutettiin toiminnallisuus, jolla jouluradiolaiset voivat lähettää vastauksia kuuntelijoiden viesteihin. Alunperin Kuumalinja suunniteltiin, koska toiveena oli siirtää Jouluradion ja kuuntelijoiden vuorovaikutusta Facebookista verkkosivuille.
Kanavaa striimeinä valikoimaan
Uudistuksen myötä Jouluradion player-osuus sijoitettiin sivun vasempaan laitaan, jolloin se on aina samalla tavalla näkyvillä. Huolimatta siitä, että Play-napista tehtiin suhteellisen iso ongelmaksi muodostui se, etteivät käyttäjät tienneet, mistä radion saa päälle. Universaali play-ikoni ei ollutkaan niin universaali kuin kuviteltiin. Painikkeesta saatiin käytettävämpi, kun ikonin yhteyteen lisättiin kehoteteksti. Play-napin lisäksi Playerista voi nähdä soivan kappaleen nimen ja esittäjän, siirtyä selaamaan viimeksi soitettuja tai vaihtaa kanavaa kanavalistalta.
Kanavien tekninen toteutus pähkinänkuoressa:
Nettiradion eri kanavat striimattiin ulkoisesta järjestelmästä. Striimien lisäksi integraationa tehtiin webhook, jonne järjestelmä lähetti soivan kappaleen metatiedot kappaleen vaihtuessa eri kanavilla ja se lähetettiin websocketilla frontendille. Samalla soiva kappale lisättiin tietokantaan, jolloin voitiin ylläpitää tietoa viimeksi soitetuista kappaleista.
Headless WordPress + React -toteutus, mutta miksi?
Tämän vuoden puolella on käyty kiivasta keskustelua sosiaalisissa medioissa koskien WordPress sivuston frontin toteutusta Reactilla ja sitä, onko Reactista tullut uusi Flash? On puhuttu Javascript-buumista ja siitä kuinka kehittäjien keskuudessa Javascript-kehykset houkuttelevat enemmän kuin perinteiset, pitkän linjan julkaisujärjestelmät. Asiakkaitakin hybridimalli tuntuu kovasti kiinnostavan, mutta millaisessa toteutuksessa se on kannattava?
Jouluradio ei ollut sisältöpainotteinen sivusto vaan enemmän sovelluksenomainen soitin, jonka päätarkoituksena on toimia käyttöliittymänä joululaulujen soittamiseen. Tämän lisäksi sivustolla oli kuitenkin jonkin verran aiheeseen liittyvää sisältöä, joten sisällönhallinnan työkalulle oli selkeä tarve ja se puolsi WordPressin käyttöä itse sisällön tuotantoon. Tästä syystä päädyimme headless WordPress-toteutukseen. Ensimmäistä sivunlatausta varten varten Reactin takana on Next.js toteutus.
Käänny asiantuntijan puoleen
Meidän näkemyksemme on, että perus viestinnällinen verkkosivusto, joka on vahvasti sisältöpainottunut ei juuri hyödy headless-konseptista. Kuten keskusteluissa on tullut esille se voi tuoda monia asioita ratkaistavaksi, jotka perus WordPress toteutuksella tehtynä on kunnossa “out-of-the-box”.
Suosittelemme siis tässäkin asiassa kääntymään asiantuntijan puoleen, kun suunnittelet verkkosivuston uudistamista ja harkitset headless-toteutusta. Selvitetään yhdessä, minkälainen ratkaisu juuri sinun ja varsinkin käyttäjiesi hyväksi on paras ja kustannustehokkain.
Tämän vuoden puolella on käyty kiivasta keskustelua sosiaalisissa medioissa koskien WordPress sivuston frontin toteutusta Reactilla ja sitä, onko Reactista tullut uusi Flash? On puhuttu Javascript-buumista ja siitä kuinka kehittäjien keskuudessa Javascript-kehykset houkuttelevat enemmän kuin perinteiset, pitkän linjan julkaisujärjestelmät. Asiakkaitakin hybridimalli tuntuu kovasti kiinnostavan, mutta millaisessa toteutuksessa se on kannattava?
Jouluradio ei ollut sisältöpainotteinen sivusto vaan enemmän sovelluksenomainen soitin, jonka päätarkoituksena on toimia käyttöliittymänä joululaulujen soittamiseen. Tämän lisäksi sivustolla oli kuitenkin jonkin verran aiheeseen liittyvää sisältöä, joten sisällönhallinnan työkalulle oli selkeä tarve ja se puolsi WordPressin käyttöä itse sisällön tuotantoon. Tästä syystä päädyimme headless WordPress-toteutukseen. Ensimmäistä sivunlatausta varten varten Reactin takana on Next.js toteutus.
Käänny asiantuntijan puoleen
Meidän näkemyksemme on, että perus viestinnällinen verkkosivusto, joka on vahvasti sisältöpainottunut ei juuri hyödy headless-konseptista. Kuten keskusteluissa on tullut esille se voi tuoda monia asioita ratkaistavaksi, jotka perus WordPress toteutuksella tehtynä on kunnossa “out-of-the-box”.
Suosittelemme siis tässäkin asiassa kääntymään asiantuntijan puoleen, kun suunnittelet verkkosivuston uudistamista ja harkitset headless-toteutusta. Selvitetään yhdessä, minkälainen ratkaisu juuri sinun ja varsinkin käyttäjiesi hyväksi on paras ja kustannustehokkain.
Referenssin infoboxi
![Hion Digital Oy logo](https://www.itewiki.fi/thumb.php?src=https://www.itewiki.fi/write/logos/hiondigital.jpg&size=x100)
Tiedot
Tilaaja: | Kirkko ja kaupunki/HSRKY |
Ajankohta: | 2018 - 2019 |
Toimittajan yhteyshenkilö: |
Jani Mäkelä, projektipäällikkö |
Lisätietoja
Tagit
Erikoisosaaminen
![]() |
Käyttöliittymäsuunnittelu |
![]() |
Testaus ja laadunvarmistus |
![]() |
Webkehitys |
Toimialakokemus
![]() |
Järjestöt ja yhdistykset |
![]() |
Media |
Teknologia
![]() |
React |
![]() |
WordPress |
Tarjonnan tyyppi
![]() |
Toteutustyö |
![]() |
Tuki- ja ylläpitotyö |
Omat tagit
headless
Stream
kuumalinja
webhook
Hion Digital - Asiantuntijat ja yhteyshenkilöt
Hion Digital - Muita referenssejä
Hion Digital - Muita bloggauksia
It- ja ohjelmistoalan työpaikat
- Netum Group Oyj - Kokenut integraatioasiantuntija
- Laura - Integration Engineer
- Laura - Configuration Management Engineer
- Netum Group Oyj - Oracle-taitoinen ohjelmistokehittäjä
- Netum Group Oyj - AI-arkkitehti tai kehittäjä GenAI-painotuksella
- Laura - Senior IT Systems Engineer – Core Infrastructure Services
- Laura - ICT-arkkitehti: ICT-yksikkö, Joensuu (id8937)
Premium-asiakkaiden viimeisimmät referenssit
- Etteplan - Pitkäjänteinen kumppani kehittämään moderni ERP-järjestelmä JIS-Automationin tarpeisiin
- Etteplan - Tarkan paikannuksen kehittäminen vauhdittaa Kalmarin tutkimusprojektia – apuna Etteplan Rugged Evaluation Platform
- Advania Finland Oy - Virtuaalinen työpöytäratkaisu paransi Keusoten loppukäyttäjäkokemusta ja vähensi IT-kustannuksia
- Advania Finland Oy - Toimintavarma Genesys Cloud -asiakaspalveluratkaisu sopii hälytyskeskuksen vaatimuksiin
- Advania Finland Oy - Poikkeamaportaalin käyttöönotto paransi Skanskan rakennustyömaiden turvallisuudesta kerättävän tiedon määrää ja laatua
- Advania Finland Oy - Teknologian hyödyntäminen vie Pelicansin uusiin ulottuvuuksiin jäällä ja sen ulkopuolella
- Netum Group Oyj - Postin logistiikkajärjestelmän kehittäminen on Netumin osaavissa käsissä
Tapahtumat & webinaarit
Premium-asiakkaiden viimeisimmät bloggaukset
- Nordea - Kyberturvallisuusmatka Nordealla: Linda Milvin tarina
- Ready Solutions Oy - Mitä on luottoriskien hallinnan data-analytiikka?
- Nordea - Nordea x Women in Tech: Data ja Analytiikka Nordealla
- Timeless Technology - ControlByWeb - Web-pohjaiset "drop-in" ratkaisut etäohjaukseen ja -monitorointiin.
- Rakettitiede Oy - Sinustako Rakettitieteen konsultti?
- Rakettitiede Oy - Rakettitieteen arvot – no bullshit ja viisi muuta teesiä
- Etteplan - Väsymätön ja tarkka diagnostikko – koneoppiminen ravistelee terveydenhoitoa
![]() |
Digitalisaatio & innovaatiot blogimediaBlogimediamme käsittelee tulevaisuuden liiketoimintaa, digitaalisia innovaatioita ja internet-ajan ilmiöitä |