Category Archives: Uncategorized

Virtuaali ja lisätty todellisuus (VR- ja AR) – Monet mahdollisuudet

AR- ja VR -teknologiat ovat viimeisten vuosien aikana nostaneet suosiotaan monilla eri aloilla. Tässä kirjoituksessa puramme mitä eroa on virtuaalitodellisuudella ja lisätyllä todellisuudella ja mitä hyötyä näiden ymmärtämisestä voi olla usealle eri toimialalle. 

AR

Lisätyn todellisuuden lyhenne AR tulee sanoista “augmented reality”. AR:ssä käyttäjän näkemä todellisuus on oikeaa, mutta siihen on lisätty virtuaalisia objekteja teknologian avulla.  Näin AR lisää meidän todellisuuteemme asioita käyttäjän nähtäväksi ja mahdollistaa objektien tarkkailun sekä interaktion lisättyjen elementtien kanssa. AR siis laajentaa käyttäjänsä näkymää todellisuudesta. 

Esimerkiksi AR-peleistä käy suuren suosion saavuttanut Pokemon Go, jossa pelaajat kulkevat oikeassa maailmassa nähden tuttuja paikkoja, mutta maailmaan on lisätty televisiosta tuttuja pokemoneja, joita pelaajat pystyvät ottamaan kiinni ja taistelemaan niiden kanssa. 

Muilla toimialoilla AR-sovelluksia on käytetty muun muassa tapana lisätä digitaalisia objekteja oikeisiin ympäristöihin, jolloin yritykset ovat voineet etukäteen tarkkailla ja havainnoida, miltä heidän tuotteensa näyttäisivät oikeassa maailmassa. Samankaltaisesti toinen kuluttajille tarkoitettu AR-sovellus antaa asiakkaille mahdollisuuden nähdä etukäteen, miltä tuotteet näyttävät omassa kodissa 3D-malleja hyödyntäen. Monelle myös helppona arkisena esimerkkinä AR-teknologiasta toimivat Snapchatistä tutuksi tulleet naamafiltterit, jotka lisäävät henkilön omiin kasvoihin erilaisia hassuja virtuaalisia lisäyksiä. 

VR 

VR-lyhenne tulee englannin kielen sanoista “virtual reality”. Virtuaalitodellisuus eroaa AR:stä siten, että sen luoma maailma, jonka käyttäjä näkee, on täysin digitaalisesti luotu. Toisinsanoen siinä, missä AR lisää todellisuuteemme elementtejä, VR luo täysin uuden todellisuuden. 

VR:ää on käytetty muun muassa erilaisissa koulutussimulaatioissa. Esimerkiksi terveysalalla VR-sovelluksia on käytetty valmistelemaan lääkäreitä haastaviin operaatioihin. VR-teknologiaa on sovellettu myös urheilussa, pelialalla, koulutusalalla, kaupan- ja matkailualalla. Esimerkiksi Ikea on toteuttanut VR-sovelluksen, jossa asiakkaat voivat kulkea virtuaalisessa kaupassa katsellen oikeiden tuotteiden virtuaaliversioita.

Myös eri maiden puolustusvoimat ovat ottaneet teknologian käyttöön ja olemme itsekin toteuttaneet VR-demon, jolla voidaan opettaa taistelijalle kiristyssiteen oikea kiinnittäminen..

Mitä käytännön sovelluksia VR- ja AR todellisuuksilla on?

VR – ja AR -teknologia on sovellettavissa lukuisilla eri toimialoilla. Tässä osiossa tarkoitus on nostaa esille muutama toimiala ja tarjota esimerkkejä tavoista joilla lisättyä todellisuutta on sovellettu kyseisellä alalla. 

A heart symbol with  a cardiogram and a stethoscope

Terveysala

  • -Operaatioiden valmistelut
  • -Simulaatiot ja harjoitukset
  • -Hoitotarkoituksiin (fobiat, masennut, addiktio)
  • -Kivusta harhauttaminen
  • -Tuote- ja välinesuunnittelu
  • -Diagnostiikka
  • -Anatomiatietoisuus
  • -Kuntoutus

A graduation hat with an open book infront of it

Koulutus

  • -360 asteen interaktiiviset oppimisympäristöt
  • -3D-elementtien luominen oikeaan maailmaan
  • -Luovat ja mieleenpainuvat oppimiskokemukset 
  • -Virtuaalimatkat eri maihin tai historiallisiin paikkoihin 
  • -Ihmiskehon ja anatomian simuloiminen 
  • -Vieraiden eläinten tutkiminen läheltä simulaatioiden avulla 
  • -Lukuisat mahdollisuudet eri oppiaineissa kuten historia, terveystieto ja biologia
a tank and a medal

Puolustusvoimat

  • -Suunnittelu 
  • -Koulutus ja valmistautuminen 
  • -AR-näkymä kypäriin  
  • -Uniikkien tilanteiden ja ympäristöjen luominen 
  • -Erilaiset koulutussimulaatiot 
Pac-Man like figure and a joystick

Peliala

  • -Virtuaalitodellisuuspelit käytännössä loputtomilla mahdollisuuksilla 
  • -AR-pelit, jotka motivoivat pelaajia tutustumaan lähtemään kotoaan ja tutkimaan ympäristöään
half a globe with different buildings rising up

