IT-alan tekeminen muuttuu vauhdilla AI-avusteiseksi tai jopa kokonaan (AI) agenttien tekemäksi. Sama kehitys on nähtävissä myös Power Platformissa. Aiemmissa jutuissa olen esitellyt erilaisia tapoja vibe-koodata Power Platformilla. Tällä kertaa tutustutaan jälleen yhteen uuteen tapaan, eli miten olemassa olevaa Canvas Power Appsia voi muokata GitHub Copilot CLI:n (komentorivikäyttöliittymä) avulla.

Miksi tämä on kiinnostavaa?

Maailma on täynnä eri tasoisten tekijoiden tekemiä isoja ja pieniä Canvas Power Appseja. Niitä tullaan tekemään vielä pitkään lisää ja olemassa olevia tullaan laajentamaan ja korjailemaan erilaisista bugeista. Tässä työssä voi nyt halutesssaan hyödyntää kielimalleja.

Asennus

Mitä kaikkea koneelle tulee asentaa ennen aloitusta?

Canvas Appsien muokkaaminen perustuu Power Platform taitoihin (skills), joita käyttämällä GitHub Copilot (tai Claude Code) osaa toimia Power Platformin kanssa. Eli

Tällä kertaa hyödynnämme Canvas Apps taitoa, joka taasen hyödyntää paikallisesti toimivaa MCP-palvelinta. Tämän takia konella tulee olla asennettuna myös

Eiköhän sitä siinä ollutkin jo. Voimme aloittaa!

Muutos olemassaolevaan sovellukseen

Avataan komentorivi, navigoidaan työkansioon (jonne Copilot esimerkiksi hakee Canvas Appsin koodit) ja käynnistetään copilot.

GitHub Copilot näyttää komentorivillä seuraavalta.

Avataan Canvas App, johon haluamme tehdä muutoksia. Sovelluksessa on yksi näyttö, jossa on listattuna asiakkaat (accounts) Dataversestä.

Canvas Power Apps -taito hyödyntää MCP-palvelinta, joka taas käyttää Canvas -sovelluksen coauthoring -ominaisuutta, eli se tulee laittaa päälle.

Varsinainen tekeminen on keskustelua GitHub Copilotin kanssa. Maaliin pääsee monella eri tavalla. Itse aloitin näin.

I like to edit existing canvas app (https://make.powerapps.com/e/x13d4bb5-1101-e001-9088-a60dca1
3f00a/canvas/?action=edit&app-id=%2Fproviders%2FMicrosoft.PowerApps%2Fapps%2Fad8a1575-9056-4542-bef0-468d4bc9124x)

Antamani osoite on muutosten kohteena olevan Canvas Appsin osoite sen ollessa auki editorissa. Huomaa että sovelluksen tulee olla auki selaimessa (editorissa) työn aikana.

GitHub Copilot miettii aluksi miten se suoriutuisi annetusta tehtävästä. Prosessin aikana se pyytää sinulta ainakin

  • lupaa lukea ja muokata erilaisia konfiguraatiotiedostoja
  • apuja MCP-palcvelimen käynnistämisessä
  • kirjautumaan (tunnuksella, jolla pääsy muokattavaan sovellukseen)

Todennäköisesti jossain kohtaa joudut myös uudelleenkäynnistämään komentorivin.

Muutoksia pääsee tekemään kunhan GitHub Copilot pystyy lukemaan Canvas Appsin kooditiedostot (yaml-tiedostot).

Tiedostot ladataan työasemalle ja Copilot muokkaa niitä aina ensin siellä.

Aloitetaan helpolla.

Could you make screen header font bigger and bold?

Copilot varmistaa onko paikalliseen yaml-tiedostoon tehty muutos oikein. Mikäli yaml-formaatti ja Canvas Power Appsit eivät ole tuttuja, niin tähän saattaa olla vaikeaa ottaa kantaa.

Ja kas, otsikko on päivitetty!

Monimutkaisempi muutos

Lämmittelyn jälkeen siirrymme hieman monimutkaisempaan muutokseen. Sovelluksessa on ainoastaan yksi näyttö, jossa näytetään asiakkaat. Pyydetään copilottia lisäämään toinen näyttö, jossa valitun asiakkaan nimeä voi muokata.

Could you add new screen for editing account information? For now, only account name can be edited. So user should
be able to select account (edit button on gallery showing accounts) and then navigate to he edit screen. In edit
screen there should be save and back buttons.

Copilotin suunnitelmista näkee, ettei se Canvas-sovelluksia ole kamalasti tehnyt..

Mutta niin se vain ensimmäisellä yrityksellä luo toimivan ratkaisun. Olisin tehnyt itse tämän hieman toisin, mutta kyllä tämä toimii.

Jatkoa ajatellen on helpompaa jos asiakkan tietojen muokkaaminen toteutetaan lomake-kontrollilla (form). Pyydetään copilottia tekemään tämä muutos. Tällä kertaa haluan nähdä ensin toteutussuunnitelman. 

Can you change edit screen so that it uses form control and submitform function instead of custom form and patch
function? Make first plan for changes and do all the changes after i have reviewed the plan.

Suunnitelma näyttää järkevältä ja annan copilotille luvan tehdä muutokset.

Lopputulos on muuten onnistunut, mutta lomakkeelle ei ole lisätty yhtään kenttää.

Selviää ettei lomake-kontrollin käsittely ole copilotille aivan yksinkertainen tehtävä.

