Prototypowanie z AI – Lovable (od pomysłu do MVP we fra… — Transcript

Lekcja pokazująca, jak stworzyć MVP produktu AI bez kodowania, korzystając z frameworku F.R.A.M.E. i narzędzia Lovable.

Key Takeaways

Można zbudować działające MVP bez kodowania, używając AI i promptów w języku angielskim.
Framework F.R.A.M.E. ułatwia systematyczne podejście do prototypowania produktów cyfrowych.
Narzędzia AI, takie jak Lovable i Gemini, znacznie przyspieszają proces tworzenia i testowania produktów.
Przestań być tylko pomysłodawcą, zacznij samodzielnie tworzyć prototypy i działające aplikacje.
Darmowe kredyty i prosty interfejs pozwalają łatwo rozpocząć pracę z AI bez inwestycji.

Summary

Prezentacja tworzenia profesjonalnego landing page'a i MVP produktu AI bez kodu.
Wprowadzenie do frameworku F.R.A.M.E.: Formulate, Render, Attach, Mock, Enable.
Pokazanie pracy z narzędziem Lovable, które buduje strony na podstawie promptów w języku angielskim.
Przykład budowy strony dla kawiarni Aroma jako rozgrzewka.
Tworzenie szczegółowej specyfikacji i promptu dla AI Career Coach przy pomocy modelu Gemini.
Renderowanie kompletnej, funkcjonalnej strony z sekcjami, CTA i formularzem zbierającym maile.
Podkreślenie, że nie jest potrzebna znajomość programowania, a językiem prototypowania jest angielski.
Zachęta do działania i odejścia od wiecznego planowania na rzecz szybkiego prototypowania.
Lovable jako 'CTO mówiący po angielsku', dostępny z darmowymi kredytami bez karty.
Proces iteracji i modyfikacji strony w czasie rzeczywistym poprzez rozmowę z AI.

Full Transcript — Download SRT & Markdown

Speaker A

Cześć, witam was bardzo serdecznie. Ja nazywam się Kamil Stanuch, a to jest lekcja, która może zmienić na zawsze wasze podejście do tworzenia produktów cyfrowych. Dzisiaj powiemy sobie głośno i wyraźnie: koniec z wiecznym planowaniem, czas na działanie. Ale zanim zagłębimy się w szczegóły,

Speaker A

chcę wam coś pokazać. I od razu zaznaczam, to nie są jakieś przykłady z internetu, to dokładnie to, co razem zbudujemy w tej lekcji. To jest profesjonalny landing page dla produktu AI z nagłówkiem, sekcjami, formularzem zbierającym maile wprost do bazy danych,

Speaker A

zbudowane z jednego opisu po angielsku. To natomiast jest interaktywny kalkulator ROI. Wpisujesz swoją pensję i koszty szkolenia, dostajesz odpowiedź, czy inwestycja w zmianę kariery ma sens.

Speaker A

Mamy tu też wykres. I co najważniejsze, żadnego kodu, jeden prompt. A to z kolei działający chatbot AI zasilony Gemini.

Speaker A

Zadajecie mu pytania, on odpowiada w sekundy. I to jest rdzeń naszej aplikacji, MVP, Minimum Viable Product, gotowe do pokazania pierwszym użytkownikom.

Speaker A

Wszystkie trzy rzeczy powstały bez jednej linijki kodu. I dziś pokażę wam, jak dokładnie je zbudować, krok po kroku, od zera.

Speaker A

Abyście w pełni zrozumieli, jak wielka rewolucja dzieje się na naszych oczach, mam dla was trzy kluczowe przesłania.

Speaker A

Po pierwsze, koniec z byciem tak zwanym Idea Guy. Spędziliście rok na cyzelowaniu slajdów pod swoją wymarzoną aplikację i kolejne 6 miesięcy na szukaniu CTO za udziały.

Speaker A

To się dzisiaj kończy. Drugie przesłanie, stajecie się Prototype Managerami. Dzięki narzędziom, które dziś poznamy, nie musicie już ograniczać się do robienia tylko i wyłącznie mockupów, w Figmie czy pisania specyfikacji.

Speaker A

Możecie samodzielnie zbudować własny działający prototyp. I trzecie, najważniejsze, nie musicie znać Pythona, JavaScriptu, CSS, aby budować.

Speaker A

Dzięki dużym modelom językowym nowym językiem prototypowania jest język angielski. To jest jedyne narzędzie, którego będziecie dzisiaj potrzebować.

Speaker A

Aby uporządkować ten proces i dać wam konkretną roadmapę, będziemy pracować w oparciu o prosty pięcioetapowy framework, który nazwaliśmy FRAME. Najpierw Formulate, czyli sformułujemy nasz pomysł i przygotujemy plan.

Speaker A

Potem Render, czyli wyrenderujemy, a mówiąc prościej, zbudujemy naszą stronę. Następnie Attach, czyli podepniemy jej mózg, w naszym przypadku bazę danych do zbierania maili.

Speaker A

Później Mock, czyli zasymulujemy testy, aby upewnić się, że wszystko działa jak należy. I na koniec Enable, czyli opublikujemy nasz projekt dla świata, podpinając prawdziwą domenę.

Speaker A

W tej lekcji przejdziemy przez cały ten proces, krok po kroku, na przykładzie budowy zwykłego landing page'a.

Speaker A

Jeśli jesteście gotowi, to zaczynamy rewolucję. Poznajcie Lovable. To jest wasz nowy CTO, tylko że mówi po angielsku i nie chce udziałów w waszej firmie.

Speaker A

Zanim zaczniemy, krótka informacja praktyczna. Lovable daje kilka darmowych kredytów dziennie na start, bez karty kredytowej. To wystarczy, żeby przetestować każdą z demonstracji z tej lekcji i dobrze poczuć narzędzie, zanim zdecydujecie o płatnym planie.

Speaker A

Interfejs jest niezwykle prosty, bo cała magia dzieje się w oknie czatu. To tutaj będziemy prowadzić rozmowę z AI, która będzie naszym deweloperem.

Speaker A

Zaczniemy od prostej rozgrzewki, żebyście poczuli jego moc. Zbudujemy stronę dla fikcyjnej kawiarni. Wystarczy, że wpiszemy tu naszą pierwszą instrukcję.

Speaker A

"Create a simple, elegant landing page for a specialty coffee shop named 'Aroma'." I proszę, AI w czasie rzeczywistym przeanalizowało nasze polecenie i zbudowało kompletną strukturę strony.

Speaker A

Mamy sekcję główną, tak zwane hero, ze zdjęciami w tle, mamy nagłówki, przyciski. Poniżej mamy już przygotowane sekcje na historię, polecane produkty, lokalizacje. To jest nasz fundament.

Speaker A

A teraz najlepsze - iteracja. Powiedzmy, że to zdjęcie w tle nie do końca mi pasuje, chcę je zmienić.

Speaker A

Nie muszę szukać żadnych ustawień, po prostu kontynuuję rozmowę z moim AI deweloperem. W polu czatu wpisuję mój prompt. "Change the hero image to a high-quality photo of a barista making latte art." No i świetnie. Obraz został podmieniony dokładnie tak,

Speaker A

jak o to prosiłem. Ale to nie wszystko. Możemy dodawać zupełnie nowe elementy, na przykład brakuje nam poprawnych godzin otwarcia.

Speaker A

Wpisuję: "Add a new section below the hero with our opening hours." I gotowe. Zobaczcie, w niecałe dwie minuty mamy w pełni funkcjonalny, świetnie wyglądający szkielet strony, który powstał wyłącznie na bazie kilku prostych zdań po angielsku.

Speaker A

To jest właśnie to, co zmienia w rozmowie słowa w kod. Mam nadzieję, że czujecie już potęgę tego narzędzia.

Speaker A

Teraz, gdy znamy podstawy, przejdźmy do naszego głównego projektu. Rozgrzewka za nami. Zobaczyliśmy, jak łatwo można tworzyć i modyfikować proste elementy.

Speaker A

Czas na nasz główny projekt, czyli w pełni funkcjonalny landing page dla aplikacji, którą nazwaliśmy AI Career Coach.

Speaker A

Zaczynamy metodycznie od pierwszego kroku naszego frameworku, czyli F, jak Formulate, formułowanie pomysłu to kluczowy etap. Zamiast spędzać godziny na burzy mózgów, możemy wykorzystać do tego inne narzędzie AI, które pomoże nam stworzyć solidny plan.

Speaker A

Poproszę model językowy, Gemini, o przygotowanie szczegółowej specyfikacji dla naszej strony. Pomyślcie o tym jak o rozmowie z doświadczonym konsultantem produktowym.

Speaker A

Wchodzę więc na aistudio.google.com i poddaję mój prompt. "Prepare a detailed specification for a landing page for an AI-powered tool called 'AI Career Coach'. Include target audience, key features, value proposition, and suggested sections." Świetnie. Zobaczcie, w kilka sekund otrzymaliśmy

Speaker A

bardzo dokładny opis tego, co nasza strona powinna zawierać. To jest nasz plan działania, nasza strategia na początek, ale możemy pójść o krok dalej.

Speaker A

Żeby maksymalnie ułatwić sobie pracę, poproszę teraz Gemini, żeby na podstawie tej specyfikacji, którą właśnie stworzył, napisał dla mnie jeden kompleksowy prompt, który będzie idealnie zrozumiały dla Lovable.

Speaker A

"Based on the spec above, please write one comprehensive single paragraph prompt in English for an AI page builder tool to create this landing page." No i idealnie. Mamy gotowy profesjonalny prompt, który dokładnie opisuje naszą wizję.

Speaker A

Krok F, czyli planowanie, mamy już za sobą. Z pomocą Gemini stworzyliśmy profesjonalną specyfikację i co najważniejsze, mamy gotowy szczegółowy prompt.

Speaker A

Teraz więc czas na drugi krok naszego frameworku, czyli R jak Render. Zamienimy nasz plan w namacalną, działającą stronę internetową.

Speaker A

Wracamy więc do Lovable i wklejamy tutaj nasz wygenerowany prompt. Zauważcie, to nie jest już proste, jednozdaniowe polecenie jak w przypadku kawiarni. To jest bardziej złożony brief, który zawiera informacje o naszej grupie docelowej, być może o funkcjach, o strukturze strony.

Speaker A

To wszystko, o co poprosiliśmy. I teraz zobaczymy, jak Lovable zinterpretuje tę wizję. I spójrzcie, to jest moment, w którym dzieje się magia, czyli w ciągu kilkudziesięciu sekund na podstawie tego jednego bloku tekstu - Lovable buduje dla nas w pełni profesjonalną stronę.

Speaker A

To jest proces, który tradycyjnie, może kilka lat temu, zająłby zespołowi, projektantowi, może kilka dni.

Speaker A

Przyjrzyjmy się, co otrzymaliśmy. Mamy tu wyraźnie zarysowaną sekcję główną, czyli Hero, z mocnym nagłówkiem, krótkim opisem i kluczowym przyciskiem wzywającym do działania.

Speaker A

Wygląda to całkiem dobrze. Dalej AI wygenerowało sekcję, która wyjaśnia, jak działa nasza aplikacja, często w krokach z pasującymi ikonami, co ułatwia zrozumienie produktu. Mamy też blok poświęcony korzyściom, jakie daje nasze narzędzie, a także miejsce na opinie klientów, co jest kluczowe dla budowania zaufania.

Speaker A

Na samym dole, co najważniejsze, znajduje się miejsce jeszcze raz na call to action i zapisy.

Speaker A

Zwróćcie uwagę, że AI nie tylko stworzyło strukturę, ale również zadbało o spójny design, dobrało kolorystykę i odpowiednią typografię.

Speaker A

Mamy piękny landing page, ale żeby był użyteczny, musi spełniać swoje podstawowe zadanie, czyli zbierać kontakty do potencjalnych użytkowników.

Speaker A

Zobaczymy, jak możemy to zrobić, zaczynając od najprostszej met...

Speaker A

Stworzenie takiego formularza zajmuje dosłownie minutę. Kluczowe jest to, że Google pozwala nam osadzić ten formularz na dowolnej stronie internetowej.

Speaker A

Wystarczy skopiować ten fragment kodu i poprosić Lovable, aby umieścił go w odpowiednim miejscu na naszej stronie.

Speaker A

I proszę, formularz jest na naszej stronie i działa. To szybkie i darmowe rozwiązanie, ale ma dwie podstawowe wady. Po pierwsze, nie wygląda profesjonalnie.

Speaker A

Od razu widać, że to zewnętrzny element. Po drugie, nasze cenne dane lądują wprost w arkuszu kalkulacyjnym, którym trudno zarządzać na dłuższą metę.

Speaker A

Skoro już potrafimy tworzyć tak zaawansowane rzeczy, zróbmy to jak profesjonaliści. Dlatego w lewym panelu Lovable, obok ostatniej komendy, możemy kliknąć przycisk "Restore" lub "Cofnij", aby usunąć formularz Google i przywrócić stronę do poprzedniego stanu.

Speaker A

Czas na krok A, Attach, z naszego frameworku. Użyjemy do tego Supabase. Pomyślcie o tym narzędziu trochę jak o takim profesjonalnym, skalowalnym mózgu dla naszej aplikacji. To tutaj będą trafiać wszystkie dane, a my będziemy mogli nimi łatwo zarządzać.

Speaker A

I co najlepsze, Lovable potrafi zintegrować się z Supabase w pełni automatycznie. Zamiast osadzać zewnętrzny kod, wydamy teraz Lovable jedno potężne polecenie.

Speaker A

"Create a native signup form for the beta waiting list. Connect it to Supabase, when a user submits their email, it should be saved in the 'email' column of a new table called 'beta signups'." Czyli prosimy Lovable, żeby stworzył nam

Speaker A

listę w naszej bazie danych i kiedy użytkownik zapisze swojego maila, jego mail albo jej mail trafia do kolumny 'beta signups'.

Speaker A

Zobaczcie, co się teraz dzieje. To jest całkiem przełomowe, bo Lovable nie tylko projektuje dla nas formularz, który będzie idealnie pasował do stylu naszej strony, on też w tle komunikuje się z Supabase. Pisze za nas kod w języku SQL, tworzy w naszej bazie danych nową tabelę

Speaker A

o nazwie 'beta signups' i od razu łączy z nią ten formularz. To jest cały proces backendowy, który normalnie zająłby deweloperowi trochę czasu. Tutaj wystarczy, że zatwierdzimy zmianę.

Speaker A

Mamy już w pełni funkcjonalną stronę połączoną z profesjonalną bazą danych. Zanim jednak pokażemy ją światu, musimy się upewnić, że wszystko działa bez zarzutu.

Speaker A

Przechodzimy więc do kroku M jak MOCK z naszego frameworku, czyli do testowania. Tradycyjnie ktoś musiałby napisać scenariusze testowe i ręcznie je przeklikać, ale my możemy poprosić o to AI.

Speaker A

I tu piszemy prompt. "Based on our current application, please generate a few test scenarios." No i świetnie. Lovable wcielił się teraz w rolę testera i przygotował dla nas listę przypadków testowych.

Speaker A

Zauważcie, że nie musieliśmy mu nic sugerować. Sam przeanalizował stworzoną aplikację i zaproponował, co warto sprawdzić od podstawowej poprawnej ścieżki po potencjalne błędy. To jest niezwykle cenne, bo wygenerowanie takiego scenariusza pozwala nam nie tylko sprawdzić główną funkcjonalność, ale też wyłapać tak zwane

Speaker A

warunki brzegowe, czyli sprawdzić, co się stanie, gdy użytkownik zrobi coś nietypowego, o czym może nie pomyśleliśmy. Można by go poprosić także o scenariusze dla urządzeń mobilnych czy różnych przeglądarek. My oczywiście nie będziemy teraz przechodzić przez wszystkie te przypadki,

Speaker A

ale warto pamiętać, że testowanie i poprawki to często połowa całej pracy programistycznej. Na potrzeby naszej lekcji przetestujemy ten najważniejszy pierwszy scenariusz, czyli tak zwany happy path.

Speaker A

Ścieżka, którą przejdzie typowy zainteresowany użytkownik. Klikam przycisk Preview i przewijam na sam dół. Naszym celem jest sprawdzenie, czy mail wpisany w tym polu faktycznie trafi do naszej bazy danych w Supabase.

Speaker A

Wpisałem maila, a teraz wysyłam zgłoszenie. Otrzymaliśmy potwierdzenie. Moment prawdy. Wracamy do Supabase, odświeżamy widok naszej tabeli.

Speaker A

I jest. Nasz testowy adres email poprawnie zapisał się w bazie danych. To oznacza, że nasza integracja działa, a kluczowa funkcjonalność strony jest gotowa.

Speaker A

Krok M, czyli MOCK, możemy uznać za zakończony sukcesem. Czas na ostatni, najbardziej ekscytujący krok naszego frameworku, E jak Enable.

Speaker A

Pokażemy nasze dzieło światu. Opublikowanie naszej strony w Lovable jest niezwykle proste. Najpierw możemy ją udostępnić na darmowej domenie Lovable App. To jest świetne rozwiązanie do szybkich testów i wewnętrznych prezentacji.

Speaker A

Spójrzcie. Mamy tu kilka opcji, pokażę wam. Pierwsza to zakup nowej domeny bezpośrednio przez Lovable.

Speaker A

Jeśli jeszcze nie macie adresu, możecie go znaleźć i kupić tutaj. Proces jest bardzo prosty. Wpisujecie nazwę, na przykład AI Career Coach, a Lovable pokaże wam dostępne rozszerzenia i ceny. Po zakupie domena zostanie automatycznie skonfigurowana.

Speaker A

Druga opcja to automatyczne podpięcie istniejącej domeny. Jeśli macie domenę u popularnego dostawcy, jak GoDaddy, Lovable sam wykryje, gdzie jest zarejestrowana i przeprowadzi was przez prosty proces autoryzacji, który automatycznie skonfiguruje wszystko za was.

Speaker A

Ale co, jeśli wasz dostawca domeny nie jest wspierany automatycznie? Na przykład używacie Hostingera czy jakiegoś lokalnego dostawcy. Wtedy wybieramy opcję ręcznej konfiguracji i nie martwcie się, to tylko z pozoru wygląda skomplikowanie.

Speaker A

Lovable daje nam dokładną instrukcję. Musimy dodać najczęściej dwa rekordy do ustawień DNS naszej domeny. Wystarczy zalogować się do panelu naszego dostawcy domeny, znaleźć sekcję zarządzania DNS i dodać dokładnie te dwa wpisy, które podaje nam Lovable.

Speaker A

Jeden pewnie typu A i jeden pewnie typu CNAME. Kopiujemy te wartości z Lovable i wklejamy je w odpowiednie pole.

Speaker A

I teraz bardzo ważna uwaga. Interfejsy takich narzędzi jak GoDaddy, Lovable, Hostinger czy dostawcy domen, one lubią się zmieniać.

Speaker A

Jeśli za pół roku ten proces będzie wyglądał trochę inaczej, nie panikujcie. Wystarczy, że otworzycie Perplexity lub inny model językowy z dostępem do internetu i zapytacie, jak podpiąć domenę z mojego dostawcy do aplikacji w Lovable.

Speaker A

Na pewno otrzymacie najnowszą, aktualną instrukcję krok po kroku. Po dodaniu rekordów DNS i odczekaniu kilku minut do kilku godzin na ich propagację w internecie, nasza strona będzie działać pod nowym, profesjonalnym adresem.

Speaker A

I na tym kończymy pracę z frameworkiem FRAME. Przeszliśmy całą drogę od pomysłu, przez budowę i integrację, aż po testy i publikację.

Speaker A

Macie teraz kompletny, działający i gotowy do pokazania światu landing page. Ale to oczywiście nie koniec możliwości, jakie dają nam te narzędzia.

Speaker A

Mamy już kompletny, działający landing page. Jako uczestnicy zrozumieliście, jak przejść przez cały framework, FRAME, aby stworzyć solidny fundament.

Speaker A

No ale co dalej? Jak sprawić, by nasza strona była jeszcze bardziej skuteczna w przyciąganiu użytkowników?

Speaker A

Odpowiedzią są tak zwane lead magnety, to darmowe narzędzia lub treści, które oferujemy użytkownikom w zamian za ich dane kontaktowe.

Speaker A

Zamiast standardowego "zapisz się na newsletter", dajemy im coś wartościowego od razu. Może to być e-book, ale znacznie skuteczniejsze są narzędzia interaktywne, quizy, konfiguratory, a zwłaszcza kalkulatory.

Speaker A

Pomyślcie o sklepie e-commerce sprzedającym panele fotowoltaiczne. Kalkulator oszczędności na prądzie będzie o wiele potężniejszym magnesem na leady niż kolejny poradnik w PDF. I my zrobimy dokładnie to samo.

Speaker A

Rozbudujemy naszą aplikację AI Career Coach o narzędzie, które da użytkownikom natychmiastową, personalną wartość. Co ważne, nie musimy tworzyć nowego projektu, będziemy rozbudowywać naszą istniejącą aplikację. Stworzymy nową podstronę o nazwie "Kalkulator". I to właśnie tam umieścimy nasze narzędzie, które odpowie na jedno z najtrudniejszych

Speaker A

pytań w karierze. Czy zmiana branży mi się opłaca? Zbudujemy kalkulator ROI z inwestycji w przebranżowienie.

Speaker A

Spójrzcie na prompt. Opisuję, co chcę dostać, nie to, jak to ma być policzone. Żadnych formuł, żadnych nawiasów, żadnych technicznych specyfikacji.

Speaker A

Opisuję to jak brief dla asystenta, który wie, co robi. Czyli: stwórz mi podstronę "Kalkulator" i zbuduj mi kalkulator ROI do career change.

Speaker A

I spójrzcie, jeden prompt, jeden akapit po angielsku i Lovable sam wymyślił, jakie obliczenia mają sens, jak je nazwać, jak pokazać wyniki. Nie potrzebowałem mu tłumaczyć wzorów matematycznych.

Speaker A

On wie, co to ROI. Dokładnie tak działa "what, not how". Czyli opisujesz efekt, nie instrukcję.

Speaker A

Mamy już działający kalkulator, ale same liczby to nie wszystko. Dodajmy wizualizację, która mówi więcej niż tabelka.

Speaker A

W polu ponownie wpisuję prompt po angielsku z prośbą o dodanie wykresu, który porówna obecną pensję z oczekiwaną po zmianie kariery.

Speaker A

I tyle. Jeden krótki prompt i mamy wizualizację. Lovable sam zdecydował, że taki wykres ma tu lepszy sens, sam nadał kolory, sam podpisał osie.

Speaker A

I teraz, gdy użytkownik widzi konkretne wyniki i ich wizualizację, mamy jego pełną uwagę. To idealny moment, żeby zaoferować mu jeszcze więcej wartości i poprosić o kontakt.

Speaker A

Dodajmy więc dedykowaną sekcję do zbierania leadów. Proszę w tym momencie, żeby poniżej, pod wykresem, dodał mi nową sekcję z nagłówkiem: czy chcesz dokładniejszy raport i porady związane z karierą? I jeśli tak, to prosty formularz, w którym przycisk będzie mówił "wyślij mi raport".

Speaker A

I teraz bardzo ważna kwestia. Mamy już przecież jeden mechanizm zbierania maili na stronie głównej.

Speaker A

Moglibyśmy go po prostu skopiować, ale chcemy zrobić coś mądrzejszego. Posegmentować naszych użytkowników. Chcemy wiedzieć, kto tylko zapisał się na betę, a kto jest gorącym leadem, bo aktywnie skorzystał z naszego kalkulatora. Dlatego stworzymy dla tego formularza nowe dedykowane połączenie z naszą bazą danych.

Speaker A

Wykorzystamy ten sam mechanizm co wcześniej, ale wskażemy Lovable, aby zapisywał dane do zupełnie innej tabeli.

Speaker A

Prosimy więc Lovable, ażeby połączył ten formularz z naszą bazą danych, ale kiedy użytkownik zostawia maila w tym miejscu, zapisujemy go w nowej tabeli, którą nazwaliśmy "calculator leads".

Speaker A

Przetestujmy i wpiszmy tutaj maila. Działa perfekcyjnie. Mamy tabelę "calculator leads" i tutaj zapisują się nasze maile z tej sekcji.

Speaker A

Zobaczcie, to działa całkiem sprawnie. Mamy teraz nie tylko listę osób zainteresowanych betą, ale też osobny zbiór bardzo wartościowych leadów od osób, które aktywnie analizują swoją sytuację zawodową.

Speaker A

W ten sposób możemy łatwo rozbudować naszą aplikację o kolejne, coraz bardziej zaawansowane funkcje, zachowując przy tym porządek w naszych danych.

Speaker A

Do tej pory stworzyliśmy profesjonalny landing page i interaktywny kalkulator. No ale co, jeśli zamiast tylko obiecywać AI Career Coacha, chcielibyśmy zbudować jego pierwszą działającą wersję? W tym module pokażę wam, jak przekształcić nasz prototyp w MVP, Minimum Viable Product.

Speaker A

Zbudujemy prawdziwego chatbota, który będzie rozmawiał z użytkownikami i co najlepsze, dzięki Lovable Cloud nie musimy się martwić o serwery ani skomplikowane łączenie z zewnętrznymi modelami językowymi.

Speaker A

Wszystko mamy już pod maską. Stworzymy w tym celu dedykowaną podstronę "Bot Beta". To tutaj nasi pierwsi użytkownicy będą mogli przetestować rdzeń naszej aplikacji.

Speaker A

Zaczniemy więc od samego interfejsu. Potrzebujemy pola do wpisywania wiadomości i miejsca na odpowiedzi. Wybieramy "Bot Beta" i mamy wygląd.

Speaker A

Ale teraz najważniejsze, mózg chatbota. Teraz aplikacja jeszcze nie działa, nie ma podpiętego modelu. Lovable Cloud oferuje wbudowaną integrację z potężnymi modelami AI, jak Gemini czy Claude, bez żadnej konfiguracji.

Speaker A

To oznacza, że po prostu poprosimy Lovable o podłączenie AI i to zadziała. Wpisuję: Podłącz tego chatbota do Lovable Cloud AI".

Speaker A

Chciałbym użyć modelu Gemini 2.5 Flashlight i nasz chatbot powinien być miłą i pomocną osobą, która pomaga nam w karierze.

Speaker A

I przetestujmy. Wpiszmy na przykład, że chcielibyśmy zmienić karierę i zająć się product designem. Widzimy, że bot odpowiada poprawnie, trzyma kontekst, to znaczy, że działa.

Speaker A

Lovable automatycznie wykorzystuje swoje zasoby, by zasilić naszego bota. I to jest najszybsza droga. Warto jednak wiedzieć, że Lovable w pewnym momencie może zacząć nas obciążać kosztami za użycie ich chmur. Jeśli chcecie mieć pełną kontrolę nad kosztami i używać własnych limitów od Google,

Speaker A

możecie zrobić coś innego. Wpisać prompt: "I'd like to use my own Gemini API key for this".

Speaker A

Albo skorzystać z innego modelu OpenAI czy Claude. Jeśli napiszecie, że chcecie użyć własnego klucza, Lovable dostosuje kod specjalnie pod was.

Speaker A

Zobaczcie, Lovable wyświetlił bezpieczne pole. A teraz pytanie, skąd wziąć ten klucz? Wystarczy wejść na stronę Google AI Studio i kliknąć "Get API Key".

Speaker A

I pamiętajcie, wasz klucz API jest jak numer karty kredytowej. Jeśli go tu wkleicie, Lovable zapisze go bezpiecznie w tak zwanych Secrets, czyli w zaszyfrowanym schowku, do którego nikt postronny nie ma dostępu.

Speaker A

No i gotowe. Niezależnie, czy korzystacie z wbudowanej chmury Lovable, czy z własnego klucza, nasz chatbot właśnie zyskał świadomość.

Speaker A

Więc sprawdźmy go. Tym razem spytam, jak można zmienić swoją ścieżkę kariery z graphic designera do techu.

Speaker A

I działa całkiem błyskawicznie. W kilka minut bez pisania backendu i ręcznego łączenia baz danych stworzyliśmy działający produkt AI.

Speaker A

I to jest właśnie ta potęga nowoczesnego programowania wizualnego. Podsumujmy więc, czego dzisiaj dokonaliśmy. W ciągu tej lekcji przeszliśmy niesamowitą drogę.

Speaker A

Zaczęliśmy od zera, a teraz mamy działający prototyp aplikacji AI. Nauczyliście się, jak za pomocą frameworku FRAME zbudować kompletny landing page.

Speaker A

I potem, wykorzystując te same zasady, stworzyliście zaawansowane interaktywne narzędzia, jak kalkulator i w pełni funkcjonalny chatbot oparty o Gemini.

Speaker A

I najważniejsze jest to, że bariera wejścia została radykalnie obniżona. Widzieliście na własne oczy, że język angielski faktycznie staje się nowym językiem prototypowania.

Speaker A

Musimy jednak być realistami. To, co zbudowaliśmy, to fantastyczny prototyp, potężne MVP, ale to dopiero początek drogi do pełnoprawnego produktu.

Speaker A

Czego tutaj brakuje? Brakuje wielu małych, ale kluczowych detali. Na przykład, po zapisaniu się na listę beta, użytkownik powinien otrzymać automatycznego maila z potwierdzeniem.

Speaker A

Nasz chatbot jest prosty. Nie ma jeszcze pamięci długoterminowej ani możliwości logowania i zapisywania historii rozmów dla konkretnego użytkownika.

Speaker A

Nie zintegrowaliśmy też płatności, analityki ani zaawansowanego systemu do zarządzania użytkownikami. Pamiętajcie, że w realnym świecie developmentu właśnie takie detale, a także intensywne testowanie, wyłapywanie błędów i ciągłe poprawki stanowią często ponad połowę całej pracy. Narzędzia takie jak Lovable dają

Speaker A

nam niesamowitą przewagę na starcie, ale droga do gotowego, skalowalnego produktu wciąż wymaga pracy i uwagi.

Speaker A

Mimo to chcę, żebyście wyszli z tej lekcji z jednym przekonaniem. Ten manifest na dzisiaj brzmi: "Już nigdy więcej nie mówcie, nie umiem, bo nie jestem programistą czy programistką." Teraz macie narzędzia i wiedzę, żeby swoje pomysły błyskawicznie zamieniać w działające prototypy,

Speaker A

testować je z prawdziwymi użytkownikami i podejmować decyzje w oparciu o dane, a nie tylko przeczucia.

Speaker A

I to jest wasza nowa supermoc. Ja wam bardzo dziękuję za uwagę i czas zacząć budować.

Topics:prototypowanieAIMVPLovableframework F.R.A.M.E.tworzenie produktów cyfrowychbez kodulanding pageGeminiAI Career Coach

Frequently Asked Questions

Czym jest framework F.R.A.M.E. i jakie ma etapy?

Framework F.R.A.M.E. to pięcioetapowy proces tworzenia prototypu: Formulate (formułowanie pomysłu), Render (budowa strony), Attach (podpięcie bazy danych), Mock (testowanie) oraz Enable (publikacja projektu).

Czy do korzystania z narzędzia Lovable trzeba znać programowanie?

Nie, Lovable pozwala tworzyć działające prototypy i strony internetowe wyłącznie za pomocą promptów w języku angielskim, bez konieczności pisania kodu.

Jakie są korzyści z używania AI w procesie prototypowania produktów cyfrowych?

AI przyspiesza tworzenie i iterację prototypów, umożliwia samodzielne budowanie działających aplikacji bez programowania oraz pozwala szybko testować i wdrażać pomysły.

Get More with the Söz AI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries, speaker detection, and unlimited transcriptions.

App Store Google Play

Or transcribe another YouTube video here →