Forgot to add ProtectedComponent

tex/appendix/login.tex

@@ -1,4 +1,4 @@
-\chapter{Login-komponentti}\label{appx:login}
+\chapter{Sisäänkirjautuminen}\label{appx:login}
 \begin{code}
 	\inputminted{Rust}{code/project/frontend/component/login.rs}
 \end{code}

tex/appendix/protected.tex

@@ -0,0 +1,6 @@
+\chapter{Suojatun tiedon noutaminen}\label{appx:protected}
+\begin{code}
+	\inputminted{Rust}{code/project/frontend/component/protected.rs}
+\end{code}
+
+\clearpage

tex/chapters/3-kielet.tex

@@ -150,7 +150,7 @@ Yksi todella mielenkiintoinen ominaisuus Rustissa on makrot. Se on toiminnallisu
 	\label{code:rust:macro}
 \end{code}
 
-Makron sisällä suluissa olevat lauseet ovat verrattavissa Rustin ''match''-lauseeseen. Kun makron syöte vastaa jotakin näistä lauseista, hakasulkujen sisällä oleva koodi generoidaan. Makrossa käytetty ''println!()'' on myös itsessään makro, joka tulee Rustin ''std'' -kirjaston mukana.
+Makron sisällä suluissa olevat lauseet ovat verrattavissa Rustin ''match''-lauseeseen. Kun makron syöte vastaa jotakin näistä lauseista, hakasulkujen sisällä oleva koodi generoidaan. Koodiesimerkin \ref{code:rust:macro} makrossa käytetty ''println!()'' on myös itsessään makro, joka tulee Rustin ''std'' -kirjaston mukana.
 
 \bigskip
 
@@ -182,13 +182,13 @@ Rustin paketinhallinta on toteutettu Cargo-nimisellä ohjelmalla. Sitä voi käy
 Cargoon on saatavilla myös useita liitännäisiä, esimerkiksi cargo-watch, joka suorittaa halutun toiminnon aina, kun projektin sisällä tapahtuu muutoksia sekä tässäkin insinöörityössä käytetty cargo-web, joka helpottaa WebAssembly-ohjelmien kehittämistä.
 
 \section{WebAssembly}
-WebAssembly \cite{webassembly:home} on kehitteillä oleva asiakaspuolen ohjelmointikieli. Sitä on suunniteltu JavaScriptin seuraajaksi ja sen suurimpana etuna JavaScriptiin verrattuna on huomattavasti matalamman tason esitysmuoto, minkä ansiosta se on suorituskykyisempi.
+WebAssembly \cite{webassembly:home} on kehitteillä oleva asiakaspuolen ohjelmointikieli. Sitä on suunniteltu JavaScriptin seuraajaksi ja sen suurimpana etuna verrattuna JavaScriptiin on huomattavasti matalamman tason esitysmuoto, minkä ansiosta se on suorituskykyisempi.
 
 Kehittäjän ei ole tarkoitus kirjoittaa WebAssemblya itse, vaan käyttää työkaluja, joilla olemassa olevia ohjelmointikieliä voi kääntää WebAssemblyksi. Rust on tästä hyvä esimerkki, sillä WebAssembly on yksi sen kääntäjän natiiveista ''targeteista'', samalla tavalla kuin vaikka x86-prosessorit.
 
 \clearpage
 
