Czym jest Bubble?

Bubble to w najprościej mówiąc aplikacja webowa, która pozwala użytkownikom na tworzenie innych aplikacji, nawet wtedy, gdy ich wiedza programistyczna jest znikoma lub żadna. I mimo, że na początku ten opis może Ci się wydać nieco enigmatyczny, to postaram się wyjaśnić wszystko tak, by stało się to znacznie bardziej zrozumiałe. Otóż twórcy Bubble postawili sobie za cel stworzyć narzędzie, w którym każdy będzie mógł zbudować od podstaw nawet bardzo rozbudowaną aplikację typu full-stack. Może ona na przykład obsługiwać rejestrowanie i logowanie użytkowników, posiadać złożoną bazę danych, a nawet współpracować z zewnętrznymi API i to wszystko bez ani jednej linijki kodu. Czyim się udało? Zdecydowanie TAK! 

‍

Pierwsze kroki

Pracę z Bubble rozpoczynamy od zarejestrowania konta na stronie. Kolejnym krokiem będzie pominięcie samouczka, który polecają jego twórcy. Tak, nie pomyliłem się i wiem co piszę. Zdecydowanie odradzam ich tutorial, bo moim zdaniem, jest on po prostu kiepsko przygotowany. Gdy sam uczyłem się podstaw i odpaliłem poszczególne lekcje, po przebrnięciu przez kilka z nich wiedziałem jeszcze mniej niż na początku. W sieci można znaleźć znacznie lepsze materiały, np. stanowiący dość dobre wprowadzenie kurs na Udemy.

Kolejno klikamy w przycisk New App, odpowiadamy na kilka pytań i możemy przejść do nowego projektu.

Podstawy

Naszą podstawową zakładką, z którą pracować będziemy najwięcej jest Design. To tutaj projektujemy, chociaż może lepszym słowem byłoby rysujemy, to jak ma wyglądać nasza aplikacja. Dlaczego wspominam o rysowaniu? Ponieważ to właśnie do tego sprowadza się praca z designem. Wybieramy interesujący nas komponent z listy dostępnych, a jest ich naprawdę sporo, a następnie rysujemy go w takim rozmiarze, jaki nam opowiada. W ten sposób możemy dodać np. buton, pole tekstowe, pole input, itd. Bubble ma co prawda pewne predefiniowane style dla elementów, np. kolory, rozmiary czcionek i rodzaj fontów, ale możemy je w każdej chwili zmienić. W ten sposób nasza aplikacja może wyglądać dokładnie tak, jak zapragniemy i nic nas nie ogranicza.

Musimy tylko pamiętać o jednym ważnym fakcie, każdy element, który dodamy może mieć albo stały rozmiar – czyli będzie dokładnie taki, jak go narysowaliśmy lub też może się rozszerzać wraz ze zmianą szerokości naszej strony. By ustalić jakie zachowanie nam bardziej odpowiada wystarczy kliknąć odpowiednią opcję. Jest mały drobiazg, ale na początku może sprawić kłopot, gdy np. nasze pole input raptem rozciągnie się na bardzo dużą szerokość.

Workflows

Żadna aplikacja nie może działać właściwie, jeśli nie zaprojektujemy tego, jak ma reagować na działania użytkownika. W Bubble w tym celu wykorzystujemy zakładkę Workflow. Jej podstawa działania jest mocno zbliżona do tworzenia automatyzacji w Integromacie lubZapier. Przede wszystkim potrzebujemy czegoś, co rozpocznie całą sekwencję zdarzeń, może to być np. kliknięcie w przycisk, wpisanie wartości do pola input lub konkretna akcja z całego szeregu predefiniowanych zdarzeń, któreo trzymujemy out of the box od twórców Bubble. Jest to na przykład załadowanie się naszej konkretnej strony, zalogowanie użytkownika i wiele innych. Zresztą sama obsługa rejestracji i logowania użytkowników to zadanie, które początkującym programistom może spędzić sen z powiek, a tutaj sprowadza się to właściwie do kilku kliknięć. Wystarczy, że dodamy pola input, w których użytkownik wpisze swoje imię, adres email oraz hasło i na koniec kliknie w przycisk. Następnie mówimy Bubble, że ma uruchomić ciąg zdarzeń, które po kliknięciu w button pobiorą sobie wartości podane w tych polach i korzystając z predefiniowanej akcji zarejestrujemy, czyli dodamy nowego użytkownika do bazy. Nie musimy absolutnie nic kodować, wybieramy właściwą akcję i wyklikujemy odpowiednie pola – każde z nich posiada podpowiedź, która wyjaśni nam co jesteśmy w stanie tam przekazać lub z jakich opcji skorzystać.

Każdy kolejny scenariusz będziemy tworzyć w taki sam sposób, czyli najpierw wybieramy trigger, a potem ustalamy co się ma dziać w poszczególnych krokach. Dodatkowo, jeśli w jednym kroku utworzymy nowy rekord w naszej bazie, to w kolejnym mamy już do niego dostęp i możemy np. wyciągnąć sobie z niego jakieś potrzebne nam dane.

