Ohjelmistotekniikka: Luento 7 Jouni Lappalainen Luku 12: Mallipohjainen (pattern-based) suunnittelu suunnittelumallit malliperustainen suunnittelu arkkitehtuurimallit käyttöliittymän suunnittelumallit kehykset Luku 13: Web-sovelluksen suunnittelu laatutekijät suunnittelun tavoitteet käyttöliittymän suunnittelu, graafinen suunnittelu sisällön suunnittelu, arkkitehtuurin suunnittelu ja navigoinnin suunnittelu hypermedia suunnittelumallit ja OOHD menetelmä 1
Soveltuvat lait ja pohdiskelun aiheita 1. Suunnittelumallien käyttö johtaa nopeampaan ja parempaan ylläpitoon / hyp_no 4, Gamma 1995 2
Pohdiskelun aiheita Fowler esittelee oheisessa artikkelissa XP-menetelmän tuomia muutoksia suunnitteluprosessiin. Miten esim. YAGNI periaate sopii XP-menetelmään? Miten refaktorointi ja YAGNI sopivat yhteen? Miten suunnittelumalleja (design pattern) tulisi käyttää XP-menetelmän mukaisessa kehittämisessä? Mitä ohjeita Fowler antaa UML kuvausten käyttämiselle XP-menetelmän yhteydessä? Fowler M., Is Design Dead? (http://martinfowler.com/articles/ designdead.html)
Pohdiskelun aiheita Hahmottele (voit piirrellä paperille kynällä) UWE navigointikaaviolla (esitelty luennoilla, materiaalia löytyy http://uwe.pst.ifi.lmu.de) WebOodin käytön jokin toiminta, esimerkiksi listaus suorituksista. Kuvaa kaikki vaiheet TOL:n pääsivulta lähtien. Olet suunnittelemassa nettikauppa.com nimistä tietotekniikka/viihde-elektroniikkakauppaa webiin. Mieti miten toteutat Olsinan ja Fitzpatrickin laatutekijät sovellukseesi.
Suunnittelumallin käsite Cristopher Alexander et al.: A Pattern Language, 1977 Cristopher Alexander: The Timeless Way of Building, 1979 Alkujaan talonrakennuksen arkkitehtuuristen ratkaisujen tueksi. esim. millainen kattoratkaisu varjostaa vähiten talon pohjoispuolen pihaa Määritellään: Jokainen malli määrittelee ongelman, joka esiintyy uudelleen ja uudelleen ympäristössämme ja sitten ydinratkaisun siihen, niin että sitä voidaan voidaan soveltaa miljoonia kertoja tekemättä kuitenkaan koskaan samaa ratkaisua kahdesti.» Alexander 1977 Erityisen hyödyllinen käsite myös ohjelmistotuotannossa 5
Suunnittelumallin ominaisuudet Ohjelmistoja koskevat suunnittelumallit julkaistiin jo 1980 luvulla, mutta 1985 julkaistu Design patterns (Gamma et al. 1985) kirja esitteli GoF (Gang of Four) suunnittelumallit Tehokas suunnittelumalli / Coplien 2005 ratkaisee ongelman toimii käytännössä ratkaisu ei ole ilmeinen vaan esitetään epäsuorasti kuvaa järjestelmän syvemmän rakenteen toimii ihmiskomponenttina mallin avulla parannetaan ratkaisun esteettisyyttä ja käytettävyyttä 6
Suunnittelumalli (design pattern) Yleinen ratkaisu toistuvasti esiintyvään arkkitehtuuriin/ suunnitteluun liittyvään kontekstisidonnaiseen ongelmaan. Yleinen: ei ole sidottu mihinkään tiettyyn kieleen tai ympäristöön. Kuvataan (puoli)formaalina dokumenttina. Toistuva: ratkaisu yleiseen ongelmaan. Arkkitehtuuri-/suunnittelutaso: voidaan soveltaa arkkitehtuuritasolta yksityiskohtaiseen suunnitteluun. Kontekstisidonnaisuus: konteksti määrittää vaatimuksia. 7
Suunnittelumallien hyödyt Tekevät suunnittelutietouden eksplisiittiseksi ja kaikkien saavutettavaksi. Voidaan hyödyntää järjestelmien dokumentoinnissa. Tuovat ohjelmointikieliä paremmin esiin korkeamman tason rakenteita. Voidaan hyödyntää arkkitehtuurin rakennuspalikoina. Luo yhteisen kielen suunnittelijoille. 8
Suunnittelumallin kuvaus Nimi: tarkoituksena kuvata sekä ongelma, että sen ratkaisu, sen tulisi olla havainnollinen muodostuu osaksi suunnittelusanastoa. Ongelma: kuvataan tilanne, johon suunnittelumallia sovelletaan Ratkaisu: kuvaa suunnittelumalliin liittyvät elementit, niiden keskinäiset suhteet, vastuut ja yhteistyön kuvataan abstrakti ratkaisu, jota on helpompi soveltaa Seuraukset: suunnittelumallin soveltamisen tulokset (hyödyt) ja mahdolliset kompromissit (haitat) 9
Suunnittelumallit (design patterns) Malli esitellään nimen, ongelman, ratkaisun ja seurauksien avulla, mutta voidaan käyttää myös seuraavaa tarkempaa muotoa Name Intent Mitä tekee? Also-known-as Tunnettu myös nimellä Motivation Skenaarioesitys, miten malli ratkaisee ongelman Applicability Milloin mallia voidaan soveltaa? Structure Graafinen esitys mallin luokkarakenteesta Participants Luokkien osallistuminen malliin ja luokkien vastuut Collaborations Miten osallistujat tekevät yhteistyötä? Consequences Miten malli tukee tavoitteiden saavuttamista? Mitä tuloksia saadaan mallin käytöllä? Implementation Mistä vaaroista, ohjeista tai tekniikoista pitäisi tietää mallin käytössä? Sample code Koodiesimerkit kertovat, miten mallin voi toteuttaa Java, C++ kielillä Known uses Esimerkkejä mallin käytöstä in the real life Related patterns Mitkä mallit ovat sidoksissa tähän malliin? 10
GoF suunnittelumallien luokittelu Luontimallit: Luontimallit abstrahoivat olioiden luomisprosessia, minkä avulla järjestelmät voidaan suunnitella riippumattomiksi siitä, miten niiden oliot luodaan. Rakennemallit: Rakennemallit huolehtivat olioiden välisistä suhteista ja siitä miten nämä muodostavat isompia kokonaisuuksia. Rakennemalleja käytetään myös suurten ohjelmistojen tehokkuuden ja muistin käytön optimointiin. Käyttäytymismallit: Käyttäytymismallit huolehtivat algoritmeista ja olioiden välisistä vastuuketjuista. Olioiden ja luokkien määrittelyn lisäksi käyttäytymismallit ottavat kantaa niiden väliseen kommunikaatioon. 11
GoF suunnittelumallien luokittelu Luontimallit: Tehdasmetodi (Factory Method), Abstrakti tehdas (Abstract Factory), Rakentaja (Builder), Prototyyppi (Prototype), Ainokainen (Singeleton) Rakennemallit: Sovitin (Adapter), Silta (Bridge), Kooste (Composite), Kuorruttaja (Decorator), Julkisivu (Facade), Hiutale (Flyweight), Sijainen/Edustaja (Proxy) Käyttäytymismallit: Tulkki (Interpreter). Operaatiorunko (Template Method), Vastuuketju (Chain of Responsibility), Komento (Command), Iteraattori (Iterator), Välittäjä (Mediator), Muistio (Memento), Tarkkailija (Observer), Tila (State), Strategia (Strategy), Vierailija (Visitor) 12
Miten edetään suunnittelumallien käyttöön Shalloway & Trott (2005) esittävät vaiheita 1. pyri ymmärtämään konteksti (big picture), johon ohjelmisto sijoittuu 2. etsi suunnittelumalleja, jotka soveltuvat tälle abstraktiotasolle 3. aloita ohjelmiston rungon suunnittelu, jossa suunnittelumallit ovat mukana 4. mene suunnittelussa tarkemmalle tasolle ja etsi sopivia suunnittelumalleja alemmalla abstraktiotasolla 5. toista askelia 1 4, kunnes suunnittelu on valmis 6. tarkenna suunnitelmaa sovittamalla suunnittelumallit rakennettavaan ohjelmistoon 13
Malliperustainen suunnittelu Arkkitehtuurimallit (architectural patterns) kuvataan ohjelmiston perusrakenne ja määritellään koko järjestelmän kattavia ominaisuuksia esimerkkinä Model-View-Controller (MVC) malli Idiomit / koodausmallit kuvaa tunnetun tavan, miten jokin tehtävä suoritetaan valitulla kielellä Mallikieli (pattern language) tunnetaan useita suunnittelumalleja sovellusalueella ja se miten ne toimivat yhdessä sovellusalueen ongelmien ratkaisuissa Antisuunnittelumalli (antipattern) tavoitteena on tunnistaa annetun kuvauksen perusteella jokin ohjelmiston, projektin tai prosessin rakenteessa oleva perustavanlaatuinen ongelma antisuunnittelumalli esittää korjausehdotuksen tai tavan vähentää ongelman kriittisyyttä 14
Rakennemallit: Composite (Kooste) mallin yleinen muoto Client Component * anoperation() is polymorphically redefined anoperation() addcomponent() removecomponent() getchild() 1 Leaf anoperation() OtherLeaf anoperation() for all c in componentcollection c.anoperation() Composite componentcollection anoperation() addcomponent() removecomponent() getchild() Collection of Component object identifiers (Bennett et al., 2010)" 15
Käyttäytymismallit: Observer (Tarkkailija) Tarkkailija-suunnittelumallissa ajatellaan, että maailma koostuu kahdenlaisista olioista: subjekteista, joita tarkkaillaan, ja tarkkailijoista, jotka tarkkailevat. Kullakin subjektilla voi olla mielivaltaisen monta tarkkailijaa, joiden laatua subjekti ei tunne. Aina, kun subjektin tila muuttuu, se ilmoittaa tästä muutoksesta kaikille tarkkailijoilleen. tarkkailijat reagoivat tähän kukin omalla tavallaan Kun tarkkailija haluaa alkaa tarkkailla tiettyä subjektia, se ilmoittautuu tälle. (Raisamo 2007)" 16
Observer (Tarkkailija) suunnittelumalli (Raisamo 2007)" 17
Observer (Tarkkailija) suunnittelumalli Esimerkkinä käyttöliittymäarkkitehtuuri: Subjektina on itse sovellus tai sen osa ja tarkkailijana tämän näkymä näytöllä. Kun sovelluksen tila muuttuu, kaikille sen näkymille ilmoitetaan muutoksesta. Elementtien ei tarvitse tuntea toisiaan, vaikka ne riippuvatkin toisistaan. Sovelluksen ei tarvitse tuntea näyttöjen tarkempaa laatua eikä toteutustapaa ainoastaan tarkkailijarajapinta (operaatio), jolla muutoksesta ilmoitetaan. (Raisamo 2007)" 18
Observer (Tarkkailija) suunnittelumalli Tämä suunnittelumalli sopii sellaisiin tilanteisiin, joissa toisistaan riippuvat oliot halutaan toteuttaa mahdollisimman riippumattomasti. vaikka subjektin on tunnettava tarkkailijoiden ilmoitusoperaatio (rajapinta), subjekti ei tule riippuvaiseksi tietystä tarkkailijaluokasta. Tarkkailijarajapinta voidaan määritellä kutakin subjektiluokkaa kohden erikseen. Kaikki tarkkailijarajapinnan toteuttavat luokat voivat toimia kyseisen subjektin tarkkailijoina. (Raisamo 2007)" 19
Observer (Tarkkailija) suunnittelumallin sekvenssikaavio (Raisamo 2007)" 20
Esimerkki: Useita näkymiä, automaattinen päivitys 21
Käyttöliittymän suunnittelumallit Käyttöliittymän suunnittelumallit voidaan luokitella malleiksi, jotka tukevat esim. koko käyttöliittymän rakentamista TopLevelNavigation pattern sivun suunnittelua CardStack pattern kyselylomakkeiden käyttö Fill-in-the-Blanks taulukoita SortableTable navigointia EditInPlace» http://time-tripper.com/uipatterns/introduction 22
Suunnittelumallien vaikutukset ohjelmiston laatuun Khom & Gueheneuc (2008) tutkivat suunnittelumallien, erityisesti mallien Abstract Factory, Composite ja Flyweight, vaikutusta kolmeen laatutekijään, uudelleenkäytettävyyteen, ymmärrettävyyteen ja laajennettavuuteen. Tutkimuksen perusteella ei voida sanoa, että suunnittelumallien käyttö aina parantaa laatua, ainakaan näillä laatutekijöillä mitattuna. Tutkimus perustui kyselyyn, jonka tuloksena saatiin vastaukset 20 kokeneelta ohjelmistosuunnittelijalta. Khom & Gueheneuc, An Empirical Study of Design Patterns and Software Quality, 2008 23
Vaikutus laajennettavuuteen Khom & Gueheneuc, An Empirical Study of Design Patterns and Software Quality, 2008 24
Vaikutus uudelleenkäytettävyyteen Khom & Gueheneuc, An Empirical Study of Design Patterns and Software Quality, 2008 25
Vaikutus ymmärrettävyyteen Khom & Gueheneuc, An Empirical Study of Design Patterns and Software Quality, 2008 26
Kehykset (ohjelmistokehys -> sovelluskehys, komponenttikehys) Ohjelmistokehys on kiinteästi toisiinsa liittyvien luokkien ja/tai rajapintojen kokoelma, joka toteuttaa tietyn ohjelmistoperheen perusarkkitehtuurin Ohjelmistokehystä erikoistamalla saadaan sovellus tai komponentti Tällöin käytetään kehyksestä termiä sovelluskehys tai komponenttikehys Sovelluskehys on ohjelmisto, joka sisältää tietyn tyyppisten sovellusten perusratkaisut esim. graafisten käyttöliittymien toteutusta tukeva luokkakirjasto (Microsoftin MFC ja Sunin AWT & Swing) Komponenttikehyksen esimerkkinä Visual Component Framework GUI pohjaisten C++ sovellusten rakentamiseen Windows, (Mac & Linux on tulossa) alustoilla 27
Alustakehitysprosessi (domain engineering) Vaatimusmäärittely Sovellusalueen käsitemalli Muunneltavuusvaatimukset Alustan suunnittelu Tuoterunkoarkkitehtuuri Alustan toteutus Yhteiset vaatimukset Toteutusympäristö Alusta Tuotekehitysprosessi (application engineering) Tuote Tuotekohtainen koodi Vaatimusmäärittely Tuotevaatimukset Tuotteen toteutus Kehystekniikat tarjoavat perustan muunneltavuudelle
Luku 13: Web-sovelluksen suunnittelu Web sovellusten luokittelu ja ominaispiirteet RUP ja XP Web sovelluksen kehittämisessä laatutekijät graafinen suunnittelu, sisällön suunnittelu, arkkitehtuurin suunnittelu ja navigoinnin suunnittelu hypermedia suunnittelumallit ja UWE kuvausmenetelmä 29
Web-sovelluksen suunnitteluaktiviteetit Käyttöliittymän suunnittelu Graafinen suunnittelu Sisällön suunnittelu Navigoinnin suunnittelu Arkkitehtuurisuunnittelu Komponenttisuunnittelu 30
Web-sovellusten luokittelu / Murugesan & Ginige 2005 Toiminnallisuus Tiedottavat Interaktiiviset Transaktiopohjaiset Töiden järjestelyyn suuntautuneet Yhteistyötä tukevat Yhteisöt, markkinapaikat Esimerkkejä Online sanomalehdet, online kirjat, tuoteluettelot, uutiskirjeet Ilmoittautumislomakkeet, räätälöity tiedon esittäminen, pelit Verkkokauppa, verkkopankki, verkossa tapahtuva matkan varaus Verkossa tapahtuva suunnittelu ja aikataulutus, tilan valvonta, toimittajaketjun hallinta Hajautetut kirjoitusjärjestelmät, yhteissuunnittelua tukevat työkalut Keskusteluryhmät, verkkomarkkinat, sähköiset kauppapaikat
Web sovelluksen ominaispiirteet Verkosta riippuvuus (verkkointensiivisyys) sovellus elää verkossa ja palvelee hyvin hajanaisen asiakaskunnan tarpeita Samanaikaisuus suuret käyttäjämäärät käyttävät sovellusta samaan aikaan, käyttötavat voivat poiketa paljonkin Ennustamaton kuormitus käyttäjämäärät voivat vaihdella huomattavasti eri päivinä Suorituskyky vasteajan täytyy olla kohtuullinen, jotta käyttäjä on tyytyväinen 32
Web sovelluksen ominaispiirteet Palveluaste (availability) vaikka 100 % palveluastetta ei saavuteta, suositun sovelluksen käyttäjät vaativat 24/7/365 palvelua Tietoa käyttäjälle sovelluksen ensisijainen tarkoitus on hypermedian keinoin tarjota tietoa eri esitysmuodoissa Sisällön tärkeys sisällön laatu ja esitystapa tärkeimmät sovelluksen laatutekijät Jatkuva evoluuutio Web sovellukset kehittyvät jatkuvasti, eivät suunnitelluin julkaisuin, kuten perinteiset 33
Web sovelluksen ominaispiirteet Välittömyys (kehittämisnopeus) Web sovellusten kehittämisaika muutamia päiviä/viikkoja Varmuus sovelluksen käytön oltava turvallista käyttäjän kannalta Esteettisyys teknisen suunnittelun lisäksi tarvitaan myös ulkonäön suunnittelua 34
RUP & XP Web sovelluksen kehittämisessä julkaisu ohjelmiston uusi osa Hyväksymistesti Asiakas käyttää & arvioi Jatkuva integrointi Koodaus Komponenttitesti TDD Koodin yhteisomistus Pienet julkaisut toimitus rakentaminen refaktorointi kommunikointi Asiakkaan läsnäolo mallintaminen Liiketoiminta-analyysi - sovelluksen konteksti - sidosryhmien tunnistus - integrointi muihin järjestelmiin Vaatimusten keräys suunnittelu Projektisuunnitelma Metafora Suunnittelupeli Analyysimalli - sisältö - interaktio - toiminta - konfiguraatio Suunnittelumalli - sisältö - arkkitehtuuri - navigointi - käyttöliittymä - komponentit
Web sovelluksen rakentaminen - parhaat käytänteet Käytä aikaa liiketoimintatarpeiden ja tuotetarpeiden ymmärtämiseen, vaikka yksityiskohdat voivat vielä muuttua Kuvaa käyttäjien vuorovaikutus skenaarioilla Tee projektisuunnitelma, vaikka kevytkin Käytä aikaa suunnitteluun, mitä aiot rakentaa Katselmoi mallit niiden yhdenmukaisuuden ja laadun kannalta Käytä sellaisia työkaluja ja teknologiaa, jotka mahdollistavat mahdollisimman laajan uudelleenkäytön Tee riittävän laajat testisuunnitelmat ja testit ja suorita ne ennen julkaisua 36
Huonot käytänteet We have a great idea, so let s begin building the WebApp - now ja miten pitäisi tehdä: Käytä muutamia tunteja/päiviä kuvataksesi sovelluksen liiketoimintaa, ja varmista että rahoittajat ja käyttäjät hyväksyvät sen Stuff will change constantly, so there s no point in trying to understand WebApp requirements (never write anything down) ja miten pitäisi tehdä: Vaikka vaatimukset muuttuvat, tiedon keruu sanallisesti on kevyt vaihtoehto ja vähentää turhia muutoksia 37
Huonot käytänteet Developers whose dominant experience has been in traditional software development can develop WebApps immediately. No new training is required. ja miten pitäisi tehdä: Web sovellukset vaativat erityisosaamista, johon tarvitaan harjoittelua Be bureaucratic ja miten pitäisi tehdä: Suosi ketteriä prosesseja, jotka hyödyntävät tiimin valmiuksia. Jos metriikkatietoa tarvitaan, toteuta se niin kevyesti kun mahdollista Testing? Why bother? ja miten pitäisi tehdä: Jos loppukäyttäjät joutuvat testaajiksi, he helposti luopuvat sovelluksen käytöstä 38
Web-sovellusten vaatimukset ja keinot niiden täyttämiseksi / Murugesan & Ginige 2005 yhtenäinen ulkomuoto ja toimintatapa tiedon yhdenmukaisuus läpi järjestelmän tiedon helppo päivitys ja ylläpito uusien Web sivujen helppo lisäys keskitetty hallinto mekanismit laadun ja tiedon relevanttisuuden valvontaan hakukoneita suosiva rakenne sivujen luonti mallisivujen (template & style) avulla talletetaan tieto vain yhteen paikkaan, josta se haetaan tarvittaessa tiedon muutokset tehdään taustalla olevaan tietovarastoon navigointilinkkien dynaaminen generointi monitasoinen käyttäjien hallinta, joka tarjoaa erityispalveluja tietosisällöstä ja varastosta vastaaville metadatan käyttö Web-sivuille; Webrobottien käyttö keskeisen tiedon keruuseen ja laadun valvontaan meta-tagien käyttö ja hakukoneille rekisteröinti
Laatutekijöiden yhteys ei-toiminnallisiin vaatimuksiin Ei-toiminnalliset vaatimukset Tuotevaatimukset Yrityskohtaiset vaatimukset Ulkopuoliset vaatimukset Käytettävyyteen liittyvät Toiminnallisuuteen liittyvät Luotettavuuteen liittyvät Tehokkuuteen liittyvät Ylläpidettävyyteen liittyvät Siirrettävyyteen liittyvät ymmärrettävyys toimivuus analysoitavuus muutettavuus opittavuus viehättävyys vakaus testattavuus
Web-sovellusten laatu Kun Web-sovellukset ovat tulleet jokapäiväiseen elämään, niiltä vaaditaan luotettavuutta, suorituskykyä ja turvallisuutta Web-sovellusten laatu arvioidaan (Murugesan & Ginige 2005) skaalautuvuudella luotettavuudella palveluasteella ylläpidettävyydellä käytettävyydellä turvallisuudella (Dustin, Rashka & McDiarmid 2002) toiminnallisuudella turvallisuudella & yksityisyydellä suorituskyvyllä & skaalautuvuudella yhteensopivuudella käytettävyydellä
Olsina et al. 1999 Käytettävyys Sivuston ymmärrettävyys On-line palaute ja opastus Käyttöliittymän laatu Erityispiirteet Toiminnallisuus Hakujen tehokkuus Navigointi- ja selausominaisuudet Sovellusalueen erityisominaisuudet Web-sovelluksen laatu Luotettavuus Linkkien virheetön käsittely Virheistä toipuminen Käyttäjän antaman tiedon validointi Tehokkuus Vasteaika Sivun luonti Grafiikan lataus Ylläpidettävyys Korjauksen helppous Sovitettavuus Laajennettavuus (vain siirrettävyys laatuominaisuus puuttuu ISO/IEC 9126 malliin verrattuna) 42
näkyvyys jäljitettävyys haettavuus saatavuus kuinka hyvin sivu löytyy latautumisnopeus sivulle pääsyn helppous ymmärrettävyys luettavuus kuuluvuus käsitettävyys oikea & ajanmukainen uskottavuus viehättävyys erilaistaminen eheys paikkansapitävyys navigoitavuus vuorovaikutteisuus miellyttävyys spesialiteetti identiteetti oikeellisuus käypäisyys käyttäjän onnistuminen pyrkimys paras alallaan tarjotun tuotteen esilletulo Verkkosivujen lisälaatutekijät / Fitzpatrick 2000
Graafinen (esteettinen) suunnittelu Layoutin suunnittelun ohjeita älä pelkää tyhjää tilaa korosta sisältöä, siksi käyttäjä on sivulla (80% sisältöä, 20% muuta) järjestä sivun elementit ylä-vasemmalta ala-oikealle, käyttäjät lukevat sivua kuten kirjaa ryhmittele navigointi, sisältö ja toiminta sivulla, ihmiset etsivät malleja älä laajenna esitystäsi vierityspalkeilla, tarvittaessa vähennä asiaa tai käytä useampia sivuja suunnittele layout resoluution ja selaimen ikkunakoon mukaan, käytä esitettäville asioille prosenttiarvoja kiinteän koon sijaan 44
Arkkitehtuurin suunnittelu Sisällön arkkitehtuuri miten sisältöä kuvaavat oliot (tai olioiden kokoelma, kuten Web sivu) on rakennettu esitystä ja navigointia varten? lineaarinen rakenne: peräkkäinen, mutta voi sisältää myös vaihtoehtoisia polkuja (kysytään ensin tietoja) ritilä/ristikko (grid): jos sisällöstä voidaan tunnistaa ristikko-/ matriisirakenne (esim. kauppapaikka) hierarkia: yleisin, linkitys puumaisesti ja saman tason välillä verkko: linkitys lähes kaikkien komponenttien välillä Sovelluksen arkkitehtuuri miten tuetaan vuorovaikutusta, navigointia ja sisällön esitystä esim. MVC suunnittelumallia voi käyttää Web-sovelluksen rakentamisessa käyttöliittymän, toiminnan ja tiedon erotteluun 45
Navigoinnin suunnittelu Jokainen käyttäjä käyttää sovellusta eri tavalla > navigoinnille erilaisia tarpeita Käyttäjän vuorovaikutus sovelluksen kanssa toteutetaan navigointiyksiköillä (navigation semantic unit, NSU) NSU tehdään jokaiselle käyttötapaukselle NSU kertoo, miten toimija etenee (ways of navigation) NSU koostuu solmuista (navigation node, NN) ja niiden välisistä linkeistä linkki 12 NN 2 linkki 24 NN 1 NN 4 linkki 13 NN 3 linkki 34 46
Yhteinen käsitteellinen malli, joka kuvaa sovelluksen logiikan NN 1 linkki 12 NN 2 linkki 24 NN 4 linkki 13 NN 3 linkki 34 NN 2 linkki 24 NN 1 linkki 13 linkki 14 NN 3 linkki 34 NN 4 Web-sovellukset, jotka on toteutettu yhteisen mallin eri näkyminä linkki 23 NN 3 NN 4 linkki 34 Käyttöliittymäoliot esittävät navigointisolmut eri esityslaitteilla Kolmitasoinen suunnitteluarkkitehtuuri / Jacyntho, Schwabe, Rossi 2002
NSU:n luonti Käyttötapaus: Valitse SafeHome järjestelmän komponentit Web sovellus suosittelee tuotteen komponentteja (kuten ohjauspaneelit, anturit, kamerat) ja muita tarvikkeita (kuten ohjausohjelmisto) jokaiseen huoneeseen tai tilaan. Jos pyydän vaihtoehtoisia ratkaisuja, Web-sovellus tuottaa ne. Voin myös katsella komponenttien ja niiden koosteen hintatietoja. Web-sovellus tuottaa valitsemilleni komponenteille kokonaislaskun. <<navigointilinkki>> kysy vaihtoehto <<navigointilinkki>> valitse huone Huone <<navigointilinkki>> katso KokonaisLaskua <<navigointilinkki>> suosittele komponentit <<navigointilinkki>> <<navigointilinkki>> paluu huoneeseen hanki TuoteKomponentti TuoteKomponentti <<navigointilinkki>> näytä TuoteKomponentti <<navigointilinkki>> näytä kuvaus KokonaisLasku KompKuvaus <<navigointilinkki>> hanki TuoteKomponentti MarkkinointiKuvaus Kaavio TekninenKuvaus Valokuva Video 48
Käsitteellinen kaavio (osa) SafeHomeAssured.com kysytään suositeltavaa komponenttia TuoteKomponentti asiakas valitsee komponentin Huone huonenimi koko ikkunat ovet osanumero osanimi osatyyppi kuvaus hinta luouusiosa() annakuvaus() annateknmäär() Anturi Kamera Säädintaulu Ohjelmisto KokonaisLasku tunniste materiaalilista osienmäärä kokonaishinta lisääalkio() tuhoaalkio() editoialkio() nimi() laskehinta() asiakas jatkaa komponenttien valintaa Tilaus tilausnro asiakasinfo KokonaisLasku lähetysinfo laskutusinfo asiakas pyytää toimituksen OsaLasku määrä osanro osanimi osatyyppi hinta lisäälistaan() tuhoalistasta() 49
Hypermedia-suunnittelumallit Web-sovelluksiin räätälöityjä Arkkitehtuurimallit sisällön ja sovelluksen arkkitehtuurin sunnitteluun (esim. Java Blueprints, java.sun.com/blueprints) Komponentin rakentamismallit suositeltuja menetelmiä, miten kooste rakennetaan Navigointimallit avustavat NSU:n ja koko navigointivuon suunnittelussa Esitysmallit avustavat esim. sovelluksen käytettävyyden parantamisessa Käyttäytymis/käyttöliittymämallit kuinka parhaiten esitetään käyttäjälle esim. tietyn toiminnan seuraukset, linkin määränpää,... 50
1993 1994 HDM 1995 RMM EORM 1996 OOHDM 1997 1998 1999 2000 2001 WebML UWE 2002 WUML 2003 OOH 2004 2005 2006 2007 WebSA WebRE NDT HDM = Hypermedia Design Model RMM = Relation Management Method EORM = Enhanced Object Relationship Methodology OOHDM = Object-Oriented Hypermedia Design Method UWE = UML-Based Web Engineering WebML = Web Modeling Language NDT = Navigational Development Techniques WebSA = Web Software Architecure WebRE = Metamodel for Web Requirements = navigointiluokat käytössä Web metodologiat / Escalona & Aragon, IEEE Transactions on SE, 2008
UWE = UML-Based Web Engineering http://uwe.pst.ifi.lmu.de/index.html
navigationclass Hypertekstisolmu, jossa käyttäjä käy selailun aikana navigationlink Hyperlinkki, jonka avulla päästään lähtösolmusta kohdesolmuun 53
index Käytetään navigointilinkeille, jos assosiaatiossa kertautuminen > 1 menu Käytetään navigointiluokille, jos lähteviä assosiaatioita > 1 query Käytetään navigointiluokan olion valintaan 54
{ishome} Sovelluksen alkusolmu (ei tulevia linkkejä) {islandmark} Solmuun voidaan tulla mistä tahansa solmusta (kaikissa muissa solmuissa on linkki tänne) 55
http://uwe.pst.ifi.lmu.de/index.html
http://uwe.pst.ifi.lmu.de/index.html 59
Soveltuvat lait ja pohdiskelun aiheita 1. Suunnittelumallien käyttö johtaa nopeampaan ja parempaan ylläpitoon / hyp_no 4, Gamma 1995 Jos ylläpito on sidoksissa esim. tekijöihin laajennettavuus ja ymmärrettävyys, sivujen 23 ja 25 tulokset eivät vahvista hypoteesia. 60
Pohdiskelun aiheita Fowler esittelee oheisessa artikkelissa XP-menetelmän tuomia muutoksia suunnitteluprosessiin. Miten esim. YAGNI periaate sopii XP-menetelmään? Miten refaktorointi ja YAGNI sopivat yhteen? Miten suunnittelumalleja (design pattern) tulisi käyttää XP-menetelmän mukaisessa kehittämisessä? Mitä ohjeita Fowler antaa UML kuvausten käyttämiselle XP-menetelmän yhteydessä? Fowler M., Is Design Dead? (http://martinfowler.com/articles/ designdead.html)
Pohdiskelun aiheita Hahmottele (voit piirrellä paperille kynällä) UWE navigointikaaviolla (esitelty luennoilla, materiaalia löytyy http://uwe.pst.ifi.lmu.de/index.html) WebOodin käytön jokin toiminta, esimerkiksi listaus suorituksista. Kuvaa kaikki vaiheet TOL:n pääsivulta lähtien. Olet suunnittelemassa nettikauppa.com nimistä tietotekniikka/viihde-elektroniikkakauppaa webiin. Mieti miten toteutat Olsinan ja Fitzpatrickin laatutekijät sovellukseesi.