Ensimmäiset mobiilisovellukset

Viimeisten vuosikymmenten aikana tietokoneet ja internet-yhteydet ovat yleistyneet ja mobiililaitteista on tullut valtavirtaa. Tämä näkyy jokapäiväisessä arjessa. Siinä missä 1990-luvun loppupuolella ja 2000-luvun alkupuolella pääkaupunkiseudun joukkoliikenteessä luettiin sanomalehtiä (mm. Metro), nykyään julkisessa liikenteessä sanomalehtiä näkee vain harvoin.

Sanomalehtien ja uutisten lukeminen ei ole kuitenkaan vähentynyt. Ainoastaan muoto on muuttumassa -- siinä missä uusinta tietoa on aiemmin painettu paperille ja luettu paperilta, nykyään uutispalvelut ovat verkossa. Mobiililaitteiden ja nopeiden internet-yhteyksien myötä uusimman informaation äärellä oleminen on jatkuvasti mahdollista.

Lyhyt mobiilisovellusten historia

Huoneen kokoisesta tietokoneesta älypuhelimeen

Ensimmäinen kaupallisesti saatavilla oleva tietokone (UNIVAC I) julkaistiin 1950-luvun alussa. UNIVAC I -tietokone painoi noin seitsemän ja puoli tonnia ja sen vaatima pinta-ala oli noin kolmekymmentäkolme neliömetriä. Tietokoneiden koko pienentyi ajan myötä -- ensimmäiset "helposti" siirrettävät tietokoneet julkaistiin 1970-luvun puolivälissä. Esimerkiksi vuonna 1975 julkaistu IBM 5100 painoi noin kaksikymmentäneljä kiloa.

Ensimmäiset kaupallisesti saatavilla olevat kannettavat puhelimet julkaistiin 1980-luvulla. Vuonna 1983 julkaistu Motorolan DynaTAC 8000X painoi noin kilon ja sen akussa oli virtaa noin puolen tunnin puhelulle. Ensimmäisissä kannettavissa puhelimissa käytettiin käyttöjärjestelmiä, joihin ei varsinaisesti päässyt käsiksi -- käyttöjärjestelmät olivat sulautettu (embedded) osaksi puhelinta, eikä niihin voinut lisätä sovelluksia.

Kannettavat puhelimet kehittyivät hiljalleen siten, että puhelimissa oli puhelintoiminnallisuuden lisäksi myös muuta toiminnallisuutta. Nämä älypuhelimet tarjosivat esimerkiksi kalenterin ja muita toiminnallisuuksia. Ensimmäinen kaupallisesti saatavilla ollut älypuhelin IBM Simon julkaistiin 1994 -- puhelin tarjosi puhelutoiminnallisuuden lisäksi mahdollisuuden mm. faksien ja sähköpostien vastaanottamiseen ja kirjoittamiseen, osoitekirjan, kalenterin, laskimen, sekä muita nykyaikaisissa mobiililaitteissa olevia toiminnallisuuksia. IBM Simon -puhelimeen pystyi myös lisäämään omia sovelluksia.

Kohti käyttöjärjestelmää ja ladattavia sovelluksia

Mobiilisovellusten alkumetreillä mobiilisovellukset toteutettiin puhelinvalmistajakohtaisilla työvälineillä. Tämä vaati resursseja ja johti tilanteeseen, missä sovellusten tekeminen toisen valmistajan tekemään puhelimeen vaati kokonaan uuden kielen, uusien työvälineiden, ja mahdollisesti uuden toimintalogiikan opettelua.

Tämä oli osittain resurssien hukkausta, ja puhelinvalmistajat päätyivät tekemään myös yhteistyötä. Esimerkiksi Ericsson, Motorola ja Nokia ottivat käyttöönsä Psionin EPOC-käyttöjärjestelmän, muodostaen Psionin kanssa yhteistyössä Symbian-yrityksen. Yritys kehitti EPOC-käyttöjärjestelmän pohjalta Symbian-käyttöjärjestelmän, jonka eri versioita käytti 2000-luvun puolivälissä yli puolet kaikista maailman puhelimista. Vastaavasti vuoden 2007 loppupuolella hieman yli puolet kaikista (käytössä olevista) puhelimista oli Nokialaisia.

Mobiililaitteiden yleistymisen ja mobiilisovellusten jokapäiväiseen elämään liittyvän roolin kehittymisen myötä mobiililaitteita ja mobiilisovelluksia alkoi kehittämään yhä useampi yritys. Esimerkiksi Apple julkaisi ensimmäisen iPhone-puhelimensa vuonna 2007 ja Google julkaisi mobiilisovelluksille suunnatun Android käyttöjärjestelmän vuonna 2008.

