{"id":2053,"date":"2024-06-21T07:39:16","date_gmt":"2024-06-21T07:39:16","guid":{"rendered":"https:\/\/haimagazine.com\/?p=2053"},"modified":"2025-06-24T12:36:08","modified_gmt":"2025-06-24T10:36:08","slug":"zmaistruj-sobie-wtyczke-czyli-jak-stworzyc-gre-z-chat-gpt","status":"publish","type":"post","link":"https:\/\/haimagazine.com\/pl\/narzedzia\/tutoriale-pl\/zmaistruj-sobie-wtyczke-czyli-jak-stworzyc-gre-z-chat-gpt\/","title":{"rendered":"ZmAIstruj sobie wtyczk\u0119, czyli jak stworzy\u0107 gr\u0119 z Chat GPT"},"content":{"rendered":"<p>Co trzeba, by stworzy\u0107 w\u0142asn\u0105 wtyczk\u0119 z pomoc\u0105 ChatGPT? Poka\u017c\u0119 etapy jej tworzenia, przy okazji ods\u0142aniaj\u0105c troch\u0119 tajnik\u00f3w kuchni deweloperskiej.<\/p><p><strong>Niezale\u017cnie od coraz lepszych narz\u0119dzi i wsparcia sztucznej inteligencji tworzenie oprogramowania to pojedynek z tward\u0105 rzeczywisto\u015bci\u0105: o to, czy aplikacj\u0119 da si\u0119 napisa\u0107 (maj\u0105c dany bud\u017cet, umiej\u0119tno\u015bci i ludzi) i o to, czy ktokolwiek b\u0119dzie chcia\u0142 z niej korzysta\u0107.&nbsp;<\/strong><\/p><p>M\u00f3wi si\u0119, \u017ce 9 na 10 startup\u00f3w upada. To w\u0142a\u015bnie te, kt\u00f3re ten zak\u0142ad przegra\u0142y, bo jakie\u015b zagro\u017cenia nie zosta\u0142y odpowiednio wcze\u015bnie zidentyfikowane. Obecnie dzi\u0119ki AI mo\u017cna w wielu przypadkach o wiele szybciej i taniej weryfikowa\u0107 r\u00f3\u017cne hipotezy i tworzy\u0107 prototypy rozwi\u0105za\u0144. Takie dzia\u0142ania mog\u0105 zwi\u0119kszy\u0107 szans\u0119 na sukces, cho\u0107 gwarancji nigdy nie ma.<\/p><p>Ka\u017cdy projekt informatyczny ma jakie\u015b t\u0142o biznesowe, kt\u00f3re determinuje wymagania dla aplikacji. Nasz projekt jest \u0107wiczeniowy, wi\u0119c zamiast prawdziwego t\u0142a, trzeba co\u015b wymy\u015bli\u0107. A poniewa\u017c du\u017co ostatnio sp\u0119dzam czasu w lesie, wymy\u015bli\u0142em takie:<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>Mamy sezon na komary. Z roku na rok staj\u0105 si\u0119 ona coraz agresywniejsze. Polacy dramatycznie potrzebuj\u0105 skutecznych metod ochrony i obrony. Po\u0142\u0105czone komitety naukowo-biznesowe okre\u015bli\u0142y, \u017ce najlepszym rozwi\u0105zaniem jest uruchomienie krajowego programu \u201cAntykomarowy \u0141ad\u201d. Jego zadaniem ma by\u0107 podniesienie kompetencji narodu w \u0142apaniu tych szkodnik\u00f3w. Og\u0142oszono wi\u0119c konkurs, do kt\u00f3rego mo\u017cna zg\u0142asza\u0107 rozwi\u0105zania wspieraj\u0105ce ten cel. Nagrod\u0105 ma by\u0107 laur \u201cZ\u0142otego Komara\u201d oraz gwarancja kontraktu z Ministerstwem ds. Owad\u00f3w na zakup rozwi\u0105zania dla wszystkich obywateli.<br><br>Tw\u00f3j startup wpada na genialny pomys\u0142. Z racji, \u017ce ludzie wi\u0119kszo\u015b\u0107 czasu sp\u0119dzaj\u0105 przed komputerem, w ka\u017cdej wolnej chwili powinni mie\u0107 w zasi\u0119gu r\u0119ki aplikacj\u0119 do trenowania celno\u015bci i refleksu. Wsparta przez wyrafinowane algorytmy AI b\u0119dzie ona dostosowywa\u0107 sw\u00f3j poziom do zaawansowania uczestnika, tak by stopniowo poprawia\u0142 swoj\u0105 on skuteczno\u015b\u0107.<\/code><\/td><\/tr><\/tbody><\/table><\/figure><\/blockquote><p class=\"has-text-align-center\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" class=\"wp-image-2404\" style=\"width: 700px;\" src=\"https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/mosquitos.png\" alt=\"\" srcset=\"https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/mosquitos.png 1434w, https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/mosquitos-300x172.png 300w, https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/mosquitos-1024x586.png 1024w, https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/mosquitos-768x439.png 768w, https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/mosquitos-600x343.png 600w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p><p>W naszym przypadku nie b\u0119dziemy si\u0119 dzieli\u0107 pe\u0142nym kontekstem GPT (nie b\u0119dziemy ca\u0142ego tego opisu wkleja\u0107 do prompta), bowiem nie szukamy pomys\u0142\u00f3w na aplikacj\u0119, a tylko wsparcia w jej programowaniu. W rzeczywisto\u015bci zesp\u00f3\u0142 tworz\u0105cy program ca\u0142y czas powinien si\u0119 do tego niego odwo\u0142ywa\u0107, by podejmowa\u0107 odpowiednie decyzje i planowa\u0107 swoj\u0105 prac\u0119. Zreszt\u0105 wykorzystajcie pierwszy akapit jako prompt i zobaczcie jakie pomys\u0142y model wam wam wygeneruje.<\/p><p><strong>Do ca\u0142ego projektu wykorzysta\u0142em nast\u0119puj\u0105ce narz\u0119dzia, praktycznie wszystkie darmowe:<\/strong><\/p><ul class=\"wp-block-list\"><li>Kod i obrazki: <strong><a href=\"https:\/\/chatgpt.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><mark style=\"background-color:#82D65E\" class=\"has-inline-color has-contrast-color\">Chat GPT<\/mark><\/a><\/strong> (wersja p\u0142atna) oraz <a href=\"https:\/\/claude.ai\/\" target=\"_blank\" rel=\"noreferrer noopener\"><mark style=\"background-color:#82D65E\" class=\"has-inline-color has-contrast-color\"><strong>Claude<\/strong><\/mark><\/a> (wersja darmowa, na ko\u0144cu wyja\u015bniam korzysta\u0142em z obu)<\/li>\n\n<li>D\u017awi\u0119ki: <strong><a href=\"https:\/\/elevenlabs.io\/\" target=\"_blank\" rel=\"noreferrer noopener\"><mark style=\"background-color:#82D65E\" class=\"has-inline-color has-contrast-color\">ElevenLabs<\/mark><\/a><\/strong><\/li>\n\n<li>Obr\u00f3bka grafik: <strong><a href=\"https:\/\/www.gimp.org\/\" target=\"_blank\" rel=\"noreferrer noopener\"><mark style=\"background-color:#82D65E\" class=\"has-inline-color has-contrast-color\">GIMP<\/mark><\/a><\/strong><\/li>\n\n<li>Obr\u00f3bka d\u017awi\u0119k\u00f3w: <strong><a href=\"https:\/\/www.audacityteam.org\/\" target=\"_blank\" rel=\"noreferrer noopener\"><mark style=\"background-color:#82D65E\" class=\"has-inline-color\">Audacity<\/mark><\/a><\/strong><\/li>\n\n<li>Edytor kodu: <a href=\"https:\/\/atom-editor.cc\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><mark style=\"background-color:#82D65E\" class=\"has-inline-color\">Atom<\/mark><\/strong><\/a><\/li>\n\n<li>\u015arodowisko aplikacji: <strong><a href=\"https:\/\/www.google.com\/intl\/pl_pl\/chrome\/\" target=\"_blank\" rel=\"noopener\"><mark style=\"background-color:#82D65E\" class=\"has-inline-color has-contrast-color\">Chrome<\/mark><\/a><\/strong><\/li><\/ul><h4 class=\"wp-block-heading\">Przygotowania<\/h4><p>Za ka\u017cdym razem, gdy chcemy, by model wykona\u0142 dla nas jakie\u015b zadanie, warto go \u201cnastroi\u0107\u201d: okre\u015bli\u0107 kontekst w kt\u00f3rym b\u0119dzie pracowa\u0142 i rol\u0119, w jak\u0105 b\u0119dzie si\u0119 wciela\u0142. Pierwszy prompt brzmi zatem:<\/p><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>Jeste\u015b ekspertem od programowania. Ja jestem osob\u0105, kt\u00f3ra ma pomys\u0142 na aplikacj\u0119, ale nie umie kodowa\u0107. Ta aplikacja b\u0119dzie mia\u0142a form\u0119 wtyczki do przegl\u0105darki Chrome. Czy jeste\u015b w stanie pom\u00f3c mi j\u0105 stworzy\u0107?<\/code><\/td><\/tr><\/tbody><\/table><\/figure><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><\/p><\/blockquote><p>Nadaj\u0105c modelowi rol\u0119 okre\u015bli\u0142em zakres jego kompetencji, by precyzyjniej tworzy\u0142 tre\u015bci. Nadaj\u0105c sobie rol\u0119 okre\u015bli\u0142em jak maj\u0105 one by\u0107 formu\u0142owane, bym najlepiej je zrozumia\u0142. Modele LLM uwielbiaj\u0105 t\u0142umaczy\u0107 wszystko jak przys\u0142owiowej krowie na miedzy. W odpowiedzi na powy\u017cszy prompt dosta\u0142em od razu ca\u0142y plan dzia\u0142a\u0144, a nawet szkic gotowej aplikacji. Nabieraj\u0105c bieg\u0142o\u015bci we wsp\u00f3\u0142pracy z AI takie rzeczy nie b\u0119d\u0105 wam przeszkadza\u0107, ale pocz\u0105tkuj\u0105cym polecam strategi\u0119 ma\u0142ych kroczk\u00f3w &#8211; du\u017co wi\u0119cej si\u0119 przy tym nauczycie. Dlatego ponowi\u0142em pytanie dodaj\u0105c na koniec:<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>Potwierd\u017a, lub zaprzecz.<\/code><\/td><\/tr><\/tbody><\/table><\/figure><\/blockquote><p>Tym razem odpowied\u017a by\u0142a bardziej zwi\u0119z\u0142a i zawiera\u0142a dodatkowo 5 punktowy plan dzia\u0142ania. Model zaproponowa\u0142 rozpocz\u0119cie pracy od zdefiniowania pomys\u0142u &#8211; prosz\u0119 bardzo:<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>Zdefiniowanie pomys\u0142u: chcia\u0142bym stworzy\u0107 wtyczk\u0119 kt\u00f3ra, kt\u00f3ra po wywo\u0142aniu otworzy now\u0105 zak\u0142adk\u0119 w przegl\u0105darce Chrome, nast\u0119pnie wy\u015bwietli na \u015brodku bia\u0142ego ekranu kropk\u0119 w kolorze niebieskim. Po klikni\u0119ciu w kropk\u0119 kursorem na ekranie powinien pojawi\u0107 si\u0119 komunikat OK. Potwierd\u017a, \u017ce zrozumia\u0142e\u015b i czekaj na dalsze instrukcje.<\/code><\/td><\/tr><\/tbody><\/table><\/figure><\/blockquote><p><\/p><p>M\u00f3g\u0142bym od razu w szczeg\u00f3\u0142ach opisa\u0107 wszystkie funkcje gry, ale z do\u015bwiadczenia wiem, \u017ce asystent po drodze albo by si\u0119 pogubi\u0142, albo ja przesta\u0142bym ogarnia\u0107 zbyt d\u0142ug\u0105 konwersacj\u0119. To co opisa\u0142em powy\u017cej to bardzo wczesna wersja naszego programu. Zaraz wyja\u015bni\u0119, dlaczego to tak to sformu\u0142owa\u0142em.<br><br>Zosta\u0142a jeszcze jedna rzecz: narz\u0119dzia. Co prawda GPT b\u0119dzie prowadzi\u0142 nas przez ca\u0142y proces, ale ostatecznie to my b\u0119dziemy pisa\u0107 kod i go testowa\u0107. St\u0105d kolejne pytanie:<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>Zanim przejdziemy do pracy prosz\u0119 o instrukcj\u0119, jakie narz\u0119dzia powinienem przygotowa\u0107 do pracy lub (je\u015bli to konieczne) jak skonfigurowa\u0107 sw\u00f3j komputer z systemem Windows.<\/code><\/td><\/tr><\/tbody><\/table><\/figure><\/blockquote><p>Tu znowu chat si\u0119 rozp\u0119dzi\u0142, bo poza list\u0105 narz\u0119dzi otrzyma\u0142em ju\u017c pierwsze kroki do budowania aplikacji. Zauwa\u017ccie, \u017ce u\u017cy\u0142em s\u0142owa \u201cskonfigurowa\u0107\u201d, a to okre\u015blenie jest do\u015b\u0107 pojemne. Im bardziej konkretne macie oczekiwania tym precyzyjniej musicie je artyku\u0142owa\u0107. To tak\u017ce podstawa we wsp\u00f3\u0142pracy z deweloperami.<br><br><strong>A dlaczego w og\u00f3le tworzymy wtyczk\u0119 w przegl\u0105darce Chrome? <\/strong>Ka\u017cda aplikacja potrzebuje miejsca, w kt\u00f3rym mo\u017ce by\u0107 uruchomiona. Chrome zapewnia takie \u015brodowisko, co bardzo u\u0142atwi nam prac\u0119 na tym etapie. Dodatkowo potrzeba zainstalowa\u0107 program, w kt\u00f3rym b\u0119dziemy pisa\u0107 (czyli wkleja\u0107) kod. Asystent zaproponowa\u0142 kilka, z kt\u00f3rych ja wybra\u0142em Atom (bo ju\u017c go znam). Prawda jest taka, \u017ce w naszym przypadku m\u00f3g\u0142by to by\u0107 nawet zwyk\u0142y notatnik \u2013 ale to wersja dla puryst\u00f3w, co\u015b jak bycie kurierem i jazda rowerem na ostrym kole, takim bez przerzutek \ud83d\ude42<\/p><h4 class=\"wp-block-heading\"><strong>POC (Proof of concept czyli dow\u00f3d za\u0142o\u017ce\u0144 koncepcji)<\/strong><\/h4><p>Zanim ktokolwiek napisze pierwsz\u0105 linijk\u0119 kodu w danej firmie, specjali\u015bci od sprzeda\u017cy i rozwoju dog\u0142\u0119bnie sprawdzaj\u0105, czy rynek potrzebuje takiego rozwi\u0105zania, jakie mog\u0105 by\u0107 jego koszty, w jakiej technologii b\u0119dzie tworzony, etc. Pojawia si\u0119 wiele pyta\u0144 od deweloper\u00f3w, ale te\u017c potrzeba zweryfikowania pewnych za\u0142o\u017ce\u0144. Dlatego cz\u0119sto minimalnym nak\u0142adem buduje si\u0119 bardzo prost\u0105 wersj\u0119 (prototyp) aplikacji (lub jej fragment). Pozwala to niskim kosztem sprawdzi\u0107, czy na tak wczesnym etapie nie czaj\u0105 si\u0119 na naszej drodze do miliona jakie\u015b nieprzewidziane przeszkody.<br><br>Dlatego definiuj\u0105c pomys\u0142 maksymalnie go upro\u015bci\u0142em: zamieni\u0142em komara na kropk\u0119 i sprowadzi\u0142em zasady gry do jednego klikni\u0119cia. Podej\u015bcie takie pozwala przede wszystkim szybko doj\u015b\u0107 do momentu, gdzie b\u0119dzie mo\u017cna podejmowa\u0107 dalsze, kluczowe decyzje.<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>Mam ju\u017c zainstalowane wszystkie narz\u0119dzia. Zgodnie z pomys\u0142em zdefiniowanym powy\u017cej podaj instrukcj\u0119 (w krokach) co powinienem zrobi\u0107 dalej. Je\u015bli instrukcja b\u0119dzie mia\u0142a wi\u0119cej ni\u017c 5 krok\u00f3w - zatrzymaj si\u0119 i czekaj na potwierdzenie wykonania zadania.<\/code><\/td><\/tr><\/tbody><\/table><\/figure><\/blockquote><p>Taka forma pozwoli Wam na lepsz\u0105 nawigacj\u0119 w proponowanych krokach. Ostatecznie utworzy\u0142em w edytorze poni\u017csze pliki, wklei\u0142em do nich kod i zapisa\u0142em je w katalogu \u201cKomAI Killer\u201d na pulpicie.<\/p><ul class=\"wp-block-list\"><li><strong>manifest.json<\/strong>: Definiuje konfiguracj\u0119 wtyczki, w tym jej nazw\u0119, wersj\u0119, uprawnienia oraz pliki, kt\u00f3re s\u0105 w niej u\u017cywane.<\/li>\n\n<li><strong>index.html:<\/strong> Zawiera struktur\u0119 HTML dla interfejsu u\u017cytkownika wtyczki.<\/li>\n\n<li><strong>styles.css: <\/strong>Zawiera stylizacje CSS, kt\u00f3re okre\u015blaj\u0105 wygl\u0105d interfejsu u\u017cytkownika wtyczki.<\/li>\n\n<li><strong>script.js:<\/strong> Zawiera kod JavaScript, kt\u00f3ry dodaje interaktywno\u015b\u0107 i logik\u0119 do interfejsu u\u017cytkownika.<\/li>\n\n<li><strong>background.js:<\/strong> Zawiera kod JavaScript, kt\u00f3ry dzia\u0142a w tle i obs\u0142uguje zadania, kt\u00f3re nie s\u0105 bezpo\u015brednio zwi\u0105zane z interfejsem u\u017cytkownika, np. komunikacj\u0119 z serwerem lub obs\u0142ug\u0119 zdarze\u0144 przegl\u0105darki.<\/li><\/ul><p>Wida\u0107 tu jak w pigu\u0142ce, z jakich element\u00f3w mo\u017ce sk\u0142ada\u0107 si\u0119 program i za co one odpowiadaj\u0105: jeden kontroluje, jak aplikacja wygl\u0105da, drugi jak si\u0119 zachowuje, etc. Poni\u017cej przyk\u0142adowy krok z instrukcj\u0105 \u2013 jak wida\u0107 wszystko jest bardzo czytelne i dostosowane do mojego poziomu wiedzy.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"755\" height=\"627\" src=\"https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/05\/1.png\" alt=\"\" class=\"wp-image-1165\" srcset=\"https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/05\/1.png 755w, https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/05\/1-300x249.png 300w, https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/05\/1-600x498.png 600w\" sizes=\"auto, (max-width: 755px) 100vw, 755px\" \/><\/figure><p><br>Zawsze warto rzuci\u0107 okiem na to, co tam chat dla was zmajstrowa\u0142. Poza oswajaniem si\u0119 z nowymi rzeczami, w ka\u017cdej chwili mo\u017cecie poprosi\u0107 o wyja\u015bnienie (\u201cZa co odpowiedzialny jest ten fragment kodu?). Po dok\u0142adniejszej analizie zwr\u00f3ci\u0142em uwag\u0119, \u017ce model:<\/p><ul class=\"wp-block-list\"><li>Sam z siebie nazwa\u0142 wtyczk\u0119 \u201cBlue dot clicker\u201d<\/li>\n\n<li>Ustawi\u0142 j\u0119zyk aplikacji na angielski<\/li><\/ul><p>Ostatnim brakuj\u0105cym elementem by\u0142o przygotowanie ikony \u2013 jest to wymagane przez Chrome. Chat zaproponowa\u0142 tylko jedn\u0105, o rozmiarze 48 pixeli (wida\u0107 to na powy\u017cszym screenie). Co zatem robimy?<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>Przygotuj mi ikon\u0119 w formacie png o rozmiarze 48 pixeli, zawieraj\u0105c\u0105 niebiesk\u0105 kropk\u0119 na bia\u0142ym tle<\/code><\/td><\/tr><\/tbody><\/table><\/figure><\/blockquote><p>Dosta\u0142em ikon\u0119 do pobrania, kt\u00f3r\u0105 zapisa\u0142em na dysku. Z instrukcji wynika\u0142o, \u017ce to ca\u0142a &#8222;programistyczna&#8221; praca konieczna na tym etapie. Nie pozosta\u0142o nic innego jak rozpocz\u0105\u0107 testy. Zgodnie z instrukcj\u0105:<\/p><ul class=\"wp-block-list\"><li>Otworzy\u0142em przegl\u0105dark\u0119 Chrome i wywo\u0142a\u0142em URL chrome:\/\/extensions\/,<\/li>\n\n<li>W\u0142\u0105czy\u0142em tryb deweloperski (toggle w prawej, g\u00f3rnej cz\u0119\u015bci ekranu),<\/li>\n\n<li>Klikn\u0105\u0142em przycisk &#8222;Za\u0142aduj rozpakowany&#8221;&nbsp;,<\/li>\n\n<li>Wybra\u0142em folder KomAIKiller z dysku<\/li><\/ul><p>Bum! Na li\u015bcie wtyczek pojawi\u0142a si\u0119 moja w\u0142asna \ud83d\ude42&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"418\" height=\"226\" src=\"https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/05\/2.png\" alt=\"\" class=\"wp-image-1167\" srcset=\"https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/05\/2.png 418w, https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/05\/2-300x162.png 300w\" sizes=\"auto, (max-width: 418px) 100vw, 418px\" \/><\/figure><p>Konsola Chrome nie zg\u0142osi\u0142a na tym etapie \u017cadnych b\u0142\u0119d\u00f3w. Gdyby taki komunikat si\u0119 Wam pojawi\u0142 \u2013 wystarczy dok\u0142adnie go opisa\u0107 i w wi\u0119kszo\u015bci wypadk\u00f3w AI samo naprawi bug w kodzie.<br><br>Pozosta\u0142 ostatni element, czyli test \ud83d\ude42 Wywo\u0142a\u0142em wtyczk\u0119 i\u2026<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"452\" height=\"201\" src=\"https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/bluedoot.gif\" alt=\"\" class=\"wp-image-2072\"\/><\/figure><p>A teraz wr\u00f3\u0107my jeszcze do g\u0142\u00f3wnego promptu:<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>Zdefiniowanie pomys\u0142u: chcia\u0142bym stworzy\u0107 wtyczk\u0119 kt\u00f3ra, kt\u00f3ra po wywo\u0142aniu otworzy now\u0105 zak\u0142adk\u0119 w przegl\u0105darce Chrome [1], nast\u0119pnie wy\u015bwietli na \u015brodku bia\u0142ego ekranu kropk\u0119 w kolorze niebieskim [2]. Po klikni\u0119ciu w kropk\u0119 kursorem [3] na ekranie powinien pojawi\u0107 si\u0119 komunikat OK [4]. Potwierd\u017a, \u017ce zrozumia\u0142e\u015b i czekaj na dalsze instrukcje.<\/code><\/td><\/tr><\/tbody><\/table><\/figure><\/blockquote><p>Jak wida\u0107 poza warunkiem 1, wszystkie pozosta\u0142e zosta\u0142y zrealizowane. Wr\u00f3ci\u0142em do modelu z feedbackiem:<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td>Z<code>ainstalowa\u0142em i z powodzeniem uruchomi\u0142em wtyczk\u0119. Oto wyniki testu w odniesieniu do zdefiniowanego pomys\u0142u:<br><br>- Nie dzia\u0142a: \"po wywo\u0142aniu otworzy now\u0105 zak\u0142adk\u0119 w przegl\u0105darce Chrome,&nbsp;<br>- Nie dzia\u0142a: \"nast\u0119pnie wy\u015bwietli na \u015brodku bia\u0142ego ekranu kropk\u0119 w kolorze niebieskim\" - kropka pojawi\u0142a si\u0119 w rogu ekranu pod paskiem nawigacyjnym przegl\u0105darki.<br>- Dzia\u0142a: \"Po klikni\u0119ciu w kropk\u0119 kursorem na ekranie powinien pojawi\u0107 si\u0119 komunikat OK\"<br><br>Zaproponuj poprawki w kodzie, kt\u00f3re rozwi\u0105\u017c\u0105 powy\u017csze problemy<\/code>.<\/td><\/tr><\/tbody><\/table><\/figure><\/blockquote><p>Zauwa\u017ccie, \u017ce wykorzysta\u0142em cytaty z g\u0142\u00f3wnego promptu odwo\u0142uj\u0105c si\u0119 do rzeczy, kt\u00f3re powinien pami\u0119ta\u0107 model. W odpowiedzi dosta\u0142em kilka poprawek, kt\u00f3re zaktualizowa\u0142em w kodzie.<br><br>Bum! Po ponownym uruchomieniu nasza wtyczka wykona\u0142a wszystko co zak\u0142adali\u015bmy!<\/p><p>&nbsp;<img loading=\"lazy\" decoding=\"async\" width=\"1223\" height=\"613\" class=\"wp-image-2079\" style=\"width: 800px\" src=\"https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/fullscreen-2.gif\" alt=\"\"><\/p><p><strong>Najwa\u017cniejsze wnioski:<\/strong><\/p><ul class=\"wp-block-list\"><li>Mimo jasnej instrukcji model zapomnia\u0142 o kluczowym wymaganiu dla aplikacji.<\/li>\n\n<li>Warto dzieli\u0107 prac\u0119 na etapy (&#8222;czekaj na dalsze instrukcje&#8221;), inaczej model b\u0119dzie wybiega\u0142 do przodu i od razu dawa\u0142 pe\u0142ne rozwi\u0105zanie, niekoniecznie dobre.<\/li>\n\n<li>Poniewa\u017c okre\u015bli\u0142em stan swojej wiedzy &#8211; wszystko by\u0142o \u0142atwe do zrozumienia<\/li><\/ul><p><strong>Wszystkie powy\u017csze kroki mo\u017cna by zawrze\u0107 w jednym, dobrze ustrukturyzowanym prompcie. Otrzymaliby\u015bcie wtedy &#8222;gotowe&#8221; POC. Strategia ma\u0142ych krok\u00f3w &#8211; cho\u0107 pewnie zabieraj\u0105ca wi\u0119cej czasu &#8211; pozwala jednak lepiej zrozumie\u0107, co w kodzie aplikacji si\u0119 znajduje i przy okazji czego\u015b si\u0119 nauczy\u0107.<\/strong><\/p><p>Ostatnim krokiem by\u0142o nadanie plikom wersji. To wa\u017cny element pracy programistycznej, bo im bardziej kod staje si\u0119 rozbudowany i ma wi\u0119cej zaleznosci, tym wi\u0119ksze szanse, \u017ce pojawi\u0105 si\u0119 b\u0142\u0119dy trudne do zlokalizowania i tym samym rozwi\u0105zania. W takim przypadku czasami warto zrobi\u0107 krok w ty\u0142 \u2013 czyli przywr\u00f3ci\u0107 poprzedni\u0105 dzia\u0142aj\u0105c\u0105 wersj\u0119 i na spokojnie wszystko przeanalizowa\u0107. Dlatego napisa\u0142em:<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>Wszystko dzia\u0142a dok\u0142adnie z za\u0142o\u017ceniami. Zapisz t\u0105 wersj\u0119 aplikacji z tagiem 1.0 w swojej pami\u0119ci. W razie potrzeby przywo\u0142amy j\u0105 w celu wycofania zmian generuj\u0105cych problemy.<\/code><\/td><\/tr><\/tbody><\/table><\/figure><\/blockquote><p>Warto tak\u0105 instrukcj\u0119 dawa\u0107 po ka\u017cdym prawid\u0142owo zrealizowanym etapie. Co wi\u0119cej, nie musicie robi\u0107 notatek bowiem w odpowiedzi na prompt:<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>Podaj mi list\u0119 wszystkich zapisanych wersji aplikacji w twojej pami\u0119ci.<\/code><\/td><\/tr><\/tbody><\/table><\/figure><\/blockquote><p>\u2026chat poda wam wszystkie wersje \u2013 ale uwaga! \u2013 tylko tak d\u0142ugo jak prowadzisz dialog w tym samym czacie. Warto te\u017c prowadzi\u0107 w\u0142asne archiwum (tzw. repozytorium). Jak co\u015b si\u0119 posypie, zawsze mo\u017cna otworzy\u0107 nowych czat, wklei\u0107 wszystkie pliki i kontynuowa\u0107 prac\u0119. Z do\u015bwiadczenia wiem \u017ce taki \u201creset\u201d dobrze robi modelowi i oczy\u015bci go z niepotrzebnych \u015bmieci.<\/p><h4 class=\"wp-block-heading\"><strong>MVP (Minimum vailable product czyli wersja wystarczaj\u0105ca do wypuszczenia na rynek)<\/strong> <\/h4><p>Gdy zesp\u00f3\u0142 ju\u017c wie co &#8222;si\u0119 da, a co nie&#8221; \u2013 kolejnym etapem tworzenia programu jest przygotowanie pierwszej wersji, kt\u00f3r\u0105 udost\u0119pni (sprzeda) si\u0119 u\u017cytkownikom. To jeszcze nie musi by\u0107 idealnie dopieszczony produkt, ale przynajmniej taki, kt\u00f3ry w podstawowym zakresie spe\u0142ni wszystkie za\u0142o\u017cenia i b\u0119dzie si\u0119 nadawa\u0142 do sprzeda\u017cy. To b\u0119dzie te\u017c pierwsze zderzenie z rynkiem \u2013 niezale\u017cnie od bada\u0144 i test\u00f3w przeprowadzonych wcze\u015bniej. Premiera mo\u017ce si\u0119 te\u017c odby\u0107 dla wyselekcjonowanej grupy, by zebra\u0107 jej feedback i przychylno\u015b\u0107.<br><br>Zanim przeszed\u0142em do g\u0142\u00f3wnego programowania aplikacji chcia\u0142em dowiedzie\u0107 si\u0119 jeszcze jednego \u2013 jak poruszy\u0107 kropk\u0119. Przygotowa\u0142em taki prompt:<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>Ok, przechodzimy do kolejnego etapu. Zaktualizuj kod tak, by:<br>- niebieska kropka na ekranie porusza\u0142a si\u0119 w linii prostej w lewo i prawo<br>- pierwszy ruch od \u015brodka w prawo<br>- zakres ruchu to 200px od \u015brodka w ka\u017cd\u0105 stron\u0119<br>- po dotarciu do ko\u0144ca trasy kropka ma rozpocz\u0105\u0107 ruch w stron\u0119 przeciwn\u0105<br>- pr\u0119dko\u015b\u0107 kropki: umiarkowanie szybka<br>- kropka ma kontynuowa\u0107 ruch po klikni\u0119ciu OK<br>- wszystkie pozosta\u0142e warunki aplikacji bez zmian<\/code><\/td><\/tr><\/tbody><\/table><\/figure><\/blockquote><p>Chat bezb\u0142\u0119dnie zaktualizowa\u0142 kod, a ja dosta\u0142em:<\/p><p><img loading=\"lazy\" decoding=\"async\" width=\"1223\" height=\"613\" class=\"wp-image-2087\" style=\"width: 800px\" src=\"https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/fullscreen_2-1.gif\" alt=\"\"><\/p><p>Po kolejnych poprawkach mia\u0142em ju\u017c takie funkcje:<\/p><p><img loading=\"lazy\" decoding=\"async\" width=\"985\" height=\"942\" class=\"wp-image-1175\" style=\"width: 800px\" src=\"https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/05\/fullscreen_3.gif\" alt=\"\"><\/p><p><strong>Zauwa\u017ccie, \u017ce do tej pory w og\u00f3le nie zajmowa\u0142em si\u0119 wizualnym aspektem aplikacji, a skoncentrowa\u0142em si\u0119 na jej mechanice. Po\u015bwi\u0119ci\u0142em te\u017c czas na to, by monitorowa\u0107 zmiany w kodzie &#8211; dzi\u0119ki temu zacz\u0105\u0142em rozpoznawa\u0107, kt\u00f3re jego fragmenty odpowiadaj\u0105 za konkretny element gry. W pewnym momencie zacz\u0105\u0142em testowa\u0107 zmiany bezpo\u015brednio w plikach \u2013 przy okazji poznaj\u0105c troch\u0119 zasady HTML i JavaScript.<\/strong><br><br>Dodatkowo, by nie powtarza\u0107 si\u0119 w promptach utworzy\u0142em s\u0142ownik komend:<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>Od tej pory ka\u017cd\u0105 poprawn\u0105 wersj\u0119 aplikacji b\u0119dziemy zarz\u0105dza\u0107 nast\u0119puj\u0105cymi komendami<\/code>:<br><br><code>PUSH + wersja \u2013 zapis bie\u017c\u0105cego stanu dobrze dzia\u0142aj\u0105cej aplikacji w pami\u0119ci<\/code>.<br><code>REVERT + wersja \u2013 przywr\u00f3cenie danej wersji aplikacji z pami\u0119ci<\/code>.<br><code>PULL + wersja \u2013 udost\u0119pnienie danej wersji aplikacji do pobrania.<\/code><\/td><\/tr><\/tbody><\/table><\/figure><\/blockquote><p>I teraz podaj\u0105c w prompcie REVERT 1.3 &#8211; Chat GPT zaci\u0105gnie t\u0105 wersj\u0119 i na niej b\u0119dzie nanosi\u0142 kolejne zmiany. A dzi\u0119ki ostatniej komendzie nie trzeba ju\u017c przekopiowywa\u0107 zmian z czatu do edytora, a tylko podmienia\u0107 pliki w katalogu.<br><br><strong>I tu (prawie) podstawie kropk\u0119.<\/strong><br><br>Mam nadziej\u0119, \u017ce tutorial nie tylko pokaza\u0142 Wam, jak wydajnie tworzy\u0107 z Chatem GPT, ale te\u017c przybli\u017cy\u0142 kuchni\u0119 tworzenia aplikacji i zarz\u0105dzania w projektach IT. Warto tak pracowa\u0107 z AI, by nie wyr\u0119cza\u0142 Was w ca\u0142ej pracy, a wspiera\u0142 w powtarzalnych lub niezrozumia\u0142ych jej etapach. Dzi\u0119ki temu nie tylko nauczycie si\u0119 czego\u015b nowego, ale b\u0119dziecie mieli z tego i wi\u0119ksz\u0105 satysfakcj\u0119 i tak zwany \u201cfun\u201d.<\/p><p class=\"has-text-align-center\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"200\" class=\"wp-image-1635\" style=\"width: 200px;\" src=\"https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/tytul.png\" alt=\"\" srcset=\"https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/tytul.png 1024w, https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/tytul-300x300.png 300w, https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/tytul-150x150.png 150w, https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/tytul-768x768.png 768w, https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/tytul-600x600.png 600w, https:\/\/haimagazine.com\/wp-content\/uploads\/2024\/06\/tytul-100x100.png 100w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/p><p class=\"has-text-align-center\"><strong>Je\u015bli jeste\u015bcie ciekawi jak wygl\u0105da aktualna wersja Komar SnAIpera<\/strong> &#8211; <a href=\"https:\/\/drive.google.com\/file\/d\/1AxFN0OUx_JQY7ovKFIEvRqvJrU4yLJzn\/view?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><mark style=\"background-color:#82D65E\" class=\"has-inline-color has-contrast-color\">mo\u017cecie go pobra\u0107 tutaj<\/mark>.<\/strong><\/a><\/p><p>Tworzenie ka\u017cdej aplikacji praktycznie nigdy si\u0119 nie ko\u0144czy (no chyba, \u017ce firma upada, czyli jest jedn\u0105 z tych 9 na 10 nowo powstaj\u0105cych :)). Zawsze pojawia si\u0119 potrzeba nowych funkcji, ulepszenia starszych, a na koniec \u2013 przepisanie ca\u0142ej aplikacji na nowo, bo pojawi\u0142a si\u0119 nowa, wydajniejsza lub ta\u0144sza technologia.<\/p><p>\u017bycz\u0119 wam mi\u0142ej zabawy i nauki.<br><br><strong>Post scriptum<\/strong><\/p><p>1. Pokaza\u0142em aplikacj\u0119 do\u015bwiadczonemu deweloperowi, i powiedzia\u0142, \u017ce praktycznie nie ma si\u0119 do czego przyczepi\u0107 w kodzie. Aczkolwiek sam podszed\u0142by do projektu inaczej, zw\u0142aszcza wiedz\u0105c, \u017ce w perspektywie gra mo\u017ce sta\u0107 si\u0119 wielowarstwowa. Dlatego zak\u0142adam, \u017ce je\u015bli dalej b\u0119d\u0119 realizowa\u0142 nowe pomys\u0142y, to w pewnym momencie aplikacja oka\u017ce si\u0119 zbyt ma\u0142o elastyczna na dalsze rozbudowy, a ja nie b\u0119d\u0119 mia\u0142 poj\u0119cia, co dalej z ni\u0105 zrobi\u0107.<br><br>2. Do tej pory konsola Chrome nie zg\u0142osi\u0142a praktycznie \u017cadnego b\u0142\u0119d\u00f3w. Co nie znaczy, \u017ce w aplikacji ich nie ma. <a href=\"https:\/\/dl.acm.org\/doi\/pdf\/10.1145\/3613904.3642596\" target=\"_blank\" rel=\"noopener\"><mark style=\"background-color:#82D65E\" class=\"has-inline-color has-contrast-color\"><strong>Badania przeprowadzone przez Prude University<\/strong><\/mark><\/a> wykaza\u0142y, \u017ce ponad 50% kodu generowanego przez Chat GPT zawiera jeszcze bugi. Dlatego tak wa\u017cne jest ci\u0105g\u0142e testowanie kodu.<br><br>3. GPT nie zawsze poprawnie zapisuje wersje, np. poprosi\u0142em o przywo\u0142anie 1.7, a dosta\u0142em 1.6. Dlatego warto r\u00f3wnolegle zapisywa\u0107 kod na dysku i w razie potrzeby samodzielnie za\u0142adowa\u0107 w\u0142a\u015bciwe pliki.&nbsp;W pracy deweloperskiej do takich zada\u0144 stosuje si\u0119 odpowiednie repozytoria, np GitLab.<\/p><p>4. W pewnym momencie GPT pogubi\u0142o si\u0119 w rozwi\u0105zywaniu&nbsp; jednego problemu z pozycjonowaniem kropki\/komara. Przenios\u0142em wi\u0119c ca\u0142y kod do konkurencji czyli<a href=\"https:\/\/claude.ai\/\" target=\"_blank\" rel=\"noopener\"> <\/a><strong><a href=\"https:\/\/claude.ai\/\" target=\"_blank\" rel=\"noopener\"><mark style=\"background-color:#82D65E\" class=\"has-inline-color has-contrast-color\">claude.ai<\/mark><\/a> <\/strong>&#8211; wyglada na to, \u017ce lepiej radzi sobie z bardziej rozbudowanymi programami. UPDATE: zw\u0142aszcza jego ostatnia wersja Sonet 3.5.<\/p>","protected":false},"excerpt":{"rendered":"<p>Tutorial ten jest dla os\u00f3b, kt\u00f3re s\u0105 ciekawe jak \u2013 bez znajomo\u015bci programowania (ale z podstawowym zrozumieniem Chat GPT) \u2013 mo\u017cna napisa\u0107 prost\u0105 aplikacj\u0119 z pomoc\u0105 AI. <\/p>\n","protected":false},"author":10,"featured_media":1612,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_lock_modified_date":false,"footnotes":""},"categories":[763,406],"tags":[83,102,104,103],"popular":[],"difficulty-level":[36],"ppma_author":[352],"class_list":["post-2053","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai_praktyka","category-tutoriale-pl","tag-ai","tag-chrome-extension","tag-gaming","tag-tutorial","difficulty-level-easy"],"acf":[],"authors":[{"term_id":352,"user_id":10,"is_guest":0,"slug":"seweryn-jakubiec","display_name":"Seweryn Jakubiec","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/9f6a221b4ee0d45f9cb264964464c87cc2036e4466dc908a6ec21be51baff707?s=96&d=mm&r=g","first_name":"Seweryn","last_name":"Jakubiec","user_url":"","job_title":"","description":"Senior Product Manager w bran\u017cy IT, obserwator \u015bwiata tech i AI, muzyk-amator, wielbiciel kot\u00f3w rasy Devon Rex"}],"_links":{"self":[{"href":"https:\/\/haimagazine.com\/pl\/wp-json\/wp\/v2\/posts\/2053","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/haimagazine.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/haimagazine.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/haimagazine.com\/pl\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/haimagazine.com\/pl\/wp-json\/wp\/v2\/comments?post=2053"}],"version-history":[{"count":26,"href":"https:\/\/haimagazine.com\/pl\/wp-json\/wp\/v2\/posts\/2053\/revisions"}],"predecessor-version":[{"id":2870,"href":"https:\/\/haimagazine.com\/pl\/wp-json\/wp\/v2\/posts\/2053\/revisions\/2870"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/haimagazine.com\/pl\/wp-json\/wp\/v2\/media\/1612"}],"wp:attachment":[{"href":"https:\/\/haimagazine.com\/pl\/wp-json\/wp\/v2\/media?parent=2053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/haimagazine.com\/pl\/wp-json\/wp\/v2\/categories?post=2053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/haimagazine.com\/pl\/wp-json\/wp\/v2\/tags?post=2053"},{"taxonomy":"popular","embeddable":true,"href":"https:\/\/haimagazine.com\/pl\/wp-json\/wp\/v2\/popular?post=2053"},{"taxonomy":"difficulty-level","embeddable":true,"href":"https:\/\/haimagazine.com\/pl\/wp-json\/wp\/v2\/difficulty-level?post=2053"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/haimagazine.com\/pl\/wp-json\/wp\/v2\/ppma_author?post=2053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}