-WebAssembly on siis ensisijaisesti binääriformaatti, mutta sen voi muuntaa myös tekstiformaatiksi, jonka nimi on WebAssembly text \cite{webassembly:text}. WebAssembly text käyttää syntaksissaan S-lausekkeita \cite{s-expression}. Se on notaatio puurakenteiselle datalle, joka on kehitetty Lisp-ohjelmointikieltä varten, joten WebAssembly text muistuttaa syntaksiltaan hyvin paljon Lispiä. WebAssembly textiä käytetään tilanteissa, joissa ihmisen täytyy ymmärtää, mitä koodissa tapahtuu. Tätä hyödynnetään esimerkiksi WebAssemblyn sisäisessä kehityksessä ja web-ohjelmistojen debuggereissa.
+WebAssembly on ensisijaisesti binääriformaatti, mutta sen voi muuntaa myös tekstiformaatiksi, jonka nimi on WebAssembly text \cite{webassembly:text}. WebAssembly text käyttää syntaksissaan S-lausekkeita \cite{s-expression}. Se on notaatio puurakenteiselle datalle, joka on kehitetty Lisp-ohjelmointikieltä varten, joten WebAssembly text muistuttaa syntaksiltaan hyvin paljon Lispiä. WebAssembly textiä käytetään tilanteissa, joissa ihmisen täytyy ymmärtää, mitä koodissa tapahtuu. Tätä hyödynnetään esimerkiksi WebAssemblyn sisäisessä kehityksessä ja web-ohjelmistojen debuggereissa.
 
 \bigskip
 
@@ -206,4 +206,4 @@ WebAssembly on siis ensisijaisesti binääriformaatti, mutta sen voi muuntaa my
 	\label{code:rust:plus}
 \end{code}
 
-Koodiesimerkeistä \ref{code:webassembly:plus} ja \ref{code:rust:plus} voi nähdä saman koodin sekä Rustilla että WebAssembly text -formaatissa. Esimerkeistä huomaa hyvin WebAssemblyn matalemman esitysmuodon käytännössä.
+Koodiesimerkeistä \ref{code:webassembly:plus} ja \ref{code:rust:plus} voi nähdä saman koodin sekä Rustilla toteutettuna että WebAssembly text -formaatissa. Esimerkeistä huomaa hyvin WebAssemblyn matalemman esitysmuodon käytännössä.

tex/chapters/4-projekti.tex

@@ -11,10 +11,10 @@ Tavoitteena ei ollut saada aikaiseksi mitään todella monimutkaista ohjelmaa, v
   \label{fig:architecture}
 \end{figure}
 
-Kuvassa \ref{fig:architecture} näkee sovelluksen arkkitehtuurin. Sovelluksen asiakaspuoli koostuu mallin keltaisista laatikoista ja palvelinpuoli sininisistä. Nuolet merkitsevät datan liikkumista, mikä on kaikkialla kaksisuuntaista.
+Kuvassa \ref{fig:architecture} näkee sovelluksen arkkitehtuurin. Sovelluksen asiakaspuoli koostuu mallin keltaisista laatikoista ja palvelinpuoli sininisistä. Nuolet merkitsevät datan liikkumista, mikä on kaikkialla kaksisuuntaista. Yew ja Actix ovat valitsemani asiakas- ja palvelinpuolen sovelluskehykset.
 
 \section{Kehitysympäristön asennus}
-Rust-projektin aloittamiseksi kehittäjä tarvitsee koneelleen Rustin paketinhallintatyökalun, Cargon (katso luku \ref{sect:paketinhallinta}). Olen itse Linux-käyttäjä, joten sain asennettua Cargon Linux-jakeluni ohjelmavarastosta. Windows-käyttäjiä suosittelen käyttämään Rustup-asennusohjelmaa. Lisää tietoa Rustin asentamisesta saa Rustin kotisivuilta \cite{rust:install}.
+Rust-projektin aloittamiseksi kehittäjä tarvitsee koneelleen Rustin paketinhallintatyökalun, Cargon (katso luku \ref{sect:paketinhallinta}). Olen itse Linux-käyttäjä, joten sain asennettua Cargon Linux-jakeluni ohjelmavarastosta. Mac- ja Windows-käyttäjille suosittelen Rustup-asennusohjelman käyttämistä. Lisää tietoa Rustin asentamisesta saa Rustin kotisivuilta \cite{rust:install}.
 
 Projektin saa initialisoitua komennolla \mintinline{shell}{cargo init projektinnimi}. Tämä komento luo hakemiston ''projektinnimi'', minkä sisällä on Cargon konfiguraatiotiedosto Cargo.toml, jossa voi määrittää projektin tiedot ja riippuvuudet. 
 
@@ -139,9 +139,9 @@ CORS:n lisääminen tähän projektiin hoitui Actixin liitännäisellä actix\ch
   \label{fig:er-model}
 \end{figure}
 
