Full Stack I opintojakson tehtävät ​

Tehtävissä tekoälypohjaisten työkalujen hyödyntäminen edellyttää aina siitä mainitsemisen Lapin AMK:n tekoälyohjeistusta noudattaen. Mikäli tekoälyä on käytetty siitä mainitsematta, tämä johtaa tehtävän automaattiseen hylkäämiseen.

Tehtäväsarja 1 ​

Tehtävä edellyttää javaScript suoritusympäristön käyttöönottoa

Tehtävään liittyvä luentomateriaali

1. Alusta uusi TypeScript projekti ja luo sille GitHub-repositorio. Lisää alustettu projekti Githubiin. (2p)

2. Perehdy verkkoselaimen rajapintoihin, valitse 4 eri verkkoselaimen rajapintaa. Tee luomaasi projektiin tarvittavat koodit missä hyödynnät jokaista valitsemaasi selaimen rajapintaa, käyttäen TypeScript ohjelmointikieltä.

• Koodin tulee arvioinnin yhteydessä suorittua niin että valittujen selaimen rajapintojen käyttötarkoitus tulee demonstroitua vähintään tulostamalla selaimen konsoliin dataa, tai visualisoimalla toiminnallisuus käyttöliittymässä.
• Seuraavat TypeScriptin "kiertämisen" asiat vaikuttavat negatiivisesti pisteisiin: tietotyypin "any" käyttäminen ja TypeScriptin kääntäjän oletustoiminnallisuuden ylikirjoittaminen esim. ts-ignore annotaatiolla tai vastaavalla menetelmällä
• Kommentoi koodisi selittämällä omin sanoin perustellen ratkaisusi

Huomaa että linkin dokumentaatiossa esimerkit selaimen rajapintojen käyttämisestä ovat javaScriptillä ja sinun tulee lisätä tarvittavat tietotyyppien annotaatiot muuttaaksesi koodit TypeScript muotoon. (8p)

Palauta tehtävässä käyttämäsi GitHub-repositorion linkki Moodlen palautuslaatikkoon annetuun päivämäärään mennessä (ks. Moodle)

Tehtäväsarja 2 ​

Tehtäväsarjaan liittyvä luentomateriaali

Tehtävässä voit hyödyntää luennon 3 aikana luotua React-peliprojektia.

1. Suunnittele ja toteuta sovellukseen uusi ominaisuus tai toiminto ​

Ominaisuuden tai toiminnallisuuden pisteytys:

• A. Ominaisuus tai toiminto vaikuttaa positiivisesti kehittäjäkokemukseen (DX) tai käyttäjäkokemukseen (UX). Lisää tekemäsi koodin yhteyteen kommentti missä perustelet ratkaisusi tästä näkökulmasta. (4p)
• B. Kommentoi tekemäsi koodi kertomalla omin sanoin miten ymmärrät koodin toimivan. (2p)
• C. Koodi suorittuu arvioinnin yhteydessä ilman virheitä ja varoituksia (2p)

2. Perehdy käyttämäsi ohjelmointikielen eri kirjastoihin (esim. TS:llä npm-paketit), joista sovelluksessasi voisi olla hyötyä. Valitse yksi kirjasto ja ota se käyttöön sovelluksessasi. Kirjaston dokumentaation pohjalta tee sovellukseesi toinen ratkaisu tai ominaisuus (tehtävän 1 lisäksi), joka hyödyntää valitsemaasi kirjastoa. ​

• Kirjastoa on hyödynnetty koodissa onnistuneesti ja koodi suorittuu arvioinnin yhteydessä ilman virheitä ja varoituksia (2p)
• Lisää koodiin yhteyteen kommentti kohtaan missä olet hyödyntänyt tätä kirjastoa ja miten. (1p)
• Lisää kommenttiin mukaan linkki valitsemasi kirjaston dokumentaatioon tai github-repositorioon. (1p)

3. Dokumentaatio ​

Perehdy README.md tiedostoon. Luo sitä hyödyntäen tehtävässä käyttämällesi projektille dokumentaatio.

• Dokumentaation tulee sisältää tiedot siitä mitä riippuvuuksia esim. ohjelmistojen osalta projektin käyttöönotossa on. (1p)
• Dokumentaation pohjalta henkilö, joka ei ole käyttänyt kyseistä tekniikkaa, osaisi suorittaa projektin koodin tai käynnistää sen soveltuvassa kehitysympäristössä. (1p)

