MVP aplikacji w rekordowym czasie z Bubble: Dodajemy obsługę subskrypcji
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 zajmiemy się obsługą subskrypcji w naszym serwisie,
czyli połączeniem naszej aplikacji z tym, co się dzieje w Strip.
Tak jak już to tłumaczyłem w poprzedniej lekcji, nasz klient w momencie wyboru
odpowiedniego planu i dokonaniu płatności działa niejako poza naszą aplikacją.
Ponieważ wykorzystujemy w tym celu zewnętrzne strony hostowane przez Strip.
Dlatego też naszym zadaniem będzie spięcie obu tych platform za pomocą Web Łuków, tak
abyśmy mogli reagować na odpowiednie zdarzenia, czyli eventy w Strip.
I teraz przejdźmy do dokumentacji.
I znów na ekranie widzisz link do odpowiedniej strony właśnie w dokumentacji
z listą wszystkich dostępnych do nasłuchu eventów strip.
Ale tak jak mówiłem nas interesować będzie jeden, a w zasadzie nawet dwa eventy.
Jak widzisz jest tu ich naprawdę bardzo dużo.
Natomiast tak jak rozmawialiśmy sobie wcześniej, pierwszym będzie czekał.
checkout.
Session Complete.
O właśnie ten.
I mamy tutaj informację kiedy on się odpala.
Czyli nasłuchując na ten event będziemy w stanie wyłapać, że klient dokonał
płatności i będziemy w stanie również namierzyć jaka to jest subskrypcja.
Natomiast drugim eventem, na który musimy nasłuchiwać jest już namierza zamierzamy
Customer subskrybcji.
Delete.
Jeżeli ten event odpali się w momencie, kiedy właśnie taka subskrypcja
ulegnie zakończeniu.
Innymi słowy, kiedy klient ją zakończy.
I tu mam na myśli całkowite wygaśnięcie subskrypcji, ponieważ script pozwala nam
również nasłuchiwać na moment, gdy klient kliknie anuluj.
Jak już wcześniej wspomniałem, takie zdarzenie normalnie w serwisie oznacza
tylko tyle, że dana subskrypcja będzie aktywna do końca okresu rozliczeniowego.
My oczywiście na potrzeby kursu i developmentu zmieniliśmy to zachowanie i
teraz anulowanie danej subskrypcji będzie ją natychmiast kończyło, a ta z kolei
będzie odpalało ten event, a my wtedy otrzymamy odpowiednie dane na
wystawione przez nas web hook.
A więc skoro już wiemy, jakie eventy będziemy obsługiwać, to wróćmy do edytora
i dodajmy odpowiedni Data type do ich obsługi.
Ja już to zrobiłem.
Wracam do Data i dodałem tutaj nowy Data Type o nazwie Subskrypcja John.
I tak mamy tutaj Price, czyli cenę takiej subskrypcji.
Mamy tutaj kolejno skrypt Customer ID, czyli id takiego Customer w typie.
Dzięki temu będziemy potem mogli łatwo to namierzyć w naszym dashboard IE strip.
Analogicznie mamy strip subskrybcji on ID, mamy usera.
Dodatkowo wyciągnąłem sobie tutaj jeszcze to User ID.
To będzie po prostu zwykły tekst.
Tak jak pamiętasz z poprzedniej lekcji pod parametr Client Reference ID przekazujemy
ID użytkownika z naszej bazy danych.
Dlatego też ja chcę właśnie w tym data type taką prostą strukturę danych.
Dodatkowo dodałem sobie tutaj jeszcze odpowiedni Option set, który
odpowiada za rodzaj planu.
Jeśli przejdziemy tutaj, to mamy subskrypcją plan.
I tak jak dodawaliśmy to w skrypcie mamy Basic Standard Unlimited.
Dodatkowo dodałem tutaj nowy atrybut script price i to właśnie po nim będziemy
namierzać, który plan został zakupiony.
Tak to działa w stray, że wraca do nas po prostu zapłacona cena.
I tutaj jeśli klikne na to teraz może zdziwić Cię fakt, że tutaj w
stray price mamy 2900 zł, mimo że nasza cena to po prostu 29.
Dzieje się tak dlatego ja to tak specjalnie ustawiłem, ponieważ strajk
zawsze działa na grosza cen itd.
A więc cenę naszego abonamentu należy pomnożyć przez 100.
Stąd też właśnie tutaj taka wartość.
Klikamy Save.
Analogicznie tutaj mamy 4 900, a tam będziemy mieć 9000 900 groszy,
czyli po prostu 99 zł.
Wracamy do Data Type, a więc tutaj Data Type Description mamy umówione.
Mamy tutaj standardowe Privacy rules, czyli wszystko może widzieć admin oraz
owner, czyli po prostu ten user przypisane tutaj do tej subskrypcji.
No i oczywiście dla samego usera Dodałem tutaj pole subskrypcji,
do którego właśnie będziemy przypisywać user, a właśnie tutaj pole subscribe,
do którego będziemy przypisywać właśnie taką subskrypcję.
A skoro mamy dodane Data type odpowiedni option set po wspinaliśmy sobie to w
naszej bazie danych, to pozostaje nam jeszcze prowadzenie kilku
drobnych poprawek na stronie Dashboard u.
Ja już je dodałem i są one naprawdę bardzo kosmetyczne,
a mianowicie tak jak mówiłem ten przycisk będzie mi się ukrywał w momencie kiedy
current user subskrypcją jest not empty.
Czyli jeśli przypiszemy do użytkownika jakąś subskrypcję to znika ten button,
a z kolei pojawia się ten, który jest domyślnie ukryty.
W naszym przypadku będzie to bowiem działało w ten sposób, że po zakończeniu
subskrypcji będziemy usuwać jej rekord z bazy danych.
Moim zdaniem trzymanie ich nie ma absolutnego sensu, ponieważ w Dashboard
Strip i tak zawsze znajdziesz wszystkie potrzebne informacje o aktywnych lub
zakończonych subskrypcji, więc nie ma sensu tego komplikować i
dokładać sobie pracy po naszej stronie.
A skoro tę część mamy już za sobą, to oczywiście czas na dodanie
odpowiednich łebków.
A więc przechodzimy do back and Workflow i definiujemy sobie tutaj nowy web hook.
Nazwiemy go dokładnie tak, jak nazywa się event, na który będziemy nasłuchiwać,
czyli będzie to checkout.
Tag.
Zerknijmy jeszcze na chwilę na dokumentację.
Command.
Checkout session.
Session completed.
Mogę to sobie skopiować i.
Wstawić tutaj.
No coś mi się nie chce wstawić. Ale to nic.
Czekał.
Czekał. Session completed.
A właśnie w ten sposób i tak to będzie oczywiście publiczne API.
Tym razem będziemy musieli zaznaczyć właśnie tutaj ten checkbox, że taki API
będzie można uruchomić bez autentykacji.
Jak pamiętasz, do tej pory korzystaliśmy z tokenów np.
wtedy, kiedy sami wywołaliśmy sobie tutaj to API Google'a.
Natomiast stricte nigdzie nie znalazłem opcji, byśmy mogli taki nagłówek przekazać
i odpowiednio ustawić token dla tej autoryzacji.
Dlatego też chwilowo zaznaczamy to, ale potem jeszcze zadbamy, aby
to odpowiednio zabezpieczyć.
Ignorujemy też Privacy Rules.
I to co chciałbym tutaj jeszcze zaznaczyć to mamy tutaj taki nagłówek.
Najpierw wybieramy sobie datę Request Data.
OK, on się teraz pojawiał.
Dlaczego ja tutaj to zmieniłem?
Ponieważ dlatego, że do tej pory jeśli właśnie tutaj ustawialiśmy jakieś
parametry, to jak pamiętasz, robiliśmy to wszystko ręcznie.
Na przykład tutaj dla Google'a.
Wiedzieliśmy, że będziemy przekazywać parametr code i go sobie
po prostu dodaliśmy.
Natomiast w przypadku Strike'a otrzymamy cały szereg różnych danych.
No i nie do końca wiemy jak taki obiekt będzie wyglądał.
Dlatego też zamiast ustawiać to ręcznie możemy zaznaczyć tą opcję
i wtedy będziemy mogli automatycznie wykryć jakie dane do nas wpadają.
Zaraz zobaczysz jak to w ogóle działa w praktyce.
I tu jeszcze przy okazji jeden bardzo ważny komunikat jeśli będziesz wdrażał
strajk do swojej aplikacji, to zawsze dodawaj osobne łebki do każdego eventu.
W ten sposób zawsze będziesz wiedział dokładnie jaka akcja się odpaliła I edycja
w jednym z takich Backend Workflow w żaden sposób nie wpłynie na żadne web huki.
Tutaj na razie właśnie dodaliśmy takie pierwsze łebku, bo zaznaczyliśmy
odpowiednie opcje, a więc teraz musimy przejść na stronę script.
Jestem tutaj home.
Przechodzę pod developers, tylko najpierw muszę się
przełączyć odpowiednio w tryb testowy, teraz dopiero developers.
I tutaj przechodzimy do zakładki Web Fox.
Mamy tutaj taką prostą informację jak działają właśnie te web huki.
Natomiast nas interesuje ten przycisk Add an endpoint.
Klikamy.
No i teraz tak Czy nasłuchuje teraz na swoim koncie czy na takim koncie
połączony poprzez Connect?
U nas na razie jest to nasze konto, czyli zaznaczamy tą opcję.
Klikamy Select Events i teraz możemy wybrać wszystkie eventy
na jakie nasłuchuje.
Czy mi się to tutaj tutaj wkleiła?
Czyli czekał completed.
Tylko ten event nas interesuje, a więc go sobie tutaj wyszukujemy,
zaznaczamy, klikamy Add events.
No i teraz już będziemy nasłuchiwać właśnie na taki event.
W tym polu możesz dodać dodatkowy opis dla takiego właśnie web hooka
ustawionego po stronie Strike'a.
Ja to na razie zostawiam puste.
Natomiast teraz musimy przekazać endpoint na jaki będziemy wysyłać dane.
No i tutaj wracamy do edytora i klikamy najpierw Detect data.
Tak jak nam widzisz wygenerowało tutaj ten standardowy route URL.
Dodatkowo mamy nazwę naszego web hooka i jeszcze łamane na initial size.
Oznacza to, że właśnie teraz Babel nasłuchuje na dane, które wpadną właśnie
na taki web hook, żeby je odpowiednio zidentyfikować.
A więc kopiujemy tą wartość.
Kliknij teraz tam się to skopiowała i chwilowo wstawiamy tutaj
i klikamy Add Endpoint.
I teraz taki endpoint już działa.
Jak widzisz tutaj oczekuje na eventy, a więc możemy go sobie przetestować.
To co musimy zrobić to znów wrócić do edytora i teraz dokonać zakupu,
czyli przejść przez tą właśnie ścieżkę dla hosta.
Natomiast ja chwilowo wezmę tutaj Cancel, ponieważ chcę zdublować zakładkę.
Czyli pokazuję sobie tutaj ta opcja.
To pkt. Tutaj znów przywracam nasłuch.
Robię to tylko po to, żeby nie dokonywać zakupu bezpośrednio na koncie hosta,
ponieważ najpierw będziemy to inaczej realizować, a to i tak w strefie
utworzy już jakąś subskrypcję. subskrypcja.
Zaraz zobaczysz dlaczego tak to robię.
A więc przechodzę sobie tutaj do AppData Ukryj ten panel boczny
i uruchom tutaj to w jakimś trybie np.
Dla mnie on też jest hostem.
Powinniśmy zostać przekierowani do Dashboard u za moment właśnie
mamy 1 button Activity your plan.
Teraz mogę wybrać interesujący mnie plan, czyli np.
ten. Klikam Subscribe.
No i teraz tutaj muszę podać jakieś dane karty.
Strip udostępnia nam cały szereg takich kart testowych.
Jeśli przejdziesz sobie do dokumentacji i wpiszesz Cart Test to znajdziesz ich
naprawdę całkiem sporo, w zależności od tego co będziesz chciał
testować, czyli np poprawny zakup, jakiś błędy itd.
Dla każdego z nich Tray przygotował właśnie osobne numery kart.
Natomiast jeśli chcemy dokonać prawidłowego zakupu to wpisujemy
następujące numer 42 42.
Jeszcze raz i jeszcze raz.
Teraz musimy podać jakąś datę naprzód, czyli na przykład niech to będzie 01 1:27.
Tutaj dowolny kod CVC np. 1, 2, 3.
Niech to będzie właśnie Dewey Poland.
Klikam pay and subscribe i to powinno nam tutaj zaskoczyć.
Mamy procesowanie.
OK, wygląda na to właśnie, że wszystko jest ok, a zostaliśmy
przekierowani na taką stronę.
No to musimy jeszcze zadbać o to, żeby potem wracać tutaj do Dashboard,
ale na razie sobie to zamykamy.
Ponieważ mnie interesuje ta informacja.
A więc wróciłem tutaj do tej zakładki, gdzie miałem właśnie
uruchomione Detect Request Data.
No jak widzisz te dane do nas tutaj wpadły, Łebków się uruchomił.
A tutaj właśnie Bubble rozpoznaje wszystkie te pola, które otrzymujemy.
Jak mówiłem, jest ich tu naprawdę bardzo dużo.
Zresztą najlepiej to sobie sprawdzić tutaj poprzez show RAW Data.
I tak wygląda właśnie cały ten JSON, który stripes do nas zwraca.
Natomiast co nas tutaj będzie interesowało?
Zerknijmy po kolei na te pola.
Mamy tutaj właśnie to, co mówiłem Amount total, czyli zapłaconą kwotę 4 900.
Potem będziemy mogli sobie namierzyć poprzez Option Set właściwy plan,
czyli będziemy wykorzystywać to.
Mamy Client Reference ID, które ustawiałem i to jest tak jak pamiętasz
ID naszego usera w Babel.
Co nas tutaj jeszcze będzie interesowało?
Mamy tak Strip Customer ID, które będziemy sobie oczywiście teraz
zapisywać przy subskrypcji i mamy tutaj jeszcze gdzieś ID samej subskrypcji.
Zjedziemy niżej, a właśnie mamy subskrypcję i to jest
ID takiej subskrypcji.
A więc skoro otrzymujemy te pola, to możemy tutaj kliknąć save.
PayPal sobie rozpoznał te dane, przechowuje je dla nas pod spodem, a my
teraz możemy właśnie przystąpić do budowania takiego workflow.
U nas ono będzie naprawdę bardzo proste.
Czyli w pierwszej kolejności tworzymy nową subskrypcję.
Dodajmy sobie tutaj te wszystkie pola I teraz będzie tak plan.
Wyszukujemy właśnie tutaj wszystkich elementów z subskrypcji Plan.
Dodajemy filtry.
Nowe Nawet stratne, gdzie straight price jest równa.
I teraz musimy się odnieść tutaj do Request data, czyli do tego co
nam zwrócił właśnie taki web hook.
I tutaj musimy to namierzyć.
To było amount amount total. A właśnie.
Oczywiście first.
I w ten sposób właśnie połączymy sobie to z właściwym planem.
Możemy tutaj pod pray wstawić dokładnie to samo, czyli Request amount total.
Widzisz, ja staram się przekazać jak najwięcej informacji
z tego co otrzymujemy od tripa, ponieważ nigdy nie wiemy co nam się
może w przyszłości przydać.
No i teraz tak Tripa Customer ID Szukamy Customer.
Customer Details Address Name von Nie, to nas nie interesuje.
Jeśli nie jesteś w stanie tego namierzyć, albo nie pamiętasz jak się
nazywał dany parametr, to zaraz Ci pokażę jak do tego wrócić.
Możemy się kliknąć, kliknąć tu i wybrać Modified Tips
i teraz poszukać jak się nazywa ten parametr odpowiedzialny za id customer.
Jest to po prostu Object Customer.
OK, czyli Request Data Object Customer.
Tutaj będziemy mieć odpowiednie ID.
tu będziemy mieć, jak się domyśla nasz klient.
Reference ID.
Co tutaj zwraca?
Aha, dobrze, przepraszam, kopię Expression.
Tutaj mamy ID, a tu musimy znaleźć konkretnego usera.
A więc.
Search for User gdzie Unix ID jest równe
właśnie Request Data Client Reference ID.
W ten sposób nabierzemy konkretnego usera, oczywiście First site.
No i jeszcze musimy tutaj przekazać ID subskrypcji.
Spróbujmy ją tutaj namierzyć.
Object Description I teraz mamy już wszystkie dane
o subskrypcji, która właśnie została utworzona i wybrana przez danego klienta.
Skoro utworzyliśmy subskrypcję, to teraz dodajmy ją do usera.
Data Thank changes to thank To będzie ten user.
Możemy sobie skopiować to Expression i tutaj tylko zmieniamy subskrypcję.
subskrypcje.
Na wartość, którą utworzyliśmy w poprzednim kroku.
I to w zasadzie wszystko, co musieliśmy tutaj zrobić.
Jak widzisz, tak jak mówiłem, to workflow jest naprawdę banalne.
Odebraliśmy dane właśnie z Tripa.
Na tej podstawie utworzyliśmy nową subskrypcję, a potem
zapisaliśmy ją do usera.
I pierwsza część za nami.
A skoro to mamy z głowy, to teraz musimy zadbać jeszcze o to, aby nasłuchiwać
właśnie na usunięcie subskrypcji.
Czyli musimy sobie wrócić tutaj i jeszcze raz namierzyć,
jak to się dokładnie nazywało.
Spróbujmy tak.
Czy tak mi tutaj to namierzy? Chyba nie.
Chyba muszę wpisać całość.
A właśnie Customer subskrypcją Related.
OK, to teraz właśnie takiego web hooka sobie dodajmy po naszej stronie.
Customer.
CRI related.
Mam nadzieję, że nie popełniłem nigdzie i żadnej literówki.
Zaznaczamy wszystkie trzy check boxy.
Znów wybieramy Detect Request Data.
Zaznaczamy, że potrzebujemy właśnie tych nagłówków.
Do tego jeszcze, tak jak mówiłem, przejdziemy za chwilę.
No i teraz musimy oczywiście tak jak w poprzednim przypadku
dodać odpowiedni endpoint w strip ie.
A więc klikam sobie tutaj, kopiujemy, wracamy do Strip web chłopków.
Natomiast zanim przejdziemy, skoro ten web hug jest już tutaj
dla nas odpowiednio ustawiony, no to musimy przejść tutaj do edycji,
czyli Update Details i pozbywamy się tutaj z tego końca tej
końcówki initial size musieliśmy dodać to niższa jest tylko za
pierwszym razem, aby właśnie Babel mógł sobie odebrać te dane i tak właśnie
ustawić ten endpoint w tryb nasłuchu.
Natomiast od teraz będziemy korzystać właśnie z tej normalnej końcówki
czyli checkout session completed.
Bez tego inicjalizacja.
Klikam update endpoint i ten pierwszy łepek już tutaj w pełni działa.
A więc wracamy.
I analogicznie musimy tutaj dodać nasłuch właśnie na ten drugi event,
czyli Add Endpoint.
Wklejamy nasze URL.
Tutaj będzie to Customer subskrypcja.
Tyle tylko ten event nas interesuje.
Add endpoint.
No i teraz nasz klient w jakiś sposób musi móc zrezygnować z danej subskrypcji, więc
zanim sobie odpalimy tutaj, to przechodzimy jeszcze
do produkt Catalog do Price.
Tables o ile dobrze pamiętam.
A nie, przepraszam, nie tutaj, tylko do Settings.
Billing.
Tu mamy Customer Portal i to jest właśnie ten link, o którym Ci
wcześniej mówiłem, który będzie właśnie kierował użytkownika do jego portalu.
Czyli kopiujemy i wracamy do edytora.
Przechodzimy do Dashboard.
Zamierzamy właśnie ten przycisk, czyli grupę Host Manage Group.
I właśnie ten.
Drugi button. Gdzie on mi się tutaj ukrył?
OK, tutaj pewnie o właśnie Plan Manage button.
Add workflow Open and external web site.
I może na razie zaznaczmy niech to się otwiera w nowym etapie.
OK, teraz zobaczmy, czy rzeczywiście będę mógł przejść.
Jako zalogowany host.
Wracam do Dashboard.
Jestem na koncie Live'a.
OK, dobra, już wiem co się wydarzyło.
Dlaczego live nadal nie ma subskrypcji?
No to odpowiedź jest bardzo prosta, ponieważ na razie tylko
inicjalizacja daliśmy sobie ten łeb.
Czyli właśnie wpadły nam te dane, a my dopiero później utworzyliśmy
taką nową subskrypcję.
A więc teraz skoro to nam już działa, to zaloguj się może na jakieś inne konto.
Czyli.
Wybierzmy jakiegoś innego hosta np. na wina.
I teraz przechodząc jeszcze raz przez ten cały proces właśnie wyboru subskrypcji,
nasze workflow powinno się już prawidłowo uruchomić i rzeczywiście przypisać mu
tutaj odpowiedni item w naszej bazie danych, a więc Activity your plan.
Tym razem może wybiorę po prostu Basic.
OK, muszę tutaj podać właśnie te same dane karty.
Znów jakąś datę do przodu.
Obojętnie jaki kod.
Niech to będzie po prostu doł.
Klikam pay and subscribe.
Nie chcę zapisywać danej karty.
OK, dokonaliśmy zakupu.
Możemy zamknąć to okno.
Przejść do podglądu.
Teraz powinniśmy się tutaj zalogować do Dashboard u właśnie jako na Win i ok.
Widzisz, button nam zniknął.
Czyli subskrypcja powinna zostać utworzona.
Sprawdźmy, czy tak się rzeczywiście stało, Czy mamy nowy ID w bazie danych,
mamy subskrypcję, mamy wybrany plan Basic, mamy price,
mamy te wszystkie informacje, które nam wpadły właśnie dzięki
temu, że ustawiliśmy sobie odpowiedni web hook i nasłuch na właściwy event.
A więc teraz powinienem móc tutaj przejść do tej strony.
Problemem jest to, że tutaj dokonaliśmy zakupu na email, który nigdzie pewnie nie
istnieje i nie mogę się na to zalogować. Konto.
Ale to nic.
Nic nie stoi na przeszkodzie, abyśmy tutaj dokonali zakupu jako główny host.
Czyli czeka nas trochę zabawy.
Właśnie tak to wygląda w przypadku Strike'a, że musimy podać takie maile, na
które potem będziemy mogli w ogóle coś zrobić.
A więc login as the host.
Jeszcze raz wybieram subskrypcję dla niego.
Tym razem strzelamy.
Niech to wejdzie Unlimited.
Jak widzisz, ten mail jest tutaj przekazywany.
Tym razem mam to właśnie we własnej domenie, więc będę mógł sobie otworzyć
skrzynkę i sprawdzić ten link od tripa.
Dodatkowo nie mogę tego zmienić dzięki temu, że przekazaliśmy właśnie do
Pricing Table odpowiedni parametr.
A więc jeszcze raz wpisujemy tutaj te dane karty.
Niech to będzie John Doe. Zapłacimy.
OK.
Możemy zamknąć to okno tutaj, czyli wrócić tam na stronę.
O właśnie naszego dashboard.
Przyda mi się to odpowiednio.
Teraz utworzyło. Zerknijmy.
Mamy Peter Gabriel po sprawdzajmy dane.
Mamy Unlimited Office + Host.
OK, dobra, teraz nam to odpowiednie przeskoczyło.
Klikam Manage Plan.
I teraz sprawdzić adres e-mail, a wyślemy ci łącze.
ok. To będzie Office + host małpa.
Info.
Klikam wyślij.
I zerknijmy czy nam tutaj to wskoczy.
Mamy łącze do logowania do portalu klienta, a więc mogę przejść.
O właśnie, i widzisz, mam teraz swój bieżący plan.
Mogę sobie oczywiście nim zarządzać.
Wiem, że wymagało to sporo pracy i przełączania się między kontami.
Natomiast jeżeli będziesz miał już w pełni aktywną aplikację i klienci będą w niej
dokonywać zakupu na swoje własne konta, to będą przekierowani takiego panelu
już na swój adres mailowy.
A ja musiałem tutaj pokombinować, ponieważ przy tych właśnie pozostałych już
darach dawaliśmy jakieś e-maile, na które oczywiście nigdy wiadomości nie otrzymamy.
A więc tak otwórzmy sobie to w ten sposób.
Przejdźmy teraz tutaj do bubla.
Wróćmy do Customer Description Delete i wybierzmy Detect data
tak żebyśmy nasłuchiwał.
Zerknijmy, czy tutaj mamy to odpowiednio ustawione.
A więc wracamy do Developers Web Hook.
OK.
Klikniemy tutaj.
Mamy Waiting for Events, a więc możemy anulować taką subskrypcję.
No i teraz dane powinny nam wskoczyć właśnie tutaj.
Zerknijmy, czy tak się rzeczywiście stanie.
Klikam Anuluj plan.
Znalazłem alternatywę.
Jeśli plan został anulowany, a my powinniśmy otrzymać tutaj dane.
I widzisz, wszystko się zgadza.
Otrzymaliśmy kolejny web hook.
Odpalił się następny event.
Damy.
Musimy teraz po prostu wykorzystać te dane, aby namierzyć taką
subskrypcję i ją po prostu usunąć.
Klikamy Save.
A w zasadzie zanim klikniemy Save jeszcze sobie zerknijmy na to, co to otrzymaliśmy
i powinniśmy mieć tak Object id ID subskrypcji.
Super!
Będziemy potem mogli namierzyć i w ten sposób usunąć.
Czy mamy tutaj jeszcze ten Client Reference ID?
Zerknijmy.
A tutaj nam te dane wskoczyły, Ale chyba nie.
Chyba nie.
Czyli musimy wykorzystać właśnie tylko to ID subskrypcji.
Ono jest tutaj pod Object ID.
Po prostu OK.
Klikam Save.
Czyli najpierw musimy sobie namierzyć ten element i go po prostu usunąć.
Czyli Litwy.
Co chcemy usunąć?
Search for Subscribe gdzie strip Subscribe non ID jest to
Request Data Body Object ID. O właśnie.
Jak sam widzisz, nie jest to jakoś bardzo trudne, ale wymaga trochę rozeznania i
pracy z tymi obiektami JSON, żeby namierzać właściwe wartości.
Jeśli masz z tym problem, tak jak mówiłem, zawsze możemy.
Tutaj wrócić do Modified Types.
Możesz sobie przejrzeć co pod jakie tutaj parametry wpada.
Napisać sobie to na kartce i potem właśnie próbować odpowiednio namierzyć.
Czyli tak usuwamy taką subskrypcję.
I to w zasadzie wszystko, co musi się tutaj zadziać, a więc klient anuluje plan.
Dzięki naszym ustawieniom subskrypcja kończy się automatycznie.
Nie czekamy do końca okresu rozliczeniowego
i tutaj wpada nam odpowiedni web hook, a my sobie ją usuwamy.
To co nam jeszcze tutaj pozostało do zrobienia, to oczywiście
pozbycie się tego initial size.
Tak, żeby właśnie ten web hook już teraz przyjmował te dane
W standardowym trybie mamy dodane oba łeb, huki.
Mamy dodaną właśnie tą obsługę subskrypcji, przynajmniej w tak
podstawowej wersji, czyli właśnie utworzenie i usunięcie.
To co nam jeszcze pozostało, to oczywiście ta bardzo ważna rzecz.
Zamknijmy sobie to, zamknijmy chwilowo.
To wróćmy w ogóle do edytora i zamknijmy ten
lewy panel, żeby nam tutaj nie przeszkadzał.
No i tak kwestia zabezpieczania takich web hubów.
Tak jak mówiłem tutaj musieliśmy zaznaczyć właśnie tą opcję run without
authentication i tym samym narażamy się oczywiście na ataki.
Gdyby ktoś właśnie próbował wysłać tutaj dane na te huki, no to mógłby rzeczywiście
coś uruchomić i namieszać w naszej aplikacji.
Ale jak to właśnie sobie to rozwiązać?
Otóż w tym celu wykorzystamy metodę, którą zaproponował Gregory Jona z serwisu Bitka.
I oczywiście chwała mu za to, że podzielił się taką wiedzą ze światem,
ponieważ to rozwiązanie jest tak naprawdę dosyć proste, a polega tylko na tym,
że jeśli przejdziemy taką stronę.
Do Strip Dogs, to znajdziemy tutaj listę wszystkich adresów IP z jakich strip może
wysyłać do nas powiadomienia na nasze łapki.
huki.
Jeśli nie wiesz czym są adresy IP to oczywiście odsyłam Cię do
dokumentacji albo do Wikipedii.
Możesz sobie doczytać czym to jest.
Natomiast nas interesuje po prostu ta lista i to co musimy teraz zrobić
to wrócić sobie do edytora.
Utworzyć nowy Option Set.
Ja go już tutaj utworzyłem o nazwie OZZ Trip IPS.
Dodajemy tutaj tylko jeden element.
Dodajemy kolejny atrybut o nazwie IP list.
To co musisz zrobić to właśnie przekopiować i wklejać tutaj wszystkie
te adresy, które tam były na liście.
Jak widzisz jest ich całkiem sporo.
Ja już to wszystko tutaj zrobiłem.
Dodałem je wszystkie właśnie na taką listę i skoro mamy taką listę adresów, z których
strip tylko strip będzie wysyłał do nas dane, no to oczywiście możemy sobie dodać
odpowiedni condition all, który będzie to sprawdzał.
A więc klikamy Save.
Przechodzimy tutaj do Back end Workflow i teraz kiedy dane wpadną tutaj na ten web
hook to dodamy tutaj kolejny warunek, który będzie weryfikował czy cała ta
reszta może się wykonać tak jak przy zwykłym workflow, które
do tej pory tworzyliśmy.
Mam nadzieję, że rozumiesz jak to działa.
Tak jak mówię, metoda jest mega prosta.
Tak więc wielkie gratulacje drugiego ego, że się z tym podzielił.
A wygląda to w ten sposób Get an option.
Of strip IPS strip IPS list contains.
I po to właśnie zaznaczyliśmy tą opcję include header,
żebyśmy mogli sobie wyciągnąć właśnie taki parametr właśnie z tym adresem IP.
Jeśli przejdziemy tutaj do Modified types row Data.
To oprócz takich właśnie elementów dotyczących samej subskrypcji
mamy tutaj jeszcze właśnie header.
A nas interesuje to CF, connecting IP i właśnie ten adres,
czyli to pole właśnie tutaj w JSON będzie wpadał adres IP, z którego skrypt
wysłał właśnie do nas takie dane.
Jeśli ten adres będzie na liście dozwolonych adresów IP,
to oczywiście wtedy wykona się cała ta operacja czyli CF connecting.
Mogę sobie to namierzyć Request Data.
CF connecting IP.
Tak naprawdę cały nasz kod Pythona wygląda w ten sposób.
Jak widzisz super prosto.
A dzięki temu zabezpieczyliśmy właśnie nasz łeb przed niepożądanym dostępem.
Oczywiście muszę to sobie skopiować i dodać również tutaj.
I to by było w zasadzie wszystko.
A jak widzisz, obsługa subskrypcji nie jest wcale tak trudna,
jakby się mogło wydawać.
Oczywiście trzeba poczytać dokumentację i wiedzieć co robić.
Natomiast samo dodanie łebków po stronie Strike'a nie stanowiło
jakiegoś większego problemu.
Tak samo u nas po stronie Pabla.
Wymagało to tylko przełączania się chwilę pomiędzy kontami,
żeby właśnie zainicjować sobie takie web huki, a teraz one już działają pod spodem
i właśnie nasi użytkownicy będą już tutaj poprawnie obsługiwani.
Ja w takim razie dziękuję Ci serdecznie za uwagę w tej lekcji i widzimy
się już w lekcji kolejnej.