Baza danych

Każda nowa aplikacja posiada odrazu przygotowany schemat bazy użytkowników wraz z odpowiednimi akcjami. W ten sposób ich rejestrowanie, logowanie czy nawet usuwanie jest bajecznie wręcz proste. Możemy także odpowiednio obsłużyć odzyskiwanie hasła, zmianę danych lub wysłać maila, który będzie wymagał potwierdzenia rejestracji w naszym serwisie. Dodatkowo taka baza jest odpowiednio zabezpieczona, czyli nawet my, twórcy aplikacji nie mamy żadnego dostępu do haseł użytkowników co zapewnia im bezpieczeństwo, a nas w pewnym stopniu uchroni przed wyciekiem ich danych.

Jeżeli korzystałeś kiedyś z Webflow to stworzenie nowej bazy danych jest bardzo zbliżone do tworzenia nowej kolekcji. Musimy nadać jej nazwę, a kolejno tworzymy pola i i określamy jakiego typu dane, chcemy w nich umieszczać. Może to być przykładowo zwykły tekst, liczba, wartość typu boolean, czy też nawet powiązanie z inną bazą. W ten sposób możemy posiadać bazę postów oraz bazę autorów i potem konkretnego autora powiązać z artykułami, które napisał. Wszystko działa w bardzo intuicyjny sposób i jest zrozumiałe nawet dla dość początkujących użytkowników.

Zalety i wady

Bubble to niesamowicie potężne narzędzie i mój artykuł to jedynie czubek góry lodowej, gdyż omówienie wszystkich jego funkcji to temat na cały podręcznik. Zależało mi bardziej na tym, aby zaprezentować chociaż podstawy i przekonać Cię, że nie należy się go bać. Natomiast teraz przyszedł czas na najbardziej istotne pytanie – czy polecam z niego korzystać w praktyce? Odpowiedź niestety nie jest prosta.

Tworzenie aplikacji bez potrzeby kodowania to moim zdaniem krok w dobrą stronę. Bubble pozwala bowiem skupić się na tym co chcemy zbudować, a nie tym jak to zrobić. Nie musimy uczyć się od podstaw języków programowania, opanowywać frameworki, myśleć o tym jak mają się komunikować komponenty lub jakie rozwiązania bazodanowe zastosować. Ta wolność kreacji to coś co Was zachwyci, jeśli do tej pory, tak jak ja, mieliście do czynienia z kodowaniem.

Niestety nie ma róży bez kolców, a w przypadku Bubble, tym największym jest kompletnie archaiczne podejście do front-endu. Sprawia to, że darzę go tak sprzecznymi uczuciami. O ile samo tworzenie logiki działania aplikacji wprawia mnie w absolutny zachwyt, to próba uczynienia jej w pełni responsywną i dobrze wyglądająca na różnych urządzeniach brutalnie sprowadza na ziemię. Nie mogę zrozumieć czemu w czasach, gdzie do naszej dyspozycji mamy tak wiele rozwiązań ułatwiających tworzenie skalowanych witryn, czyli chociażby relatywne jednostki, Flexboxa lub CSS Grid, żadnego z nich nie znajdziemy w Bubble. To co może wyglądać na jego największą zaletę, czyli fakt, że rysujemy nasze komponenty na stronie i dokładnie to otrzymujemy w działającej aplikacji, jest też największą wadą. A to dlatego, że wszystkie one rozmieszczane są poprzez pozycjonowanie absolutne. Jeśli kiedyś z niego korzystałeś to wiesz, że może być przydatne w pewnych określonych sytuacjach, ale totalnie się nie sprawdza by tworzyć w ten sposób cały serwis. Rozmiary elementów możemy ustalać wyłącznie w pikselach, a sama ich „responsywność” ogranicza się do tego, że ustalamy czy mają mieć stałe wymiary czy też rozszerzać lub kurczyć się w określonym stopniu. W Webflow mamy opcję przełączania widoków, w ten sposób możemy inaczej zaprojektować układ naszego serwisu jeśli użytkownik wyświetli stronę na szerokim ekranie lub na małym telefonie. W Bubble jeśli układ ma się zmienić to trzeba go zbudować osobno od podstaw i poprzez odpowiedni warunek wyświetlić dla danej szerokości strony. Jest to niesamowicie czasochłonne i uciążliwe zadanie, które sprawia, że obsługa rozbudowanego serwisu może przyprawić nas o ból głowy.

Światełkiem w tunelu może być jednak to, że rynek no-code jest niesamowicie wręcz konkurencyjny, a każde nowe narzędzie to bardziej ewolucja poprzedniego niż totalna rewolucja. Co oznacza, że być może gdzieś już powstaje ulepszona wersja Bubble, która rozwiąże jego największe problemy i sprawi, że będę go mógł polecić z czystym sercem. A na teraz mogę Ci czytelniku doradzić, że Bubble zdecydowanie warto znać i umieć się w nim poruszać, ale wykorzystywać go raczej do tworzenia prostych MVP, niż profesjonalnych i rozbudowanych aplikacji.