maanantai 3. maaliskuuta 2014

Android 2: Puhuva puhelin jatkuu

Tämän tunnin tarkoituksena on kehittää eteenpäin edellisen kerran esimerkkiä, eli puhuvaa puhelinta.

Aluksi kokeillaan hyödyntää puhelimen kiihtyvyyssensoria. Avataan "Sensors"-kategoria ja vedetään sieltä "AccelerometerSensor" keskelle valkoista aluetta.


Kyseessä on taas ruudussa näkymätön ominaisuus, joten kuvake ilmestyy alareunaan.


Blocks-puolella klikaataan kiihtyvyysanturia ja vedetään sieltä "When AccelometerSensor1.shaking do"- palikka valkoiselle alustalle.


Kopioidaan aiemmasta napin skriptistä violetti osa ja liitetään se kiihtyvyyssensori-palikan sisään. Vaihdetaan tekstiksi "Älä ravista" tai joku muu vastaava kehote. Kun ohjelma ladataan puhelimeen, se sanoo "Älä ravista" aina, kun puhelinta ravistetaan.


Seuraavaksi tehdään tekstilaatikko, johon voi syöttää tekstin ja nappia painamalla puhelin puhuu sen ääneen. Otetaan User Interface-kategoriasta "Textbox" ja vedetään se taas ruutuun.


Tämä on näkyvä ominaisuus, joten se näkyy myös malliruudussa.


Osat voi sijoittaa myös ruudun keskelle.


Osien järjestystä voi vaihtaa ihan vain tarttumalla niihin hiirellä ja vetämällä ne uusille paikoilleen.


Blocks-puolella valitaan TextBox1


 Etsitään sieltä vihreä palikka, jossa lukee "TextBox1"

 Ole tarkkana, että toisessa valikossa on valittuna "Text", koska muuten sitä ei käsitellä tekstinä

Designerissä valitaan textBox ja Properties-osuudessa voi vaihtaa laatikossa näkyvän tekstin. Idea on, että siinä näkyy joku vihje siitä mitä laatikkoon pitäisi kirjoittaa. Omalla koneellani tuo teksti ei tule näkyviin, mutta yhteydessä oleva puhelimeni näyttää sen samantien.


Nyt puhelin sanoo ravistettaessa "Älä ravista" ja se puhuu nappia painamalla laatikkoon kirjoitetun tekstin. Tämän voi taas pakata .apk-muotoon ja ladata puhelimelle. Tämä esimerkki oli lyhykäisyydessään tässä.

 Omat oppilaani tekivät Android 1 ja 2-tunnit yhden kaksoistunnin aikana. Yhtä lukuunottamatta kaikki saivat appit toimimaan omilla mobiililaitteillaan. Tämän yhden tapauksessa ääntä ei saatu ulos puhelimesta, vaikka appi muuten saatiin asennettua puhelimelle ja se toimi normaalisti toisella laitteella kokeiltuna.

Android-ohjelmointi alkaa: Puhuva puhelin

Oppilaat ovat kovasti kyselleet uusien ohjelmointihaasteiden perään. Osa on ihan innoissaan, osa ei kehtaa valittaa. Tarkoituksenani on näyttää seuraavaksi Android-ohjelmoinnin perusteet ja ohjata innostuneet alkuun, jotta he voivat opiskella itsenäisesti eteenpäin. Valitsin Androidin, koska se on selkeästi suosituin käyttöjärjestelmä oppilaiden puhelimissa ja sen lisäksi MIT tarjoaa appien tekoon hyvin tutun näköisen kehitysohjelman, AppInventorin. Koska oppilaat viettävät suuren osan ajastaan puhelimiensa kanssa, tämä saattaisi innostaa heidät jakamaan tekemiään appeja muillekin ja mahdollisesti saada muitakin innostumaan aiheesta.



Sivulla on valmiita ohjeita englanniksi ja ainakin nyt aluksi keskityn suomentamaan niitä omille tunneilleni soveltuviksi paketeiksi. Vaikka AppInventor on logiikaltaan hyvin samanlainen Scratchin kanssa, se on myös paljon monipuolisempi. Puhelimissa on kiihtyvyysantureita ja paljon kaikkea muuta, jota voidaan käyttää hyväksi ohjelman tekemisessä. En tiedä vielä kuinka oppilaat ottavat tämän omakseen ja kuinka paljon he uskaltavat leikkiä ja harjoitella vapaa-aikanaan. Yritän pitää esimerkit riittävän helppoina ja lyhyinä, jotta jokainen saisi projektinsa valmiiksi aina kaksoistunnin päätteeksi.