Sekä Applen iPhone-puhelinsarjassa sekä sen käyttöjärjestelmässä että Googlen Android-käyttöjärjestelmässä tärkeässä roolissa on sovelluskauppa, josta käyttäjä voi ladata puhelimelleen sovelluksia. Näitä sovelluksia voi lisätä sovelluskauppaan käytännössä kuka tahansa.

Idea sovelluskaupasta ei ollut uusi -- esimerkiksi jo vuonna 1991 julkaistu Electronic AppWrapper (EAW) tarjosi mahdollisuuden sovellusten ostamiseen ja lataamiseen. Voidaan kuitenkin sanoa, että Applen ja Googlen tuotteiden myötä -- tai niiden aikakaudella -- mobiilisovellusten hankkimisesta mobiililaitteiden tarjoamista sovelluskaupoista on tullut jokapäiväistä.

Erilaisia mobiilisovelluksia

Mobiilisovellukset voidaan nykyään jakaa karkeasti ottaen kolmeen kategoriaan: (1) natiivisovelluksiin, (2) web-sovelluksiin, ja (3) hybridisovelluksiin.

Natiivisovellukset tehdään käyttöjärjestelmäkohtaisilla työvälineillä tiettyä käyttöjärjestelmää ja mahdollisesti puhelinmallia varten. Tämä mahdollistaa puhelinmallin ja käyttöjärjestelmän tarjoamien ominaisuuksien kuten vaikkapa erilaisten sensorien käytön sekä käytössä olevien laiteresurssien tehokkaan hyödyntämisen. Toisaalta, mikäli sovelluksen haluaa useammalle käyttöjärjestelmälle, tulee se tehdä jokaiselle erikseen. Natiivisovellukset tulee ladata sovelluskaupasta.

Web-sovellukset toteutetaan -- kuten nimi antaa ymmärtää -- web-sovelluksina, ja sovelluksia käytetään mobiililaitteessa olevan verkkoselaimen kautta. Web-sovellukset toteutetaan web-teknologioilla kuten HTML:llä, CSS:llä, ja JavaScriptillä, jolloin ne ovat käytettävissä kaikissa web-teknologioita tukevissa puhelimissa. Web-sovellukset eivät pääse samalla tavalla laiteresursseihin käsiksi kuin natiivisovellukset, mutta niitä ei toisaalta tarvitse ladata esimerkiksi sovelluskaupasta, eikä niistä tarvitse tehdä puhelin- tai käyttöjärjestelmäkohtaisia.

Hybridisovellukset ovat edellisten yhdistelmä. Niitä kehitetään web-teknologioilla, mutta ne paketoidaan käyttöjärjestelmäkohtaisiksi natiivisovelluksiksi. Tämä johtaa tilanteeseen, missä sovellus ladataan sovelluskaupasta ja sitä voi käyttää kuten natiivisovellusta, mutta sovelluksen kehitystyössä ei juurikaan tarvitse huomioida eri käyttöjärjestelmien vaatimuksia. Osa hybridisovellusten kehittämiseen tarkoitetuista sovelluskehyksistä tarjoaa myös pääsyn käyttöjärjestelmän laiteresursseihin sovelluskehyksen tarjoaman abstraktion kautta. Käytännössä hybridisovellukset eivät kuitenkaan tyypillisesti ole yhtä tehokkaita laiteresurssien käytössä kuin natiivisovellukset.

Ensimmäiset mobiilisovellukseni

Ensiaskeleet mobiilisovellusten tekemiseen

Otamme nyt ensiaskeleet mobiilisovellusten tekemiseen Flutter-sovelluskehyksen avulla. Flutter on sovelluskehys hybridisovellusten tekemiseen, joka tarjoaa valmiita komponentteja mobiilisovellusten luomiseen. Tulet huomaamaan, että mobiilisovellusten tekeminen poikkeaa hieman aiemmasta harjoittelemastamme ohjelmoinnista, sillä keskitymme vahvasti Flutterin tarjoamien komponenttien käyttöön.

Ensiaskeleet ohjelmointiin otetaan usein tarkastelemalla ohjelmaa, joka tulostaa tai näyttää käyttäjälle viestin Hei maailma!. Emme poikkea tästä hyväksi havaitusta tavasta. Kun painat alla olevassa ympäristössä Run-nappia, ohjelma suoritetaan ja näet oikeassa laidassa miltä mobiilisovellus tulisi käynnistyessään näyttämään.

Huom! Sovelluksen näkymisessä kestää hetki. Mikäli Run-napin painamisen jälkeen Run-nappi tulee uudelleen aktiiviseksi, eikä sisältö vielä näy, odota hetki ennen kuin painat nappia uudestaan.

