od Podstaw
6 godz. 34 min · Bubble · Full-stack i Programowanie
Krzysiek PiekarzAutomation Specialist / No-code DeveloperZapomnij 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.
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.
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.
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.
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!
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.
Nasz projekt jest już niemal skończony.
Dlatego ja w tej lekcji dodatkowej chciałbym Ci zaprezentować, że Bubble to
nie tylko zamknięte środowisko, ale niesamowita platforma, która w bardzo
prosty sposób pozwala nam na łączenie się z zewnętrznymi rozwiązaniami.
Moim celem w tej lekcji będzie.
Przejdźmy tutaj do sekcji newsletter'a.
Stworzenie odpowiedniego workflow, który pobierze nam adres mailowy, jaki wpisze
tutaj użytkownik i po tym jak kliknie nam tutaj w ten przycisk, doda do mojej bazy
utworzonej w Airtable.
Przejdźmy więc może do samego Airtable.
Jeżeli nigdy z niego nie korzystałeś.
To jest to tak naprawdę w dużym
uproszczeniu Excel na sterydach, który pozwoli Ci w bardzo przejrzysty i
bardzo wygodny sposób tworzyć nawet skomplikowane rozwiązania bazodanowe.
Ja tutaj nie będę się zagłębiał w temat.
W sieci znajdziesz mnóstwo materiałów, które tutaj wszystko wyjaśnią.
Być może również na Eduweb niedługo pojawią się odpowiednie kursy z tego zakresu.
Przystąpmy więc może do działania.
Zakładam, że nie korzystałeś wcześniej z Airtable,
więc chcesz utworzyć nowe konto.
W tym celu klikamy sign up for free.
Wybieramy, ja przynajmniej wybieram tutaj sobie sign up with Google,
wybieram swoje konto.
Tak chce zezwolić.
Możemy tą część pominąć.
To też mnie nie interesuje.
I tak wybieramy start building.
Zostaliśmy przekierowani do nowej bazy.
Opcjonalnie możemy wrócić tutaj.
Jeżeli kliknąłeś tam go to workspace to zostaniesz przekierowany tutaj w to
miejsce i teraz będziesz mógł utworzyć nową bazę.
Otwórzmy więc ją może od podstaw.
W tym celu klikam tutaj add a base.
Nadajemy jej jakąś nazwę, w moim przypadku będzie to po prostu projecto newsletter.
Wybierzmy może jakiś inny kolor.
Teraz pomijamy te wszystkie tutaj podpowiedzi przygotowane przez samo
Airtable, zamykamy to okno.
Jak widzisz tutaj Airtable uruchamia masę różnych dziwnych okien.
Musimy to wszystko pozamykać,
tak abyśmy byli w widoku po prostu samej gotowej bazy.
To też możemy sobie zamknąć.
Jeżeli jesteś ciekaw
tych informacji, to oczywiście możesz odpalać te wszystkie filmiki.
Ja chcę to pozamykać.
Jesteśmy w naszej bazie.
Klikam w to miejsce dwa razy i wpisuję nazwę newsletter.
Tak naprawdę jedyną wartością, jaką
będziemy przekazywać tutaj do tej naszej bazy danych będzie sam adres mailowy.
Mogę więc najechać tutaj na tę kolumnę,
kliknąć prawym przyciskiem myszy i wybrać tą opcję delete field.
To samo robię dla tej.
I to samo robię też i dlatej.
Teraz dwa razy klikam lewym przyciskiem
myszy w to pole, tutaj na name i chcę je nazwać email i zmienić jego typ
w tym miejscu po prostu na adres e-mail.
Klikam save.
Struktura naszej bazy danych jest już
gotowa, możemy więc przystąpić do pracy w samym edytorze.
Wracamy więc do zakładki design i w
pierwszej kolejności to, co będę chciał zrobić, to nieco zmodyfikować ten element.
Podejrzyjmy go sobie w drzewku elementów.
Jak pamiętasz mamy tutaj grupę contact icon-bg, która służy nam za tło ikonki
a ikonka umieszczona jest wewnątrz niej. Natomiast ja będę chciał utworzyć nowe
workflow i przypisać je bezpośrednio do tej ikony.
Zobacz więc co się stanie, jeżeli
zaznaczymy tutaj tą opcję i zamienimy tą ikonkę na trigger.
Wiesz doskonale jak to zrobić.
Wystarczy, że klikniemy start edit workflow.
Nie musimy na razie definiować żadnych operacji.
Przejdźmy do podglądu naszej strony.
Odświeżmy.
Jeśli teraz najadę tutaj na ikonkę, która
służy jako trigger, to pojawia mi się kursor rączki.
Natomiast jeżeli tylko wyjadę poza tą ikonę i trafię kursorem na tą grupę pod spodem,
czyli grupę tła to ten kursor rączki znika.
I teraz jeżeli użytkownik kliknąłby gdzieś tutaj to oczywiście nasze workflow
mu się nie odpali, ponieważ nie najechał kursorem, nie kliknął w sam trigger.
Możemy to rozwiązać na dwa sposoby.
W pierwszej kolejności utworzyć nowe
workflow i przypisać je właśnie tutaj do ikonki oraz identyczne workflow przypisać
potem do samej tej grupy, która nam służy jako tło.
Natomiast wtedy, jeżeli będziemy chcieli
wprowadzić jakiekolwiek zmiany do w tym workflow to będziemy je musieli wprowadzać
w dwóch różnych miejscach, tak aby one się za sobą tutaj.
Natomiast jeżeli będziemy chcieli wprowadzić potem jakieś zmiany do naszego
workflow, to będziemy musieli pamiętać o tym, aby robić to w dwóch miejscach.
Dlatego też ja tutaj zmienię ten element,
usunę tą grupę pod spodem i tylko odpowiednio dostosuję tę ikonkę,
tak aby uzyskać dokładnie ten sam efekt, a mieć tutaj tylko ten jeden element.
Wracamy do edytora do zakładki design.
Kopiuję sobie tą ikonę.
Wybieram copy, usuwam całą grupę razem z
ikoną i teraz tą skopiowaną ikonę wstawiam do grupy input-contact-wrapper.
Została ona wstawiona w odpowiednie miejsca.
Musimy tylko jeszcze zadbać
o to, aby została prawidłowo wypozycjonowana, czyli przesuwamy ją tutaj
do prawej krawędzi, odsuwamy o 6 pixeli marginesu.
Teraz dodajmy jej jeszcze odpowiednie
tło, więc background style ustawiam na flat color i będzie to nasz kolor primary.
Podejrzyjmy teraz te zmiany.
Odświeżmy.
Okazuje się, że ikonka nam teraz zniknęła, ale tak naprawdę nie zniknęła.
Jest tylko po prostu przykryta przez pole input.
Musimy ją więc przesunąć tutaj na przód.
W tym celu wracamy do edytora.
Klikam prawym przyciskiem myszy, wybieram bring to front.
I teraz już wszystko powinno być ok.
Jak widzisz ikona się
pojawiła, natomiast ten cień jest dodany tutaj praktycznie na samą tą ikonkę.
A my pamiętamy
było tam jeszcze troszkę oddechu, pomiędzy ikoną a krawędziami.
W tym celu
możemy zastosować pewną sztuczkę, a mianowicie dodać tutaj po prostu cień.
Zaokrąglenie ustawiamy na 2 pixsele.
W tym przypadku nie chcę żadnego przesunięcia ani w poziomie, ani w pionie.
Nie chcę żadnego read radius, natomiast chcę spread ustawić na 8 pixeli.
Jak widzisz zaczyna to już dużo lepiej wyglądać.
I tylko oczywiście dodać tutaj kolor primary.
Muszę przesunąć całe to okienko właściwości.
Wybrać odpowiedni kolor i teraz jeszcze zadbać tutaj o odpowiedni margines.
W moim przypadku, o ile dobrze pamiętam była to chyba 14 pixeli.
Teraz powinno to już wyglądać,
dokładnie tak, jak chciałem.
Wszystko jest w porządku.
Może 14 pixeli, jednak tutaj to troszkę za dużo.
Spróbujmy 12.
Podejrzyjmy.
Teraz już jest zdecydowanie lepiej.
Mamy tutaj ikonkę
razem z fajnym tłem, a więc możemy przystąpić do tworzenia naszego workflow.
Wracamy do edytora, pierwsze co będziemy musieli zrobić,
to utworzyć tutaj powiązanie pomiędzy naszym edytorem a naszą bazą danych w Airtable.
W tym celu przechodzimy do zakładki plugins i dodajemy nowy plugin.
Jak się domyślasz, jego nazwa to po prostu będzie Airtable.
Znów jest to plugin stworzony przez zespół Bubble'a.
Klikamy więc install.
Klikamy done, plugin został dodany, a
my musimy go teraz odpowiednio skonfigurować.
W tym celu klikam tutaj add another account.
Nadaje mu jakąś nazwę, np.
newsletter.
Kolejno musimy tutaj przekazać klucz API.
Aby go uzyskać na nowo utworzonym koncie w Airtable, przechodzimy do naszej bazy danych.
Klikamy tutaj
tę ikonkę awatara wybieramy account.
I w tym miejscu możemy sobie wygenerować klucz API.
Generuje, zaznaczam, kopiuję.
Wracam do edytora, wstawiam go w to miejsce.
Teraz tutaj połączenie już jest poprawne.
Klikamy add another table.
Odnosimy się w naszym przypadku do bazy o nazwie projecto newsletter, czyli
właśnie do tej bazy, którą tutaj utworzyliśmy.
Tabela to newsletter, została tutaj odpowiednio pobrana, ponieważ mamy tylko
jedną, my chcemy zaznaczyć tę opcję oraz tą opcję create and modified.
Musimy jeszcze kliknąć w ten przycisk.
Mamy tutaj jedno pole e-mail o wartości tekstowej.
Bubble nie ma czegoś takiego jak pole typu e-mail.
Jest to po prostu zwykły tekst.
Klikam więc save i już nasze połączenie tutaj z Airtable zostało utworzone.
Jak widzisz, jest to niesamowicie proste.
Wracamy więc do
tutaj design'u.
Zaznaczamy tą ikonkę, klikamy prawy przycisk myszy started
edit workflow. I teraz zastanówmy się jakie operacje będziemy tu chcieli wykonać.
Zanim to jednak zrobimy, to przenieśmy ją może do osobnego folderu.
Nazwijmy ją po prostu, ten folder newsletter.
W ten sposób mogę go tutaj wybrać, mam tylko
ten jeden workflow.
Czyli to co będziemy chcieli zrobić, to połączyć się z bazą danych w Airtable.
W tym celu przechodzę tutaj to plugins i mam widzisz opcję create a new record.
Tutaj to newsletter wybieram set another field,
email i tu muszę przekazać wartości z odpowiedniego pola.
W moim przypadku jest to po prostu input contact.
I w zasadzie w ten sposób będziemy mogli dodać nowy rekord.
Po kliknięciu w tą ikonę to co musimy
zrobić to jak użytkownik kliknie chcemy wyzerować wartość w tym polu.
Ponieważ teraz wpisali byśmy tu adres
e-mail, klikneli byśmy, utworzyli byśmy nowy rekord, ale ta wartość dalej pozostała.
Aby wyzerować wartości w polach input
wystarczy, że w Bubbel wykorzystamy znowu gotową operację.
Mogę zacząć tutaj wpisywać jej nazwę.
Reset relevent inputs, czyli
wyzeruj w powiązanych polach input, do których odnosimy się w tym workflow.
W ten sposób nasze workflow jest już niemal gotowe.
Natomiast ja chciałbym Ci tutaj zwrócić uwagę na jeden bardzo ważny fakt.
Jak doskonale wiesz, użytkownicy bywają mocno niecierpliwi.
Jeśli więc piszą tutaj swój adres e-mail, kliknął w tą ikonkę.
I odpali się nasze workflow, to czasami może
zająć chwilę, nim ona rzeczywiście się wykona.
Użytkownik nie będzie wiedział, że rzeczywiście kliknął i zaczął coś robić,
czy coś się dzieje pod spodem, czy też nie.
Musimy mu więc w jakiś sposób
zasygnalizować, że rzeczywiście taka operacja się tutaj wykonuje,
a dodatkowo zablokować mu możliwość ponownego kliknięcia, bo wtedy przerwali byśmy takie
działające workflow i robilibyśmy je od początku.
Tego oczywiście nie chcemy, więc
wracamy do edytora.
Przechodzimy do zakładki design
i dla całej tej ikonki dodajemy nowy custom state.
Ja tym razem nazwę go po prostu status i znowu będzie to typ tekstowy.
Tym razem nie chce żadnej domyślnej wartości.
Zamykamy, to wracamy do workflow i w pierwszej kolejności jako pierwszy
krok chcę ustawić state do takiego przycisku czyli zapisywać set.
Jak widzisz, mogę tutaj wybrać od razu gotową opcję set state of an element.
Odnosimy się oczywiście do iconify.
Tylko musimy ją sobie oczywiście jeszcze nazwać, żeby wiedzieć do jakiej ikonki
chcemy się odnieść. Po prostu newsletter
icon.
Teraz będę mógł łatwo namierzyć taki element.
Newsletter icon chce ustawić custom state status na wartość
w tym przypadku chcę tutaj wpisać sending.
Czyli zmieniam state dla takiej ikonki.
Dodaję nowy rekord tutaj do Airtable'a, następnie chcę odczekać chwilę,
aby to zrobić przechodzę do sekcji navigation.
Dodaję pauzę przed kolejną akcją.
Ustawiamy tutaj na 1000 milisekund, czyli po prostu na sekundę.
Następnie mogę sobie skopiować tą operację, wkleić ją w
to miejsce pomiędzy pauzą a resetem pól input.
Klikam paste.
Ustawiam tym razem wartość z custom state na sent.
Następnie tutaj chcę dodać kolejną pauzę.
Tak, wiem, że na razie wygląda to dosyć
skomplikowanie, ale nie przejmuj się, zaraz sobie to dokładnie omówimy.
Wybieram pauzę.
Znowu 1000 milisekund.
Kopiuję to, wklejam w to miejsce
i tym razem chcę oczywiście wyzerować nasz custom state.
I teraz omówmy, co się tutaj tak naprawdę dzieje.
Pierwszy krok ustawia nam status takiej ikonki tutaj na sending.
Następnie tworzymy nowy rekord, odczekujemy sekundę,
zmieniamy status tej ikonki na sent, odczekujemy kolejną sekundę,
zmieniamy ją, potem ten status tutaj na wartość pustą i czyścimy te pola.
Teraz skoro mamy tutaj dwa rodzaje
statusów, to możemy jak się domyślasz, wykorzystując właśnie ten custom state,
zadbać o to, aby odpowiednio zmieniać wygląd takiej ikony.
W tym celu wracamy
do zakładki design.
I teraz będę musiał zdefiniować odpowiednie warunki dla mojej ikony.
Zaznaczam więc element iconify newsletter icon, przechodzę do conditional
i definiuję pierwszy warunek w tym przypadku custom state
dodaliśmy bezpośrednio do tej ikony, a więc wybieramy this iconify status,
jeśli jego wartość będzie równa sending, to chcę tutaj zmienić 3 właściwości.
Przede wszystkim zablokować użytkownikowi
możliwość kliknięcia ponownie w taką ikonę.
W tym celu wybieram is clickable i pozostawiam ten checkbox pusty.
Kolejno zmieniam kolor tła.
Oraz jeszcze kolor boxshadow,
ponieważ wykorzystaliśmy go tutaj właśnie jako uzupełnienie naszego background'u.
W obu tych przypadkach pozostawiam tutaj
wartość primary, ale przezroczystość definiuje na 50%.
Mogę teraz tutaj zdefiniować kolejny warunek.
Znów odnoszę się this is iconify status w tym przypadku, jeżeli będzie równa sent.
To chce dalej aby to było zablokowane.
Box shadow color i border, nie border tylko oczywiście background color.
Tym razem chcę ustawić tutaj na skopiowaną wcześniej wartość.
Jest to taki kolor zielony o wartości 33C481.
I to w zasadzie byłoby wszystko, co musimy tutaj zrobić.
Zerknijmy, czy nam to teraz zadziała.
Przejdźmy więc do podglądu.
Odświeżmy stronę.
Wpiszmy tutaj jakiś przykładowy adres.
Klikam w naszą ikonę i zobacz co się tutaj będzie działo.
Już ta ikona zmieniła ten kolor najpierw na taki przezroczysty, potem na zielony.
Dodatkowo ta wartość tutaj adresu mailowego nam zniknęła.
Możemy przejść do naszej tabeli.
Odświeżyć.
I jak widzisz,
nawet bez odświeżenia ta wartość nam tutaj wskoczyła.
Te 3 rekordy były przedtem puste.
Możemy je sobie zaznaczyć i usunąć.
Oznacza to więc, że nasze workflow wykonuje się poprawnie.
Natomiast wszystkie te operacje na tej naszej stronie wykonały się bardzo szybko
i mogbyś nie zwrócić uwagi dokładnie, co tam się zadziało.
Dlatego też pokażę Ci, w jaki sposób
możemy wykorzystać tutaj debugger, o którym już wspominałem wcześniej
do tego, aby sprawdzić co się w zasadzie działa i jakie operacje są wykonywane.
W tym celu zamykam to okno.
Przechodzę do edytora, klikam preview aby Bubble dodał nam tutaj parametr z debbuger'em.
Teraz mamy tutaj 3 tryby operowania normal to po prostu nic się nie dzieje.
Jeżeli klikniemy w jakiś element to po
prostu debbuger nawet nam się nie otworzy.
Te wszystkie operacje wykonają się w tle, możemy je sobie spowolnić.
Wybierając tutaj opcję slow lub wykonywać krok po kroku.
Wybierzmy tą ostatnią opcję, czyli step by step.
Przejdźmy do naszego newsletter'a.
Wpiszmy nowy adres.
Nie z caps lock'iem tylko test2@test.com.
Klikam teraz tutaj w ikonę i debugger nam się otworzył, mamy tutaj informacja, że
klikneliśmy w tą ikonę, czyli wykonujemy tą operację, aby teraz wykonać następną
muszę tutaj kliknąć run next.
W tym przypadku to co robimy tutaj, tu
zmieniamy custom state dla tej ikony na wartość, masz tutaj informacja sending.
Klikamy run next.
Jak widzisz ten custom state ma teraz zastosowanie.
Nasza ikona jest tutaj taka przezroczysta.
Teraz wykonujemy tą następną operację,
czyli tworzymy nowy rekord w naszej bazie danych w Airtable.
Klikamy run next.
Mamy informacje o tym, że teraz musimy
odczekać 1000 milisekund, czyli wykonuje się ta operacja, znów run next.
Sekunda minęła i tym razem zmieniamy status ikony na sent.
Znów klikamy run next.
Jak widzisz teraz ten status też ma tutaj zastosowanie, a custom state o wartości
sent mamy tutaj kolor zielony.
Znowu czekamy sekundę.
W tym przypadku zerujemy
custom state, czyli nie przekazujemy tutaj żadnej wartości.
Mamy informację, że tu jest empty, klikam run next.
Wykonuje się ostatnia operacja, czyli czyścimy tutaj te pola.
W naszym przypadku tylko jedno pole, to pole input, run next.
Jak widzisz przeszliśmy krok po kroku, przez całe nasze workflow i mogliśmy
dokładnie sprawdzić jakie operacje tam się wykonują.
Z dubbuger'a będziemy jeszcze dosyć mocno korzystać w kolejnym kursie,
kursie praktycznym. Natomiast ja chciałem Ci tylko tutaj
zademonstrować, w jaki sposób działa on w takiej podstawowej wersji.
To by było na tyle w tej lekcji.
Jak widzisz to łączenie Bubble'a z Airtable przebiega niesamowicie prosto.
Dodatkowo jeżeli mamy tutaj teraz takie
adresy mailowe pobrane od naszych użytkowników, to moglibyśmy wykorzystać
automatyzację i takie narzędzia jak np. Zapier bądź Integromat, aby potem to
odpowiednio obsłużyć i np. dodawać takie właśnie adresy mailowe na naszą listę
mailingową w GetResponse'ie, MailChimp'ie bądź Mailrealy'cie lub innym serwisie.
Jeśli natomiast nie masz zielonego pojęcia, o czym ja w zasadzie teraz mówię.
Czym są automatyzacja? Czym są takie narzędzia właśnie jak Zapier? Jak Integromat?
To odsyłam Cię na stronę zautomatyzowani.pl.
Tu możesz przejść do zakładki program
i zapisać się na szkolenie organizowane przez Grzegorza i Adama, którzy wyjaśnią
Ci dokładnie czym są te wszystkie pojęcia, które ja tutaj wymieniłem,
jak widzisz, dowiesz się tutaj bardzo wielu rzeczy o tym, jak
uprościć sobie życie wykorzystując automatyzację, jak sprawić, by roboty
wykonywały za nas większość nudnych i takich powtarzalnych zadań.
To by było na tyle w takim razie teraz już rzeczywiście kończymy tą lekcję.
Dziękuję Ci za uwagę i widzimy się już za moment.