Od pomysłu do realizacji w godzinę czyli tworzenie aplikacji z Cursor AI

Co można zrobić w godzinę? Zależy, kogo zapytacie. Ja mogę powiedzieć, że można stworzyć aplikację webową, która jest skrojona pode mnie i zastępuje mi np. Todoist.

Oczywiście, jak wszystko, ma to swoje ograniczenia, bo nie jest podłączona (na razie) do sieci i mogę odpalić ją tylko na localhoście, ale od czegoś trzeba zacząć.

Aplikacją, która stworzyła mi sztuczna inteligencja, to tracker metody 12 Week Year, czyli metoda, w której zamiast celów rocznych mamy cele kwartalne, ale są celami, które “normalnie” zaplanowalibysmy na rok. Za taką metodą przemawia fakt, że nakłada na nas presję pracy z naszym ‚rocznym’ celem każdego dnia. Nie możemy zająć się tym w przyszłym tygodniu, bo w ujęciu rocznym byłby to następny miesiąc.

Co potrzebowałem do stworzenia czegoś takiego ?

• chwila na zastanowienie się, jak ma to wyglądać i co ma robić
• Prompt – tutaj specjalnie napisałem instrukcje w bardzo prosty sposób, bo miało to być jak prompt kogoś zupełnie ‚zielonego’ w tym temacie, poza wskazaniem na jakim localhoście chcę to mieć
• Cursor AI – wykorzystałem już darmowy okres próbny, ale aplikacja jest do zrobienia całkowicie za darmo
• Nowy folder, w którym program będzie mógł tworzyć pliki
• Około godziny czasu

Za pierwszym razem, kiedy testowałem Cursora, chciałem, żeby ta aplikacja była napisana w Pythonie i wyszło to bardzo średnio. Tym razem opowiedziałem tylko co chcę i zostawiłem Cursorowi dobór języka. Postawił na JavaScript.

Prompt:

Chce stworzyć w Dockerze aplikację webową.

Aplikacja ma działać jak lista To-Do, ale zgodna z metodą ‘12-weeks year’

Na samej górze chce dodać swoje roczne plany. Mają się układać jak klocki, jeden obok drugiego, z opcją zaznaczenia, że któryś jest wykonany. Task ze statusem ‘Wykonany” ma być przeniesiony na sam koniec. Ma to być wszystko możliwe do zminimalizowania, bo nie zawsze chce oglądać roczne cele.

Pod spodem chce widzieć aktualny tydzień, gdzie tydzień nr 1 zaczyna się we wtorek 01.01.2025, tydzień nr 2 trwa 06.01.2025 do 12.01.2025 itp.

Niżej chce widzieć, w którym tygodniu aktualnie jestem np. Week 8 of 12.

Poniżej chce mieć 12 kółek w środku których jest numer tygodnia, jeśli jest to akualny tydzień, to ma to być podświetlone na zielono.

Poniżej chce mieć możliwość dodania Celu dla 12-sto tygodniowego okresu. Zachowanie ma być podobne jak dla celów rocznych.

Poniżej chce dodawać tygodniowe taski. Zachowanie ma być podobne, jak dla celów rocznych i 12-sto tygodniowych z tą różnicą, że mam mieć możliwośc wybrania daty wykonania z kalendarza (kalendarz ma się pojawiać po naciśnięciu jakiejś ikonki) i jeżeli miałem to zadania wykonać wczoraj, to ma być wypełnione na jasny czerwony.

Ustaw to na localhoście 1122.

I tyle. Proste opisanie tego, czego potrzebuje. Nie trzeba tutaj programistycznej wiedzy, wystarczy sobie to narysować na kartce albo tablecie i opisać od góry do dołu.

Cały prompt wrzucamy w Chat (odkrywając go zaznaczoną ikoną) i czekamy.

Pro Tip: mam folder (Projects), w którym mam podfoldery dla każdego projektu. Kiedy wybrałem cały folder Projects tworzenie plików już nie szło tak gładko i się gubił. Cursor, w mojej ocenie, dużo lepiej sobie radzi, kiedy ma otwarty tylko folder z danym projektem.

Kiedy pliki zostaną stworzone, akceptuje wprowadzone zmiany (tutaj po prostu akceptujemy kod, który został wygenerowany poraz pierwszy) i mamy strukturę folderów i plików.

Appkę chciałem w Dockerze, bo planuje ją umieścić na swoim NASie, więc o to też poprosiłem:

Próbowałem to pierwszy raz zbudować, ale wyskoczył error związany z npm (zaznaczony fragment to moja odpowiedź):

Zaproponowane rozwiązanie pomogło i kolejny błąd, który dostałem, dotyczył brakującego pliku:

Cursor stworzył ten plik i można było lecieć dalej.

Appka zbudowana, można działać. Niestety wyglądało to tak:

Pierwsze, co mi przyszło na myśl…

Po kilku testach zmieniłem kilka funkcji i poprosiłem o ulepszenie UI.

Efekt po około godzinie pracy:

Czy appka jest w jakikolwiek sposób skończona?

Czy można myśleć o jej spieniężeniu?

Czy mogę ją uznać za pomocną?

Nie, nie i … tak! Bałbym się sprzedawać produkt, którego w ogóle nie znam i nie wiem jak poprawnie zdebugować albo jak dodawać nowe funkcjonalności. Pytanie też pozostaje otwarte, czy byłoby etyczne sprzedawać produkt, który stworzył ‘ktoś’ inny?

Mnie się aplikacja podoba. Spełnia moje oczekiwania, mam pod ręką ‘programistę’, który w razie czego coś poprawi albo doda. Chciałem po prostu trzymać rękę na pulsie, jeśli chodzi o moje plany i ich realizację i udało się.

Polecam każdemu spróbować. Może piszecie dziennie praktycznie to samo na kartce i później odhaczacie, może chcecie śledzić któryś ze swoich procesów. Cokolwiek by to nie było, można zrobić prostą webową aplikację, która Wam przy tym pomoże.

W komentarzach zostawcie swoje pomysły i zbudujmy coś razem!

P.S. Wrzuciłem swój ‘wspaniały’ prompt do ChatGPT, gdzie mam GPTSa o nazwie ‘Prompt Engineer”. Polecam pobrać. Kilka razy mi pomógl i efekt był ok. Poniżej efekt pracy GPTsa;:

Autor: Mateusz Wąsalski