Rakenna ensimmäinen hyödyllinen sovelluksesi tekoälyn avulla

Vaihe 1: Kuvaa ongelma omin sanoin

Lähes jokainen käy kaupassa, joten ostoslista on täydellinen ensimmäinen projekti. Sinun ei tarvitse ymmärtää ohjelmoinnista mitään nähdäksesi, toimiiko ostoslista: kirjoitat leipä, maito ja kananmunat, näet loppusumman ja rastit tuotteet sitä mukaa kuin ostat ne. Tuloksena on jotain, mitä voit oikeasti käyttää jo tällä viikolla.

Ennen kuin avaat yhtään tekoälytyökalua, täydennä nämä kolme lausetta paperille tai muistiinpanoon. Tämä on koko kirjan tärkein ohjelmointitaito: toiveen muuttaminen konkreettisiksi säännöiksi.

1. Minun pitää kirjata… (esimerkiksi: jokainen tuote, kuinka monta tarvitsen ja yhden kappaleen hinta).
2. Haluan ohjelman laskevan… (esimerkiksi: kunkin rivin hinnan ja koko ostoskerran loppusumman).
3. Tiedän ohjelman toimivan, kun… (esimerkiksi: kaksi 25 euron tuotetta näyttää 50 €, eikä tuotteen rastiminen muuta loppusummaa).

Vaihe 2: Rakenna ensimmäinen pieni versio

Ensimmäinen versio on yksi tiedosto, joka aukeaa verkkoselaimessasi. Ei asennettavaa ohjelmointiympäristöä, ei palvelinta eikä kirjautumista. Kopioi alla oleva prompti tekoälyavustajaasi (Claude, ChatGPT tai vastaava) täsmälleen sellaisenaan.

Auta minua rakentamaan ensimmäinen yksinkertainen sovellukseni. Olen täysi aloittelija.

Tee ostoslista yhteen tiedostoon nimeltä ostokset.html, jonka voin avata verkkoselaimessani. Laita kaikki tyylit ja kaikki JavaScript tähän samaan tiedostoon, ilman ulkoisia kirjastoja.

Haluan syöttää tuotteen nimen, määrän ja yhden kappaleen hinnan. Painike lisää tuotteen listaan. Näytä kunkin rivin hinta ja alareunassa koko ostoskerran loppusumma. Anna minun poistaa tuote ja merkitä se ostetuksi. Tuotteen merkitseminen ostetuksi ei saa muuttaa loppusummaa.

Hylkää tyhjä nimi, virheelliset luvut, negatiivinen hinta ja määrä, joka on nolla tai pienempi. Hyväksy hinnassa sekä desimaalipilkku että desimaalipiste.

Kerro ensin suunnitelma lyhyesti. Kirjoita sitten koko koodi ja tarkat vaiheet tiedoston tallentamiseen ja avaamiseen. Älä lisää vielä muita ominaisuuksia.

1. Kopioi koodi. Käytä tekoälyn vastauksessa olevaa kopiointipainiketta, niin saat koko koodin ensimmäisestä rivistä viimeiseen.
2. Tallenna nimellä ostokset.html. Avaa pelkkää tekstiä käsittelevä editori (Windowsissa Notepad, Macissa TextEdit pelkkä teksti -tilassa), liitä koodi ja tallenna nimellä ostokset.html. Valitse tiedostotyypiksi ”Kaikki tiedostot”, ei ”Tekstitiedostot”.
3. Avaa se selaimessa. Kaksoisnapsauta tiedostoa tai vedä se selainikkunaan. Sinun pitäisi nähdä ostoslistasi eikä koodia täynnä olevaa sivua.

Vaihe 3: Tarkista, ettei se ole pelkkä kaunis kuva

Oikealta näyttävä sovellus ei ole sama asia kuin toimiva sovellus. Käy tämä taulukko läpi rivi kerrallaan ja vertaa näkemääsi oikeaan tulokseen. Tämä on ensimmäinen oikea testisi.

Jos jokin rivi ei mene läpi, älä vielä korjaa koodia käsin. Kerro tekoälylle tarkasti, mikä rivi epäonnistui, mitä syötit ja mitä näit sen sijaan, ja pyydä sitä korjaamaan vain se ongelma.

Vaihe 4: Tee yksi muutos itse

Tee nyt ensimmäinen muutoksesi niin, ettei tekoäly kirjoita sitä puolestasi. Kysy tekoälyltä: ”Missä kohtaa koodiani on sovelluksen otsikko?” Se osoittaa rivin, joka näyttää suunnilleen tältä: <h1>Ostoslista</h1>.

1. Etsi otsikko. Avaa ostokset.html tekstieditorissa ja etsi rivi, jonka tekoäly osoitti.
2. Vaihda teksti. Korvaa <h1>- ja </h1>-merkintöjen välissä olevat sanat omalla otsikollasi, esimerkiksi ”Lauantain ostokset”. Älä poista kulmasulkeita.
3. Tallenna ja päivitä. Tallenna tiedosto, palaa selaimeen ja päivitä sivu. Uuden otsikkosi pitäisi näkyä.

Pyydä sitten tekoälyä selittämään oma tiedostosi kolmessa osassa käyttäen esimerkkinä sinun koodiasi. Huomaat, että jokainen verkkosovellus rakentuu samoista kolmesta kerroksesta:

Vaihe 5: Opeta sovellukselle uusi taito

Oikeat ohjelmat kasvavat pienin askelin. Lisää yksi uusi ominaisuus ja testaa sitten uudelleen. Lähetä tekoälylle samassa keskustelussa tämä jatkopyyntö:

Lisää ostoslistaani budjetti. Anna minun kirjoittaa summa, jonka haluan käyttää. Näytä, paljonko on jäljellä. Jos loppusumma ylittää budjetin, näytä selkeä varoitus ja summa, jolla budjetti ylittyy. Pidä kaikki muu toiminta täsmälleen ennallaan ja näytä minulle koko päivitetty tiedosto.

Olet nyt rakentanut, käynnistänyt, testannut ja muuttanut oikean sovelluksen. Se ei ole koko ohjelmointi, mutta se on rutiini, jonka toistat jokaisessa seuraavassa oppitunnissa: kuvaa selkeästi, anna tekoälyn generoida, tarkista odotettuja tuloksia vasten ja muuta yksi asia kerrallaan.