Palauta tehtävässä käyttämäsi GitHub-repositorion linkki Moodlen palautuslaatikkoon annetuun päivämäärään mennessä (ks. Moodle)

Tehtäväsarja 3 ​

Backend ja tietokannat ​

Aloitetaan sovellukseen uuden ominaisuuden lisääminen: keskustelupalsta.

Tämä tehtävä keskittyy keskustelupalstan tietorakenteen mallintamiseen vaatimusmäärittelyn pohjalta:

Ominaisuuden vaatimusmäärittely:

• Keskustelupalstassa kaikki käyttäjät voivat nähdä toistensa viestit
• Käyttäjät voivat aloittaa viestiketjun tai vastata jo olemassaoleviin viesteihin.
• Viestillä on tekstisisältö, aikaleima ja tieto siitä kuka viestin on lähettänyt. Lisäksi viesti voi olla vastaus toiseen viestiin.
• Käyttäjät voivat poistaa omia viestejä
• Jos aloitusviesti poistetaan, kaikki vastaukset siihen myös poistetaan

Vaatimusmäärittelystä poimitaan seuraavat asiat:

1. Käyttäjätili on kytköksissä viestiin / postaukseen
2. Käyttäjällä on oikeus poistaa omat viestinsä
3. Viestin rakenne on lähtökohtaisesti sama, olipa se aloitusviesti tai vastaus viestiketjussa -> Voidaan käyttää samaa taulua aloituksille ja vastauksille
4. Aikaleiman perusteella voidaan järjestää vastaukset jotka liittyvät aloitusviestiin, uusin vastaus esim. aina alimpana.
5. Jos viestin tyyppi on vastaus, data-rakenteeseen tarvitaan vielä siis kenttä aloitusviestin id:lle, jotta tietokannasta voidaan listata vastaukset tälle aloitusviestille. Voidaan lisätä data-rakenteeseen esim. kenttä parent_post_id.
6. Voidaan siis sopia että viesti on aloitusviesti, kun sillä on kenttä parent_post_id tyhjä (NULL)
7. Vastaavasti kun viestillä parent_post_id kentässä on toisen viestin id niin tiedetään sen olevan vastaus toiseen viestiin.

Yksittäisen postauksen datarakenne voisi sisältää siis esimerkiksi seuraavat tiedot:

• id, tietokanta lisää automaattisesti juoksevan kokonaisluvun
• content, käyttäjiltä tuleva viestin sisältö
• created_at, tietokanta lisää automaattisesti
• parent_post_id, viestin y id mihin viesti x on vastaus mikäli kenttä on tyhjä. Viiteavain posts taulun omaan id kenttään.
• user_id, postauksen luoneen käyttäjän ID. Voisiko user_id olla nullable? Nullable tarkoittaisi sitä että anonyymit käyttäjät voisivat lisätä myös viestejä. Supabasen kanssa user_id kentällä olisi relaatio auth.users.id tauluun.

Data-rakenne JSON muotoisena:

// Aloitusviesti, tiedetään kun parent_post_id on null
{
  "id": 1,
  "content": "Tämä on aloitusviesti",
  "created_at": "2024-09-01 12:11:15.425297+00",
  "parent_post_id": null,
  "user_id": "c466549d-c355-4745-8a65-4bcef754c74b"
}

// Vastaukset aloitusviestiin:
[
  {
    "id": 2,
    "content": "Tämä on vastaus ylempään aloitusviestiin",
    "created_at": "2024-10-02 10:18:25.121797+00",
    "parent_post_id": 1,
    "user_id": "a136549d-d645-2745-4b65-5bcef754c74b"
  },
  {
    "id": 3,
    "content": "Tämä on toinen vastaus aloituspostaukseen",
    "created_at": "2024-10-02 13:38:15.631747+00",
    "parent_post_id": 1,
    "user_id": "d236549d-r645-2745-4b65-5bcef754c74b"
  }
]

// Vastaus voisi olla myös toiseen vastaukseen, tässä tapauksessa vastaus viestiin nro. 3
[
  {
    "id": 4,
    "content": "Tämä on vastaus toiseen vastaukseen",
    "created_at": "2024-10-02 13:38:15.631747+00",
    "parent_post_id": 3,
    "user_id": "c466549d-c355-4745-8a65-4bcef754c74b"
  }
]

