ZmAIstruj sobie apkę, czyli jak stworzyć aplikację jednym promptem

Jakiś czas temu przeprowadziłem się z miasta na wieś. Brak wspólnoty mieszkanowej zrzuca na człowieka wiele nowych obowiązków. Jednym z nich jest ogarnięcie wywozu śmieci. Poprzez podpisanie umowy z Przedsiębiorstwem Usług Komunalnych (PUK) deklarujemy, że będziemy odpowiedzialnie selekcjonować odpady w odpowiednio oznaczonych pojemnikach lub zapewnianych przez gminę workach. W naszym przypadku wiąże się to również z tym, że zawsze musimy przy pamiętać, by zawczasu wystawić odpowiedni kubeł za bramę. A pamięć – wiadomo – potrafi zawodzić.

Na potrzeby niniejszego artykułu postanowiłem stworzyć rozwiązanie, które na telefonie da dostęp do harmonogramu wywozu śmieci w dowolnym momencie i miejscu. Jednocześnie chciałem, by informacja ta była dostępna przy minimalnym wysiłku. Dodatkowo podczas prac chciałem sprawdzić, jaki postęp poczyniły modele LLM jeśli chodzi o wsparcie w programowaniu. I podobnie jak przy projekcie wtyczki do Chrome pokazać (w skali mikro), jak może wyglądać proces tworzenia produktu, który odpowiada na konkretną potrzebę użytkownika.

Przegląd dostępnych rozwiązań

Istnieje kilka sposobów, by dowiedzieć się kiedy odbierane są śmieci:

Nawet wyciągnięcie informacji z poniższej tabelki zajmuje nam trochę czasu. I często wiąże się z komentarzami w stylu: „O matko, to papier był wczoraj?” i tym, że zostajemy ze stertą ikeowskich kartonów na kolejny miesiąc.

Wystawiłeś kubeł za bramę?

Zacznijmy od precyzyjnego zdefiniowania potrzeby rynkowej. Jest nią odpowiedź na pytanie:

Jakie rodzaj śmieci odbierany jest jutro?

Większość mieszkańców wystawia kubły/worki z określoną zawartością poprzedniego dnia. A śmieciarka potrafi jeździć po okolicy od bardzo wczesnych godzin rannych. I nawet jeśli ktoś ma altankę, do której jest dostęp z ulicy, gmina prosi by mimo wszystko wystawiać odpady za bramę, by ułatwić pracę ekipie. Ileż to razy w kapciach i piżamie zdarzyło się wybiegać na ulicę po usłyszeniu znajomego bip-bip. Z moją apką – nigdy więcej!

I tak narodziła się Śmieciapka! W związku z tym, że mamjuż konto w cyberfolks.pl, to w 10 minut i za 10 zł stałem się posiadaczem stosownej domeny. Kolejnych 10 minut zajęło mi skonfigurowanie serwera, podpięcie certyfikatu SSL i ustawiłenie dostępu przez FTPa, na który będę wrzucał kod aplikacji. Voila!

Prosty prompt w ChatGPT zwrócił mi kilka propozycji ikonek, z których wybrałem poniższą.

Ale po co mi w ogóle ikona, domena i serwer www już na tym etapie pracy?

Technologia

Dostępne narzędzia low/no-code (np. Bubble czy Zapier) pozwalają na zrobienie aplikacji natywnej nawet osobom takim jak ja (czyli nie potrafiącym programować). Z racji, że miałem plan, by podzielić się swoim dziełem z sąsiadami – przygotowanie jednocześnie aplikacji na IOs i Androida było by zbyt czasochłonne. Dlatego zdecydowałem, że jako MVP zbuduje stronę www z możliwością zapisania jej na pulpicie dowolnego telefonu – czyli w tak zwanej technologii progresywnej (PWA). To pozwoli użytkownikowi na szybkie wywołanie aplikacji, nawet bez dostępu do Internetu.

By zweryfikować to założenie (POC – proof of concept) przygotowałem dla Claudea następujący prompt:

Claude wygenerował wszystkie potrzebne pliki (html, css, json, js), poinstruował mnie jak odpowiednio przygotować ikony oraz wytłumaczył, czego potrzeba do konfiguracji serwera www, by zadziałało PWA (tzw. worker Apache). Pierwsza próba wykazała w konsoli przeglądarki kilka błędów (np. brak plików do PWA), ale Calude sprawnie je poprawił. Po odpaleniu strony na moim Iphonie w przeglądarce Safari bez problemu mogłem ją dodać do pulpitu jako apkę. Przyszedł czas na MVP!

Zakres prac i technologia

Minimalistyczne podejście do projektu wymusiło mocno zawężony zakres funkcjonalności:

• jedna strona,
• dane tylko dla mojej miejscowości,
• pokazuje dzisiejszą datę,
• jeśli w następnym dniu jest odbiór – pokazuje ikonkę z rodzajem śmieci,
• jeśli w następnym dniu nie ma odbioru – pokazuje śmieszny obrazek.

