Kaikki alkoi ajatuksesta, joka kuulosti melko yksinkertaiselta:

Olisi hienoa, jos WordPress- ja Elementor-sivuille voisi tehdä näyttäviä animaatioita omalla twistillä helposti ilman koodia ja suurta työryhmää.

Tästä ajatuksesta on sittemmin kasvanut paljon enemmän kuin alun perin osasimme odottaa.

Olemme rakentaneet omaa WordPress-lisäosaa, jonka tarkoituksena on tuoda verkkosivujen animaatioiden tekemiseen enemmän mahdollisuuksia, mutta ennen kaikkea tehdä niiden hallinnasta helppoa ja visuaalista.

Tällä hetkellä projektissa on jo yli 15000 riviä koodia, n. 500 ihmiskäskyä tekoälylle ja n. 14 vuorokautta koneella istuen ja projektia jalostaen.

Matkan varrella on tullut vastaan siis PHP:tä, JavaScriptiä, CSS:ää, Elementoria, WordPressin rakennetta, GitHubia, palvelimia, selaimia, virheilmoituksia, latauslooppeja, lyhenneitä kynsiä, litroittain kahvia, kadonneita spinnereitä ja tietysti niitä hetkiä, jolloin jokin toimii täydellisesti – kunnes seuraava muutos rikkoo sen.

Ja yksi asia tekee tästä projektista erityisen kiinnostavan: suurin osa tästä on rakennettu tekoälyn avulla.

Mutta ei tekoälyn yksin.

Tekoäly ei rakentanut tätä yksin

Kun tekoälystä puhutaan ohjelmistokehityksessä, keskustelu menee helposti kahteen ääripäähän.

Joko ajatellaan, että tekoäly tekee kaiken, tai että tekoäly on vain hienostunut hakukone.

Tämä projekti on opettanut jotain siltä väliltä. Tekoäly on tässä projektissa ollut käytännössä ohjelmistokehityksen työpari.

Se on kirjoittanut ja muokannut koodia, analysoinut virheitä, ehdottanut ratkaisuja, selittänyt WordPressin ja Elementorin toimintaa sekä auttanut rakentamaan uusia ominaisuuksia.

Silti taustalla joku on koko ajan joutunut sanomaan, mitä oikeastaan yritetään tehdä.

Joku on joutunut testaamaan, toimiiko se oikeassa WordPressissä. Joku on joutunut katsomaan ruutua ja toteamaan:

”Ei. Nyt tämä ei kyllä toimi niin kuin pitäisi.”

Ja juuri siinä ihminen tulee mukaan.

Ihminen antaa suunnan

Tässä projektissa ei ole ollut valmista teknistä määrittelyä, jonka mukaan olisi vain toteutettu satoja tehtäviä.

Usein kehitys on mennyt paljon arkisemmin:

”Tuo toimii ihan kivasti, mutta entä jos animaation voisi nähdä timelinessä?”

Tai:

”Nyt efekti toimii, mutta Elementorissa annettu väri ei välity oikein.”

Tai:

”Spinneri tuli takaisin.”

Siitä alkaa keskustelu. Tekoäly analysoi ongelmaa, ehdottaa ratkaisua ja kirjoittaa tarvittavat muutokset.

Sitten koodi siirretään palvelimelle. WordPress avataan. Elementor käynnistetään. Testataan.

Jos toimii, jatketaan. Jos ei toimi, palataan takaisin. Ja aloitetaan uudestaan. Tekoäly voi tehdä koodia hämmästyttävän nopeasti.

Mutta se ei näe samalla tavalla kuin ihminen näkee lopputuloksen ja se saattaa tehdä myös virheitä, tai liian isoja muutoksia.

Siksi ihmisen tehtävä on edelleen ratkaiseva.

Yllättävän paljon näkymätöntä työtä

Kun katsoo valmista verkkosivun animaatiota, lopputulos voi näyttää hyvin yksinkertaiselta.

