Smíðaðu eitthvað: Fyrsta appið þitt búið til með gervigreind

Hvað þú þarft

Skref

1. 01

   Lýstu því sem þú vilt — smíðaðu fyrsta appið þitt

   ~2 mínútur

   Opnaðu Claude og límdu inn skipunina hér að neðan. Claude mun búa til virka spurningakeppni sem „Artifact“ — gagnvirkan glugga við hliðina á spjallinu. Þú getur smellt þér í gegnum keppnina, svarað spurningum og séð stigin þín. Þetta virkar strax í vafranum þínum. Hugsaðu þig um: þú bjóst einmitt til app.

   FyrirmæliAfrita

   Smíðaðu fyrir mig gagnvirka spurningakeppni um Ísland. Láttu fylgja 8 spurningar um landafræði, menningu, tungumál og náttúru. Hver spurning á að hafa 4 valmöguleika. Sýndu eina spurningu í einu, haltu utan um stigin og sýndu lokaskjá með niðurstöðum. Hafðu hönnunina stílhreina með bláu og hvítu litaþema.

   Hvað á að gerast

   Fullbúin spurningakeppni um Ísland sem lifandi Artifact. Þú getur smellt þér í gegnum hana, svarað spurningum og séð lokastigin — allt án þess að skrifa neinn kóða.

   Prófaðu þetta

   Skiptu „Ísland“ út fyrir hvaða land, efni eða viðfangsefni sem þú vilt. Sama uppbygging virkar fyrir sögu, vísindi, kvikmyndir, íþróttir — hvað sem er.
2. 02

   Breyttu því með orðum

   ~5 mínútur

   Appið er til en þetta er útgáfa 1. Þróaðu það áfram með því að skrifa frekari leiðbeiningar — hver og ein uppfærir appið í rauntíma. Prófaðu skipanirnar hér að neðan eina í einu. Þetta er nákvæmlega það sem atvinnuforritarar gera: smíða fyrstu útgáfu, prófa hana og bæta hana svo. Þú ert bara að nota venjulegt mál í stað kóða.

   FyrirmæliAfrita

   Bættu við tímamæli sem gefur 15 sekúndur fyrir hverja spurningu. Sýndu niðurtalningarstiku sem breytist úr bláu í rautt þegar tíminn rennur út.

   Hvað á að gerast

   Artifact-glugginn uppfærist í rauntíma með breytingunum þínum. Hver ítrekun bætir við nýjum eiginleika eða fínpússar það sem fyrir er án þess að eyðileggja það sem þegar virkar.

   Prófaðu þetta

   Aðrar hugmyndir að skipunum: „Sýndu eftir keppnina hvaða spurningar ég svaraði vitlaust og hver réttu svörin voru.“ / „Bættu við 'Spila aftur' hnappi sem stokkar röð spurninganna.“ / „Láttu þetta virka vel á farsímaskjám.“
3. 03

   Veldu þitt eigið verkefni

   ~10 mínútur

   Smíðaðu núna eitthvað sem þig langar raunverulega í. Veldu eina af fimm hugmyndunum hér að neðan, eða búðu til þína eigin. Límdu samsvarandi skipun inn í Claude. Virk fyrsta útgáfa mun birtast á nokkrum sekúndum — hún verður ekki fullkomin, og það er allt í lagi. Skref 4 snýst um að gera hana að þinni.

   FyrirmæliAfrita

   Smíðaðu fyrir mig persónulegt mælaborð með: stórri stafrænni klukku sem uppfærist í rauntíma, dagsetningu dagsins á fallegu sniði, svæði þar sem ég get skrifað stuttar glósur (sem vistast í vafranum) og hvetjandi tilvitnun sem breytist í hvert skipti sem ég endurhleð síðunni. Notaðu dökkt þema með hlýjum áherslulitum.

   Hvað á að gerast

   Virk fyrsta útgáfa af því verkefni sem þú valdir. Hönnunin gæti verið dálítið hrárri eða vantað eiginleika sem þú sást fyrir þér — það er eðlilegt á þessu stigi.

   Prófaðu þetta

   Aðrar verkefnahugmyndir — Mælieiningabreytir: „Smíðaðu alhliða mælieiningabreyti með flipum fyrir lengd, þyngd, hita og gjaldmiðla. Breyttu í rauntíma á meðan ég skrifa.“ | Minnisleikur: „Smíðaðu minnisleik með 4x4 töflu af emoji-pörum.“ | Ákvarðanatökutól: „Smíðaðu tól sem snýr í gegnum valmöguleika eins og spilakassi og velur einn af handahófi.“
