Kodowanie Vibe z użyciem Lovable AI i Logto: szybkie budowanie aplikacji oraz obsługa logowania
Lovable to agent kodowania napędzany sztuczną inteligencją, który pomaga budować aplikacje full stack za pomocą języka naturalnego: frontend, backend, baza danych i wdrażanie, wszystko w jednym miejscu. Dzięki wsparciu dla Logto możesz teraz łatwo dodać bezpieczne logowanie, zarządzanie użytkownikami i przepływy uwierzytelniania.
Product & Design
Od uniwersalnych agentów po wyspecjalizowanych copilotów, deweloperzy obserwują fundamentalną zmianę w tym, jak tworzone jest oprogramowanie. Ale spośród wszystkich kategorii agentów, jedna wyróżnia się jako najbardziej ekscytująca i dynamiczna: agenci kodujący.
Takie narzędzia jak Lovable, Cursor, Windsurf i Replit zdobywają rozgłos, natychmiast zamieniając język naturalny w prawdziwe działające oprogramowanie. Zero konfiguracji. Zero szablonów. Tylko czysty efekt końcowy.
Dziś na scenę wkracza nowe pojęcie: Vibe Coding.
Zapoczątkowane przez Lovable, vibe coding to nowy sposób tworzenia aplikacji przez czatowanie ze sztuczną inteligencją. W tym artykule wyjaśnimy, czym naprawdę jest vibe coding, przyjrzymy się, jak działa Lovable jako jeden z wiodących agentów kodujących, oraz przejdziemy przez proces budowy aplikacji full stack: kompletnej z rejestracją, logowaniem, zarządzaniem użytkownikami i tożsamością w kilka minut.
Czym jest Lovable AI?
Lovable to platforma rozwojowa oparta na czacie, gdzie Twoje pomysły bezpośrednio zamieniają się w działający kod, układy, a nawet hostowane aplikacje. Nie piszesz tradycyjnego kodu : opisujesz, czego potrzebujesz:
„Potrzebuję prostego panelu z dwoma wykresami i paskiem bocznym.”
A sztuczna inteligencja generuje podgląd na żywo oraz edytowalny kod źródłowy — często w kilka sekund.
W tle Lovable korzysta z nowoczesnych frameworków takich jak React i Tailwind, pozwalając eksportować projekt, hostować samodzielnie lub wdrażać natychmiast.
Jakie są kluczowe funkcje Lovable AI
Oto szczegółowa tabela bazująca na 9 kluczowych cechach platformy Lovable:
| # | Funkcja | Opis | Wartości |
|---|---|---|---|
| 1 | Napędzana językiem naturalnym aplikacja Full‑stack | Opisz jasno, czego potrzebujesz, i otrzymaj działającą aplikację z frontendem, backendem, bazą danych i autoryzacją — wszystko generowane natychmiastowo. | Drastycznie skraca czas rozwoju i eliminuje potrzebę przygotowania szablonów. |
| 2 | Inteligencja AI i debugowanie kodu | Wbudowany asystent, który autouzupełnia kod, naprawia błędy i pomaga nawigować po plikach, logach i API za pomocą rozmowy. | Zwiększa produktywność i przyspiesza naukę dla mniej doświadczonych deweloperów. |
| 3 | Własność kodu i synchronizacja z GitHub | Tworzy gotowy do wdrożenia kod (React, Node itd.) i synchronizuje się dwukierunkowo z GitHubem. | Zapewnia pełną własność kodu i brak uzależnienia od dostawcy. |
| 4 | Integracje backendowe | Natychmiastowe wsparcie dla Supabase, Stripe i innych usług backendowych. | Łatwo łączysz się z bazami danych, płatnościami i autoryzacją bez pisania szablonowego kodu. |
| 5 | Edycja wizualna i Sketch-to-code | Prześlij szkice lub zrzuty ekranu (np. odręcznie rysowane UI lub eksporty z Figma), aby wygenerować prawdziwy kod UI. Zawiera tryb edycji wizualnej. | Oferuje elastyczność projektantom i osobom nietechnicznym w kształtowaniu UI bezpośrednio. |
| 6 | Wdrażanie i własne domeny | Wbudowane pipeline wdrożeniowe z hostingiem i możliwością ustawienia własnej domeny. | Ułatwia publikowanie aplikacji — bez potrzeby korzystania z wielu usług. |
| 7 | Współpraca i synchronizacja w czasie rzeczywistym | Członkowie zespołu mogą współpracować w czasie rzeczywistym, widzieć zmiany natychmiast i zarządzać historią wersji. | Pozwala na pair programming, przeglądanie kodu i środowisko przyjazne zespołom. |
| 8 | Skanowanie bezpieczeństwa | Wbudowane kontrole bezpieczeństwa podczas publikacji, zwłaszcza przy użyciu Supabase. | Wykrywa luki przed wydaniem, zwiększając zaufanie użytkowników. |
| 9 | Ekosystem nauki i szablony | Oferuje samouczki, biblioteki podpowiedzi, gotowe szablony i zasoby szkoleniowe. | Obniża próg wejścia i ułatwia wdrażanie nowych deweloperów. |
Kluczowe korzyści z korzystania z Lovable do tworzenia aplikacji
Lovable podważa niektóre utarte założenia większości procesów deweloperskich:
- Że musisz zacząć w pustym oknie VS Code.
- Że potrzebujesz makiet Figma przed stworzeniem układu.
- Że potrzebujesz ticketów zanim przejdziesz do logiki.
Zamiast tego Lovable oferuje środowisko pracy, gdzie język naturalny staje się głównym UX nie tylko do kodowania, ale do budowania pełnych produktów.
Ma to ogromne znaczenie dla:
- Prototypowania: Koniec ze statycznymi makietami — testuj prawdziwe pomysły UX w kilka godzin.
- Wdrażania: Nowi członkowie zespołu mogą eksplorować kod i funkcje przez dialog.
- Dostępności: Projektanci i PM mogą wnosić wkład bez konieczności pisania kodu.
Dla tych bez profesjonalnego zaplecza programistycznego Lovable otwiera zupełnie nowy poziom twórczej swobody. Jeśli tylko wiesz, co chcesz zbudować, możesz kodować „vibe’ując” przez projekt — zamieniając pomysły w działające aplikacje bez typowych barier.
Czego uczymy się od Lovable
Interfejs to nowe IDE
Lovable pokazuje, że „kodowanie” nie zawsze oznacza pisanie. Może oznaczać podpowiadanie, edytowanie dialogiem i iterowanie przez intencje.
To otwiera szersze możliwości współpracy, szczególnie w małych zespołach i projektach solowych.
Szybkie pętle ważniejsze niż pełne specyfikacje
Gdy możesz budować, testować i ulepszać bez zmiany narzędzi czy pisania szablonów, otrzymujesz szybszy rozwój i więcej przestrzeni na kreatywność.
Nawet doświadczeni deweloperzy korzystają na mniejszej ilości przełączania kontekstu i szybszym feedbacku.
Aplikacje natywnie AI — narzędzia natywnie AI
Tak jak GitHub Copilot miał sens w VS Code, Lovable jest logiczne dla rosnącej generacji aplikacji napędzanych agentami i promptami — gdzie struktura, logika i przepływy użytkownika nie są już twardo zakodowane, a dynamiczne.
Zbuduj aplikację galerii zdjęć, używając Logto jako uwierzytelniania
Na początek wystarczy prosty prompt, np. „Stwórz aplikację galerii zdjęć”, a Lovable wygeneruje dla ciebie podstawową, ale estetyczną stronę.
Integracja Logto Auth w Lovable
Następnie poprosiłem Lovable o użycie Logto do uwierzytelniania. Choć Lovable ma ścisłą współpracę z Supabase przy auth, to Supabase nie jest profesjonalnym rozwiązaniem CIAM. W tym przypadku wybrałem Logto — otwartoźródłowy, profesjonalny produkt CIAM.
Zgodnie z instrukcjami potrzebowałem podać:
- Endpoint Logto
- ID Aplikacji
Ponieważ to aplikacja jednostronicowa React, nie jest wymagane hasło aplikacji. Sztuczna inteligencja poradziła sobie z tym wszystkim sprawnie — automatycznie zainstalowała najnowszy Logto React SDK i utworzyła konieczne komponenty uwierzytelniające.
Aby uzyskać endpointy, po prostu wszedłem w Logto Cloud i utworzyłem nową aplikację React. Na stronie szczegółów aplikacji znalazłem wymagane endpointy i skopiowałem je do Lovable. Lovable wtedy automatycznie zaktualizowało kod i pliki konfiguracyjne.
Będziesz też musiał podać Redirect URI i Post-Sign-out URL swojej aplikacji.
Oto haczyk: ponieważ Lovable hostuje środowisko deweloperskie w chmurze, nie możesz użyć czegoś w stylu http://localhost:3000/callback jako redirect URI. Zamiast tego musisz podać bieżący adres swojego projektu Lovable i zaktualizować go w konsoli Logto Cloud.
Kroki:
- Przejdź do swojego tenant Logto Cloud
- Znajdź swoj ą aplikację
- Podmień adresy na:
-
Redirect URIs:
https://preview--snap-show-gallery-time.lovable.app/callback -
Post Sign-out Redirect URIs:
https://preview--snap-show-gallery-time.lovable.app/
Po kilku promptach i iteracjach masz już zabezpieczoną stronę internetową — tylko zalogowani użytkownicy widzą treść.
Pamiętaj, że tego typu agent kodujący korzysta z iframe'ów w trybie podglądu, więc kliknięcie w trybie podglądu nie wywoła strony logowania.
Testuj przepływ logowania
Po kliknięciu „Sign in” otworzysz stronę logowania Logto. Możesz przetestować cały przepływ uwierzytelniania — domyślnie Logto używa e-maila + hasła do logowania. Przejdź proces weryfikacji e-maila i sprawdź w Konsoli Logto, czy użytkownik został zarejestrowany.
Jak widać, twój użytkownik pojawił się w konsoli Logto Cloud — to potwierdza, że logowanie zadziałało, a użytkownik został bezpiecznie zarejestrowany przez twoją aplikację.
Teraz masz w pełni działającą aplikację z pełną integracją logowania — a także możesz zarządzać użytkownikami bezpośrednio przez konsolę Logto Cloud.
Nadchodząca aktualizacja Logto: integracja auth z AI
To tylko prosty przykład. Logto aktywnie rozwija serwery MCP, które będą działać wewnątrz twojego IDE, umożliwiając interakcję z konsolą Logto i Management API — bez wychodzenia z twojego środowiska developerskiego. Dzięki temu będziesz w stanie:
- Tworzyć i zarządzać użytkownikami
- Uzyskiwać dostęp do logów
- Konfigurować i zarządzać przepływami logowania
- Projektować i utrzymywać autoryzację (np. API, uprawnienia, role)
- Zarządzać aplikacjami i zasobami
- I o wiele więcej
Dzięki połączeniu AI i solidnej infrastruktury Logto, integracja auth przestaje być skomplikowanym zadaniem.