Mogę już podsumować mój walentynkowy side-project: Generator Produktowych Walentynek 💖. Coś, co miało być bardziej praktyczną zabawą z AI i żartem, całkiem nieźle poniosło się w naszej produktowej społeczności ;).

Dzisiaj pokażę Ci, jakie były wyniki mojego eksperymentu 📈 (będą konkretne liczby!), ale przede wszystkim w jaki sposób, krok po kroku, stworzyłem projekt z wykorzystaniem AI 🤖 (użyłem ChatGPT, Claude, Gemini).

Całość zajęła mi jakieś 6h. Zaczynamy!

• 1️⃣ KONTEKST

• 2️⃣ BUDOWA PROJEKTU - krok po kroku

  • 2.1. Rozkmina jak to w ogóle zrobić (45 min.)?

  • 2.2. Pierwszy prototyp (15 min.)

  • 2.3. Generowanie walentynek (60 min.)

  • 2.4. Przygotowaniu kodu i kolejne ficzery (2h)

  • 2.5. Debugowaniu - naprawa błędów (2h)

  • 2.6. Deployment strony (30 min)

  • 2.7. Konfiguracja domeny i DNS-ów (30 min)

  • 2.8. Finalne rozwiązanie

• 3️⃣ LAUNCH PRODUKTU (walentyki, 7:00)

• 4️⃣ WYNIKI EKSPERYMENTU

• 5️⃣ WNIOSKI

1️⃣ KONTEKST

Czasem najlepsze projekty zaczynają się od "a co by było, gdyby...?" 🤔

13 lutego scrollowałem LinkedIn i trafiłem na walentynki UXowe Krzyśka Miotka. Zatrzymałem się na chwilę i pomyślałem - a co gdyby pójść krok dalej? Co gdyby stworzyć generator takich walentynek, ale z produktowym twistem? I to... na już, bo walentynki już jutro!

Idealne zadanie dla product managera wyposażonego w AI 😉. Zgrywało mi się to też dobrze z moim aktualnie priorytetami - jak najwięcej i najpraktyczniej używać.

Dlaczego akurat taki projekt?

Wierzę w ultra-naukę - uczenie się przez robienie realnej, intensywnej pracy. Fajnie sobie poeksperymentować z pomysłami do szuflady, ale najwięcej uczymy się wtedy, gdy się zderzamy z realnymi sytuacjami. To samo zresztą praktykuję na moich szkoleniach w Product Academy.

Ten projekt idealnie się do tego nadawał:

• Konkretny deadline (walentynki!) - nie ma czasu na przekładanie na później, walentynki już jutro, więc mamy mocny ASAP

• Jasno określone zadanie - wiem co chcę osiągnąć (more or less)

• Realni użytkownicy - produkt musi naprawdę działać, nie wystarczy "prawie działa"

• Niskie ryzyko - jak nie wypali, to świat się nie zawali

Moje cele:

Stawiałem przed sobą dwa główne cele:

• Nauka: Chciałem w praktyce zobaczyć, jak AI może mi pomagać przy budowie produktów

• Zabawa: Jak się uczyć to na czymś, co człowieka jara i przy okazji pomoże innym (np. wywoła u nich uśmiech ;))

Finalnym efektem mojej pracy miało być wystartowanie 14 lutego rano Generator Produktowych Walentynek, który pozwolił każdemu wyrazić swoje uczucia w trochę... "produktowy" sposób 😄.

Poniżej sneek peek wypracowanego rozwiązania:

Wsparcie AI - trójka moich asystentów

Do projektu zaangażowałem trójkę asystentów AI:

• ChatGPT - już wcześniej z nim eksperymentowałem przy różnych projektach, był też moim produktowym Asystentem przez 30 dni.

• Claude - sporadycznie korzystałem do generowania prostych tekstów

• Gemini Advanced - dostępny w ramach mojego pakietu Google Workspace

I tak, z kubkiem herbaty i trzema otwartymi chatami AI w preglądarce, rozpocząłem swój 6-godzinny sprint przez świat AI-powered developmentu.

2️⃣ BUDOWA PROJEKTU - krok po kroku

Poniżej pokażę Ci w szczegółach jak budowa tego rozwiązania wyglądała krok po kroku. Czekało na mnie sporo wyzwań:

• 1. Rozkminianie planu i decyzji - szczególnie tych odnośnie technologii