4. 04

   Endurbættu þar til það er þitt

   ~15 mínútur

   Þetta er mikilvægasta skrefið. Talaðu við gervigreindina um það sem þú vilt breyta — vertu nákvæm(ur). Þú ert vöruhönnuðurinn; gervigreindin er forritarinn. Þitt hlutverk er að ákveða hvað á að smíða og hvernig upplifunin á að vera. Gervigreindin sér um tæknilegu útfærsluna. Hæfileikinn til að lýsa skýrt því sem þú vilt er raunveruleg og dýrmæt færni.

   FyrirmæliAfrita

   Þetta virkar en það er ljótt. Gerðu það fallegt. Notaðu flotta leturgerð, rétt millibil, lágværa skugga og láttu þetta líta út eins og alvöru vara.

   Hvað á að gerast

   Útlitslega betri útgáfa af appinu þínu. Gervigreindin mun beita hönnunarreglum — millibilum, stigveldi, litum, dýpt — til að breyta einföldu tóli í fágaða vöru.

   Prófaðu þetta

   Aðrar hugmyndir að skipunum: „Hnapparnir eru of litlir í síma. Hafðu þá að minnsta kosti 44px á hæð.“ / „Breyttu litaþemanu í dökkgrænt og rjómahvítt — eins og gamaldags minnisbók.“ / „Bættu við hljóðáhrifum þegar ég fæ rétt svar með því að nota Web Audio API.“
5. 05

   Sama hugmynd, annar smiður

   ~10 mínútur

   Taktu sömu verkefnahugmynd og smíðaðu hana í ChatGPT Canvas (eða Gemini). Notaðu sömu lýsingu. Berðu saman: hvort bjó til betri fyrstu útgáfu, hvort var auðveldara að endurbæta, var hönnunin ólík? Athugaðu: Gemini gæti búið til kóða frekar en beina forskoðun — vistaðu þá HTML-kóðann sem .html skrá og opnaðu hana í hvaða vafra sem er.

   Hvað á að gerast

   Önnur útgáfa af appinu þínu, smíðuð af annarri gervigreind. Virknin gæti verið svipuð en hönnun, uppbygging kóðans og nálgunin verða ólík. Hvorugt er endilega betra — þau endurspegla mismunandi persónuleika gervigreindanna.

   Prófaðu þetta

   Ef Canvas er ekki í boði í ChatGPT á þínu svæði, notaðu þá Claude Artifacts í staðinn — það er í boði í ókeypis útgáfunni.
