MVP aplikacji w rekordowym czasie z Bubble: Wyświetlamy listę planów
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?
Rozpoczynamy naszą pracę od miejsca, w którym zakończyliśmy ją
w lekcji poprzedniej.
I skoro mamy już gotową stronę, na której będziemy wyświetlać dostępne
plany, to czas je tutaj dodać.
A więc wracamy na stronę z tripa.
Przechodzimy tutaj znowu do Produkt Catalog i tym razem wybieramy
zakładkę Pricing Tables.
Czyli jest to takie rozwiązanie stricte na kod, które zapewnia nam stripes, abyśmy
mogli wygenerować taką listę z produktami i potem wyświetlić ją na stronie.
Kolejno otwieramy sobie ten link z dokumentacją, czyli tutaj View dx,
aby doczytać wszystkie szczegóły.
Ja już go wcześniej otworzyłem, więc mogę przejść.
Link do tej strony widzisz na dole, więc też możesz sobie ją otworzyć
i mamy tutaj dokładną informację co i jak należy poustawiać, aby właśnie
zaimplementować taki price table do naszej aplikacji.
Oczywiście standardowo Cię zachęcam do tego, abyś zapoznał się
z całą tą dokumentacją.
Ja już to zrobiłem wcześniej, dlatego też teraz postaram się pokazać Ci w jaki
sposób należy to wszystko poustawiać, aby to po prostu zadziałało.
Natomiast tutaj pierwsze pytanie przede wszystkim dlaczego w ogóle
korzystamy z tego w ten sposób?
Otóż tak jak mówiłem, moglibyśmy sami dodać na naszej stronie Repeat Link group
z planami i zadbać o to, by kierować użytkownika po kliknięciu
do właściwego planu.
No ale po co utrudniać sobie życie, skoro strip zapewnia nam taką
fajną funkcjonalność.
Tak więc możemy to po prostu zrobić dużo prostszy sposób i przekazać
w tym temacie pałeczkę strip.
Natomiast pamiętaj, że takie rozwiązanie oczywiście nie jest pozbawione wad,
ponieważ jest to osobny kod, a nie coś co sam zbudowałeś.
Musisz pamiętać o tym, że masz tu niewielkie pole do
dodania czegoś od siebie.
Na przykład gdybyśmy budowali taką repeat grupę, sami moglibyśmy sprawdzić, jaki
aktualnie plan posiada dany użytkownik, który trafił na taką stronę i zablokować
mu możliwość ponownego wykupienia planu.
Albo oznaczyć po prostu jeden z tych planów jako aktywne.
Kosztując to bezpośrednio ze STRIP tracimy dostęp do takiej opcji.
Jeśli user, który już ma plan trafi na taką listę, to może ponownie
zakupić subskrypcję.
Ja natomiast rozwiązałem to w ten prosty sposób, że u nas user trafi na taką stronę
tylko raz w momencie zakupu planu, a potem ukryjemy mu button,
który do niej prowadzi.
Możemy też oczywiście dodać kolejne workflow, które zablokuje mu dostęp do
takiej strony, jeśli posiada aktywną subskrypcję.
Jak widzisz, każdy problem da się w jakiś sposób obejść,
A więc zgodnie z tą informacją tutaj musimy najpierw utworzyć
sobie taki pricing table.
Jeśli zjadę tutaj niżej, to mamy tutaj Create Pricing Table.
Mamy dokładną informację co i jak należy zrobić, żeby właśnie taki pricing table
ustawić, a kolejno właśnie otrzymamy taki wygenerowany kod,
który należy wstawić na naszą stronę.
Oczywiście będziemy mogli go sobie tutaj odpowiednio dostosować.
Mamy tutaj te wszystkie informacje i zaraz przez to wszystko przejdziemy.
Natomiast tak jak mówiłem polecam Ci po prostu przejść przez tą dokumentację,
poczytać jak to się wszystko robi, a potem jeszcze raz właśnie obejrzeć to
wideo, żebyś miał właśnie pełnię obrazu, jak to wszystko można tutaj poustawiać.
Natomiast ja kolejno chciałbym dodać tutaj jeszcze dwa ustawienia, które właśnie
znalazłem w tej dokumentacji, a mianowicie chciałbym po pierwsze wymusić
przekazywanie maila klienta właśnie do takiej strony z płatnością.
Tak aby klient potem nie mógł go zmienić i wtedy na zamówieniu będziemy mieli
dokładnie taki sam adres jak w naszym serwisie.
Dzięki temu unikniemy sytuacji, że ludzie podają różne maile przy rejestracji przy
zamówieniach i potem jeśli klient będzie chciał coś po prostu sprawdzić,
to Tobie będzie ciężko to namierzyć.
Bardzo często się spotykam właśnie z taką sytuacją, że ludzie potrafią nie raz
podawać jakieś dziwne zmyślone maile, no i potem stanowi to mega duży problem.
Dodatkowo jeszcze interesuje nas ta sekcja.
Mamy tutaj to niżej.
Już tutaj zjeżdżamy.
Tu mamy właśnie informację o kodzie.
Mamy informację o tym właśnie, jak należy traktować taką subskrypcję.
Tego też zaraz przejdziemy.
Natomiast nas interesuje OTA część, czyli Client Reference ID Property.
Jak doczytasz się w dokumentacji, możemy tu wstawić dowolną wartość, np.
ID klienta w naszym serwisie.
Natomiast mógłbyś sobie teraz zadać pytanie po co nam jest w
ogóle potrzebny ten parametr?
I tu właśnie w całej tej sekcji z treścią znajdziesz dużo więcej informacji.
I tu też dokładnie jest opisane w jaki sposób będziemy obsługiwać
subskrypcję w naszym serwisie.
Natomiast aby nie zanudzać Cię tutaj teraz tymi wszystkimi treściami, ja postaram się
to przedstawić takiej bardzo skrótowej wersji, tak żebyś rozumiał jak to w
ogóle działa w takim mega dużym skrócie.
Działa to w ten sposób, że generujemy sobie kod.
To o czym właśnie mówiłem.
Które wyświetli nam lista z planami, ale nadal z tyłu głowy mamy fakt, że
jest to kod z zewnątrz, a nie nasz.
Oznacza to więc tyle, że nie możemy w żaden sposób
namierzyć, kto i w jaki plan kliknął.
Ponieważ obsługiwana jest to przez samo strip, a nie przez nas.
Możemy natomiast właśnie z wykorzystaniem tego parametru Client Reference ID
przekazać w tym przypadku np.
unikalne ID usera z naszej bazy w Babel.
W ten sposób po kliknięciu w dany button służące do zakupu,
klient zostanie przekierowany na stronę płatności i tam dokona już zakupu.
I teraz w jakiś sposób nasza aplikacja musi wiedzieć, że takie
zdarzenie w ogóle miało miejsce.
Więc w tym momencie na scenę wkraczają web luki, które definiujemy w stripes.
Ogólnie samo stray udostępnia całą masę zdarzeń, na które możemy nasłuchiwać, ale
zgodnie z tą dokumentacją nas powinien interesować jeden event.
Jest to właśnie ten czyli checkout session completed.
Jeśli tutaj kliknę to tworzy mi się gdzieś tam chyba nowa zakładka.
Spróbujmy kliknąć w ten sposób.
O właśnie i widzisz, mam tutaj całą masę różnych eventów.
Mamy tutaj informacje czego one dotyczą i jeśli przejedziesz tutaj, to
ta lista jest naprawdę ogromna.
Ale tak jak mówię na początek i stresuję ten pierwszy zamknijmy to.
Czyli ten właśnie czekał.
Session completed, które oznacza po prostu, że
płatność została dokonana poprawnie.
Niezależnie od tego, czy klient dokonał zakupu subskrypcji, czy
też produktu Optima.
A więc skoro teraz już wiemy na jaki event musimy nasłuchiwać, to naszym kolejnym
zadaniem będzie dodanie w Babel odpowiedniego web hooka, na którym
script będzie nam właśnie przesyłał dane.
I wśród wielu tych informacji, a naprawdę jest bardzo dużo,
wyśle nam również właśnie to, co przekazaliśmy parametrem
Client Reference ID.
W ten sposób właśnie tak jak mówiłem, klient
klika na dany plan, przechodzi na stronę płatności, tam dokonuje transakcji.
To uruchamia odpowiedni event, czyli checkout session completed.
My w skrypcie przekażemy adres web hooka, który
zdefiniujemy w Babel i Strip w momencie kiedy taki event będzie miał miejsce.
Wyśle nam dane właśnie na nasz łeb hook.
I w ten sposób mając właśnie do Client Reference ID będziemy
w stanie namierzyć ok.
Tego zakupu dokonał klient o takim i takim ID, a więc do niego należy
przypisać odpowiednią subskrypcję.
Złe.
Pukamy i mieliśmy już doczynienia w poprzedniej lekcji, gdzie
dodaliśmy jeden, na który potem sami wysyłaliśmy dane, a teraz po prostu
będzie to robiło dla nas strip.
Naszym zadaniem oczywiście jako developera będzie dodanie do tego odpowiedniej
logiki, która nam właśnie taki event obsłuży.
I tak, wiem, że brzmi to wszystko mocno skomplikowanie, ale zaraz sam zobaczysz,
że w praktyce nie jest aż tak straszne.
A więc w pierwszej kolejności zróbmy to, co nam tutaj podpowiada właśnie
ta rekomendacja, czyli utwórzmy to Pricing table.
A więc wracam sobie tutaj.
Przechodzę na zakładkę Pricing Tables i klikam ten duży button.
Teraz musimy zdefiniować jakie produkty mamy wyświetlać.
Jak widzisz, mamy tutaj informację o możliwości wyświetlenia maksymalnie
czterech różnych planów. A więc dodajmy.
Niech to będzie basic.
Kolejno klikamy sobie tutaj, nie w to miejsce Price, tylko Add on produkt.
Teraz wybieram Standard i teraz wybieram Unlimited
i zaraz będziemy sobie to wszystko odpowiednio ustawiać.
OK, skoro dodaliśmy plany, to jak widzisz wyświetlają one się tutaj na tej liście i
tak będą się prezentować na naszej stronie.
Tło mi się zgadza, bo tak je sobie ustawiłem bezpośrednio chyba w całej
aplikacji, ale zaraz zobaczę czy mamy właśnie takie na stronie.
Pressingu chyba nie, chyba było to jaśniejsze, więc zaraz możemy to zmienić.
OK, Primary 25.
No dobra, to sobie je tutaj mieszamy w stylach Primary 25.
Ona jest tutaj.
A więc mogę wstawić tą wartość tutaj.
Teraz wygląda to już dużo lepiej.
Mamy ikonki.
Mamy tutaj nazwę tego planu.
Oczywiście description cenę.
Jak widzisz tutaj pojawia się ta lista, o której Ci mówiłem, czyli
te mamy do 10 listingu. Do 30.
i tutaj unlimited i ok.
Teraz klikamy Continue.
Mogli nawet zmienić font jaki my tu mamy jak będzie np.
Inter On jest całkiem fajne i naprawdę ciekawie wygląda.
Button jest zaokrąglone.
OK, to możemy jeszcze wybrać, który produkt chcemy wyróżnić u nas.
Niech to będzie ten plan Standard.
O właśnie, widzisz, jest takie fajne wyróżnienie.
Zaraz o tym na pewno też się już spotkałeś na innych stronach.
A więc możemy teraz wybrać po prostu Continue.
No i teraz musimy zdefiniować ustawienia dla każdego z tych planów.
I co my tutaj mamy?
Czy chcemy dodawać kody promocyjne?
Nie, chwilowo nie chcemy.
Czy chcemy dać możliwość wprowadzania numeru NIP?
Oczywiście tak.
Nie, nie mamy tutaj żadnej ilości.
To będzie pojedynczy plan.
Nie potrzebujemy adresu, nie potrzebujemy numeru telefonu.
Mógłbyś tutaj dodać jeszcze customowe pola, gdybyś potrzebował.
No i tu jeszcze informacja jest na jaką stronę ma trafić użytkownik.
Na przykład właśnie tutaj Information page.
Jak ona ma wyglądać?
Na razie zostawmy to w ten sposób.
Oczywiście potem to sobie możemy ewentualnie dostosować tak, żeby
przekierować użytkownika np.
na jakąś stronę w naszym serwisie.
Ale na razie idźmy na łatwiznę.
Zostawmy to właśnie w takiej wersji, czyli zaznaczam tylko tags.
Klikam continue.
Wygląda na to, że jest wszystko ok.
Tutaj mamy preview strony Customer Portal, którą już sobie wcześniej zdefiniowaliśmy.
Zerknijmy co tu jeszcze jest.
Mamy jakąś opcję update plan OK, Tak to będzie wyglądało.
Moim zdaniem całkiem fajnie.
Jest to naprawdę przejrzyste i zrozumiałe dla odbiorcy.
A więc klikamy Finish.
No i teraz zadziała się magia.
Taki kod został dla nas tutaj odpowiednio wygenerowany, a więc jedyne co nam zostaje
to wkleić go na stronę tutaj w naszym edytorze.
Przechodzimy tu.
Wybieramy kod HTML, Wstawiamy go oczywiście tutaj, w środku bójmy.
Ja tu chcę dać maksymalnie.
Niech to będzie 768 pikseli.
Zobaczymy czy musimy ustawiać jakąś minimalną wysokość.
Zerknijmy w ten kod i jak to będzie?
Script html.
Tutaj dodajmy jeszcze odpowiednie padding.
OK, niech to będzie 48 również od dołu.
No i zerknijmy czy nam to w ogóle zadziała.
OK, działa, ale ustawiło to się w jakimś dziwnym trybie takim.
Chyba za wąsko tutaj mamy.
To może zróbmy tak pozbądźmy się tego i dajmy tutaj.
Niech to będzie np.
600 pikseli.
I teraz zobaczymy, jak to się będzie wszystko prezentowało.
I ok.
I wydaje mi się, że teraz jest naprawdę fajnie.
Jak widzisz, mamy tutaj te wszystkie plany.
Możliwość tutaj zapisania się, mamy odpowiednią informację,
mamy odpowiednie wyróżnienie.
Jak widzisz wszystko wygenerowane dla nas.
Nawet fajny efekt na tym popular wszystko zrobił dla nas odpowiednio skrypt.
Natomiast tak jak mówiłem musimy zadbać jeszcze o przekazanie tutaj tych
dwóch bardzo ważnych parametrów.
A więc zamykamy sobie podgląd, wracamy tutaj.
Przechodzimy do HTML Editor i zaraz będziemy tutaj wstawiać
odpowiednie wartości. A jakie?
Oczywiście takie, które nabierzemy mierzymy w dokumentacji.
Czyli wracamy do DX ów i najpierw musimy przekazać Client Reference ID.
W jaki sposób ma to się pojawić tutaj przed zamknięciem
tego Script Pricing table i po publish tabelki?
OK, skopiuję sobie to.
I spróbujmy dodać.
Czyli w to miejsce moim zdaniem.
OK, wygląda na to, że chyba jest w porządku.
Teraz kolejny parametr.
Czyli mamy tutaj opcję Pass the customer email.
Rozwijamy i sprawdzamy jaki parametr musimy dodać, a po prostu Customer
email w ten sposób kopiujemy. Wracamy.
Wstawiamy w to miejsce.
OK, to możemy tutaj zamknąć.
Klikamy Save.
Na razie zostawiamy to sobie z tymi nawiasami tylko po to, żeby
właśnie pojawiło się to tutaj.
I teraz możemy przekazać właśnie wartości dynamiczne, czyli zaznaczam sobie
tutaj te client reference ID i tak jak mówiłem, będę tutaj chciał
ustawić current user i Unique ID czyli ID naszego usera,
a to jak się domyślasz analogicznie.
Parent user email.
OK, wygląda na to, że to wszystko co musieliśmy tutaj zrobić, przynajmniej w
tej części, żeby wyświetlać taki pricing tabel.
Przejdźmy w ogóle do podglądu naszej aplikacji.
Zaloguj się jako host.
OK, mamy tutaj na razie te dwa buttony.
O to jeszcze zadbamy.
Klikam Activity Your Plan.
OK, wyświetla mi się lista z dostępnymi planami.
Wybierzmy ten np.
Most Popular i trafiamy na stronę z tripa.
OK, i wygląda na to, że możemy sobie tutaj właśnie już dokonać płatności.
Nadal jesteśmy w trybie test mode, więc tak jak mówiłem nie będziemy
tutaj tracić żadnych pieniążków.
Wszystko działa, przynajmniej na razie, tak jak powinno.
A więc udało nam się osiągnąć cel, jaki zaplanowałem dla nas w tej lekcji.
Oczywiście będziemy musieli jeszcze tutaj dodać odpowiednie web luki oraz nowy data
type naszej aplikacji, żeby sobie to wszystko odpowiednio obsłużyć.
Więc zakończmy wideo w tym miejscu i zajmijmy się tymi tematami
i już w kolejnej lekcji.