Sisällys:

Tästä pääset navigoimaan artikkelin eri osien välillä. Paina vaan halutusta osasta ja päädyt sinne 🫡

Osa 1: Esittely, molemmat softat ja tietokanta lyhyesti

Osa 2: Tietokanta

Osa 3: Ylläpitosovelluksen tekeminen

Osa 4: Mobiilisovelluksen tekeminen

Osa 5: Sovellusten jakaminen ja käyttäminen

Osa 1: Esittely, molemmat softat ja tietokanta lyhyesti

Power Apps on Microsoftin Low-code kehitysalusta. Sen avulla yrityksille voidaan toteuttaa omia sovelluksia nopeasti ja kustannustehokkaasti. Power Apps on myös tietoturvaltaan erittäin korkeatasoinen, ja integroituu vaivattomasti moniin eri järjestelmiin.
‍
Mutta mitä sillä voi ihan oikeasti tehdä? Tässä artikkelissa tutustutaan Power Appsien tekemiseen oikean esimerkin avulla: projektien tuntikirjaussovellus. Sovellus koostuu kahdesta osasta, mobiilisovelluksesta varsinaisten tuntikirjausten laatimiseen, ja selainsovellukseen jolla hallinnoidaan projekteja.

Tiedot tallennetaan Dataverse-tietokantaan, joka on osa Power Platformia. Dataverseen ei tässä artikkelisarjassa perehdytäsen kummemmin kuin sovellusten tietovarastona.

Mobiilisovellus on suoraviivainen, yhden näytön sovellus:

Ulkoasu on tarkoituksella yksinkertainen tätä artikkelisarjaa varten. Se voidaan toki muokata vapaasti halutunlaiseksi.

Toinen sovellus, projektien ylläpitoa varten, näyttää tältä:

Tätäkään sovellusta ei ole tyylitelty sen kummemmin, vaan sovellus perustuu valmiiseen mallipohjaan. Näet kohta, miten nopeasti mallien avulla voidaan toteuttaa sovelluksia!

Osa 2: Tietokanta

Sovelluksen tietokanta on hyvin yksinkertainen. Tässä artikkelissa ei ole tarkoitus perehtyä tietokannan laatimiseen tarkemmin, vain esitellä minkälainen tietokanta on nyt käytössä.

Dataverse on Power Platform alustan sisäänrakennettu tietokanta. Se on erittäin tietoturvallinen, kaikki käyttö tapahtuu Microsoft Entra tunnuksilla, joten erillistä sisäänkirjautumista ei tarvita. Dataverse on myös tiukasti integroitu Power App sovelluksiin, joten sovellusten kehittäminen on helppoa.

Tämän sovelluksen käyttämät tietokantataulut ovat seuraavanlaiset:

Käyttäjä (User)-taulu on Dataversen vakiotaulu, sillä liitetään tuntimerkintä käyttäjään.

Projekti-taulussa taas ylläpidetään yksinkertaista listaa projekteista, joihin tuntimerkintöjä voidaan liittää. Tauluissa on vain muutama tieto:

Aktiivinen-tietoa käytetään projektilla piilottamaan ei-aktiiviset (menneet) projektit valintalistasta, jotta niille ei voida vahingossa kirjata enää uusia tunteja. Tässä artikkelissa ei tarvitse välittää tämän tarkemmin tietokannan yksityiskohdista.

Osa 3: Ylläpitosovelluksen tekeminen

Tehdään ensin ylläpitosovellus, jotta voimme luoda tietokantaan projekteja; ilman niitä emme voi kirjata tunteja.

Tämä ei ole täydellinen ohje! Tarkoitus on vain esitellä vaiheet, joita sovelluksen tekemiseen kuuluu. Yksityiskohtia on enemmän, ja jotkut niistä vaativat hieman osaamista, mutta pääosin näin mennään.

Power App sovelluksia tehdään Power App Makerportaalissa, selaimessa. Mitään ohjelmistoja ei asenneta omalle koneelle, eikä tekemiseen tarvita sen kummempaa konfigurointia. Portaali löytyy osoitteesta make.powerapps.com.

Aloitamme sovelluksen tekemisen “Start with a page design” toiminnolla. Tämä mahdollistaa monenlaisten valmiiden mallien valinnan, mutta valitaan nyt aluksi tyhjä sovellus, Blank Canvas:

Sovelluksen generointi kestää hetken, jonka jälkeen ollaan Power Apps Studiossa. Tämä on varsinainen Power Apps kehitysympäristö, jossa kehittäjä viettää suurimman osan aikaansa. Studiossa näkyy keskiössä nyt tyhjä sovellusikkuna. Tätä lähdemme kehittämään eteenpäin.

Siirtämällä hiiren kursorin tyhjän sovellusikkunan päälle saadaan esiin pieni ponnahdusikkuna, jossa on valintana Templates. Valitsemalla sen, saamme eteemme valikon josta voimme valitaikkunaan erilaisista valmiista malleista haluamamme.

