Faba
Yritysesittely
Faba osuuskunta on karjanomistajan kumppani eläinten jalostuksessa, lisääntymisessä ja terveydessä sekä eläinaineksen tuottavuuden kehittämisessä.
Osuuskuntana Faba haluaa olla menestyvin kotieläinalan palvelu- ja myyntiyritys, jossa korostuvat sen henkilöstön osaaminen, ammattitaito ja palvelut. Yritys tarjoaa palveluita ja tuotteita, jotka ovat alan arvostetuimpia niin kotimaisesti kuin kansainvälisesti.
Lähtökohta
Lähtökohta projektille oli mielenkiintoinen ja sisälsi suuren haasteen. Faban vanha Magento-verkkokokauppa oli tulossa tiensä päähän, eikä se taipunut enää yrityksen jatkuvasti muuttuviin ja kehittyviin tarpeisiin eläinaineksen ja tarvikkeiden jälleenmyynnissä karjatilallisille. Samalla kun vanhan Magento-verkkokaupan tuki loppui, mahdollisti se Faballe tilaisuuden uudistaa verkkopalelunsa täydellisesti vastaamaan sen nykyaikaisia tarpeita. Uudistus toi mukanaan myös teknisen infrastruktuurin suoraviivaistamisen, kun Faban vanhat verkkosivut olivat aikaisemmin luotu erillisenä kokonaisuutena, joka puolestaan lisäsi päivitettävyys-, jatkokehitettävyys- sekä ylläpitokuormaa.
Lähtökohtana ja tavoitteena oli rakentaa uusi ja nykyaikainen verkkokauppa, jolla ei ollut kehityksen ja jatkokehitettävyyden kannalta rajoittavia tekijöitä. Verkkopalveluun tuli myös integroida verkkosivut, joten jatkossa nämä olisivat molemmat ”saman palvelun alla” aikaisemmin niiden toimiessa toisistaan erillään. Lisäksi palvelun toivottiin jatkossa toimivan niin B2B kuin B2C asiakkaille.
Faban toimii karjanomistajien kumppanina eläinten jalostuksessa, lisääntymisessä ja terveydessä, joten meille oli selvää, ettei kyseessä ole aivan normaali projekti tai verkkokauppakehitys, sillä asiakkaan liiketoimintaa oli kyettävä ymmärtämään ja sisäistämään nopeasti. Faban business-logiikka rakentuukin monimutkaisista alalle tyypillisistä standardeista, missä tuotteet ja Faban uuden verkkokauppan toivotut ominaisuudet eivät vastanneet ”normaalia” tai tavanomaisen verkkokaupan standardeja.
Määrittely, Workshop sekä UI/UX-Design
Faba osk oli valmistellut verkkopalvelun uudistamista jo pitkään ja toteuttanut laajan määrittelyn uudistusprosessista. Määrittelyprosessiin osallistui myös Faban IT-kumppani Mtech Digital Solutions Oy. Mtech on ruokaketjun ja maatalousalan ohjelmisto- ja ratkaisutoimittaja ja vastaa muun muassa Faban taustajärjestelmistä. Määrittelykokonaisuus piti sisällään laajat kuvaukset toivotusta designista, käyttäjäpoluista, kuvaukset käyttäjän näkymien toiminnallisuuksista, data- ja API-lähteet sekä käyttäjätasojen prosessikuvauksen.
Tämän määrittelykokonaisuuden pohjalta saimme luotua selkeän ja suoraviivaisen etenemismallin projektikokonaisuudelle. Kaikki projektin osakokonaisuudet, toivotut toiminnallisuudet ja liiketoiminnan erityispiirteet vahvistettiin vielä erillisessä Workshopissa.
Workshopin tarkoituksena oli käsitellä yksityiskohtaisesti Faban liiketoimintaa ja keskustella verkkokauppauudistuksen kannalta tärkeistä asioista, kuten kohderyhmistä, asiakkaista, tavoitteista, brändistä, verkkokaupan rakenteesta, rajapinnoista sekä integraatioista.
Tämän kaltainen workshop on onnistuneen projektikokonaisuuden kannalta kriittinen vaihe, sillä siellä keskustellaan ja vahvistetaan kaikki toiveet tulevaa uudistusta kohtaan. Muita keskustelun aiheita olivat myös uuden verkkopalvelukokonaisuuden toivotut toiminnallisuudet, niiden yksityiskohtainen läpikäynti sekä erityistoiveet ja tapaukset, jotta ymmärretään varmasti Tilaajan tavoitteet uutta verkkokauppaa kohtaan.
Sisältö ja sisällön integrointi
Faban vanhat sivut olivat palvelleet yritystä jo useamman vuoden ja niille oli kertynyt vuosien saatossa paljon arvokasta sisältöä, joka haluttiin ehdottomasti säilyttää. Sisältösivut vanhalla verkkosivuilla koostuivatkin useasta sadasta erillisestä sisältösivusta, sivujen välisistä linkityksistä sekä vanhoja sivuja varten rakennetusta ”tag-logiikasta”, jonka avulla eri sivuja voitiin ”nostaa” myös muille sivuille. Tämä loi sisällön integroimiselle eräänlaisen haasteen, sillä uudessa verkkopalvelussa tulisi olemaan mukana myös verkkokaupan mukana tuotavat sisältökokonaisuudet.
Verkkopalvelun määrittelyssä sovittiin reunaehdot ja vastuut sisällön integroinnin ja eri rajapintojen suhteen. Uuden verkkopalvelun sisällön haluttiinkin rakentuvan kokonaisuudessaan vanhojen verkkosivujen sisällöstä, mihin lisättäisiin verkkokaupan tuoma sisältö, tuotesivut sekä muut uudistuksen tuomat ominaisuudet.
Faban IT-kumppani Mtech toimi projektiryhmässä kanssamme koko projektin ajan ja vastasi Faban ERP-järjestelmän kehityksestä. Ohjausryhmässä Faban edustajat vastasivat omalta osaltaan verkkokaupan sisällöistä omassa ERP-järjestelmässään, josta meidän tehtäväksemme jäi hakea tietoa rakentamiemme rajapintojen välityksellä. Tämän lisäksi rakensimme erillisen ”import-scriptin”, jolla toimme Faban vanhojen verkkosivujen sisällöt uudelle sivustolle.
Tekninen toteutus
Faban vanhat verkkosivut oli kehitetty WordPress-alustalle ja vanha verkkokauppa oli toteutettu erillisenä applikaationa Magenton päälle. Sovittaessa uuden palvelun teknisestä infrastruktuurista kaikille osapuolille oli selvää, että uuden verkkopalvelun tulisi olla tyylikäs, laadukas, tehokas, helppokäyttöinen sekä suoraviivainen kaikille käyttäjäryhmille. Kaiken tämän lisäksi palvelulla ei saanut olla rajoitteita mihinkään suuntaan niin alkuperäisen kehitettävyyden kuin jatkokehitettävyyden osalta.
Näihin lähtökohtiin pohjautuen Faban uusi verkkopalvelu on rakennettu Headless-toteutuksena. Headless-toteutustapa tarkoittaa, että järjestelmän front end on erotettu muusta järjestelmästä omaksi sovelluksekseen. Tämä puolestaan keskustelee sitten erillisen back end -järjestelmän kanssa rajapintojen avulla.
Jotta palvelukokonaisuus saatiin tehokkaaksi, rakensimme palvelun täysin räätälöitynä kokonaisuutena hyödyntäen kehityksessä: React-, TypeScript-, Next js-, Node js-, Chackra UI-, MySQL- ja Prisma ORM-teknologioita.
TypeScript on ohjelmointikieli, joka on syntaksiltaan samanlainen kuin JavaScript, mutta sisältää tyyppejä ja muita ominaisuuksia, jotka auttavat kehittäjiä välttämään virheitä ja kirjoittamaan turvallisempaa koodia. TypeScriptia käytetään usein web-kehityksessä, erityisesti Reactin kanssa.
React puolestaan on käyttöliittymäkirjasto, joka auttaa kehittäjiä rakentamaan dynaamisia ja interaktiivisia käyttöliittymiä web-sovelluksiin. Reactin avulla kehittäjät voivat luoda komponentteja, jotka ovat pieniä ja helposti ylläpidettäviä rakennuspalikoita, joista suurempi kokonaisuus rakentuu. Reactin komponentit voivat kommunikoida keskenään ja muodostaa monimutkaisia käyttöliittymiä.
Tämä teknologia mahdollistaa tehokkaan käyttöliittymän infrastruktuurin kehittämiseen ja nykypäivän parhaiden teknologioiden ja toimintatapojen implemoinnin, kuten Chakra UI:n hyödyntämisen. Chakra UI on yksinkertainen, modulaarinen ja helppokäyttöinen komponenttikirjasto, josta saadaan hyödynnettyä tarvittavia “rakennuspalikoita” React-sovellusten rakentamiseen. Olemme kehittäneet useampia Headless-projekteja, jonka johdosta pystymme rakentamaan uusia verkkopalveluita tehokkaasti olemassa olevien komponenttien mukaisesti.
Verkkopalvelun front end rakennettiin hyödyntäen Next.js -frameworkkiä, jossa React.js staattiset tiedostot UI:sta generoidaan palvelimella (SSR, Server-side rendering). Näin latausnopeudet pienenevät ja käyttäjäystävällisyys paranee.
Next.js on avoimen lähdekoodin JavaScript-kehys, joka auttaa kehittäjiä rakentamaan modernin, skaalautuvan ja suorituskykyisen web-sovelluksen helposti ja nopeasti. Next.js on rakennettu Reactin päälle ja sisältää monia ominaisuuksia, jotka tekevät siitä tehokkaan ja helposti käytettävän. Next.js sisältää monia ominaisuuksia, jotka auttavat kehittäjiä nopeuttamaan web-sovelluksen kehitystä.
Reactilla luodut komponentit mahdollistavat ketterän kehityksen, osakokonaisuuksien helpon liitettävyyden sekä helpon jatkokehitettävyyden, sillä kokonaisuuden eri osa-alueet ovat itsenäisiä kokonaisuuksia. Näitä kokonaisuuksia saa helposti kasattua ja monistettua, mikä tuo palvelun kehitykseen tehokkuutta. Lisäksi palvelu kestää aikaa ja sitä voidaan helposti myös jatkokehittää tulevaisuudessa.
Back end toteutettiin Node.js REST rajapintana käyttäen MySQL-tietokantaa. Tietokanta ja tietokannan scheman suunnittelussa ja kehityksessä käytettiin Prisma ORM -tietokantapalvelua, joka mahdollistaa tietokannan visualisoinnin ja yhdistämisen palveluun suoraviivaisen API:n välityksellä.
Yhteydenotto- ja chat-palvelu rakennettiin hyödyntäen Tawk.to chat palvelua. Käyttäjähallinta, login ja autentikointi puolestaan rakennettiin kaksiosaiseksi (Faban henkilöstö sekä yksityisasiakkaat), missä autentikointi tehdään OAuth protokollaa noudattaen.
Verkkopalvelun CMS-järjestelmäksi (sisällönhallintajärjestelmä) valittiin WordPress, sillä se oli entuudestaan tuttu Faban henkilöstölle. Headless kehityksessä voidaan mahdollistaa minkä tahansa sisällönhallintamoottorin käyttö, mikä tuo Headless-kehitykseen entistä enemmän vapauksia. Räätälöimme verkkopalvelun WordPress käyttöliittymän todella yksinkertaiseksi, missä uusien sivujen rakentaminen käy helposti niin sanotun ”blokki rakenteen” avulla ihan kuin rakentaisi palapeliä. Kokonaisuudessaan hallinnan käyttöliittymä rakentuu noin 20 erillisestä blokista, jotka kaikki ovat monistettavissa ja uudelleenkäytettävissä uniikilla sisällöllä missä vain verkkopalvelussa.
Lopputulos
Lopputuloksena saimme aikaan onnistuneen ja erinomaisen projektikokonaisuuden. Onnistumisen edellytyksenä oli huolellinen suunnittelu ja taustatyö. Suunnittelu ja määrittely onkin tämänkaltaisissa projektikokonaisuuksissa avainasemassa ja kliseinen sanonta ”hyvin suunniteltu on puoliksi tehty” pätee myös web- ja ohjelmistokehityksessä.
Kokonaisuudessaan olemme todella tyytyväisiä lopputulokseen ja saimme toteutettua kaikki asiakkaan toivomat ominaisuudet niin verkkosivujen kuin verkkokaupan puolella.
“Teccin kanssa työskentely on sujunut koko projektin ajan joustavasti ja ammattitaitoisesti. Huolellisesta määrittelystä huolimatta näin suuressa ja monitahoisessa kehityshankkeessa tulee aina yllätyksiä matkan varrella. Ne on pystytty ratkomaan ketterästi ja hyvässä yhteistyössä Teccin, Mtechin ja Faban kesken.”
Loppuasiakas: Faba osk
Linkki: https://faba.fi
Design: Designin päivittäminen uuden brändi-ilmeen mukaiseksi ja viimeistelyn suoritti Tecci Oy. Design rautalankaversion toteutti Avenla Oy,
Tekninen toteutus: Tecci Oy