4 Verkkopalvelun toteuttaminen

4 Verkkopalvelun toteuttaminen Tällä kerralla on tavoitteena käydä läpi verkkopalvelun toteuttamiseen liittyviä asioita Mitkä tekijät asettavat reunaehtoja verkkopalvelun toteutukselle? Mitä kaikkea verkkopalvelun toteutuksessa on otettava huomioon? Loppukäyttäjä: käytettävyys (käytön tehokkuus ja virheettömyys, subjektiivinen tyytyväisyys) & saavutettavuus,... Kehittäjä/ylläpitäjä: ylläpidettävyys & päivitettävyys, muokattavuus, uudelleenkäyttö,... Miten verkkopalvelun tyypilliset toiminnot toteutetaan? Verkkopalvelun toiminnallisuus perustuu lomakkeisiin, joten yksittäisten toimintojen toteuttaminen on pääosin samanlaista Toteutustyön tueksi on olemassa valmiita suunnittelumalleja ja sovelluskehyksiä: tyhjästä on yleensä turha aloittaa Tutustutaan ensin tarkemmin verkkopalvelun toteutustyön reunaehtoihin eri näkökulmasta ja käydään sitten läpi esimerkkejä siitä, miten reunaehdot käytännössä otetaan huomioon toteutustyössä 7307010 Hypermedian ohjelmointi (kevät 2005) 47

Näkökulmia verkkopalvelun toteutukseen Sovelluksen käytettävyyden kriteerejä loppukäyttäjän näkökulmasta (Nielsen): käyttäminen helppo oppia, käyttäminen on tehokasta (noviisi vs. ekspertti), helposti muistettavissa, aiheuttaa vähän virheitä ja on mukava käyttää. Teknisen toteutuksen kriteerejä: Kustannustehokkuus, luotettavuus ja yhdenmukaisuus (Welling & Thompson) Päivitettävyys, siirrettävyys, uudelleenkäyttö, yhteensopivuus, virhesietoisuus (ohjelmistotuotanto) Tutustutaan seuraavaksi hieman tarkemmin siihen, miten kriteerit otetaan huomioon verkkopalvelun teknisessä toteutuksessa. 7307010 Hypermedian ohjelmointi (kevät 2005) 48

Heuristinen käyttöliittymäsuunnittelu (kertausta) Tyypillinen hyvän käyttöliittymäsuunnittelun muistilista sisältää esim. seuraavat kohdat (Nielsen): järjestelmän tila (jos on pakko käyttää) pitää olla aina käyttäjän tiedossa järjestelmän käsitteiden tulee vastata sovellusalueen käsitteitä ei-toivotut komennot on voitava selkeästi peruuttaa (lipsahdukset!) käsitteiden ja toimintojen tulee olla systemaattisia ja odotusten mukaisia käyttövirheet tulee ennakoida ja ennaltaehkäistä virheiden tekeminen käytön tulee olla havaitsemista ulkoa muistamisen sijaan eksperteille on tarjottava tehokkaita menetelmiä (optiot ja adaptiivisuus) pieni on kaunista toteuta selkeät virheviestit jotka ehdottavan ongelman korjaamista ohjeet ja dokumentaatio tulisivat aina olla tarvittaessa saatavilla Itsestään selviä asioita? Tuppaavat ainakin unohtumaan kovin helposti! 7307010 Hypermedian ohjelmointi (kevät 2005) 49

Heuristiikan toteuttaminen: esimerkkejä Järjestelmän tila: Sisään kirjautuneen käyttäjän tunnus/nimi näytetään sovelluksen käyttöliittymässä (+ mahdollisuus uloskirjautumiseen) Käyttäjän sijainti sovelluksessa: mukautuva valikko tai murupolku Portaali: kooste järjestelmän tilasta käyttäjän mieltymysten perusteella Järjestelmän käsitteet vs. käyttäjä: Human-Computer Interaction (HCI) ja käyttäjäkeskeinen suunnittelu Toiminnallisuuden ja teknisen suunnittelun erottaminen Käsitteiden testaaminen prototyyppien avulla Toimintojen peruuttaminen: Esikatselu ja hyväksyminen Mahdollisuus syötetyn tiedon muokkaamiseen/poistamiseen Peruuta-toiminnon toteuttaminen hankalaa! 7307010 Hypermedian ohjelmointi (kevät 2005) 50

