---
# System prepended metadata

title: Viikko 1

---

# Viikko 1
HTML on minulle varsin tuttu entuudestaan, mutta opin uutena asiana kuitenkin sen, että html-tiedostoja voi testata virheiden varalta netissä.

# Viikko 2
Node.js on minulle entuudestaan tuttu ympäristö, joten tehtävät eivät tuottaneet suurempia haasteita. Ainoastaan readline-kirjaston toiminnan kanssa sai jonkin verran pähkäillä puhelinluettelo-tehtävässä.

# Viikko 3
Urheilu1-tehtävässä pääsin ensimmäistä kertaa käyttämään luokkia JavaScriptissä. Tämän tehtävän suorittamisesta on varmasti hyötyä tulevissa olio-pohjaisissa tehtävissä / projekteissa. Tein tehtävän ensin hieman väärin sillä en lisännyt Urheilija-luokan konstruktorin super-funktioon yliluokalta periytyviä attribuutteja. Korjasin tämän tehtävän kuitenkin myöhemmin.

# Viikko 4
Sanakirja REST-API tehtävä oli selvästi haastavampi kuin aiempien viikkojen tehtävät. Sain useamman tunnin kulumaan tämän tehtävän parissa siitä huolimatta, että express-kirjasto ja postman-testausympäristö ovat minulle ennestään tuttuja. Erityisesti haastetta tuotti oikeiden headereiden asettaminen, sekä fetch-komennon käyttäminen. Tarkoitus oli myös ensin tallentaa sanat JSON-tiedostoon, mutta se osoittautui yllätyksekseni paljon hankalammaksi kuin odotin. Tehtävä opetti minulle enemmän HTTP-headereistä.

# Viikko 5
Lisäsin jo viime viikolla REST-API tehtävään käyttöliittymän, vaikka se olisi ollut vasta tämän viikon tehtävä. Päädyin sitten tekemään vain pieniä parannuksia visuaaliseen ulkoasuun. Tehtävänannossa käskettiin käyttämään jqueryä käyttöliittymässä. Päätin kuitenkin käyttää vain DOM button-elementtien onclick-eventtejä, sillä jqueryn lisääminen olisi tehnyt koodista mielestäni turhan sekavaa sovelluksen kokoon ja toiminnallisuuteen nähden.

# Viikko 6
Syysloma

# Viikko 7
Tehtävää 5 tehdessä opin jonkin verran SQL-tietokantojen perusteista ja SQL-kielestä. Joka oli minulle ennestään vieras, sillä olen käyttänyt aikaisemmin vain NoSQL-tietokantoja. MVC-arkkitehtuuri oli jo ennestään melko tuttu konsepti, joten suurin ongelma tehtävää tehdessä oli SQL-syntaksin opettelu.

# Viikko 8
Aloitin Reactin perusteisiin tutustumisen luomalla yksinkertaisia komponentteja valmiiksi alustettuun React-projektiin. Ainakin toistaiseksi Reactin käyttö on minulle aika sekavaa etenkin syntaksin vuoksi.

# Viikot 9-11
Olen laajentanut React-osaamista tutustumalla hookkeihin ja funktionaalisiin komponentteihin luentovideoiden ja nettimateriaalien avulla. Osaaminen on vielä suhteellisen hataralla pohjalla, mutta toivon tämän muuttuvan kun alan implementoimaan näitä ominaisuuksia viimeisiin palautustehtäviin. Saatan yrittää hyödyntää myös Context APIa tehtävässä 6, mutta siihen perehtymistä en ole vielä aloittanut. 

# Viikko 12
https://github.com/ottoheiskanen/UrheilijaTehtava/

Aloitin tehtävän 6 tekemisen luomalla uuden SQL-tietokannan HeidiSQL-sovelluksen avulla. Lisäsin SQL-tableen tehtävänannossa määrätyt kolumnit ja annoin DB-käyttäjälle kaikki tarvittavat oikeudet tietokannan hallinnointiin.

Seuraavaksi loin tälle tehtävälle oman julkisen Github repositoryn ja siihen hakemiston frontendille ja backendille. 

Tämän jälkeen aloin tekemään REST-rajapintaa backendiä varten. Käytännössä tämä tarkoitti sitä, että uudelleenkäytin edellisessä palautustehtävässä luomaani REST-apia pienillä muutoksilla. Testasin tämän jälkeen että requestit toimivat oikein Postman-sovelluksen avulla.

Viimeinen - ja mielestäni tehtävän vaikein osa oli suunnitella toimiva käyttöliittymä Reactin avulla. Aloitin käyttöliittymän rakentamisen hyödyntämällä kurssialustalla olevia projektipohjia. Loin niiden avulla ensimmäisen version käyttöliittymästä, joka oli toteutettu niin että jokainen toiminto: datan esitys, muokkaaminen ja lisääminen oli omassa URL-polussaan. En kuitenkaan pitänyt tästä esitystavasta, joten etsin netistä React-tutoriaalin jolla luotiin taulukkopohjainen käyttöliittymä ja kopioin tämän koodin githubista ja tein siihen tarvittavat muutokset. 

Seuraavaksi minun piti ladata tietokannassa oleva data tähän taulukkoon. Tämä aiheutti minulle ensin jonkin verran päänvaivaa, sillä en tiennyt miten asynkroninen GET-request palautetaan State-hookkiin järkevällä tavalla. Kun olin viimein saanut datan palautettua taulukkoon, vuorossa oli muiden requestien lisääminen joka osoittautui helpommaksi tehtäväksi kuin luulin.

Huomasin vasta lopuksi että tehtävästä sai pisteitä myös jos käytti bootstrap-kirjastoa. Päätin siis luoda 'Title.js'-nimisen komponentin jossa otin käyttöön 'Badge'-komponentin reactstrap-kirjaston avulla. En käyttänyt projektissa lainkaan Context APIa, sillä aikani ei riittänyt sen opetteluun.

# Viikko 13

https://github.com/ottoheiskanen/WebOhjelmointi1/tree/master/ePortfolio

Tein ePortfolio tehtävän käyttämällä valmista bootstrap-mallipohjaa. Poistin mallipohjasta turhat komponentit ja tekstit sekä kirjoitin kurssipalautteen ja kuvauksen jokaisesta tekemästäni tehtävästä. Lopuksi korjasin vielä puutteellisen Urheilu1-tehtävän ja päivitin sen koodin GitHubiin. 
https://github.com/ottoheiskanen/WebOhjelmointi1/tree/master/Urheilu1

Katsoin myös viikon 13 luentovideon ja opin jonkin verran testaamisesta.