Power Apps Canvas App kehitys Copilot tekoälyn avustuksella

Tekoälytyökaluja on lähiaikoina kehitetty kaikenlaisiin eri tarkoituksiin. Monet näistä helpottavat ohjelmointikehitystä, mutta vielä en ole törmännyt sellaiseen, joka korvaisi oman osaamiseni kokonaan. En ole kuitenkaan kokeillut näitä yksinkertaisempien alustojen parissa, joten lähdin selvittämään miten hyvin Microsoftin Copilot sekä Power Apps toimivat yhdessä.

Copilot on Microsoftin tekoälytyökalu, jota voidaan käyttää moniin eri tarkoituksiin ja Power Apps Canvas Appsit ovat Microsoftin Power Apps- alustalle rakennettuja sovelluksia, jotka toimivat sekä mobiililaitteilla että selaimessa. Canvas Appseja voi Power Apps kehittäjälisenssillä muokata ilmaiseksi, mutta Copilotin käyttäminen Canvas Appsien kanssa vaatii Power Apps Premium lisenssin.

Copilot voi avustaa käyttöliittymän luonnissa, muokkauksessa sekä neuvojen antamisessa. Katsotaan seuraavaksi, miten se onnistuu.

Canvas Apps Copilot näkymä

Aloitetaan kokeilu muokkaamalla valmista Canvas Appia. Loin Helpdesk templaten pohjalta uuden Canvas App sovelluksen ja heti tuon avattua klikkaamalla oikeassa yläreunassa olevaa Copilot-painiketta saadaan Copilot näkymä avattua:

Canvas Apps Copilot

Yllä olevassa kuvassa vasemmalla näkyy Canvas App -sovellus ja oikealla Copilot -ikkuna. Copilot -ikkunan alareunassa olevaan tekstikenttään voi kirjoittaa omin sanoin ohjeita tai kysymyksiä, joita haluat Copilotin toteuttavan.

Käyttöliitymämuutokset

Aloitetaan käyttöliittymämuutoksien kokeilu ohjaamalla Copilottia värjäämään login ruudun napit sinisiksi:
Canvas Apps Copilot

Saatiin aikaiseksi juuri se mitä haluttiin.

Canvas Apps Copilot

Painikkeissa on turhaa tekstiä, joten pyydetään muokkaamaan ne tällä lyhyemmiksi:

Canvas Apps Copilot

Canvas Apps Copilot

Nyt painikkeista ei selviä koitetaanko kirjautua käyttäjänä vai adminina. Copilotin muokkaukset voidaan perua Undo painikkeella, joten kokeillaanpa sitä:

Canvas Apps Copilot

Muutokset peruttiin juuri niin kuin Copilot kertoo.

Canvas Apps Copilot

Haluan, että vain käyttäjät käyttävät tätä Power Appia. Siispä päätän poistaa tuon alemman admin login painikkeen. Pyydetään Copilotilta seuraavaa:

Canvas Apps Copilot

Pyysin samaa komentoa muutamassa eri muodossa, mutta vaikuttaisi ettei Copilot suostu poistamaan asioita. Napin poistaminen manuaalisesti tapahtuu klikkaamalla sitä ja painamalla deleteä näppäimistöltä, joten ohjeiden kirjoittaminen tätä varten vaatii käyttäjältä enemmän työtä muutenkin.

Canvas Apps Copilot

Nyt kun ruudulla on vain yksi nappi huomaan heti, ettei se ole keskellä ruutua. Pyydetään Copilottia keskittämään painike:

Canvas Apps Copilot

Vastauksesta voi päätellä, että vain napin sivuttaiset koordinaatit, eli X-koordinaatit muuttuivat. Nappi on siis edelleen samassa paikassa. Kehittäjänä ymmärrän Copilotin viestistä mitä tapahtui, mutta tavalliselle ihmiselle se ei välttämättä viestistä ilmene.

Nyt päästiin ensimmäiseen isoon kompastuskiveen. Lisäämällä komentoon sanan ”center” eteen sana ”exact” saadaan eri lopputulos ja lisäämällä ”very” samaan kohtaan saatiin haluttu lopputulos.

Canvas Apps Copilot

Canvas Apps Copilot

Nyt yllä olevasta kuvasta näkee, että valkoinen teksti on liian ylhäällä. Sain komennoilla myös tekstin liikkumaan, mutta en täsmälleen sinne minne halusin ja totesin että sen manuaalisesti raahaaminen haluamalleni paikalle on tässäkin tapauksessa nopeampaa ja helpompaa.