Toimintojen systemaattisuus: Yhtenäisyys: sivupohjat ja kielitiedostot kirjastojen toteuttaminen käyttöliittymien tuottamiseen, käyttöliittymän irrottaminen toimintalogiikasta Käyttövirheiden ennakointi ja ennaltaehkäisy Ohjeet ja opasteet, käyttöliittymäsuunnittelu,... Testaaminen (prototyypit)! Käyttö havaitsemista, ei ulkoa muistamista: Ohjeet ja opasteet, käyttöliittymäsuunnittelu,... Portaali (vrt. järjestelmän tila) Hakutoiminto: tiedon visualisointi vs. avainsanahaku Eksperteille tehokkaita menetelmiä: Käyttäjäroolit Mukautuva hypermedia 7307010 Hypermedian ohjelmointi (kevät 2005) 51

Pieni on kaunista: Laiha asiakas, käyttöliittymäsuunnittelu Yksinkertaisen verkkopalvelun suunnitteleminen on huomattavasti työläämpää kuin monimutkaisen! Selkeät virheviestit: Tieto siitä, missä virhe on ja ohjeet virheen korjaamiseksi Ohjeet ja dokumentaatio saatavilla: Verkkopalvelun käyttöliittymässä on yleensä riittävästi tilaa siihen, että suuri osa ohjeista voidaan upottaa suoraan sovellukseen: usein erillistä käyttöohjetta ei tarvita ollenkaan Julkaisukontekstista (käyttäjä, päätelaite & verkkoyhteys) tehdyt oletukset (tuki skripteille tai evästeille, pakolliset selainlaajennukset, ) on aina kerrottava käyttäjälle Nielsenistä sinänsä voi olla montaa mieltä, mutta hänen nimissään kulkeva heuristiikka toimii hyvänä muistilistana sovelluksen toteutuksen arvioinnissa Sovellusten arviointiin tarkoitettuja heuristiikkoja voi vapaasti käyttää apuvälineenä myös sovelluksen suunnittelutyössä 7307010 Hypermedian ohjelmointi (kevät 2005) 52

Lomakkeet ja syötteen käsittely Verkkopalvelun tekninen toteutus perustuu lomakkeisiin. Verkkopalvelun toiminto sisältää tyypillisesti seuraavat vaiheet: 1. Käyttäjä syöttää toiminnon edellyttävät tiedot lomakkeeseen ja lähettää lomakkeen sovellukselle 2. Sovellus ottaa pyynnön vastaan ja tarkastaa (validoi) syötteen Syötteen ollessa laillinen: 3. Syötteen perusteella valitaan osa sovelluksen tietosisällöstä (turvallinen toiminto, ~haku) tai muutetaan sovelluksen tilaa (ei-turvallinen toiminto, ~tilaus) 4. Käyttäjä ohjataan uuteen näkymään, jossa kerrotaan toiminnon onnistumisesta ja näytetään haun tulos tai sovelluksen uusi tila Syötteen ollessa virheellinen: 3. Käyttäjä ohjataan takaisin näkymään, jossa virhe on tapahtunut. Näkymään liitetään korjausehdotuksen sisältävä virheilmoitus ja korostetaan virheellisen syötteen sisältävä lomakkeen komponentti tai komponentit 7307010 Hypermedian ohjelmointi (kevät 2005) 53

Syötteen tarkastaminen Reunaehtoja syötteen laillisuudelle: Tietokanta: syötteen pakollisuus (pääavain tai not null), sarakkeen sisällön maksimikoko tai yksikäsitteisyys (pääavain) Määrämuoto: sähköpostiosoite, henkilötunnus, päivämäärä, viitenumero, ISBNtunnus, URI,... Laillinen syöte määritellään usein osana sovelluksen toiminnallista määrittelyä (vrt. HYTT) Keino tarkastamiseen: säännölliset lausekkeet (regular expressions) Määritellään merkkijonon sallittu hahmo (pattern), jota verrataan tutkittavaan merkkijonoon Säännöllisiä lausekkeita voi käyttää myös merkkijonojen etsimiseen ja korvaamiseen Syötteen pakollisuuteen ja merkkijonon pituuteen liittyvät tarkastukset voidaan toteuttaa käytössä olevan ohjelmointikielen kirjastofunktioilla 7307010 Hypermedian ohjelmointi (kevät 2005) 54

