Bubble: Poznajemy edytor
od Podstaw
6 godz. 34 min · Bubble · Full-stack i Programowanie
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzego się nauczysz
- Podstawy pracy z edytorem
- Wprowadzenie do workflows
- Praca z nowym silnikiem responsywnym
- Praktyczne wykorzystanie pluginów
- Statyczna strona główna
- Funkcjonalna strona logowania i rejestracji
Praca w stylu no-code
Zapomnij o ręcznym pisaniu kodu i żmudnym tworzeniu stron www lub aplikacji! Wykorzystując przejrzysty edytor Bubble będziemy w stanie rozpocząć naszą pracę od czystej kartki i wyklikać cały układ bezpośrednio w interfejsie. Dodatkowo pokażę Ci w jaki sposób można wdrożyć do projektu w pełni funkcjonalną logikę obsługi użytkowników nawet wtedy, gdy nie posiadasz żadnej wiedzy programistycznej. A to wszystko w niemal ekspresowym tempie i bez zbędnych konfiguracji, które bywają zmorą programistów.
Dlaczego warto korzystać z Bubble?
Edytor zapewnia spójny i intuicyjny interfejs, dzięki któremu stworzenie nawet skomplikowanej aplikacji staje się wyjątkowo proste. Dodatkowo wbudowana baza danych sprawia, że nie musimy korzystać z żadnych zewnętrznych rozwiązań a zarządzanie nią jest na tyle intuicyjne, że poradzi sobie z tym nawet niedoświadczony użytkownik. Kolejną zaletą jest dostęp do ogromnej biblioteki pluginów, dzięki którym będziemy mogli wzbogacić naszą aplikację o obsługę płatności, analitykę, SEO i wiele więcej.
Co można zbudować w Bubble?
Niemal wszystko, z wykorzystaniem Bubble bezproblemowo stworzymy klony takich serwisów jak: Twitter, Asana, Todoist, AirBnB, Trip Advisor lub Yelp. Edytor pozwala stworzyć w pełni funkcjonalną aplikację w ciągu nawet kilku dni! Dzięki temu nie będziemy musieli przepalać naszego budżetu na zewnętrzne software house, którym wdrożenie podobnych rozwiązań może zająć tygodnie pracy.
Czego dowiesz się z kursu?
W tym kursie skupimy się na podstawach pracy z edytorem, tak aby korzystanie z niego stało się dla Ciebie naturalne. Wykorzystamy w praktyce zakładkę Design, która jest odpowiedzialna za front-end naszej strony oraz zapoznamy się z działaniem workflows, które "tchną życie" w nasz projekt. Efektem naszej pracy będzie nowoczesny landing page oraz w pełni funkcjonalna strona logowania/rejestracji. Dodatkowo zadbamy również o to, by całość była w pełni responsywna i dobrze prezentowała się zarówno na ekranach desktopowych, jak i urządzeniach mobilnych.
Wykraczamy poza edytor
Jedną z zalet edytora Bubble jest to, że nie stanowi on hermetycznego środowiska, w którym jesteśmy skazani na korzystanie jedynie z rozwiązań zaprojektowanych przez jego twórców. To niesamowicie funkcjonalna platforma, którą w prosty sposób możemy połączyć również z zewnętrznymi usługami wykorzystując gotowe pluginy. Pokażę Ci w jaki sposób możemy zaimplementować do naszego projektu opcję logowania i rejestracji z wykorzystaniem Google, tak, aby użytkownik mógł utworzyć konto w naszym serwisie za pomocą jednego kliknięcia. A kolejnym bonusem będzie przesyłanie adresów e-mail z formularza zapisu na newsletter bezpośrednio do bazy w Airtable!
Dla kogo jest ten kurs?
Ten kurs powstał z myślą o osobach, które chcą poznać edytor Bubble i nowy kierunek rozwoju aplikacji no-code. Będzie również doskonałym punktem startowym dla tych wszystkich, którzy nie posiadają żadnej wiedzy programistycznej ale nadal chcą tworzyć w pełni funkcjonalne serwisy i strony internetowe. Poziom kursu został dopasowany zarówno do osób, które do tej pory nie korzystały z Bubble, jak i tych, którzy posiadają już przynajmniej podstawowe doświadczenie w tym zakresie. Dzięki zdobytej w nim wiedzy będziesz mógł postawić pierwszy krok na drodze, która pozwoli Ci przekuć Twój pomysł w działający startup.
Witam Cię w kolejnej lekcji, w której
rozpoczynamy dokładnie od tego momentu, jakim skończyliśmy w poprzedniej, czyli
jesteśmy na etapie tworzenia nowej aplikacji.
Aby to zrobić musimy tutaj kliknąć przycisk Create a new app
i podać podstawowe informacje o aplikacji, którą chcemy stworzyć.
W tym miejscu podajemy jej nazwę.
Możemy więc tutaj wprowadzić jakąś dowolną nazwę.
Musisz pamiętać o tym, że nazwa, która
tutaj wprowadzisz będzie widoczna potem w pasku adresu w przeglądarce.
Dlatego też postaraj się, aby ona była w
miarę czytelna i zrozumiała zarówno dla Ciebie, jak i dla innych użytkowników.
Potem, jeżeli przerzucisz taką własną
aplikację na produkcję, będziesz mógł podpiąć własną domenę i zmienić tą nazwę.
Ale w trakcie pracy będziemy właśnie korzystać z tej, w moim przypadku tutaj np.
nazwy edu-projecto.
To co natomiast podamy tutaj w tym miejscu w zasadzie nie ma żadnego znaczenia.
Musimy wypełnić te pola.
Dlatego ja po prostu wybieram tutaj jakieś dowolne
opcja pierwsza z rzędu.
W ten sposób również ten guzik mi się tutaj zrobił
taki niebieski, a więc mogę kliknąć create a new app.
Niestety tutaj informacja, że taka nazwa
już jest zajęta, więc musimy wprowadzić tutaj jakąś inną nazwę, np.
Może spróbujmy tak.
Teraz wszystko już jest ok.
Otrzymujemy tu taki pasek postępu, czyli nasza aplikacja jest już tworzona.
Jak widzisz mamy tutaj stosowną informację i za chwilę przejdziemy do samego edytora.
Ok, jesteśmy już w zasadzie w edytorze.
Dodatkowo otworzył nam się tutaj jeszcze
taki asystent aplikacji, który pyta nas, czy chcemy rozpocząć pracę
od czystej kartki, czyli projektować całą naszą aplikację od podstaw samemu, czy też
właśnie zostawić tutaj ten gotowy szablon przygotowany przez pracowników Bubble.
Ja najczęściej wybieram tą opcję, czyli create with a blank page.
Natomiast w naszym przypadku na chwilę obecną to zostawię.
Możemy więc zamknąć tego asystenta, klikając ten guzik i już jesteśmy w samym edytorze.
Doskonale zdaję sobie sprawę, że ten edytor może na początek dosyć mocno
przytłoczyć, zwłaszcza tutaj tą ilością dostępnych opcji.
Natomiast nie przejmuj się, przejdziemy
przez to wszystko tak, abyś na koniec kursu swobodnie się po nim poruszał.
Dodatkowo chciałbym, abyś wiedział, że ta część, czyli właśnie
edytor jest widoczny tylko i wyłącznie dla Ciebie.
To Ty z niego korzystasz i to Ty budujesz tutaj swoją aplikacje.
Jak doskonale wiesz lub nie,
każda aplikacja składa się z kilku podstawowych elementów i w tym przypadku
za każdy element odpowiada tutaj odpowiednia zakładka.
Na chwilę obecną jesteśmy w zakładce design, czyli w zakładce, która odpowiada
za frontend, a więc to co widzi użytkownik, jeżeli będzie wchodził na
stronę z naszą gotową aplikacją, czyli w zasadzie właśnie tutaj.
Te elementy mamy tutaj składowe elementy takiej aplikacji.
Po prostu przenosimy je tworząc naszą
aplikację, jak już mamy tutaj jakiś nagłówek.
Mamy przyciski, mamy pola tekstowe, mamy teksty, tutaj jakieś ikonki itd.
Kolejno mamy tutaj zakładkę workflow,
która będzie odpowiadała za akcje jakie będą wykonywane w ramach naszej aplikacji.
Jeżeli użytkownik np.
kliknie w guzik zaloguj się, to przeniesiemy go np.
na odpowiednią stronę gdzie wypełni formularz do logowania.
Kolejno mamy tutaj zakładkę data, która odpowiada za bazę danych naszej aplikacji.
Kolejno to zakładka styles,
w której będziemy tworzyć style CSS dla naszej aplikacji.
Następnie mamy zakładkę plugins.
Tu będziemy dodawać i zarządzać pluginami w ramach naszej aplikacji.
Kolejno mamy tutaj zakładkę settings,
która odpowiada za ustawienia samego edytora Bubble oraz zakładkę logs,
w której dostajemy tutaj informacje o tym, jak działa nasza aplikacja.
Wszystkie te zakładki omówimy sobie dokładniej
w trakcie właśnie naszego kursu, przechodząc przez nie po kolei.
Na chwilę obecną chciałbym tylko, żebyś wiedział mniej więcej do czego one służą.
Dodatkowo mam nadzieję, że zwróciłeś uwagę na jeden bardzo ważny fakt.
Jeżeli przeklikuję się przez to zakładki, no to zawartość tego okna głównego mi się
tutaj zmienia w zależności od wybranej zakładki.
Natomiast ten pasek górny pozostaje praktycznie bez zmian.
Możemy więc teraz przejść i go sobie dokładniej omówić.
Pierwszym elementem jest tutaj ikonka Bubble.
Jeżeli bym ją kliknąć to zostanę przeniesiony z powrotem
do dashboard'u.
Jak widzisz mamy tutaj naszą pierwszą utworzoną aplikację.
Dodatkowo informacja, że jesteśmy w
zakładce my apps, czyli właśnie takiej, która odpowiada za moje aplikacje.
Dodatkowo mamy tu jeszcze dwie zakładki, my plugins,
tu będziemy tworzyć nowe pluginy i taki własny pluginy.
Będziemy potem mogli opublikować np. właśnie w Bubble marketplace.
A w tym miejscu jeżeli kliknę my templates to będę mógł utworzyć taki własny szablon
aplikacji i go również potem opublikować bądź sprzedać właśnie w Bubble marketplace.
Wróćmy jednak do aplikacji,
i aby wrócić z powrotem do takiej naszej pierwszej tworzenej aplikacji
wystarczy, że tutaj na nią najadę i kliknę, gdy pojawi mi się ikonka łapki.
Nasza aplikacja zostanie utworzona w nowym oknie, więc poprzednie możemy zamknąć.
Musimy poczekać na załadowanie edytora.
Już jesteśmy z powrotem wewnątrz samego edytora, możemy więc
przystąpić do omówienia kolejnych elementów.
Za pomocą tego elementu będziemy się poruszać po stronach naszej aplikacji.
Nasza apka może składać się z wielu różnych stron.
Jeżeli bym tutaj klikną właśnie page index.
Tak widzisz, mam tutaj informacje o stronach, które zostały teraz dla nas
utworzone przez sam edytor Bubble, a więc przede wszystkim jest to strona
indeksowa, czyli strona główna naszej aplikacji.
To taka strona, którą zobaczy użytkownik gdy gdy tylko wejdzie właśnie na stronę naszej apki.
Dodatkowo mamy tutaj jeszcze dwie strony
utworzone bezpośrednio dla nas przez same Bubble stronę 404.
Czyli jeżeli użytkownik wpisze jakiś zły adres w pasku przeglądarki,
spróbuje się odnieść do strony, która nie istnieje.
Zostanie właśnie przekierowany tutaj na stronę 404
oraz dodatkowo stronę, gdzie będzie mógł zresetować hasło.
Jeżeli chciałbym teraz przejść na stronę
reset password wystarczy, że najadę tutaj i kliknę.
Jak widzisz strona została nam tutaj załadowana.
Dodatkowo jeżeli chciałbyś dodać nową
stronę, wystarczy, że wrócisz tutaj, klikniesz page
reset i tutaj w opcję add a new page, zostaniesz poproszony o podanie nazwy
takiej strony oraz informację czy chcesz ją tworzyć tutaj od podstaw, czyli od
pustej kartki, czy też po prostu sklonować sobie jakąś istniejącą ja np.
sklonuje sobie stronę reset nazwę new reset password
i wybiera, że chce sklonować stronę reset password.
Teraz klikam create.
Widzisz, mam informację, że nowa strona jest tworzona.
Jesteśmy teraz właśnie na takiej
nowej stronie new reset password, która wygląda dokładnie tak samo
jak strona reset password, ponieważ ją po prostu sklonowaliśmy.
Jeżeli teraz chciałbym usunąć taką nowo
utworzoną stronę, znów klikam tutaj i tym razem muszę tutaj kliknąć w ikonkę
tego kosza widoczną właśnie przy tej stronie.
Jak widzisz, ta ikonka kosza nie pojawia się tutaj przy tych trzech stronach,
ponieważ są one takie właśnie wbudowane przez samo Bubble.
Nie możemy ich usunąć.
Mogę natomiast usunąć właśnie tą.
Klikam w ikonę kosza.
Muszę potwierdzić, że tak chcę usunąć taką stronę.
Odczekać chwilę i za chwilę wrócimy do strony indeksowej.
Natomiast chciałbym, żeby pamiętał, że jeżeli
przez przypadek zdarzy Ci się usunąć taką stronę, to nie przejmuj się, ponieważ taką
operację można przywrócić za pomocą tych dwóch opcji.
Za pomocą tej ikonki będziesz mógł cofnąć właśnie ostatnią wykonaną operację.
Dokładnie to samo stanie się, jeżeli
nacisnę kombinację klawiszy Command Z na Macu lub Control Z na Windowsie.
Natomiast tutaj za pomocą tej ikonki
przywrócimy taką ostatnio wykonaną operację, jeżeli byśmy teraz cofnęli.
To, co zrobiliśmy ostatnio.
Jak widzisz wrócę tutaj do page index.
Nasza strona została przywrócona, czyli cofnęliśmy operację jej usunięcia.
Jeżeli teraz kliknę tutaj, to ona zostanie ponownie usunięta.
Jak widzisz tutaj nam to zniknęło.
Kolejnym elementem jest tutaj element biker, czyli możliwość wyszukania
dowolnego elementu tutaj na naszej stronie.
Jeżeli chciałbym wyszukać ten button to muszę np.
tu teraz na niego najechać i sprawdzić jego nazwę.
Mam informacja, że jest to button get started. A więc
jeżeli gdzieś tam przesunąłbym się dalej
w ramach naszego design'u i chciałbym wrócić z powrotem do takiego button'a.
A nie do końca pamiętam gdzie on się tutaj znajdował.
Wystarczy, że kliknę tutaj, pojawi mi
taka informacja, że mogę wyszukać dany element, i wystarczy, że wpiszę button.
Jak widzisz pojawiają mi się te informacje.
Mamy tutaj kilka button'ów o nazwie get started.
Jak widzisz najeżdżam tutaj na
poszczególne elementy to Bubble dodatkowo wyświetla mi takie okienko podglądu.
Ja pamiętam, że był to taki niebieskawy button, mogę więc kliknąć tutaj.
Jak widzisz zostałem przewrócony tutaj do tego elementu został on zaznaczony.
I mogę teraz na nim operować.
Kolejno mamy tutaj guzik edit,
który pozwoli nam wykonywać pewne operacje w ramach właśnie naszego edytora,
a więc możemy tutaj to samo zrobić, co mamy tutaj, a więc
cofnąć ostatnią wykonaną operację, przywrócić, wyciąć jakiś element,
skopiować go, wkleić, wykonać tu również szereg innych operacji.
Natomiast jeżeli najechał bym na sam element np.
w tym przypadku na guzik get started i kliknął prawy guzik myszy.
Jak widzisz otrzymuję tu szereg opcji, z czego większość jest dokładnie
taka sama jak tutaj, bądź powtarza się tutaj z tym elementem arrange.
Tutaj z kolei będziemy mogli np.
wysłać jakiś element na przód na tył,
czyli ukryć go za innym elementem wycntrowanć w poziomie bądź w pionie.
Ja z tych opcji tutaj arrange i edit bardzo rzadko korzystam.
W tym miejscu najczęściej właśnie odnoszę
się do nich poprzez kliknięcie prawym guzikiem myszy.
Działa to znacznie szybciej, i jest dużo bardziej wygodne.
Kolejno mamy tutaj przycisk help.
Jeżeli w niego kliknę tak jak widzisz, mogę przejść do academy,
czyli strony z dokumentacją informacjami o Bubble tutaj do strony forum.
A także np. tutaj odpalić jakiś filmik wideo, który
wytłumaczy mi jakąś konkretną funkcjonalność Bubble'a.
Więc tak jak mówiłem, bardzo łatwo jest tutaj przejść do dokumentacji
jeżeli czegoś nie wiesz, wystarczy, że klikniesz tutaj
w academy.
I przeniesiesz się tutaj do dokumentacji Bubble.
Oczywiście możemy to teraz zamknąć i wrócić z powrotem do edytora.
W tym miejscu otrzymujemy informacje o postępach zapisywania naszej pracy.
Bubble zapisuje nasze postępy automatycznie.
Jeżeli np. teraz kliknąłbym w guzik,
to zwróć proszę uwagę co się tutaj stanie, jeżeli kliknę delete.
Czyli spróbuję tutaj po prostu usunąć. To otrzymuję
informacje, widzisz było saving czyli Bubble zapisywał i teraz zapisał
taką zmianę, czyli to, że usunąłem taki przycisk.
Mogę oczywiście przywrócić tą operację, cofnąć ją.
Wystarczy, że kliknę tutaj, jak widzisz znowu mamy informację saving i znowu save.
Czasami może się zdarzyć tak, że Bubble ma jakiś problem z połączeniem się z
serwerami, to będziesz miał wówczas tutaj taką czerwoną informację timeout.
Wystarczy wtedy tylko przeładować stronę,
odczekać chwilę i wszystko powinno wrócić do normy.
Kolejno mamy tutaj ikonkę takiego prezentu.
Jeżeli ją kliknę to przejdę do strony z ostatnimi wydaniami Bubble.
Mogę tutaj zobaczyć
właśnie kiedy Bubble wydało ostatni update, co zostało zmienione, jakie
funkcjonalności zostały dodane bądź poprawione.
Na chwilę obecną nas to nie interesuje.
Możemy zamknąć tą stronę i wrócić do edytora.
To bardzo ważna opcja.
Mam tutaj taką informacje, że w mojej aplikacji występuje jakiś jeden błąd i
więcej błędów nie będziesz miał w aplikacji, to więcej tutaj takich
powiadomień, dzięki czemu będziesz mógł je bardzo szybko rozwiązać, ponieważ
Bubble na bieżąco monitoruje Twoją pracę.
Jeżeli coś zrobisz źle albo zapomnisz
wypełnić jakąś wymaganą opcję, to Bubble Cię tutaj poinformuje właśnie za pomocą
tutaj ostrzeżenia, że na chwilę obecną mamy jakiś problem.
Jeżeli teraz to kliknę, dostaje właśnie takie okienko z informacją,
że mamy tutaj mapkę googla, jeżeli zjadę niżej.
Jak widzisz mam tutaj zaimplementowaną
apkę googla, która była domyślnie dołożona do tego szablonu.
Aby ona działała poprawnie, Bubble wymaga wpisania tutaj w ustawieniach
takich kluczy wygenerowanych w samym Google.
Tak więc moglibyśmy tutaj przejść, kliknę zostaje przeniesiony w
odpowiednie miejsce i tutaj będę musiał wprowadzić te klucze,
dzięki czemu w bardzo prosty sposób będziesz mógł tutaj
rozwiązywać wszystkie jakieś błędy jakie będą się pojawiały w Twojej aplikacji.
Wystarczy, że klikniesz na taki błąd i zostaniesz najczęściej przeniesiony
właśnie w odpowiednie miejsce, aby go naprawić.
My możemy to zamknąć, nie będziemy korzystać z tej mapki, potem usuniemy ten szablon,
ale jak widzisz jest to niesamowicie przydatna funkcja.
Następnie mamy tutaj grid & borders, czyli możliwość dodania siatki.
Jeżeli pracowałeś w jakiś aplikacjach typu Figma, Sketch
lub AdobeXD to wiesz jak działa właśnie siatka w takich aplikacjach.
Tu też możemy to sobie ustawić.
Wykorzystamy to potem, gdy będziemy właśnie tworzyć naszą stronę główną.
To już omawiałem wcześniej, czyli ta opcja arrange.
Te dwie opcje też już wcześniej omawialiśmy.
Mamy dodatkowo jeszcze wyszukiwarkę, z której tak naprawdę nigdy nie korzystałem
i jeszcze nigdy mi się do niczego nie przydała, więc możemy sobie to pominąć.
Kolejno mamy tutaj
taką zakładeczkę development, czyli informację o tym, że jesteśmy obecnie w
wersji deweloperskiej naszej aplikacji, czyli po prostu budujemy ją.
Jeżeli byśmy chcieli ją tutaj wypchnąć na
produkcję, to wystarczy, że kliknę tutaj i wybiorę tą opcję.
Niestety na chwilę obecną jest to
niemożliwe, ponieważ ta opcja wypuszczenia naszej aplikacji
do wersji produkcyjnej działa tylko i wyłącznie w planie płatnym.
My nie będziemy z tego korzystać w ramach naszego kursu.
Natomiast chciałbym abyś wiedział,
że tutaj znajdziesz taką odpowiednią funkcjonalność.
Tutaj dodatkowo możemy utworzyć tzw.
save point, czyli zapisać jakiś konkretny postęp w naszej aplikacji.
Jak widzisz mamy tutaj informacje o innych wersjach.
Chwilę obecną nie mamy innych wersji.
To jest jedyna wersja naszej aplikacji, z którą będziemy pracować.
Natomiast bardzo ważną funkcjonalnością jest tutaj ten przycisk preview.
Jeżeli go kliknę
to przejdę do podglądu na jej aplikacji, czyli zobaczę dokładnie to co będzie
widział użytkownik jeżeli wejdzie na stronę naszej apki.
I widzisz, dokładnie to zobaczy
użytkownik, kiedy przejdzie na stronę główną naszej aplikacji.
W tym przypadku wszystko działa dynamicznie.
Jeżeli najadę jakiś przycisk np.
wybiorę tutaj sign up login.
To widzisz, pod spodem uruchomiły mi się odpowiednie akcje, które
wyświetliła właśnie taki popup i użytkownik będzie mógł się teraz np.
zarejestrować w naszej aplikacji.
Dodatkowo tutaj na dole mamy jeszcze taki
debugger, który pozwoli nam dobugować naszą aplikację.
O tym też porozmawiamy dokładniej nieco później.
Tak więc możemy wrócić do samego edytora i
omówić ostatni element jaki nam został, czyli tą ikonkę awatara.
Za jej pomocą będziemy mogli przenieść się do mojej aplikacji, czyli wrócić z
powrotem do dashboard'u do zakładki my plugins, my templates.
Tutaj będziesz mógł podejrzeć swoje konto,
wykupione plany i zarządzać nimi, a tu oczywiście wylogować się z edytora.
To by było na tyle tej lekcji.
Dziękuję Ci za uwagę.
A w lekcji następnej przystąpimy już do konkretnej pracy.