# Kehittäjän blogi Ada Kostensalo
## Web-ohjelmointi, syksy 2023
### Tekijä: [77170486 Kostensalo Ada]

## Viikko 1

Opeteltiin HTML:n perusteet.

### Tehtävät

Luotiin opiskelijan esittelysivut esimerkkipohjaa muokaten.

#### Täydennykset
20.11. Korjattu kaksi vithettä, jotka HTML-validator oli imoittanut (contact.html) ja uusi versio palautettu Moodleen.

## Viikko 2

Käytiin läpi JavaScriptin perusteita.

### Tehtävät

Palindromiohjelma ja puhelinluettelo: molemmat tuttuja ongelmia Ohjelmointi 1 ja 2 sekä Tietorakenteet ja algoritmit 1 ja 2 -kursseilta. Näillä kursseilla on kuitenkin käytetty Pythonia ja Javaa, eikä JavaScript ollut ennestään tuttu.

#### Täydennykset
20.11. Puhelinluettelotehtävää korjattu siten, että taulukkoon tallenntetaan objekteja ja haku toimii fuktiolla. Uusi versio palautettu Moodleen.

## Viikko 3

Käytiin läpi JavaScript-olio-ohjelmointia. Kehitysblogin tekstit laitettu tuolla viikolla GitHubiin Readme.md-tiedostoon, joka on näkyvillä GitHub-projektin etusivulla.

### Tehtävät

Tehtiin henkilö-luokka ja sen perivä urheilija-luokka. Aiheet olivat ennestään tuttuja Ohjelmointi 2 -kurssilta, mutta toteutukset Javalla ja JavaScriptillä poikkesivat yllättävän paljon toisistaan.

## Viikko 4

Blogipohja luotu Hackmd.io:lla.

## Viikko 5&6

REST API:n käyttö. REST API:n käyttö oli täysin uutta asiaa. Meni aika pitkään, ennen kuin sain ensimmäisen version GET:stä toimimaan.

### Tehtävät

#### 4A REST API -sanakirja

Tehtävässä on käytetty versionhallintaan GitHubia. GET- ja POST-metodit tehty server.js-tiedoston jatkeeksi, koska tässä oli rajatusti tekemistä.

GET- ja POST-metodit on testattu käyttäen Postman-ohjelmaa. Paikallista serveriä ajaessa, GET-toiminnon voi tehdä laittamalla suomenkielisen nimen URI-osoitteeseen, esim. localhost:3000/hiiri -> palauttaa "mouse".

POST-metodin toteutus perustuu siihen, että POST-requestissä on bodyssä JSON objekti, esim. {"fin":"hiiri", "eng":"mouse"}. Kehitysvaiheessa POST-metodi ei meinannut millään toimia ensin, koska olin unohtanut lainausmerkit sanojen ympäriltä (esim. fin:hiiri). Nodejs-virheilmoitukset eivät olleet kovin hyödyllisiä tässä kohtaa.

Kirjoittaminen tiedostoon tehdään rivi kerrallaan, eli aina uusi rivi appendFileSync-funktiolla. Näin ei tarvitse kirjoittaa joka kerta koko sanakirjaa uusiksi taulukkoon.

#### 4B REST API -käyttöliittymä

Käyttöliittymä tehty HTML-pohjasta muokaten.

POST-toiminto onnistui kohtalaisen suoraviivaisesti esimerkkiä muokkaamalla.

Hakutoimintoa tehdessä tuli mieleen, että haun olisi varmaan voinut tehdä myös siten, että bodyyn tulee JSON-objekti. Käyttöliittymästä tätä backendin toimintatapaa ei kuitenkaan voi nähdä. Hakutulos näkyy nyt alert-ikkunana. Lisätessä alert-ikkuna ilmoittaa lisäyksestä.

## Viikko 7&8

### Tehtävät

REST API -sovellus blogille.

#### 5 REST API blogipohja

Rakensin blogipohjan Lloyd Janse van Rensburgin Youtube-videota seuraten. Get ja post -metodit on toteutettu videolla esitetyllä tavalla, put ja delete -metodit ovat puolestaan kokonaan omia. Kaikkien toimivuus on testattu Posmanilla.

Tein tietokannan MySQL:llä koska sitä on käytetty aiemmilla yliopiston kursseilla.

Koodit ovat GitHubissa https://github.com/AdaKost/REST_teht5.

## Viikot 8-11

Kurssin asioiden yhteenvetoa, erityisesti REST API:n yhdistäminen käyttöliittymään. Uusina työkaluina React ja Bootstrap.

### Harjoitus 6

REST API -backendin koodaus ja testaus Postmanilla onnistui melko suoraviivaisesti aiempien viikkojen tehtävien opeilla. Urheilijoiden lisäys, muokkaus ja poisto onnistui ilman ongelmia.

Tein Reactilla käyttöliittymän, jonka kautta voi käyttää REST API:a. Sain ilman virheitä kasautuvan järkevän käyttöliittymän aikaiseksi urheilijoiden listaamiseen ja lisäämiseen, mutta ajauduin ongelmiin käyttöliittymän ja REST API:n vuorovaikutuksen kanssa. Sain lisätessä virheilmoituksia "xhr.js:258 GET http://localhost:3000/urheilijat net::ERR_FAILED 200 (OK)", mikä googlaamalla vaikutti johtuvan siitä, että kun backend pyörii portissa 3000 ja React portissa 3001, niin tästä saattaa tulla virhetilanne. Jäin siihen käsitykseen, että tämä saattaisi ratketa cors:ia käyttämällä, ja yritinkin lisätä serveritiedostoon cors-kirjaston (const cors = require("cors");). Tämä kuitenkin johti ainoastaan serveripuolen virhetilanteeseen.

Otin Bootstrapin käyttöön, mutta lopullisessa käyttöliittymässä lähinnä lisäysnappi on bootstrapista.

Harjoituksen palautus on saatavilla Githubista: https://github.com/AdaKost/Urheilija2.

### Harjoitus 7 (ePortfolio)

Portfoliossa käytin pohjana tehtävän annossa mainittua freelancer-templatea. Portfolio on palautettu zip-tiedostona Moodellen.