Turismi

  • -Matkakohteiden virtuaaliversioissa vierailu valinnan helpottamiseksi 
  • -Lentoyhtiöt käyttäneet VR:ää matkaviihdykkeenä matkustajille 
  • -Tapa kokea matkustamisen tunne jos on estynyt niin tekemään 
american football, soccer ball, tennis ball and a racket, golf club and a a gold ball

Urheilu

  • -Treenamisen tueksi erilaiset urheilusimulaatiot 
  • -Simulaatiot myös käytössä silloin jos hallit ja kentät ovat saavuttamattomissa 
  • -Kuntoutuksessa kevyt askel kohti urheilijan paluuta lajiin 
  • -Urheiluvaatteiden ja välineiden suunnittelu 

 

VR- ja AR tulevaisuudessa? 

  • -AR:n ja VR:n yhdistymistä on ennustettu tulevaisuudessa. Tällöin virtuaalisesti tuotetut ympäristöt ovat lähes erottamattomia oikean maailman ympäristöistä ja esineistä.
  • -VR-lasien designin uskotaan muuttuvan enemmän arkisemmaksi. Mahdollisena suuntana aurinkolaseja muistuttava design, jolloin voidaan olettaa myös VR:n leviämisen arkisempaan käyttöön. 
  • -Tekoälyn ja AR:n yhdistyminen rekrytoinnin avuksi. 
  • -Marsiin matkustamisen kokemus simulaation kautta kaikkien ulottuville. 
  • -Virtuaaliset sovituskopit auttamaan verkko-ostosten tekemiseen. 
  • -AR leviää entistä enemmän teolliselle alalle suunnitelun ja tuotekehityksen tueksi sekä parantamaan turvallisuutta.
  • -AR osana muodostamassa niin kutsutta extended realitya (XR), jossa todellisuutta voidaan muokata digitaalisesti. 

Self Dev -ohjelma Zaibatsulla käyttöön – WE ARE DEV

Kuvassa mies on painnostosalilla Zaibatsu t-paida päällä. Kuva havainnollistaa Self-Dev blogin itsensäkehittämisen teemaa

Mistä on kyse?

Zaibatsulla otettiin käyttöön uusi Self Dev-ohjelma, joka antaa henkilöstölle mahdollisuuden käyttää 5% työajastaan henkilökohtaisen osaamisensa kehittämiseen. Käytännössä tämä muuntuu kahdeksi tunniksi viikossa ja kahdeksaksi tunniksi kuukaudessa. Tämä osaaminen voi olla muun muassa opiskelua, kerhotoimintaa, alan kokoontumisia ja koulutuksia, peli- tai softaprojekti tai mikä tahansa omaa ammatillista osaamista kehittävää toimintaa. 

Yhdessä tekeminen on hauskempaa 

Yhdessä kehittyminen on paitsi hauskempaa myös tehokkaampaa. Siispä Zaibatsu on myös sitoutunut tukemaan mahdollisten harrastekerhojen perustamista ja kerhon välineiden hankintaan on mahdollista pyytää rahoitusta. 

We are Self Dev

Antamalla henkilöstölle aikaa kehittää itseään luomme henkilöstölle mahdollisuuksia tiukan työkontekstin ulkopuoliselle kanssakäymiselle, mahdollisuuksia ammattitaidon kasvattamiselle sekä luomme organisaatiokulttuuria ja ilmapiiriä, joka tukee ja ravitsee henkilöstöään. 

Self Dev-ulottuvuudet:

Sosiaalinen ulottuvuus

– Jaamme oppeja kahvitauolla, omilla viestintä kanavillamme ja blogissa

– Kerhotoiminta yhdistää meitä entisestään ja mahdollistaa toisiltamme oppimisen sekä luo tilaisuuden rennolle yhdessä tekemiselle. 

Ammattitaito

  • – Henkilöstön osaamisen kehittyminen kasvattaa koko yrityksen osaamispääomaa sekä luo alustan jatkuvalle kehitykselle ja kasvamiselle. 

Innovaatiot

  • – Omasta projektista voi syntyä uusi tuote tai esille voi nousta jotain muuta potentiaalisesti merkittäviä oppeja ja innovaatioita. 

Lue myös Zaibatsun tiimin osallistumisesta Global Game Jamiin, joka oivasti havainnollistaa omien projektien potentiaalin: https://zaibatsu.fi/global-game-jam-zaibatsu-mukana-jamittelemassa/

Lisätietoa GGJ 2021 täältä: https://globalgamejam.org/news/we-did-it-ggj-online-2021-over-fun-has-just-begunhttps://globalgamejam.org/news/we-did-it-ggj-online-2021-over-fun-has-just-begun

Angular; tunteiden vuoristorata – Mikä ja miksi?

Angular on Reactin tavoin käytössämme oleva sovelluskehityksen työkalu. Tämän kirjoituksen tarkoituksena on avata Angularia työkaluna jakamalla se omiin alakohtiinsa ja tarjoamalla lyhyt kuvaus siitä, mitä Angular tarjoaa kyseiselle osa-alueelle. Tekstin alussa on tiivistelmä, jota seuraa yksityiskohtaisempi purku.

Meillä käytössä on Angular 2+, joka on puhtaasti TypeScript-versio. Reactiin verrattuna se sisältää sekä lyhyemmän sovelluksen latautumisajan että erityisen hyvän sopivuuden mobiilikehittämiseen. 


Angular tiivistettynä 

