Lovable krok po kroku: od opisu do opublikowanej aplikacji
Samouczek Lovable: jak napisać pierwszy opis, pracować z czatem i podglądem, wprowadzać zmiany po jednej, publikować i nie pokazać klientowi starej wersji.
👁 114 przeczytań
- Lovable buduje pierwszą wersję aplikacji z opisu w zwykłym języku, także po polsku, i pokazuje ją działającą w podglądzie już w kilka minut.
- Najważniejsza zasada to jedna zmiana naraz - polecenie łączące logowanie, kolory i panel admina prowadzi do błędów trudnych do zlokalizowania.
- Darmowy plan daje 5 kredytów dziennie i do 30 miesięcznie, a plan Pro oferuje 100 kredytów miesięcznie.
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.
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.
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.
Google · Twoje źródłaPromptowy wyżej w Twoim Google - jednym kliknięciemDodaj do preferowanych źródeł →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.
Cały tydzień w AI, w jednym mailu
Wybrane premiery, narzędzia i analizy. Raz w tygodniu, prosto do skrzynki.
Zapisz się za darmo →Najczęstsze pytania
Jak zacząć budować aplikację w Lovable od zera?
Po założeniu konta wpisujesz opis w oknie na stronie głównej w trybie Build - możesz pisać po polsku. Dobry opis zawiera informację dla kogo jest aplikacja, co ma robić, jakie ekrany są potrzebne i jak ma wyglądać.
Dlaczego klient nie widzi moich poprawek po opublikowaniu aplikacji w Lovable?
Opublikowana strona to migawka - zmiany widoczne w podglądzie pojawiają się na żywej stronie dopiero po kliknięciu Publish, a następnie Publish changes. To częsty błąd, o którym ostrzega oficjalna dokumentacja Lovable.
Jak zaoszczędzić kredyty w Lovable przy edycji tekstu?
Do zmiany tekstu, np. nagłówka lub napisu na przycisku, służy opcja Edit text inline dostępna w pasku narzędzi podglądu - klikasz element i piszesz bezpośrednio na stronie. Ta metoda nie zużywa kredytów, które można zachować na istotniejsze zmiany.
Jak opisać błąd w aplikacji Lovable, żeby AI go naprawiło?
Należy podać trzy elementy: co się robi, czego się oczekuje i co pojawia się zamiast tego - np. 'Po kliknięciu Zapisz się nic się nie dzieje, powinien pokazać się komunikat'. Jeśli poprawka psuje coś innego, trzeba ją cofnąć i opisać problem inaczej, zamiast dokładać kolejne polecenia na zepsutą wersję.
Podobne tematy na Promptowym
