Kehittäjän blogi-pohja

# Kehittäjän blogi-pohja ## Web-ohjelmointi, syksy 2020 ### Tekijä: 1804189 Mika Marjomaa  ## Viikko 0 (1.9.- 6.9.2020) ### Mitä opin tällä viikolla Käytännössä en mitään, sillä kehitysympäristö ja muut työkalut olivat jo asennettuna itselläni, joten kurssin ensimmäinen viikko oli ohi ennen kuin huomasinkaan. ### Mitä harjoituksia tein Ainut "harjoitus" jonka tein oli Slackkiin liittyminen. HTML, CSS ja JS ovat aika hyvin itselläni hallussa, joten en usko että kurssin aikana syntyy huomattavia ongelmia tehtäviä tehdessäni tulevilla viikoilla. Todennäköisesti saan paikkailtua pieniä reikiä tieoissani sekä taidoissani web-ohjelmointiin liittyen, toisaalta perusasiat web-ohjelmoinnista itselläni on vankalla pohjalla, joita oletan tämän kurssin käyvän läpi. #### Harjoitus 1 Harjoitus 1:ssä opettelin... Ongelmaksi muodostui... #### Harjoitus 2 Harjoitus 2:ssa opettelin... *** ## Viikko 1 (7.9. - 13.9.2020) ### Mitä opin tällä viikolla Suoranaisesti mitään uutta tietoa en oppinut tällä viikolla, sillä näitä asioita on tullut sorvattua viimeiset kolme vuotta, joten taitoa löytyy. Tällä kurssilla keskityn enemmän koodin ulkoasuun, eli selkeään koodiin, jota ei tarvitse alkaa miettimään, mitä siinä haetaan. Tämä johtuu pitkälti siitä, että todennäköisesti asiat tällä kurssilla ovat itselläni jo hallussa, toisaalta aina on enemmän opittavaa, joten olen avoiminmielin tehtäviä tehdessäni, sillä niistä voi saada useasti irti pieniä asioita, jotka voivat johtaa syvempään pohdiskeluun, joka taas voi johtaa suurempiin oivalluksiin muissa asioissa. ### Mitä harjoituksia tein Tämän viikon tehtävät olivat vaikeustasoltaan helppoja itselleni ja niiden tekemisessä ei ilmennyt ongelmia, sillä aiheet joita tehtävät käsittelivät olivat entuudestaan itselleni tuttuja, joten taitoa löytyi tehtävien tekemisessä. #### Harjoitus 1 Tehtävä oli alusta loppuun suoraviivainen ja ongelmia sen tekemisessä ei ilmennyt. Niukan testauksen jälkeen funktio näyttäisi toimiva. #### Harjoitus 2 Aikalailla sama linja kuin ensimmäisen tehtävän kanssa, elikkä ei ilmennyt ongelmia tehtävää, tehdessä. #### Harjoitus 3 Tämänkään tehtävän kanssa ei ilmennyt ongelmia. ## Viikko 2 (13.9. - 20.9.2020) ### Mitä opin tällä viikolla Tällä viikolla kaikki asiat olivat itselleni tuttuja paitsi CREATE PROCEDURE, joka oli uusi asia. Tämä oli oikeastaan asia tällä viikolla, jota tuli harjoiteltua ja "opittua". ### Mitä harjoituksia tein #### Harjoitus 4 Tehtävää tehdessä ei ilmennyt ongelmia ja sain sen palautettua. ## Viikko 3 (20.9. - 27.9.2020) ### Mitä opin tällä viikolla Viikon tehtävä oli aikalailla tuttua asiaa entuudestaan, joten tehtävän teossa ei ilmmennyt ongelmia tai asiaa, jota en tiennyt aikaisemmin. ### Mitä harjoituksia tein #### Harjoitus 5 Näpyttelin viidennen tehtävän aikalailla yhdeltä istumalta nopealla temmolla. Tehtävän kanssa ei tarvinnut "painia", joten homma oli nopeasti tehtynä. Ainut asia tehtävästä oli tehtävän kesto, joka oli hyvin lyhyt. Joten päälimmäinen ajatus tällä hetkellä onkin ymmärsinkö tehtävänannon. ## Viikko 5 (12.10- 18.10.2020) ### Mitä opin tällä viikolla Mitään uutta ei sinänsä tullut opittua, sillä asioita tuli lähinnä kertailtua ja toteutuksissa pystyin hyvin käyttäämään tietoa aikaisemmista tehdyistäni asioista. ### Mitä harjoituksien tein #### Harjoitus 6 Tehtävä oli hyvin suoraviivainen, sillä missään vaiheessa en kohdannut varsinaisia ongelmia, jotka olisivat estäneet tehtävän tekoa. Ainoat "ongelmat", mitä ilmeni tehtävää tehdessä olivat dokumentaation selauksen jälkeen hoidettu. Tämä tehtävä oli tämän kurssin omalta osaltani odotetuin tehtävä ja sen takia tähän tehtävään tuli käytettyä useita tunteja. REST- rajapinta on kaukana täydellisestä, mutta se ainakin näyttäisi toimivan. Virheiden hallinta sekä muutamia pieniä seikkoja olisi voinut hio paremmiksi, kuten SQL lausekkeet, toimintojen lopputuloksen viestien hallinta, id:eiden nimieminen sekä palvelin puolella kuin käyttöliittymässä sekä SQL injektioiden tarkastaminen ja mahdollisesti niiden poistaminen järjestelmästä. Nämä huomiot ovat jälkikehitysideoita tässä vaiheessa ja tuotos, jonka sain tehtyä on enemmänkin prototyyppi järjestelmästä, jota analysoimalla saataisiin tietoa, mikä toimii ja mikä ei. Tämän jälkeen osioita järjestelmästä voisi korjailla tai kehittää eteenpäin. Jos aikaa olisi rajaton määrä käytettävissäni, niin lopputulos palvelin puolella olisi mahdollisesti ollut parempi. Viime kesällä tuli käytettyä node moduulia nimeltä: jsonserver, jonka myötä koitin tehdä oman version kyseisestä palikasta ja lopputulos olikin seuraavanlainen: https://github.com/maici95/kanban/blob/master/server/index.js. SQL- osio tehtävästä meni kohtalaisen hyvin, toki paremmankin siitä olisi voinut tehdä. Tähän tarkoitukseen "riittävän" hyvä. Kaiken kaikkiaan ongelmia palvelin puolen asioita tehdessä ei ilmennyt, jonka myötä kehitystyö oli hyvinkin sulavaa. - Simppeli sql toteutetunna: https://github.com/maici95/WebOhj/blob/master/t6/server/sql.sql - Palvelin puolen koodi: https://github.com/maici95/WebOhj/blob/master/t6/server/index.js Tehtävässä kohdat 2 ja 3 olivatkin sitten tämän kurssin "kohokohdat" itselleni, joita odotin innolla. Viimeinen vuosi on Reactilla tullut tehtyä useita sovelluksia, joten ongelmia tämänkään kanssa ei ilmennyt. Ainoat "ongelmat" olivat pikaisen dokumentaation vilkaisun jälkeen ratkottu, nämä siis lähinnä olivat react bootstrapin komponenttejen selailu. Tehtävän kaikki osiot toteutin yhtäaikaisesti, jonka myötä jossain paikoissa koodia näkyykin ettei sitä ole kovinkaan paljoa mietitty ennen kirjoittamista. Tosin olen tyytyväinen lopputulokseen etenkin, jos sitä vertaa ensimmäisiin React kokeiluihini. Tehtävä alkoi npx react-create-appin asentamisella sekä tarvittavien moduulien asentamisella palvelin puolelle: **express, cors, bodyparser ja mysql**. Tämän jälkeen toteutin urheilijoiden hakemisen palvelimelta, jonka myötä alkoikin käyttöliittymän teko. Alustettujen tiedostojen poiston jälkeen tein index.js https://github.com/maici95/WebOhj/blob/master/t6/client/src/index.js, jonka jälkeen olikin aika tehdä App komponentti https://github.com/maici95/WebOhj/blob/master/t6/client/src/components/App/index.js. App: https://github.com/maici95/WebOhj/blob/master/t6/client/src/components/App/index.js Seuraavaksi toteutin Taulu- komponentin, josta oli tarkoitus tehdä kompontentti, jota voitaisiin käyttää useiden erilaisten tietojen näyttämisessä. https://github.com/maici95/WebOhj/blob/master/t6/client/src/components/DataTable/index.js. Toteutustavasta en ollut aivan varma tässä vaiheessa, joten toteutus oli enemmänkin, mikä tuntui toimivan, kuin suunnittelun kautta. Nopean naputtelun jälkeen sain tehtyä komponentin valmiiksi, jonka myötä sain urheilijoiden tiedot näkyviin tauluun. DataRow komponentissa ei mitään mielenkiintoista olekkaan: https://github.com/maici95/WebOhj/blob/master/t6/client/src/components/DataTable/DataRow/index.js. Tosin yksi asia siitä löytyy, joka on taulukon sarakkeiden järjestäminen sarakkeen otsikoita painamalla, johon tarvittiin onClick event. Tämän jälkeen siirryin palvelinkutsujen toteuttamiseen. Aluksi loin GET metodin, joilla saadaan palvelimelta ulos tietoa. Ensimmäisessä versiossa haettavat tiedot olivat urheilijoita ja yksittäisen urheilijan tietoja ei vielä tässä vaiheesa voinut hakea. Myöhemmässä vaiheessa, kun saavutuksien teko oli ajankohtainen täytyi koodia muokata, jolloin samoja metodeja käyttämällä saataisiin haettua tietoa joustavasti https://github.com/maici95/WebOhj/blob/master/t6/client/src/logic/ajaxCall.js. GET, DELETE, POST ja PUT toiminnot tuli toteutettua myöhemmässä vaiheessa, kun niitä tarvittiin. Tiedon näyttämisen jälkeen oli aika tehdä lomake tiedon lisäämiselle, jonka toteutus vaiheessa ajatus oli tehdä lomake lisäykselle sekä muokkaamiselle. Eli lisääminen ja muokkaaminen tehtäisiin samalla lomakkeella https://github.com/maici95/WebOhj/blob/master/t6/client/src/components/Form/index.js. Lomakkeen onSubmit metodi on hieman tynkeä, mutta kun se toimii, niin sitä ei välttämättä tarvitse korjata, tosin jos tästä olisi tulossa "oikea" sovellus, niin lomakkeen "parseminen" pitäisi tehdä paremmin. Muuten toteutus on hyvin simppeli: komponentti ottaa vastaan kenttien tiedot, joiden myötä generoidaan lomake. "close" napin kohdalla näkyy hieman tekemisen jälkeä, sillä tässä kohtaan olisi mahdollisesti voitu käyttää props.close parametria (mikäli close funktio on olemassa, niin close nappula on painettavissa, muussa tapauksessa sitä ei ole lomakkeessa). Loppua kohden olikin aika alkaa miettimään saavutuksien tekoa, sillä tehtävänannossa ainakin omasta mielestäni saavutuksien osuus sovelluksessa on hieman hämärä. Onko kyseessä siis array tapainen säilytys saavituksille vai tekstimuotoinen. Päädyin tekemään erillisen taulun tietokantaan, jossa urheilijoiden saavutukset ovat tallennettu. Täältä ne sitten haetaan urheilijan profiiliin. Saavutukset ovat hyvin karkeasti toteutettu, joista löytyy vain saavutuksen nimi ja päivämäärä https://github.com/maici95/WebOhj/blob/master/t6/client/src/components/Profile/index.js. Saavutuksien näyttämiseen käytin samaa taulua, jonka toteutin urheilijoille. Tässä vaiheessa vielä urheilija ei ole voinut saada profiilikuvaa, joten naputtelin profiiliin mahdollisuuden lisätä kuvan urheilijalle. Lopuksi lisäsin vielä urheilijan saavutuksen lisäämisen, joissa käytin Accordion komponenttia, näin ollen lomakkeet sai näppärästi piiloon. Nämä muistelmat kirjoitin sovelluksen teon jälkeen, joten joitain asioita, mitä todennäköisemmin unohdin kertoa toteutustavoistani. ## Viikko ... ## Viikko N *Käytä 1 viikon mukaista pohjaa tämän ja kaikkien loppujen viikkojen toimintasi kuvaamiseen. Arviointisi tehdään osittain myös niiden tässä blogissa kuvaamasi toimintasi kautta.