1. Googlen kehittämä ohjelmistokehys (framework). Angular on TyperScript-pohjainen sekä verkko- että mobiilisovellusten kehittämiseen tarkoitettu työkalu. Työkaluna Angular on täysin holistinen tarkoittaen sitä ettei sen käyttö vaadi resurssien hakemista muista Angularin ulkopuolisista kirjastoista. 

2. Angularin käyton opettelu vaatii paljon aikaa ja on haasteellista, mikä tekee siitä jo enemmän osaavien ohjelmoijien työkalun. Sen suorituskyky on kilpailukykyinen, erityisesti sen optimoidun tilanmuutoksen paikannuksen puolesta. Toimintaohjeet eivät käy järkeen ellei ohjelmoijalla ole aikaisempaa osaamista Angularista. 

3. Ohjelmointikielinä JavaScript ja TypeScript. Sovellusrakenne on kiinteä, monimutkainen ja komponenttipohjainen. Angularissa on kolme kerrosta. Malline, Ohjaus ja Näkymä. Angular tarjoaa valmiita komponentteja, jotka nopeuttavat sovelluksentekoprosessia.


Yleiskatsaus ja universaalisuus

Angular on Googlen kehittämä avoimen lähdekoodin web-ohjelmistokehys. Se pohjautuu TypeScriptiin ja soveltuu sekä yksi- että monisivuisten verkko- ja mobiilisovellusten kehittämiseen.

Omavaraisuus 

Angularin omat ominaisuudet riittävät valmiin sovelluksen tuottamiseen, jolloin se ei vaadi resurssien noutamista muista, Angularin ulkopuolisista kirjastoista. 

Angular sisältää useita eri toimintoja, kuten:

  • – datan sidonta
  • – komponenttipohjainen reititys
  • – projektin luominen
  • – kaavakkeiden vahvistamiseen sekä riippuvuusinjektioihin liittyvät funktiot 

Oppiminen

Suurten kirjastojensa vuoksi Angular tarjoaa käyttäjälleen useita eri vaihtoehtoja sekä ongelmanratkaisuun että TypeScriptin käyttöön.

Angularin täydellinen oppiminen voi olla pitkä ja kivinen polku, joka vaatii aikaa ja kärsivällisyyttä. Jotkut ohjelmoijat kokevat Angularissa olevan turhaa syntaksia, joka monimutkaistaa sen opettelua. Lisäksi sen ohjelmistokehyksen ytimessä on monimutkaisia toimintoja, joiden opettelua ei voi välttää.

Jatkuvat päivitykset myös pitävät ohjelmoijan varpaillaan ja pakottavat tämän jatkuvasti uuden opetteluun. Kuitenkin ohjelmoijan saavuttaessa tarvittavan osaamistason, tulee Angularista oivallinen työkalu ja lisäys tämän työkalupakkiin. 

