15.10.2014

Kainuun Sanomat siirtyi WordPressin päälle

Alma Aluemedian Kainuun Sanomien sivusto haluttiin uudistaa kokonaan. Uudistuksessa oli useita tavoitteita. Sivustoon haluttiin rakentaa maksullinen osio, jossa on saatavilla sama sisältö kuin printissä. Toinen tavoite oli toteuttaa palvelu WordPress -julkaisujärjestelmän päälle, jotta voidaan testata, kuinka avoimen lähdekoodin ratkaisut, ja erityisesti WordPress, sopii ison uutistalon tarpeisiin. Kolmantena haluttiin tehdä toteutus responsiivisena ja tutkia kuinka hyvin […]
kainuun_sanomat

Alma Aluemedian Kainuun Sanomien sivusto haluttiin uudistaa kokonaan. Uudistuksessa oli useita tavoitteita. Sivustoon haluttiin rakentaa maksullinen osio, jossa on saatavilla sama sisältö kuin printissä. Toinen tavoite oli toteuttaa palvelu WordPress -julkaisujärjestelmän päälle, jotta voidaan testata, kuinka avoimen lähdekoodin ratkaisut, ja erityisesti WordPress, sopii ison uutistalon tarpeisiin. Kolmantena haluttiin tehdä toteutus responsiivisena ja tutkia kuinka hyvin tämän hetken mainosratkaisut taipuvat responsiivisiin sivustoihin.

Samalla haluttiin myös yhdistää Kainuun Sanomat ja paikalliset uutissivustot Sotkamo-lehti, Ylä-Kainuu ja Kuhmolainen saman sivuston alle, kuitenkin niin, että jokainen sivusto säilyttää oman identiteettinsä. Projektin onnistumisen kriteereinä oli myös, että järjestelmä piti toteuttaa toimittajariippumattomaksi ja arkkitehtuuriltaan skaalautuvaksi palvelemaan kymmeniä tuhansia yhtäaikaisia käyttäjiä.

Konseptointi ja käyttäjäkokemus käsi kädessä

Uuden palvelun konseptointi lähti idealla “from board to code” eli toteuttamalla suoraan konseptia HTML5 prototyyppinä. Ensimmäisenä käytiin läpi miten eri lehdet saadaan saman sivuston alle. Prototyypin avulla saadaan heti konkreettisempi tuntuma toimiiko konsepti vai ei. Protoa voi käpistellä eri laitteilla, ja sen avulla löytää käyttötapauksia sekä ongelmia hyvin aikaisessa vaiheessa. Tämä tuo kustannustehokkuutta erityisesti monimutkaisissa palveluissa, joissa voi olla hyvin kallista huomata konseptuaalinen ongelma vasta koodausvaiheessa.

ville pietarinen

Kun tämä oltiin saatu valmiiksi, lähdettiin miettimään sivuston maksullisuuden konseptia Cava Interactiven kanssa. Ideakierros starttasi Cavan vetämänä työpajoissa. Työstettävänä oli tapa, jolla maksulliset jutut eroavat maksuttomista, ja kuinka maksulliset tuodaan esille mahdollisimman houkuttelevasti. Työn pohjalta Cava toteutti konseptin, jota testattiin eri käyttäjäryhmillä. Työpajojen pohjalta syntyi uuden sivuston leiska, jolle tehtiin käyttäjätestauskierroksia.

Uuden käyttöliittymän kantava teema oli yksinkertaisuus. Päänavigaatiota uutissivustoilla klikataan hyvin vähän, mutta kuitenkin ne vievät usein leijonanosan käyttöliittymästä. Lopussa päädyttiinkin vain neljään nappiin: koti, Kainuu, maksulliset ja uutiset. Uutisten alta avautuvat loput osastot kuten kotimaa, ruoka ja pääkirjoitukset esimerkiksi.

Järjestelmä maksullisuuden hallintaan

Maksullisten juttujen tuominen sivustolle vaatii taakseen “maksumuurin”. Geniem kehitti monikäyttöisen järjestelmän, jonka avulla tuotepäälliköt voivat toteuttaa tarjouksia, sekä tehdä tuotepaketteja ja promootioita eri lehdille joustavasti.