-Tietokannaksi valikoitui itselleni tuttu MySQL. Koska projekti on vain yksinkertainen todennusdemo, tietokantaan tuli vain yksi taulu. Users-taulussa on käyttäjän tiedot: käyttäjänimi, salattu salasana, tieto käyttäjän ylläpitäjyydestä sekä käyttäjän luomisajankohta. Tietokannan ER-mallin näkee kuvasta \ref{fig:er-model}. 
+Tietokannaksi valikoitui itselleni tuttu MySQL. Koska projekti on yksinkertainen todennusdemo, tietokantaan tuli vain yksi taulu. Users-taulussa on käyttäjän tiedot: käyttäjänimi, salattu salasana, tieto käyttäjän ylläpitäjyydestä sekä käyttäjän luomisajankohta. Tietokannan ER-mallin näkee kuvasta \ref{fig:er-model}. 
 
-Relaatiotietokannan sai helposti yhdistettyä Rust-koodiini Diesel ORM:llä. Diesel on tähän mennessä käyttämistäni ORM-kirjastoista selkeästi mukavin käyttää.
+Relaatiotietokannan sai helposti yhdistettyä Rust-koodiini Diesel ORM-kirjastolla. Diesel on tähän mennessä käyttämistäni ORM-kirjastoista selkeästi mukavin käyttää.
 
 Käytännöllisimmät ominaisuudet kehittäjän näkökulmasta olivat Dieselin mukana tuleva komentorivikäyttöliittymä ja migraatiot. Jokaiselle taululle luodaan uusi migraatio, esimerkiksi \mintinline{shell}{diesel migration generate users}, jonka jälkeen Dieselin luomaan hakemistoon kirjoitetaan up.sql- ja down.sql-tiedostot [liite \ref{appx:diesel}], eli ohjeet siitä, miten tämä taulu luodaan ja poistetaan. Taulu viedään tietokantaan komennolla \mintinline{shell}{diesel migration run} ja taulun voi poistaa ja luoda uudelleen komennolla \mintinline{shell}{diesel migration redo}. Tämä mahdollistaa myös samalla sen, että versiohallintaan voi tallentaa useita versioita samasta taulusta ja palata helposti takaisin vanhempaan versioon, jos uudemman kanssa ilmenee ongelmia.
 
@@ -149,7 +149,7 @@ Käytännöllisimmät ominaisuudet kehittäjän näkökulmasta olivat Dieselin m
 
 Edellä mainitut työkalut helpottivat tietokannan kehitystä huomattavasti. Usein varsinkin projektin alkuvaiheilla tietokanta muuttuu jatkuvasti ja usein tulee tarve poistaa ja luoda tietokanta uudelleen. Monet kehittäjät pitävät juurikin tällaista Dieselin up.sql kaltaista tiedostoa versiohallinnassa ja tarpeen mukaan poistavat tietokannan käsin ja liittävät komennon tiedostosta tietokannan komentorivikäyttöliittymään. Dieseliä käytettäessä tämä tulee tehtyä automaattisesti ja se tuntuu todella luontevalta.
 
-Päätin myös käyttää Dieselin kanssa yhteyksien yhdistämistä (eng. connection pooling). Tämä tarkoittaa sitä, että palvelin luo käynnistyessään prosessin, joka ottaa yhteyden tietokantaan, ja jakaa tätä yhteyttä sitä tarvitseville ohjelman osille. Tämä on tehokkaampaa kuin vaihtoehto, jossa otetaan uusi yhteys jokaista tietokantakyselyä varten.
+Päätin myös käyttää Dieselin kanssa yhteyksien yhdistämistä (eng. connection pooling). Tämä tarkoittaa sitä, että palvelin luo käynnistyessään prosessin, joka ottaa yhteyden tietokantaan. Tämä prosessi puolestaan jakaa tätä yhteyttä sitä tarvitseville ohjelman osille. Tämä on tehokkaampaa kuin vaihtoehto, jossa otetaan uusi yhteys jokaista tietokantakyselyä varten.
 
 \section{Asiakaspuoli}
 \subsection{Asennus}
