Kesällä julkaisin sarjan tutoriaaleja, joissa tutustuttiin Applen uuteen Swift-ohjelmointikieleen, joka tulee aikanaan syrjäyttämään aavistuksen vanhanaikaiseksi käyneen Objective-C:n. Apple esitteli uuden ohjelmointikielensä kesäkuussa Worldwide Developers Conference 2014 -kehittäjätapahtumassa, hehkuttaen sitä tehokkaammaksi ja ennen kaikkea helpommin lähestyttäväksi ratkaisuksi. Nyt uusi kieli on virallisesti käytössä, kun sekä mobiililaitteille suunnattu iOS 8 -käyttöjärjestelmä että tietokoneille tarkoitettu OS X 10.10 Yosemite ovat ulkona. Koodia pääsee rakentamaan Applen Xcode-työkalulla, joka on täysin ilmainen ja kaikkien ladattavissa App Store -ohjelmistokaupasta.

Tutustuin Applen uuteen kieleen kesällä hyvin käytännönläheisesti ja siitä näkökulmasta, että myös aloittelevien oli helppo saada ”juonesta” kiinni. Kävin läpi muun muassa muuttujat, ehtolauseet sekä funktiot. Niiden avulla kielen perusajatuksesta saa kiinni ja on helpompi jatkaa eteenpäin esimerkiksi englanninkielisiä oppaita sekä tutoriaaleja seuraten. Pitkälle pääsee myös Applen omalla The Swift Programming Language -oppaalla, joka löytyy iBook-kirjakaupasta ilmaiseksi.

Aikaisemmat tutoriaalini:

1. Opi tuntemaan Swift: Applen uusi ohjelmointikieli
2. Swift-tutoriaali: ehtolauseet ja silmukat
3. Swift-tutoriaali: funktiot
4. Swift-esimerkki: lottoarpoja

Sen jälkeen kun uuden kielen perusteet ovat hallinnassa on hyvä lähteä tutustumaan laajemmin Xcodeen, joka on oma maailmansa ja vaatii hieman totuttelua. Se kattaa kaiken tarvittavan OS X- ja iOS-sovelluksien rakentamiseen ja nyt ajatuksena olisikin luoda hyvin yksinkertainen iOS-pohjainen ohjelma. Ympäristönä Xcode saattaa olla aluksi varsin hämmentävä, jos siihen ei ole aikaisempaa kosketusta. Yritänkin hieman selventää työkalun eri osia ja kokonaisuuksia, mutta se ei ole kuitenkaan tämän tutoriaalin pääasiallinen tarkoitus. Ajatuksena on luoda toimiva iOS-sovellus ja oppia niin sanotusti tekemisen kautta, joka ainakin itselläni on osoittautunut parhaaksi tavaksi tutustua Xcodeen.

Aloitetaan tekeminen avaamalla Xcode ja luomalla uusi iOS-projekti, joka rakentuu yhdestä näkymästä, eli on Single View Application -sovellus. Anna projektille haluamasi nimi, valitse ohjelmointikieleksi Swift ja laitteeksi iPhone.

Projektin luomisen jälkeen eteen avautuu yllä nähtävä näkymä. Kuvaa klikkaamalla saat näkyviin siitä suuremman version, jossa eri alueita ja niiden toimintoja on hieman selvennetty. Syvemmin niihin en tässä tutoriaalissa paneudu, mutta kuvan pitäisi antaa perusymmärryksen eri osasten tarkoituksesta. Parhaiten tässäkin oppii, kun eri painikkeita kokeilee rohkeasti, jolloin näkee käytännössä, mitä mistäkin tapahtuu.

Seuraavaksi on tärkeää tutustua kahteen vasemmasta laidasta löytyvään tiedostoon, jotka ovat ViewController.swift ja Main.storyboard. Ensimmäinen tiedostoista, eli ViewController.swift on se osa, johon koodi kirjoitetaan. Main.storyboard on puolestaan paikka, jossa sovelluksen käyttöliittymän suunnittelu ja rakentaminen tapahtuu. Alhaalta oikealtaa löytyy kolmannen kuvakkeen (vasemmalta laskettuna) takaa lista UI-elementtejä, joita voit vetää suoraan sovelluksesi käyttöliittymään. Käytännössä siis ViewController.swift sisältää koodin, jolla ohjataan käyttöliittymän toimintaa Main.storyboard-tiedostossa.

Ennen sovelluksen käyttöliittymän varsinaista suunnittelua muutetaan mitat niin, että ne vastaavat iPhone-sovellusta. Tämä helpottaa opettelua ja käyttöliittymän elementtien sijoittelua. Avaa siis Main.storyboard, aktivoi näkymä (johon sovellus rakennetaan) ja poista Asetukset-paneelista valinta Use Auto Layout. Eteen avautuvasta ikkunasta valitaan Keep size class data for: iPhone ja painetaan Disable Size Classes. Näin meillä on kokonaisuus, jonka mitat vastaavat iPhone 5 -laitteiden näytön kokoa. Muista siis valita iPhone 5/5s päätelaitteeksi, kun testaamme sovelluksen toimintaa myöhemmin.