Tekstin näyttäminen sovelluksessa

Tarkastellaan ohjelmaa tarkemmin. Kun luomme sovelluksia Flutterilla, tuomme käyttöömme flutter/material.dart-kirjaston, joka sisältää valmiita käyttöliittymäkomponentteja mobiilisovellusten luomiseen. Tämän lisäksi kirjasto tarjoaa funktion runApp, jota käytetään sovelluksen käynnistämiseen. Funktio runApp saa parametrina käyttöliittymäkomponentin -- tässä käyttöliittymäkomponenttina on komponentti Text, jolle annetaan parametrina sekä konkreettinen näytettävä merkkijono että tekstin suunta (textDirection: TextDirection.ltr eli vasemmalta oikealle).

Käytännössä kutsu Text('Hei maailma!', textDirection: TextDirection.ltr) luo uuden olion Flutterin valmiista Text-luokasta. Olioita ja luokkia käsiteltiin lyhyesti Data ja tieto -kurssin osassa Rakenteellisen tiedon esittäminen luokkien avulla.

Tekstin suunta annetaan nimettynä parametrina, eli tekstin suuntaa annettaessa tulee kertoa myös minkä nimiseen parametriin tekstin suunta liittyy. Tässä parametrin nimi on textDirection -- yllä parametrin arvoksi asetetaan TextDirection.ltr.

Edellä kuvatun ohjelman voi kirjoittaa myös useammassa osassa. Alla olevassa esimerkissä luodaan ensin muuttuja suunta, johon asetetaan tekstin suunta. Tämän jälkeen luodaan muuttuja teksti, johon asetetaan tekstikomponentti. Tekstikomponentti saa parametrinaan tekstin ja suunnan. Tämän jälkeen muuttuja teksti annetaan parametrina funktiolle runApp. Toisin kuin edellisessä esimerkissä, tekstin suunta on oikealta vasemmalle (TextDirection.ltr).

Toisin kuin aiemmin, käytämme muuttujien esittelyssä avainsanaa final. Avainsana final poikkeaa aiemmin käyttämästämme avainsanasta var siinä, että final-muuttujan arvoa ei voi myöhemmin asettaa uusiksi. Avainsanan final käyttö auttaa sovelluskehystä sovelluksen optimoinnissa.

import 'package:flutter/material.dart';

main() {
  final suunta = TextDirection.rtl;
  final teksti = Text('Hei maailma!', textDirection: suunta);

  runApp(teksti);
}

Tekstielementille voi antaa myös muta parametreja. Alla olevassa esimerkissä tekstielementille annetaan tekstin ja suunnan lisäksi tyyli. Alla tekstin väri määritellään mustaksi.

import 'package:flutter/material.dart';

main() {
  final tyyli = TextStyle(color: Colors.black);
  final suunta = TextDirection.rtl;
  final teksti = Text('Hei maailma!', textDirection: suunta, style: tyyli);

  runApp(teksti);
}

Sovelluksen lähtökohtana on käyttöliittymäkomponentti

Flutterin runApp funktiolle annetaan parametrina Flutter-kirjaston tarjoamista käyttöliittymäkomponenteista luotu olio. Tarkastelimme edellä Text-luokasta tehdyn olion käyttöä sovelluksen lähtökohtana. Lähes mitä tahansa Flutterin käyttöliittymäkomponenttia voi kuitenkin käyttää sovelluksen lähtökohtana.

Alla käytetään Center-luokkaa sovelluksen lähtökohtana. Center-luokkaa käytetään sisällön keskittämiseen. Center-oliota luotaessa Center-luokan konstruktorille annetaan nimettynä parametrina (parametrin nimi child) olio, joka keskitetään sovellukseen. Keskitettävä olio on aiemmin tutuksi tullut tekstikomponentti.

Sovellusrunko

Edellä tarkasteltiin sovelluksen käynnistämistä käyttöliittymäkomponentin avulla. Tutustutaan seuraavaksi sovellusrunkoon, jonka avulla sovellukseen saadaan Flutter-sovelluskehyksen mukana tulevat tyylit sekä muita yleisiä toiminnallisuuksia.

Sovellusrunko koostuu luokista MaterialApp ja Scaffold. Tutustutaan näihin lyhyesti seuraavaksi.

Luokka MaterialApp

Flutter tarjoaa mobiilisovellusten rakentamiseen MaterialApp-luokan, joka tarjoaa rungon kehitettäville mobiilisovelluksille. MaterialApp-luokka lisää sovellukseen muunmuassa oletusasetuksia, jolloin esimerkiksi tekstille ei tarvitse asettaa tekstin suuntaa. Sovelluksessa näkyy myös oikeassa ylälaidassa teksti Debug, joka kuvastaa sovelluksen olevan vielä kehitysvaiheessa.

