Vibe Coding vs NoCode: praktyczne porównanie na przykładzie klona Booksy (Lovable vs Bubble)

Dariusz PiteraUncategorized5 months ago27 Views

1) Kontekst i cel eksperymentu

Dlaczego akurat klon Booksy?
Chcę sprawdzić w miarę realny projekt, który posiada kluczowe funkcje: role użytkowników, rezerwacje, płatności, kalendarz i powiadomienia.

Zobaczymy jak to wyjdzie w praktyce. Większość osób, które używają Vibe Codingu – tworzy proste Landing Page. Zobaczmy czy faktycznie da się zbudować coś działającego i praktycznego ?

  • Problem/hipoteza:
  • Zakres MVP:
  • Technologie: Lovable (Vice Coding/AI-assisted) vs Bubble (NoCode)
  • Kryteria oceny:

2) Założenia biznesowe klona Booksy

Na cele naszego eksperymentu stworzyłem prosty prompt – którego użyjemy do tworzenia aplikacji.

W tym przypadku do generowania użyłem gotowego GPTs’a dostępnego w OpenAI. Polecam przetestować – działa całkiem fajnie. Oczywiście trzeba go ładnie nakierować na to co chcemy zrobić.

UWAGA: Zauważcie, że celowo prosiłem o to aby dodał tabele bazy danych wraz z polami. W naszym teście będziemy łączyli Lovable z Supabase. Bez tego mówienie o prawdziwej aplikacji – to tak jak mówienie o tym, że Fiat 500 to w praktyce Ferrari.

GPT dla OpenAI:

Wygenerowany prompt - użyjemy tego samego w Lovable i Bubble :) 

I want to create a booking platform for beauty and wellness services with Supabase backend. It should include:

Secure Supabase Auth with separate sign-up flows for customers and service providers, role-based access, and encrypted personal data (passwords stored only in Supabase Auth).

Database tables: users (id UUID from Auth, name, email, role, created_at), providers (id, user_id, business_name, address, phone), provider_amenities (id, provider_id, amenity_type ENUM['free_parking','credit_cards','pets_allowed','wifi','wheelchair_access'], value boolean), workers (id, provider_id, name, specialization, photo_url), services (id, provider_id, worker_id, name, price, duration, description), service_photos (id, service_id, photo_url), appointments (id, customer_id, service_id, datetime, status), reviews (id, appointment_id, rating, comment).

Customer functions: browse and search providers, filter by amenities, view provider profiles with workers and services, book appointments, manage bookings (reschedule/cancel), upload review with rating and comment, manage own profile and settings.

Service provider functions: manage business profile and amenities, add/edit/remove workers, create and edit services (assign to workers), upload service photos, set availability calendar, view and manage appointment requests (approve/decline/mark complete), respond to reviews, manage own profile and settings.

3) Wersja w Lovable (Vibe Coding / AI-assisted)

3.1) Setup i start

Startujemy. Odpalamy stronę: https://lovable.dev/

Wpisujemy nasz prompt:

Lovable poprosi nas o podłączenie bazy Supabase – robimy to i tworzymy projekt:

Po podłączeniu możemy się wziąć do prawdziwej pracy. Nasz ekran powinien wyglądać mniej więcej tak:

3.2) Implementacja kluczowych funkcji

Najpierw prosimy Lovable o stworzenie struktury Bazy danych. Nie wiem czy domyślnie zrobiłby to sam – ja poprosiłem go wprost: “Ok can we create first version of my application. And prepare structure for that app in supabase ?

Następnie klikamy Approve i możemy sprawdzić czy w naszej tabeli w Supabase pojawiły się jakieś tabele:

UWAGA: Tak wiem to już wymaga trochę wiedzy o tym jak działają Aplikacje. Zwykły kowalski może nawet nie wiedzieć co to baza danych i jak działa.

Super – coś udało się nam stworzyć – czy dobrze, zobaczymy przecież to Vibe Coding – nie nam oceniać.

Czas na aplikację – poprosiłem Lovable aby zajął się tym od A do Z – przecież on jest specjalistą: “Great – now can we prepare first version of app with all the views and functionalities ?”

Po chwili mamy pierwszą wersję aplikacji. Wygląda .. schludnie.

Zobaczmy więc co potrafi i czy działa. No i mamy pierwszy błąd przy logowaniu.

Po kilku próbach – udało się naprawić błąd.