Sitten päästään sovelluksen suunnitteluun. Tarkoituksena on kasata sovellus, jossa on kolme UI-elementtiä. Ylhäällä tekstikenttä (Text Field), keskellä tekstielementti (Label) ja alhaalla painike (Button). Niiden avulla saadaan ohjelma, jossa käyttäjä kirjoittaa oman nimensä ja sovellus tulostaa sitä hyödyntäen tervehdyksen. Kokoa ylhäällä näkyvän kaltainen käyttöliittymä oikeasta alalaidasta löytyvän työkaluvalikon avustuksella. Elementtien paikoilla ei sinänsä ole suurta merkitystä tämän esimerkin kannalta, joten voit asetella myös eri tavalla.

Kun käyttöliittymä on kunnossa, on aika yhdistää ne koodiin. Tässä vaiheessa on hyvä jakaa koodinäkymä kahteen osaan, jolloin ensimmäiseen saadaan käyttöliittymä ja toiseen koodi. Koodialueen jakaminen onnistuu oikealta ylhäältä löytyvällä painikkeella, joka yllä olevassa kuvassa on korostettuna.

Käyttöliittymäelementtien yhdistäminen koodiin (ViewController.swift) onnistuu helpoiten vetämällä ctrl-painike pohjassa UI-elementistä koodialueeseen. Näin toimitaan jokaisen elementin kohdalla, jota halutaan ohjata koodin avulla. Kaikkien kohdalla tämä ei ole tarpeellista, sillä mukana voi olla osia, jotka eivät muutu sovelluksen ajon aikana.  Ensimmäisenä yhdistetään tekstikenttä, jolle annetaan nimeksi Nimi. Seuraavaksi tehdään sama Labelin kanssa. Määritetään sille nimeksi Tervehdys. Näin olemme yhdistäneet elementit koodiin IBOutlet-termillä, joka viitaa käytännössä siihen, että koodi (ViewController.swift) antaa käskyjä käyttöliittymälle.

Painikkeesta määritetään IBAction, joka tarkoittaa, että UI-näkymä antaa käskyjä koodille. Käytännössä siis kyseinen koodirivistö suoritetaan, kun käyttöliittymässä tapahtuu määrätty asia. Tässä tapauksessa tämä tapahtuma on napin painallus. Yhdistäminen tapahtuu samalla tavalla ctrl:n pohjassa, mutta Connection-kenttään vaihdetaan Action ja nimeksi annetaan Painike.

Vihdoin olemme vaiheessa, jossa voimme ryhtyä kirjoittamaan varsinaista koodia. Sovelluksemme tulostaa siis tervehdyksen käyttäen tekstikenttään syötettyä nimeä, joten kirjoitamme koodin juuri painikkeelle luotuun IBActioniin.

@IBAction func Painike(sender: AnyObject) {
        var KayttajaNimi:String = Nimi.text // Haetaan tekstikenttää kirjoitettu tieto omaan muuttujaan.      
    }

Ensimmäisenä on järkevää kerätä käyttäjän nimi tekstikentästä omaan muuttujaan. Annetaan tälle nimeksi vaikka KayttajaNimi. Tämä onnistuu erittäin yksinkertaisesti UITextField-elementin valmiilla text-metodilla.

@IBAction func Painike(sender: AnyObject) {
        var KayttajaNimi:String = Nimi.text // Haetaan tekstikenttää kirjoitettu tieto omaan muuttujaan.   
        Tervehdys.text = "Hei, \(KayttajaNimi)!" // Tulostetaan tervehdys Label-kenttään (Tervehdys).
    }

Nyt kun meillä on käyttäjän nimi omassa muuttujassa on tulostus Lable-kenttään helppo toteuttaa. Tekstikentän tavoin myös Lable tarjoaa valmiin text-metodin, jolla siinä näkyvää tekstiä voidaan manipuloida.

Näin meillä on hyvin yksinkertainen iOS-käyttöjärjestelmällä toimiva sovellus, jonka avulla olen toivottavasti onnistunut opettamaan Xcode-ohjelmoinnin perusteita. Jos ymmärsit kaikki tässä käydyt asiat, on sinun helppo jatkaa eteenpäin. Ensimmäisenä voit esimerkiksi jatkaa tätä esimerkkiä lisäämällä mukaan toisen painikkeen, jolla tervehdystekstin voi pyyhkiä pois. Seuraavana kannattaa tutustua käyttöliittymän rakentamiseen tarkemmin, jolloin kokonaisuudesta saadaan joustava ja elementit mukautuvat automaattisesti eri laitteille. Alla vielä valmis projektitiedosto (.zip), joka on vapaasti kaikkien käytettävissä.

Xcode 6, Swift-esimerkki, XcodeNimi

---

Jäikö kysyttävää? Autan mielelläni eteenpäin, jos joku määrätty kohta jäi mietityttämään. Toivottavasti tutoriaali on onnistunut ja sen avulla pääsee sukeltamaan Applen ohjelmointiympäristön maailmaan. Jos sait esimerkistä kiinni, on tästä hyvä jatkaa eteenpäin. Kannattaa tutusta Xcodeen rauhassa ja kehitellä muutamia yksinkertaisia esimerkkejä, joiden avulla voi kehittää omia taitojaan.