Verkkosovellusta kehittämään!

Oleellinen osa ryhmän lopputuotetta on itse verkkosovellus, joka mahdollistaa yksinkertaisten painettujen virtapiirien suunnittelun ja tulostuksen koulutustarkoituksiin. Totesimme, että tällainen sovellus on ainakin näin protoilu mielessä järkevintä toteuttaa asiakaspuolella (eli selaimessa staattisena sisältönä) käyttämällä javascriptiä, HTML5:sta ja CSS:ää. Suunnittelu lähti liikkeelle yksinkertaisen layoutin suunnittelusta eli visiosta siitä, miltä sovelluksen tulisi näyttää. Ensimmäinen suuntaa antava hahmotelma löytyykin jo aiemmasta blogipostauksestamme.

Kun ohjelman ulkonäkö ja peruskäyttöliittymä olivat tiedossa, aloitettiin itse sovelluksen toteutus kirjoittamalla tarvittava html-dokumentti ja siihen liitetty CSS-stylesheet. Lisäksi apuna ulkoasun hiomiseen käytettiin internetistä valmiiksi löytyvää Bootstrap CSS -kirjastoa. Tämä vaihe toteutuksesta oli varmaan yksi hankalimmista, sillä tyylimäärittelyt ja html-elementit käyttäytyvät välillä hyvin ennalta-arvaamattomasti eri selaimilla ja näyttökoilla. Ryhmässä ei myöskään ole paljon ’FrontEnd’-osaajia (nettisivujen ulkoasun ja selainpuolen toiminnallisuuksien suunnittelijoita), mikä tekee tehtävästä haastavan. Tehtävästä kuitenkin selvittiin, vaikka haasteita on edelleen mm. käyttöliittymän skaalautuvuuden kanssa. Saatu lopputulos näyttää tällä hetkellä tältä:

printel

HTML ja CSS eivät kuitenkaan yksinään riitä, vaan jotta kuvan kankaalle voitaisiin piirtää vaikka nuo viivat, tarvitaan lisäksi selaimessa pyörivää javascriptiä, jolla HTML-dokumenttiin voidaan lisätä interaktiivisuutta. Itse sovelluslogiikka on siis toteutettu yksinomaan javascriptillä. Sillä dokumenttiin saadaan lisätty ns. event listenereitä, joilla käyttäjän antamaan syötteeseen (esimerkiksi käyttäjä valitsee haluamansa työkalun vasemmasta palkista klikkaamalla) voidaan reagoida oikealla tavalla. Kun kyseessä on piirto-ohjelma, on sen keskeisessä osassa HTML5:ssa määritelty canvas-elementti, joka tarjoaa monia piirto-ominaisuuksia sekä helpon javascript ohjelmointirajapinnan. Suuri osa sovelluslogiikasta keskittyykin kankaalle erilaisten viivojen piirtämiseen. Sovelluksessa erilaiset kankaalle piirretyt muodot tallennetaan olioina lista-tietorakenteeseen, jolloin kangas on helppo uudelleenpiirtää, mikä mahdollistaa muun muassa piirto-ohjelmista tutut ”undo” ja ”redo” -toiminnot. Muita toiminnallisuuksia sovelluksessa on tällä hetkellä muun muassa valmiin kuvan tuominen kankaalle (Import) sekä oman kuvan tallentaminen (Export) ja tulostaminen (Print). Tuotu kuva voidaan myös asettaa taustaksi, jolloin sitä ei voi muokata sovelluksen piirtotyökaluilla. Tämä on hyödyllistä esimerkiksi silloin, jos opettaja haluaa antaa jonkinlaisen täydennystehtävän oppilaalle, jonka tehtävänä on tehdä annetusta raakileesta toimiva virtapiiri. Tällöin oppilas ei vahingossa sotke annettua raakiletta, jonka ympärille virtapiiritoteutus kuuluisi tehdä.

Monista toiminnallisuuksistaan huolimatta sovellus on vielä kaikkea muuta kuin valmis. Suunnitteilla on vielä itse sovelluksen avainominaisuudet eli valmiit ’presetit’ yksinkertaisille virtapiireille ja komponenteille. Sovelluksen ideana on luoda käsitys elektroniikasta selkeiden virtapiiriesimerkkien avulla, joita voidaan valita oikealta valikosta mahdollisesti drag and drop tyyliin. Nämä helpottavat myös opettajien toimintaa, sillä monella heistäkin käsitys elektroniikasta voi olla hatara eikä omien virtapiiriharjoitusten luonti suju mutkitta. Lisäksi on suunnitteilla, että valmiita komponentteja, kuten vastuksia, on mahdollista lisätä kankaalle samaan tapaan ja lisäksi niille voidaan valita oikeat attribuutit, kuten resistanssi ja dimensiot. Sovellus on saanut lisäksi palautetta karkeasta ulkoasustaan (ulkoasu ei tosin vielä ole ollut kehityksen fokus) ja sitä pyritään kehittämään peruskouluystävällisemmäksi ja kiinnostustaherättävämmäksi esimerkiksi värimaailmaa muuttamalla.

Sovelluksen kehitys on kuitenkin lähtenyt pienistä mutkista huolimatta mallikkaasti käyntiin ja tiimillä on vahva syy uskoa, että esityskelpoinen proto saadaan kurssin aikana valmiiksi. Ei muuta kuin koodaamaan!

 

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *