WaveSpacer Portfolio

Ali Bishaar | TC-opintojakso

Projektin kuvaus

WaveSpacer on musiikkisovellus, jonka tavoitteena on auttaa käyttäjiä hallitsemaan suuria Spotify-soittolistojaan. Sovelluksen tarkoituksena on tehdä musiikin kuuntelusta mielekkäämpää poistamalla turhat kappaleet soittolistoista. Tämä tapahtuu käyttäjäystävällisen käyttöliittymän ja soittolistojen sisällön selkeän visualisoinnin avulla. Projektin tavoitteena oli toteuttaa toimiva sovelluskonsepti ideasta valmiiksi demoksi ja testata sen toimivuutta oikeilla käyttäjillä.

Toteutimme projektin noin 3,5 kuukauden aikana viiden hengen kehittäjätiimissä. Vastuu alueenani oli toimia – Testaajana & Liiketalouden vastaavana. Tässä portfoliossa esittelen TC-opintojakson aikana tekemäni työt, osaamiseni kehittymisen sekä omat oivallukseni opintojakson ajalta.

Oma roolini projektissa

  • Testaaja: testauksen suunnittelu, yksikkötestaus, käyttäjätestaus, CI/CD-kokeilut
  • Liiketalouden vastaava: liiketoimintasuunnitelma, taloudelliset arviot, tulomallit
  • Frontend-kehitys (alkuvaihe): kirjautumis- ja rekisteröitymisnäkymät, soittolistan valitsin

Koodaaminen (alkuvaihe)

Aloitin projektin parissa Frontend kehittäjänä, koska vastuu-alueeni tehtäviä ei vielä ollut. Esituotannon aikana UI/UX-suunnitelmien pohjalta jaettiin työt frontend-kehittäjän kanssa hänen johdollaan. Pääsin kirjoittamaan koodia Tailwindillä, mikä oli tuttua hommaa Web UI 2 -kurssilta.

Sillä aikaa kun frontend-kehittäjä teki etusivua, pääsin työstämään kirjautumis- ja rekisteröitymisnäkymiä. Myöhemmin tein myös soittolistan valitsimis -näkymän sekä tervehdysanimaation kun kirjautuu sisälle.

Kirjautumisnäkymä
Kirjautumisnäkymä
Rekisteröitymisnäkymä
Rekisteröitymisnäkymä
Soittolistan valitsin
Soittolistan valintanäkymä
Tervehdys animaatio

Testaus

Testaajana vastasin testauksen suunnittelusta ja toteutuksesta. Testaus kehittyi projektin edetessä kehityksen rinnalla, ja sen painoarvo kasvoi sen mukaan, kun sovellusksen toiminallisuudet alkoivat valmistua.

Testauksen tavoitteita ei oltu täysin määritelty projektin alussa, sillä alkuvaihe painottui vahvasti sovelluksen kehittämiseen. Varsinainen testaussuunnitelmaa laadittiin vasta ensimmäisten demojen jälkeen, kun sovelluksen ydinominaisuudet alkoivat vakiintua. Testauksen tavoitteena oli varmistaa, että tietojen lataus, tallennus ja näyttäminen toimii virheettä. Ja, että käyttöliittymä on selkeä ja toimii yleisimmillä selaimilla ja laitteilla.

Yksikkötestaus (Jasmine & Karma)

Yksikkötestaus toteutettiin Angularin omilla testausvälineillä, Jasmine ja Karma. Alkuvaiheessa yksikkötestit olivat melko alkeellisia ja keskittyivät lähinnä tekniseen toimivuuteen, kuten:

Projektin edetessä yksikkötestauksen laajuus kasvoi merkittävästi. Loppuvaiheessa projektissa oli yli 200 yksikkötestiä, jotka kattoivat suuren osan käyttöliittymäkomponenteista ja niiden peruskäyttäytymisestä. Yksikkötestien kirjoittaminen auttoi myös tunnistamaan epäselviä vastuita komponenteissa ja paransi koodin rakennetta.

Yksikkötestit

Yksikkötestit

Haasteena yksikkötestauksessa oli erityisesti sen määrittely, mitä kaikkea kannattaa testata ja miten syvästi. Vaikka yksikkötestit ovatkin kaikkien vastuulla jotka kirjoittavat koodia, testit jäivät yksinomaan testaajan tehtäväksi.

End-to-End-testaus (Cypress)