Yksinkertaiset käyttöliittymän muokkaukset näyttävät siis onnistuvan, poistamista lukuun ottamatta, vaikkakin välillä ohjeistuksen kirjoittaminen vaatii enemmän käyttäjältä kuin asian tekeminen manuaalisesti.

Toimintojen luonti

Kuinka hyvin Copilotilta onnistuu uusien toimintojen luonti? Pyydetään sitä luomaan nappi, jota klikkaamalla siirrytään toiseen näkymään.

Canvas Apps Copilot

Canvas Apps Copilot

Nappi kyllä ilmestyi ja klikkaamalla sitä päästiin haluttuun näkymään. Toiminnallisuus on siis kohdallaan, mutta painikkeen tyyli ja fontti eivät kuitenkaan täsmää ruudulla näkyvien nappien kanssa.

Kokeillaan jotain vaikeampaa ja luodaan yksinkertainen laskin. Luodaan ensin kaksi tekstikenttää ja tämän jälkeen nappi, joka laskee tekstikenttien summan:

Canvas Apps Copilot Canvas Apps Copilot

Klikkaamalla nappia saadaan ruudun ylälaitaan viesti, joka kertoo lukujen 4 ja 5 summan olevan 9.

Onnistuuko Copilotilta toiminnallisuuden muokkaus? Pystyisikö Copilot vielä muuttamaan laskin -painiketta niin, että se kirjoittaisi lopputuloksen napin tekstiin, eikä ruudulla näkyvään viestiin?

Kokeilin ohjeistaa Copilottia tekemään tämän usealla eri tavalla, mutta haluttuun lopputulokseen ei päästy täysin. Katsotaan kuitenkin konepellin alle, kuinka lähelle oikeasti päästiin:

Canvas Apps Copilot

Copilot kirjottaa tässä uuteen muuttujaan toisen tekstikentän tekstin, eikä laske niitä tällä kertaa yhteen. Uuden muuttujan arvo näytetään myös Notify-funktion viestissä painikkeen tekstikentän sijaan, johon kirjoitetaan merkkijono ”varText” sen sijaan että siinä lukisi varText-muuttujan arvo.

Jotta saataisiin tekstikenttien summa kirjoitettua tuohon muuttujaan, olisi OnSelect ja Text ominaisuuksien pitänyt näyttää tältä:

Canvas Apps Copilot

Testailun vuoksi voisinkin pyytää Copilottia selittämään mitä tuo minun kirjoittama koodi tekee:

Canvas Apps Copilot

Copilot selittää, että käyttäjä voi painaa nappia ja että voin konfiguroida napin painalluksen tekemään jotakin. Tämä on itsestäänselvyys ainakin minulle. Liitän koodin suoraan kysymykseen ja katsotaan, saataisiinko hyödyllisempi vastaus:

Canvas Apps Copilot

Copilot onnistuneesti selittää mitä syöttämäni koodi tekee.

Uuden sovelluksen ja taulun luonti

Kokeillaan seuraavaksi, miten helposti onnistuu kokonaan uuden sovelluksen luominen. Luodaan kysely -sovellus, jossa pyydetään käyttäjää vastaamaan kysymyksiin valmiista vaihtoehdoista.

Uuden Canvas Apps -sovelluksen luominen Copilotin avustuksella hoituu make. powerapps sivuilla, navigoimalla Apps osioon ja klikkaamalla Start with Copilot -painiketta.

Power Apps

Ensin luodaan taulu, johon tallennetaan kysymykset. Annetaan Copilotille ohje:

Copilot

Hoituipa näppärästi. Mutta haluan kysymyksilleni 6 vastausvaihtoehtoa. Jatketaan ohjeella:

Canvas Apps Copilot

 

Vastausvaihtoehtoja lisättiin, mutta tuo Correct Answer sarake korvattiin myös. Lisätään se takaisin:

Canvas Apps Copilot

 

Hyvältä näyttää. Klikkaamalla Create App saatiin tämännäköinen pohja sovellukselle:

Canvas Apps Copilot

Käyttöliittymä vaatii useita muutoksia näyttääkseen sellaiselta kuin haluan. Käyttöliittymän muutoksia kuitenkin katsottiin jo aikaisemmassa osiossa, joten en käy niitä tässä uudelleen läpi.

Ohjeistuksien ja omien askartelujen jälkeen käyttöliittymä näyttää jälleen tältä:

Canvas Apps Copilot

Vastauksien tallennus

Seuraavaksi tehdään käyttäjien antamien vastauksien tallennus. Tätä varten tarvitaan uusi taulu, joten pyydetään Copilottia luomaan uusi painike, joka tallentaa käyttäjän, vastauksen ja kysymyksen uuteen dataverse tauluun:

Canvas Apps Copilot

Näillä ohjeilla saatiin painike, jonka koodi näyttää tältä:

Canvas Apps Copilot

Päästiin oikeaan suuntaan, mutta tässä on muutama seikka jotka pitäisi korjata: Collect () sijaan tulisi käyttää Patch() funktiota, jotta data tallennettaisiin dataverse tauluun, eikä pelkästään sovelluksen senhetkisen käyttäjän tietoihin. SelectedAnswer -muuttujan Copilot osasi kerätä oikein, mutta käyttäjää tai kysymystä ei. Kokonaan uutta dataverse taulua ei tätä kautta myöskään saatu luotua.

Uuden dataverse taulun luomista varten menen Data valikosta luomaan uutta taulua.

Canvas Apps Copilot

Annoin tähän seuraavan ohjeen:

Canvas Apps Copilot

Canvas Apps Copilot

Oikein hyvä pohja. Koska kysymykset sekä vastaukset ovat samassa taulussa emme tarvitse kuin numeron vastaukselle, joten poistetaan tuo Answer sarake ja koska meillä ei ole erillistä taulua käyttäjistä, niin tehdään User ID -sarakkeesta pelkkä sähköpostiosoite.

Canvas Apps Copilot

Canvas Apps Copilot

Nyt kun tuo taulu on luotu, pyydetään Copilottia uudelleen tallentamaan nuo tiedot kyseiseen tauluun:

Canvas Apps Copilot

Canvas Apps Copilot

Tällä kertaa Copilot ymmärsi käyttää Patch () funktiota Collectin sijaan. Mainitsin tällä kerralla myös, että haluan nimenomaan käyttäjän sähköpostin ja sen Copilot haki onnistuneesti.

AnswerTracking kuitenkin näyttää vielä punaista, koska sitä taulua ei ole otettu käyttöön tässä Appissa. Yritin muutamalla eri tavalla pyytää tuota Copilotilta, mutta se ei näyttänyt onnistuvan, joten kysyin, kuinka otan sen käyttöön manuaalisesti.

Canvas Apps Copilot

Ohjeita seuraamalla tämä onnistui mutkitta.

Koitin tuon jälkeen vielä muutamalla eri komennolla saada Copilotin korjaamaan tuon lähetyksen onnistuneesti, mutta kun se ei näyttänyt onnistuvan niin korjasin sen näin itse:

Canvas Apps Copilot

Ja näin saatiin myös vastaamani vastaukset dataverse tauluun:

Canvas Apps Copilot

Yhteenveto

Näiden kokeilujen perusteella omasta mielestäni Copilot onnistui hyvin sekä taulujen luonnissa, että kysymyksiin vastauksissa. Muissa toiminnallisuuksissa on kuitenkin vielä kehittämisen varaa.

Käyttöliittymämuutokset ovat usein nopeampia tehdä itse, kuin selittää täsmälleen mitä haluat muuttaa, varsinkin jos välillä pitää arpoa saadaanko se painike täsmälleen ruudun keskelle sanalla “exact” vai “very”.

Simppeleimmät toiminnot onnistuivat ongelmitta, mutta yhtään monimutkaisemmissa toiminnoissa ei saavutettu täsmälleen sitä mitä haluttiin. Copilotin ratkaisut kuitenkin olivat suuntaa antavia, ja pienillä muokkauksilla niistä saatiin toimivia ratkaisuja.

Vaikka Copilotilta puuttuu kyky muokata joitakin Canvas Appsien ominaisuuksia, kysymällä niistä sain hyviä vastauksia, joiden avulla pystyin tekemään sen itse. Myös kaavojen selitykset toimivat tarpeeksi hyvin, vaikkakin haluaisin voida kysyä Copilotilta mitä jonkin tietyn painikkeen painaminen tekee, sen sijaan että kopioisin kyseisen painikkeen toiminnallisuuden sen ominaisuuksista ja liittäisin sen Copilotille selitettäväksi.

 

Tämän blogikirjoituksen on kirjoittanut asiantuntijamme Aleksi Pakkanen.

 

 

Haluatko kuulla lisää?

Ota yhteyttä!