# Kehitysblogi (ICT-toimeksiantoprojekti) **Markku Vaara** **1703321** Tämä on ICT-toimeksiantoprojekti-kurssiin liittyvä kehitysblogini. Tässä blogissa käydään läpi kurssiin liittyvät toimet, projektikehitystyön vaiheet ja oman työskentelyni kehittyminen aina sprinttejä edeltävästä ajasta viimeisen sprintin loppuun asti. ## 1. Projekti Olin kurssilla osa **opiskelijaryhmä C:tä**, johon kuuluivat ICT-koulutuspolkuopintoihin (lähinnä verkko-ohjelmointiin) suuntautuneet opiskelijat. Toimeksiantajana toimi **Joensuu Entrepreneurship Society**, ja toimeksiannon ja kehitystyön kohteena oli aluksi **Mortarp**-niminen monitahoinen nettisovellus, sekä myöhemmin **Bang!-korttipelin** nettiselainversio. ## 2. Tausta Mortarpin rakenne on pääpiirteissään alla olevassa kuvassa näkyvän kaltainen. Mortarpin on tarkoitus toteuttaa **MVC (Model/Controller/View)** -sovelluskehitysmallia, jossa on olemassa **Kehikko**-niminen keskuskomponentti, joka sisältää datarakenteet ja sovelluksen toimintalogiikan (***Model***), vaihtuva templaatti-komponentti, joka sisältää käyttäjärajapinnan ja sovelluksen ulkoasun (***View***), sekä plugin-komponentti, joka Rest-APIn avulla kontrolloi Kehikon ja templaatin toimintoja (***Controller***). ![](https://i.imgur.com/VbdvcG2.jpg) Toimeksiannossa työstettäviä Mortarpin osa-alueita ovat erityisesti: - Kehikkoon sisältyvät ylläpitäjän (SysAdmin) käytössä olevat ***editorit ja muut hallintasovellukset*** - ***Pluginit*** (Toimintoinstanssit / Backend-puoli) - ***Templaatit*** (Käyttäjärajapintainstanssit / Frontend-puoli) - ***Käyttäjärajapinnan ulkoasu*** (Frontend-puoli). Tarkemmat tehtävämäärittelyt tulevat toivottavasti selväksi projektin edetessä. ## 3. Työkalut ja menetelmät Kehitystyöskentelyyn valittiin seuraavanlaisia työkaluja: Tiimin yhteiset työkalut: - *Scrum* (Ketterä kehitysmenetelmä) - [*Azure DevOps*](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku) (Projektinhallinta ja kokouksien dokumentointi) - [*GitHub*](https://github.com/) (Versionhallinta) - [*Discord*](https://discord.com/channels/691933930915364897/691933930915364900) (Yhteydenpitoväline, teksti) - [*Collaborate-huone*](https://eu.bbcollab.com/collab/ui/session/guest/98d3fe2a8ade42ae886fe6972f4d6273) Karelia Moodlessa (Yhteydenpitoväline, puhe) Omat työkalut: - *Toggl* (Ajanhallintasovellus) - *Visual Studio Code* (Koodaussovellus) - *Ubuntu 18.04* (Windows Subsystem for Linux, yhteys sovelluspalvelimelle) - *WinSCP* (Tiedostonvälitys sovelluspalvelimen ja oman tietokoneen välillä) - *HackMD* (Oma kehitysblogi) ## 4. Työskentely ### 4.1. Ensimmäinen sprinttiä 1 edeltävä viikko (23.3.-29.3.2020) Ensimmäisellä sprinttejä edeltävällä viikolla tutustuin lähinnä kurssimateriaaleihin ja toimeksiantoon. Katsoin läpi aloitusvideon ja kirjauduin Azure DevOpsiin. Viikolla pidettiin myös ensimmäinen **ohjaustapaaminen** ohjaajien kanssa (keskiviikkona **25.3.**). Tapaamisessa keskusteltiin lähinnä siitä mitä työkaluja ja menetelmiä ryhmämme aikoo käyttää, mitä roolituksia on tarjolla, ja miten ryhmämme kykenee toimimaan kun meitä on vain kolme henkilöä. Alustavasti sovittiin, että alan hoitaa Product Ownerin tehtäviä. Ville Jormanainen on Scrum Master ja kaikki kolme (minä, Ville ja Miia Jaakkola ovat kehittäjiä). Aikaa käytin projektiin tällä ensimmäisellä viikolla Toggl-ajanhallintasovelluksen mukaan noin **9 h 15 min**. ### 4.2. Toinen sprinttiä 1 edeltävä viikko (30.3.-5.4.2020) Toisella sprinttiä 1 edeltävällä viikolla tutustuin edelleen kurssimateriaaleihin, joissa oli tutustumisvuorossa **Azure DevOps** -projektinhallintasovellus. Tutkin myös toimeksiantoa, ja tutustuin jonkin verran Kehikon rakenteeseen ja toimintaan. Harjoittelin Azure DevOpsissa tuoteomistajan rooliini kuuluvaa **Product Backlogin** tekoa. Azure DevOps oli minulle uusi tuttavuus, koska aikaisemmin olin käyttänyt opiskelijaprojekteissa ja työharjoittelussa projektin- ja kehityksenhallintaan Jiraa. Azuressa oli omat kommervenkkinsä ja erilaiset käyttäjärajapintaratkaisunsa, joten sovelluksen haltuunottaminen vei jonkin aikaa. Maanantaina **30.3.** pidettiin ensimmäinen **toimeksiantajatapaaminen** Collaboratessa. VP Lahti esitteli siellä toimeksiantoa ja Kehikon rakennetta. Toimeksianto oli jaettu neljään projektiin (Ydin eli Sysadminin hallintasovellukset, pluginienhallinta, nettisivun Joensuues.fi rakentaminen, sekä nettisivun Polku.es rakentaminen). Paljon tekemistä siis olisi, mutta mikäli projekti saataisiin nopeasti käyntiin, olisi ainakin osa näistä saatavissa maaliin saakka. Tutustuin itse lähemmin fronttipuoleen, koska siitä oli minulla eniten kokemusta. Työkaluista asensin koneelleni Linux subsystem for Windowsin (Ubuntu 18.04) ja WinSCP:n. Otin yhteyden VP Lahden palvelimelle, jossa kehitystyö on tarkoitus tehdä, ja **mortarp1-branchini** oli siellä jo valmiina ja SSH-keyllä Github-etärepoon yhdistettynä. Kaikki oli siis valmista kehitystyötä varten. Aikaa käytin projektiin tällä toisella sprinttiä 1 edeltävällä viikolla Toggl-ajanhallintasovelluksen mukaan noin **13 h 30 min**, josta - luentoihin *2 h 30 min* - kokouksiin *1 h* - kehitystyön valmisteluun ja muihin kurssiin liittyviin asioihin noin *10 h*. ### 4.3. Sprintti 1 (6.4.-17.4.2020) #### 4.3.1. Työpanokseni ja sitoutumiseni projektiin Kehitystiimimme piti Sprintin 1 aikana useita projektin hallintaan liittyviä **kokouksia**, joihin lukeutuivat - **[sprintin 1 suunnittelupalaveri](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/14/Sprintin-suunnittelupalaveri-6.4.2020)** (**6.4**.) - ohjaustapaaminen (**8.4.**) - välipalaveri (**10.4.**) - toinen ohjaustapaaminen (**17.4.**) - **[sprintin 1 demo ja retro](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/24/Retro-ja-Demo-17.4.2020-(Sprintti-1))** (**17.4.**) ***[Ensimmäisessä ohjaustapaamisessa](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/16/Ohjaustapaaminen-8.4.2020-(Sprintti-1))*** informoitiin ohjaajia projektin etenemisestä ja otettiin vastaan vinkkejä tulevien viikkojen toiminnasta. ***[Välipalaverissa](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/19/V%C3%A4lipalaveri-10.4.2020-(Sprintti-1))*** jaettiin tarkemmin tehtäviä (lähinnä siis admin-hallintasovelluksien rakentamistöitä) tiimin jäsenille. - *Villelle* annettiin tehtäväksi toteuttaa *WYSIWYG Yaml-editori*. - ***Minulle*** annettiin tehtäväksi ***Nettisivujen UI(layout)editori***. - *Miialle* puolestaan annettiin tehtäväksi *värieditori*, ja mahdollisesti *otsikkoeditori*. #### 4.3.2. Oman työn seuranta ja kehittäminen Aikaa käytin projektiin sprintin 1 aikana Toggl-ajanhallintasovelluksen mukaan noin **32 h** (eli keskimäärin *16 h* per viikko), josta - luentoihin *1 h* - kokouksiin *3 h 15 min* - kehitysblogin kirjoittamiseen *2 h 30 min* - Kehikkoon tutustumiseen ja muihin kurssiin liittyviin asioihin *25 h 15 min*. #### 4.3.3. Reflektio- ja itseohjautuvuusosaaminen Tehtäväni tässä sprintissä oli siis ***UI(layout)editorin*** kehittäminen Kehikko-pohjaisten nettisivujen rakentamista varten. Olin aika pitkälle tietämätön siitä, kuinka tällainen editori luotaisiin, joten jouduin aluksi **opiskelemaan** paljon Kehikon rakennetta ja toimintaa. En päässyt siis vielä editorin käytännön kehitystyöhön tässä sprintissä (ja kuten seuraavasta käy ilmi, en myöhemmissäkään sprinteissä). Sain kuitenkin opiskellessani paljon **ymmärrystä** siitä, kuinka Kehikon kaltainen framework toimii, ja pidin tätä vaihetta muutenkin tärkeänä oman oppimiseni ja tietotaitoni kehittymisen kannalta. #### 4.3.4. Omat työtehtäväni ja niiden hallinta Ensimmäisen sprintin aikana tutustuin siis lisää **Kehikon** rakenteeseen ja toimintaan. Kehikon rakennetta valottavat [Powerpoint-diat](https://docs.google.com/presentation/d/1-Yxw8MTXyEHUX9_j0jYmGOpnQpnyoZZlGN-qK6AAR0M/edit#slide=id.g7f2f44e5a0_0_459) ja [ohjesivusto](https://kehikko.github.io/v1/) olivat vähän sekavat ja eivät kovin havainnolliset, joten koin lopulta parhaimmaksi tutustua Kehikkoon käymällä läpi tiedostorakenteen ja kaikkien tiedostojen sisällöt. Tämä lähestymistapa oli hieman aikaa vievä, mutta pääsin kohtuullisen hyvin jyvälle järjestelmän rakenteesta sekä tietokanta- ja käyttäjärajapintojen toiminnallisuuksista. Ehdin myös asentaa **ExampleControllerin**, joka esimerkinomaisesti havainnollisti tietokannan ja käyttäjärajapintojen yhteyksiä. Ville ehti tehdä jonkin verran WYSIWYG Yaml-editoria, mutta itse ehdin lähinnä vain perehtyä tehtävän vaatimuksiin, ja seuraavaksi aika loppuikin kesken. Miia joutui nimittäin jäämään kurssilta ja projektista pois ajanpuutteen vuoksi, ja ***[toisessa ohjaustapaamisessa](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/23/Ohjaustapaaminen-17.4.2020-(Sprintti-1))*** koko **Mortarpin kehitystyö jouduttiinkin pistämään jäihin**, koska kahdella henkilöllä ei riittävää määrää kehitystyötä olisi projektiin ja kurssiin käytettävän ajan puitteissa pystytty tekemään. Mortarp siis laitettiin varastoon odottamaan parempia aikoja ja keskityttiinkin pohtimaan, mikä olisi sellainen projekti, jonka saisi nopeasti tulille ja jossa ehdittäisiin saada ennen kevään loppua jotain valmista aikaiseksi. VP Lahti ehdotti ohjaustapaamisessa tilalle **Bang!-projektia**, joka keskittyisi ulkoasun ja käyttäjärajapinnan rakentamiseen Kehikko-pohjaiselle Bang!-korttipelin nettisovellusversiolle. Tietokanta ja backend olivat tässä projektissa jo valmiiksi rakennettuja, mutta frontissa tosiaan olisi jonkin verran tehtävää. Bang! olisi kuitenkin, kuten aikaisemmin on mainittu, Kehikko-pohjainen, joten pelin back-end-arkkitehtuuri olisi jo jossain määrin tuttu. Projektiin päätettiin tutustua ja **päätöksiä** asian suhteen tehdä seuraavan sprintin (eli sprintin 2) suunnittelupalaverissa. #### 4.3.5. Oma viestintä Sprintin 1 aikana pidin aktiivisesti **yhteyttä Discordissa** toimeksiantajaan ja muihin ryhmän jäseniin. Vaikka käytännön kehitystyötä en päässytkään vielä tekemään, projektin ja kurssin käytänteissä riitti pureksittavaa. **Informoin Discordissa** myös toimeksiantajaa ja kurssin ohjaavia opettajia pidettävistä kokouksista, kuten Product Ownerin toimenkuvaan kuuluukin. **Kokoukset ja tapaamiset** pidettiin suusanallisesti Moodlen Collaborate-huoneessa, ja näissä osallistuin keskusteluun kohtalaisesti. Kehitettävää ei mielestäni tässä vaiheessa viestinnässä ollut, paitsi kokousaktiivisuudessa oli ehkä vielä parannettavaa. ### 4.4. Sprintti 2 (20.4.-24.4.2020) #### 4.4.1. Työpanokseni ja sitoutumiseni projektiin **[Sprintin 2 suunnittelukokouksessa](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/27/Sprintin-2-suunnittelupalaveri-(20.4.))** (**20.4.**) päätettiin vaihtaa toimeksianto ja aloittaa **Bang!**-projektin kehitystyö. Kehityskohteena olisi nimenomaan sovelluksen **front-end**, ja kehitystyö tehtäisiin React-Javascript-kirjastoa hyödyntäen. Eli jo valmiina oleva Bang-UI (eli Bang!in frontend) viritettäisiin React-komponenteilla, ja ulkoasu tehtäisiin alusta asti uusiksi. ***Tehtävät*** jaettiin suunnittelukokouksessa seuraavasti: - *Villen* on tarkoitus suunnitella tässä sprintissä pelin ulkoasua ja tehdä *ulkoasu-mockup* piirto-ohjelmalla. - **Minun** oli puolestani tarkoitus suunnitella pelin käyttäjärajapinnan toiminnallisuuksia, ja asentaa **Reactin peruskomponentti** lokaaliin käynnistystiedostoon. #### 4.4.2. Oman työn seuranta ja kehittäminen Aikaa käytin projektiin sprintin 2 aikana Toggl-ajanhallintasovelluksen mukaan noin **12 h 45 min**, josta - kokouksiin *2 h 20 min* - kehitysblogin kirjoittamiseen *1 h 30 min* - kehitystyöhön *8 h 55 min*. ***Työskentelykäytänteiden*** muuttamisesta käytiin suunnittelukokouksessa keskustelua, ja niitä päätettiin muuttaa sen verran, että tästä sprintistä lähtien käytössä olisivat Scrum-tyyppisen ketterän kehitysmallin mukaiset ***Daily Scrumit.*** Aikaisemmin ne oli jätetty käytössä olevista käytänteistä pois, koska kehittäjiä on niin vähän, ettei jatkuvan asioista raportoimisen ajateltu tuovan Scrumiin lisäarvoa ja tarjoavan projektiin liittyville ihmisille oleellisesti enempää lisäinformaatiota. Vaikka kehittäjiä on edelleen vain kaksi, todettiin että Daily Scrumien avulla toimeksiantaja ja ohjaajat pysyvät kuitenkin kehitystyöstä ja muistakin asioista paremmin ja kohtuullisen reaaliaikaisesti kartalla. Muuten työskentelykäytänteet todettiin toimiviksi ja säilytettiin ennallaan projektin vaihtumisesta huolimatta. #### 4.4.3. Reflektio- ja itseohjautuvuusosaaminen Tehtäväni oli tässä Sprintissä siis suunnitella **käyttäjärajapinnan toiminnallisuuksia** sekä asentaa **React-pohjainen root-komponentti** pelin Front-endiin. Valitettavasti muiden samaan aikaan käynnissä olevien kurssien takia projektiin ei ollut käytettävissä aikaa niin paljon kuin olisin halunnut, joten omalta osaltani kehitystyö jäi tämän sprintin puitteissa jossain määrin **jälkeen aikataulustaan**. Tämä sprintti oli siis tulosten kannalta pettymys, mutta tarkoitus oli päästä seuraavassa sprintissä taas työskentelyssä vauhtiin. #### 4.4.4. Omat työtehtäväni ja niiden hallinta Ville aloitti mockupin tekemisen pelin **aloitusnäytöstä**, ja jatkoi sitten pöytänäkymän ja kortti-mockupien parissa. Seuraavassa kuvassa sprintin loppuun mennessä valmiiksi saatu mockup pelin aloitusnäytöstä: ![](https://i.imgur.com/McPflMb.jpg) Tätä kuvaa käytin myöhemmin kehitystyöni apuna ja mallikappaleena. Itse työskentelin **toiminnallisuuksien suunnittelun** ja **React-asennuksen** parissa. Keskityin Bang!-back-endin ja front-endin koodin ja Javascript-rakenteiden läpikäymiseen, sekä yleiseen suunnitteluun. En ehtinyt aloittaa käytännön React-asennusta, joten päätin suosiolla jättää sen **seuraavaan sprinttiin.** Sprintin lopuksi (**24.4.**) pidettiin **[Ohjaustapaaminen](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/30/Ohjaustapaaminen-24.4.2020-(Sprintti-2))**, jossa käytiin laaja-alaisesti läpi Bang!-projektia ja sen tämänhetkistä (vielä melko vaatimatonta) edistymistä. Ohjaajat kertoivat, mihin kannattaa kiinnittää huomiota kurssin ja projektin edistymisen suhteen ja miten asioita kannattaa todentaa tästä lähtien. Lisäksi tämän jälkeen pidettiin **[Sprintin 2 Demo ja retro](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/31/Retro-ja-Demo-24.4.2020-(Sprintti-2))**, jossa käytiin läpi Villen tekemiä pelinäkymä-mockuppeja sekä suunniteltiin pelilaudan ja pelikorttien ulkonäköä. Asetimme myös yleisiä suuntaviivoja tulevien sprinttien kehitystyölle. #### 4.4.5. Oma viestintä Viestittelin edelleen **Discordissa** toimeksiantajan ja Villen kanssa, mutta koska en päässyt kehitystyössäni vielä kunnolla alkuun, viestintä jäi vielä vähäiseksi ja käytännössä suuntaviivojen asettelun ja kokousinformoinnin tasolle. **Collaborate**-kokouksissakin otin vain vähän osaa keskusteluun. ### 4.5. Sprintti 3 (27.4.-1.5.2020) #### 4.5.1. Työpanokseni ja sitoutumiseni projektiin Sprintin 3 aikana pidettiin seuraavat kokoukset: - **Sprintin suunnittelupalaveri** (**24.4.**) - **Sprintin demo ja retro** (**5.5.**) - Huom!: Tässä sprintissä ei pidetty ohjaustapaamista koska sekä ohjaajilla että ohjattavilla oli monenlaisia kiireitä. **[Suunnittelupalaverissa](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/32/Sprintin-3-suunnittelupalaveri-(24.4.2020))** ei tehty muita käytännön päätöksiä kuin se, että päätettiin jatkaa edellisen sprintin tehtäviä. Aloitin itse tässä sprintissä viimein **Reactin asentamisen**, ja Ville jatkoi mockupien tekemistä pelilautanäkymästä. Alla **pelilautanäkymästä** tehty mockup, joka valmistui ihan sprintin alussa. Tämän on tarkoitus olla näkymä, jonka kaltaiseen tähdätään lopullisessa tuotteessa. ![](https://i.imgur.com/SaWYryy.jpg) Ja sama näkymä mobiiliversiossa: ![](https://i.imgur.com/UMBs2Ma.png) #### 4.5.2. Oman työn seuranta ja kehittäminen Aikaa käytin projektiin sprintin 3 aikana Toggl-ajanhallintasovelluksen mukaan noin **15 h 30 min**, josta - kokouksiin *1 h* - kehitysblogin kirjoittamiseen *1 h* - kehitystyöhön *13 h 30 min* #### 4.5.3. Reflektio- ja itseohjautuvuusosaaminen Tehtäväni tässä sprintissä oli siis **Reactin asentaminen** front-end-koodiin. Oma kokemukseni Reactin asennuksesta oli vielä tässä vaiheessa rajoittunut kokonaan itsenäisen komponentin asennukseen täysiverisessä React-kehitysympäristössä create-react-app -kirjaston avulla, joten Reactin ja komponenttien asennus jo olemassaolevaan koodiin ja Javascript-ympäristöön oli minulle uudenlainen kokemus. Asennustyö vaati jonkin verran **opettelua**, mutta loppujen lopuksi pääsin toimenpiteistä jyvälle, ja asensin React-root-komponentin (**App**) pelin käynnistystoiminnallisuudet sisältävään app.js-tiedostoon. #### 4.5.4. Omat työtehtäväni ja niiden hallinta Tehtäväni oli tässä sprintissä siis asentaa olemassaolevaan JQuery-pohjaiseen bang-UI:hin **React** ja sen pääkomponentti **App**. Tässä onnistuinkin pienien alkuvaikeuksien jälkeen. Mitään toiminnallisuuksia pääkomponentissa ei vielä ollut ja class-muotoinen App oli vieläpä tungettuna samaan tiedostoon kaikkien launch-funktioiden ja React-renderöinnin kanssa, mutta olin ihan tyytyväinen, että lopultakin sain asennuksen tehtyä. Reactin kaikki asennuskommitit: - [Kommitti 1](https://github.com/bang-gamedev/bang-ui/commit/599f2e9271b5a07ecfc3af6eea9dcd08773ee030) (**26.4.**) - [Kommitti 2](https://github.com/bang-gamedev/bang-ui/commit/a40fb4d7af941b6e0ac143693acdaad9667e34af) (**27.4.**) - [Kommitti 3](https://github.com/bang-gamedev/bang-ui/commit/45c8fd77928436bfc7212302cc324f57322d47ba) (**27.4.**) - [Kommitti 4](https://github.com/bang-gamedev/bang-ui/commit/7ffcbee9825cce88945d4cbcdc4d280de3ab8375) (**28.4.**) - [Kommitti 5](https://github.com/bang-gamedev/bang-ui/commit/9da304da84713397c8aa7772a290fb362ab2025a) (**30.4.**) - [Kommitti 6](https://github.com/bang-gamedev/bang-ui/commit/ef1a620931c0a87c0113745399c597b366fb85f7) (**3.5.**) - [Kommitti 7](https://github.com/bang-gamedev/bang-ui/commit/1e836e751bf40970754d0433ca9899634c3ede92) (**4.5.**) Kuva lopullisesta kommitista, jossa class-muotoinen App-komponentti ja renderöinti app.js-tiedostossa: ![](https://i.imgur.com/L5MnKmI.jpg) Testasin komponenttia lokaalisti ja se toimikin ihan moitteettomasti. Sprintin päätteeksi (**5.5.**) pidettiin pieni **[Retro ja Demo](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/38/Demo-Retro-(Sprintti-3)-ja-Suunnittelupalaveri-(Sprintti-4)-5.5.2020)**, jossa käytiin läpi sprintin käytänteitä (toimivat hyvin, mitään muutoksia ei tehty), sekä kehitystyön tämänhetkistä edistymistä (itse esittelin asentamani App-React-komponentin). #### 4.5.5. Oma viestintä Viestittelin **Discordissa** toimeksiantajan ja Villen kanssa siitä, kuinka React saataisiin ympättyä jo olemassaolevaan frontend-koodiin, ja sainkin paljon hyödyllisiä vinkkejä siitä, kuinka homman saisi toimimaan. Olisin näin jälkikäteen katsottuna voinut olla ehkä aktiivisempi neuvojen kyselemisessä, mutta loppujen lopuksi sain Reactin pelaamaan, ja juuri näiden neuvojen ansiosta. **Collaborate**-kokouksien viestinnästä ei ole sen kummemmin kerrottavaa edellisiin sprintteihin verrattuna. Pidin edelleen huolen siitä, että tulevista kokouksista ja niiden ajankohdista informoitiin kaikkia kokouksiin osallistujia. ### 4.6. Sprintti 4 (4.5.-15.5.2020) #### 4.6.1. Työpanokseni ja sitoutumiseni projektiin Sprintti 4 oli **ajankäytöllisesti** minulle hyvin **haasteellinen**. Monet muut kurssit veivät paljon opiskeluun käyttämääni aikaa, muun muassa *Hajautettujen ja samanaikaisten järjestelmien tentti* (8.5.), ja *Web- ja mobiilikäyttöliittymien projektityön palautus* (15.5.). Lisäksi aikaa kului hyvin paljon myös tämän kehitysblogin kirjoittamiseen, koska olin kirjoitustyössä jonkin verran aikataulusta jäljessä ja yritin saada sitä edes muutaman viikon aika-ikkunassa ajan tasalle. Niinpä ehdin tämän sprintin aikana käyttää ICT-toimeksiantoprojektin kehitystyöhön ainoastaan hieman yli 8 tuntia, huolimatta siitä, että sprintti oli jopa kahden viikon mittainen. Näille kaikille edellisille asioille ei vain voinut mitään, joten tyydyin siihen, että sain aikaan tässä sprintissä vähemmän. Tulevissa sprinteissä olisi aikaa enemmän kehitystyöhön, ja siellä yrittäisin kiriä kiinni sitä, mistä olin sprintissä 4 jäänyt jälkeen. Sprintin 4 aikana pidettiin seuraavat kokoukset: - **Suunnittelupalaveri** (**5.5.**) - **Ohjaustapaaminen** (**8.5.**) - **Toinen ohjaustapaaminen** (**13.5.**) - **Demo ja retro** (**15.5.**) **[Sprintin 4 suunnittelupalaveri](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/38/Demo-Retro-(Sprintti-3)-ja-Suunnittelupalaveri-(Sprintti-4)-5.5.2020)** pidettiin **5.5.** Kokouksessa ei tehty mitään suuria muutoksia työskentelyyn, vaan päätettiin vain jatkaa edellissprinttien viitoittamalla tiellä, sekä käytänteiden että kehitystyön osalta. Omalta osaltani jatkoin **pelin aloitusnäytön ja ulkonäköpuolen** kehittämistä. #### 4.6.2. Oman työn seuranta ja kehittäminen Aikaa käytin projektiin sprintin 4 aikana Toggl-ajanhallintasovelluksen mukaan noin **12 h 30 min**, josta - kokouksiin *1 h 45 min* - kehitysblogin kirjoittamiseen *2 h 30 min* - kehitystyöhön *8 h 15 min* #### 4.6.3. Reflektio- ja itseohjautuvuusosaaminen Tässä sprintissä pääsin viimein kunnolla kehitystyöhön käsiksi, vaikka käytetty aika ja tulokset jäivätkin jälkikatsannossa aika vähäisiksi. Mitään suuria oppimisen läpimurtoja ei työskentelykäytänteiden ja itse kehitystyön osalta päässyt syntymään. #### 4.6.4. Omat työtehtäväni ja niiden hallinta Ihan ensimmäiseksi Sprintin 4 aikana lisäsin peliin **taustakuvan**, jonka on tarkoitus olla sekä aloitusnäytön että varsinaisen pelinäkymän taustalla. Esimerkkikuva alla ("Start game"- näppäin oli jo edellisen version peruja, ja toimii JQuerylla): ![](https://i.imgur.com/KXdlq6X.jpg) Linkki taustakuvan kommittiin (**11.5.**) on [**tässä**](https://github.com/bang-gamedev/bang-ui/commit/6161c81d04f79417235148143f9cb1b397b47af1). Seuraavaksi siirsin **App**("pää"/"root")-**komponentin omaan tiedostoonsa** pois launch-toiminnallisuuksien keskeltä. Koodin siistiminen ja järkeistäminen on aina fiksua, ja tässä tapauksessa tehtiin myös ennaltaehkäisevää siistimistä, koska erilaisia komponentteja tulisi ennen projektin päättymistä vielä paljon lisää. Kaikki komponentit lisättäisiin erillisiin tiedostoihin components-alihakemistoon. Linkki App-komponentin siirto-kommittiin (**15.5.**) on [**tässä**](https://github.com/bang-gamedev/bang-ui/commit/4a95f530f791756eb422b962174438d2d2810006). Lopuksi lisäsin vielä **"Rules"-näppäimen aloitusnäyttöön**. Kyseisen nappulan on tarkoitus avata Popup, jossa on lyhyt yhteenveto pelin säännöistä (niitä pelaajia varten, joille Bang! ei ole vielä kovin tuttu). Linkki "Rules"-näppäimen lisäys-kommittiin (**16.5.**) on **[tässä](https://github.com/bang-gamedev/bang-ui/commit/634ba2e1b401254d54b50937ff04c512bee5a069)**. Sprintin aikana pidettiin kaksi ohjaustapaamista, [**8.5.**](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/41/Ohjaustapaaminen-8.5.2020-(Sprintti-4)) ja [**13.5.**](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/43/Ohjaustapaaminen-13.5.2020-(Sprintti-4)) Tapaamisissa paitsi demottiin ohjaajille sprintin ja kehitystyön edistymistä, myös kysyttiin neuvoa ketterän kehityksen puitteista: - Ohjaajat kehottivat päivittämään säännöllisesti **kehitysblogia** ja pitämään sitä ajan tasalla, missä ainakin minulla riittäisi paljon työtä. - Myöskin **Azure Devopsia** pitäisi käyttää sen verran kuin se on relevanttia kahdella henkilöllä. Pyrin ainakin itse pitämään omat taskini ajan tasalla. - [**Ryhmäarvioinnin**](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/18/Ryhm%C3%A4arviointidokumentti) tilannetta käytiin läpi, keskusteltiin sen tekemisestä ja kysymyksiin vastaamisesta. Linkit olisi hyvä saada arviointiin kunkin kysymyksen kohdalla, jotta ohjaajat pystyvät todentamaan mitä on tehty. - Aikataulutuksestakin keskusteltiin, muun muassa tuotiin esille se että projektin vaihtumisesta ja muista opiskelukiireistä johtuen **kurssi ja projekti venyvät** ryhmällämme kesäkuulle. Sprintin lopuksi pidettiin vielä [**Sprintin 4 demo ja retro**](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/45/Demo-ja-retro-(Sprintti-4)-ja-Suunnittelupalaveri-(Sprintti-5)) (**15.5.**). Demosin henkilökohtaisesti sitä vähää mitä olin saanut aikaiseksi, eli pelin aloitusnäyttöä ja Rules-näppäimen toimintaa. Seuraavassa sprintissä olisi tarkoitus sitten päästä kehitystyössä reilusti eteenpäin. #### 4.6.5. Oma viestintä **Discordissa** käytiin edelleen keskustelua kehitystyöstä toimeksiantajan kanssa. Omat yhteydenottoni jäivät vähäisiksi, jo siitä syystä, etten ehtinyt tehdä paljoakaan kehitystyötä. **Collaboratessa** keskustelinkin jo jonkin verran enemmän, lähinnä projektin yleisestä edistymisestä ja suunnasta. ### 4.7. Sprintti 5 (18.5.-22.5.2020) #### 4.7.1. Työpanokseni ja sitoutumiseni projektiin Sprintin 5 aikana pidettiin seuraavat kokoukset: - **Suunnittelupalaveri** (**15.5.**) - **Demo ja retro** (**26.5.**) - Tässäkään sprintissä ei pidetty ohjaustapaamista. **[Sprintin 5 suunnittelupalaverissa](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/45/Demo-ja-retro-(Sprintti-4)-ja-Suunnittelupalaveri-(Sprintti-5))** (**15.5.**) päätettiin jatkaa edellisten sprinttien suuntaviivojen mukaan. Edistystä ei ollut hirveästi edellisissä sprinteissä tapahtunut, joten samat tehtävät olivat edelleenkin työn alla. #### 4.7.2. Oman työn seuranta ja kehittäminen Aikaa käytin projektiin Sprintin 5 aikana Toggl-ajanhallintasovelluksen mukaan **noin 20 h**, josta - kokouksiin *25 min* - kehitysblogin kirjoittamiseen *noin 5 h* - kehitystyöhön *14 h 30 min* #### 4.7.3. Reflektio- ja itseohjautuvuusosaaminen Tässä sprintissä pääsin viimein kehitystyössä reilusti eteenpäin. Muokkasin ensin **aloitusnäyttöä** ja kehitin pelinäkymänäyttöön **popup-ikkunan** pelin sääntöjä varten. Popup-ikkunan luomista ja kehittämistä jouduin opiskelemaan jonkin verran, ja löysinkin sopivan ja järkevän tavan heittää popup-ikkuna React-komponentiksi muiden komponenttien sekaan. #### 4.7.4. Omat työtehtäväni ja niiden hallinta Omassa kehitystyössäni muutin ensimmäiseksi **aloitusnäytön kokoonpanoa**. Pelin säännöt olisivat varmasti hyödyllisemmät itse pelinäkymänäytössä, joten siirsin "Rules"-näppäimen sinne, ja lisäsin aloitusnäyttöön "Info"-näppäimen, joka on tarkoitus kertoa pelin ja peliversion tiedot, sekä muuta tärkeää informaatiota. Kuva uudesta aloitusnäkymästä alla: ![](https://i.imgur.com/9NIX8fB.jpg) Infonäppäin ei tässä vaiheessa vielä tehnyt mitään, se vain hävitti kaikki muut näppäimet aloitusnäytöstä. Lisäksi loin pelinäkymänäyttöön toiminnallisuuden, joka **Rules-näppäimen** painalluksesta läväytti näkymän päälle **popup-ikkunan**, johon on tarkoitus myöhemmin laittaa pelin säännöt. Kuva syntyneestä popup-ikkunasta alla: ![](https://i.imgur.com/bsjCC2g.jpg) Kyseinen toiminnallisuus ja popup-ikkuna toimivat pienen säätämisen jälkeen juuri niin kuin oli tarkoituskin. Popup-ikkuna on kooditasolla **React-komponentti**, joka toimii App(root)-komponentin alaisuudessa. Infonäppäimen ja popup-ikkunan sisältävä kommitti on [tässä](https://github.com/bang-gamedev/bang-ui/commit/bcc36733d9774df33f7fba64f92d5bfba6f4238f) (**17.5.**). Popup-ikkunan säätämis-kommitti on [tässä](https://github.com/bang-gamedev/bang-ui/commit/552cea4da5fa14a5406a96096ce82d5c0b2733c7) (**18.5.**). Lisää Popup-ikkunan säätämistä [tässä](https://github.com/bang-gamedev/bang-ui/commit/9eddd05a11aa7804c8baf33fd3fce9324e5f084b) ja [tässä](https://github.com/bang-gamedev/bang-ui/commit/4eee4f1e6073700e614b4619507e2aa2451976e7) kommitissa (**20.5.** ja **22.5.**). Seuraavaksi aloitin varsinaisen **pelinäkymän luomisen pelinäkymänäyttöön**. Pelaajapaikat on tarkoitus sijoittaa oikeisiin asemiinsa **CSS-gridin** (CSS-ristikon) avulla, ja gridin avulla säädettäisiin myös muiden elementtien paikkoja. Alla näkyvät gridin määrittämät pelaajapaikat pelinäkymänäytössä. Lisäsin grid-elementteihin **rajakatkoviivat**, jotta elementtien rajat ja koot olisivat helposti nähtävillä kehitystyön aikana. Lopullisessa tuotteessa ei tietenkään olisi nähtävillä näitä katkoviivoja. ![](https://i.imgur.com/j5pZwwF.jpg) Gridin lisäys css:ään on [tässä](https://github.com/bang-gamedev/bang-ui/commit/d2506b2e2700dee10a0c6f6907512ac2f48d2be2) kommitissa (**22.5.**). Gridin säätäminen ja elementtien lisääminen React-komponenttiin ovat [tässä](https://github.com/bang-gamedev/bang-ui/commit/4e1f603c1d10cce5e02c4cf14918858c0c754183) kommitissa (**23.5.**). Selkeyden vuoksi lisäsin vielä pelaajapaikka-elementteihin **tummemmat taustat**, jotta kehitystyö olisi jatkossa vieläkin helpompaa: ![](https://i.imgur.com/GaIL9IL.jpg) Lopuksi kokeilin vielä myös **erillisen mobiilinäkymän** luomista mediakyselyn avulla [tässä](https://github.com/bang-gamedev/bang-ui/commit/1b5995b1956925cef820c4068f2a398eef01b976) kommitissa (**24.5.**). Lopputulos oli varsin sekava, joten päätin säätää tätä lisää tai keksiä jonkun muun tavan toteuttaa erilaisia näkymäratkaisuja erikokoisille näytöille. Sprintin lopuksi pidettiin vielä **[Sprintin 5 demo ja retro](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/60/Demo-Retro-(Sprintti-5)-Suunnittelupalaveri-(Sprintti-6)-26.5.2020)** (**26.5.**), jossa käytiin läpi sprintin aikaista edistymistä. Itse esittelin aloitusnäyttöä ja pelinäkymänäyttöä (eli pelilautaa) sekä pop-up-ikkunan toimintaa. Keskustelimme aika paljon pelinäkymänäytön responsiivisuudesta ja totesimme yhdessä, että ehkä **CSS-gridi ja mediakyselyt** eivät ole paras tapa toteuttaa responsiivista pelilautaa, vaikka sinänsä olivatkin toimiva ratkaisu. Päätettiin käyttää CSS-gridin sijasta pelilaudan asettelussa **Bootstrappia**, joka tarjoaa hyvän mahdollisuuden laudan muokkaukseen ikkunan muutoksissa. Tässä on kieltämättä jonkin verran tekemistä, joten varauduin siihen, että Bootstrap-asemointiin menee aika paljon aikaa seuraavasta sprintistä. #### 4.7.5. Oma viestintä Kävin **Discordissa** ja **Collaboratessa** jonkin verran keskustelua pelinäkymänäytön rakentamisesta erilaisten gridien avulla, ja nämä pohdinnat johtivatkin css-gridin korvaamiseen bootstrap-gridillä. ### 4.8. Sprintti 6 (25.5.-21.6.2020) #### 4.8.1. Työpanokseni ja sitoutumiseni projektiin Sprintin 6 oli tarkoitus alunperin olla ihan normaali viikon mittainen sprintti, mutta siitä päätettiin loppujen lopuksi tehdä **reilun neljän viikon mittainen** sekä samalla **projektin päätössprintti**. Tämä siksi, että käytännössä kurssi ja sen ohjaus olivat jo päättyneet, joten meidän ei ollut enää tarkoitus noudattaa kovin orjallisesti Scrumin aikataulutusta ja käytänteitä, ja loppuprojektista voisi ihan yhtä hyvin tehdä yhden pitkän sprintin kehitystyön ja Scrumin rakenteen yhtään kärsimättä. Sprintin aluksi pidettiin [**Sprintin suunnittelukokous**](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/60/Demo-Retro-(Sprintti-5)-Suunnittelupalaveri-(Sprintti-6)-26.5.2020) (**26.5.**), jossa päätettiin jatkaa työskentelyä aikaisempien päätettyjen suuntaviivojen mukaisesti. Ville jatkoi **korttipakan** ja siihen liittyvien toiminnallisuuksien työstämistä, ja minä kehitin edelleen **pelinäkymää**, johon lisättäisiin Bootstrap kunnollisen responsiivisuuden aikaansaamiseksi. Seuraavana päivänä pidettiin vielä kurssin viimeinen [**Ohjaustapaaminen**](https://dev.azure.com/tiko-toimeksiantoprojekti20/RyhmaC_ICT-Koulutuspolku/_wiki/wikis/RyhmaC_ICT-Koulutuspolku.wiki/63/Ohjaustapaaminen-(Sprintti-6)-27.5.2020) (**27.5.**). Tapaamisessa esiteltiin ohjaajille projektin ja **kehitystyön tämänhetkinen tilanne**. Ville esitteli korttipakan ulkoasua ja toimintaa ja minä esittelin pelilautanäkymää. Lisäksi käytiin läpi kehitystyön todentamisen vuoksi tärkeitä työskentelyn osa-alueita: Azure Devopsissa sijaitsevat ***projektinhallinta*** ja ***kokousten pöytäkirjat***, omat ***kehitysblogit***, ***itse- ja vertaisarviointi*** sekä ***ryhmäarviointidokumentti***. Lisäksi kehitystyön ***hajautettu luonne*** tulisi todentaa integroimalla kehittäjien työskentely ja kehitystyökohde samaan branchiin ja samaan lopputuotteeseen. Sovittiin yhdessä seuraavanlaisesta **aikataulusta** projektin loppuunsaattamiseksi: ***Kehitystyö*** pyrittiin saamaan valmiiksi kesäkuun loppuun mennessä, ja ***ryhmäarvioinnit sekä kehitysblogit*** elokuun alkuun mennessä. #### 4.8.2. Oman työn seuranta ja kehittäminen Aikaa käytin projektiin sprintin 6 (eli projektin viimeisen neliviikkoisen sprintin) aikana Toggl-ajanhallintasovelluksen mukaan **noin 33 h**, josta - kokouksiin *45 min* - kehitysblogin kirjoittamiseen *noin 4 h* - kehitystyöhön *28 h 15 min*. *Laskennan perusmallien tenttiin* (16.6.) lukeminen vei jälleen aikaa ICT-toimeksiantoprojektin kehitystyöltä, joten potentiaalisesta työskentelyajasta hävisi suunnilleen viikon verran tässä sprintissä. Muuten katsoin pärjänneeni oman työaikani kohdentamisessa ja seurannassa kohtalaisen hyvin. #### 4.8.3. Reflektio- ja itseohjautuvuusosaaminen Jatkoin sprinttityöskentelyä ja kehitystyötä kuten aikaisemmissakin sprinteissä. Pääasiallisesti työskentelin **Bootstrap-gridin** parissa, mutta jatkoin myös **aloitusnäytön** muokkauksia. Bootstrap-gridin rakentamisesta minulla oli aikaisempaakin kokemusta, mutta gridin säätäminen on aina omanlaisensa taiteenlaji, joten aikaa meni siihen rutkasti. Katson kuitenkin jonkin verran oppineeni lisää Bootstrap-ristikon käsittelyä tässä sprintissä. #### 4.8.4. Omat työtehtäväni ja niiden hallinta Aloitin Sprintin 6 sprinttityöskentelyn lisäämällä pelin aloitusnäyttöön **Bang!-logon** ja muuttamalla aloitusnäytön tekstit logon kanssa yhteneväisemmäksi. Alla kuva aloitusnäytöstä, jossa Bang-logo ja muokatut tekstit: ![](https://i.imgur.com/IIRefQn.jpg) Aloitusnäytön tekstit eivät näytä silmiin kovin hyviltä, mutta ne saavat toimia tässä vaiheessa lähinnä placeholdereina tulevia, parempia tekstejä varten. Seuraavaksi **blurrasin** pelilautanäkymän päälle tulevan **popup-ikkunan taustan**, jotta takana olevat tekstit ja muut rakenteet häiritsisivät vähemmän popup-ikkunan sisältöä. Seuraavassa kuva blurrauksen tasosta popup-ikkunassa tässä vaiheessa projektia: ![](https://i.imgur.com/uX1LInN.jpg) Kaikki edellä olevat muokkaukset sisältävä kommitti on [**tässä**](https://github.com/bang-gamedev/bang-ui/commit/2d0cc84d0e76cef5ee2f12843381aa3186c2ccfa) (**27.5.**). Muokkauksia säädettiin lisäksi hieman [**tässä**](https://github.com/bang-gamedev/bang-ui/commit/e39e76d3d09251665b0f5eda61d55620756ecc60) kommitissa (**28.5.**) Seuraavaksi siirryin muuttamaan pelilautaa/näkymää **css-grid-rakenteisesta Bootstrap-grid-rakenteiseksi**. Kommentoin pois css-tyylitiedostosta css-gridin ja aloin rakentamaan Bootstrap-gridiä ***suoraan React-pääkomponenttiin***. Gridi-rivien ja sarakkeiden lisäksi asensin komponenttiin pelaaja- ja pakka-divit, joihin on myöhemmin tarkoitus asentaa pelilaudalla näkyvät pelaaja- ja pakkakomponentit. Alla kuva pelilaudasta, jossa näkyy muodostamani hyvin yksinkertainen **Bootstrap-gridi** ja siihen sijoitetut **pelaaja- ja pakkaelementit**/divit. Kannattaa huomata, että muodot ja värit ovat elementeissä vielä placeholdereita, eli eivät todellakaan lopullisia. ![](https://i.imgur.com/e3vcKi7.jpg) Bootstrap-gridin asennuskommitit ovat lueteltuina tässä: - [Kommitti 1](https://github.com/bang-gamedev/bang-ui/commit/b899792d01d511b7bcb64a7805022bfda40b15e6) (**31.5.**) - [Kommitti 2](https://github.com/bang-gamedev/bang-ui/commit/f7b3d9fe01aef637c812366070668ce6f8150946) (**1.6.**) - [Kommitti 3](https://github.com/bang-gamedev/bang-ui/commit/b82c2ba18a37cd93bc2d940eb1978fda95082d52) (**7.6.**) Tämän asennuksen jälkeen eli kesäkuun puolenvälin paikkeilla (**8.6.-16.6.**) jouduin käyttämään paljon aikaa *Laskennan perusmallien tenttiin* lukemiseen, joten toimeksiantoprojektin kehitystyö jäi valitettavasti vähemmälle. Juhannusviikolla pääsin sitten viimein jatkamaan ICT-projektin kehitystyötä. Aloitin tässä vaiheessa lopulta työskentelyn, jonka tarkoituksena oli **integroida** minun ja Villen kehitystyöt samaan branchiin ja samaan ohjelmaan. Yritin aloittaa **Join-funktion** luomisen, joka suorittaisi tämän integraation hieman tähän tapaan (pseudokoodia, jonka Ville minulle tarjosi): ``` Liity() { API(join/board1); var info = API(player/info); var container = document.getElementById('board'); RenderBoard(info, container); } RenderBoard(info,div) { ReactDOM.render(<Stack cards=info.playerCards>, div); ... } ``` Jonkinlaista Join-funktion tynkää sainkin lisättyä BoardJoin.js -javascript-tiedostoon, vaikka funktion rakentamisen luonne jäikin minulle hieman hämärän peittoon: - [Kommitti 1](https://github.com/bang-gamedev/bang-ui/commit/a57bd0d23b48a48b736b4aa1b989b23f337d8e8e) (**21.6.**) - [Kommitti 2](https://github.com/bang-gamedev/bang-ui/commit/44598713dcc1ddd27434bca02d47635b36aeb657) (**21.6.**) Tässä vaiheessa vielä **mergetin** Villen tekemät kommitit ja Villen kehitysbranchin omaan branchiini, jotta voisin tehdä kehitystyömme integrointia lokaalisti omassa branchissani. Kyseinen **pull request ja mergetys** ovat näkyvissä [**tässä**](https://github.com/bang-gamedev/bang-ui/pull/1) linkissä (**22.6.**). #### 4.8.5. Oma viestintä Viestintä **Discordissa** oli varsinkin sprintin edetessä jo vähäistä, ja päätin keskittyä ihan kokonaan omaan tekemiseeni ja kehitystyöhöni. Villelläkin oli tässä vaiheessa jo omat kesäkurssinsa. Ryhmäarvioinnin tekemisen jätimme myöhemmäksi, joten siitäkään ei tämän sprintin aikana keskusteltu. Sprintin aikana ei enää sen alkamisen jälkeen (**27.5. lähtien**) pidetty enää kokouksia, joten **Collaboratessakaan** ei loppua kohden ollut enää mitään keskustelua. Olisin ehkä näin jälkeenpäin voinut pitää yhteyttä ja keskustella projektiin liittyvistä asioista, mutta kun kukaan muukaan projektin parissa työskentelevistä ei käynnistänyt keskusteluja yhteydenottokanavissa eikä varsinkaan ottanut minuun enää yhteyttä, yhteydenpito kuihtui pikku hiljaa kokonaan. ### 4.9. Sprintin 6 jälkeinen toiminta (22.6.-13.8.) #### 4.9.1. Työpanokseni ja sitoutumiseni projektiin Vaikka projektin ketterä kehitys Scrumin puitteissa olikin jo käytännössä päättynyt viimeisen sprintin (Sprintti 6) myötä, jatkoin edelleen kehitystyötä. Jonkinlaisia tuloksia olin saanut aikaan omassa työssäni, mutta Villen ja minun kehitystyöt olivat vielä, kuten jo edellä mainitsin, yhdistämättä yhteiseen tuotteeseen ja päätin tehdä tämän **integroinnin** loppuun, vaikka se menisikin pitkälle heinäkuun puolelle. #### 4.9.2. Oman työn seuranta ja kehittäminen Aikaa käytin projektiin viimeisen sprintin päättymisen jälkeen Toggl-ajanhallintasovelluksen mukaan **29 h**, josta - kehitysblogin kirjoittamiseen *11 h 30 min* - kehitystyöhön *17 h 30 min*. #### 4.9.3. Reflektio- ja itseohjautuvuusosaaminen Jatkoin kehitystyötä tänä sprinttien jälkeisenä aikana, aina kun ehdin. Kehitys onnistui ja eteni enemmän tai vähemmän sekalaisesti, osaamiseni mukaan. #### 4.9.4. Omat työtehtäväni ja niiden hallinta Lopetin Join-funktion kehittämisen, koska en päässyt sen rakentamisessa eteenpäin (lähinnä minulle jäi hämäräksi, miten tämän härvelin olisi tarkoitus toimia), ja päätin liittää Villen luoman **kortin suoraan omaan pelilautanäkymääni**. Mitään käyttöliittymätoiminnallisuutta tällaisessa ratkaisussa ei tietenkään olisi, mutta ainakin saisin jonkinlaisen integraation ja kehitystyömme yhdistelmän tehtyä. Sijoitin heti aluksi kaksi Villen luomaa **kortti(Card) -komponenttia** suoraan omaan **App-komponenttiini**. Tulos ei ollut kovin silmää miellyttävä, mutta ainakin yhdistelmä pelasi, ja siitä sain jonkinlaisen pohjan, josta jatkaa integraatiota: ![](https://i.imgur.com/D3N6zpU.jpg) Kuvan esittämän integraation kommitti on [**tässä**](https://github.com/bang-gamedev/bang-ui/commit/53063f19e8d11c5c80b42c852b098625dfd17a0c) (**13.7.**). Kuten kuvasta näkyy, ensimmäinen silmiinpistävä ongelma olivat **korttien tekstit**, jotka pursusivat enemmän tai vähemmän korttien kehyksien ulkopuolelle. Modifioin tekstejä niin, että ne pysyivät jotenkuten kortin asettamien rajojen sisäpuolella, ja samalla säädin pelaajakenttien kokoja: ![](https://i.imgur.com/Jgz4Pdu.jpg) Kuvan esittämän muokkauksen kommitti on [**tässä**](https://github.com/bang-gamedev/bang-ui/commit/bee1561646b618c89c6f5c975dfd5cb39445f53c) (**28.7.**). Jatkoin seuraavaksi kehitystöidemme integraatiota. Siirsin yksittäisen kortin pois ihmispelaajakentästä (*player_me*, iso pelaajakenttä pelinäkymänäytön alalaidassa) toisen pelaajan kenttään, ja päätin yrittää **korttipakan** siirtoa ihmispelaajakenttään. Ville oli työskennellyt korttipakan (**deck/cardstack**) parissa, ja vaikka ei saanut sitä täysin valmiiksi ja toimivaksi, se sopisi hyvin tämän integraation todennukseen. ![](https://i.imgur.com/IxZs5bX.jpg) Kuten kuvasta näkyy, korttipakan integrointi ei oikein onnistunut. Kahden pakassa olevan kortin tekstit näkyvät kuvassa maalattuina, mutta mitään muuta korteista ei näkynytkään pelinäkymänäytössä. Asiaa oli tutkittava. Kuvan esittämän muokkauksen kommitti on [**tässä**](https://github.com/bang-gamedev/bang-ui/commit/357b88d35eeb6db021fd17b5534e9f285cc73cad) (**9.8.**). #### 4.9.5. Oma viestintä Tässä vaiheessa ei kehitystyön aikana ollut enää käytännössä minkäänlaista viestintää Villelle, toimeksiantajalle tai ohjaajille. Toimin täysin **itsenäisesti**. ### 5. Ajankäytön yhteenveto Toggl-ajanhallintasovelluksen mukaan käytin kurssin suorittamiseen ja projektin kehitystyöhön yhteensä **noin 177 h 30 min**, josta - kurssiin tutustumiseen ja luentoihin *12 h 45 min* - kokouksiin *10 h 30 min* - kehitysblogin kirjoittamiseen *28 h* - kehitystyöhön *126 h 15 min* ### 6. Itse- ja vertaisarviointi Projektin jäsenten itse- ja vertaisarvioinnin tein kurssin ohjeiden mukaisesti. **Kannattaa ottaa huomioon**, että projektiryhmässämme ei ollut loppujen lopuksi kuin kaksi jäsentä, ja että projektimmekin vaihtui lennosta kurssin puolivälin tienoilla. Jouduinkin siis ottamaan nämä työpanokseen ja projektityön onnistumiseen liittyvät tekijät huomioon arviointeja tehdessäni. **Markku Vaara** ***(Projektiryhmän jäsen / Tuoteomistaja)*** *Yleinen panos projektityöhön* (asteikolla 0-5) - **3** - Toimin projektissa kahdessa roolissa, **tuoteomistajana** ja **kehittäjänä**. Kehittäjänä toimin ajassa ja työmäärässä mitattuna paljon enemmän kuin tuoteomistajana, koska keskustelut toimeksiantajan kanssa käytiin projektin aikana suoraan ryhmän jäsenten toimesta, ei tuoteomistajan kautta. Tuoteomistajan rooli oli siis tässä projektissa vähäisempi kuin se normaalisti Scrum-projektissa olisi ollut. - Panostin projektiin kehittäjänä ja tuoteomistajana aikaa yhteensä **177 h 30 min** (roolipanostuksia ei eritelty). Olisin kieltämättä voinut tehdä enemmänkin projektin eteen, mutta aika ei vain riittänyt. *Roolin sopivuus* - ***Tuotekehittäjä: Sopiva***. Koin kehittäjän roolin kaikkein parhaiten omaksi tässä projektissa. - ***Tuoteomistaja: Sopiva***, vaikka roolilla ei ollutkaan kovin paljon merkitystä Scrumin toiminnassa. Keskustelut toimeksiantajan kanssa käytiin suoraan ryhmän jäsenten toimesta. Tuoteomistajan roolissa sovin ainoastaan projektiryhmän yhteisistä kokouksista toimeksiantajan edustajan kanssa. *Onnistuminen roolin mukaisissa työtehtävissä* - ***Tuotekehittäjä: Kohtalainen***. En valitettavasti ehtinyt osallistua kehitystyöhön niin paljon kuin olisin halunnut, koska varsinkin asioiden opiskeluun ja muihin kursseihin kului kohtuuttoman paljon aikaa. Koin kuitenkin onnistuneeni niissä asioissa, jotka ehdin tehdä. - ***Tuoteomistaja: Hyvä***, vaikka roolilla ei ollutkaan kovin paljon merkitystä Scrumin toiminnassa. Keskustelut toimeksiantajan kanssa käytiin suoraan ryhmän jäsenten toimesta. Pidin kuitenkin yhteyttä toimeksiantajaan roolin mukaisesti ja informoin häntä tulevista kokouksista. Lisäksi kirjoitin puhtaaksi kaikkien kokouksien pöytäkirjat, ja huolehdin, että ne olivat kaikkien saatavilla Azure Devopsissa. *Oma näkemyksesi: jäsenen keskeisimmät vahvuudet ja kehittämiskohteet projektityössä* - Näkisin, että **järjestelmällisyys** kehitystyössä ja yleensä projektityöskentelyssä olivat **vahvuuksiani**. - **Tietotaito** ohjelmoinnissa ja yleensä kehitystyössä oli ja on edelleen **kehittämiskohde** projektityöskentelyssäni. Omissa ohjelmointitaidoissani ja kehitystyöosaamisessani olisi vielä kohennettavaa. *Omien työtehtävien hallinta* (asteikolla 0-5) - **3** - ***Tuotekehittäjä: Kohtalainen***. Kehitystyöhön liittyvät työtehtäväni suoritin kykyjeni mukaan. Joitain tehtäviä hallitsin paremmin kuin toisia, ja mitä en osannut, jouduin projektin aikana opettelemaan. Ajankäyttöäni tuotekehityksen osalta hallitsin myös kohtalaisesti, vaikka aikaa olisi pitänyt näin jälkikatsannossa varata kehitystyöhön enemmän kuin sitä lopulta käytin. - ***Tuoteomistaja: Kohtalainen***. Tuoteomistajan rooliin liittyvät vähäiset työtehtäväni suoritin parhaani mukaan. Näitä tehtäviä ei ollut tosiaan montaa, joten aikaakaan ei niihin tarvinnut paljoa käyttää. *Työpanos ja sitoutuminen projektiin* (asteikolla 0-5) - **2** - Näin retrospektiivissä työpanokseni ja sitoutumiseni kehitystyöhön ja projektiin olisi voinut olla suurempi. Minulla oli loppukeväästä paljon muutakin tekemistä ja muitakin kursseja, ja ICT-toimeksiantoprojektin kehitystyö jäi valitettavasti joissain määrin paitsioon, varsinkin toukokuun ja kesäkuun alkupuoliskoilla. *Viestintä* (asteikolla 0-5) - **4** - Oman kehitystyöni määrä projektissa oli rajallinen, josta johtuen itse viestintääkin minun ja muun projektiryhmän välillä oli loppujen lopuksi vähän. Koin kuitenkin viestineeni toimeksiantajalle ja muille ryhmän jäsenille aina kun pääsin eteenpäin kehitystyössäni, kun tarvitsin apua kehitystyössä, tai kun tuoteomistajan roolini vaati yhteydenpitoa. - Olin myös muiden projektiryhmän jäsenten, toimeksiantajan ja ohjaajien tavoitettavissa Discordissa ja sähköpostilla aina tarvittaessa. **Ville Jormanainen** ***(Projektiryhmän jäsen / Scrum Master)*** *Yleinen panos projektityöhön* (esim. asteikolla 0-5 + perustelu) - 4 - Ville toimi projektissa sekä kehittäjänä että Scrum Masterina. Hän panosti kehitystyöhön kohtuullisen paljon projektin aikana. Hänellä oli toki omat kiireensä, mutta hän sai aika paljon aikaiseksi kehitystyössä ja Scrum Masterin roolissa. *Roolin sopivuus* - ***Tuotekehittäjä:*** Ville oli mielestäni sopiva toimimaan kehitystyössä. Hänellä oli taitoa ja kokemusta ohjelmoinnista ja se näkyi hänen toiminnassaan. - ***Scrum Master:*** Ville toimi hyvin Scrum Masterin vaatimissa tehtävissä ja hän toimi myös säännöllisesti ja asianmukaisesti kokouksien puheenjohtajana. *Onnistuminen roolin mukaisissa työtehtävissä* - ***Tuotekehittäjä:*** Ville onnistui hyvin tehtävissään tuotekehittäjänä. Hän sai tehtyä projektin aikana toimivat React-tyyppiset kortti- ja korttipakka-komponentit. - ***Scrum Master:*** Ville onnistui kohtuullisen hyvin tehtävissään Scrum Masterina, jos kohta hän ei aina ehtinyt pitämään huolta projektin etenemisestä, mikä tosin menee hänen muiden kiireidensä piikkiin. Hän toimi myös kokouksien puheenjohtajana. *Oma näkemyksesi: jäsenen keskeisimmät vahvuudet ja kehittämiskohteet projektityössä* - **Vahvuudet:** Ohjelmointi- ja kehitystyökokemus. - **Kehittämiskohteet:** Projektinhallinta Scrum Masterin roolissa. *Omien työtehtävien hallinta* (asteikolla 0-5) - 4 - Ville hallitsi omat työtehtävänsä sekä **tuotekehittäjänä** että **Scrum Masterina** hyvin. *Työpanos ja sitoutuminen projektiin* (asteikolla 0-5) - 4 - Ville sitoutui hyvin projektiin **tuotekehittäjänä** sekä kohtuullisen hyvin **Scrum Masterina**. Kehitystyötä hän sai tehtyä tasaisen tappavaan tahtiin, mutta Scrum Masterina toimimisessa (etenkin viestinnässä) oli vielä vähän kehitettävää. *Viestintä* (asteikolla 0-5) - 3 - Ville piti hyvin yhteyttä muihin kehittäjiin ja toimeksiantajaan. Hän oli myös kohtuullisen hyvin kaikkien asianomaisten tavoitettavissa. **Scrum Masterin** roolissa hän olisi voinut toimia vielä vähän aktiivisemmin viestintäpuolella. **Miia Jaakkola** ***(Projektiryhmän jäsen)*** *Yleinen panos projektityöhön* (asteikolla 0-5) - 0 - Miia Jaakkola joutui **keskeyttämään** kurssin suorituksen ja projektityöskentelyn huhtikuun loppupuolella muiden kiireidensä takia.