@@ -163,7 +163,7 @@ WebAssembly-koodin suorittamiseksi selain tarvitsee pienen pätkän JavaScripti
 \subsection{Kehys}
 Asiakaspuolen sovelluskehykseksi valitsin Yew:n\cite{yew:home}. Yew muistuttaa hyvin paljon JavaScript-maailmassa suosittua Reactia, eli sen on komponenttipohjainen. Tämä tarkoittaa sitä, että kaikkien ohjelman osien, joilla halutaan näyttää jotakin käyttöliittymän osaa, täytyy implementoida Yew:n Component-rajapintaa. Tässä rajapinnassa on funktiot create, change, update ja view. Näiden funktioiden avulla Yew pystyy orkestroimaan kullakin hetkellä näytettävien komponenttien tilaa.
 
-Tässä projektissa komponentteja oli kaksi: ohjelman juuri [liite \ref{appx:frontend-main}] ja kirjautumiskomponentti [liite \ref{appx:login}].
+Tässä projektissa komponentteja oli kolme: ohjelman juuri [liite \ref{appx:frontend-main}], kirjautumiskomponentti [liite \ref{appx:login}] ja suojatun datan noutamiseen tehty komponenti [liite \ref{appx:protected}].
 
 
 \subsection{Ulkonäkö}
@@ -191,7 +191,7 @@ Myös yew\char`_routerin kanssa oli omat haasteensa. Alkuun en saanut sitä toim
 Asiakaspuolen reitityksen toteutuksen voi nähdä liitteessä \ref{appx:frontend-main}.
 
 \section{Ongelmat}
-Projektin loppuvaiheilla ilmeni muutamia ongelmia, joiden takia projekti vaatii vielä jatkokehitystä.
+Projektin aikana ilmeni muutamia ongelmia, joiden takia projekti vaatii vielä jatkokehitystä.
 
 \subsection{Evästeet}
 \label{sect:problems:cookies}
@@ -203,7 +203,7 @@ Suunnittelmana oli käyttää evästeen tietoja asiakaspuolella reititykseen. Es
 Yhtenä ratkaisuna tähän ongelmaan olisi käyttää JSON Web Tokenin tallettamiseen evästeen sijasta selaimen LocalStoragea. Tämä vaatisi lisää työtä sekä asiakaspuolella että palvelinpuolella.
 
 \subsection{Tietokantayhteys}
-Palvelimen ja tietokannan välisessä yhteydessä oli koko projektin ajan ongelma, että jokainen kysely tietokantaan kesti noin viisi sekuntia. Luulen että tämä ongelma liittyy jotenkin käyttämääni yhteyksien yhdistämiseen (luku \ref{project:database}), koska palvelimen loki näyttää satunnaisesti virheviestin \mintinline{shell}{Failed to create DB pool: Error(Some("Too many connections")}. Asian selvittäminen jää jatkokehitykseen.
+Palvelimen ja tietokannan välisessä yhteydessä oli koko projektin ajan ongelma, että jokainen kysely tietokantaan kesti noin viisi sekuntia. Luulen että tämä ongelma liittyy jotenkin käyttämääni yhteyksien yhdistämiseen [luku \ref{project:database}], koska palvelimen loki näyttää satunnaisesti virheviestin \mintinline{shell}{Failed to create DB pool: Error(Some("Too many connections")}. Asian selvittäminen jää jatkokehitykseen.
 
 \section{Tulokset}
 Tuloksena syntyi yksinkertainen web-ohjelma, jossa on toimiva sisäänkirjautumistoiminallisuus. Sen avulla asiakas voi noutaa palvelimelta suojattua dataa. Kuvassa \ref{fig:login-process} on määritelty kaikki kirjautumisprosessin vaiheet.

tex/main.tex

@@ -85,6 +85,10 @@
 
 \addtocontents{toc}{\vspace{11pt}}
 \liite{5}
+\input{appendix/protected.tex}
+
+\addtocontents{toc}{\vspace{11pt}}
+\liite{6}
 \input{appendix/diesel.tex}
 %%%%%%%%%%