Otsikko vain ilmestyy ruudulle. Kuva liikkuu hieman. Elementit tulevat peräkkäin.

Scrollaus käynnistää efektin. Käyttäjälle se on yksi pieni toiminto. Sen taustalla voi kuitenkin olla melkoinen määrä logiikkaa ja niitä koodirivejä.

Lisäosan pitää tietää, mitä käyttäjä on valinnut. Asetukset pitää tallentaa.

Elementorin pitää ymmärtää asetukset. JavaScriptin pitää saada tarvittavat tiedot.

Animaatiomoottorin pitää käsitellä ne. Selaimen pitää suorittaa animaatio oikealla hetkellä.

Ja kaiken tämän pitää tapahtua ilman, että muu verkkosivu hajoaa. Tässä kohtaa ”tehdään pieni WordPress-lisäosa” alkaa kuulostaa hieman erilaiselta.

Ja sitten tulee se hauskin osuus: testaaminen

Ohjelmistokehityksessä on asia, jota ulkopuolinen ei välttämättä koskaan näe.

Testaaminen. Paljon testaamista. Olemme esimerkiksi joutuneet selvittämään tilanteita, joissa lisäosa jäi lataamaan, tai koko testisivusto kaatui. Selvittämään aiheuttaako palvelimen välimuisti ongelmat, vai yksittäinen pilkku väärässä paikassa.

Sitten latausongelma katosi. Sitten se palasi. Yhtäkkiä jokin muu osa ei enää toiminut.

Välillä korjaus synnytti uuden ongelman.Tämä ei välttämättä kuulosta kovin hohdokkaalta, mutta juuri tästä ohjelmistokehitys suurelta osin koostuu.

Koodi on vain yksi osa työtä. Toinen osa on kysyä jatkuvasti:

Miksi tämä ei toimi?

Ja vielä tärkeämpi kysymys:

Mitä tapahtuu, jos teen tämän muutoksen?

Kuinka paljon tähän on sitten mennyt?

Tarkkaa tuntimäärää emme ole laskeneet, eikä koodirivien määrästä ole pidetty projektin alusta lähtien kirjaa, joskin äsken laskimme tämänhetkisen tarkan koodirivimäärän Githubissa olevasta projektistamme. (15580)

Mutta projektin mittakaava on muuttunut täysin, se on selvää.

Alkuperäinen idea oli pieni kokeilu.

Nyt kokonaisuus sisältää jo useita toisiinsa liittyviä osia: WordPress-rakenteen, Elementor-integraation, oman animaatiologiikan, JavaScriptiä, käyttöliittymän, asetuksia, esikatselua ja erilaisia animaatioiden hallintaan liittyviä toimintoja.

Ja kehitys on tapahtunut pala kerrallaan.

Yksi ominaisuus. Yksi ongelma. Yksi testi. Yksi korjaus.

Ja taas uusi ominaisuus.

Jos joku olisi projektin alussa sanonut, kuinka paljon aikaa yksinkertaiselta kuulostava animaatiolisäosa voisi vaatia, emme ehkä olisi uskoneet.

Mutta ehkä juuri siinä on ohjelmistoprojektien luonne.

Idea syntyy nopeasti. Toteutus vie aikaa.

Tekoäly muuttaa tässä myös työn luonnetta

Ilman tekoälyä tämänkaltaisen projektin rakentaminen olisi ollut huomattavasti vaikeampaa, ellei mahdotonta. Monessa tapauksessa koodaukseen vaadittava ihmistyömäärä liikkuisi sadoissa, ellei tuhansissa tunneissa puhumattakaan siihen liittyvistä kustannuksista.

Nyt voimme keskustella asioista, joita emme välttämättä voisi toteuttaa muuten.

Voimme kysyä:

”Miksi tämä tapahtuu?”

”Miten tämä kannattaa rakentaa?”

”Voisiko tämän tehdä toisella tavalla?”

”Mitä jos käyttäjä haluaisikin säätää tätä Elementorissa?”