Järjestelmän pitää integroitua olemassa olevaan tuotantojärjestelmään, joka on Kainuun Sanomissa Anygraafin Doris-järjestelmä, sekä Cirix tilaustenhallintajärjestelmään, jossa säilytetään asiakastilejä ja tilauksia. Maksullisuuden mahdollistava taustajärjestelmä toteutettiin niin, että se on mahdollista ottaa käyttöön myös muissa Alma Median palveluissa. Maksujärjestelmä toteutettiin Javalla Spring MVC kehyksen päälle ja Mongo tietokannalla.  Asiakaspalvelun käyttöliittymä toteutettiin Angular.js-sovelluksena.

Toteutus tehtiin 1,5 henkilön ketterän kehitystiimin voimin kahdeksassa kolmen viikon sprintissä. Testauksessa käytettiin Seleniumilla tehtyjä automaattisesti selaimessa ajettavia testejä erityisesti ostopolun suhteen. Maksujärjestelmä tarjoaa sekä ostopolulle että pääsynhallintaa varten WordPress-sivustolle rajapinnan, jonka kautta käyttäjä voi rekisteröityä, hallita tiliään, ostaa tuotteita sekä kirjautua sisään lukemaan maksullista sisältöä.

WordPress sivuston kehitys

Sivusto tehtiin Multisite sivustona, joka mahdollistaa myöhemmin muiden sivustojen uusimisen myös WordPressin päälle, ja tätä kautta keskitetyn sivustojen hallinnan. Sivusto koostuu tämän lisäksi integraatioista Doris ja Tuju-järjestelmiin. Pohjateemana aluesivustolla on käytössä responsiivinen ja mobiiliystävällinen Skeleton-teema.

heikki salminen

“Tujun kehitys vedettiin alusta loppuun ketterillä kehitysmenetelmällä. Tämä mahdollisti nopean reagoinnin muuttuneisiin tarpeisiin. Tiimi oli hyvin sitoutunut sprinttien sisältöihin ja lopputulokseen.”

Heikki Salminen, ICT project manager, Alma Media Oyj.

Tavoitteena projektissa oli tuottaa sivuston rakenne täydellisesti Aluemedian site managerien hallittavaksi Admin-työkalulla. Koska sivusto rakentui sisältöputkista, tämä saavutettiin toteuttamalla sivuston rakenne niin, että jokaisen putken sisältöalueita hallinnoidaan WordPressin widgeteillä. Site manager voi esimerkiksi lisätä pääsisältöputkeen widgetin, joka tulostaa kolme ko. osaston uusinta juttua. Tämän jälkeen on mainoswidget, joka näyttää mainoksen, ja sen jälkeen widget, joka tulostaa sivulle osaston 4 – 10 uusimmat jutut. Kakkosputkeen voidaan asettaa osaston luetuimmat jutut widget, sen jälkeen mainoswidget ja esimerkiksi osaston luetuin maksullinen artikkeli.

Etusivun artikkeleiden manuaalinen hallinta

Jokaisen uutissivuston sielu on sen etusivu. Etusivu on paikka, josta kävijä katsoo, miten maailma makaa. Etusivullaan media viestii minkälaisia uutisia se pitää tärkeänä. Koko etusivu rakentuu widgettien kautta, ja tätä varten toteutettiin oma laajennus. Lopputuloksena site managereille syntyi “himmeli”, eli työkalu jolla voi siirrellä visuaalisesti artikkeleita haluttuun järjestykseen.

himmeli

Riittääkö responsiivisuus vai pitäisikö olla erillinen mobiilisivusto?

Responsiivisuuden hyvä puoli on, että sen avulla mobiilikäyttäjät saavat sivustosta automaattisesti version, jota on miellyttävä käyttää mobiililla. Esimerkiksi paikallislehdillä, kuten Kuhmolaisessa tai Ylä-Kainuussa, ei ole tarpeeksi käyttäjiä, jotta kannattaisi toteuttaa oma mobiiliversio. Kun sivusto tehtiin heti responsiivisena, saivat näidenkin lehtien käyttäjät luettavaa mobiiliin. Toisaalta hieman isompien lehtien mobiiliversiota haluttaisiin optimoida enemmän mobiilia varten, esimerkiksi toteuttaa ‘luetuimmat artikkelit’ -widget omana sivunaan. Responsiiviset sivustot ovat usein hyvin pitkiä johtuen siitä, että sivuston tietokone-formaatissa oleva sisältö ladotaan mobiilissa päällekkäin, ja tuolloinhan tavaraa tulee paljon. Mobiili-formaatissa sisältöä voidaan toki piilottaa, mutta jos sivu kuitenkin lataa kaiken sisällön, on se käyttäjän kannalta huonoa käytettävyyttä.

