Edellisessä kirjoituksessa käytiin läpi canvas Power Appsin uutta (kokeellista) ominaisuutta, jolla Power Appsin saa helposti yhdistettyä Git-versionhallintaan.

Jatketaan samalla teemalla. Otetaan työkalupalettiin mukaan Visual Studio Code. Se on erinomainen ilmainen editori. Käytän sitä itse aktiivisesti, vaikken hyödynnä sen ominaisuuksista kuin promillea.

Ajatuksena on tietenkin tehdä Power Appsiin muutoksia suoraan VS Code:lla.

Power Appsin yhdistäminen GitHubiin

Esimerkkiämme varten meillä on GitHubissa säilö (repository, PowerAppsProjects).

Lisäksi meillä on Power Apps, joka on liitetty samaiseen Git-säilöön (repository).

Miten pääsemme muokkaaaman Power Appsia suoraan VS Codella?

Power Apps Heart Visual Studio Code

Visual Studio Coden asennuspaketti löytyy täältä. Lisäksi työasemmalla tulee olla asennettuna Git-työkalut.

Ennen varsinaista hauskuutta tehdään kuitenkin hetki tylsiä esivalmisteluja.

GitHub-identiteetin määrittely

Asennusten jälkeen avataan VS Code, sieltä uusi terminaali-ikkuna ja lisätään omat tiedot asetuksiin.

git config --global user.name "Timo Pertilä"
git config --global user.email timo.pertila@forwardforever.com

Tätä identiteettitietoa käytetään muutoksia vietäessä GitHubiin.

Työskentelyhakemisto

Luodaan työasemalle oma hakemisto GitHubiin tallennettaville Power Apps -projekteille (PowerAppsGit). Avataan tämä hakemisto VS Codessa (Open Folder).

Hakemistossa ei luonnollisesti ole vielä mitään.

Siirrytään versiokontrolli-osioon. VS Code huomaa ettei kansiota ole kytketty versionhallintaan ja ehdottaa alustusta (Initialize Repository). Tehdään se.

Alustuksen jälkeen kaikki on edelleen tyhjää. Hakemistoa ei ole vielä kytketty mihinkään GitHubin säilöön.

Säilön (Repository) sisällön kopiointi hakemistoon

Aloitetaan hakemalla GitHubista haluamamme säilön sisältö työskentelyhakemistoomme. Tämä onnistuu kloonaus (Clone) -toiminnolla. Komennon voi suorittaa VS Code:n komentoriviltä (terminal) tai versionhallinta-välilehdeltä kolmen pisteen takaa.

Kerrotaan VS Codelle osoite josta säilö löytyy.

Jostain syystä joudumme kertomaan, mitä työaseman hakemistoa käytämme. Valitaan sama, jossa jo olemme.

Hakemistoon ilmestyy ainoastaan README.md -tiedosto. Koska säilömme master-haarassa ei ole muuta.

Siirrytään työskentelemään haaraan, jonne synkronoimme sovelluksemme Power Apps studiossa (main).

Klikataan master-tekstiä vasemmasta alareunasta (1) ja valitaan oikea haara (origin/main (2)).

Näin main-haarassa sijaitsevan sovelluksen (Book catalog) koodit ilmestyvät näkyviin.

Lupaavalta näyttää!

Muutosten tekeminen VS Codella

Sovelluksessamme on kaksi näyttöä. Nimetään niissä olevat kontrollit uudelleen. Tämä käy näppärästi näyttöjen tiedostoja (Screen1.fx.yaml ja Screen2.fx.yaml) muokkaamalla.

Tiedostojen tallennuksen jälkeen muutokset ilmestyvät automaattisesti versionhallinta-osioon muutoksiksi (Changes).

Mutta mitäs me muutimmekaan?

Tämä selviää helposti painamalla muokatun tiedoston kohdalla olevaa M-kirjainta. Näytölle avautuu vierekkäin versionhallinnasta ja työasemaltamme löytyvät versiot.

Erot esitetään korostettuna.

Jatketaan muutosten tekemistä. Vaihdetaan sovelluksen fontiksi Arial.

Käytännössä haluamme korvata kaikista tiedostoista tietyn merkkijonon toiseksi. Replace in Files -toiminto kuulostaa oikealta.

Korvataan teksti ”Font: =Font.’Segoe UI’” tekstillä ”Font: =Font.’Arial’”.

VS Code kertoo että haettava merkkijono löytyy 35 paikasta. Tehdään muutokset Replace All -ikonia painamalla.

Muutetaan vastaavalla tavalla

  • Tekstikenttien reunojen paksuudeksi (BorderThickness) yksi
  • Aktiivisen kontrollin reunan paksuudeksi (FocusedBorderThickness) yksi
  • Harmaa väri RGBA(105, 121, 126, 1) mustaksi RGBA(0, 0, 0, 1)
  • Sininen väri RGBA(56, 96, 178, 1) punaiseksi RGBA(190, 0, 39, 1)

Muutokset jotka olen aiemmin tehnyt aina käsin.

Näyttöjen koodeja on muokattu nyt huolella.

Muutosten vieminen GitHubiin

Lopuksi haluamme viedä muutokset versionhallintaan. Valitaan kolmen pisteen takaa löytyvä ”Commit All”.

Kyllä, haluamme vahvistaa muutokset (Yes).

Vietäviin muutoksiin on hyvä liittää aina kommentit.

Muutokset on vasta vahvistettu. Niitä ei kuitenkaan ole vielä viety GitHubiin. Tämä tehdään synkronoimalla vahvistetut muutokset.

Vihdoin muutokset ovat perillä!

Muokattu sovellus Power Apps studiossa

Samainen Power Apps on ollut koko ajan auki Power Apps studiossa. Päivitetään sovellus GitHubista löytyvillä muutoksilla (Sync-painike).

Ja kyllä. Värit, fontit ja kontrollien kehykset vaihtuvat.

Miksi sovelluksessa näkyy virhe (puninen pallo)? Muokkasin kontrollien nimiä VS Codella. Kontrolleissa on kuitenkin usein viittauksia toisiin kontrolleihin. Uudelleennimeäminen olisi sekin pitänyt tehdä Replace in files -komennolla. Nyt sain rikottua viittauksia.

Muutosten tuominen VS Codeen

Miten prosessi toimii toisen suuntaan?

Päivitetään Power Apps Studiossa näyttöjen nimet oikeiksi.

Tallennuksen / synkronoinnin jälkeen muutokset ovat myös GitHubissa.

Miten saan muutokset ladattua VS Codeen?

Painamalla vasemman alareunan synkronointi-painiketta.

Huomaa että tällöin myös VS Codessa tehdyt (hyväksytyt) muutokset viedään GitHubiin.

Yhteenveto

Power Appsin muokkaaminen VS Codella on parhaimmillaan todella tehokas tapa tehdä muutoksia. Onko se kansalaiskehittäjän tapa? No ei.

En edes halua tietää mitä tapahtuu kun vahingossa muokkaa tiedostoja, joita ei pitäisi muokata. Luonnollisesti kaikki on tallessa GitHubissa. Voi tosin syntyä mielenkiintoinen, kun Gitiä osaamaton kansalaiskehittäjä alkaa hajonnutta kokonaisuutta korjaamaan.

Eikä massamuutokset muutenkaan ole aina helppoja. Jos sovelluksessa käytetään oletusteemaa, ei kontrolleille ole määritelty fonttia, paddingia jne ollenkaan. Mitäs sieltä sitten etsit ja korvaat…