AppInventor on selaimessa (pilvessä) toimiva kehitysohjelma, joka näyttää hyvin paljon Scratchiltä. Kirjoitushetkellä se toimii ainakin Firefoxilla ja Chromella. Päästäkseen käsiksi ohjelmaan, täytyy sivulle kirjautua Googletunnuksilla. Kirjautumisen jälkeen omat työt tallentuvat automaattisesti pilveen omien tunnuksien taakse ja ne ovat saatavilla mistä vain ja millä tahansa koneella. Tämä on mainiota, koska oppilaat voivat jatkaa kotonaan koulussa aloittamiaan projekteja, eikä kukaan pääse tuhoamaan toisten töitä koulun koneilta.

Kun palveluun on kirjauduttu, saadaan esiin Tervetuloa-banneri.


 Uusi projekti aloitetaan joko "New Project"-napista tai ylävalikosta Project -> Start new project


Olen luova ja nimeän oman esimerkkini Esimerkiksi.


Nyt saadaan näkyville "Designer"-osuus. Designerin ja varsinaisen ohjelmoinnin, eli "Blocks"-osan, välillä voi kulkea oikeasta yläreunasta. Designerin vasemmassa reunassa ovat erilaiset elementit, joita voi lisätä ruudulle. Keskellä "Viewer" toimii mallina puhelimen ruudulle. "Components" kertoo valitut elementit ja oikean reunan "Properties" näyttää valintamahdollisuudet kulloinkin "Components"-osassa valittuna olevalle komponentille. Tämä kuulostaa huomattavasti monimutkaisemmalta kuin mitä se on. Kärsivällisyyttä, kyllä se tästä.


Appeja voi koekäyttää omalla android-laitteella joko WiFin yli tai USB-kaapelin kautta. Ohjelmassa on myös emulaattori, jolla appeja voi kokeilla. MIT:n suosittelema WiFin käyttö on erittäin helppoa, mikäli WiFi sattuu löytymään. USB-kaapelin käytössä on ilmeisesti jotain ongelmaa, koska sitä kehotetaan käytettäväksi vasta viimeisenä vaihtoehtona. Käytän tässä omaa Sony Xperia Go-puhelintani, joka on jo aikalailla vanhentunut.

Googlen Play-kaupasta löytyy MIT AI2 Companion-ohjelma. Mikäli olet kirjautunut sisään ja sinulla on Android-laite, voit asentaa sen omalle laitteellesi klikkaamalla "Asenna"-nappia. Ohjelma asentuu laitteellesi automaattisesti. Sanomattakin lienee selvää, että tämä on ilmainen.

https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=fi

 Kun ohjelma on asentunut, klikataan ohjelman yläpalkista Connect -> AI Companion


 Klikkaamisen jälkeen tulee näkyviin QR-koodi ja sama koodi kirjainmuodossa.


Nyt pitää löytää puhelimelle/tabletille asennettu AI Companion ja käynnistää se. Tämän jälkeen kuvataan ruudulla näkyvä QR-koodi tai näpytellään kuusikirjaiminen koodi. Jos puhelin on yhdistettynä , laitteiden pitäisi löytää toisensa.




















Kun laitteet ovat löytäneet toisensa, puhelimen/tabletin näytön pitäisi päivittyä sitä mukaa, kun AppInventoriin tehdään muutoksia. Ensimmäisenä laitetaan nappi ruutuun. Laittaminen onnistuu ihan vaan klikkaamalla nappi-tekstiä ja vetämällä se ruudulla näkyvään Android-ruutuun.


"Components"-osassa valitaan nappi, jonka jälkeen sitä pääsee muokkaamaan oikeassa reunassa olevassa "Properties"-osassa.


 Napin tekstiksi voi valita esim "Puhu".


 Tämän jälkeen keskellä olevassa näytössä napin teksti vaihtuu "Puhu"-tekstiksi.


 Noin sekuntia myöhemmin myös omalla puhelimen/tabletin ruudulla olevan napin teksti vaihtuu.



