Noora Jokinen, K8241
Suvi Jyläskoski, K8805
1.12.2017

Yleiskuvaus

Harjoitustyömme on valkoviinien tietoja sisältävä sivu, jossa käyttäjä voi valita viinin etusivun satunnaisista ehdotuksista tai hakemalla viinihaun kautta jotain tiettyä viiniä. Tiedoissa on tallennettuja, jo meille tuttuja, sekä vielä kokeilemattomia viinejä. Sivusto voisikin palvella tekijöitään viinikatalogina. Sivusto näyttää myös Suomen kaikkien Alko-myymälöiden sijainnin ja aukioloaikatiedot. Harjoitustyön idea lähti viiniharrastuksestamme, josta olemme syksyn aikana kuulleet yhtä sun toista kommenttia. Työ on siis toteutettu yleisön pyynnöstä.

Käytetyt tekniikat

Javascript ja jQuery

Käytimme työssämme Javascriptiä ja jQuery -kirjastoa.

Json + ajax

Alkot.json on json-tiedosto, joka on melkein identtinen Alkon omilta sivuilta löytyvään jsoniin. Poistimme kuitenkin alkuperäisestä jsonista Alkon noutopisteet, koska halusimme sivullemme vain oikeat Alkon myymälät.
Ajax-toiminnolla haemme alkot.jsonista Alkojen sijainnit, nimet, osoitteet, puhelinnumerot, ja aukioloajat. Tiedostosta haetaan tiedot kartan markkereihin. Tämän toiminnon koodaamiseen otimme mallia tunneilla tehdystä Golfkenttä-harjoituksesta.

Javascript-objekti

Valitsimme viineillemme mieluummin javascript-objektin, koska lisäämme ja valitsemme viinit itse. Suunnittelimme aluksi hakevamme viinien tiedot alkon sivuilta, mutta emme löytäneet sivuilta valmista tiedostoa, josta tietoja olisi voinut hakea. Aluksi viinit.js -tiedosto oli json-tiedosto, mutta päätimme työn edetessä vaihtaa tiedostomuodon pelkäksi js-taulukoksi. Javascript-objektia on helpompaa kutsua ja käyttää, koska ei tarvita ajax-toimintoa. Tämän valinnan, ettemme käytä viineille json + ajax -toimintoa, teimme kaverimme suosituksesta, ja jälkeenpäin ajatellen se helpotti työtämme monessa kohtaa.
Viinit.js -objektissa on taulukoituna 26 eri viiniä, niiden nimet, kuvat, maat, hinnat, kuvaukset ja arviot. Kaikki ominaisuudet, lukuunottamatta arviota ja makeusasetta on kopioitu Alkon sivuilta. Makeusasteelle loimme numeroarvon, jotta haku-toiminnolla viinejä voisi hakea makeusasteen perusteella.

Toiminnot

Etusivu ja etsi viini

Koko sivusto latautuu yhdelle html-sivulle, josta Etusivu- ja Etsi viini-painikkeet joko piilottavat tai näyttävät divejä ja niiden tietoja. Etsi viini -painike suorittaa myös showAllWines-funktio, joka hakee viinit.js:n taulukosta kaikkien viinien tiedot.

Kartta

Aloitimme työmme tällä osuudella. Halusimme sivullemme kartan, jossa näkyy kaikki Suomen Alko-myymälät. Kartta saatiin sivulle melko helposti, katsomalla ohjeita tunnilla tehdystä karttasovelluksista.
Alkot ja niiden sijainnit löytyivät näppärästi Alkon omilta sivuilta, json-tiedostosta. Kopioimme json-tiedoston ja karsimme siitä pois Alkon noutopisteet. Tähän työvaiheeseen meni aikaa noin 4 tuntia.

Haku

Halusimme, että viinejä pystyy hakemaan muutamilla eri ehdoilla. Nimellä, kuivuusasteella ja hinnalla. Aluksi kokeilimme saada hakutulokset näkymään listana.(Listakoodi on jätetty search.js-sivun kommentteihin)
- Nimellä
Nimellä hakeminen oli hakutoiminnoista ehdottomasti haastavin toteuttaa, ja se veikin aikaa noin 6 tuntia. Nimellä hakeminen toimii niin, että searchWineByName -funktio kuuntelee input kenttää ja vertaa niitä viinien otsikoihin, piilottaen muut viinit. SearchWineByName kuuntelee input kenttää kokoajan, eli kun käytäjä syöttää yhdenkin kirjaimen siihen, se rajaa viinitulostetta.
- Kuivuusasteella
Kuivuusasteella hakeminen toteutettiin checkboxeilla, joista jokaisella on oma numeroarvonsa. Jos checkboxiin merkitty numeroarvo on sama kuin viinin makeusaste, sivu näyttää viinin hakutuloksissa. Tämä haku toimii nappulalla, eli käyttäjä voi valita useita eri makeusasteita samaan aikaan. - Hinnalla
Hintahaku on toteutettu sliderilla, jota liikuttamalla käyttäjä valitsee hinnalle ylärajan. Javascript-koodissa funktio ottaa sliderin outputin arvon ja vertaa sitä taulukossa olevien hintojen arvoihin. Jos hinta on pienempi tai yhtä suuri kuin sliderin arvo, haku näyttää viinin hakutuloksissa.

