TIIVISTELMÄ

Tavoite Toteuttaa oululaiselle yritykselle mukautettava kojelauta radio-ohjelmiston datan keskittämiseen.

Suunnittelu Asiakkaalla hyväksytettiin toteutettamani interaktiivinen Figma-prototyyppi.

Toteutus Layout rakennettiin react-grid-layout-kirjastolla ja kehitystä nopeutettiin backendia simuloivalla dummy-serverillä.

Widgetit Widgettien responsiivisuus toteutettiin ResizeObserver-rajapinnalla ja dynaamisesti asetettavilla breakpoint CSS-luokilla.

Ominaisuudet Layoutin voi tallentaa, ladata ja asettaa kokoruututilaan. Widgetin kokoa/sijaintia voi muuttaa ja sen voi piilottaa/lukita.

Tulos Onnistunut integrointi asiakkaan koodikantaan ja vaatimukset täyttänyt lopputulos.

Johdanto

Osana laajempaa opintokokonaisuutta pääsimme tekemään yhteistyötä oululaisen ohjelmistoyrityksen kanssa. Yritys kehittää web-pohjaista radio-ohjelmistoa, ja tavoitteenamme oli rakentaa heidän ohjelmistoonsa keskitetty näkymä (dashboard). Uusi kojelauta nitoisi yhteen eri näkymiin hajautetun datan, kuten radiolähetysten, soittolistojen ja sisäisten palveluiden tilan. Dashboardin tuli olla konfiguroitavissa käyttäjän – järjestelmänvalvojan, tuottajan tai radiojuontajan – tarpeiden mukaan.

Suunnittelu

Käynnistimme projektin huolellisella vaatimusmäärittelyllä ja kilpailija-analyysilla. Suoria vastineita ei markkinoilta löytynyt, joten otimme parhaat ideat eri sovelluksista suunnittelun pohjaksi. Tiimin sisäisen ideoinnin jälkeen jokainen suunnitteli oman konseptinsa Figmalla. Jatkoon valikoitui suunnittelemani interaktiivinen Figma-proto, jolle saimme myös asiakkaan hyväksynnän.

Ohjelmistokehitys

Emme halunneet keksiä pyörää uudelleen, joten valitsimme projektin pohjaksi avoimen lähdekoodin react-grid-layout -kirjaston (MIT), joka oli jo tuolloin suosittu ja toimintavarma. Kirjasto siis mahdollisti elementtien ruudukkosijoittelun ja säästi siten rutkasti kehitysaikaa. Kehitystyön sujuvoittamiseksi loimme myös dummy-server-skriptin, joka simuloi radio-ohjelmiston backendia. Tämä helpotti merkittävästi ruudukossa sijaitsevien dynaamisten widgetien suunnittelua, toteutusta ja testausta ennen integrointia oikeaan järjestelmään.

Widgetit

Dashboardista haluttiin dynaaminen ja mukautettava, joten widgettien piti reagoida joustavasti omien mittojensa muutoksiin. Tätä varten täytyi olla tapa seurata widgettien kokoa. Vastasin dashboardissa geneerisen “dummy widgetin” toteuttamisesta. Se toimisi jokaisen erilaisen widgetin pohjana. Puntaroin toteutuksessa ResizeObserverin ja Container Queryn välillä. Päädyin ensimmäiseen vaihtoehtoon, koska Container Queryllä ei ollut tuohon aikaan vielä tarpeeksi kattavaa selaintukea.

Vaikka ResizeObserver vaati hieman monimutkaisemman toteutuksen, se mahdollisti elementtien koon muutosten täsmällisen seurannan ja siten käyttöliittymän dynaamisen mukauttamisen. Käytännössä ”dummy widget” toimi niin, että se seurasi DOM-elementin kokoa ja lisäsi siihen CSS-luokkia määriteltyjen breakpointtien mukaan. Näiden luokkien avulla tyylimuutokset voitiin toteuttaa yksilöllisesti jokaiseen custom-widgettiin.

Muu mukautettavuus

Dashboardia hallitaan yläpalkin kautta. Sieltä käsin widgettejä pystyy piilottamaan ja palauttamaan näkyviin. Dashboardin asettelun (layoutin) – eli widgettien määrän, sijainnin ja koon – pystyy tallentamaan sekä lataamaan uudelleen, ja sivu säilyttää viimeisimmän asettelun myös uudelleenlatauksen yhteydessä. Lisäksi kojelaudan saa halutessaan kokoruututilaan.

Integrointi asiakkaan ohjelmistoon

Yrityksen laajan koodikannan haltuunotto otti aluksi oman aikansa, mikä on uudessa ympäristössä täysin luonnollista. Ohjelmiston rakenteen hahmotuttua integrointi sujui vaivattomasti ja uusi dashboard-komponentti saatiin osaksi olemassa olevaa softaa täysin suunnitellusti.

Mitä jäi käteen?

Toteuttamamme kojelauta toimi ympäristössään hyvin ja täytti vaatimukset erinomaisesti, ja näin ollen asiakas oli lopputulokseen tyytyväinen. Kaiken kaikkiaan projekti oli yliopistoaikani opettavaisin ja kiinnostavin kokonaisuus, sillä se tarjosi ensituntuman alalla työskentelyyn. Oppimiskokemuksena se oli todella merkittävä: projekti vahvisti merkittävästi teknistä osaamistani koodarina ja kehitti projektityöskentelytaitojani.