Lovable krok po kroku: od opisu do opublikowanej aplikacji

👁 198 przeczytań

Lovable buduje aplikację z opisu w zwykłym języku, także po polsku, i od razu pokazuje ją działającą obok rozmowy. Pierwsza wersja powstaje w kilka minut. Trudniejsze jest to, co dzieje się potem: poprawki, które nie psują tego, co już działa, i publikacja, która nie zaskoczy Cię nieaktualną wersją strony. Ceny, kredyty i porównanie z konkurencją są w przewodniku Lovable, a pełny cennik w tekście Lovable cena.

Kroki opieram na oficjalnym przewodniku „getting started” Lovable. Co da się w ogóle zbudować i gdzie jest granica, opisałem osobno w tekście Lovable: aplikacja z opisu słownego.

Krok 1. Opis, od którego zaczynasz

Po założeniu konta wpisujesz opis w oknie na stronie głównej, z wybranym trybem Build. Dokumentacja podkreśla, że możesz pisać w dowolnym języku. Pierwszy opis warto zbudować tak:

• dla kogo jest aplikacja,
• co ma robić, w dwóch, trzech zdaniach,
• jakie ekrany są potrzebne na start,
• jak ma wyglądać, na przykład jasna, minimalistyczna, z jednym kolorem akcentu.

Przykład: prosta aplikacja do zapisów na zajęcia jogi, z listą zajęć na tydzień, formularzem zapisu i widokiem dla prowadzącej z listą zapisanych osób. Tyle wystarczy do pierwszej wersji.

// taniej niż u producentaw magazynie

Lovable Pro - 12 miesięcyKod, którym włączasz Lovable Pro na 12 miesięcy na własnym koncie.kinetyka.pl - mój sklep z rocznymi dostępami do narzędzi AI

450 zł-55%zamiast 1 008 zł37,50 zł / mies.Kup w Kinetyce →

Krok 2. Rozmowa po lewej, aplikacja po prawej

Po utworzeniu projektu trafiasz do edytora podzielonego na dwie części. Po lewej jest czat projektu, w którym rozmawiasz z Lovable. Po prawej podgląd, w którym aplikacja działa na żywo. Każda zmiana z czatu od razu pojawia się w podglądzie, więc widzisz efekt bez wdrażania czegokolwiek.

Krok 3. Jedna zmiana naraz

To najważniejsza rada z dokumentacji i najczęściej łamana. Proś o jedną zmianę i sprawdź podgląd po każdej. Polecenie „dodaj logowanie, zmień kolory, przebuduj formularz i dodaj panel admina” to prosta droga do aplikacji, w której coś się zepsuło, a nie wiesz, przy którym kroku.

Dobre polecenia są konkretne: przesuń przycisk zapisu pod listę zajęć, dodaj pole z numerem telefonu do formularza, pokaż komunikat po udanym zapisie.

Krok 4. Drobne poprawki bez czatu

Nie każdą zmianę trzeba opisywać. W podglądzie jest pasek narzędzi, którym wskazujesz konkretny element. Do zmiany tekstu, na przykład nagłówka albo napisu na przycisku, służy opcja Edit text inline: klikasz i piszesz prosto na stronie. To oszczędza kredyty, które zostawiasz na prawdziwe zmiany.

Krok 5. Publikacja i pułapka nieaktualnej wersji

Klikasz Publish i aplikacja trafia pod adres w domenie lovable.app. Tu jest pułapka, o której dokumentacja pisze wprost: opublikowana strona to migawka. Kolejne zmiany widzisz od razu w podglądzie, ale na żywej stronie pojawiają się dopiero po kliknięciu Publish i Publish changes. Wiele osób pokazuje klientowi link i dziwi się, że poprawek nie widać.

Przykład: aplikacja do zapisów w pięciu poleceniach

Tak może wyglądać cała budowa prostej aplikacji do zapisów na zajęcia, rozpisana na kolejne wiadomości w czacie. Każda to jedna zmiana, po której sprawdzasz podgląd.

• Polecenie 1: opis całości z pierwszego kroku, czyli lista zajęć na tydzień, formularz zapisu i widok dla prowadzącej.
• Polecenie 2: „Przy każdych zajęciach pokaż liczbę wolnych miejsc i zablokuj zapis, gdy miejsc nie ma.”
• Polecenie 3: „Po zapisie pokaż potwierdzenie z nazwą zajęć, datą i godziną.”
• Polecenie 4: „W widoku prowadzącej dodaj możliwość usunięcia osoby z listy.”
• Polecenie 5: poprawki wyglądu, na przykład jeden kolor akcentu i większe przyciski na telefonie.

Po każdym poleceniu klikasz przez aplikację w podglądzie jak zwykły użytkownik. Błąd wyłapany po drugim poleceniu naprawia się jednym zdaniem, a ten sam błąd odkryty po dziesiątym bywa splątany z pięcioma innymi zmianami.

Jak prosić o poprawki, gdy coś nie działa

Gdy coś się zepsuje, opisz to tak, jak opisałbyś programiście: co robisz, czego się spodziewasz i co widzisz zamiast tego. „Po kliknięciu Zapisz się nic się nie dzieje, powinien pokazać się komunikat” daje dużo lepszy efekt niż „nie działa”. Jeśli poprawka psuje coś innego, cofnij ją i spróbuj opisać problem inaczej, zamiast dokładać kolejne polecenia na zepsutą wersję.

Krok 6. Co dalej: baza, domena, kod

Gdy aplikacja ma przechowywać dane, na przykład zapisy czy konta użytkowników, potrzebuje zaplecza z bazą i logowaniem. Lovable łączy się z takim zapleczem, a o jednym z najpopularniejszych, Supabase, i błędzie, przez który wyciekają dane, pisałem w przewodniku po Supabase. Własną domenę i synchronizację kodu z GitHubem ustawisz w ustawieniach projektu.

Czytasz Promptowego częściej? Dodaj go do preferowanych źródeł w Google, a nowe teksty będą wyżej w Twoich wynikach.

Kredyty

Każda wiadomość w czacie zużywa kredyty. Na darmowym planie dokumentacja podaje pięć dziennie, do trzydziestu miesięcznie, czyli wystarczy na naukę, ale nie na budowę czegoś większego. Plan Pro daje 100 kredytów miesięcznie. Konkretne, pojedyncze polecenia zużywają ich mniej, bo nie trzeba ich potem poprawiać.

Roczny plan Pro sprzedaję taniej niż w oficjalnym cenniku w sklepie kinetyka.pl.

// czytaj dalejAplikacje AI rosną dziś dzięki obrazom. Tekstowy chatbot przestał wystarczaćPremiumTworzenie aplikacjiwAIgyuLovable: aplikacja z opisu słownego. Co da się zbudować, a gdzie jest granicaArtykuły