Korjataan lomake käsin ja kokeillaan seuraavaksi jotain muuta.

Kontrollien uudelleennimeäminen

Kontrollien järkevä nimeäminen saattaa työn tohinassa unohtua. Miten Copilot suorituu tästä?

Pyydetään Copilottia nimeämään kaikki sovelluksen näytöt, kontrollit ja muuttujat käyttäen Microsoftin esittelemää nimeämistapaa (https://learn.microsoft.com/en-us/power-apps/guidance/coding-guidelines/code-readability).

Could you rename all screens, controls and variables using this naming convention: https://learn
.microsoft.com/en-us/power-apps/guidance/coding-guidelines/code-readability

Lopputulokseen ei voi olla kuin tyytyväinen.

Tuntemattoman sovelluksen haltuunotto

Seuraavaksi avataan vuosia sitten tekemäni sovellus. En mitenkään muista miten se on toteutettu. Voisiko Copilot auttaa tässä?

Pyydetään Copilottia ensimmäiseksi dokumentoimaan sovellus.

Write technical documentation for this app. Describe what it does and how it is implemented.

Hyvä alku. Copilot kirjoittaa md-tiedoston, jossa on ylätasolla kuvattu mitä sovellus tekee ja miten se on toteutettu.

Pyydetään Copilottia seuraavaksi tutkimaan koodia tarkemmin. Löytyykö sieltä jotain virheitä?

Check for any bugs, user flows that lead to errors, situations that put the app into an invalid state, 
or flows where required code is not executed. Document all observations in a file named bugs.md.

Copilot löysi 200 rivin edestä mahdollisia bugeja. Vaikuttavaa ja samaan aikaan hieman masentavaa. Onhan tämä omaa kädenjälkeäni.

Nopea selailu paljastaa, etteivät nämä ole (kaikki) bugeja. Mutta erinomainen lista läpikäytäväksi.

Pyydetään Copilottia seuraavaksi kommentoimaan koodi.

Can you add the necessary comments to the app?
If there are already comments (or commented‑out code), do not remove them under any circumstances.
For existing comments, please add a remark stating that this is an original comment by the original author.
Do not change anything else.
Do not update the code or add new code.

Nyt meillä on karkea dokumentaatio sovelluksesta, lista mahdollisista bugeista sekä kaikki koodi asianmukaisesti kommentoituna. Ei mikään huono lähtökohta ryhtyä tekemään (itse tai Copilotin kanssa) muutoksia tähän 5 vuotta sitten tehtyyn sovellukseen.

Miten tämä karkeasti ottaen toimii?

Välillä yhteiselo GitHub Copilotin kanssa ei suju täysin kitkatta. Se osaa hämmästyttävän hyvin korjata itse itseään, mutta joskus autttaa kun ymmärtää edes ylätasolla mitä tässä tapahtuu. Eli.

  • Canvas Appsin käsittelyyn käytetään Canvas Apps skillsiä. Joskus tämä unohtuu ja Copilot yrittää esimerkiksi puskea tekemiään muutoksia ympäristöön PAC:ia käyttäen
  • Muokattava Canvas Apps tulee olla auki ja coauthoring-ominaisuus päällä. Copilot keskustelee sovelluksen kanssa sinun työasemallasi olevalla MCP-palvelimella, joka hyödyntää coauthoring-omaisuutta.
  • Joskus MCP-palvelin ei ole käynnissä tai se on kiinni väärässä sovelluksessa.
  • Aluksi Copilot hakee sovelluksen koodit työasemallesi (canvas-edit-planner agentti)
  • Kaikki muokkaukset tehdään näihin paikallisiin tiedostoihin.
  • Muutokset validoidaan MCP-palvelimen compile_canvas -työkalulla
  • Lopuksi muutokset viedään takaisin sovellukseen MCP-palvelimen sync_canvas -työkalulla

Yhteenveto

Power Platform skillsit ja GitHub Copilot CLI on erinomainen lisä Power Platform konsultin työkalupakkiin. Uutta Canvas-sovellusta en lähtisi näillä tekemään. Jos voi lähteä puhtaalta pöydältä kehittämään AI-avusteisesti, aloittaisin suoraan Code Appsilla.

Vanhojen sovellusten hoitoon tämä sitten onkin erinomainen apuri.

  • Kirjoita tästä sovelluksesta dokumentaaatio. Haluan että dokumentaatiossa on ainakin nämä kappaleet.
  • Vaihda kaikkialta vanha brändiväri x uuteen väriin y
  • jne

Työhön pätee sama kuin kaikkeen agenttiseen kehittämiseen. Mikäli et ymmärrä työn kohteesta (Canvas-sovellus) mitään, saat todennäköisesti nopeasti aikaan paljon sotkua. Jos taas ymmärrät mitä agentti on tekemässä ja ohjata sitä välillä oikeaaan suuntaan, tämä väsymätön apuri nopeuttaa työtäsi merkittävästi.

Kaikkeen tämäkään ei (vielä) pysty. Huomasin että omat komponentit ovat Copilotille liikaa. Harmi, sillä niitä ainakin itse käytän todella usein. Myöskään lomake-kontrollin manipuloiti ei vielä oikein suju.

Kaikissa ympäristöissä tätä ei vielä saa toimimaan. Canvas editorin authoring version tulee olla vähintään 3.26034.

Kaikesta huolimatta, kannattaa ehdottomasti kokeilla!