Power Platfrm tarjoaa useita eri tapoja vibe-koodata. Generative pages ja Vibe Power Apps on käsitelty jo aikaisemmissa kirjoituksissa, joten tällä kertaa perehdytään Power Platformin vibe-koodauksen kruununjalokiveen. Nimittäin Power Apps code appsiin.

Mikä ihmeen Power Apps code apps?

Power Apps code apps on uusi konsepti (preview-vaiheessa). Se mahdollistaa omien web-sovellusten ajamisen Power Platform -ympäristössä. Käytännössä:

• voit tehdä sovelluksen vapaasti valitsemallasi editorilla (esim VS Code) ja ohjelmistokehyksellä (framework, esim react)
• sovelluksen (entra id) käyttäjä on tunnistettu automaattisesti alustan toimesta
• voit käyttää Power Plarformin yhdistimiä (connector)
• sovellus asennetaan Power Platform -ympäristöön, jolloin se on muiden Power Appsien tapaan ympäristön hallintatyökalujen piirissä

Täydellinen kehikko Power Platform vibe-koodaukselle!

Mitä tarvitset päästäksesi alkuun?

Mikäli modernit ohjelmointityökalut eivät ole tuttuja, voi aloittaminen tuntua työläältä. Tarvitset työasemallesi seuraavat kilkuttimet:

• Visual Studio Code (mainio ilmainen koodieditori)
• Node.js (tätä tarvitaan tarvittavien pakettien hallintaan, npm)
• Git (versiohallinta, julkisesta git reposta noudetaan esim. code apps template)
• Power Apps CLI (komentorivityökalu jolla pääsee käsiksi Power Platform -ympäristöön)

Lisäksi käytettävässä Power Platform -ympäristössä tulee olla Power Apps code appsit sallittuja.

Lisäksi tarvitaan joku agentti. Itse käytän Github Copilottia.

Esimerkki – Interaktiivinen Gantt-kaavio

Hyödynnetään samaa esimerkkiä kuin aiemmassa vibe-koodaus jutussa. Tehdään sovellus, jolla voi aikatauluttaa työkohteilla (Work Order) tehtäviä vierailuja (Work Appointment). Siten että vierailut esitetään visuaalisesti Gantt-kaaviossa. Vierailuja voi aikatauluttaa uudelleen raahamalla niitä aikajanalla paikasta toiseen.

Aloitetaan!

Alla nopeutettu ja editoitu video (~8min), jossa vibe-koodataan assettien hallinta -sovellus vastaavalla tavalla kuin tässä jutussa interaktiivinen gantt-kaavio. Mikäli tykkäät ennemmin katsoa videota!

VS Code – Projektin valmistelu

Luodaan projektille kansio (BlogPostDemo) ja avataan se VS Codessa.

Suoritetaan terminaalissa komento

npx degit github:microsoft/PowerAppsCodeApps/templates/vite BlogPostDemo

Komento hakee githubista Power Apps code apps -pohjan.

Siirrytään luotuun kansioon

cd BlogPostDemo

Tunnistaudutaan PAC:lla (Power Platform CLI) Power Platformiin.

pac auth create

Siirrytään haluttuun ympäristöön.

pac env select --environment [environment id]

Asennetaan npm

npm install

Kerrotaan pac:lle, mikä sovelluksemme nimi on.

pac code init --displayname "BlogPostDemo"

Kaikki valmista, voimme käynnistää paikallisen palvelimen ja katsoa miltä sovellus näyttää.

npm run dev

Komennon suorituksen jälkeen näet osoitteen, jossa sovellusta ajetaan.

Sovellus näyttää seuraavalta.

Varsinainen kehitystyö voi alkaa!

Käyttöliittymän toteutus

Jätän toteutuksen agentin huoleksi. Käytän Github copilottia agentti-moodissa. Kielimallina Claude Sonnet 4.5.

Aloitus prompt on sama kuin aiemmassa kirjoituksessa.

Change this app to be like the following:

Make app for user to schedule work appointments. I like to have Gantt style view showing work appointments. by default view should show appointments for next 7 days. User can easily add new appointments and edit existing ones (clicking appointment opens the edit form). But user should also be able to drag appointments on gantt view. whole appointment to new location or just drag from the beginning or the end of appointment.

Agentti koodaa aikansa ja toteaa lopulta kaiken olevan valmista.

Harmiksemme sovellus näyttää vain tyhjältä sivulta.

Ei kuitenkaan syytä huoleen. Tämä on normaalia ja pelin henki. Mikäli joku ei toimi (lainkaan tai halutulla tavalla), pyydetään agenttia korjaamaan se.

Näin ensimmäinen versio sovelluksesta (tarkemmin otettuna sovelluksen käyttöliittymästä on valmis).

Seuraavaksi pyydetään agentilta pienissä paloissa muutoksia, kunnes käyttöliittymä täyttää vaatimukset. Kannataa sitten ajoittain testata että kaikki ominaisuudet edelleen toimivat. Ne tuppaavat välillä hajoamaan agentin touhutessa. Mutta kauniisti pyytämällä (joskus joutuu pyytämään useamman kerran) agentti kyllä lopulta osaa korjata ne.

Esimerkki virheestä.

Kopioi virheilmoitus agentille ja se on nopeasti jyvällä mistä homma kiikastaa.

Perusominaisuudet ovat nopeasti kasassa.

Sovelluksen yhdistäminen Dataverseen

Luotu sovellus ei ole vielä yhteydessä oikeaan tietovarastoon. Käyttöliittymää on kehitetty ja testattu demodatan avulla.

Pyydetään seuraavaksi agenttia korvaamaan demodata Dataversen tauluilla.

In this environment i have tables for 
- Work appointments (tp_workappointment)
- Work Orders (tp_workorder), use this for projects 
- users (systemuser), use this for engingneers 

Can you use these instead of mockup data?

Use connectors like described here: https://learn.microsoft.com/en-us/power-apps/developer/code-apps/how-to/connect-to-dataverse

Tämä vaihe vaatii yleensä hieman jumppaa (esim Lookup-kenttien kanssa). Helpommalla saattaa päästä aloittamalla koko homma lisäämällä sovellukseen tarvittavat taulut.

Välillä agentti pyytää testaamaan ja kopioimaan sille lokitietoja selaimen konsolista. Niin tälläkin kertaa.

Mutta kyllä ne tapaamiset lopulta saadaan tulemaan Dataversestä.

Sovelluksen vieminen Power Platform -ympäristöön

Sovelluksen vienti haluttuun ympäristöön on helppoa. Ei tarvitse kuin pyytää.

build the app and deploy it into power platform environment

Muutaman yrityksen jälkeen agentti saa sovelluksen käännettyä.

Ja lopulta vietyä myös oikeaan ympäristöön.

Siellä lepää!

Lopputulos näyttää pienen viilaamisen jälkeen seuraavalta.

Yhteenveto

Power Apps code appsin käyttöönottolle on oma kynnyksensä. Ainakin jos sitä vertaa generative pages ja vibe Power Apps -toiminnallisuuksiin, jotka odottavat alustalla valmiina.

Vastapainoksi käyttöönsä saa täyden kehitysympristön, versionhallinnan sekä mahdollisuuden käyttää vapaavalintaista agenttia ja kielimallia. Lopputuotokset vaikuttavat paremmilta, kuin alustan omilla riisutuilla vibe-koodaus työkaluilla tehdyt.

Voit myös vibettää haluamallasi tavalla. Esimerkissä aloitettiin yksinkertaisella promptilla ja tehtiin mockup, jota iteroitiin pienissä erissä. Lopuksi sovellus liitettiin Dataverseen. Mutta voit myös tehdä agentin avulla ensin kunnon määritykset ja niiden pohjalta toteutussuunnitelman. Jota sitten agentti alkaa ohjeistamissasi paloissa toteuttamaan.

Tai joku muu tapa edetä. Valinta on sinun.