6. 06

   Fyrir þau hugrökku: Settu upp alvöru þróunarumhverfi

   ~20 mínútur

   Þú hefur smíðað öpp í vafranum. Ef þú vilt ganga lengra — smíða stærri verkefni, nota útgáfustýringu, keyra kóða staðbundið — geturðu beðið gervigreindina um að setja upp heilt þróunarumhverfi fyrir þig. Þetta er valfrjálst og tæknilegra, en gervigreindin mun leiða þig í gegnum hvert skref. Þú þarft ekki að skilja allt strax. Fylgdu bara leiðbeiningunum.

   FyrirmæliAfrita

   Ég er algjör byrjandi sem er nýbúinn að smíða mitt fyrsta app með gervigreind. Nú langar mig að setja upp alvöru þróunarumhverfi á Mac-tölvunni minni svo ég geti smíðað stærri verkefni. Leiddu mig skref fyrir skref í gegnum uppsetninguna á öllu sem ég þarf, með nákvæmum skipunum fyrir skipanalínuna (terminal) sem ég get afritað og límt:
   
   1. VS Code (kóðaritill) — settu hann upp ásamt helstu viðbótum fyrir vefþróun
   2. Node.js (í gegnum nvm svo ég geti stýrt útgáfum) — settu upp nýjustu LTS útgáfuna
   3. Python 3 (í gegnum pyenv eða homebrew) — settu upp og staðfestu
   4. Git — stilltu það með nafni mínu og netfangi, útskýrðu hvað það gerir í einni setningu
   5. Skipulag verkefnamöppu — búðu til ~/Projects með skynsamlegri uppbyggingu
   6. „Hello world“ próf — búðu til lítið verkefni sem sannar að allt virki
   
   Fyrir hvert skref: gefðu mér nákvæma skipun, segðu mér hvað hún gerir á einföldu máli og hvernig ég get staðfest að hún hafi virkað. Gerðu ráð fyrir að ég hafi aldrei opnað skipanalínu áður. Ef eitthvað gæti þegar verið uppsett, sýndu mér hvernig ég athuga það fyrst.

   Hvað á að gerast

   Heildstæðar leiðbeiningar, skref fyrir skref, um uppsetningu á VS Code, Node.js, Python og Git — þar sem hver skipun er útskýrð. Gervigreindin mun aðlagast stýrikerfinu þínu og athuga hvort eitthvað sé þegar til staðar. Að því loknu verður þú með atvinnulega uppsetningu fyrir forritun.

   Prófaðu þetta

   Ef þú notar Windows í stað Mac, segðu þá við gervigreindina: „Ég nota Windows, ekki Mac. Lagaðu allar skipanir samkvæmt því.“ Sama gildir um Linux. Gervigreindin sér um muninn.
7. 07

   Vistaðu vinnuna þína

   ~3 mínútur

   Appið þitt lifir í gervigreindarspjallinu — ef þú eyðir spjallinu, þá hverfur það. Í Claude: smelltu á Artifact-gluggann, smelltu svo á afritunartáknið eða „View Code“ og vistaðu HTML-kóðann í skrá á tölvunni þinni (t.d. mitt-quiz.html). Opnaðu þá skrá í hvaða vafra sem er — hún virkar án nettengingar. Í ChatGPT: afritaðu allan kóðann úr Canvas og vistaðu sem .html skrá. Þú getur sent .html skrána á hvern sem er. Viðkomandi opnar hana bara í vafranum sínum. Engin uppsetning, engin app-verslun, enginn netþjónn nauðsynlegur.

   Hvað á að gerast

   Vistuð .html skrá sem opnast í hvaða vafra sem er og keyrir appið þitt algjörlega án nettengingar. Þú getur deilt henni með tölvupósti eða skilaboðum — viðtakandinn opnar bara skrána.

   Prófaðu þetta

   Biddu gervigreindina um að útskýra kóðann fyrir þér, línu fyrir línu. Þetta er ein fljótlegasta leiðin til að byrja að skilja forritun — að lesa kóða sem þú veist nú þegar hver tilgangurinn er.

Hvað lærðir þú

• Hvernig á að smíða virkt app með því að lýsa því með orðum
• Hvernig á að þróa hugbúnað áfram með samræðum (hönnunarferlið)
• Munurinn á gervigreindarverkfærum til forritunar (Artifacts, Canvas, kóðagerð)
• Hvernig á að vista og deila því sem þú smíðaðir
• Að það að „kunna að forrita“ og „geta smíðað hugbúnað“ er ekki lengur það sama

Farðu lengra

Vandamál og lausnir