Problem: Niestety logowanie nie działa – nie potwierdziliśmy adresu e-mail. Lovable nie jest jednak jeszcze zintegrowane z żadnym systemem do wysyłki maili – co wg. mnie powinno być zrealizowane domyślnie aby myśleć o tworzeniu jakichkolwiek systemów.

Na potrzeby testów w Supabase – wyłączmy konieczność potwierdzania adresu e-mail:

Po ustawieniu tego parametru – udało nam się zalogować. Aplikacja prawie gotowa – ale nie mamy miejsca gdzie Usługodawcy mogli by dodawać swoje usługi.

Dodajmy więc opcję stania się Providerem:
Niestety walidacje i bezpieczeństwo – nie jest domyślne w Lovable – a szkoda.

Dalsza praca z Lovable to w zasadzie powtarzanie promptów i udoskonalanie aplikacji.

Tworzenie aplikacji bez Płatnego planu – niestety raczej nie ma sensu, gdyż macie 5 darmowych tokenów na dzień. Płatny plan – nie jest tani. Efekt końcowy – nie jest gwarantowany.

Tym bardziej, że mało jest naprawdę rozbudowanych aplikacji stworzonych w Lovable.

Oczywiście – jest to możliwe lista aplikacji dostępna jest na stronę Lovable: https://launched.lovable.dev/

W większości są to proste jednozadaniowe aplikacje z płatną subskrypcją jak np: https://kidartlive.lovable.app/pricing lub https://resumetransform-ai.lovable.app/#how-it-works

3.3) Zalety

  • Platformy AI nadają się obecnie do tworzenia prostych aplikacji lub szybkiego prototypowania.
  • Łatwość implementacji nowych funkcji – wpisujesz czego oczekujesz – AI robi to za ciebie.
  • Możliwość darmowego testowania – 5 tokenów dziennie.
  • Automatyczny system Deployu – nie musisz być DevOpps’em

3.4) Wady

  • Stworzenie aplikacji z logowaniem i płatnościami jednak wymaga wiedzy technicznej
  • nie wszystko od razu działa
  • Bezpieczeństwo – to raczej wbudowane Vulnerability as a Service (VaaS) Używać tylko dla prostych aplikacji i Landing Page – najlepiej bez danych osobowych i RODO.
  • Przy bardziej rozbudowanych projektach – brak kontroli nad zmianami tylko w precyzyjnej części kodu.

3.5) Podsumowanie

Dla mnie ciągle Lovable to bardziej platforma do szybkiego makietowania niż “programowania”. Może okazać się szybkim startem – jeżeli chcemy przygotować PoC wizualny projektu – wygenerować kod do Gitlab, a następnie oddać w ręce programistów.

W mojej opinii możemy włożyć między bajki informacje, że AI zastąpi programistów. W mojej ocenie jeszcze bardzo długo to nie nastąpi. Pamiętajmy, że tutaj testowaliśmy najprostszy możliwy przykład aplikacji – gdzie AI jeszcze nie jest w pełni gotowe aby realizować je poprawnie. Jak więc możemy myśleć, że kiedyś ktoś powiedzmy AI pisanie aplikacji bankowych, systemów bezpieczeństwa czy zaawansowanych systemów ERP.

4) Wersja w Bubble (NoCode)

4.1) Setup i start

Przechodzimy do strony Bubble: https://bubble.io/

Obecnie bubble ma także generator AI – zobaczmy jak działa w porównaniu do tego z Lovable. Skorzystajmy z niego.

Bubble na start proponuje nam 14 dniowy Trial. Nie jest nam do potrzebne. Więc klikamy Start With Basic Features.

W bubble bardzo fajne jest to, że płatny plan jest nam w zasadzie potrzebny dopiero przy uruchamianiu aplikacji. Do tego momentu – możemy tworzyć za darmo – w przeciwieństwie do Lovable.

Wpisujemy nasz prompt:

Bubble – czyta nasz prompt i przygotowuje … no właśnie tutaj kolejna różnica. W bubble nie dostajemy od razu aplikacji – ale zestaw wymagań funkcjonalnych – które możemy sprawdzić i rozszerzyć jeszcze przed uruchomieniem aplikacji.

W przypadku Lovable – została pominięta całkowicie funkcjonalność dla Usługodawców. Tutaj możemy to łatwo sprawdzić i dodać:

Na ten moment nie zmieniamy tutaj nic – chcemy aby test był sprawiedliwy i klikamy Generate. Proces tworzenia aplikacji potrwa około 10 min.