End-to-end-testaus toteutettiin Cypressillä. Tarkoituksena oli testata sovellusta käyttäjän näkökulmasta, esimerkiksi:

Merkittävin haaste E2E-testauksessa liittyi Spotify-kirjautumiseen. Cypress ei voinut suorittaa kirjautumista Spotifyn omassa domainissa, minkä vuoksi kirjautumista ei saatu automatisoitua. Mikä sitten esti testaamisen oikealla käyttäjädatalla. Tämän vuoksi E2E-testit päätettiin jättää myöhemmälle, ja lopuksi korjaamiseen varattu aika osoittautui suuremmaksi kuin projektin aikataulu salli. Minkä seurauksena E2E-testit jäivät valitettavasti tekemättä!

CI/CD-putki

Testauksen automatisointi toteutettiin GitHub Actionsin avulla. Projektissa määriteltiin CI/CD-putki, jossa jokaisen koodimuutoksen yhteydessä ajettiin automaattiset testit.

Tavoitteena oli estää koodimuutosten yhdistyminen develop-haaraan, mikäli testit epäonnistuivat. Develop-haara toimi projektissa pääasiallisena kehityshaarana ennen virallista main-haaraa.

Käytännössä havaittiin kuitenkin, että epäonnistuneet testit eivät aina estäneet muutosten etenemistä develop-haaraan. Tämän vuoksi CI/CD-putki päätettiin poistaa käytöstä väliaikaisesti ja palata siihen myöhemmin. Valitettavasti aikaa ei riittänyt tähän, eikä tästä ollut paljon hyötyä projektin loppu vaiheessa.

Unit-test.yml

GitHub Actions -konfiguraatio (unit-test.yml)

Käyttäjätestaus & bugien korjaus

Automatisoidun testauksen rinnalla hyödynnettiin käyttäjätestausta. Projektissa saatiin ulkopuolisia testikäyttäjiä, joiden palautteen avulla löydettiin useita käytettävyyteen liittyviä ongelmia.

Esimerkiksi:

Palaute välitettiin UI/UX-suunnittelijalle ja sitä kautta Frontend vastaavalle. Korjaukset ehdittiin toteutettiin ennen loppuesitystä onnistuneesti!

Liiketoiminta

Liiketalouden vastaavana tehtäviini kuului liiketoimintasuunnitelman laatiminen ja taloudellisien oletuksien tekeminen. Pohdin mitä WaveSpacerin tuottaminen vaatisi miten siitä saisi kannattavan liiketoiminnan, keinoja kustannusten pienentämiseksi ja millä tavoin markkinoida parhaiten kohdeyleisölle. Ymmärsin liiketoiminnan osuden tärkeyden ja kuinka se on keskeinen osa kaikissa tuottoa tavoittelevissa projekteissa.

Business model canvas

Business model canvas

Liiketoimintasuunnitelma

Lähdimme liikkeelle oletuksilla, että saavuttaisimme 500 maksavaa ja 5000 ilmaisversion käyttäjää ensimmäisen vuoden loppuun menneessä. Toisena vuonna tavoitteenamme olisi kasvattaa käyttäjämäärä 2000 maksavaan ja 35 000 ilmaisversion käyttäjään. Kolmantena vuonna tavoitteena olisi 5000 maksavaan ja 100 000 ilmaisversion käyttäjää. Arvioimme että ensimmäisen vuoden rahoitus tarpeemme olisi 195 000€, jolla kattaisimme julkaistavan version kehityksen kulut, sovelluksen julkaisu ja markkinoinnin käynnistäminen.

Kolmantena vuonna tulovirrat monipuolistuisivat sekä mainostulojen että yhteistyökumppaneiden kautta. Tekisimme yhteistyötä radioasemien, kuntosaleiden, kahviloiden/baareiden ja tapahtumajärjestäjien kanssa, joille myisimme anonyymiä käyttäjädataa suosituista soittolistoista ja sen hetkisistä musiikkitrendeistä. Sekä tekisimme yhteistyötä levy yhtiöiden ja tunnettujen artistien kanssa vahvistaaksemme asemaamme musiikki ja viihdealan verkostoissa.

Pitkän aikavälin tavoitteena olisi exit-skenaario kolmannen vuoden jälkeen. Yhtenä myyntivalttina olisi sovelluksen skaalautuvuus muihin musiikkipalveluihin, kuten YouTube Musiciin tai Apple Musiciin, mikä lisäisi sen liiketoiminnallista arvoa.