Kaikkien viinien näyttäminen

Klikattaessa Etsi viini -linkkiä sivusto hakee showAllWines -funktiolla listan kaikista viinit.js -taulukkoon lisätyistä viineistä ja näyttää viinit listana. Samaa funktiota, eri nimellä tosin, on hyödynnetty satunnaisen viinin näyttämisessä. ShowAllWines-funktio on tehty taloharjoituksessa käytettyä funktiota matkien. Eli funktio luo taulukon ominaisuuksista elementtejä ja sijoittaa ne index.html -sivulla olevaan diviin. Funktio luo oman divin viinin tiedoille ja kuvalle ja vielä lisädivin, jonka sisälle nämä divit tulevat. Tämän funtion osalta haasteellisinta oli saada div muodostumaan järkevän näköiseksi.

Satunnainen viini

Sivuston etusivulla on nelikenttä, johon sivuston avautuessa latautuu satunnaisesti neljän viinit.js:n taulukossa olevan viinin tiedot WinesList-funktiolla. Funktiossa on hyödynnetty showAllWines-funktiota. Tämän jälkeen RandomWine-funktio arpoo neljä kertaa Math.floor ja Math-random-toiminnoilla satunnaisen luvun väliltä 0-26. Arvottua lukua verrataan WinesList-funktiossa luotujen divien id-numeroon. Jos numero on sama, viinin tiedot näkyvät satunnaiset viinit -nelikentässä. Funktio ei kuitenkaan näytä samaa viiniä kahdessa nelikentässä, mistä johtuen joillain sivun latauskerroilla näkyy neljän kentän sijaan vain kolme kenttää.

Lisätoiminnot

Eli toiminnot, jotka olisi toteutettu, jos olisi jäänyt aikaa.

Viinin lisääminen

Jätimme tämän toiminnon heti alkuun ”ehkä” listalle, koska tiesimme, että yksinkertaisiltakin kuulostavat hakutoiminnot saattavat syödä yllättävän paljon aikaa.
Jos olisimme rakentaneet tämänkin toiminnon, olisi sillä pystynyt lisäämään maisteltuja viinejä ja antamaan niille arvioita.

Hakuehtojen yhdistäminen

Jos lähtisimme parantamaan työtämme, keskittyisimme ensimmäisenä tähän pieneen epäkohtaan. Kaikki hakutoiminnot toimivat erikseen moitteettomasti, mutta niitä ei pysty yhdistelemään.
Eli jos haetaan ensimmäisenä nimellä, ja kirjoitetaan hakukenttään ”j”, se rajaa kaikki viinit, joissa on j-kirjain. Mutta jos halutaan kaikki kuivat viini, joissa on ”j”, se ei onnistu. Haussa toimii aina viimeisimmäksi muutettu osuus, eli jos haetaan ensin alle 8 euron hintaisia viinejä, ja sitten makeita viinejä, on hakutuloksena vain makeat viinit, eikä alle 8 euron makeat viinit.

Satunnaisen viinin arpomisen parantaminen

Tällä hetkellä randomWine -funktio pystyy arpomaan samalla kierroksella saman viinin kahteen kertaan. Tämä osoittautuu niin, että sivulla näkyy esimerkiksi vain 3 viiniä. Jatkototeutuksen kannalta olisi hyvä, jos tälläinen tuplasti arpominen pystyttäisiin estämään.

Toiminnot, joista luovuttiin

Viinin otsikkoa klikatessa, ilmestyisi viini nimen alle viinin muut tiedot. Tämä ominaisuus kuitenkin poistettiin, koska viinejä olisi vaikeampi vertailla keskenään samaan aikaan. Totesimme yksinkertaisemmaksi vaihtoehdoksi viinien listauksen, jossa näkyy kerralla viinin kaikki tiedot. Tähänkin aloitettu koodi löytyy edelleen kommentoituna search.js -tiedoston lopusta.

Ajan käyttö ja työnjako

Olemme paria tuntia lukuunottamatta tehneet työtä itsenäisesti. Maps.js ja viinit.js -tiedostot on tehty yhdessä tunneilla. Samoin satunnainen viinihaku.
Muiden osalta työnjako oli seuraava:
Noora: Viini haku nimellä (searchWineByName), viinin haku kuivuusasteella (searchWineByTaste), sivun html-pohja ja viimeistely.
Suvi: Kaikkien viinien haku, slider-toiminto, hakutulosteiden ja satunnaisen viinin ulkoasu.

Itsearvio

Mielestämme onnistuimme taitotasoomme nähden hyvin ja kehitystäkin tapahtui projektin aikana. Vaikeuksia oli paikoittain, mutta mihinkään kohtaan ei jääty pitkäksi aikaa jumiin, vaan kysyimme herkästi apua opettajalta ja luokkatovereilta. Kokonaisuudessaan työhön olisi voinut käyttää enemmänkin aikaa, mutta olemme tyytyväisiä työhömme ja näillä resursseilla saavutettuihin onnistumisiin.

Noora: 3
Suvi: 3