Ja vastaukseksi saa paitsi selityksen myös konkreettista koodia, jota voidaan kokeilla. Toisin saneon tekoäly ei suutu typeristä kysymyksistä ja se jaksaa selittää asiat juurta jaksain. Sillä ei tule myöskään väsy ja se on aina valmis uuteen tehtävään.

Se tekee ohjelmistokehityksestä paljon saavutettavampaa.

Mutta samalla se tekee ihmisestä ehkä entistä tärkeämmän.

Kun koodin tuottaminen nopeutuu, hyvien päätösten tekeminen ja visio korostuu.

Mitä kannattaa rakentaa? Mitä ei kannata rakentaa? Milloin jokin ominaisuus on tarpeeksi hyvä?

Miltä sen pitäisi tuntua käyttäjän näkökulmasta? Ja ennen kaikkea: mikä ongelma tällä oikeasti ratkaistaan?

Tavoitteena ei ole tehdä sivuista sirkusta

Animaatioita voisi tietenkin lisätä verkkosivuille loputtomasti. Kaikki voisi liikkua. Kaikki voisi pyöriä. Kaikki voisi pompata, mutta hyvä verkkosivusto ei tarvitse sitä.

Hyvä animaatio auttaa käyttäjää. Se ohjaa katsetta, tuo sisältöön rytmiä, tekee käyttöliittymästä selkeämmän tai antaa sivustolle persoonallisuutta.

Siksi tavoitteena ei ole rakentaa työkalua, jolla saadaan mahdollisimman paljon liikettä.

Tavoitteena on rakentaa työkalu, jolla liikettä voi käyttää helposti ja tarkoituksellisesti ilman valtavaa ponnistelua.

Mitä tästä voi parhaimmillaan syntyä?

Jos projekti saadaan vietyä loppuun asti, lopputuloksena voi olla työkalu, joka säästää verkkosivujen rakentajalta merkittävästi aikaa.

Sen sijaan, että jokaista animaatiota varten tarvitaan koodia, käyttäjä voisi tehdä sen Elementorissa visuaalisesti.

Valitse elementti. Valitse animaatio.

Säädä nopeutta. Lisää viive. Katso esikatselu. Valmis.

Ja jos haluaa mennä pidemmälle, käyttöön voidaan ottaa esimerkiksi timelineja, stagger-efektejä ja scrolliin reagoivia animaatioita.

Tällöin verkkosivujen animaatioista tulee enemmän suunnittelua kuin ohjelmointia.

Tämä on vasta alku

Ehkä paras tapa kuvata projektia tällä hetkellä on sanoa, että olemme päässeet rakennustyömaalla jo pitkälle.

Jotain on valmiina. Jotain on puolivalmiina. Jotain rakennetaan parhaillaan. Ja jotain tullaan todennäköisesti vielä purkamaan ja tekemään uudestaan.

Se kuuluu asiaan.

Erityisen kiinnostavaa on ollut seurata, miten alkuperäinen pieni idea on muuttunut vähitellen oikeaksi ohjelmistoprojektiksi.

Ja samalla tämä projekti on ollut myös eräänlainen kokeilu siitä, mitä tapahtuu, kun ihminen ja tekoäly rakentavat jotain yhdessä.

Ihminen tuo vision, ideat, kokemuksen, kriittisen silmän ja päätökset.

Tekoäly tuo valtavan määrän teknistä kapasiteettia, nopeutta ja mahdollisuuden kokeilla asioita, jotka muuten voisivat jäädä kokonaan tekemättä.

Lopputulos syntyy näiden kahden välissä.

Ja ehkä juuri siksi tästä projektista on tullut paljon kiinnostavampi kuin osasimme alussa ajatella.

Pieni ajatus animaatioista on muuttumassa pala palalta oikeaksi työkaluksi.

Ja projekti on edelleen kesken.

Seuraava koodirivi odottaa jo.

Kiinnostuitko? Kysy lisää, tai ota yhteyttä