{"id":8031,"date":"2025-01-05T13:45:00","date_gmt":"2025-01-05T12:45:00","guid":{"rendered":"https:\/\/haimagazine.com\/?p=8031"},"modified":"2025-06-26T10:04:00","modified_gmt":"2025-06-26T08:04:00","slug":"zmaistruj-sobie-apke-czyli-jak-stworzyc-aplikacje-jednym-promptem","status":"publish","type":"post","link":"https:\/\/haimagazine.com\/pl\/narzedzia\/zmaistruj-sobie-apke-czyli-jak-stworzyc-aplikacje-jednym-promptem\/","title":{"rendered":"ZmAIstruj sobie apk\u0119, czyli jak stworzy\u0107 aplikacj\u0119 jednym promptem"},"content":{"rendered":"

Jaki\u015b czas temu przeprowadzi\u0142em si\u0119 z miasta na wie\u015b. Brak wsp\u00f3lnoty mieszkanowej zrzuca na cz\u0142owieka wiele nowych obowi\u0105zk\u00f3w. Jednym z nich jest ogarni\u0119cie wywozu \u015bmieci. Poprzez podpisanie umowy z Przedsi\u0119biorstwem Us\u0142ug Komunalnych (PUK) deklarujemy, \u017ce b\u0119dziemy odpowiedzialnie selekcjonowa\u0107 odpady w odpowiednio oznaczonych pojemnikach lub zapewnianych przez gmin\u0119 workach. W naszym przypadku wi\u0105\u017ce si\u0119 to r\u00f3wnie\u017c z tym, \u017ce zawsze musimy przy pami\u0119ta\u0107, by zawczasu wystawi\u0107 odpowiedni kube\u0142 za bram\u0119. A pami\u0119\u0107 \u2013 wiadomo \u2013 potrafi zawodzi\u0107.<\/p>

Na potrzeby niniejszego artyku\u0142u postanowi\u0142em stworzy\u0107 rozwi\u0105zanie, kt\u00f3re na telefonie da dost\u0119p do harmonogramu wywozu \u015bmieci w dowolnym momencie i miejscu. Jednocze\u015bnie chcia\u0142em, by informacja ta by\u0142a dost\u0119pna przy minimalnym wysi\u0142ku. Dodatkowo podczas prac chcia\u0142em sprawdzi\u0107, jaki post\u0119p poczyni\u0142y modele LLM je\u015bli chodzi o wsparcie w programowaniu. I podobnie jak przy projekcie wtyczki do Chrome<\/mark><\/a> <\/a><\/mark> pokaza\u0107 (w skali mikro), jak mo\u017ce wygl\u0105da\u0107 proces tworzenia produktu, kt\u00f3ry odpowiada na konkretn\u0105 potrzeb\u0119 u\u017cytkownika.<\/p>

Przegl\u0105d dost\u0119pnych rozwi\u0105za\u0144<\/strong><\/h4>

Istnieje kilka sposob\u00f3w, by dowiedzie\u0107 si\u0119 kiedy odbierane s\u0105 \u015bmieci:<\/p>

\u0179r\u00f3d\u0142o<\/strong><\/td>Minusy<\/strong><\/td><\/tr>
Drukowana broszura z harmonogramem<\/td>Trzeba pojecha\u0107 do urz\u0119du by j\u0105 odebra\u0107, zaraz si\u0119 gubi a na lod\u00f3wce nie ma na ni\u0105 ju\u017c miejsca, bo to zajmuj\u0105 magnesy<\/td><\/tr>
Strona gminy<\/td>Jest prze\u0142adowana tre\u015bciami, co sprawia, \u017ce czeka nas sporo klikania, by uzyska\u0107 jedn\u0105, prost\u0105 informacj\u0119<\/td><\/tr>
Aplikacja mieszka\u0144ca<\/td>By si\u0119 zarejestrowa\u0107, wymagana jest Karta Mieszka\u0144ca. Poza tym jest ca\u0142a (strona, nie karta) na czerwono, co mnie stresuje<\/td><\/tr>
Aplikacja PUK<\/td>By dowiedzie\u0107 si\u0119 kiedy odbieraj\u0105 moje \u015bmieci, musz\u0119 poda\u0107 wszystkie dane osobowe i czeka\u0107 48h na dost\u0119p<\/td><\/tr>
Zapytanie do Preplexity<\/td>Na pi\u0119\u0107 zapyta\u0144 trzy by\u0142y b\u0142\u0119dne. Tej ca\u0142ej sztucznej inteligencji chyba nie mo\u017cna ufa\u0107 \ud83d\ude09<\/td><\/tr><\/tbody><\/table><\/figure>

Nawet wyci\u0105gni\u0119cie informacji z poni\u017cszej tabelki zajmuje nam troch\u0119 czasu. I cz\u0119sto wi\u0105\u017ce si\u0119 z komentarzami w stylu: \u201eO matko, to papier by\u0142 wczoraj?\u201d i tym, \u017ce zostajemy ze stert\u0105 ikeowskich karton\u00f3w na kolejny miesi\u0105c.<\/p>

\"\"<\/p>

Wystawi\u0142e\u015b kube\u0142 za bram\u0119?<\/strong><\/h4>

Zacznijmy od precyzyjnego zdefiniowania potrzeby rynkowej. Jest ni\u0105 odpowied\u017a na pytanie:<\/p>

Jakie rodzaj \u015bmieci odbierany jest jutro?<\/em><\/p>

Wi\u0119kszo\u015b\u0107 mieszka\u0144c\u00f3w wystawia kub\u0142y\/worki z okre\u015blon\u0105 zawarto\u015bci\u0105 poprzedniego dnia. A \u015bmieciarka potrafi je\u017adzi\u0107 po okolicy od bardzo wczesnych godzin rannych. I nawet je\u015bli kto\u015b ma altank\u0119, do kt\u00f3rej jest dost\u0119p z ulicy, gmina prosi by mimo wszystko wystawia\u0107 odpady za bram\u0119, by u\u0142atwi\u0107 prac\u0119 ekipie. Ile\u017c to razy w kapciach i pi\u017camie zdarzy\u0142o si\u0119 wybiega\u0107 na ulic\u0119 po us\u0142yszeniu znajomego bip-bip. Z moj\u0105 apk\u0105 – nigdy wi\u0119cej!<\/p>

I tak narodzi\u0142a si\u0119 \u015amieciapka!<\/strong> W zwi\u0105zku z tym, \u017ce mamju\u017c konto w cyberfolks.pl, to w 10 minut i za 10 z\u0142 sta\u0142em si\u0119 posiadaczem stosownej domeny. Kolejnych 10 minut zaj\u0119\u0142o mi skonfigurowanie serwera, podpi\u0119cie certyfikatu SSL i ustawi\u0142enie dost\u0119pu przez FTPa, na kt\u00f3ry b\u0119d\u0119 wrzuca\u0142 kod aplikacji. Voila!<\/p>

\"\"<\/p>

Prosty prompt w ChatGPT zwr\u00f3ci\u0142 mi kilka propozycji ikonek, z kt\u00f3rych wybra\u0142em poni\u017csz\u0105.<\/p>

\"\"<\/p>

Ale po co mi w og\u00f3le ikona, domena i serwer www ju\u017c na tym etapie pracy?<\/p>

Technologia<\/strong><\/h4>

Dost\u0119pne narz\u0119dzia low\/no-code (np. Bubble<\/mark><\/a> czy Zapier<\/mark><\/a>) pozwalaj\u0105 na zrobienie aplikacji natywnej nawet osobom takim jak ja (czyli nie potrafi\u0105cym programowa\u0107). Z racji, \u017ce mia\u0142em plan, by podzieli\u0107 si\u0119 swoim dzie\u0142em z s\u0105siadami – przygotowanie jednocze\u015bnie aplikacji na IOs i Androida by\u0142o by zbyt czasoch\u0142onne. Dlatego zdecydowa\u0142em, \u017ce jako MVP zbuduje stron\u0119 www z mo\u017cliwo\u015bci\u0105 zapisania jej na pulpicie dowolnego telefonu \u2013 czyli w tak zwanej technologii progresywnej (PWA). To pozwoli u\u017cytkownikowi na szybkie wywo\u0142anie aplikacji, nawet bez dost\u0119pu do Internetu.<\/p>

By zweryfikowa\u0107 to za\u0142o\u017cenie (POC – proof of concept) przygotowa\u0142em dla Claudea nast\u0119puj\u0105cy prompt:<\/p>

Wygeneruj stron\u0119 www z wykorzystaniem technologii PWA (progresive web app) zawieraj\u0105c\u0105 nast\u0119puj\u0105ce tre\u015bci:

1. Tekst: \u201c\u015amieciapka.pl\u201d
2. Logo z pliku smieciapka.png, do umieszczenia w g\u0142\u00f3wnym katalogu

Elementy umieszczone w podanej kolejno\u015bci, centralnie na ekranie.

Po wywo\u0142aniu strony przez domen\u0119 smieciapka.pl w przegl\u0105darce na smartfonie lub laptopie u\u017cytkownik ma mie\u0107 mo\u017cliwo\u015b\u0107 zapisa\u0107 stron\u0119 na pulpicie urz\u0105dzenia - by wywo\u0142a\u0107 j\u0105 poza przegl\u0105dark\u0105.

Przygotuj wszystkie pliki potrzebne do wykonania powy\u017cszej operacji oraz kolejne kroki do wykonania.<\/code><\/td><\/tr><\/tbody><\/table><\/figure>

Claude wygenerowa\u0142 wszystkie potrzebne pliki (html, css, json, js), poinstruowa\u0142 mnie jak odpowiednio przygotowa\u0107 ikony oraz wyt\u0142umaczy\u0142, czego potrzeba do konfiguracji serwera www, by zadzia\u0142a\u0142o PWA (tzw. worker Apache). Pierwsza pr\u00f3ba wykaza\u0142a w konsoli przegl\u0105darki kilka b\u0142\u0119d\u00f3w (np. brak plik\u00f3w do PWA), ale Calude sprawnie je poprawi\u0142. Po odpaleniu strony na moim Iphonie w przegl\u0105darce Safari bez problemu mog\u0142em j\u0105 doda\u0107 do pulpitu jako apk\u0119. Przyszed\u0142 czas na MVP!<\/p>

\"\"<\/p>

Zakres prac i technologia<\/strong><\/h4>

Minimalistyczne podej\u015bcie do projektu wymusi\u0142o mocno zaw\u0119\u017cony zakres funkcjonalno\u015bci:<\/p>