Power Platform tarjoaa useita eri tapoja tehdä sovelluksia AI-avusteisesti. Itse pidän erityisesti code appseista. Mutta miten aloittaa niiden tekeminen? Yksi erinomainen tapa päästä alkuun on toteuttaa joku tuttu canvas apps uudelleen code apps -sovelluksena. Samalla siihen voi lisätä ominaisuuksia, joita canvas appsilla ei ollut aikanaan mahdollista toteuttaa.
Käydään tällä kertaa läpi, miten tällainen harjoitus voisi edetä.
Olemassa olevan sovelluksen hyödyntäminen lähtötietona
Meillä on vanha canvas-sovellus, jolla voi Excel-tyyliin muokata yhden dataverse-taulun rivejä. Ei maailman monimutkaisin canvas-sovellus, mutta mikäli vastaavaa ei ole tehnyt aikaisemmin, voi sen tekemiseen vierähtää tunti jos toinenkin.
Muokattavassa taulukossa on sarakkeita aika paljon. Ladataan aluksi ratkaisupaketti (jossa sovellus on) työskentelykansioomme. Avataan Github Copilot ja pyydetään sitä dokumentoimaan mitä Dataversen tauluja ja niiden sarakkeita sovelluksessa käytetään.
There is a solution package in this folder. It contains a canvas app for updating values in a single table.
Please document the following:
Which table and columns are shown in the app (gallery).
Which of those columns are editable.
If the app shows values from other tables (lookup columns), also document those tables and the specific columns being used.
Lopputuloksena meillä on dokumentti, josta selviää mitä dataversen tauluja ja niiden sarakkeita sovellus käyttää.
Lisätään työskentelyhakemistoon vielä kuva nykyisestä sovelluksesta.
Suunnitelman tekeminen
Pyydetään seuraavaksi agenttia kirjoittamaan toteutussuunnitelma code appsin toteuttamiseksi.
/plan I would like to create a code app that does the same thing as this canvas app.
Can you write an implementation plan for it?
You already know which table the user is updating, which columns should be shown, and which columns are editable.
The old app has a separate “Save changes” button, but it would be better if changes were saved instantly.
The app needs to be responsive to different screen sizes.
You can find a screenshot of the old app in this folder.
If you need more information about how the app should work, just ask.
Saamme lopputuloksena selkokielisen suunnitelman, jota voi vielä agentin kanssa iteroida paremmaksi. Suunnitelmaa voi tietenkin muokata myös suoraan.
Suunnitelma on hyvä tehdä useasta eri syystä. Ensinnäkin näet mitä agentti aikoo lähteä tekemään ja miten. Suunnitelmaa tehdessään agentti kysyy lisätietoja, mikäli joku asia on jäänyt sille epäselväksi. Mikäli vain annat homman tehtäväksi agentille (agent mode), tekee se omia oletuksiaan mikäli se ei ole varma mitä ja miten sen pitäisi työ tehdä.
Ensimmäinen toteutus
Ennen kuin aloitetaan, tarkistetaan mihin ympäristöön olemme tällä hetkellä kytkeytyneenä. Pyydetään copilottia listaamaan nykyiset yhteytemme.
list auth profiles
Olemme yhteydessä oikeaan ympäristöön. Voimme jatkaa.
Seuraavaksi pyydetään agenttia tekemään suunnitelman pohjalta code apps.
Use your power platform skill and build first version of the code app according this plan.
Eikä siinä kovin kauaa mene. Ensimmäinen versio näyttää tältä. Suurilta osin täysin toimiva sovellus.
Koodin vienti versionhallintaan
Sovelluksen ensimmäinen versio on tehty. Sen lähdekoodi on tästä lähtien syytä tallentaa versionhallintaan. Esimerkiksi GitHubiin. Pyydetään Copilotia tekemään tämä(kin).
create private repository "Sample App - Editable Grid" and commit these files to there
Nyt koodi on tallessa ja voimme palata tarvittaessa täsmälleen tiettyyn vanhaan versioon. Kunhan olemme muistaneet viedä kyseisen version versionhallitaan.
Pientä viilaamista
Läheisempi tarkastelu paljastaa, että kaikenlaista pientä tulee vielä korjata:
- Tilaa kuvaava symboli ei näy. Agentti ei ymmärtänyt että sarakkeessa näytetään tilan nimi. Se on nimittäin emoji.
- Sarakkeen järjestystä kuvaava symboli on sarakkeen nimen alapuolella, ei sivussa.
- Aakkosellinen järjestäminen toimii oudosti. Tyhjät nimet ovat järjestyksessä keskellä.
- Asiakkaan nimeä ei näy.
- Asiakkaita ei näy myöskään yläosan valintalistassa.
- Listan päällä tulisi olla vielä erillinen otsikko ”Hinnoittelun parametrit” joka alkaa päivämääräkentästä. Tämä oli myös vanhassa.
- Muokattavat kentät tulisi erottaa visuaalisesti kentistä joita ei ole mahdollista muokata.
- Listan ympärillä voisi olla hieman tyhjää tilaa
- Valittua luokkaa ei voi enää poista
- Listalla valintojen tekeminen on hidasta
- Sovellus voisi näyttää jos listalla on tallentamattomia muutoksia / se on parhaillaan tallentamassa tietoja
Kerrotaan halutut muutokset agentille plan tilassa ja annetaan sen rauhassa suunnitella muutokset.
Kun suunnitelma on valmis, annetaan agentin toteuttaa muutokset.
Yhden korjauskierroksen jälkeen sovellus on jo valmis. Uskomatonta.
Koodin refaktorointi
Olemme tyytyväisiä lopputulokseen. Pyydetään lopuksi copilotia käymään koodi läpi ja tarvittaessa kirjoittamaan se uudestaan paremmin mikäli agentti näkeen tämän tarpeelliseksi.
Now app is ready. please go through whole codebase and refactor it if needed.
Copilot löysi koodista useita kohtia jotka se halusi korjata. Annetaan sille lupa tehdä muutokset ja testataan että kaikki toimii myös korjausten jälkeen.
Lopuksi pyydetään agenttia viemään päivitetyt tiedostot githubiin.
Dokumentointi
Ratkaisu olisi hyvä myös dokumentoida. Senkin tekee agentti.
Generate comprehensive developer documentation for this app
Agentti kirjoitti kevyen dokumentaation projektin readme.md -tiedostoon. Ja (pyytämättä ja varoittamatta) vei sen versionhallintaan.
Olinko antanut sille aikaisemmissa vaihessa luvan operoida omatoimisesti githubin kanssa? Ehkä. Kannattaa olla tarkkana kun antaa agentille session aikana oikeuksia tehdä toimenpiteitä tunnuksillasi.
Yhteenveto / huomoita
Olemassaolevan canvas appsin uudelleentekeminen code appsina on mainio harjoitus. Luotavan sovelluksen kuvaamisessa pääsee helpolla, sillä agentti osaa tutkia canvas appsin koodista millaista sovellusta haetaan. Varsinkin kun sille antaa lähdekoodin lisäksi tarvittavan määrän näytönkuvia vanhasta sovelluksesta. Näin harjoituksessa voi keskittyä ominaisuuksien tarkan kuvaamisen sijasta kaikkeen muuhun. Sitäkin nimittäin riittää.
Tein tämän harjoituksen kahteen kertaan. Tehdyn sovelluksen ensimmäisissä versioissa puutteet olivat osin samoja ja osin eri. Tämä kuuluu pelin henkeen. Molemmilla kerroilla ensimmäinen versio oli jo varsin toimiva. Tässäkin auttoi se että minulla oli vanha sovellus mallina ja agentti tiesi tarkkaan mitä dataversen tauluja ja kenttiä sen tulee käyttää.
Timo Pertilä 