// Aloitusviesti, tiedetään kun parent_post_id on null
{
  "id": 1,
  "content": "Tämä on aloitusviesti",
  "created_at": "2024-09-01 12:11:15.425297+00",
  "parent_post_id": null,
  "user_id": "c466549d-c355-4745-8a65-4bcef754c74b"
}

// Vastaukset aloitusviestiin:
[
  {
    "id": 2,
    "content": "Tämä on vastaus ylempään aloitusviestiin",
    "created_at": "2024-10-02 10:18:25.121797+00",
    "parent_post_id": 1,
    "user_id": "a136549d-d645-2745-4b65-5bcef754c74b"
  },
  {
    "id": 3,
    "content": "Tämä on toinen vastaus aloituspostaukseen",
    "created_at": "2024-10-02 13:38:15.631747+00",
    "parent_post_id": 1,
    "user_id": "d236549d-r645-2745-4b65-5bcef754c74b"
  }
]

// Vastaus voisi olla myös toiseen vastaukseen, tässä tapauksessa vastaus viestiin nro. 3
[
  {
    "id": 4,
    "content": "Tämä on vastaus toiseen vastaukseen",
    "created_at": "2024-10-02 13:38:15.631747+00",
    "parent_post_id": 3,
    "user_id": "c466549d-c355-4745-8a65-4bcef754c74b"
  }
]

Valitse tietokantaratkaisu mitä hyödynnät tehtävässä. Voit käyttää tässä esim. Supabasea tai luennoilla käytettyä Drizzle ORM:ia, tai vaihtoehtoisesti muuta tietokantaratkaisua

Tehtävä ei edellytä ominaisuuden toteuttamista Client-sovellukseen (frontendiin)

1. Toteuta määrittelyn pohjalta valitsemaasi tietokantaratkaisuun tarvittavat muutokset. ​

A) Lisää tietokantaan ainakin posts taulu määritellyn datarakenteen pohjalta. (5p)

B) Lisää posts tauluun viiteavain postaukseen itseensä: parent_post_id -> id, ks. termi self-referencing table (3p)

• Viiteavain omaan primary avaimeen mahdollistaa datan sisennetyn ketjuttamisen, ks. JSON muoto ylempää.

C) Lisää tauluun vielä uusi kenttä (column), josta voisi olla hyötyä tällaisessa keskustelupalstan viestin datassa, esim. title tai topic . (2p)

2. Lisää testidataa tietokantaan (voit lisätä datan suoraan tietokantaan käyttäen esim. supabasen table-editoria, drizzle-kit studiota) ​

A) Lisää testimielessä tietokantaan viesti, aloituspostaus (aloitusviestillä viestillä on parent_post_id arvo tyhjä, NULL) (2p)

B) Lisää tietokantaan myös toinen viesti, tällä kertaa vastausviesti missä parent_post_id:ssä on aiemmin lisäämäsi aloitusviestin id. (2p)

Vastaa kysymyksiin esimerkin kanssa tai havainnollista koodilla:

C) Millä tavalla saat haettua tietokannasta kaikki viestit jotka ovat aloitusviestejä? (3p)

D) Miten saat haettua yksittäisen aloitusviestin id:n perusteella myös kaikki vastaukset kyseiseen aloitusviestiin yhdellä tietokantakyselyllä? (3p)

E) Millä tavoin ratkaisisit viestien poistamiseen liittyvät mahdolliset ongelmat, kun aloitusviestiin on olemassa vastauksia? (3p)

3. Suunnittele ja määrittele lisäominaisuus: Tykkäykset viesteihin ​

A) Kuvaile suunnitelemasi lisäominaisuus (2p)

B) Luo vaatimusmäärittely. Voit käyttää mallipohjana tehtäväsarjan kuvauksessa määriteltyä keskustelupalstastan määritelmää. (3p)

C) Kuvaile tarvittavat muutokset keskustelupalstan data-rakenteeseen. (2p)

Palautuksen ja arviointi ​

Kuvakaappausten käyttäminen onnistuneesti (kuvat näkyvät githubin kautta md-tiedostoa tarkasteltaessa) osana MD-pohjaista palautusta (2p)

Tehtävä arvioidaan task_series_3.md tiedostoon tehdyn dokumentoinnin perusteella.

Palauta tehtävässä käyttämäsi GitHub-repositorion linkki Moodlen palautuslaatikkoon annetuun päivämäärään mennessä (ks. Moodle)