week0

Week 0

0.3 Muistiinpanojen sivu

kayttaja->selain:
note left of selain
  kayttaja kirjottaa osoiteriville
  fullstack-exampleapp.herokuapp.com/notes
end note
selain->palvelin: GET fullstack-exampleapp.herokuapp.com/notes
note left of palvelin
  Haetaan staattinen HTML-sivusto
end note
palvelin->selain: status 200, sivun HTML-koodi

selain->palvelin: GET fullstack-exampleapp.herokuapp.com/main.css
note left of palvelin
  Haetaan staattinen tyylitiedosto
end note
palvelin->selain: status 200, tyylitiedosto

selain->palvelin: GET fullstack-exampleapp.herokuapp.com/main.js
note left of palvelin
  Haetaan staattinen skriptitiedosto
end note
palvelin->selain: status 200, skripti

selain->palvelin: GET fullstack-exampleapp.herokuapp.com/data.json
note left of selain
 selain näyttää palvelimen palauttaman HTML,
 joka on tyylitelty tyylitiedoston mukaisesti
end note
palvelin->selain: status 200, muistiinpanot JSON-muodossa

note left of selain
 selain rikastaa aiemmin näytetyn HTML-sivuston
 sisältämään muistiinpanot, jotka saatiin data.json
 kutsun paluuarvona
end note

0.4 Uusi muistiinpano

note over kayttaja
  Jatketaan tehtävän 0.3 tilanteesta
end note

kayttaja->selain:
note left of selain
  Käyttäjä syöttää verkkosivulla näkyvän lomakkeen
  tekstikenttöön muistiinpanon ja painaa Talleta
  -painiketta
end note
selain->palvelin: POST fullstack-exampleapp.herokuapp.com/notes
note left of palvelin
  Palvelin saa pyynnön mukana käyttäjän
  syöttämän muistiinpanon "note" kentässä.
  Palvelin kirjoittaa muistiinpanon talteen
  esimerkiksi tietokantaan.
end note
palvelin->selain: status 302, location: fullstack-exampleapp.herokuapp.com/notes

note left of selain
  Suoritetaan tehtävän 0.3 tapahtumaketju alusta.
  Data.json kutsun vastauksessa on nyt juuri lisätty
  muistiinpano mukana, ja se näytetään käyttäjälle
end note

0.5 Single page app

Tehtävän 0.5 sekvenssikaavio on lähes identtinen tehtävän 0.3 sekvenssikaavion kanssa. Ainoat erot kaaviossa ovat polku johon käyttäjä navigoi (/notes -> /spa) sekä ladattava JS-tiedosto (main.js -> spa.js).

0.6 Uusi muistiinpano SPA:ssa

note over kayttaja
  Jatketaan tehtävän 0.5 tilanteesta
end note

kayttaja->selain:
note left of selain
  Käyttäjä syöttää verkkosivulla näkyvän lomakkeen
  tekstikenttöön muistiinpanon ja painaa Talleta
  -painiketta.

  Selain lisää talletettavan muistiinpanon listalle
  (optimistic update) ja näyttää sen käyttäjälle.
end note

selain->palvelin: POST fullstack-exampleapp.herokuapp.com/new_note_spa
note left of palvelin
  Palvelin saa pyynnön mukana käyttäjän
  syöttämän muistiinpanon "content" kentässä.
  Palvelin kirjoittaa muistiinpanon talteen
  esimerkiksi tietokantaan.
end note
palvelin->selain: status 201, Created