Nappi ei tee vielä mitään, mutta nyt korjataan tuo puute. Oikeassa reunassa on joukko elementtejä, joista valitaan Media-ryhmä.



Media-ryhmästä valitaan "TextToSpeech" ja se vedetään samalla tavalla keskiruutuun. Ruudulle ei tule mitään näkyviin, mutta "TextToSpeech" ilmestyy "Components"-valikkoon ja ruudun alalaitaan "Non-visible Components"-osioon.


Oikeassa reunassa on Blocks-nappi, jota painamalla päästään varsinaiseen koodausikkunaan.


Tämä on nyt se Scratch-tyyppinen osio. Vasemmassa reunassa on värikoodattuja kategorioita, joita klikkaamalla saa näkyviin erilaisia palikoita. Kategoriat on valittu aina näkyviin ja komponenttien määrittelemiin. Aina näkyvät ovat käytännöllisesti katsoen samoja kuin Scratchissä. Komponenttien määrittelemissä kategorioissa on erikoispalikoita, joita tarvitaan ainoastaan kyseisten komponenttien kanssa. Esimerkiksi Button1-valikosta löytyy napin painaminen, napin painaminen pitkään, napin väriin yms liittyviä palikoita. Tutustutaan niihin myöhemmin tarkemmin. Suureen valkoiseen ruutuun rakennetaan varsinaiset scriptit.


Klikkaamalla "Button1"-kohtaa tulee näkyviin siihen liittyvät palikat. Valitaan täältä "When Button1.click do"-palikka ja vedetään se valkoiseen ruutuun. Palikan tehtävä: Kun nappia painetaan ohjelma suorittaa tämän palikan sisällä olevan käskyn.


Seuraavaksi valitaan vasemmasta reunasta "TextToSpeech1"-komponentti ja sieltä "call TextToSpeech1.speak message"-palikka ja vedetään se edellisen palikan sisään. Tämän palikan tehtävä: Muunna jatkona olevan palikan sisältö puheeksi.


 Lopputuloksen pitäisi näyttää tällaiselta. Kuten kuvasta näkyy, violetista puhe-palikasta puuttuu vielä osa.

Siihen voi periaatteessa liittää mitä vain, mutta nyt valitaan siihen oikean reunan "Text"-kategoriasta tyhjä teksti, joka on alla olevassa kuvassa ylimpänä.


Valmis tuotos pitäisi näyttää nyt tällaiselta. 
 Lisätään teksti tyhjään kohtaan. Puhe tulee englantilaisittain korostaen, joten suomenkieliset tekstit muuttuvat lähes tunnistamattomaan muotoon.
Nyt puhelimen/tabletin pitäisi sanoa "Juhuu", kun ruudulla näkyvää nappia painetaan. Omalla puhelimellani tämä vaati jonkin verran kärsivällisyyttä, mutta kyllä se sieltä sitten tuli.

Nyt päätän ohjelman olevan valmis ja haluan siirtää sen omalle puhelimelleni ohjelmaksi muiden joukkoon. Ohjelman voi tallentaa kahdessa eri muodossa, joko .aia- tai .apk-muodossa. .aia on lähdekoodi, joka ei toimi puhelimella ja jonka saa auki vain AppInventorissa. .apk on asennettava paketti, jonka voi esimerkiksi lähettää sähköpostiin, avata ja asentaa puhelimeen. Toinen tapa on ladata ohjelma suoraan puhelimeen QR-koodissa olevasta osoitteesta.

Valitsen QR-koodivaihtoehdon.

Näytölle tulee QR-koodi, jonka voi lukea puhelimella vaikka AI Companion-ohjelmalla tai jollakin muulla vastaavalla QR-koodeja ymmärtävällä ohjelmalla. Koodi on toiminnassa vain kaksi tuntia, joten tämä ei ole hyvä tapa jakaa tekemääsi ohjelmaa kavereille. Jos haluat lähettää ohjelmaasi eteenpäin, lataa se koneelle ja lähetä se eteenpäin vaikka sähköpostilla.


Kuvasin koodin, sain internet-osoitteen ja latasin ohjelman. Ohjelma asentuu napauttamalla "Vahvista ja asenna"-kuvaketta.

