Tekoälyn hyödyntäminen käyttöliittymien rakentamisessa

Video aiheesta

Aiheesta löytyy webinaarivideo Vertex Systems Oy:n internet-sivuilta:

Tämä teksti on generoitu videon litteroinnin perusteella

Tekoälyn hyödyntäminen käyttöliittymien rakentamisessa
(Python-, web- ja Excel-käyttöliittymät suunnitteluautomaateille)

1. Mitä tällä tarkoitetaan?

Tässä artikkelissa kuvataan, miten voit käyttää tekoälyä (esim. ChatGPT) apuna, kun rakennat:

Python-pohjaisia erillisiä käyttöliittymiä
Web-käyttöliittymiä (HTML/JavaScript)
Excel-pohjaisia lomakkeita

Ajatus ei ole, että tekoäly “keksii kaiken itse”, vaan että sinä määrittelet toiminnan ja rakennekuvan, ja tekoäly:

generoi ensimmäisen luonnoksen koodista
auttaa korjaamaan virheilmoituksia
täydentää ohjelmaa lisätoiminnoilla (esim. JSON-tallennus)

2. Aloita suunnittelemalla käyttöliittymä itse

Ennen kuin avaat tekoälyn, mieti ja kirjaa itsellesi:

Ohjelman tarkoitus
- Esim. “Tällä lomakkeella syötetään suunnitteluautomaatin muuttujat ja tallennetaan ne JSON-tiedostoon.”
Kentät ja muuttujat
- Mitä käyttäjältä kysytään?
  - Esim. Palkin pituus (A_Pituus), Palkin leveys (B_Leveys)…
- Mitkä ovat muuttujien nimet, tyypit ja yksiköt?
  - Esim. A_Pituus = liukulukuarvo, millimetreinä.
Toiminnallisuus
- Tallennetaanko arvot JSON-tiedostoon?
- Voiko käyttäjä hakea aiemmin tallennetun rivin listalta?
- Tarvitaanko raportteja (PDF/Excel) myöhemmin?
Käyttöliittymän peruslayout
- Kentät allekkain vai taulukkomuodossa?
- Tarvittavat painikkeet (esim. Tallenna, Lataa arvot, Sulje).

Mitä tarkemmin kuvaat tämän itsellesi, sitä laadukkaamman koodin tekoäly pystyy tekemään.

3. Hyvä pyyntö tekoälylle (prompt)

Kun sitten avaat tekoälyn, muodosta siitä selkeä teksti, esimerkiksi:

“Tee Python-ohjelma, jossa on graafinen käyttöliittymä Tkinterillä.
Käyttöliittymässä kysytään seuraavat kentät (mm):
– A_Pituus (liukulukuarvo)
– B_Leveys (liukulukuarvo)
– Palkkikoko (valinta: 1 = 100x50, 2 = 200x75)
– Palkki (valinta: 1 = suora, 2 = vino)
Lisää painike, joka tallentaa arvot JSON-tiedostoon samaan kansioon, jossa ohjelma sijaitsee.
Kirjoita koko toimiva Python-koodi yhteen tiedostoon.”

Sama idea toimii myös web- ja Excel-käyttöliittymiin:

Web: pyydä HTML+CSS+JavaScript-koodi, jossa on samat kentät ja painikkeet, sekä JSON-tallennus tai lomakkeen lähetys.
Excel: pyydä taulukon rakenne (solujen otsikot) ja makron luonnos, joka tallentaa arvot JSON-tiedostoon.

4. Koodin testaus ja virheiden korjaus tekoälyllä

Kopioi koodi tekoälystä omaan editoriin (esim. VS Code, Notepad++, tms.) ja tallenna se .py-, .html- tai .xlsm-tiedostoksi.
Aja ohjelma:
- Python: python ohjelma.py komentoriviltä tai käynnistä suoraan editorista
- Web: avaa .html-tiedosto selaimessa
- Excel: avaa tiedosto, salli makrot
Jos ohjelma antaa virheen:
- Kopioi virheilmoitus tekoälylle.
- Kerro lisäksi millä rivillä virhe tapahtuu (tämä nopeuttaa korjausta):
  “Ohjelma kaatuu rivillä 42. Virheilmoitus: …”
Tekoäly muokkaa koodia ja palauttaa korjatun version.
- Korvaa koodi tai päivitä vain muutetut kohdat.
- Aja ohjelma uudelleen.

Tätä kierrosta (koodi → testaus → virheilmoitus tekoälylle → korjaus) pyöritetään niin kauan, että perustoiminnot toimivat.

5. Lisätoimintojen rakentaminen askel kerrallaan

Kun peruslomake toimii, voit pyytää tekoälyltä lisäominaisuuksia pienissä paloissa:

“Lisää painike, joka lataa arvot JSON-tiedostosta ja täyttää käyttöliittymän kentät.”
“Lisää lista, johon voi tallentaa useita rivikohtaisia asetuksia ja valita niistä yhden takaisin kenttiin.”
“Lisää kenttään Työnumero painike Liitä leikepöydältä, joka liittää arvon leikepöydältä tähän kenttään.”

Tärkeää on aina:

kertoa selkeästi, mitä uusi ominaisuus tekee,
mihin kohtaan käyttöliittymää se tulee (esim. “Tallenna-painikkeen viereen”),
miten toiminto käyttää jo olemassa olevia muuttujia ja tiedostoja.

6. Jakelu: Python-koodi, exe ja web-sivu

Kun Python-pohjainen käyttöliittymä toimii:

Python-koodi sellaisenaan
- Voit käyttää ohjelmaa .py-tiedostona suunnittelijan koneella.
Exe-tiedoston teko
- Tekoälyltä voi pyytää ohjeet esim. PyInstallerin tai jonkin muun py → exe-ratkaisun käyttöön.
- Vaihtoehtoisesti voit käyttää verkkopalvelua, joka muuntaa .py → .exe. Tekoäly voi antaa linkkejä ja käyttöohjeet.
Web-versio
- Jos käyttöliittymä tehdään HTML/JavaScriptillä, tekoäly tekee valmiin tiedoston, jonka voi:
  - avata suoraan selaimessa

Excel-pohjan kohdalla tekoäly auttaa:

kenttien otsikoinnissa,
kaavoissa,
makrojen rungossa (VBA), jolla arvot siirtyvät JSON-tiedostoon.

7. Käytännön vinkit tekoälyn käyttöön

Ole konkreettinen: mitä tarkemmin kerrot muuttujat, yksiköt ja toiminnallisuudet, sitä vähemmän joudut korjaamaan.
Liitä virheilmoitukset sellaisinaan: tekoäly osaa lukea Pythonin, JavaScriptin ja VBA:n virheilmoituksia ja ehdottaa korjauksia.
Kerro myös riveistä: “Virhe rivillä 65” nopeuttaa korjausten tekemistä.
Iteroi: on tavallista, että ensimmäinen versio ei toimi täydellisesti. Tee muutoksia pienissä paloissa.
Voit käyttää myös kuvia: yksinkertaiset luonnokset (skissit) käyttöliittymästä auttavat erityisesti kuvia ymmärtäviä malleja (esim. ChatGPT:n uudemmat mallit) tuottamaan paremman layoutin.

8. Yhteenveto

Tekoäly toimii käyttöliittymien rakentamisessa ohjelmoijan assistenttina, ei mustana laatikkona.
Kun:

suunnittelet itse käyttöliittymän ja muuttujat,
kuvaat ne selkeästi tekoälylle,
testaat ja syötät virheilmoitukset takaisin tekoälylle,
lisäät ominaisuuksia yksi kerrallaan,