Logika
17 godz. 49 min · Biznes i Automatyzacje
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzy 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ę.
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.
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?
Zanim przejdziemy do głównego tematu tej lekcji, chciałbym na chwilę wrócić jeszcze
do tego, co zrobiliśmy w lekcji poprzedniej, a mianowicie do workflow,
za pomocą którego usuwamy listę.
Jak pamiętasz, zastosowaliśmy tutaj back end workflow, czyli po kliknięciu w ten
przycisk Delete odpalamy sobie właśnie takie back endowe
workflow, które działa właśnie na zasadzie takiej pętli, czyli przechodzi przez
wszystkie listingu, usuwa polubienie i dopiero na koniec usuwa taką listę.
Natomiast musisz pamiętać o tym, że wykonanie takiego workflow może
zająć odrobinę więcej czasu.
W związku z tym dobrze by było zadbać o to, aby po stronie użytkownika
to przebiegło natychmiastowo.
Teraz użytkownik klika w button Delete.
Odpalamy sobie takie back endowe workflow i użytkownik nie do końca
wie, że coś tam się dzieje.
Oczywiście zanim sobie aplikujemy te wszystkie listing może
zająć chwilę, a on nie do końca wie, czy rzeczywiście coś się usunęło, czy my tam
coś odpaliliśmy i będzie pewnie próbował kilka razy nacisnąć taki button.
Dlatego też moją radą jest to, żeby np.
właśnie do wishlisty do data list dodać jakąś dodatkową flagę, np.
list archives albo Easy delete head cokolwiek takiego.
Ustawić jej wartość na bulion, czyli jedną i domyślnie.
Niech ta wartość będzie ustawiona na no.
Teraz, kiedy użytkownik klika w taki button, my w pierwszym kroku
zmieniamy jej wartość na jest.
W ten sposób możemy potem zadbać oczywiście przy wyświetlaniu
danych w grupie, aby taka grupa od razu nam zniknęła.
Wtedy oczywiście użytkownik nie widzi takiej grupy Już potem na liście po
kliknięciu w button delete ona znika, a my pod spodem odpalamy magię, czyli
właśnie workflow o nazwie Wish List.
W ten sposób tutaj działa to niezawodnie, a użytkownik jest zadowolony i nie musi
czekać i zastanawiać się, czy coś rzeczywiście pod spodem w
naszej aplikacji się wydarzyło.
Natomiast myślę, że jesteś już na takim poziomie zaawansowania, że bez problemu
wdrożysz to sam do swojej aplikacji.
A skoro to mamy już omówione, to teraz kolejny niesamowicie ważny temat
związany z tworzeniem aplikacji, czyli wykorzystanie API.
Ale czym ono tak w zasadzie jest?
Tutaj znów odsyłam Cię do materiałów dostępnych w sieci, np.
świetnego kursu przygotowanego przez Grzegorza na Web PL, jeśli oczywiście
chcesz się dowiedzieć więcej.
Natomiast takiej mega skróconej wersji API, czyli Application Programming
Interface to technologia umożliwiająca różnym programom komputerowym
komunikowanie się i współdziałanie ze sobą.
API definiuje zestaw reguł, dzięki którym jeden program może przekazywać polecenia
i dane do innego programu lub systemu.
Wyobraź sobie, że API to swego rodzaju tłumacz pomiędzy różnymi aplikacjami,
który pozwala im zrozumieć się nawzajem.
Dzięki temu programy mogą korzystać z funkcji i danych innych aplikacji bez
konieczności zagłębiania się w ich wewnętrzną strukturę czy też kod.
API jest szczególnie ważne w kontekście współczesnych aplikacji internetowych i
mobilnych, gdzie różne systemy muszą ze sobą współpracować, wymieniając
się danymi i usługami.
Na przykład aplikacja mobilna może korzystać z API, aby pobierać dane
pogodowe z serwera, wysyłać wiadomości za pomocą usługi SMS czy też
przetwarzać płatności online.
Korzystanie z API przyspiesza rozwój oprogramowania, ponieważ programiści nie
muszą tworzyć wszystkich funkcji od podstaw.
Zamiast tego mogą skorzystać z gotowych rozwiązań dostarczonych przez
inne aplikacje lub systemy.
To zwiększa efektywność, skalowalność i elastyczność oprogramowania,
umożliwiając tworzenie bardziej zaawansowanych i złożonych
aplikacji w krótszym czasie.
Po wysłuchaniu tej jakże interesującej regułki jestem na 100% pewien, że w
sytuacji, gdy masz z tym tematem do czynienia po raz pierwszy,
niewiele Ci ona wyjaśniła.
Ale nie przejmuj się, ponieważ gdy ja zetknąłem się z tematem na samym początku
swej przygody z programowaniem, też niewiele z tego zrozumiałem.
Dlatego może omówmy to sobie na przykładzie mojego znajomego,
który w bardzo prosty sposób wykorzystał dostępne API do swoich zainteresowań.
Jest on bowiem zapalonym narciarzem, który stara się regularnie w weekendy
robić sobie wycieczki na narty.
I do tej pory wyglądało to tak, że w piątek odpalał aplikację pogodową np.
na telefonie.
Kolejno sprawdzał interesujące go miejscowości w pobliżu i porównywał w nich
pogodę starając się wybrać takie miejsce, gdzie będzie ona najlepsza.
Przydatne, ale niestety też zajmujące sporo czasu.
Dlatego też zamiast robić to ręcznie, wykorzystał dostępne narzędzia naukowe
do tego, by robiły wszystko za niego.
Przede wszystkim wykorzystał portable, w którym już pracowaliśmy, gdzie
zdefiniował listę swoich ulubionych miast, a następnie połączył się poprzez API z
aplikacją pogodową, z której zawsze korzystał.
W ten sposób nie musiał jej odpalać samemu na telefonie, tylko wysłał odpowiednie
zapytanie, która dla każdego z miast zwróciła mu pogodę na dany weekend.
Jedyne co mu pozostało to sprawdzenie potem takiej gotowej listy i
wybranie najlepszej lokalizacji.
W ten sposób zamiast marnować swój czas na ręczne sprawdzanie każdego z miast,
otrzymywał listę wygenerowaną w kilka minut i dodatkowo ten automat uruchamiany
raz odpalał się co tydzień, oszczędzając mu godziny w skali roku.
Jak więc widzisz, API bywa niesamowicie przydatne, ponieważ pozwala nam wykonywać
operacje bez konieczności wchodzenia do aplikacji.
W ten sposób mógłbyś na przykład publikować posty na Facebooku bez
odpalania aplikacji na telefonie czy komputerze.
Mam nadzieję, że teraz ten temat jest nieco bardziej zrozumiały, a ja za chwilę
pokażę Ci jego praktyczne zastosowanie.
W tym celu wykorzystamy nowe narzędzie o nazwie Mail Send,
który podobnie jak w przypadku Send grida pozwala na wysyłanie maili.
W tym przypadku tylko transakcyjnych, bo tu akurat nie da się tworzyć kampanii.
Natomiast jego zaletą jest to, że jest dostosowany do małych firm i dostarczana
ilość takich wiadomości jest dużo większa niż w przypadku samego Grida.
Natomiast na minus należy zaliczyć fakt, że sam proces akceptacji konta jest
znacznie bardziej skomplikowany i tu wymagają już zdecydowanie więcej
informacji, by można z niego było w pełni skorzystać.
Dlatego też ja pokażę Ci tylko przykład jego zastosowania na koncie trial, gdzie
nie musimy czekać na pełną weryfikacja.
W ten sposób, jeśli kiedyś w przyszłości będziesz chciał z niego skorzystać już w
pełnej wersji, to będziesz miał solidne podstawy jak to zrobić.
W tym celu przechodzimy na stronę Androida i zakładamy konto.
Ja już to zrobiłem nim przejdę tutaj.
Przepraszam, nie na Androida, tylko oczywiście na stronę Mail Sent, a
jestem tutaj już w aplikacji.
Zaraz założyłem swoje konto i mogę teraz skorzystać sobie z tej domeny testowej.
Jeśli kliknę tutaj to jak widzisz próbowałem tutaj dodać
swoją i ona teoretycznie jest zweryfikowana i gotowa do użycia,
ale tak w praktyce nie jest.
Dalej walczę tam z procesem tej weryfikacji.
Natomiast mamy tutaj domenę testową, którą będziemy mogli wykorzystać,
aby właśnie wysłać maila.
Zresztą już tutaj wysłałem 3 wiadomości, wszystkie 3 zostały doręczone.
Kolejno, skoro mamy tutaj taką testową domenę, to tworzymy sobie podobnie jak w
Androidzie taki szablon wiadomości, który będziemy chcieli wykorzystywać.
Znów ja to zrobiłem.
Przechodzę tutaj do templates.
Tutaj wybieramy sobie Create template.
Jak widzisz mamy tutaj znowu masa rzeczy do wyboru.
One są bardzo zbliżone do tego z czego będziesz korzystał w Lidzie czy w innych
takich edytorach, więc myślę, że to nie powinno sprawić Ci najmniejszego problemu.
Ja wykorzystałem z jedną z gotowych takich template i tylko ją tam naprawdę
delikatnie dostosowałem.
Jeśli kliknę sobie tutaj na preview no to jak widzisz mamy tutaj nasze logo.
Mamy tutaj tak samo przekazywane zmienne, gdzie mamy name.
Tu powinien być listing name, ale ja wpisałem booking.
Zostawmy to w ten sam sposób.
I tutaj mamy przycisk logowania do Dashboard, czyli dokładnie to
samo co zrobiliśmy w sanepidzie.
Mamy właśnie taką gotową tę klatkę.
I teraz jeśli kliknę tutaj w Manage.
To dostanę instrukcje do API w jaki sposób wysłać właśnie takiego maila bez
wchodzenia tutaj do tej aplikacji.
Oczywiście moglibyśmy zrobić to z tego miejsca.
Mamy tutaj przycisk Test.
Jak widzisz, mogę tutaj przekazać te wartości dynamiczne, kolejno wybrać z
jakiej domeny ma to wejść i kto jest odbiorcą takiej wiadomości.
Ja tego jednak robić nie chcę.
Naszym zadaniem, a w zasadzie głównym celem jest to, aby właśnie wysyłać maile
poprzez maile Recent, nie odpalając w ogóle tej aplikacji, nie wchodząc do niej
ani na komputerze, telefonie, ani gdziekolwiek indziej.
Czyli coś podobnego co robiliśmy wcześniej w przypadku Grida, gdzie właśnie
wykorzystaliśmy plugin, który pozwolił nam wysłać maila bezpośrednio z
poziomu naszej aplikacji w Babel.
A więc wróćmy tutaj do kodu.
Prezentuje się on w ten sposób.
I tak zdaję sobie sprawę, że jeśli wybrałeś bubel nie mając wcześniej do
czynienia z programowaniem, to widok tego kodu może być przerażający.
Ale nie przejmuj się, bo zaraz rozbijemy to sobie wszystko na czynniki pierwsze,
chociaż już na pierwszy rzut oka powinieneś dostrzec
pewne znajome elementy.
Jeśli kojarzy Ci się to z adresem, który pojawił się w Babel po włączeniu back end
Workflow, to bardzo dobrze, A poniżej znajdziemy po prostu lista
parametrów, jakie musimy przekazać, by ta konkretna metoda poprawnie
wysłała nam maila.
Czyli mamy tutaj właśnie takiego adresu mailowego na jaki adres mailowy?
A tutaj poprzez personalizację przekazujemy właśnie te wartości.
Tak to wygląda po prostu mail send.
Musimy tak przekazać te parametry i tu mogę przekazać name login page
oraz ten parametr booking name.
A tu jak widzisz mamy ID naszej templatki, czyli w przypadku pluginów z Anglii.
Pamiętasz? Też musieliśmy uzupełniać te wartości.
Natomiast tutaj po prostu mamy do tego odpowiedni kod, który
musimy teraz zastosować.
Dodatkowo po lewej stronie mamy menu z dostępem do wielu różnych opcji.
Jak widzisz mamy tutaj email, mamy email, weryfikator.
Mamy tutaj analitykę, którą moglibyśmy sobie odpalić i posprawdzać
staranność naszych maili.
Ale jak pamiętasz wspomniałem, że API pozwala nam korzystać z funkcji różnych
aplikacji bez uruchamiania ich na komputerze czy też telefonie
bądź tablecie gdziekolwiek.
A więc skąd mamy wiedzieć, czy dana aplikacja w ogóle posiada API, a jeśli
tak, to co w zasadzie możemy w nim zrobić.
W tym celu wystarczy, że odpalisz sobie po prostu przeglądarkę.
Może to być Google i wpiszesz następującą frazę.
Nazwa narzędzia np.
mail send, api dx i to wszystko.
To mogło być np.
Send Great API, dx, Tripa, P DX cokolwiek, z czego będziesz musiał
oczywiście skorzystać.
I w ten sposób powinieneś zostać przeniesiony do dokumentacji
właśnie takiego narzędzia.
Ja tutaj nie będę przechodził, ponieważ już właśnie namierzyłem taką dokumentację
i teraz właśnie mogę Ci ją pokazać.
Wygląda ona w ten sposób.
Znów może to być bardzo przytłaczające, zwłaszcza jeśli do tej pory nigdy nie
korzystałeś właśnie z dokumentacji do API.
Liczba tych wszystkich funkcjonalności może Cię przytłoczyć.
Podobnie znów kody, jakiś JSON, PHP itd.
Wiem, że jest tego sporo, ale po prostu trzeba do tego przywyknąć.
Na przykład zobacz tutaj mamy podstawowe rzeczy, takie jak np.
autentykacji.
Czyli innymi słowy w jaki sposób mówisz danej aplikacji, że może z niej korzystać.
Domyślnie zakładamy sobie w niej konto tak jak ja to zrobiłem w aplikacji Mail Send,
a potem się logujemy i po prostu z niej korzystamy.
Więc tutaj musimy to w jakiś sposób odwzorować.
I masz tutaj dokładną informację jak to należy zrobić w przypadku
właśnie API Miner Sender.
Dodatkowo jak widzisz mogę tutaj rozwinąć zakładkę email
i mam dostępne akcje takie jak np.
właśnie wysłanie danego maila.
Może to być pojedynczy mail, może to być cały zestaw takich maili itd.
Czyli to co moglibyśmy zrobić bezpośrednio w aplikacji możemy zrobić z
wykorzystaniem API bez wchodzenia do niej.
No właśnie na tym polega cała ta magia tego API, że nie musimy właśnie odpalać
aplikacji i możemy sobie to wszystko odpalać pod spodem w ten sposób.
Tutaj jak widzisz mamy dokładną informację na jaki adres musimy wysłać zapytanie,
jaki to ma być typ zapytania.
Do tego jeszcze wrócimy później.
A teraz jak wygląda takie zapytanie, czyli co musimy tam uwzględnić, jakie parametry
przekazać, żeby nam to po prostu wszystko odpowiednio zadziałało
Oraz dodatkowo jeśli zjadę tutaj na dół to widzisz, mam właśnie jeszcze informacje
o odpowiedziach, czyli czego możemy się spodziewać jeśli wyślemy takie zapytanie?
Jaką odpowiedź możemy uzyskać?
Będzie ona różna w zależności od tego, z jakich metod będziemy tutaj korzystać.
Tu jak widzisz mamy właśnie listę wszystkich parametrów.
Mamy informację jaki to ma być typ np.
string czy też obiekt.
A tu jak zjadę niżej.
O właśnie, to są jeszcze jakieś wspierane typy plików itd.
A tu mam po prostu informacje o odpowiedziach.
To też jest bardzo przydatne.
Ale do tego przejdziemy sobie już później.
I w tym momencie chciałbym jeszcze zakomunikować Ci jedną bardzo ważną rzecz.
Nie każda aplikacja posiada dostępne API oraz jeśli nawet tak już jest, to nie
każda dokumentacja do niego przygotowana jest dobra.
To jest akurat całkiem niezła i mamy tutaj naprawdę fajnie to rozpisane.
Ja natomiast w swojej karierze napotkałem już takie, które albo były niemal
nieczytelne, albo co najgorzej zawierały jeszcze błędy, więc nie dało się z takiego
API po prostu poprawnie skorzystać.
I teraz kolejny, nie wiem czy smutny, ale niestety mocno prawdziwy komunikat.
Nawet jeśli planujesz swoją karierę jako knockout developer i chcesz pracę
wykorzystywać tylko Babel, to nie uciekniesz od API
i odczytania dokumentacji.
Dlatego też jest to temat, który warto sobie przyswoić i przetestować.
Kilka API, posprawdzać dokumentację, oswoić się z tym tematem, ponieważ nie
jest to nic trudnego, kiedy już naprawdę kilka razy wykorzystasz
API w swoich projektach.
Pamiętaj jednak o tym, że w bardzo wielu przypadkach możemy się posiłkować
pluginami w Babel, co zresztą zrobiliśmy już w przypadku Androida, gdzie
zainstalowaliśmy sobie odpowiedni plugin.
I wróćmy w takim razie do edytora, do samego Babel,
do naszego pluginu czyli Plugins plugin Send Grida i zerknijmy
jak to tutaj wszystko wygląda.
Mówiłem Ci o autentykacji, czyli o tym, żeby powiedzieć temu plugin owi, że to
ja dany użytkownik z niego korzystam i w tym celu wygenerowali sobie API
w quizie i przekazaliśmy go tutaj.
I tak bardzo często będzie wyglądała taka autentykacji, że będziesz musiał utworzyć
w danej aplikacji taki klucz i przekazać go po prostu w odpowiednie miejsce.
Dodatkowo mamy tutaj jeszcze cały szereg akcji, które mamy dostępne po
zainstalowaniu właśnie takiego pluginu.
Ale czym w zasadzie są te akcje i skąd one się tutaj wzięły?
Aby to sobie sprawdzić możemy przejść na stronę pluginu i podejrzeć sobie jego kod.
Jak to zrobić?
Wystarczy, że przejdziemy tutaj wyżej do Plugin Page.
To nam otworzy stronę danego pluginu i mamy tutaj jeszcze opcję See plugin code,
czyli możemy zobaczyć jak ten plugin został tak naprawdę pod spodem zbudowany.
Jest to niesamowicie genialna w swej prostocie funkcjonalność, zwłaszcza w
sytuacji, gdy sam będziesz chciał w przyszłości budować własne pluginy.
Nie będziemy się teraz zagłębiać w szczegóły, tylko przejdziemy
tutaj do tej zakładki API Calls.
Jak się okazuje twórca pluginu dodał dla nas odpowiednie dostępne akcje.
Mamy tutaj np. Create list, create recept itd.
Jak widzisz, jest tych akcji tutaj całkiem sporo.
Innymi słowy twórca albo twórcy takiego pluginu siedzieli na
dokumentacją API sand Grida.
Sprawdzali w niej jakie metody mamy dostępne i przygotowali to wszystko dla
nas, tak żeby to było po prostu gotowe.
Jeśli rozwinę jakoś gotową akcję np. tutaj.
Tak, widzisz, mamy coś, co bardzo przypomina właśnie ten kod, który
widziałeś wcześniej w dokumentacji Mail Sender.
Czyli mamy jakiś adres, na który musimy wysłać zapytanie.
Mamy tutaj rodzaj takiego zapytania oraz właśnie te parametry,
które musimy przekazywać.
W ten sposób instalując dany plugin nie musimy tego robić sami, ponieważ ktoś
inny wykonał za nas całą ciężką pracę.
Ale niestety w swojej karierze na 110 jak nie 120% trafisz na taką aplikację,
która pluginu nie posiada.
I co zrobić w takiej sytuacji?
Domyślam się, że pierwsza odpowiedź jaka ciśnie się na usta to panikować
albo szukać innej aplikacji.
I tu chciałbym Cię uspokoić, bo nie ma po co panikować, A innej aplikacji bardzo
często po prostu nie znajdziemy.
W takiej sytuacji musimy dumnie stawić czoła problemowi i siąść do dokumentacji
API i samemu przygotować odpowiednie zapytania, które potem będziemy mogli
wykorzystać właśnie w naszej aplikacji.
Czyli po prostu stworzyć sobie listę takich akcji.
Podobnie jak to miało miejsce w przypadku tego pluginu Grida.
Natomiast tym zajmiemy się już w kolejnej lekcji, do której Cię
serdecznie zapraszam.