• 2. Pierwszy prototyp rozwiązania

• 3. Przygotowaniu walentynek: To była najprostsza część - AI świetnie nadaje się do generowania pomysłów na teksty.

• 4. Przygotowaniu kodu i rozwoju aplikacji: To było najtrudniejsze zadanie - AI pomogło mi w wygenerowaniu kodu HTML, CSS i JavaScript, a następnie w dodawaniu kolejnych funkcjonalności, takich jak losowanie grafik, nanoszenie tekstu, udostępnianie linków i zapisywanie grafik.

• 5. Debugowanie: AI pomogło mi w znalezieniu i naprawieniu błędów w kodzie.

• 6. Wybór miejsca na deployment: AI pomogło mi w wyborze odpowiedniego hostingu dla mojej aplikacji.

• 7. Konfiguracji DNSów: AI poprowadziło mnie krok po kroku przez proces konfiguracji domeny.

2.1. Rozkmina jak to w ogóle zrobić (45 min.)?

Na początku nie byłem w ogóle pewien, jak się za to wszystko zabrać. Jest iskra, jest pomysł. Ale jak to tak naprawdę zrealizować?

Na start pomyslałem o wykorzystaniu trochę mi już znanych narzędziach no-code:

• ❌ Prostych, jak Coda (bardziej zaawansowana alternatywa dla Notion) - po chwili zabawy okazało się, że nie da to jednak fajnego efektu.

• ❌ Bardziej złożonych, jak Bubble. Zrobiłem nawet mały eksperyment z wygenerowaniem aplikacji za pomocą tekstowego prompta, ale nie byłem zadowolony z efektów, a bałem się, że przez małą znajomość tematu przy dostosowaniu utknę na długie godziny. Bubble dopiero poznaję i nie ma opcji, żebym nauczył się zrobić coś sensownego w kilka godzin.

Zapytałem więc ChatGPT o radę:

TOM: Czy jest jakaś aplikacja, w której łatwo zrobię generator kartek walentynkowych dostępnych pod linkiem? Karty są brane z przygotowanej odgórnie bazy grafik. Użytkownik może na tę kartkę dopisać liścik - notatkę lub randomowo wybrać kolejną grafikę. Użytkownik może udostępnić grafikę na LinkedIn lub pod linkiem

• ❌ Gotowe narzędzia online (zero kodowania) - w tym nie widziałem opcji generatora.

• ❌ No-code / Low-code (trochę więcej kontroli) - tu moje rozkminy z Bubble pokazały, że to nie to. Pozostałem narzędzia były równie zaawansowane.

• ✅ Kodowanie (jeśli chcesz coś customowego, ale proste do zrobienia) - to chyba to w co powinienem jednak iść. To jest zresztą scenariusz, który najbardziej chciałem przetestować w kontekście nauki współpracy z AI.

Na końcu chat zadał mi proste, ale dobre pytanie: “Masz już jakieś preferencje co do technologii?“

Miałem trochę doświadczenia z HTML-em, więc:

TOM: Czy da się to zrobić w samym HTML?

Super! Zaczyna mieć to sens.

2.2. Pierwszy prototyp (15 min.)

ChatGPT zapytał mnie na koniec poprzedniej części rozmowy:

CHAT: Chcesz, żebym napisał Ci gotowy kod?

Pewnie, że chcę! Od razu będę miał prototyp i zweryfikuję, czy to jest sensowny kierunek:

• Poprosiłem o wygenerowanie kodu.

• Poprosiłem też o dodanie opcji wpisywania liściku do walentynki.

Tak wyglądał pierwszy wygenerowany prototyp:

Efekt finalny nie był idealny (w końcu to prototyp), ale pokazał, że to jest kierunek, w którym chcę iść. I tu IMHO jest jednak z największych potęg AI dla PMa - dojście do takiego działającego prototypu zajęło mi zaledwie kilkanaście minut.

Fajną opcja jest to, że w ChatGPT (Claude i Gemini również) jest możliwość łatwego podglądu, jak wygnerowany kod realnie działa. Idealnie nadaje się to do prototypownia!

Kolejna fajną opcją było to, że chat tłumaczył swoje zamiany, sam proponował dalszy rozwój - zasugerował, gdzie wygnerowaną stronę można osadzić (przydało mi się to przy rozkminie na temat deploymentu) :

Tu możesz zobaczyć pełen przebieg konwersacji z chatem na tym etapie: