MVP aplikacji w rekordowym czasie z Bubble: Wdrażamy easycart do aplikacji
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?
W tej lekcji kontynuujemy temat płatności w naszym serwisie, ale tym razem chciałbym
Ci zaproponować nieco inne podejście.
Do tej pory wykorzystywaliśmy bezpośrednio stripe czy to do obsługi subskrypcji, czy
też płatności, od której pobieraliśmy własny procent.
No i jak już pewnie sam zdążyłeś zauważyć, niezależnie od sposobu, który
postanowiliśmy wybrać, czekało nas sporo pracy i czytania dokumentacji.
Dlatego też w tej lekcji po części nadal będziemy wykorzystywać stripe, ale
ułatwimy sobie nieco życie i dodatkowo oprzemy swoje działania na narzędziu
zwanym Easy Card, który stanowi niejako nakładkę na stripe, zapewniającą
znacznie więcej różnych funkcjonalności.
A ponieważ pod spodem nadal mamy stripe, to wszystkie produkty klientów i sprzedaże
zawsze znajdziemy w Twoim dashboardzie, dokładnie tak, jak miało to miejsce
na przestrzeni ostatnich lekcji.
Natomiast jeśli chcesz się dowiedzieć więcej o EasyCart, to oczywiście odsyłam
Cię pod adres, który widzisz teraz na ekranie swojego monitora.
Znajdziesz tu zarówno dokładne wyjaśnienie, jak i całą masę dodatkowych
informacji, jak dostosować koszyk tworzony przez Easy kart do swoich potrzeb.
Ja natomiast nie będę jak zwykle skupiał się na tym, by powtarzać te informacje,
które uzyskasz od Grzegorza na świetnie przygotowanych materiałach wideo.
Ale przejdę od razu do praktycznych działań.
Pierwszym krokiem, który musimy podjąć to oczywiście dodanie nowego produktu
w naszym panelu sprzedawcy.
Czyli w momencie, kiedy już otworzysz swój koszyk, zarejestrujesz konto, będziesz
miał dostęp do panelu sprzedawcy, w którym ja właśnie jestem i tutaj w sekcji
Produkty będziesz mógł dodać nowy produkt.
W tym przypadku nadamy mu stałą nazwę i opis, ponieważ tych wartości nie
będziemy mogli zmieniać dynamicznie.
Skupimy się tylko na najprostszej wersji sprzedaży, czyli produkcie one time bez
możliwości zakupu dla kogoś innego, bo i taką opcję Easy Cart też posiada.
A więc mamy taki produkt.
Czyli w podstawowych ustawieniach dodałem sobie tutaj nazwę, dodałem opis, wgrałem
tutaj na sztywno właśnie nasz obrazek z serwisu i uzyskałem taki produkt.
Wracam sobie tutaj, przechodzę właśnie tutaj do wariantów ceny
i pozostawiam tą domyślną, która tutaj była.
Tu wykorzystamy bowiem kolejną funkcjonalność, jaką daje nam EasyCart,
czyli możliwość generowania dynamicznej ceny.
A więc pozostawiamy sobie tą domyślną, bo i tak będziemy ją podmieniać i ewentualnie
możemy dostosować jeszcze nazwę produktu w linku.
Ja wpisałem tutaj po prostu dynamic price, czyli ta część jest stała, a
tu możesz sobie to dostosować.
U mnie to będzie po prostu dynamic price.
Mógłby to być np.
Stayness, Booking czy cokolwiek innego.
A więc mamy taki zdefiniowany podstawowy produkt, czyli mamy tytuł, opis, mamy
cenę, mamy jakiś obrazek, mamy link, który będzie do niego prowadził.
A więc teraz czas na przygotowanie web hooka, który będzie
odbierał dane po zakupie.
Czyli niemal analogiczna sytuacja, jaką mieliśmy w poprzednich lekcjach.
W tym przypadku chciałbym podejść do tego zadania nieco inaczej.
Z tego prostego powodu, że w przypadku EasyCart dane są wysyłane tylko
na jeden zdefiniowany web hook.
Tu niestety nie mamy możliwości ustawienia osobnego web hooka dla każdego eventu, jak
to robiliśmy przed tym strip, więc musimy sobie poradzić w inny sposób.
No i oczywiście moglibyśmy dodać Web Hook bezpośrednio w samym Bubble, ale jak
pamiętasz, tam musimy najpierw odpalić inicjalizację takiego web hooka i dopiero
na tej podstawie Babel definiuje sobie, jakie dane dokładnie będzie odbierał,
czyli tworzy tak zwany snapshot.
I taka sytuacja niesie ze sobą kolejny problem, ponieważ EasyCart wysyła całą
masę różnych wierzchołków w zależności od danego eventu.
I pomimo tego, że te dane są do siebie bardzo zbliżone, to może się okazać, że w
którymś szczególnym przypadku to, co otrzymasz na taki adres Bubble będzie się
nieco różnić od tego, co zapisał sobie edytor właśnie w takim snapshocie.
Z analogiczną sytuacją możesz się też spotkać w przypadku innych serwisów, gdzie
musisz podać tylko jeden adres web hooka, na który będziesz otrzymywał
szereg różnych danych.
Dlatego też w tym przypadku wykorzystamy sobie znane Ci już make i tam zdefiniujemy
web hook, na które będą trafiać wszystkie dane przesyłane przez EasyCard, aby potem
za pomocą odpowiednich filtrów i znanego Ci już routera będziemy mogli w
przyszłości odpowiednio je wszystkie obsłużyć.
A więc tworzymy nowy scenariusz, czyli wracamy tutaj i przechodzimy do make.
Ja już tutaj taki scenariusz utworzyłem.
Jak widzisz oczywiście rozpoczynamy go od web hooka.
Dodajemy tutaj nowy web hook.
Ja nazwałem go po prostu Styles Easy Card.
Jeśli mamy go tutaj gotowego, no to robimy dokładnie to, co robiliśmy wcześniej,
czyli kopiujemy sobie adres takiego webhooka i oczywiście możemy go sobie
tutaj właśnie odpalić, żeby on nam nasłuchiwał na nowe dane.
A skoro mamy adres takiego web hooka, no teraz musimy go odpowiednio
przekazać w card.
W tym celu wracamy sobie tutaj do panelu sprzedawcy.
Nadal jesteśmy w tym produkcie, który utworzyliśmy.
Przechodzimy tym razem tutaj do zakładki Integracje i wstawiamy właśnie
ten adres Web hooka w to miejsce.
To jeszcze nie koniec ustawień, ponieważ będę chciał przekierować użytkownika po
zakupie takiego produktu na naszą własną stronę.
Podziękowania.
Jak pamiętasz, w poprzedniej lekcji kierowaliśmy go na przykład na stronę
bookingu i tam przekazywaliśmy sobie dynamicznie id takiego bookingu,
żeby wyświetlić właściwy.
Tu niestety nie będziemy mieć takiej takie możliwości.
A więc w tym celu wracamy do edytora.
Ja tutaj dodałem już taką mega prostą stronę z podziękowaniem.
Nazywa się ona po prostu Thank you.
Mamy tutaj tylko jakąś ikonkę, proste teksty oraz guzik, który będzie kierował
użytkownika, a w zasadzie naszego gościa z powrotem do dashboardu
do sekcji z bookingami.
I kiedy właśnie już taką stronę mamy tutaj utworzoną, ona będzie w pełni statyczna.
Możemy sobie standardowo podejrzeć ją.
Teraz tylko kopiujemy link.
Oczywiście musimy pamiętać o tym, że na razie jest on właśnie tutaj, w takiej
wersji typowo roboczej, a potem będziemy musieli go sobie dostosować właśnie do
takiej ostatecznej wersji naszego serwisu.
Natomiast na razie tym się nie przejmujemy.
Kopiujemy to, co tutaj teraz zaznaczyłem.
Przechodzimy do EasyKarta do produktów i tym razem tutaj do ustawienia produktu.
Przepraszam, nie do ustawienia tylko tutaj.
Do Strona. Podziękowania.
I w tym miejscu wklejamy skopiowany link.
Dodatkowo ustawiamy czas przekierowania na 0, a więc ta strona się nie pojawi.
Ta domyślna wisi karcie, tylko automatycznie przekierujemy
usera na naszą własną.
I tak naprawdę to wszystko co tutaj musieliśmy zrobić.
A więc dodajemy to. Ustawiamy to na 0.
I teraz musimy sobie opublikować taki produkt, żeby zapisać wszystkie te zmiany.
A więc klikamy po prostu tutaj publikuj.
I jak widzisz produkt został odpowiednio zapisany i na razie rzeczywiście
utworzyliśmy produkt, ale oczywiście w wersji produkcyjnej.
Czyli gdybyśmy chcieli go teraz sprzedać, no to rzeczywiście
musielibyśmy za niego zapłacić.
W tym celu klikamy tutaj w tą strzałkę i wybieramy opcję Tutaj
Zduplikuj do trybu testowego.
Pojawi Ci się taka opcja, jeśli po raz pierwszy utworzyłeś taki produkt.
Ja już go wcześniej sobie utworzyłem i zduplikowałem.
A więc kiedy klikniesz w tą opcję, utworzy Ci się kopia takiego produktu.
Jeśli przejdę tutaj tak jak widzisz, to jest publiczny, a to jest dokładnie ten
sam skomplikowany produkt, tylko w trybie testowym.
I właśnie z takiego produktu będziemy sobie korzystać.
O tym, że jesteśmy w trybie testowym świadczy zarówno ten tekst, jak i link,
gdzie znajdziesz informację sandbox.
To oznacza, że po prostu pracujemy cały czas w trybie testowym i możemy sobie
kupować takie produkty, sprzedawać i nie będziemy ponosić żadnych
rzeczywistych opłat.
Te wszystkie wartości, które ustawiliśmy na głównego produktu, zostały
tutaj oczywiście powielone.
A więc, jak widzisz, mamy tutaj ten sam opis, ten sam obrazek, tą samą
cenę, oczywiście ten sam web hook.
No i jak się domyślasz, tak samo tą samą stronę podziękowania, czyli
wszystko to co mieliśmy tam.
No i teraz taki produkt jest już tutaj gotowy do tego, żebyśmy go wykorzystywali.
Jak to będzie działało?
Otóż w momencie, kiedy użytkownik w naszym serwisie kliknie po prostu utworzenie
nowego bookingu, będziemy mieć niemal takie same flow jak mieliśmy
wcześniej w przypadku konta Connect.
Czyli utworzymy taki booking.
Tam odpowiednio przypiszemy daty do listingu, a kolejno wygenerujemy sobie
właśnie link do takiego produktu tutaj z dynamiczną ceną, czyli zamiast 39.
Będziemy tutaj przekazywać właśnie cenę, jaka tam wyszła za cały ten booking.
Natomiast cała reszta, tak jak mówię, będzie stała.
Dodatkową zaletą takiego rozwiązania jest to, że ta metoda, która tworzy właśnie
link do takiej strony sprzedażowej.
Link do tego produktu odpowiednio go zabezpiecza, a więc użytkownik nie będzie
w stanie zmienić sobie po prostu tej ceny na inną i powiedzieć, że taki link dostał.
Serwis EasyCard wplata w ten link taki odpowiedni klucz, który to blokuje.
Zresztą zaraz zobaczysz jak to będzie działało.
A więc mamy produkt utworzony, testowy, który będziemy właśnie wykorzystywać.
Mamy utworzoną dodatkowo stronę Thank You, którą będziemy wykorzystywać
właśnie po zakupie.
Dodaliśmy nasz tutaj pierwszy web hook, który będzie teraz nasłuchiwał na zmiany.
A więc to, co musimy zrobić teraz, to oczywiście utworzyć metodę, która będzie
właśnie generowała link do takiego koszyka i w tym celu będziemy potrzebować
klucza API, aby go sobie wygenerować.
Przechodzisz do panelu sprzedawcy.
Tutaj deweloper.
I tutaj możesz utworzyć klucz API.
Ja już go sobie utworzyłem, skopiowałem i teraz będę mógł go właśnie
wykorzystać, żeby wywołać taką metodę.
Czyli znów analogiczna sytuacja do tego, co robiliśmy w przypadku Stripe.
A więc mając ten klucz wracamy tutaj do edytora.
Oczywiście jak się domyślasz do API Connectora i tworzymy kolejne API.
Ja je nazwałem po prostu EasyCart.
I tu dodamy tylko jedną metodę, która wygląda w ten sposób.
Przede wszystkim dodajemy tutaj ten nagłówek autoryzacyjny.
Stawiamy brr i ten klucz API, który sobie wygenerowaliśmy.
On będzie stały, więc zaznaczamy tutaj private.
Zaznaczamy oczywiście ten checkbox i tym razem mamy Tagline tu basket.
To jest moja nazwa takiego API.
Oczywiście możesz zastosować inną.
Kolejno będzie to akcja.
Tym razem DataType ustawiony na text, bo będziemy otrzymywać w
odpowiedzi tylko właśnie link.
I tutaj mamy Get oraz właśnie taki długi link.
Oczywiście możesz go sobie podejrzeć w moim edytorze.
Natomiast już Ci mówię, co tutaj robimy.
Przede wszystkim przekazujemy sobie ID takiego produktu, do którego
właśnie będziemy kierować. Skąd je wziąć?
Wracamy tutaj do produktów, czyli w panelu sprzedawcy do produktu testowego
i kopiujemy tą wartość.
To jest właśnie ID takiego produktu.
Kopiujemy i wklejamy tutaj.
Jak widzisz ja tutaj po prostu przekazuję dynamiczne dane, a te
parametry też już Ci są znane.
Też już je wykorzystywaliśmy wcześniej.
A więc tak tutaj wklejamy to ID.
Ustawiamy to na private, bo to będzie tylko jeden produkt,
którego będziemy korzystać.
Kolejne mamy tutaj amount, czyli kwotę takiego zakupu.
To będzie oczywiście odznaczony private, bo tu będziemy przekazywać
wartość dynamiczną.
Dodatkowo dodajemy tutaj jeszcze dwa własne parametry.
Robimy to zaczynając od znaku zapytania i potem jeszcze tutaj
dodając znak amper send.
Czyli pierwszy parametr jaki przekazujemy to email, który będziemy sobie przekazywać
do koszyka i potem odbierać oraz Booking Aid.
On nam się pojawi potem w takich dodatkowych parametrach,
które otrzymamy na Web Hook.
Jeśli jesteś ciekaw właśnie skąd ja w ogóle wziąłem te parametry i skąd wiem jak
je tutaj poustawiać, no to odsyłam Cię na stronę Easy Carta do zakładki Akademia i
tu znajdziesz cały szereg dodatkowych informacji, jak możesz właśnie
skonfigurować swój koszyk i przekazać tam całą masę dodatkowych danych.
A więc jak się z tym zapoznasz, to oczywiście wracamy tutaj.
No i teraz mamy wygenerowany taki link, gdzie ID produktu mamy stałe, a
dynamicznie będziemy przekazywać właśnie kwotę maila oraz jakiego
bookingu to dotyczy.
Skoro metoda już jest gotowa, no to jak się domyślasz musimy ją
teraz zastosować w workflow.
A więc przechodzimy sobie na stronę listingu.
Do zakładki Workflow.
Ja skopiowałem sobie to wcześniejsze workflow, które mieliśmy właśnie tutaj ze
Stripe Connect i standardowo po prostu je zablokowałem.
A teraz w tej drugiej wersji wprowadzamy tutaj te drobne poprawki.
Tutaj nic nie zmieniamy.
Tworzymy po prostu nowe booking.
Natomiast w kroku trzecim wykorzystujemy właśnie tą metodę, którą przed chwilą
dodaliśmy, czyli właśnie link do takiego koszyka kart.
Jak widzisz, tutaj mamy zdecydowanie mniej parametrów.
Przekazujemy tylko total Price, czyli kwotę, którą musi zapłacić nasz klient
maila, czyli Current UserEmail oraz tutaj pod Booking ID.
Po prostu ID takiego utworzonego bookingu.
Tutaj mamy standardowo API do wysłania, potem maila z review.
No i w ostatnim kroku, podobnie jak przy Connect po prostu
odnosimy się do linka, który otrzymaliśmy tutaj.
Jeśli sobie wrócimy jeszcze na chwilę do API Connector i tutaj do inicjalizacji
i kliknę, to powinieneś otrzymać właśnie tylko coś takiego.
Body. I tu właśnie będziemy mieć link.
Tak to wygląda.
Dlatego tak jak mówiłem, tutaj mamy tekst, ponieważ tylko ten link jest
tutaj dla nas wygenerowany.
Jak widzisz mamy tutaj taki parametr signature, który właśnie mówi o tym,
że właśnie nie będziemy mogli zmienić tej ceny, którą tutaj przekazaliśmy,
czyli właśnie tego amount.
Ok, skoro to mamy gotowe, skoro
wygenerowaliśmy sobie właśnie tutaj taki workflow, A Ok, dobra, zainicjowałem,
więc mi się to pewnie wysypało.
Ok.
Więc muszę jeszcze raz się do tego odnieść.
Po prostu.
Ok. Czy mi się to tutaj zapisało?
Zaraz zobaczymy.
Inicjalizacja.
Mamy link. Klikamy save.
Ok.
Wracamy sobie tutaj.
Tutaj tworzymy link do koszyka.
A tu się odnosimy do body.
O właśnie musiałem to poprawić z tego prostego
powodu, że ponownie zainicjowałem właśnie wywołanie tej metody.
A więc tak wygląda całe nasze workflow.
Jak widzisz, znów jest ono super, mega zbliżone do tego, co robiliśmy wcześniej.
A więc w ten sposób właśnie tworzymy taki booking.
Wygenerujemy link.
Przekażemy ten właśnie link tutaj i potem przekierujemy użytkownika właśnie
do miejsca, w którym dokonał zakupu.
No i teraz oczywiście musimy z powrotem odebrać te dane z bazy Carta.
A więc tak jak mówiłem, te dane będą nam wpadały tutaj na ten web hook.
My tutaj za pomocą routera i różnych ścieżek będziemy sobie to
właśnie odpowiednio obsługiwać.
Ja dodałem tutaj dodatkową ścieżkę tylko po to, żebyś wiedział właśnie, że
możesz dodać tutaj kolejny event.
Natomiast te dane wyglądają w ten sposób.
Jeśli się tutaj cofnę i przejdę sobie tutaj na przykład do
historii, gdzie mi się to już wywołało, to wygląda to w ten sposób.
Tak wyglądają dane, które otrzymujemy z web hooka.
Jak widzisz, znów jest to bardzo zbliżone do tego, co normalnie
otrzymywaliśmy od Stripa.
No i teraz naszym zadaniem jest zdecydowanie Jakie dane
będziemy sobie z tego wyciągać.
Jak widzisz, mamy tutaj event single product box, czyli taka
jednorazowa sprzedaż.
I właśnie na tej podstawie musimy sobie teraz utworzyć babel workflow,
które będzie nam to obsługiwało.
Oczywiście moglibyśmy tutaj wszystko robić w scenariuszu, czyli tworzyć sale,
update'ować booking i tak dalej, natomiast szkoda nam na to operacji.
Ja staram się wychodzić z takiego założenia, że w przypadku Babel tworzymy
scenariusze jak najprostsze, czyli web hook, na które wpadają nam dane, a potem z
takiego web hooka odpowiednią ścieżkę uruchamiamy sobie back end workflow.
Jak widzisz, tutaj mamy nawet gotową akcję na workflow, gdzie możemy wybrać jakie
workflow właśnie chcemy uruchomić, jakie parametry nam przekazać.
A więc wracamy do edytora back end workflow.
I tutaj mam nowe workflow.
Nazwałem je Easy Cart.
Ono ma być publiczne.
To sobie możemy odznaczyć, ponieważ utworzyliśmy takie zabezpieczone
połączenie w samym Make baku, gdzie przekazywaliśmy wcześniej token, a więc
on nam tutaj właśnie odpowiednio zadziała.
Zaznaczamy Ignore rules i tym razem po prostu sami
definiujemy, jakie parametry tutaj mamy przekazać.
A skąd ja je wziąłem?
No przede wszystkim na pewno będziemy potrzebować bookingu, A dodatkowo
zerknąłem tutaj w momencie, kiedy tworzymy Sail, jakie parametry są nam potrzebne.
Oczywiście ich jest zdecydowanie mniej niż w przypadku Connect, bo tutaj nie
mamy żadnego apfi i tak dalej.
Po prostu wykorzystałem te, które tutaj mieliśmy.
Sprawdziłem jakie one są.
No i teraz na tej podstawie dodałem właśnie tutaj te parametry, żeby tak jak
widzisz, przekazywać sobie tutaj przykład currency.
Tutaj na przykład strip total amount, czyli jako zapłaconą kwotę customerid
oraz strip payment content.
I znów całe to workflow jest niemal identyczne jak tworzyliśmy wcześniej.
Czyli najpierw oznaczamy booking jako complete, potem tworzymy salę i potem
taką salę przypisujemy tutaj do bookingu.
A więc skoro to workflow mamy tutaj gotowe, no to musimy je teraz właśnie
wywołać w naszym scenariuszu, czyli tutaj wybieramy Run workflow.
Przejdźmy sobie tutaj do scenariusza.
I tu podajemy jego nazwę, a tu po prostu definiujemy ręcznie parametry.
Czyli musimy przekopiować nazwę, wybrać type oraz jaką wartość chcemy przekazywać.
I znów wyciągamy sobie to wszystko z tego webhooka.
Tutaj mamy np.
Booking, który przekazaliśmy to będzie ID tego bookingu.
Mamy zapłacone kwotę.
Mamy Customer ID.
Mamy Invoice Street ID.
To będzie u nas strip payment content.
Mamy currency.
I tu oczywiście mógłbyś dodawać kolejne parametry, gdybyś je zdefiniował
właśnie w samym tym back end workflow.
U nas tego robić nie musimy.
Całe to workflow już teraz działa poprawnie.
Ja mogę je sobie jeszcze raz zapisać i zostawić tutaj w trybie uruchomionym.
No i co?
Nie pozostaje nam teraz oczywiście nic innego jak przetestować, czy
to rzeczywiście zadziała.
A więc przechodzę sobie tutaj.
Jestem na stronie listingu zalogowany właśnie jako gość.
W tym przypadku możemy korzystać już ze wszystkich listingów, ponieważ nie
korzystamy właśnie z tej opcji stripconnect i nie martwimy się o to,
który sprzedawca jest połączony właśnie, a w zasadzie który sprzedawca podał
nam dane swojego konta bankowego.
Właśnie poprzez tą opcję boardingu Stripconnect.
A więc wybrałem jakiś pierwszy lepszy listing.
Teraz mogę sobie tutaj przejść i oczywiście go sobie zablokować.
Wybierzmy jednego gościa, zostawmy to tak jak jest.
Czyli powinniśmy teraz zapłacić 564 zł, bo oczywiście zamieniamy to
na złotówki z dolarów.
Klikam book now i zerknijmy czy nam to zadziała.
Przechodzę właśnie na stronę takiego listingu.
Tu już wcześniej dokonałem zakupu na taki adres mailowy i teraz go przekazałem.
I to jest genialna rzecz, która na pewno Ci się spodoba w tej karcie.
Jeśli użytkownik chociaż raz dokonał jakiegoś zakupu, to i z karty utworzy mu
koszyk i go sobie zapamięta w serwisie.
Więc tak jak widzisz teraz te wszystkie dane, które wykorzystałem przy poprzednim
zakupie mi się tutaj automatycznie uzupełniły, a ja nie muszę
tego uzupełniać ręcznie.
Oczywiście mógłbym to edytować, kliknąć tutaj i wybrać sobie inny
sposób płatności itd.
Natomiast ja chcę właśnie wykorzystać widzę tutaj taką nazwę użytkownika.
No i standardowo właśnie tą kartę do płatności testowych, czyli 4 2 4 2.
0 1 2 6 1 2 3.
Jakiś kod tutaj musimy podać. No i klikamy.
Oczywiście płacę.
No i ten zakup zostanie przypisany do mojego konta.
Więc mógłbyś na przykład jeszcze dodatkowo w panelu w swojej aplikacji kierować
użytkownika na jego konto właśnie założone w kartę.
Ale o tym oczywiście dowiesz się tutaj więcej.
Właśnie zarówno w Akademii, jak i w tych instrukcjach przekazanych przez Grzegorza.
No i klikamy płacę i powinniśmy zostać teraz przekierowani
na naszą stronę z podziękowaniem.
Wygląda na to, że jest ok.
Jak widzisz całość przebiegła super szybko.
Mogę teraz przejść do dashboardu i sprawdzić swoje bookingi.
Przejdźmy do tych ostatnich.
No i mamy 564 dolary.
Oczywiście złotówki zapłaciliśmy.
Victoria's Legends Home.
No i taki booking został utworzony.
A dodatkowo sprawdźmy, czy nam to rzeczywiście wskoczyło.
Tutaj jako sales.
Mamy 564.
Jak widzisz, wszystkie te dane, które tutaj uzupełnialiśmy, zostały
odpowiednio przekazane.
Czyli ten scenariusz nam zadziałał.
Odebrał sobie dane właśnie z karty na ten web hook.
Odpalił tą ścieżkę, gdzie miał jednorazowy zakup i odpalił nasze workflow.
No i całość przebiegła naprawdę super szybko i oczywiście wszystko działa.
Dodatkowo tak jak mówiłem tutaj pod spodem w przypadku kart
dalej korzystamy z konta Stripe.
Mamy właśnie to swoje konto Strip.
Jak widzisz mam ten produkt.
No i mogę teraz na przykład zerknąć na Payments.
No i mam tutaj te wszystkie płatności, jakie ludzie dokonywali.
Na przykład właśnie o ten pobyt za 564zł.
To wszystko dalej zostaje właśnie tutaj, na moim koncie w Stripe.
Tak więc zawsze możesz sobie do tego wrócić i tutaj podejrzeć
te wszystkie statystyki.
Jak więc widzisz, sposobów na podejście do tematu płatności w serwisie
jest naprawdę sporo.
My oczywiście nie zagłębialiśmy się we wszystkie szczegóły, bo zwyczajnie
nie starczyłoby nam na to czasu.
Moim celem było raczej nakreślenie Ci ścieżek, z których możesz skorzystać.
Wydaje mi się, że EasyCart był rozwiązaniem najprostszym w implementacji,
ale pamiętaj, że w tym przypadku całość pieniędzy trafia na Twoje konto, a więc to
na Twoich barkach będzie teraz zadbanie o to, by rozdzielić je pomiędzy sprzedawców.
Z pewnością potrzebowałbyś do tego jakiegoś dodatkowego dashboardu w
aplikacji, by móc tym szybko i sprawnie zarządzać.
No ale to już jest temat na inny kurs.
Tak więc mam nadzieję, że zaprezentowane rozwiązania podsunęły Ci pomysł, jak
obsługiwać swój własny portal, jeśli go zbudujesz.
A z mojej strony to wszystko i widzimy się w kolejnej lekcji.