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?
W tej lekcji rozpoczynamy naszą pracę dokładnie od momentu, w którym
zakończyliśmy ją w pierwszym sprincie.
A więc mamy naszą aplikację wypełnioną po brzegi różnymi option sets, które
z takim mozołem zakładaliśmy.
A teraz przyjdzie nam cześć z nich usunąć i w ich miejsca wykorzystać
już standardową bazę danych.
I tu dochodzimy do tego momentu, gdzie dla osób, które nigdy do tej pory nie tworzyły
żadnych aplikacji lub nie miały styczności z programowaniem, fraza bazy danych
może brzmieć nieco przerażająco.
A więc sprawdźmy, czy rzeczywiście jest się czego bać.
Otóż zgodnie z definicją zaczerpniętą z Wikipedii, baza danych to zbiór danych
zapisanych zgodnie z określonymi regułami.
Wiele typów baz danych, w tym np.
Babel tabel, organizuje dane w formie tabel zawierających dane danego typu.
Rekordy te z kolei podzielone są na pola, a w nich przechowywane są informacje.
Jestem niemal pewien, że taka sucha reguła niewiele Ci wyjaśniła.
Jeśli chciałbyś dowiedzieć się czegoś więcej o bazach danych, to oczywiście
zachęcam Cię do zapoznania się z całą masą dostępnych w sieci materiałów.
Z pewnością znajdziesz bardzo szczegółowe i wyjątkowo techniczne objaśnienia.
Natomiast mi w pierwszym momencie, gdy zetknąłem się z tym tematem,
starałem się go zrozumieć.
Wiele z tych materiałów wprowadziło większy mętlik w głowie niż wyjaśniło
z czym mamy tak naprawdę do czynienia.
Dlatego też postaram się przekazać Ci swoją wiedzę w nieco bardziej przystępny
sposób i wytłumaczyć to tak, jak ja to rozumiem.
A jeśli w tym momencie słuchają mnie specjaliści od baz danych, to może lepiej
niech zakryj uszy, przejdź do następnej lekcji.
W pierwszej kolejności zacznijmy od tego, że jeśli aktywnie uczestniczyłeś ze mną w
pierwszym sprincie, to masz już całkiem spore
doświadczenie w pracy z bazami danych.
Więc jeśli teraz zastanawia się, czy aby się nie pomyliłem,
to spójrz proszę na ekran monitora.
Ponieważ masz przed oczami pierwszą namiastkę bazy danych, z
jaką spotkasz się w Babel.
Są nią oczywiście obszar SET, a.
Drugim punktem statycznym jest oczywiście baza zawartej bool, z której też z
pewnością korzystałeś, kopiując jej rekordy i zamieniając je
właśnie na Option Set.
A więc skoro mamy już dwa punkty styczne, to przejdźmy dalej i sprawmy, by fraza
bazy danych zabrzmiała nieco bardziej przystępnie.
W dużym uproszczeniu możemy potraktować bazę danych jak ogromny arkusz w Excelu.
I tak zdaję sobie sprawę z tego, że jest to dość mocno naciągane uproszczenie,
ale musisz przyznać, że słysząc Excel czujesz się już nieco pewniej, prawda?
Wróćmy teraz do naszej bazy tabel.
Jeżeli nie wiesz czym jest table, to jest to taki Excel na sterydach, gdzie nadal
mamy zachowane podstawowe reguły dotyczące Excela, ale wzbogacone
dodatkowymi funkcjonalnościami.
Nie jest moim zadaniem uczyć Cię teraz zasad pracy z r Table, Bull,
ale jest to doskonałe narzędzie, za pomocą którego będzie mi znacznie łatwiej
wytłumaczyć Ci pewne podstawowe zagadnienia i dodatkowo przedstawić je w
formie wizualnej, znacznie przyjemniejszej w odbiorze, niż ma to
miejsce w samej Babel.
Zresztą ja bardzo często rozpoczynam pracę nad aplikacjami od stworzenia sobie
podstawowej struktury mojej bazy danych właśnie w tabel, a dopiero
później przenoszę ją do Babel.
Ale zacznijmy od podstaw.
Cała ta niebieska przestrzeń, która tutaj widzisz, opatrzona nazwą Nest,
to właśnie nasza baza danych.
A więc podążając za regułkę z Wikipedii, zbiór danych zapisanych zgodnie z
określonymi regułami i w tym przypadku zorganizowanych w formie tabel
zawierających dane danego typu.
I to też się zgadza, ponieważ mamy tutaj cały szereg tabel zawierających
różne typy danych.
Czyli po prostu te zakładki to są poszczególne tabelki.
Ale mógłbyś zapytać w zasadzie co to znaczy?
Czym jest ten typ danych?
Jakim typem danych może być np.
właśnie tutaj ta tabelka of countries, którą właśnie teraz wyświetlam na ekranie?
OZ to po prostu nazwa skrót od Option Set, więc możemy się go pozbyć.
Jeżeli go usunę i zostawię sobie samo countries,
czyli po prostu kraje, które promujemy w naszej aplikacji i w ramach tych krajów
będziemy mogli organizować różne oferty, jakie użytkownicy będą
zamieszczać w naszej aplikacji.
To jak widzisz, rzeczywiście brzmi to już znacznie prościej w odbiorze.
A więc w tym przypadku stosując nazewnictwo z Babel Data type to Country.
Zwróć proszę uwagę na liczbę pojedynczą.
Czyli schemat tego, jak ma wyglądać taki pojedynczy rekord w naszej bazie danych.
Natomiast sam rekord to po prostu ten rząd w naszej tabelce, który składa
się z różnych kolumn, tzw.
data fields, a one z kolei przechowują dane w określonym formacie.
A więc spójrz proszę teraz na ten pierwszy wpis.
Pierwszy rekord w naszej tabelce Frans.
Jak widzisz, składa się on tutaj z różnych kolumn.
Zacznijmy może od tej pierwszej o nazwie Display.
Jeżeli kliknę sobie tutaj dwa razy, to otrzymuję informację jaki rodzaj
danych mogę tutaj przechowywać.
W tym przypadku jest to single line text, czyli po prostu zwykły tekst.
Jeżeli natomiast chciałbym zmienić rodzaj danych jakie będę tu mógł przechowywać var
table, wystarczy kliknąć tutaj i pojawi mi się cała lista z dostępnymi
już tutaj rodzajami wartości, jakie będę mógł wprowadzić var table.
Jest ich całkiem sporo.
Mamy całkiem szeroki wachlarz możliwości i Wiele z nich znajdziesz również bubel.
Tylko czasami po prostu troszkę inaczej nazwanych.
Im dłużej będziesz pracował zarówno z Babel jak i tabel, tym łatwiej będzie
Ci się poruszać po tych rodzajach.
A więc jeżeli teraz przejdziemy sobie przez cały ten rekord i sprawdzimy te
wszystkie wartości i wszystkie kolumny, to mamy tutaj tag single line tekst,
czyli zwykły tekst apartments.
Jeżeli kliknę tutaj dwa razy, mam tutaj number variable.
Mamy tutaj jeszcze różne ustawienia dla tej opcji number.
Tego od razu w Babel nie znajdziesz.
Natomiast najważniejsza jest tutaj ten typ danych.
Mamy tutaj obrazek, czyli pole typu touch, do którego możemy wgrać tutaj jakieś
dokumenty, pliki, a nawet obrazki.
Mamy Price, czyli znów typ number oraz mamy tutaj czarny prąd.
W tym przypadku jest to long text, czyli po prostu zwykły tekst.
Jeżeli teraz przeszedł sobie do Babel, namierzył OSC Countries, to jak widzisz
to pole nam się tutaj pokrywają.
Mamy display, który był zwykłym tekstem.
Mamy tutaj apartments, który był number em i match, czyli po prostu tutaj pole image
price, czyli po prostu number.
Nic żadnej nie dodawałem, bo to było tylko i wyłącznie variable,
jak zresztą sam widzisz w przypadku bubel i oszołom nie mamy tak ładnej graficznej
reprezentacji tego jak wyglądają nasze dane i trudno tu doszukać
się podobieństwa do tabeli.
Ale mogę Cię zapewnić, że pod spodem ona nadal istnieje i jest bardzo zbliżona
do tego, co widziałeś w Table.
Wróćmy teraz do Tableau i sprawdźmy jak dodać tutaj nową kolumnę.
Jest to niesamowicie proste.
Wystarczy, że kliknę tutaj, wpiszę jej nazwę i wybiorę ten rodzaj
danych, jakie chcę w niej przechowywać.
Jak widzisz, mamy tutaj, tak jak wspominałem wcześniej, cały wachlarz
różnych możliwości, które możemy wybrać.
Ale chciałbym, żebyś zwrócił uwagę na ten jeden rodzaj, czyli ten pierwszy
o nazwie Link another record.
Innymi słowy w ten sposób możemy linkować do innej tabeli.
Mamy tutaj listę wszystkich tabelek, jakie mamy dostępne tutaj i w ten
sposób mogę utworzyć takie linkowanie.
Lub inaczej jest to takie relacyjne połączenie pomiędzy dwoma tabelami.
Nasza baza danych nie byłaby zbytnio przydatna, gdyby poszczególne tabele nie
mogły się ze sobą w jakiś sposób komunikować.
I tutaj znów posłużę się przykładem z pierwszego sprintu,
czyli przejdźmy tutaj do tej tabelki.
OSR Reviews są to po prostu oceny, a w zasadzie
komentarze jakie wystawiają użytkownicy po pobycie w danej lokalizacji,
czyli w danym listingu, bo u nas taką nazwę nosi pojedyncza lokalizacja.
Jak widzisz, mamy tutaj znowu cały szereg standardowych pól, czyli pole display,
zwykłe pole tekstowe, pole z obrazkiem.
Mamy informację o mieście z jakiego pochodzi autor, jego imieniu, nazwisku,
datach rozpoczęcia pobytu i zakończenia, a nawet ratingu.
Chciałbym w tym momencie również zwrócić Twoją uwagę na nazewnictwo.
Ja najczęściej jak widzisz stosuję tutaj nazewnictwo angielskie bez żadnych
polskich znaków, bez żadnych znaków diakrytycznych.
Jedyne co robię to zamiast spacji używam podkreślenia dolnego.
Bardzo często spotkasz się również z nazewnictwem typu camel case, czyli np.
and date. Możemy zapisać sobie w ten sposób.
Natomiast to z jakiego nazewnictwa będziesz korzystał zależy już tylko i
wyłącznie od Ciebie albo od jakichś norm narzuconych w projekcie
bądź wizji Twojego klienta.
Natomiast jeżeli już zdecydujesz się na jeden typ, to staraj się go stosować
we wszystkich swoich projektach.
Cofnijmy sobie tą zmianę.
Klikamy Cancel.
A więc mamy tutaj jakąś recenzję wystawioną przez danego użytkownika.
Mamy różne kolumny.
Natomiast sama recenzja byłaby całkowicie bezsensowna, gdyby nie
dotyczyła jakiegoś miejsca.
Myślę, że to jest to doskonale dla Ciebie zrozumiałe.
Dlatego też stosujemy tutaj linkowanie właśnie do istniejącej u nas tabelki
listy, czyli po prostu do tej listy miejsc.
I jak mamy tutaj widzisz to ustawione, to możemy sobie zamknąć.
To są jakieś podpowiedzi?
A widzisz, to jest tutaj lista to as listing.
I teraz tak portable możemy ustawić dwa rodzaje linkowania.
Linkowanie jeden do jednego.
I tak to powinno wyglądać.
Czyli powinno być odznaczone.
A więc jedna recenzja powinna dotyczyć tylko i wyłącznie jednego listingu.
No i myślę, że znów przyznasz mi rację, że ma to sens.
Raczej nie chcemy wystawiać różnych opinii, w zasadzie jednakowych
opinii dla różnych miejsc.
Staramy się, aby te recenzje były jak najbardziej unikalne i dotyczyły
po prostu pojedynczego listingu.
Tak, chcę to zachować.
Tak, to będzie dotyczyło tylko jednego miejsca.
Chciałbym też, żeby zwrócił uwagę na jedną bardzo ważną rzecz Babel.
Jeżeli dodam tutaj kolumnę właśnie takie linkowania, to takie linkowanie
działa w obie strony.
Mogę Ci to udowodnić.
Klikam sobie tutaj.
Powiedzmy, że dodamy tutaj jeszcze country i wybierzemy linkowanie do countries.
Ważne to możemy odznaczyć.
Klikamy Create field.
To są pola pomocnicze. Na razie pomijamy.
A więc tak mamy linkowanie do country.
Jeżeli przejdę teraz tutaj do tabeli countries.
Tak widzisz, wskoczyła mi tutaj linkowanie w drugą stronę, czyli do reviews.
Jest to automat, który zawsze zadziała Ci w r table.
Niestety nie można go wyłączyć.
Nie wiem czy to dobrze czy źle.
Jesteśmy na to po prostu skazani.
Natomiast chciałbym, żebyś zapamiętał, że takie linkowanie w Babel
działa tylko i wyłącznie w jedną stronę.
I dodatkowo, żeby osiągnąć właśnie taką funkcjonalność, czyli linkowanie
jednego albo linkowanie do wielu.
Też troszkę inaczej wygląda, np.
usuńmy sobie teraz to linkowanie.
Tak, chcę usunąć.
Wracamy do reviews ok.
Usuwamy tą kolumnę, a więc w tym przypadku mamy tak.
Jedna recenzja do jednego listingu.
Ale jeżeli przejdziemy do listingu i pokażmy sobie tutaj reviews.
OK, widzisz tutaj ta kolumna.
Tak się domyślasz.
Tutaj będzie działało linkowanie do wielu, ponieważ do jednej lokalizacji możemy mieć
całą masę recenzji i właśnie tutaj w grę wchodzi to linkowanie dwustronne w Babel.
Zaraz Ci wytłumaczę o co chodzi.
Tu sobie ustawiliśmy linkowanie w obie strony.
Teraz spróbujmy wrócić Babel i zobaczmy, jak to tam wygląda.
Przejdźmy do S Reviews.
Jak widzisz, mam tutaj linkowanie do S Listing S.
Gdybym chciał je jeszcze raz dodać, to wpiszmy tutaj listing.
W tym przypadku muszę sobie wskazać typ danych.
Jak widzisz, mamy tutaj cały szereg różnych rodzai wartości,
jakie możemy przechowywać.
Mamy tutaj dostępy do setów, mamy dostępy do Basic Tips, czyli tych,
które znasz już z Table, a więc teksty, numery, daty itd.
Wybierzmy sobie listing.
I teraz tak jeżeli chcesz linkować jeden do jednego, czyli jeden review do jednego
listingu, to zostawiam to w ten sposób.
Jeżeli natomiast chciałbym stworzyć linkowanie do wielu, a więc tutaj
być w stanie wstawić kilka różnych listingu, to zaznaczam sobie ten checkbox
i w ten sposób tworzy nam się lista.
I w tym momencie, jeżeli będziesz tworzył właśnie takie relacyjne powiązania, to
możesz sobie zadać pytanie czy za każdym razem tak jak w Red Table tworzyć
właśnie takie linkowanie zwrotne?
Otóż odpowiedź na to pytanie jest bardzo prosta i brzmi to zależy.
O ile takie linkowanie jeden do jednego ja najczęściej stosuję i tutaj
nie ma żadnych przeciwwskazań.
Naprawdę ułatwi Ci to w przyszłości pracę?
Tak, właśnie tworzenie takich list bywa już niestety zwodnicze, ponieważ na
chwilę obecną w babol takie pole typu właśnie lista może zawierać
maksymalnie 10000 rekordów. Domyślasz?
Jeżeli będziemy mieć długo działający serwis i bardzo popularną atrakcję,
czyli bardzo popularny listing w naszym serwisie, to bardzo szybko możemy tutaj
uzyskać właśnie te 10 000 rekordów.
Jeżeli to wartość przekroczysz, to po prostu nasza baza danych zwolni
przestanie być tak wydajna.
Dlatego też warto się zastanowić, czy rzeczywiście tworzyć
takie linkowanie do list.
Musisz sobie odpowiedzieć na pytanie, czy będę w stanie bardzo
szybko przekroczyć te 10 000?
Jeżeli odpowiedź mi zdecydowanie tak, to po prostu pomiń.
Nie twórz takiego linkowania typu lista.
No właśnie mówię o bazy danych, ale nadal poruszamy się tak naprawdę w obrębie
Option Set, więc mógłbyś spytać dlaczego?
Otóż znów jak wspomniałem w pierwszym sprincie Option Set są taką
uproszczoną wersją bazy danych w tabel.
Czyli tworząc taki option set i dodając kolejne Data field.
Tutaj noszą one nazwę atrybutu, czyli var table.
Tworzyliśmy kolejne kolumny, a tutaj tworzymy po prostu nowe atrybuty, ale jest
to dokładnie pod spodem to samo, czyli jest to po prostu nowa kolumna, która
może zawierać określony rodzaj danych.
Gdy w kolejnej lekcji przejdziemy już do właściwej pracy z bazami danych.
Zobaczysz, że schemat tworzenia tutaj tych kolumn i całych tych właśnie baz danych
jest bardzo zbliżony w tym, co robimy właśnie pracując na setach.
A na chwilę obecną musisz mi po prostu uwierzyć na słowo, że tak jest.
Natomiast największą różnicą pomiędzy option sets a zwykłą bazą danych jest
fakt, że w przypadku tych pierwszych musimy ręcznie dodawać nowe rekordy,
a potem w samej aplikacji możemy je tylko pobierać.
Udowodniłem Ci to zresztą już nie raz, np.
właśnie tworzyliśmy sobie ręcznie taki OS listing i z resztą ręcznie tworzyliśmy
wszystkie sety, które tutaj widzisz.
Myślę, że nie raz. Serdecznie pozdrawiam.
Weź mnie.
Kiedy musiałeś dodawać tutaj kolejne wpisy?
Natomiast potem właśnie takie dane z Option Setup możemy sobie tylko i
wyłącznie pobrać i wyświetlić w naszej aplikacji.
Przejdźmy na przykład właśnie na stronę główną do naszych aplikacji.
Jedźmy sobie tutaj, niżej i tu mamy np.
pobierane dane z setu of Countries.
Jak widzisz, te dane tylko możemy sobie tutaj wyświetlić i nie mogę ich w żaden
sposób edytować, dodać bądź usunąć.
Natomiast jak się domyślasz, nie jest to wskazane działanie w przypadku
pełnoprawnej aplikacji.
Wyobraź sobie bowiem sytuację, gdy host, czyli użytkownik o danym typie konta
zarejestrowany w naszej aplikacji dodaje swoją pierwszą ofertę, czyli u nas tzw.
listing.
I taka oferta zamiast od razu wskoczyć do bazy danych i być dostępna
dla użytkowników, trafia do.
No właśnie właśnie, gdzie ona mogłaby trafić?
Tak naprawdę nigdzie, bo z poziomu aplikacji nie możemy tworzyć,
edytować lub usuwać rekordów w Option apce Sets.
Chciałbym, żebyś sobie to dokładnie zapamiętał,
a więc może jakoś przekazywać treść takiej oferty do administratora
serwisu, czyli w skrócie np. do Ciebie.
No i teraz, kiedy taka oferta trafia do Ciebie, twoim zadaniem byłoby ręczne
dodanie nowego rekordu do właściwego option setu.
Jeszcze nie brzmi strasznie, prawda?
A co gdyby takich zgłoszeń trafiło do Ciebie dziennie?
Sto, tysiąc? a może milion?
To już brzmi na ogromną ilość pracy niemożliwej do wykonania.
I dokładnie tak ma właśnie brzmieć.
Bo pisząc sety nie są od tego, aby przechowywać w nich dane, które
tworzone są edytowane czy nawet usuwane w ramach Twojej aplikacji za pomocą
działań innych osób, czyli np.
użytkowników Twojego serwisu.
Tu dumnie i z pieśnią na ustach wkraczają do akcji już właściwe bazy danych, które
posiadają wszystkie te wbudowane funkcjonalności.
A więc skoro mamy już za sobą całkiem przydługi wstęp teoretyczny,
który mam skromną nadzieję nieco rozjaśnił Ci temat baz danych i sprawił, że ta fraza
przestała już budzić lęk, to przejdźmy do praktyki i w kolejnej
lekcji zaczniemy naszą pracę z bazami danych.
Pierwszym Data Type, jaki jest absolutnie wymagany w naszej aplikacji,
czyli oczywiście rekordem użytkownika.