Otetaan tähän esimerkkiin nyt “Table and form” malli. Tässä mallissa on vasemmassa reunassa lista tietueista, ja oikealla yksittäisen tietueen tiedot. Kun malli on valittu, saadaan ensimmäinen versio sovelluksesta näkyviin:

Tässä ikkunassa ei vielä ole mitään toiminnallisuutta, koska emme ole kytkeneet sitä tietokantaan. Tehdään se seuraavaksi. Siirretään hiiren kursori vasemman reunanlistan päälle, jolloin saadaan taas ponnahdusvalikko. Tällä kertaa tarjolla on “Data” painike, jota painamalla pääsemme hakemaan haluamamme tietolähteen, tässä siis Projektit:

Tietolähteitä on lukemattomia, osa omia tietokantataulujamme ja osa esimerkiksi muiden järjestelmien rajapintoja, tai muita tietokantoja. Kun tietolähde on kytketty, näemme heti sovelluksessa dataa tietokannasta:

Kytketään vielä oikean puoleinen lomake samallatavoin, ja valitaan siihen näytettäviksi kentiksi projektin nimi ja aktiivinen-tieto. Nyt sovellus näyttää kutakuinkin tältä:

Ja siinäpä se! – sovellus on täysin käyttövalmis! Ei se toki kivalta vielä näytä, mutta kaikki toiminnallisuus on paikallaan. Voimme lisätä projekteja, tarkastella niiden tietoja, muokata niiden tietoja ja jopa poistaa projekteja. Kaikki tämä kirjoittamatta yhtään riviä koodia!

Tämä sovellus on täysin muokattavissa, voimme helposti korjata esimerkiksi hassun otsikon (“Screen1”) ja muuttaa kaikki muutkin tekstit suomenkielisiksi niin halutessamme. Voimme myös jatkokehittää sovellusta niin halutessamme, lisätä kenttiä tietokantaan ja tuoda ne sovellukseen näkyviin muutamalla hiiren klikkauksella. Jätetään ylläpitosovellus nyt kuitenkin toistaiseksi, ja siirrytään tekemään mobiilisovellusta.

Osa 4: Mobiilisovelluksen tekeminen

Mobiilisovellus aloitetaan samalla tavalla kuin selainsovellus, tässä tapauksessa tyhjällä sivulla. Huomaa, että valinnan alareunassa valitaan, tehdäänkö Tablet (selain) sovellus vai Mobiilisovellus -tällä yksinkertaisella valinnalla saadaan luotua mobiilisovelluksen perusta:

Tällä kertaa katsotaan myös hieman koodia – ei kaikkea, mutta joitain kiinnostavia kohtia.

Mobiilisovelluksessa tallennetaan tuntikirjaukset aina johonkin päivään kohdistuen. Tätä varten tarvitaan muuttuja, jossa kulloinenkin päivä on tallennettuna. Se voidaan alustaa sovelluksen käynnistyksen yhteydessä tämänhetkiseen päivään:

Set(SelectedDay, Now())

Set komennolla alustetaan järjestelmään muuttuja. Muutujan nimi on SelectedDay, englanniksi vain koska ohjelmointi usein tehdään englanniksi, mutta mikään ei estäisi käyttämästä suomenkielisiä muuttujien nimiä.

Laitetaan sovelluksen yläreunaan tekstikomponentti, Text label. Tämä löytyy studion yläreunan “Insert”valikosta:

Text label –komponentilla voidaan näyttää ruudulla tekstiä, joko staattisesti tai muuttujien arvoja. Laitetaan nyt tekstikomponentti näyttämään valittua päivää, asettamalla sen Text ominaisuuden arvoksi:

Text(SelectedDay, "dddd dd.mm.yyyy")

Text-funktio muotoilee annetun muuttujan, ja lainausmerkeissä oleva “dddd...” kertoo miten haluamme sen muotoilla. Tässä tapauksessa ensimmäinen “dddd” tarkoittaa viikonpäivän nimeä, ja loppuosa “dd.mm.yyyy” päivämäärän muotoilua.

Laitetaan vielä yläreunan reunoihin nuolipainikkeet, joilla voidaan vaihtaa päivää. Nämä löytyvät Insert-valikon “Icons” kohdasta, nimillä “Back arrow” ja “Next arrow”. Insert-valikossa voi käyttää myös hakutoimintoa.

Kummallekin painikkeelle tarvitaan pieni määrä koodia, jolla päivämäärä siirtyy eteenpäin tai taaksepäin. Koodi taaksepäin siirtymiseen näyttää tältä:

Set(SelectedDay, DateAdd(SelectedDay, -1, TimeUnit.Days))

Ja eteenpäin siirtymiseen taas:

Set(SelectedDay, DateAdd(SelectedDay, 1, TimeUnit.Days))