Tulovirrat ja oletukset

Tulonlähde Kuvaus Oletus
Premium-tilaukset Maksullinen versio sovelluksesta 3,99 € / kk / käyttäjä
Mainostulot (ilmaisversio) Mainokset ilmaisversion käyttäjille 5 € / 1000 näyttöä
~20 näyttöä / käyttäjä / kk
Yhteistyökumppanit & anonyymi data Musiikkitrendit ja soittolistadata
(kahvilat, kuntosalit, radioasemat, levy-yhtiöt)
Sopimuskohtainen

Kulut ja tulot (arviot / vuosi)

Vuosi Kulut (€) Premium (€) Mainokset (€) Yhteistyöt & data (€) Tulot yhteensä (€)
1. vuosi 195 000 1 995 500 2 495
2. vuosi 114 900 95 760 42 000 20 000 157 760
3. vuosi 78 900 239 400 120 000 60 000 419 400

Markkinointi yritys

Markkinointistrategiassa päätimme keskittyä Instagramiin sosiaalisen median kanavana kohdeyleisömme tavoittamiseksi. Sisältöstrategiana oli julkaista säännöllisesti kiinnostavaa ja informatiivista sisältöä, joka esittelee sovelluksen hyötyjä ja ominaisuuksia. Itse tein vain 2 Instagram postausta projektin aikana, mutta tiimiläiseni hoitivat loput markkinoinnista.

Ensimmäinen postaus
Ensimmäinen postaus
Julkaisu postaus
Julkaisu postaus

Haasteet ja kehityskohteet

Nämä haasteet auttoivat ymmärtämään projektityöskentelystä enemmän. Ja opettivat ennakoinnin, vastuunjaon ja realistisen aikataulutuksen tärkeyden tulevissa projekteissa.

Omat oivallukset ja oppiminen

TC-opintojakso syvensi ymmärrystäni siitä, miten ohjelmistoprojekti toimii kokonaisuutena. Opin hahmottamaan paremmin eri roolien vastuita ja niiden välisiä riippuvuuksia.

Projektissa hyödynnettiin Scrum-menetelmää, joka osoittautui ryhmällemme toimivaksi tavaksi organisoida työskentelyä. Säännölliset daily scrum, sprinttien rytmitys ja tehtävien haastavuuden arvioiminen ja pienemmäksi pilkkominen auttoivat pitämään projektin hallittavana ja etenemään suunnitelmallisesti.

Tulevaisuuden näkymät

WaveSpacer-projektin myötä kiinnostukseni liiketoimintaa kohtaan on kasvanut selvästi. Luottamukseni tämänhetkiseen työllisyystilanteeseen on melko heikko, ja olen ymmärtänyt, että jos haluan tulevaisuudessa tuottaa toimivan ja kannattavan ohjelmistoprojektin, minun on ymmärrettävä liiketoimintaa huomattavasti nykyistä paremmin.

Uskon, että osaavista ohjelmistokehittäjistä ei ole varsinaista pulaa, ja että teknisesti minua taitavampia tekijöitä löytyy aina. Sen sijaan koen, että suurin hyöty ja oma etuni syntyy siitä, että opin tunnistamaan potentiaalisia liikeideoita ja rakentamaan niiden ympärille toimivia liiketoimintasuunnitelmia.

Haluan tulevaisuudessa suunnata katseeni liikeideoiden kehittämiseen ja oppia lisää rahoituksen hankkimisesta, kustannusten arvioinnista ja hallinnasta sekä projektien johtamisesta ja oikeaan suuntaan ohjaamisesta. Pitkän aikavälin tavoitteenani on perustaa startup ja tehdä siitä onnistunut exit ja sen jälkeen ryhtyä enkelisijoittajaksi. Tämän vuoksi pidän erittäin tärkeänä ymmärtää ohjelmistoprojektin jokaisesta osa-alueesta ainakin perusteet, jotta pystyn hahmottamaan kokonaisuuksia ja tekemään parempia päätöksiä.

“TC-opintojakso auttoi minua ymmärtämään, että teknisesti loistava ohjelmisto ei yksin takaa menestymistä, vaikka kuinka hyvä se olisikin. Taustalle aina tarvitaan vahva liiketoiminnallinen näkemys.”