Yksinkertaisimmillaan MaterialApp-luokka toimii alla olevan esimerkin mukaisesti. Esimerkissä luodaan MaterialApp-sovellus ja asetetaan sovellukseen teksti Hei maailma! -- sovellusta kokeilemalla, huomaat että tyylit eivät vielä ole kummoiset.

Yllä olevassa esimerkissä tekstikomponentista luotu olio asetetaan MaterialApp-luokan konstruktorin home parametrin arvoksi. Parametri home määrää komponentin, joka näytetään sovelluksen käynnistyessä.

Kuten aiemmissa esimerkeissä, sovelluksen rakentamisen voi pilkkoa osiin.

import 'package:flutter/material.dart';

main() {
  final teksti = Text('Hei maailma!');
  final sovellus = MaterialApp(home: teksti);

  runApp(sovellus);
}

Luokka Scaffold

Luokkaa MaterialApp käytetään usein luokan Scaffold kanssa. Luokka Scaffold määrittelee sovellukselle Material Design -tyylejä seuraavat tyyliasetukset. Luokan Scaffold konstruktorille annetaan nimettyinä parametreina yläpalkki (parametri appBar) ja sisältö (parametri body). Mikäli konstruktorille ei anneta jompaa kumpaa parametria, ei osaa (yläpalkki tai sisältö) näytetä sovelluksessa.

Sovelluksen rakennetta voi ajatella ylhäältä alaspäin roikutetun puun runkona, hieman samalla tavalla kuin HTML-dokumentteja. Sovellus, joka sisältää sekä yläpalkin että sisällön voi piirtää esimerkiksi seuraavalla tavalla. Alla olevassa esimerkissä mahdolliset tekstit ja muut komponentit on jätetty piirtämättä.

Tarkastellaan seuraavaksi ensin yläpalkin asettamista ja sitten sisällön asettamista.

Yläpalkki

Yläpalkin tulee olla tietyn muotoinen eikä yläpalkiksi voi asettaa esimerkiksi tekstikomponenttia. Yläpalkkia varten Flutter tarjoaa AppBar-luokan, jolle voidaan määritellä otsikko ja tapahtumia. Tutustumme tapahtumien määrittelyyn myöhemmin ja tarkastelemme tässä vain otsikon asettamista.

Otsikon teksti annetaan tekstikomponenttina AppBar-luokan konstruktorin nimetylle parametrille title. Alla olevassa esimerkissä luodaan sovellus, joka käyttää Scaffold-luokkaa Material-luokan sisällä. Scaffold-luokalle määritellään yläpalkki, jossa näkyy teksti Hei maailma!.

import 'package:flutter/material.dart';

main() {
  final otsikkoteksti = Text('Hei maailma!');
  final palkki = AppBar(title: otsikkoteksti);
  final sovellusrunko = Scaffold(appBar: palkki);
  final sovellus = MaterialApp(home: sovellusrunko);

  runApp(sovellus);
}

Sisältö

Scaffold-luokkaa käytettäessä sovelluksen sisältö annetaan Scaffold-luokan nimetyllä parametrille body. Sisällöksi voi asettaa oikeastaan minkälaisia komponentteja tahansa. Alla olevassa esimerkissä luodaan sovellus, joka näyttää sisältönä tekstin Hei sisältö!. Yläpalkkia sovelluksessa ei ole.

import 'package:flutter/material.dart';

main() {
  final sisaltoteksti = Text('Hei sisältö!');
  final sovellusrunko = Scaffold(body: sisaltoteksti);
  final sovellus = MaterialApp(home: sovellusrunko);

  runApp(sovellus);
}

Kuten aiemmin huomasimme, tekstin voi keskittää Center-komponentilla. Alla olevassa esimerkissä sovelluksessa näytettävä sisältö on keskitetty.

import 'package:flutter/material.dart';

main() {
  final sisaltoteksti = Text('Hei sisältö!');
  final keskitys = Center(child: sisaltoteksti);
  final sovellusrunko = Scaffold(body: keskitys);
  final sovellus = MaterialApp(home: sovellusrunko);

  runApp(sovellus);
}

Yläpalkki ja sisältö yhdessä

Yhdistetään seuraavaksi yläpalkki ja sisältö. Seuraava ohjelma sisältää sekä yläpalkin että sisällön. Yläpalkissa lukee teksti Sovellukseni ja sisältönä käytetään tekstiä Hei maailma!. Sisältö on keskitetty.