Po wygenerowaniu Bubble przenosi nas do widoku Edytora:

Mamy w konsoli 16 błędów – dużo ale nie przejmujmy się nimi. Uruchamiamy naszą aplikację za pomocą przycisku Preview i zobaczmy co otrzymaliśmy:

Strona jest gotowa – może nazbyt różowa – ale to kwestia gustu.

Sprawdźmy ścieżkę logowania i rejestracji.

Po kliknięciu Sign Up – następuje zalogowanie. Zaletą Bubble jest to, że obsługa uprawnień użytkowników, logowania i wysyłki maili jest w standardzie.

Na screenach widzimy, że Bubble przygotował dla nas kilka już działających widoków – zobaczmy jak to działa.

Bubble przygotował dla nas widok dodawania usług.

Niestety – ze względu na błedy – po zapisaniu uslugi się nie wyświetlają – mimo, że poprawnie zapisują się w bazie danych.

Dodatkowo Bubble – stworzył też kilka rekordów, podczas tworzenia aplikacji.

Tutaj – niestety magia się kończy. Bubble obecnie nie ma jeszcze możliwości poprawy aplikacji z AI. Wymagana jest znajomość platformy. Dla jednych – będzie to duży minus. Dla drugich – jak ja plus – dlatego, że mam większa kontrolę nad aplikacją. Wiem jak działa – ale nie muszę umieć programować.

Zobaczmy czy uda nam się szybko naprawić błędy i jak wtedy będzie wyglądała nasza aplikacja. Po kilku zmianach okazało się, ze błędu dotyczyły filtrowania danych. Po naprawie mamy listę naszych Placówek i Usług:

Gdzie możemy umówić się na daną usługę:

Oczywiście – aplikacja nadal wymaga sporo pracy aby nadawała się do “użytku”. Z tym, że to już kwestia na osobny materiał.

4.2) Zalety

  • Wbudowany generator aplikacji AI
  • Lepiej rozwiązana kwestia zbierania wymagań przed uruchomieniem Agenta AI
  • Mechanizmy Logowania i powiadomień wbudowane w aplikację – po prostu działa
  • W finalnym rozrachunku – dzięki możliwościom integracji i NoCode – pozwala na budowanie dużo bardziej zaawansowanych aplikacji – oczywiście nie klasy Enterprise

4.3) Wady

  • Finalnie wymaga znajomości baz danych
  • Aby tworzyć w nim aplikacje – konieczne jest przejście szkolenia
  • AI jedynie tworzy nam poczatek aplikacji – nie możemy jej rozwijać w trakcie
  • Aplikacje tworzone w Bubble – nie są najlepsze jeżeli chodzi o szybkość – więc nie nadają się na Landing Page czy strony CMS. Tutaj mówimy bardziej o aplikacjach Backendowych i Panelach użytkowników.

5) Plusy i minusy – szybkie podsumowanie

Co wybrać kiedy?

Lovable

Do szybkich prototypów, makiet, prostych Landing Page – nada się znakomicie.

Bubble

Do aplikacji wymagających kontroli nad bezpieczeństwem logiką oraz z bardziej zaawansowanymi integracjami.

6) Podsumowanie

O ile aplikacje typu Bolt i Lovable mają ładny marketing i opakowanie o tyle platformy typu NoCode pozwalają faktycznie na dostarczenie pełnoprawnych aplikacji – nawet tych bardziej zaawansowanych.

W przypadku takich rozwiązań mamy wbudowane mechanizmy monitoringu oraz bezpieczeństwa danych użytkowników – co jest wielkim plusem.

Bubble pozwala też w łatwy sposób podłączyć się z dowolnym API – posiada też wiele wbudowanych wtyczek do automatycznej integracji.

Wadą jest to, że budowanie aplikacji w praktyce wygląda jak programowanie – z tym, że nie piszemy kodu – ale układamy klocki. Musimy tez znać REST API aby swobodnie móc integrować się z innymi aplikacjami.

0 Votes: 0 Upvotes, 0 Downvotes (0 Points)

Leave a reply

Donations
Dołącz do nas
  • Linkedin

Stay Informed With the Latest & Most Important News

Kategorie

Advertisement

Join Us
  • Facebook
  • X Network
  • LinkedIn
Categories
Loading Next Post...
Follow
Search
Terndy
Loading

Signing-in 3 seconds...

Signing-up 3 seconds...