Kehityspöydälle läpinäkyvyyttä

Koko kehitystyö vietiin läpi Atlassianin Confluence ja Jira Agile työkaluilla. Käyttäjätarinat hahmoteltiin alkuun wikiin (Confluence), josta ne pilkottiin tehtäviksi Jiraan. Jirassa tehtävät kulkevat projektin workflown mukaisesti backlogista ‘Ready for Development’ -tilaan, josta koodaaja ottaa ne työn alle (In Progress). Kun koodaaja on saanut työnsä esiteltävään tilaan, se siirretään Stagelle katselmoitavaksi.

jira-agile-scrum

Jatkuvasti asiakkaan käytössä oleva Stage-palvelin on tärkeä osa kehitysputkea, jossa päästään demoamaan ja testaamaan uusia ominaisuuksia. Sprinttien päätteeksi pidettävissä katselmoinneissa kehittäjä demoaa ominaisuuden, ja mikäli asiakas hyväksyy sen, voidaan ominaisuus viedä tuotantoon seuraavassa päivityksessä.

DevOps ja laadunvalvonta

Osana jatkokehitystä WordPress kehitysympäristö on siirretty hyödyntämään WP Stack nimistä työkalua, jossa jokainen kehittäjä kehittää Vagrantin avulla sivustoa paikallisesti. Muutokset viedään Dev-, Stage- tai Tuotantopalvelimille Capistranolla. Versionhallintaan käytetään Gitiä, jossa jokainen ominaisuus pidetään omassa branchissään. Kun ominaisuus viedään tuotantoon, se yhdistetään Gitissä master branchiin.

Testauksia varten käytettiin Selenium työkalua, jonka avulla voidaan selaimessa ajettavia testejä automatisoida ja ajaa läpi testaajan koneella, jolloin virheet saadaan kiinni jo mahdollisimman aikaisessa vaiheessa. Osana jatkokehitystä kehitysympäristöön asennetaan Jenkins-palvelin, jonka avulla Selenium testejä voidaan ajaa automaattisesti palvelimella jokaisen versiopäivityksen jälkeen.

WordPressin skaalaaminen ja tuotantoympäristön pystytys

Tuotantoympäristö perustuu tällä hetkellä viiteen virtuaalipalvelimeen. Tuju-ohjelmisto pyörii kahdella palvelimella, WordPress kahdella palvelimella, ja yksi palvelin on varattu mediapalvelimeksi, johon tallennetaan kaikki kuvat kahdeksassa eri koossa, jotta latausajat pysyvät järkevinä myös pienillä näytöillä. Koko järjestelmän edessä on käyttöpalveluita tarjoavan Cybercomin CDN-ratkaisu, jonka avulla voidaan skaalata kirjautumattomien käyttäjän sivuja.

Miten sitten WordPress, ja sen alla oleva Linux, Apache, MySQL saadaan skaalautumaan, kun käyttäjä on kirjautunut sisään eikä voida hyödyntää CDN-ratkaisua? WordPressin tasolla päädyttiin cachettamaan se osa sivustoista, joka on samanlainen kaikille kirjautuneille käyttäjille MemCache laajennuksella. PHP tasolla käytettiin php-fpm sekä PHP 5.5 versiota, joka on aiempia versiota nopeampi ja sisältää Zend Optimizer+:n, joka on 10-20% nopeampi kuin APC.

Lopputuloksena järjestelmä testattiin 30 000 yhtäaikaisella käyttäjällä. Järjestelmää monitoroidaan New Relicin työkaluilla, jotka ovat osoittautuneet loistaviksi työkaluiksi, kun halutaan porautua ongelmien syihin.