Kuvassa esitetään siksak-kuviona etenevää Angular-sovelluksen oppimiskäyrää
Alkuperäinen kuva by MindMajix
(Linkki sivulle:
https://mindmajix.com/seven-myths-about-angularjs-unleashed)

Angular – yhteisö ja yritykset

Kuten mainittu, Angularin on kehittänyt Google, mikä antaa sille välittömästi uskottavuutta työkaluna. Angularia on mukana päivittämässä myös sen ahkera seuraajayhteisö. Google tarjoaa pitkän kantaman tukea Angularille ja on jatkuvasti kehittämässä sitä eteenpäin. Päivitysten nopean tahdin vuoksi niiden dokumentointi tosin jää usein jälkeen. 

Angular on suosittu myös useiden organisaatioiden käytössä. Näiden organisaatioiden joukkoon kuuluvat muun muassa McDonald’s, AT&T, HBO, Apple, Forbes, Adobe, Nike ja Microsoft. Kaikki yllämainitut nimet ovat suuren luokan vaikuttajia, mikä myös lisää Angularin uskottavuutta ja sen meriittejä ohjelmistotyökaluna.  

Suorituskyky

Angularin suorituskyky oli aluksi heikompi kuin esimerkiksi Reactissa, varsinkin kun kehitettävä sovellus on suuri ja monimutkainen.  

Syynä tähän heikompaan suorituskykyyn on osittain Angularin kaksisuuntaisessa datan sitomisessa. (data binding), joka hidastaa sovelluksen suorituskykyä.

Jokaisessa sidoksessa toimii ns. “watcher”, joka valvoo muutoksia sovelluksessa. Tämän vuoksi, mitä enemmän sovelluksessa on on sidoksia, sen enemmän siinä on watchereita, jonka vuoksi prosessistakin tulee vaivalloisempi.

Angularin käyttäjien onneksi uusimpien päivitysten myötä tämä suorituskykyongelma ei ole enää yhtä kriittinen. Angular-sovelluksen koko on myös hieman pienempi kuin esimerkiksi Reactilla tehdyn vastaavanlaisen sovelluksen koko.

Ohjelmointikieli 

Angular voi käyttää JavaScriptiä tai TypeScriptiä. Meillä Zaibatsulla käytetään TypeScriptiä, koska se on kompaktimpaa kuin JavaScript, mikä taas tarkoittaa sitä, että myös koodi on kompaktimpaa: sen läpi on helpompi navigoida ja myös kirjoitusvirheet koodissa ovat helpommin havaittavissa. Lisäksi myös refaktorointiprosessi eli lähdekoodin muuttaminen on myös nopeampaa ja yksinkertaisempaa.

Angular – sovellusrakenne

Angularin rakenne on kiinteä ja monimutkainen, mikä sopii kokeneille ohjelmoijille. 

Angular koostuu kolmesta kerroksesta; malline, ohjaus ja näkymä. Malline-kerroksesta (Model) vastuussa oleva objekti alustetaan Ohjaus-kerroksessa (Controller) ja se esitetään Näkymä-kerroksessa (View).

Sovelluksen koodi koostuu Angularin eri kompotenteista, joista jokainen kirjoitetaan neljään erilliseen tiedostoon. TypeScriptia käytetään komponentin toteutukseen, HTML-tiedostoa määrittämään näkymä, CSS– tiedosto määrittämään tyylilliset piirteet ja erillinen tiedosto testaustarkoitukseen. Angularin komponentit ovat myös uudelleenkäytettäviä.

Kuvassa näkyvät Angularin kolme rakenteellista kerrosta; Model, View ja Controller

Käyttöliittymäkomponentit 

Angularissa on sisäänrakennettuna materiaalisetti, joka tarjoaa valikoiman esirakennettuja Material Design -komponentteja. Näihin komponentteihin kuuluu muun muassa erilaisia valmiita nappuloita, asetelmia, indikaattoreita ja pop-uppeja, joita voi käyttää sovelluksessa. Näiden valmiiden komponenttien vuoksi käyttöliittymän kokoonpano on nopeampaa ja yksinkertaisempaa.

Angular – ohjesäännöt 

Angularin syntaksiohjeet ovat monimutkaisia, mikä tekee niistä mahdottomat ymmärtää lukijalle, jolla ei ole aikaisempaa kokemusta tämän teknologian kanssa työskentelystä. Tästä syystä Angular on yleisesti ottaen kokeneempien ohjelmoijien työkalu.

Riippuvuusinjektio

Angularin suurin etu Reactiin nähden on se, että Angular tukee niin kutsuttua riippuvuusinjektiota (dependency injection), jota React ei tue. Tämä riippuvuusinjektio siis mahdollistaa objektien vastaanottavan toisia objekteja, joihin se tulee riippuvaisiksi. Tämän vuoksi Angular mahdollistaa myös eri mittaisten elinkaarten luomisen.

Kuvassa havainnollistetaan, miten riippuvuusinjektio toimii Angularissa. Illustrates how "dependency injection works"

Datansidonta 

Angular toimii kaksisuuntaisella datan sitomisella ja vaihtelevalla datalla. Vaikka vaihtelevan ja vaihtelemattoman datan hyödyt ovat kiivaan keskustelun aihe, on kaksisuuntaisen datan kanssa työskentely helpompaa kuin yksisuuntaisella lähestymistavalla. Samaan aikaan tosin, kaksisuuntainen datan sitominen vaikuttaa negatiivisesti aikaisemmin mainittuun suorituskykyyn, watcherien automaattisen luomisen vuoksi. 

Kuvalla havainnollistetaan Angularissa ilmenevää kaksisuuntaista datansidontaa.  Illustrates "Two-Way Data Binding"

Työkalut 

Reactin tavoin Angularin tukena on useita editointityökaluja. Esimerkkityökaluna Aptana, Visual Studio ja Sublime. Serveripuolen renderöinnissä apuna käytetään Angular Universalia. Angularilla tehdyt sovellukset pystyy myös testaamaan yhdellä työkalulla. Päästä-päätyyn testaamiseen (end-to-end testing) Angularissa voi käyttää Jasminea, Protractoria tai Karmaa. Debug-työkaluna kehitysvaiheessa toimii selainjatke Augury. Angular siis mahdollistaa useiden eri työkalujen käyttämisen tuekseen.

React – Käyttöliittymien rakentamisen kivijalka.

React on monelle tuttu nimi, mutta harva osaa silti tarkasti kuvailla mikä React oikein on ja mitä sillä tehdään. Typistettynä, React on interaktiivisten käyttöliittymien tekemisen kultamikiviä. Tämä artikkeli pyrkii kuitenkin selventämään mikä on React ja mitä hyötyä sen käytöstä ja hallitsemisesta on yksinkertaistavien esimerkkien kautta. 

Tilan muutokset

React on JavaScript-kirjasto, joka on pääasiallisesti tehty käsittelemään tilan muutosten hallinnoimiseen liittyvää ongelmaa. Reactin loi Facebookin työntekijä John Walke ja sen suosio perustuu sen yksinkertaisuuteen ja joustavuuteen.

Tilalla tarkoitetaan sovelluksen sen hetkisessä tilassa vallitsevaa totuutta. Esimerkiksi, kun vierailet verkkosivulla, sivusto aukeaa tietyssä “aloitustilassa”. Verkkosivulla ollessasi klikkaat painiketta, joka avaa menun. Menun ollessa auki sovellus on uudessa tilassa. Sivulla on mahdollisuus tykätä asioista, painat tykkäysnappia ja ikoni vaihtaa väriään tykkäyksen merkiksi. Nyt sovellus on jälleen uudessa tilassa. 

Kuvitellaan, että sivun nurkassa on laskuri indikoimassa tykkäysten määrää, jolloin sivua tehdessä on loogista, että aina tykkäyksen ilmetessä tykkäysmäärä päivittyy.  Muistetaan, että jokainen tykkäys luo sivustolle uuden tilan, näin ollen erilaiset yhdistelmien ja permutaatioiden ja niiden tilojen perässä pysyminen muuttuu todella monimutkaiseksi. 

Tässä kohtaa React astuu kuvioihin. React tekee tilojen hallinnoimisesta helpompaa varastoimalla “keskeisen totuuden” ja antamalla tämän ikään kuin valua alas eri komponentteihin, jotka muodostavat sovelluksen. Tämä tehdään sen sijaan että pyrittäisiin hallinnoimaan prosessia, jossa kerrotaan jokaiselle komponentille erikseen mikä niiden ominainen tehtävä on. Nämä komponentit asetetaan ikään kuin heijastamaan senhetkistä tilaa. 

Havainnollistava kuva propsien tiedonvälityksestä komponenteille, jotka vuorostaan päivittävät tilaa.

React on “selittävä”, siten että logiikkasi päätavoite on kertoa ohjelmalle “Sen kuuluisi näyttää tältä”. Vastakohtana taas “määräävä”,  joka on kuin kertoisi ohjelmalle “Sinun kuuluisi tehdä näin”. 

Yksinkertaistava maalausesimerkki 

Kuvitellaan, että maalaat ja haluat maalaukseen keltaisen taustan, mutta käytössäsi on vain kolme väriä; punainen, vihreä ja sininen. 

JavaScriptillä lisäisit ensin punaisen värin, joka saa värin muuttumaan. Se näyttää erilaiselta nyt; sen tila on muuttunut. Seuraavaksi, lisäät hieman vihreää ja väri muuttuu keltaiseksi kuten myös maalauskankaan tila. Hienoa, tavoite saavutettu. 

React.js:llä taas voit sekoittaa kaikki värit etukäteen käyttäen “maalipyttyä”, jota React kutsuu komponentiksi, juuri ennes kuin kanvaasi (ja tila) päivittyy. Jälleen sama tavoite saavutettu.

Molemmat tavat ovat toimivia, mutta on huomattavasti hankalampaa lisätä jokaista väriä yksitellen ja pysyä perässä kankaan muuttuvista väreistä. Kun taas vaihtoehtoisesti on paljon helpompaa sekoittaa värit etukäteen Reactilla ja lisätä ne suoraan kankaalle.

Tekninen puoli

Reactiin liittyvää termistöä:

JSX

JSX on syntaksijatke JavaScriptille. JSX näyttää samantapaiselta kuin HTML-merkintäkieli, mutta sillä on todellisuudessa käytössään JavaScriptin täydet voimat. Se näyttää samalta kuin HTML-merkintäkieli JavaScript-tiedostossasi. 

JSX:n avulla voit kirjoittaa HTML-tyylisiä rakenteita samaan tiedostoon, johon kirjoitat JavaScript-koodia. JSX siis mahdollistaa HTML-merkintäkielen syöttämistä JavaScript-ohjelmointikieleen kun ennen tämä oli mahdollista vain toisinpäin.  

Tila

Tiloja käytetään määrittämään milloin asioiden tulee muuttua. Esimerkiksi jonkin elementin näkyminen, tiedon päivittyminen ja niin edelleen. Tiloja käytettäessä tulee olla asetettu niin kutsuttu lähtötila. Komponentti tarvitsee tilan kun jokin tilaan liittyvä data muuttuu ajan kuluessa.

Komponentti 

Reactin komponentit ovat pieniä, uudelleenkäytettäviä koodinpalasia jotka palauttavat tietyn React-elementin näytettäväksi sivustolle. Komponentit toimivat ikään kuin sivustosi rakennuspalikoina. 

Yksinkertaisin versio komponentista on JavaScript-funktio joka palauttaa React-elementin.

Komponentit voidaan purkaa selkeiksi osiksi niiden toiminnallisuuden kautta ja niitä voi myös käyttää toisten komponenttien sisällä. Nyrkkisääntönä: jos jotain käyttöliittymän osaa käytetään usein (nappi tai paneeli) tai se on tarpeeksi monimutkainen (sovellus), se on hyvä kandidaatti uudelleenkäytettäväksi komponentiksi. 

Property tai “prop” 

“Propsit” ovat syötteitä React-komponenteille. Ne ovat dataa, joka on toimitettu vanhempi-komponentista lapsi-komponentille. Niitä siis käytetään tiedonvälitykseen komponenttien välillä. Perusidea on se että voit kirjoittaa yksittäisen komponentin, jota voit käyttää useamman kerran eri paikoissa sovellusta, jolloin propsit siis auttavat kirjoittamaan uudelleenkäytettävää koodia.

Propsit ovat avattavissa ja luettavissa, mutta niitä ei voi muokata kirjoittamalla tiedostoon. Niitä ei myöskään tulisi muokata millään tavoin. Mikäli jotain arvoa haluaa muuttaa, suositellaan tämä tekemään “tilan” kautta. 

Document Object Model tai “DOM”

DOM on tapa kuvata rakenteisen dokumentin rakenne puuna, jonka eri olioita voi hakea, tutkia ja manipuloida esimerkiksi JavaScriptin avulla. DOMin avulla voi toteuttaa vuorovaikutteisia www-sivuja jotka eivät vaadi jatkuvaa palvelinyhteyttä. DOM:in tarkoitus on määrittää kuinka dokumentissa olevat elementit välittävät tietoa toisilleen ja kuinka näihin elementteihin voidaan viitata. 

Zaibatsu kasvaa ja kehittyy – WE ARE DEV

Zaibatsu ja uusimmat tapahtumat

Zaibatsu on vuonna 2014 perustettu keskisuomalainen peli- ja ohjelmistotalo, joka on vuosien aikana kasvattanut toimintaansa sekä henkilöstöään suuremmaksi. Nyt viime syksynä ja alkuvuodesta on meillä täällä Zaibatsun konttorilla puhaltaneet vahvat muutoksen tuulet. 

Kesän jälkeen koitti muutto uuteen ja tilavaan toimistoon Jyväskylän Väinönkadulle. Jo joulukuuhun mennessä saimme hienot uuden brändin mukaiset seinämaalaukset sekä uudet kalusteet koristamaan tilojamme. Kalusteiden lisäksi toimistoomme ilmestyi markkinointitiimi ja sen jäsenet Lari ja Niko.

Brändin uusiutumisen ei kuitenkaan haluttu näkyvän vain meille yrityksen sisällä, vaan halusimme sen myös ulospäin kaikkien nähtäväksi, joten pian Väinönkadun varrelle ilmestyikin Zaibatsun ikioma valomainos heijastamaan Z-perheen logoa Jyväskylän katukuvaan – kuin Batsignaali Gothamissa.

Lisäksi uudistimme verkkosivumme hajauttamalla yrityksemme eri toimialat erillisiksi sivuiksi, jolloin kumpikin sivu edustamaan paremmin toteuttamaan omaa pääasiallista tarkoitustaan. Uusi sivustomme Zaibatsugames.com nostaa esille pelikatalogimme sekä informoi miten ottaa meihin yhteyttä peliyhteistyöhön liittyen. Kotimaansivustomme Zaibatsu.fi toimii frontend-palveluidemme fronttina (pun intended) tarjoten tietoa erilaisista frontend- ratkaisuistamme sekä siitä keitä me täällä Zaibatsulla olemme. 

Miksi näin?

Yritys oli edennyt siihen pisteeseen  etteivät vanhat tilat enää riittäneet henkilöstölle, laitteistolle eivätkä yksinkertaisesti olisivat olleet tarpeeksi meille päästäksemme asetettuihin tulevaisuuden tavoitteisiin kasvuun liittyen. Tästä syystä muutto koettiin välttämättömäksi ensiaskeleeksi. 

Me Zaibatsulla olemme tavoitteellisia ja ahkeria, ja yrityksenä pyrimme kasvamaan ja tulemaan paremmiksi asiantuntijoiksi alallamme. Tämä puolestaan johtikin päätökseen brändin ja toimintamalliemme uudistamisesta. Halusimme uudistaa brändin myös tuodaksemme paremmin esiin yhteisiä arvojamme ja myös viestiä näistä ulospäin asiakkaille ja kumppaneille. 

Zaibatsu ja tulevaisuus

Tulevaisuudessa tavoitteinamme on jatkaa brändimuutoksen kanssa eteenpäin, hankkien lisää näkyvyyttä ja tunnettuutta juurikin frontend-palveluiden tarjoajana ja konsultoijana. Pelipuolella taas haluamme jatkaa laadukkaiden pelien tuottamista, löytää hyviä kumppanuuksia ja saavuttaa asemaa yhtenä Suomen Top 10 peliyrityksenä vuoteen 2022 mennessä. 

Valmiina vastaiskuun! Matka kohti Kanaliigaa kulki Jyväskylän GamePit Pron kautta.

Miten tähän päädyttiin?

Ajatus Zaibatsun omasta Counter-Strike -joukkueesta nousi tapetille alun perin huhtikuussa 2018, mutta sillä erää asia ei edennyt ajatusta pidemmälle. Joulukuussa 2019 olimme kuitenkin varanneet paikallisesta pelikeskuksesta Victory Pointista tilat pikkujouluillemme, ja tuolloin kaikki halukkaat pääsivät yhdessä pelaamaan Counter-Strikea.  Joukkueen kapteeni Herkko sanookin juuri tämän herättäneen jälleen kipinän joukkueen kasaamiseen.

Pohdittaessa, miten pelaamisen kanssa edettäisiin, Kanaliiga ja siihen osallistuminen nousi esille loogisimpana valintana. Kanaliiga on yritysliiga, joka tarjoaa yrityksille mahdollisuuden kasata oman joukkueen ja osallistua eSports- turnauksiin muiden perinteisten yritysliigojen tavoin. Kanaliiga tarjoaa eri moninpelivaihtoehtoja, joista yksi on juurikin Counter-Strike.

Kanaliigan alkuun oli kuitenkin yhä aikaa ja tiimi myös koki tarvetta hioa taitojaan ennen itse turnaukseen osallistumista, missä Jyväskylän Ammattikorkeakoulun Gamepit Pro tuli apuun. Zaibatsu ja Gamepit Pro ovat pohtineet erilaisia yhteistyö- ja kumppanuusmahdollisuuksia, ja näiden keskustelujen yhteydessä nousi esille Zaibatsun Kanaliigaan osallistuminen. Gamepitillä on oma eSports-koulutusohjelma nuorille, jotka myös kaipasivat harjoittelua. Koska pyrimme aina tilaisuuden tullen tarttumaan mahdollisuuksiin tukea paikallista pelitoimintaa sekä nuorten osallistumista siihen, yhteinen harjoituspeli lyötiin lukkoon pidemmittä puheitta.

Zaibatsun Counter-Strike-tiimi

Counter-Strike -peliturnauksissa tiimit koostuvat yleensä viidestä pelaajasta.  Zaibatsun tiimissä kapteenina toimi myyntipäällikkömme Herkko Pirskanen ja pelinjohtajana toimi peliohjelmoija Aleksi Toivonen. Tiimiä täydensivät graafikko Timo Koski sekä ohjelmoijat Kalle Collan ja Juho Turpeinen.

Zaibatsun tiimikokoonpanoon kuuluvat myös senioriohjelmoijamme Pauli Kettunen ja Tuomo Oksanen,  peliartistimme Janet Vaher sekä itse toimarimme Jussi Perttola. He tulevat täydentämään pelikokoonpanoja tulevaisuudessa.

Counter-Strike treeni ja valmistautuminen

Zaibatsun tiimi otti vastustajansa erittäin tosissaan, vaikka kyseessä olikin harjoitusottelu. Tiimi harjoitteli edeltävänä viikolla noin 20 tuntia sekä piti ylimääräiset treenit JAMKilla pari päivää ennen peliä. Harjoituksissa käytiin läpi muun muassa eri pelikentät ja -kutsut sekä niiden käyttö. Kommunikaatio ja taktiikka nousivat harjoituksissa tärkeään rooliin.

Pelin kulku ja tulokset

Nuoret tekijät aloittivat kovaa ja kukistivat Zaibatsun tiimin ensimmäisessä kentässä pistein 11–16, mikä pakotti pelinjohtaja Aleksin ottamaan ohjat tiukasti käsiinsä seuraavaan kenttään siirryttäessä.

Tiimin onneksi Aleksi teki juurikin tämän ja yhdessä taitavalla pelaamisella ja laadukkaalla pelinjohtamisella Zaibatsu voitti seuraavan kentän kauniisti pistein 16–8.

Viimeiseen kenttään mennessä tilanne oli tasan erävoitoin 1–1 ja elimme ratkaisun hetkiä. Zaibatsun tiimillä pakka pysyi kasassa yhä edellisen kentän tavoin ja Gamepitin nuorukaiset eivät hyvästä yrityksestä huolimatta kyenneet löytämään keinoa horjuttaa Zaibatsun voittokulkua. Viimeinen erä loppuikin pistein 16–4, näin ollen päättäen harjoitusottelun Zaibatsun voittoon erävoitoin 2–1.

Kiitokset

Lopussa on luonnollisesti kiitoksen paikka ja koko Zaibatsun tiimi haluaakin kiittää Gamepitin nuoria siitä että mahdollistivat tämän kaiken.

Kapteeni Herkko kommentoi kokemusta:

Vastustaja pelasi hyvin, nuoret olivat hyvällä asenteella ja tosissaan pelaamassa. Voitetut erät ja kartta osattiin ottaa hyvin, eikä tappiokaan aiheuttanut isompia reaktioita.

Iso hatunnosto ja iso kiitos mahdollisuudesta Game Pitille. Valmennusryhmä tekee loistavaa työtä, niin nuorisotyön kuin paikallisen CS-skenenkin näkökulmasta, tarjoamalla nuorille mahdollisuuden päästä ohjatusti harjoittelemaan ja tavoittelemaan mahdollista ammattilaisuutta.”

Jälkipyykki ja mitä seuraavaksi

Pelin jälkipyykkiä pestessä todettiin, että paljon on yhä työstettävää jatkopelejä ajatellen. Varsinkin tietyt pelikentät aiheuttivat haasteita, joihin pyritään kiinnittämään huomiota tulevissa harjoituksissa. Kommunikaatio ja yhteispeli nousivat tärkeään rooliin onnistumisen kannalta ja niiden ylläpitämiseen sekä kehittämiseen tullaan keskittymään harjoituksissa.

Tiimin loppusanat

Kokemuksena gamepit oli mahtava, tilat oli hyvät ja yhdessä pelaaminen samassa tilassa sai paljon kiitosta. Kokemuksena tämä oli varmasti mieleenpainuva kaikille osallistuneille ja streamissäkin saatiin yllättävän monta silmäparia seuraamaan ottelua. On myös aina hienoa saada tilaisuus olla osana tukemassa sekä nuorten tekemistä että paikallista pelitoimintaa.”

Nyt tiimimme ei kuitenkaan jää suitsuttamaan liikaa hyvää peliä vaan suuntaa katseensa jo seuraavaan etappiin. Se onkin itse Kanaliiga ja turnauksen aloitusottelu tiistaina klo 20, kun vastaan asettuu kooditalo Hurja Solutions. Tämän ottelun jälkeen Zaibatsun pelit jatkuvat seuraavan kerran jo sunnuntaina 22.3., kun vastaan saadaan toinen IT-pumppu, Qvantel. Ottelu alkaen klo 19:30 ja on seurattavissa Twitch-palvelun kautta.

Arvomme / Kuusi pääarvoamme -Zaibatsu Code of Honor

Brändiuudistuksemme yhteydessä halusimme kiinnittää enemmän huomiota siihen keitä me täällä Zaibatsulla olemme ja siihen, mitkä ovat meidän keskeiset arvomme. 

Keskustelun ja pohdinnan tuloksena arvomme kirjattiin brändikäsikirjaan. Seuraavat kuusi pääarvoamme mielestämme tiivistävät sen, mikä meille on tärkeää ja mikä ohjaa kaikkea tekemistämme. 

Honour / Arvostus

Kaiken työmme ja tapojen, joilla toimimme, tulee heijastaa kunnioitusta toisia kohtaan – samoin kuin heidän oikeuksiaan ja tavoitteitaan kohtaan. Tämän perustana toimii se arvo, jonka asetamme omalle ammattitaidollemme ja maineellemme.  

Integrity / Rehellisyys

Olemme aitoja, läpinäkyviä ja jakavia laajennetun työyhteisömme jäseniä. Tällä tarkoitamme, että toiminnassamme pyrimme aina olemaan rehellisiä, jopa silloin, jos törmäämme ongelmiin. Olemme läpinäkyviä toiminnassamme:  mitä enemmän kumppanimme toiminnastamme näkevät, sen parempi. Jaamme ja vaihdamme myös tietoa ja osaamista yhteistyökumppaniemme kanssa, koska se tiedämme sen olevan tie kohti kasvua, hyviä kumppanuuksia ja osaamisen kasvua. 

Progress / Kehittyminen

Pidämme jatkuvasti silmämme auki, etsien mahdollisuuksia kasvaa ja kehittyä paremmaksi siinä mitä teemme, samalla pyrkien auttamaan muita heidän omilla kasvupoluillaan. 

Tyytyväisyys on kasvun pahin vihollinen, minkä vuoksi emme koskaan jää paikoillemme taputtamaan itseämme selkään vaan etsimme jatkuvasti uusia mahdollisuuksia parantaa osaamistamme. Kuitenkin tiedostamme, että emme voi kasvaa ilman vastavuoroisuutta. Siispä pyrimme myös tukemaan kumppaneitamme heidän omassa kasvussaan. 

Practicality / käytännöllisyys/  #tostanoin

Olemme ratkaisukeskeinen ja hyvin organisoitunut ryhmä osaavia yksilöitä. Näemme sekä esteet että eeppisiksikin koetut haasteet sarjana täysin toteutettavissa olevia tehtäviä. Haasteet ovat hyväksi! Kehitystä ei voi tapahtua, ellemme ole valmis kohtaamaan ja ylittämään uusia esteitä, siksipä pyrimmekin kohtaamaan ongelmat suoraan ja voittamaan ne käytännöllisin ratkaisuin. 

Communication / Kommunikaatio

Yhteisö voi yltää yksilöitään korkeammalle vain ja ainoastaan, jos se jakaa tietoa ja osaamista. Kysymällä tyhmiä kysymyksiä vältämme tekemästä tyhmiä virheitä. Toisin sanoen: kun osaajamme kehittyvät, he eivät haudo uutta tietoa itsellään vaan jakavat sen muillekin, tehden näin yhden henkilön kehittymisestä koko tiimin kehittymistä. 

Fun / Hauskuus

 Lähtökohtana alalle tulemisessa ja siellä pysymisessä on yksinkertaisesti se, että pidämme hauskojen asioiden tekemisestä. Joten meille hauskuus on vakavaa bisnestä.

Kaikilla meistä on ytimessään tausta pelien kanssa. Juuri niiden tuoma hauskuus on meille tärkeää ja on meidät vetänyt alalle. Siispä suhtaudummekin vakavasti siihen, että se, mitä teemme on hauskaa ja että kanssamme työskentely on osa hupia.

Front end tutuksi alle 200 sanan – Lue lyhyt tietoisku aiheesta

Havainnollistaa työntekijämme työtämässä front endiä toimistolla

Vaikka onkin hyvin todennäköistä, että suurin osa blogimme vierailijoista on ennestään perehtynyt frontendin käsitteeseen, koimme silti tarpeelliseksi kertoa lopuillekin, että mikäs ihme se sellainen front end nyt sitten oikein todellisuudessa onkaan. 

Kaikilla verkkosivuilla on yleisesti ottaen kaksi puolta, sekä front end että backend. Nämä tunnetaan myös nimillä selainpuoli ja palvelinpuoli. Frontti eli selainpuoli on tässä yhtälössä kaikki se koodi, joka ajetaan verkkoselaimessa eli käyttäjän silmien edessä ja jonka kanssa käyttäjä voi olla tekemisissä. 

Frontendiä ja sen eri osia voidaan toteuttaa eri ohjelmointikielien avulla. Tällainen ohjelmointikieli on muun muassa JavaScript. Saatat myös törmätä käsitteisiin  “HTML” ja “CSS”, jotka taas ovat merkintäkieliä. Konkreettisena esimerkkinä frontendistä verkkosivulla ovat muun muassa sen rakenne (HTML), ulkoasu (CSS)  ja selaimessa tapahtuvat toiminnat (JavaScript). 

Peukalosääntönä usein asia yksinkertaistetaan juurikin siten, että front end on kaikki ne komponentit, jotka ovat lähellä loppukäyttäjää ja joiden kanssa tämä on tekemisissä,  kun taas front endin vastinpari backend on kaukana loppukäyttäjästä omalla serverillään.

Tässä oli lyhyt tietoisku frontendista! Toivottavasti teksti antoi teille jotain uutta tai toimi vanhan kertauksena!

Lue lisää fronttikehittäjiemme vuokraamisesta täältä: https://zaibatsu.fi/frontend-kehitys/

Lisäksi laajempi selittävä teksti frontin ja backendin eroista: https://fi.sawakinome.com/articles/software/difference-between-frontend-and-backend-3.html