Do głowy przychodziła mi masa pomysłów na kolejne funkcjonalności: harmonogramy innych miejscowości, instrukcje jak segregować śmieci, wyprzedzającą informację o odbiorze gabarytów… Wszystko oczywiście z myślą o potencjalnym udostępnieniu apki mieszkańcom mojej wsi. I na tym polega właśnie piękno i przekleństwo pracy nad oprogramowaniem; nadmiar pomysłów i entuzjazmu sprawiają, że z oczu czasem traci się główny cel, projekty zaczynają się rozjeżdżać, kasa kończyć, etc. Przy wsparciu AI można bardzo szybko wprowadzić produkt na rynek, a potem – jeżeli mamy biznesowe podstawy i feedback od użytkowników – dalej go rozwijać.

Aplikację chciałem zbudować jednym promptem. Żeby zadziałał, musiałem wcześniej przygotować wszystkie potrzebne dane i składowe aplikacji. Cześć z nich miałem już z wersji POC, jednak postanowiłem, że docelową aplikację zbuduje od nowa. 

Dane

Jedyny plik z danymi dostępny na stronie gminy jest w formie PDFa, który słabo nadaje się do konwersji. No ale od czego mamy AI? Wyciągnąłem z PDFa interesującą mnie tabelkę (screenshot powyżej) i wraz z poniższym promptem wrzuciłem wszystko do Calude’a:

Wygenerowany przez Claud’a JSON zawierał wszystkie informacje, bez żadnych błędów. Dodatkowo model zaproponował nazwy ikon, które powinny zostać przypisane do każdej kategorii.

Zainspirowany i by oddać hołd oryginalnemu źródłu wiedzy, skopiowałem ikonki z broszury, tak by wyświetlały się w aplikacji.

One prompt to rule them all

Uzbrojony we wszystkie składowe zacząłem pracować nad finalnym promptem. Zależało mi, by Claude już za pierwszym razem wygenerował dokładnie to, o co mi chodziło.

Jak widzicie w prompcie wykorzystałem wiedzę, którą uzyskałem na etapie POC. Zrobiłem to, by zminimalizować prawdopodobieństwo, że Calude przygotuje dodatkowe instrukcje. Przy okazji zaktualizowałem plik harmonogram.json tak, by uwzględniał stosowne nazwy ikon.

Claude potwierdził, że wszystko jest jasne i wygenerował potrzebne pliki. Wrzuciłem je na serwer. Czekała mnie jeszcze chwila niepewności… i działa! Dokładnie tak, jak sobie wymyśliłem.

Pozostał ostatni element, czyli testy. Ponieważ apka odświeża się co 24 godziny, musiałbym czekać do kolejnego dnia, by sprawdzić poprawność wyświetlania. Dzięki temu, że zapisałem harmonogram w pliku .json wystarczyło zasymulować odbiór w dniu kolejnym i podmienić plik na serwerze. Wszystko zadziałało perfekcyjnie.

Możemy zatem wrócić pytania postawionego w tytule artykułu:

Czy mimo wszystko jest to tak proste jak się wydaje? 

Jeśli mamy bardzo konkretne oczekiwania względem modelu AI, to nadal warto przystąpić do pracy z konkretnym planem. Głównie po to, by kontrolować jego każdy etap. Nie znaczy to też, że po drodze nasze założenia nie będą ewoluować. Ważne jednak by zmiany działy się na naszych warunkach i nie brać każdej propozycji AI w ciemno.

A jeśli nasze oczekiwania są mniej ambitne? Całe powyższe zadanie można wykonać dosłownie w kilkanaście sekund. Wystarczy wrzucić do Claude’a tabelkę z harmonogramem i promptem:

Rezultat: gotowa strona z precyzyjną informacją.

Wersja last minute?

Rezultat: błędy są, ale działa.

Wersja po najmniejszej lini oporu?

Wynik? Najlepszy ze wszystkich trzech!

Claude za każdym razem generuje unikalny URL z aplikacją. Oczywiście dla finalnego produktu to mało bezpieczne rozwiązanie, ale do weryfikacji hipotez z użytkownikami nie znajdziemy chyba nic lepszego.

Filozoficzny twist na koniec

Przyznam, że pisanie tego artykułu było dla mnie bardzo ciekawym doświadczeniem. Od entuzjazmu w stylu „Ale mam fajny pomysł na tutorial!” po niepokój w głowie i pytania o to „Jak żyć panie premierze?” Marta Matylda Kania w książce Kody Kreatywności opisała rozpacz utraconego pierwszeństwa; poczucie, że AI przez wyręczanie nas we wszystkim co kreatywne, będzie tworzyć w człowieku pewną pustkę i smutek. Owszem, pisanie tego artykułu (i sprawdzanie różnych założeń) dało mi dużo frajdy. Ale też odniosłem wrażenie, że być może zbliża się moment, gdzie wielu twórców (tekstu, piosenki, książki, filmu) będzie biło się z myślą – czy to nie jest już ten ostatni? I czy już niedługo będziemy musieli się nauczyć motywować do wysiłku umysłowego, tylko i wyłącznie dla własnej satysfakcji i spokoju sumienia? Tak, by nie stać się blobem z filmu Pixara “Wall-E” 🙂

Źródło: pixar.com

Przy pracy nad artykułem korzystałem z płatnej wersji Claud’a. Da się całość ogarnąć wersją bezpłatną, ale trzeba robić przerwy na załadowanie się darmowych tokenów.

PS: Wersja dostępna obecnie na stronie jest tą, którą udostępniłem mieszkańcom. O kolejnych iteracjach i o reakcjach napiszę w kolejnych artykułach.