MVP aplikacji w rekordowym czasie z Bubble: Poprawiamy nasz onboarding
Logika
17 godz. 49 min · Biznes i Automatyzacje
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzego się nauczysz
- Pracy z edytorem Bubble na bardziej zaawansowanym poziomie
- Tego jak wyszukiwać, filtrować i edytować rekordy z bazy danych wbudowanej w Bubble
- Czym są privacy rules - czyli jak zabezpieczyć dostęp do naszych danych przed nieuprawnionym dostępem
- Praktycznej pracy z frontend i backend workflows
- Dodatkowo wdrożymy do naszej aplikacji system płatności Stripe oraz powiadomienia mailowe z wykorzystaniem np. SendGrid i innych
- Pokażę Ci jak łączyć się z zewnętrznymi API poprzez dostępny w Bubble plugin API Connector
- A także jak rozszerzyć funkcjonalność naszej aplikacji poprzez proste automatyzacje z serwisem Make
- Na koniec zajmiemy się również podpięciem naszej customowej domeny oraz publikacją aplikacji
Czy w Twojej głowie pojawił się pomysł na aplikację, która zrewolucjonizuje świat na miarę Facebook'a, Instagrama albo Airbnb? A może zgłosił się do Ciebie klient, który chce przetestować i wdrożyć swój projekt w jak najszybszym czasie?Jeśli tak było to na pewno zadajesz sobie teraz kolejne pytanie - od czego zacząć? Czy muszę posiadać odpowiednią wiedzę programistyczną? Na jaki język programowania się zdecydować lub z jakiego gotowego framework'u skorzystać? A może zatrudnić profesjonalnego designera i software house, który pozwoli mi zrealizować ten projekt?Niezależnie od tego czy czy zdecydujesz się działać sam/a, czy też przekażesz projekt do zewnętrznej agencji i tak staniesz przed kolejnym dylematem jakim jest nauka programowania lub konieczność przepalenia nawet setek tysięcy złoty na coś, co może okazać się niewypałem.Na szczęście szybki rozwój narzędzi no-code sprawia, że możesz wybrać jeszcze trzecie wyjście. Zaprojektować, zbudować i wypuścić w świat swoją wymarzoną aplikację tylko za pomocą własnych sił i to bez konieczności posiadania specjalistycznej wiedzy programistycznej, a nawet posiadając jedynie podstawową znajomość narzędzi do design'u.Pamiętaj również o tym, że projekt ten podzieliłem na dwie części. Ten kurs to druga część, w której zapoznamy się z bardziej zaawansowanymi opcjami, jakie zapewnia nam edytor Bubble. Zdobytą w ten sposób wiedzę teoretyczną wykorzystamy od razu w praktyce dodając do naszego statycznego designu odpowiednią logikę, dzięki czemu nasz finalny projekt będzie już w pełni działającą aplikacją.Jeśli tylko potrafisz w podstawowym zakresie pracować z edytorem Bubble, budować w nim design aplikacji i rozumiesz czym są option sets oraz workflows to posiadanie wiedzy z poprzedniego kursu nie jest koniecznie wymagane. Natomiast szczerze zachęcam Cię przynajmniej do przejrzenia materiałów z pierwszej części, gdzie skupiamy się właśnie na podstawach, ponieważ teraz będziemy efektywnie przechodzić do bardziej zaawansowanych tematów i rozbudowywać naszą aplikację.
Czego nauczysz się w ramach tego Kursu?
W tym kursie „MVP aplikacji w rekordowym czasie z Bubble (Logika)” nauczę Cię jak zamienić statyczny layout na pełnoprawną aplikację. Poruszymy takie tematy jak praca z bazą danych, privacy rules oraz bardziej zaawansowane workflows, które dodamy zarówno na froncie jak i backendzie naszej aplikacji. Dzięki zdobytej wiedzy dodamy logikę wszędzie tam, gdzie tego wymaga nasz projekt, a dodatkowo wzbogacimy go o możliwość płatności poprzez najbardziej popularny na świecie system jakim jest Stripe. To jednak nie koniec ponieważ przygotowałem dla Ciebie również szereg innych ważnych zagadnień, które omówimy i wykorzystamy w praktyce.W ramach nauki skupimy się na jak najbardziej praktycznym podejściu. Zapomnij o długich i nudnych lekcjach pełnych teorii, które zapomnisz zaraz po obejrzeniu. Będziemy budować a nie debatować! W ten sposób nauczysz się pracować z edytorem Bubble na poziomie zaawansowanym. Zrozumiesz jak zabezpieczyć swoje dane przed nieuprawnionym dostępem, w jaki sposób pobierać i dynamicznie filtrować rekordy z bazy danych. A także jak wykorzystać auto-binding by móc je aktualizować bez wykorzystania skomplikowanych workflows.Dodamy do naszej aplikacji prosty komunikator, który pozwoli na wymianę wiadomości pomiędzy użytkownikami. Zadbamy również o możliwość wysyłania powiadomień mailowych poprzez zewnętrzne serwisy by ich wygląd był zgodny z naszym brandem. Nie zabraknie również takich tematów jak SSO z Google czy też proste automatyzacje z wykorzystaniem serwisu Make.
Dla kogo jest ten kurs?
Materiał szkoleniowy został zaprojektowany tak, aby mogło z niego skorzystać jak najszersze grono odbiorców. Nieważne czy jesteś totalnym laikiem, czy też posiadasz już wiedzę z zakresu programowania lub designu, na pewno znajdziesz tu coś dla siebie. A więc kto jeszcze może skorzystać z wiedzy zawartej w tym kursie?
Zgodnie z obietnicą w tej lekcji skupimy się na tym, aby dopracować nasz system
tradingu i wzbogacić go o weryfikację adresu email.
Dodatkowo w tym miejscu chciałbym wspomnieć o tym, że na potrzebę kursu
wystarczy nam w zupełności darmowy split.
I dzięki temu nie musimy ponosić dodatkowych kosztów.
Oczywiście jeśli będziesz chciał z niego skorzystać już w finalnej wersji aplikacji
masz do dyspozycji całkiem sporo opcji z planów płatnych.
Więc teraz możemy przystąpić do właściwej pracy i w pierwszej kolejności musimy
dodać do naszego Data Type User dwa kolejne pola, które pomogą nam przy
obsłudze weryfikacji adresu email.
Czyli przejdźmy tutaj do Data type do user.
Ja już dodałem oba te pola.
Pierwsze pole nosi nazwę email RFID i ma tutaj wartość boolean, czyli jest to A.
Dodatkowo wartość default ustawiłem na NO.
Kolejne pole, które musimy tutaj dodać to pole o nazwie pin code, czyli kod PIN.
W tym przypadku będzie to po prostu zwykły tekst i tutaj nie przekazujemy
żadnej default owej wartości.
Dodatkowo jeżeli zerkniemy na Privacy Firewall to jak widzisz tutaj nasz klient
user czyli właściciel takiego rekordu ma podgląd do wszystkich tych pól.
W przypadku tego kodu mogłoby być to teoretycznie
problematyczne, natomiast tak naprawdę nigdzie go nie będziemy wyświetlać, a więc
użytkownik nie będzie w stanie pobrać informacji o swoim rekordzie,
zanim nie przejdzie przez ten cały proces on boarding.
A więc skoro mamy dodane już te dwa pola, to teraz przystąpimy
do dalszego działania.
Czyli najpierw dodaj proszę właśnie email RFID oraz pin code i kiedy to
zrobisz to przechodzimy na stronę Sign up, czyli na stronę rejestracji
i musimy nieco przebudować nasze workflow.
Tutaj tak naprawdę po kliknięciu w ten button dajemy mu kolory zielony,
zielony, a wcisnąłem czerwony.
Oczywiście kolor zielony i w pierwszej kolejności tak
rejestrujemy naszego użytkownika i tutaj od razu przepisujemy mu kod PIN.
Jak to zrobić?
Wystarczy, że w tym miejscu dodamy wartość dynamiczną.
Wybiorę Formula, czyli Kalkulator Formula.
I teraz mogę tutaj wygenerować jakiś randomowy string.
W naszym przypadku chcę, żeby to były tylko liczby i długość takiego stringu
niech będzie równa 8 czyli 8 cyferek.
Teraz taki właśnie string zostanie dla nas wygenerowany i przypisany do konta Current
User, czyli użytkownika, który się właśnie przed chwilą zarejestrował,
a my w kolejnym mailu możemy wykorzystać gotową tę klatkę.
W moim przypadku jest to właśnie ta klatka tutaj.
PIN tak jak Ci pokazywałem jest ona super prosta.
Mamy tylko heloł tutaj jakieś logo i oczywiście PIN, które
w to miejsce będziemy przekazywać.
A więc wracam do edytora, przekazuję odpowiednie ID templatki
przekazuję tutaj Subject. Czego podam tutaj.
To nie ma najmniejszego znaczenia, pod warunkiem, żeby był
zgodny z tym co mamy w GRID.
Te wartości pozostawiamy oczywiście bez zmian.
Tutaj musisz oczywiście przekazać swój własny adres, z którego
będziesz wysyłał maile, nie mój.
I dodatkowo tutaj jako odbiorca przekazujemy parent user email, czyli w
tym momencie zarejestrowaliśmy użytkownika.
Mamy tutaj już dostęp do karencji usera.
Możemy wykorzystać email w ten sam sposób.
Tutaj tą zmienną PIN przekazujemy właśnie ten kod i następnie
przekierowuje użytkownika na znaną Ci już u nas stronę on buildingu.
Natomiast na samej stronie wprowadziłem kilka bardzo drobnych poprawek.
Przejdźmy tutaj do zakładki Design.
W pierwszej kolejności pokazujemy grupę Step 1,
czyli ona ma być widoczna po załadowaniu się strony, oczywiście zaznaczoną opcją
collapse on hidden, a ukrywamy ją wtedy, kiedy to pole email WiFi jest równe.
Jest. Wtedy ten pierwszy krok znika.
Jak się domyślasz, wtedy pokazujemy tą drugą grupę, która
domyślnie będzie ukryta.
Drugą część mamy już dopracowaną, a więc teraz musimy właśnie tutaj odpowiednio
jeszcze dopracować ten krok pierwszy.
To co jeszcze tutaj zrobiłem to dla pola input, czyli tego.
Dodałem tutaj jeszcze odpowiedni Condition all, ale w pierwszej kolejności zmieniłem
Content format na text person, czyli użytkownik może wpisać tutaj tylko cyfrę,
a dodatkowo będzie to całkiem fajnie sformatowane.
Kolejna bardzo ważna rzecz to dlatego tutaj całej tej strony
w zasadzie on boarding.
Dodałem nowy custom state o nazwie In error.
Znów jest Ta wartość jest domyślnie ustawiona na nowo i teraz dla pola input.
Na tej podstawie zmieniam sobie tutaj border color na ten czerwony.
Jeśli pin error jest równy jest.
A dodatkowo jak widzisz ubrałem to pole w dodatkową grupę.
I jeszcze tutaj dorzuciłem taki tekst, który domyślnie jest niewidoczny, a
będziemy go pokazywać właśnie wtedy, kiedy ten pin error, czyli nasz custom
stat jest równy Yes, a prezentuje się on w ten sposób, czyli pin
in correct i stay again.
Czyli jeśli użytkownik wpisze tutaj zły kod PIN to wyświetlimy ten komunikat oraz
oznaczymy to pole input na czerwono.
Dam Ci teraz chwilę abyś odwzorować te moje działania.
Nie ma ich tutaj dużo, więc nie powinno Ci to zająć zbyt wiele czasu.
OK, mam nadzieję, że to już jest ustawione.
Teraz możemy przejść do zakładki Workflow I tu w pierwszej kolejności dodałem sobie
workflow, które nasłuchuje mi na zmianę w przypadku pola input
i tylko wtedy kiedy ten pin error jest równy, jest ta wartość pola
polu input się zmieniła.
Chcę po prostu wyzerować custom state, czyli w naszym przypadku po
prostu ustawić go na wartość nową.
Czyli jeśli użytkownik zacznie nam wpisywać jakiś inny numer PIN, to
chce żeby ten komunikat mu zniknął.
Dodatkowo mamy tutaj jeszcze kliknięcie na ten button very fit, czyli
ten pierwszy tutaj z tego kroku numer 1.
Ja tu zmieniłem mu nazwę na Very Fight Step 1 BTN i teraz po jego
kliknięciu co my tutaj robimy?
Przejdźmy do workflow.
U mnie jest to folder web fify i mamy tutaj dwie akcje.
Jeśli użytkownik kliknie w ten przycisk a ten kod pin skręt user nie jest równy
wartości, którą wpisał w polu input.
No to oczywiście zmieniamy tutaj Custom State PIN error na Yes.
W ten sposób użytkownik nie przejdzie dalej, a my mu dodatkowo odpowiednio
wyświetlimy właściwy komunikat o tym, że coś jest nie tak.
Natomiast w momencie kiedy kliknie I ten kod się zgadza, to jedyne co
tak naprawdę musimy zrobić to make changes to end user i zmienić tą wartość.
Image query fit na jest.
Jak widzisz cały ten system jest super prosty i bardzo łatwy do wdrożenia.
Wystarczy tylko wysłać maila z wygenerowanym kodem, a potem na
stronie briefingu go sobie porównać.
A więc skoro wiemy już jak to działa, jak mają działać nasze workflow, co się ma
dziać po kliknięciu w te przyciski zarówno tutaj dla starego statusu error, jak i
dla tego gdzie ten kod PIN się zgadza.
No to teraz przetestujemy, czy to w ogóle ma sens.
I rzeczywiście nam zadziałało w naszej aplikacji.
Oczywiście przechodzimy do samej apki.
Klikamy Sign up i rejestrujemy się jako nowy użytkownik.
Ja wykorzystam tutaj już mój adres email odpowiednio wzbogacony, czyli Office + np.
William Małpa z tej Nest.
Info podaje jakiś proste hasło, klikamy sign up i teraz rejestrujemy
użytkownika oraz wysyłamy e-mail.
To nam chwilkę zajęło.
Zostaje przekierowani na stronę on buildingu.
Krok pierwszy to się oczywiście zgadza.
Teraz oczywiście taki kod PIN powinien zostać wysłany na naszą skrzynkę mailową.
Natomiast zanim to sprawdzimy spróbuj wpisać tutaj jakąkolwiek wartość np.
1.2. Klikam weryfikuj.
Jak widzisz otrzymuję informację, że ten kod jest niepoprawny.
Jeśli tutaj coś zmienia, ja kliknę.
No to widzisz, ten komunikat o błędzie mi znika, ale ponowne kliknięcie w
button znów go będzie tutaj wyzwalała.
A więc może jednak Cofnijmy to i przejdźmy do naszej skrzynki mailowej
i sprawdźmy, czy kod dotarł.
OK. Widzę, że mail już jest.
Mamy tutaj odpowiedni kod przekazany.
Teraz możemy wrócić na stronę buildingu, wpisać go tutaj, kliknąć finał
i wszystko jest ok.
Maile został zweryfikowany, a my zostaliśmy przeniesieni na drugi krok.
Oczywiście moglibyśmy tutaj dodać jakąś informację, że Twój kod został
zweryfikowany i teraz uzupełnij tutaj więcej informacji o sobie, natomiast
takie szczegóły pozostawiam już Tobie.
Ja chciałem Ci tylko pokazać jak działa właśnie cała ta logika.
Natomiast skoro już tutaj wysyłamy tego maila z kodem PIN, to zadbajmy również o
to, aby ten mail z powitaniem wychodził we właściwym momencie.
Czyli wracamy do edytora.
Przechodzimy tutaj.
Tu mamy ten krok numer dwa, gdzie właśnie tworzymy nową listę i potem
kierujemy użytkownika do Dashboard.
A więc zanim to zrobimy, możemy dodatkowo wysłać jeszcze do niego
maila z tym powitaniem.
Żeby sobie uprościć życie, przejdźmy na stronę Scratch PAD.
Ja tutaj mam po prostu już gotową akcję.
Mogę ją sobie skopiować.
Mam tutaj podpiętą już właściwą templatki i klikam paste.
Oczywiście przesuwamy tego maila tutaj we właściwe miejsce, czyli ostatni krok
templatki pozostaje bez zmian.
Subject Nie musimy uzupełniać.
Oczywiście tutaj będzie to end user email.
Do niego chcemy wysłać takie powitanie.
I tutaj pozbywamy się tej wartości na sztywno i
odnosimy się oczywiście jak się domyślasz do Current User First name.
Wtedy mamy taki fajnie spersonalizowany email z imieniem użytkownika,
który możemy teraz do niego wysłać.
I teraz właśnie po rejestracji użytkownik otrzyma oczywiście taki mail z powitaniem.
Dodatkowo możemy zadbać o to, żeby ten mail nie wychodził zaraz po tym
jak ktoś kliknie, bo ktoś może tak naprawdę wypełnić ten formularz dosłownie
w minutę lub dwie, a nie chcemy go za spamować tymi mailami,
żeby najpierw dostał ten z kodem, a zaraz potem ten powitalny.
Więc oczywiście możemy tutaj sobie zadbać o to, żeby taki mail wyszedł np.
powiedzmy trzy minuty później.
On zostanie zaplanowany po stronie Grida, a użytkownik trafi do Dashboard
i kilka minut później otrzyma właśnie takiego maila z powitaniem.
A więc teoretycznie teraz nasze zadanie dobiegło końca, ale czy tak naprawdę jest?
Jak zerkniesz co się tutaj dzieje, to przede wszystkim tworzymy tutaj nową już
listę oraz wysyłamy maila po stronie użytkownika.
Czyli użytkownik musi czekać aż te operacje się wykonają aby
przeszedł do strony Dashboard.
Jak już zresztą zauważyłeś na stronie rejestracji to wysłanie
maila chwilę zajmuje.
Utworzenie wishlisty jest dosyć szybkie, ale czasami będziesz tutaj chciał dodać
jeszcze dużo więcej takich operacji, które niepotrzebnie będą
przedłużało cały ten proces.
A więc w takiej sytuacji powinniśmy sobie zadać pytanie, czy jest to coś, na co
użytkownik rzeczywiście musi czekać, czy po jego stronie?
To, że my tworzymy nową listę i wysyłamy mu maila jest na tyle ważne, żeby
ten proces trwał po prostu dłużej.
I za każdym razem, jeśli będziesz musiał zadać sobie takie pytanie albo będziesz
chciał wykonać jakieś operacje tak jak np.
właśnie utworzenie nowej wishlisty, która jest oczywiście ważne dla nas.
Natomiast może niekoniecznie dla samego użytkownika, to warto sobie zadać pytanie,
czy w tym przypadku lepiej nie wykorzystać właśnie Back and Workflow
i przenieść tę akcję na zaplecze naszej aplikacji, czyli na tzw.
back end.
Natomiast jeśli nie wiesz czym są back end workflow, to nie przejmuj się, ponieważ
jest to temat, który poruszymy już w kolejnej lekcji, na której
Cie serdecznie zapraszam.