Älä välitä jos et ymmärrä kaikkea, se ei ole tämän artikkelin tarkoitus. Näissä kummassakin käytetään DateAdd funktiota, jolla lisätään haluttuun arvoon (SelectedDay) päiviä; taaksepäin mentäessä -1 ja eteenpäin mentäessä 1.
Sovelluksen yläreunan pitäisi näyttää suurinpiirtein tältä, ja painikkeita painamalla siirrytään päivästä seuraavaan tai edelliseen:

Seuraavaksi lisätään lomake, jolla tuntikirjauksia voidaan syöttää. Lomake – Form – on Power App sovelluksen keskeisiä ominaisuuksia. Se on tietokantaan tai mihin tahansa tietolähteeseen kiinnitetty komponentti, jolla voidaan näyttää, lisätä ja muokata tietoja yksi tietue kerrallaan. Lomake sisältää valtaosan tarvittavista toiminnoista, normaalisti koodia ei juurikaan tarvitse kirjoittaa, ja jos tarvitseekin on se hyvin suoraviivaista.

Lomakkeelle valitaan tietolähde, tässä tapauksessa tietokannan taulu (tuntikirjaukset, HourEntry) ja halutut kentät. Lisäämme lomakkeelle myös tallennuspainikkeen ja tyhjennyspainikkeen:

Painikkeet voivat sijaita missä tahansa, olla minkä värisiä ja muotoisia tahansa. Lomakkeelle valitut kentät tunnistavat tietotyypin automaattisesti, ja esimerkiksi Projektin valinta pudotusvalikolla toteutuu täysin automaattisesti. Tallennus on yksinkertaista. Vaikka tarvitsemmekin siihen ripauksen koodia, on se näin helppoa:

SubmitForm(HourEntryForm);

Siinä kaikki mitä tarvitaan tallennukseen. Lomake myös tarkistaa automaattisesti pakolliset kentät, ja näyttää virheilmoituksen jos jotain pakollista tietoa ei ole syötetty.

Haluamme toki myös nähdä päivälle syötetyt tuntikirjaukset. Tähän käytetään Gallery –komponenttia, joka on eräänlainen listan tapainen. Gallery voi näyttää tietoja allekkain, listana, mutta myös vaakasuoraan tai kortteina. Kunkin yksittäisen tietueen kenttiä voidaan muokata varsin vapaasti, ja tietojen lisäksi voidaan näyttää kuvia, käyttää värikoodauksia - melkeinpä mitä tahansa.

Lisätään siis lomakkeen alapuolelle Gallery. Gallery kytketään tietokannan tauluun yksinkertaisesti asettamalla sen DataSource ominaisuuden arvoksi haluttu taulu, tässä tapauksessa tuntikirjaukset (HourEntry).

Mutta koska nyt haluammekin vain yhden päivän tiedot, ja vain omat tietomme, joudumme suodattamaan taulun tietoja. Tässä tarvitaan taas hieman koodia – ja tällä kertaa koodi näyttää aika monimutkaiselta, vaikka tosiasiassa onkin varsin suoraviivaista:

Filter(HourEntries,     EntryTime >= DateTime(Year(SelectedDay), Month(SelectedDay), Day(SelectedDay), 0, 0, 0, 0),    EntryTime <= DateTime(Year(SelectedDay), Month(SelectedDay), Day(SelectedDay), 23, 59, 59, 999),    EntryUser.'UserName' = User().Email)

Älä välitä, jos et ymmärrä näkemääsi koodia. Siinä suodatetaan (Filter) tietokannan tietoja siten, että mukaan otetaan vain valitulle päivälle (SelectedDay) osuvat tiedot, jotka kuuluvat myös valitulle, kirjautuneelle käyttäjälle. Tällainen suodatustoiminto on Power App sovelluksissa hyvin yleinen toiminnallisuus, ja sen perusteet on helppo oppia.

Galleriassa voimme valita mitä kenttiä tietokannasta haluamme näyttää Text label -komponenteissa. Niihin viitataan ThisItem ominaisuudella, esimerkiksi projekin nimi saadaan näkyviin seuraavasti:

ThisItem.Project.Name

Siinäpä se, tuon monimutkaisempaa koodia einyt tarvita. Gallerian voisi näyttää seuraavalta, jos joitain tietoja on tälle päivälle syötetty:

Lisätään vielä alareunaan yhteenlasketut tunnit ja kilometrit. Käytetään taas Text label –komponentteja, ja niihinripaus koodia, esimerkiksi tunnit yhteensä:

Sum(Gallery1.AllItems, EntryHours) & " h" 

Tuolla yhdellä koodirivillä lasketaan summa(Sum-funktio) galleriasta (Gallery1), kaikista sen sisältämistä tietueista(AllItems), niiden tietystä kentästä (EntryHours). Lisäksi merkkijonon peräänliitetään välilyönti ja h –kirjain tuntien merkiksi (& “ h”)

Sovellus näyttäisi nyt suurinpiirtein tältä:

Kuvassa näkyy joitain toimintoja, joita ei tässä käsitelty, esimerkiksi lomakkeen tyhjentäminen ja merkinnän poistaminen.