Szybkie tworzenie aplikacji

Każdego dnia firmy z różnych branż realizują rutynowe zadania, pochłaniające godziny pracy ich specjalistów. Wiesz, że możesz stworzyć narzędzie, które wykona te powtarzalne zadania w mniej więcej 15 minut?

Zanim przejdę do zastosowanych przeze mnie rozwiązań, przyda się wyjaśnić parę pojęć.

🧠 Agenci do programowania to inteligentne narzędzia wspomagane sztuczną inteligencją, które mogą samodzielnie pisać kod, testować go i poprawiać na podstawie poleceń użytkowników. Działają jak wirtualni asystenci, przyspieszając proces tworzenia oprogramowania i automatyzując powtarzalne zadania.

Tryb agenta w edytorze kodu Cursor oraz nowe narzędzie Claude Code otwierają zupełnie nowe możliwości. Teraz nawet osoby, które nie potrafią programować, mogą tworzyć aplikacje automatyzujące codzienną pracę.

Case study: automatyzacja procesu dla firmy budującej roboty

Pewnie zastanawiasz się, jak to możliwe i jak się to robi? Wyjaśnię na przykładzie 😉

Jedna z firm, z którą współpracuję, musi regularnie przygotowywać tabliczki oznaczeniowe do cięcia laserowego. Dotychczas cały proces wyglądał mniej więcej tak:

👉 Krok pierwszy: Poszukiwanie oznaczeń w dokumentacji technicznej
👉 Krok drugi: Przepisywanie wartości oznaczeń do arkusza kalkulacyjnego
👉 Krok trzeci: Projektowanie układu tabliczek i ich oznaczeń w edytorze graficznym
👉 Krok czwarty: Eksport do pliku w formacie SVG
👉 Krok piąty: Wysyłka na laser

Doświadczona osoba potrzebowała na to około godziny. Czasami jednak musiała powtarzać ten sam proces kilka razy w tygodniu.

🚀 A gdyby tak skrócić ten czas do minuty i sprawić, żeby każdy - nawet osoby bez specjalistycznej wiedzy - mogły wykonać to zadanie dużo szybciej?

Czy stworzenie aplikacji zajęło mi właśnie 15 minut?

Do rozwiązania problemu klienta postanowiłem wykorzystać tryb agenta w edytorze Cursor oraz model Claude-3.7-Sonnet.

🧠 Modele to systemy AI uczące się na dużych zbiorach danych, aby rozumieć język i generować odpowiedzi. Służą do analizowania informacji, automatyzacji procesów i wspierania użytkowników w rozwiązywaniu problemów. Model Claude-3.7-Sonnet jest obecnie jedną z nowoczesnych wersji AI, zaprojektowaną do efektywnej analizy i wsparcia.

🧠 ChatGPT to model AI, który rozumie i generuje tekst. Pomaga w pisaniu, tłumaczeniu, analizie danych i innych zadaniach, dostosowując się do kontekstu rozmowy.

🔧 Z pomocą ChatGPT zdefiniowałem cele projektowe, dzięki którym mogłem stworzyć plan działania. Następnie, korzystając z edytora Cursor w trybie agenta, wkleiłem poniższy prompt (polecenie dla AI) do chata i pozwoliłem agentowi zająć się resztą:

Cel Projektu

Stworzenie aplikacji, która przyjmuje listę oznaczeń od użytkownika i generuje plik SVG zawierający wiele tabliczek, każdą z unikalnym oznaczeniem zastępującym domyślny tekst „-20B2” w szablonie.

Punkt Wyjścia

Dysponujesz jedynie plikiem template.svg, który zawiera pojedynczy projekt tabliczki z tekstem „-20B2”.

Kluczowa Funkcjonalność

- Umożliwienie użytkownikom wprowadzania wielu oznaczeń (jedno na linię).
- Dla każdego oznaczenia utworzenie kopii tabliczki z szablonu.
- Zamiana tekstu „-20B2” na oznaczenie użytkownika na każdej tabliczce.
- Rozmieszczenie tabliczek w układzie siatki (maksymalnie 2 tabliczki w jednym wierszu).
- Wizualny podgląd końcowego efektu.
- Możliwość pobrania wygenerowanego pliku SVG.

Kluczowe Wymagania

Obsługa Tekstu

- Jeśli oznaczenie ma więcej niż 5 znaków lub zawiera spację, należy podzielić je na dwie linie.

Układ

- Rozmieszczenie tabliczek z określonym odstępem (szczegóły poniżej).
- Prawidłowe przekształcenie wszystkich elementów SVG (ścieżek, tekstu, okręgów) przy rozmieszczaniu wielu tabliczek.

Podgląd

- Wyświetlenie użytkownikowi podglądu końcowego wyglądu pliku SVG przed pobraniem.

Dokładne Specyfikacje Odstępów

- Odstęp poziomy: 8 jednostek między tabliczkami w tym samym wierszu.
- Odstęp pionowy: 0 jednostek między wierszami (tabliczki w różnych wierszach stykają się pionowo).
- Marginesy: 5 jednostek marginesu po lewej i prawej stronie całego pliku SVG.

Wygląd Wizualny

- Końcowy plik SVG powinien zachować dokładnie taki sam styl wizualny jak szablon.
- Każda tabliczka powinna być identyczna jak w szablonie, z wyjątkiem tekstu oznaczenia.

Doświadczenie Użytkownika

- Prosty interfejs z polem tekstowym do wprowadzania oznaczeń i obszarem podglądu.
- Natychmiastowa aktualizacja podglądu podczas wpisywania.
- Jasno widoczna opcja pobrania końcowego pliku SVG.

Technologia, język programowania i sposób implementacji są dowolne – kluczowe jest, aby końcowy plik SVG spełniał założone wymagania.

Tak, całość zajęła mi mniej więcej 15 minut 😁 W tym czasie Cursor właściwie sam napisał aplikację, która zadziałała poprawnie już za pierwszym razem.

Co się zmieniło?

Proces, który do tej pory zabierał jednej osobie godzinę, teraz zajmuje tylko minutę i składa się z banalnie prostych kroków, które w większości wykonuje aplikacja:

👉 Krok pierwszy: wklejenie listy oznaczeń do aplikacji
👉 Krok drugi: wygenerowanie podglądu tabliczek w SVG przez aplikację
👉 Krok trzeci: pobranie gotowego pliku i wysyłka na laser

🚀 Masz powtarzalne zadanie, które zajmuje zdecydowanie za dużo czasu? To wystarczająco dobry powód, żeby sprawdzić, jak działa tryb agenta w edytorze Cursor.