Säännöllisten lausekkeiden perusteet Säännöllisen lausekkeen hahmo koostuu merkeistä ja metamerkeistä (metacharacters) (Lähde: Rantala, A. PHP Web-ohjelmoinnin peruskirja): vaihtoehto ^ seuraava lauseke merkkijonon alussa $ edeltävä lauseke merkkijonon lopussa. mikä tahansa merkki (yksi) * edellisen lausekkeen toisto 0 tai useamman kerran + edellisen lausekkeen toisto 1 tai useamman kerran? edellisen lausekkeen toisto 0 tai 1 kertaa () lausekkeen ryhmittely (ja varastointi) [] merkkijoukko {} edellisen lausekkeen toisto vähintään n ja enintään m kertaa {n,m} \ metamerkin merkityksen poisto 7307010 Hypermedian ohjelmointi (kevät 2005) 55

Esimerkki säännöllisestä lausekkeesta Toiminnallisen määrittelyn yhteydessä voidaan esimerkiksi määritellä päivämäärän muodoksi yyyy-mm-dd (Lähde: http://www.w3.org/tr/note-datetime) Esimerkki hahmosta: ^[0-9]{4}-[01][0-9]-[0-3][0-9]$ merkkijono alkaa (^) tasan neljällä merkillä ({4}) joukosta (0, 1, 2, 3,..., 9) viidentenä merkkinä on pakollinen väliviiva (-) kuukauden ensimmäinen numero on aina 0 tai 1 ([01]) ja toinen välillä 0-9 pakollinen väliviiva (-) päivämäärän ensimmäinen ([0-3]) ja toinen ([0-9]) numero lopussa ei muita merkkejä ($) Huomaa, että tavalliselta käyttäjältä (noviisi) ei yleensä kannata vaatia päivämäärän kirjoittamista tietyssä muodossa (vaihtoehdot!). Tehokäyttäjä onkin sitten asia erikseen (ohjeistus) Säännöllisten lausekkeiden ideat tulevat vastaan myös esimerkiksi formaalien kielten ja UNIX-tehokäytön yhteydessä (grep) 7307010 Hypermedian ohjelmointi (kevät 2005) 56

Syöte, tietoturva ja PHP Vihamielinen käyttäjä voi horjuttaa sovelluksen tietoturvaa monella tavalla: Tietokanta: Syötteeseen voidaan lisätä merkkejä, jotka mahdollistavat SQLkomentojen välittämisen suoraan tietokantaan. Ratkaisu: addslashes()- ja stripslashes()-funktiot Komentotulkki: Syötteeseen voidaan lisätä merkkejä, jotka mahdollistavat käskyjen välittämisen komentotulkille (shell). Ongelma silloin, kun PHP-ohjelma välittää syötteen komentoriviohjelmalle. Ratkaisu: escapeshellcmd()-funktio HTML-käyttöliittymä: Syötteeseen voidaan lisätä merkkejä, jotka sotkevat sovelluksen käyttöliittymän. Ongelma syntyy silloin, kun käyttäjän syöte tulostetaan takaisin käyttöliittymään (esimerkiksi keskustelupalsta tai vieraskirja). Ratkaisu: strip_tags()- ja htmlspecialchars()-funktiot Verkkopalvelun tietoturvallisen toteutuksen perusteisiin kuuluu lisäksi HTTPSprotokollan käyttäminen kaiken arkaluontoisen tiedon välittämiseen asiakkaan ja palvelimen välillä. HTTPS-protokollan käyttö estää tietojen selvittämisen tietoliikennettä kuuntelemalla. HTTPS-protokollan yli välitettyjä tietoja ei myöskään säilytetä selaimen välimuistissa. 7307010 Hypermedian ohjelmointi (kevät 2005) 57

Koodin uudelleenkäyttö Koodin uudelleenkäytöllä on useita lisäarvoja sovelluksen toteutustyössä: Kustannustehokkuus: Sovelluksen moduulin M ylläpitämiseen, testaamiseen ja dokumentointiin keskimäärin kuluva aika on toteuttamiseen verrattuna moninkertainen Ylläpidettävän koodin määrä on pyrittävä pitämään mahdollisimman pienenä Luotettavuus: Moduulin luotettavuuden varmistaminen edellyttää kattavaa testaamista Testaamisesta huolimatta koodiin voi jäädä ohjelmointivirheitä, jotka paljastuvat ajan myötä Yhdenmukaisuus: Sovelluksen käyttöliittymien (ja muiden rajapintojen) yhdenmukainen toteuttaminen esimerkiksi tyylioppaan perusteella on työlästä Modulaarinen toteutus mahdollistaa koodin uudelleenkäytön 7307010 Hypermedian ohjelmointi (kevät 2005) 58

Koodin uudelleenkäyttö ja PHP PHP-kieli mahdollistaa koodin uudelleenkäytön moduulien ja funktioiden avulla: include() ja require(): tiedoston sisällyttäminen toiseen PHP-tiedostoon. Ero: ensimmäinen aiheuttaa epäonnistuessaan varoituksen (warning), jälkimmäinen virheen (error) include-once() ja require-once(): vastaavia kuin edelliset, mutta sisällyttäminen tapahtuu ainoastaan kerran Käyttötapauksia: Omat funktiokirjastot: HTML-merkkauksen tulostaminen, tietokantayhteyden avaaminen, syötteen tarkastaminen,... => include-once() Sivupohjan (header.inc ja footer.inc) ja muiden yleisten HTMLrakenteiden irrottaminen omaksi kokonaisuudekseen => include() PHP5 mahdollistaa yksinkertaisten moduulien ohella myös täysiverisen olioohjelmoinnin (periytyminen, paketointi, poikkeukset,...) Tietoturvan parantamiseksi arkaluontoista tietoa sisältävät sisällytettävät tiedostot kannattaa nimetä php-tiedostopäätteellä (miksi?) 7307010 Hypermedian ohjelmointi (kevät 2005) 59

Ohjelmistotuotannon kriteerit Yleisessä ohjelmistotuotannossa sovelluksen laadulle on määritelty mm. seuraavat kriteerit: Päivitettävyys: Yleisesti: mekaanisten työtehtävien siirtäminen ihmiseltä tietokoneelle Modulaarinen suunnittelu parantaa sovelluksen päivitettävyyttä merkittävästi: HTML-merkkauksen tulostaminen, sivupohjat,... Verkkopalvelussa myös sisällön päivittämisen helppous on tärkeää Siirrettävyys: Sovelluksen toteutustekniikoiden valinta siten, että tuki löytyy mahdollisimman monelta palvelimelta Esimerkkejä: ODBC-tietokantarajapinta ja SQL-standardi (tai tekstitiedostojen käyttäminen), yleisesti käytössä olevat versiot käytettävistä ohjelmistoista ja kielistä, erillistä asennusta vaativien kirjastojen käytön välttäminen 7307010 Hypermedian ohjelmointi (kevät 2005) 60

Uudelleenkäyttö: Modulaarinen suunnittelu Verkkopalvelun yleisten osien irrottaminen sovelluskohtaisista ratkaisuista Dokumentointi! Yhteensopivuus: Standardiratkaisujen käyttäminen mahdollisuuksien mukaan: validi HTML ja CSS, kuvat JPEG/GIF/PNG-muodossa Sovelluksen toteuttaminen saavutettavuuden ja laiteriippumattomuuden periaatteiden mukaisesti Sovelluksen kansainvälistäminen Virhesietoisuus: Sovelluksen on toivuttava erilaisista virheistä: virheelinen syöte, tiedoston lukemisen tai kirjoittamisen epäonnistuminen, tietokantayhteyden katkeaminen Käyttäjälle virheilmoitus selvällä kielellä ja esimerkiksi toimenpidesuositukset Sovelluksen toiminnallisuuden toteuttaminen periaatteella Toimii PC:llä, mun PC:llä ei useinkaan ole järkevää, ei ainakaan verkkopalveluiden yhteydessä 7307010 Hypermedian ohjelmointi (kevät 2005) 61

Yhteenveto Verkkopalvelun (yleisesti hypermediasovelluksen) toteutuksessa on otettava huomioon paljon erilaisia asioita Dokumentoidun suunnittelun merkitys korostuu Perinteisen vesiputousmallin mukaisen prosessin sijaan on usein perusteltua käyttää iteraviisia suunnittelu- ja toteutusmenetelmiä: prototypointi tai RAD Suunnittelutyössä ja valmiin sovelluksen arvioinnissa kannattaa käyttää apuna erilaisia heuristiikkoja ja muistilistoja Avaintekijä sovelluksen toteutuksen laadun edistämisessä on modulaarinen suunnittelu. Asia kannattaa pyrkiä ottamaan huomioon jo harjoitustyön toteutuksessa Suunnittelumallien (design patterns) ja sovelluskehysten (application framework) avulla voidaan entisestään tehostaa toteutustyötä. Molempiin palataan vielä kurssin kuluessa Uuden sukupolven menetelmien (Agile: Extreme Programming yms.) hyödyntäminen on ehdottomasti selvitystyön arvoinen vaihtoehto 7307010 Hypermedian ohjelmointi (kevät 2005) 62