Web-sovellusohjelmoinnin harjoitustyö
4
Software Systems
Advanced studies
Harjoitustyössä rakennetaan laajempi palveluperustainen web-sovellus kurssin web-sovellusohjelmointi hengessä. Sovelluksessa on oleellista sen arkkitehtuuri ja ohjelman rakenne. Sovelluksen käyttämät palvelut, esimerkiksi käyttäjän autentikaatio, voivat olla kolmannen osapuolen tarjoamia palveluita, sekä itse toteutettavia erillisiä esimerkiksi REST-rajapinnan avulla toimivia komponentteja.
| Year | Semester | Date | Period | Language | In charge |
|---|---|---|---|---|---|
| 2012 | spring | 12.03-27.04. | 4-4 | Finnish | Arto Hellas |
Kurssin todellinen vaatimustaso riippuu työstä. Aineopintotason työ merkitään aineopintona, syventävä työ syventävänä. Aloitustilaisuus pidetään luokassa C221 tiistaina 6.3. klo 14:15.
General
Harjoitustyön aikana kukin osallistuja toteuttaa oman web-sovellusprojektin. Kurssin esitietovaatimuksena on kurssi "web-sovellusohjelmointi", kurssin "digitaalisen median tekniikat" käymisestä on hyötyä. Harjoitustyössä voidaan käyttää myös muita sovelluskehyksiä kuin Springiä, esimerkiksi Djangoa tai Play Frameworkia.
Harjoitustyö toteutetaan omatoimisesti, varsinaisia ohjausaikoja ei järjestetä viikoittaisen palaverin lisäksi.
Lisätty 6.3.2012:
- Tietoa kurssin käytännöistä ja ohjeet projektin aloittamiseen ovat saatavilla täällä: wad-harjoitustyo-intro-kalvot.pdf
- Kurssilla on IRC-kanava IRCnetissä: #wadharkka
Lisätty 19.3.2012:
- Viikkopalaverit tiistaisin 12-14 Linkki-luokassa C221 ja keskiviikkoisin 14-16 tietokoneluokassa B221. Voit valita kummassa viikoittaisessa palaverissa olet paikalla. Palaverit eivät ole pakollisia - tule jos haluat keskustella projektin etenemisestä/ongelmista.
Completing the course
Harjoitustyö merkitään joko aineopintoihin tai syventäviin opintoihin aiheen vaikeuden perusteella.
Kurssilla toteutettava projekti deployataan Herokuun, lähdekoodit tulee pitää GitHubissa. Arvostelussa vaikuttaa ohjelman rakenne (MVC, Kerrosarkkitehtuuri) sekä testien kattavuus. Kurssilla joutuu ja pääsee tekemään omatoimista tutustumista selainohjelmointiin (esim JQuery, Backbone.js) ja käyttöliittymän toteutukseen (esim JQuery UI, Twitter Bootstrap).
Osallistujat pitävät viikoittaisen palaverin, jossa keskustellaan projektin etenemisestä. Palaverissa käydään läpi viikon aikana esiin tulleita pulmia, sekä saadaan viikoittainen selainohjelmointivinkki.
Tärkeää projektissa on että lopputuloksena on toimiva sovellus. Sovelluksen koodin ja testien tulee toimia projektin dokumentaatíona.
Literature and material
Esimerkkiaiheita, syventävät opinnot:
Uutismashup
Sovellus tarjoaa käyttäjälle kokoelman eri uutissivustojen sisällöstä. Käyttäjät voivat itse määritellä uutissivustoja ja avainsanoja, joista he ovat kiinnostuneet. Käyttäjät autentikoituvat esimerkiksi OpenID tai OAuth-palvelua käyttäen. Oleellista sovelluksessa on helppokäyttöisyys, käyttöliittymä toteutetaan olemassaolevaa käyttöliittymäkomponenttikirjastoa (esim. Twitter bootstrap tai JQuery UI) hyödyntäen.
Online-tekstieditori
Sovelluksessa toteutetaan Google Docs tyylinen dokumenttieditori. Editorina voi käyttää joko perustekstilomaketta tai kehittyneempää WYSIWYG-editoria (esim. CKEditor tai MarkItUp). Oleellista on käyttäjien ja dokumenttien hallinta. Sovellukseen voi luoda useita käyttäjiä ja dokumentteja. Dokumentin luoja määrittelee dokumentille käyttöoikeudet muille käyttäjille. Dokumenttien samanaikaisen editointi on plussaa. Sovellukseen autentikoidutaan esimerkiksi OpenID tai OAuth-palvelun avulla.
StudentDevs
StudentDevs tarjoaa opiskelijoiden ja ohjelmointitöitä tarjoavien asiakkaiden yhteentuontipalvelun. Asiakkaat lisäävät palveluun projekteja, joista opiskelija voi tehdä tarjouksen. Asiakas valitsee tekijän projektiinsa tarjouksien perusteella.
Palvelu toimii samalla kaksisuuntaisena pisteytyspalveluna, jossa opiskelijat ja asiakkaat keräävät karma-pisteitä, jotka ohjaavat opiskelijoiden valintaa. Sovellus käyttää autentikointiin esimerkiksi OpenID tai OAuth -palvelua, oleellista on myös helppokäyttöisyys ja käyttöliittymän ulkoasu, käyttöliittymä toteutetaan olemassaolevaa käyttöliittymäkomponenttikirjastoa (esim. Twitter bootstrap tai JQuery UI) hyödyntäen.
Oma Aihe
Esimerkkiaiheita, aineopinnot:
Reaaliaikainen chat
Harjoitustyössä toteutetaan reaaliaikainen chat-sovellus. Chatissa on useita keskustelukanavia, joille käyttäjä voi liittyä syöttämällä nimimerkkinsä. Käyttäjä voi myös perustaa uuden keskustelukanavan. Kanava on olemassa niin pitkään kuin keskustelijoita on kanavalla. Olennaista työssä on chat-viestien välittäminen reaaliaikaisesti JavaScriptillä AJAX-push tai AJAX long polling-menetelmällä.
Kuvagalleriapalvelu
Harjoitustyössä toteutetaan kuvagalleriapalvelu, jonne käyttäjä voi rekisteröityä luomalla käyttäjätilin. Käyttäjätilin pääasiallinen tunniste on käyttäjän uniikki nimimerkki. Käyttäjä voi lähettää kuvia palveluun omalle käyttäjätililleen, jolloin kuvat näytetään nimimerkkiin liitetyllä sivulla listauksena. Sovelluksessa on myös mahdollista listata kaikki palvelussa olevat käyttäjät, jolloin käyttäjistä esitetään nimimerkki, sekä käyttäjän valitsema oletuskuva. Listauksesta pääsee tarkastelemaan yksittäisen käyttäjän kaikkia kuvia. Sovelluksessa voi etsiä käyttäjiä nimimerkin perusteella. Kuviin voi liittää tekstimuotoisia kommentteja. Tiedoston lähettämisessä on syytä käyttää HTML5:n tarjoamia ominaisuuksia ja näyttää käyttäjälle tietoa lähetyksen edistymisestä.
Tiedostonjakopalvelu
Harjoitustyössä toteutetaan yksinkertainen tiedostonjakopalvelu. Sovellus toimii siten, että käyttäjä voi lähettää selaimella tiedoston palveluun ja saa vastineeksi uniikin linkin (URL), josta tiedoston saa ladattua. Tiedostosta talletetaan palveluun sisällön lisäksi sen alkuperäinen nimi ja MIME-tyyppi. Keskeytyneitä latauksia täytyy voida jatkaa HTTP Range-pyynnöillä. Olennaista työssä on tiedoston tallettamisen ja latauksen toteuttaminen tehokkaasti ja skaalautuvasti (sisällön streamaus, ei liikaa bufferointia). Lisäksi työssä on tärkeää tarjota käyttäjälle selkeä käyttöliittymä: esim. tiedoston lähettämisessä on syytä käyttää HTML5:n tarjoamia ominaisuuksia ja näyttää käyttäjälle tietoa lähetyksen edistymisestä.
Oma Aihe