Puhelimessa saattaa olla esto ns. kolmansien osapuolien ohjelmistoille.


Tämä hoituu asetuksissa laittamalla pukki "Tuntemattomien tahojen" kohtaan. Omassa puhelimessani Asetukset -> Suojaus -> Tuntemattomat tahot.


Nyt ohjelma asentuu normaalisti.


Ja sovellus on asennettu.



Itse koodaaminen on tässä harjoituksessa vain viiden minuutin juttu, mutta en usko että tämä sujuu kaikilla täysin ongelmitta. Kun ensimmäiset ovat saaneet harjoituksen tähän asti, voivat he ryhtyä muokkaamaan näkymää, näppäimen asettelua, lisäämään näppäimiä ja puhuttavia tekstejä, jne. Tällöin opettajalle jää aikaa selvittää mahdollisia ongelmatapauksia.

Taustavärin tai -kuvan vaihtamalla appista saa ihan eri näköisen.
Tässä oma olympia-aiheinen vesivärityöni taustakuvana.

keskiviikko 26. helmikuuta 2014

HTML-perusteet

HTML-opetus notepadia käyttäen on mielestäni hidasta ja siihen hommaan löytyykin valmiita verkkokursseja. Esittelen tässä nopeasti W3Schools-palvelun, joka on erittäin selkeä ja helppotajuinen. Sivusto on englanninkielinen, mutta opettajan johdolla käytynä ongelmia ei pitäisi tulla. Edustamallani koululla on ollut tapana opetella HTML vasta yhdeksännellä luokalla ja minulla on tällä hetkellä ATK-opetuksessa vain kahdeksasluokkalaisia. Käyn kuitenkin heidän kanssaan HTML-perusteet, jotta pääsemme tutustumaan Wikipedian muokkaukseen hivenen kivuttomammin.

W3Schoolsin etusivulta pääsee suoraan valitsemaan HTML Tutorial-linkin, joka sisältää HTML:n perusteet, XHTML:n, HTML5:n ja CSS:n perusteet. Etusivulla on myös linkit vastaaviin oppaisiin, joissa käsitellään montaa muuta web-ohjelmoinnissa tarvittavaa taitoa.

 Esimerkit ovat selkeitä ja niissä edetään hyvin pienin askelin.
Melkein jokaisessa kohdassa on "Try it yourself"-nappi, jolla saa käynnistettyä editorin. Editorissa pääsee muokkaamaan koodia helposti ja nopeasti.



Koska tekstiä on paljon ja se on englanniksi (osa omista oppilaistani koki tämän ongelmaksi), voi suuri osa tiedosta hukkua matkan varrella, vaikka koodiosaaminen tarttuisikin. Lopussa on 20 kysymystä, joilla voi testata tietojaan.
Jokaisen kappaleen yhteydessä on esimerkkejä, jotka on listattu omalle sivulleen. "Examples explained"-kohdassa esimerkit käydään läpi rautalangan kanssa, joten tämän sivun avulla kuka tahansa voi opettaa HTML-kielen perusteet.



Oppilailla oli valtavan hauskaa, kun huomasivat voivansa tallentaa esimerkiksi Facebookin aloitussivun koneelleen ja pystyvänsä muokkaamaan sen tekstejä haluamikseen.


Mikäli tämä kuulostaa sopivalta harjoitukselta, voi tämänkin tehdä ohjatusti. Kopioimalla jonkun verkkosivun lähdekoodi ohjelmaan esim Notepad++ (Windows) tai TextWrangler (Mac), voi sivulta etsiä tiettyjä tekstipätkiä ja muokata niitä haluamikseen.



Kun muokatun sivun tallentaa .html-muodossa, muutokset tulevat näkyviin. Nokkelimpia muutoksia tekevät joutuvat tutkimaan koodia hyvinkin paljon, jotta saavat muokattua esim. FB:n kirjautumislomakkeen vaihtoehdot haluamikseen.

Kuten sanoin, kävin omien oppilaitteni kanssa läpi vain perusteet Wikipedian kieltä varten. W3Schools-sivulta löytyisi kuitenkin ammennettavaa melkein kokonaiseksi lukuvuodeksi.  Ehkäpä joku innostuu ja kääntää tämän tärkeimmät osat suomeksi. ;)