MVP aplikacji w rekordowym czasie z Bubble: Wyszukiwanie danych i auto-binding w Bubble
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?
Zanim zajmiemy się dodaniem prawa serwis do naszego listingu oraz dalszej pracy nad
workflow, które pozwoli użytkownikowi na to, aby mógł taki listing dodać w naszym
serwisie Chciałbym poruszyć jeszcze dwa bardzo ważne tematy.
Natomiast zanim do tego przejdziemy jedna krótka uwaga.
Jak pamiętasz, w jednej z poprzednich lekcji utworzyliśmy
tutaj Data typ Listing.
Ja wspomniałem w niej również, że tutaj dla użytkownika dodałem właśnie to
pole, które jest listą takich listingu.
To, czy utworzysz takie połączenie zwrotne zależy oczywiście od Ciebie.
Natomiast ja uznałem, że jest niewielka szansa na to, aby taki user, a w zasadzie
host w naszym serwisie posiadał więcej niż 10 tysięcy listing ów.
A więc ta lista jak najbardziej ma sens i pozwoli łatwiej nam namierzyć
właśnie takie jego listing.
A więc skoro tam mamy już z głowy, to przejdźmy do pierwszego tematu, który
chciałbym poruszyć w tej lekcji, a jest nim wyszukiwanie rekordu w bazie danych.
Jak pamiętasz, do tej pory pracowaliśmy tylko z rekordem Parent User,
który zapewnia nam Babel i pozwala szybko namierzyć rekord zalogowanego użytkownika.
Jeżeli przejdziemy do Dashboard u.
To w tym miejscu np.
odnosiliśmy się właśnie do takiego obiektu i wyciągaliśmy sobie
first name i last name.
Natomiast co by było w sytuacji, gdy chciałbym wyciągnąć dane jakiegoś
innego użytkownika z naszej bazy danych?
Czyli wtedy nie wykorzystywać karencji usera?
Jak mamy to zrobić?
Otóż znów jak się domyślasz jest to bardzo proste.
Ja w tym celu przygotowałem na stronie Scratch PAD taki super prosty formularz.
Ja go tutaj rozwinę, żebyś zobaczył z czego on się składa.
Jest to po prostu grupa.
W środku mamy tekst kolejno dwa pola input oraz przycisk.
Dla całej tej grupy ustawiłem jak widzisz typowy content na user.
Natomiast jeszcze tutaj nie ustawiałem data source, a tutaj te pola.
A widzisz initial content one wyciągają sobie po prostu first name
i last name z tej grupy.
Nic trudnego, to już robiliśmy.
Myślę, że bez problemu sobie poradzisz, żeby utworzyć taki formularz.
Tak więc dodaj go proszę.
Możesz utworzyć też taką stronę skrót do testów.
Ja zawsze to robię. Dam Ci chwilę, abyś teraz mógł to wdrożyć.
OK.
Mam nadzieję, że Twój formularz jest już gotowy i wygląda mniej więcej tak jak mój.
Nie musimy się tutaj bawić w żadne typowania.
Posłuży nam to tylko i wyłącznie do testów.
A więc w jaki sposób?
Teraz dla Form Group mamy tutaj przekazać konkretny rekord?
Jak pamiętasz do grupy możemy przekazać tylko i wyłącznie jeden
rekord z naszej bazy. Więc jak to zrobić?
Parent user nam odpada, a więc musimy wyszukać odpowiedni
rekord w naszej bazie danych.
Robimy to w ten sposób.
Klikamy tutaj, wybieramy Search for i następnie decydujemy jaki
typ danych chcemy wyszukać.
W naszym przypadku będzie to oczywiście User.
No i teraz możemy tutaj dodać nowe skrajne Babel Train.
Są używane do filtrowania i ograniczania wyników zapytań do bazy danych.
W ten sposób pozwalają one na precyzyjne określenie, które rekordy powinny
być pobrane i wyświetlone na podstawie właśnie tych określonych kryteriów.
One Strings są kluczowym elementem do tworzenia dynamicznych aplikacji, gdzie
wyniki są dostosowane do potrzeb użytkowników i kontekstu.
OK, to taka sucha reguła.
Natomiast jak tutaj dodać taki konstrukt?
Jak się domyślasz klikamy w ten bardzo duży button
i teraz mamy dostęp do niemal tych wszystkich pól
jakie mamy dodane do Data Type User.
Moglibyśmy się odnieść do Unique ID.
Natomiast dla mnie dużo prościej będzie wybrać tutaj Slack
i powiedzieć, że on ma być równe.
No właśnie, jakiejś wartości.
Wróćmy więc do bazy danych do naszej zakładki AppData.
Tutaj do listy wszystkich użytkowników i wybierzmy może właśnie ten pierwszy
rekord i kopiujemy sobie jego Slack.
Wracamy do dizajnu.
Klikamy znowu tutaj i wstawiamy tą wartość.
I w ten sposób.
A właśnie, przepraszam, nie tutaj, bo tu musimy dynamiczną, musimy kliknąć właśnie
poza tą wartość dynamiczną tak jak teraz to zrobiłem i dopiero tutaj to wstawić.
To jest wartość statyczna, dlatego trzeba zrobić to w ten sposób.
I teraz mówimy bubble owi, że wysyłamy zapytanie do naszej bazy danych i chcemy
zwrócić tylko taki rekord, który spełnia ten warunek, czyli że jego slug jest równy
Właśnie to, co widzisz teraz na ekranie.
Pamiętaj, że taki constant zadziała od razu na etapie serwera.
To znaczy, że Babel zwróci tylko i wyłącznie te rekordy,
które będą spełniały ten warunek.
Bądź tutaj set warunków, bo możemy dodać ich tutaj dużo więcej.
Klikamy Close.
No i Babel nam tutaj podpowiada, że to nam zwróci listę.
Możemy to nawet sprawdzić.
Aplikuje się tutaj.
Mam tutaj zaznaczone właśnie to na czerwono.
Dlaczego?
Ponieważ jak widzisz evaluation to a list of users.
Mimo, że to będzie tym przypadku tylko jeden rekord, to Babel domyślnie ewakuuje
takie wyszukiwanie do listy, więc to co musimy zrobić, to wskazać
tutaj, który rekord nas interesuje.
Skoro zwrócimy tylko jeden, bo tylko jeden rekord w naszej bazie danych ma taki
właśnie slug, to mogę tutaj zaznaczyć.
A zresztą get bubble odpowiada click to use the first item of this list,
czyli wybrać tutaj first item.
OK, skoro to jest gotowe, to zobaczmy czy rzeczywiście to zadziałało.
Wracam, odświeżam.
Jak widzisz działa dokładnie tak jak powinno.
Nasza wyszukiwanie się odpaliło, zwróciło nam ten rekord z bazy danych, którego
poszukiwaliśmy i tutaj oczywiście wyciągamy wartość first oraz last.
Chwilowo dodaliśmy tylko jedna prosta ograniczenie, w którym
znak wpisaliśmy ręcznie.
Ale oczywiście możemy tam przekazywać dynamiczne wartości i tym oczywiście
zajmiemy się później, gdzie będziemy np.
wdrażać logikę na naszej stronie search.
OK.
Skoro ten pierwszy etap mamy omówiony, czyli w jaki sposób masz wyszukiwać
rekordy w swojej bazie danych?
To już wiesz.
Poprzez search for moglibyśmy na przykład pozbyć się tego.
Tutaj Konstantin, mogę ci to udowodnić, jeżeli kliknę tutaj.
Nie mamy żadnych min, żadnych ograniczeń, co oznacza, że Babel zwróci
nam tutaj wszystkie rekordy.
ustawione na Data IP user, czyli wszystkich użytkowników
z naszej bazy danych.
Możemy sobie wybrać jeden z takiej listy, ale równie dobrze mogę
tutaj wybrać Random item.
I zerknijmy jaki użytkownik teraz tam wróci.
Wracam na stronę padu. Odświeżam.
Jak widzisz tym razem jest to Jonathan Peters.
Jeżeli bym odświeżył.
To tym razem będzie to taki rekord i za każdym odświeżeniem
będzie wracała cała lista.
A my z tej listy wybieramy sobie jakiś właśnie randomowy rekord.
Natomiast chcę teraz pokazać jeszcze co innego, czyli omówić drugi bardzo ważny
temat, jakim jest auto Binding.
Brzmi to nieco strasznie, ale w praktyce jest bardzo proste i bardzo użyteczne.
Otóż ogólna reguła brzmi tak Auto building jest to funkcja
umożliwiająca bezpośrednie powiązanie danych w elementach interfejsu użytkownika
z danymi w bazie danych bez potrzeby pisania dodatkowego kodu.
Dzięki Auto Building możesz łatwo tworzyć dynamiczne aplikacje,
gdzie zmiany wprowadzone przez użytkownika cało tematycznie
zapisywane w bazie danych.
Jest to szczególnie przydatne do formularzy i innych interaktywnych
elementów, gdzie użytkownik wprowadza dane.
A skoro znamy regułkę, no to przejdźmy oczywiście do praktyki.
Wróćmy do edytora.
Pozbądźmy się tego Random item.
Ja chcę tutaj first item i szukajmy, że record to nawijka, czyli slug.
Niech będzie równy.
John Wick.
Oczywiście znowu wpisałem nie w tym miejscu, tylko tutaj.
Close.
Zerknijmy, czy to zadziałało.
Oczywiście działa tak jak trzeba.
Jak pamiętasz, w jednej z poprzednich lekcji, gdzie zawarliśmy profil takiego
użytkownika, robiliśmy to właśnie poprzez popup na stronie profilu owej.
Użytkownik tam właśnie miała wyświetlone swoje dane.
Mógł je poprawić i oczywiście zaktualizować.
Dokładnie to samo moglibyśmy zrobić tutaj.
Czyli dlatego button Save.
Moglibyśmy tutaj dodać workflow i wybrać tutaj Data Fink.
Tym razem odnosimy się do Parent User tylko do konkretnego rekordu, czyli Data
Fink Make changes to fink, czyli chcemy zmienić jakiś rekord w bazie danych.
Teraz musimy powiedzieć co chcemy zmienić.
W naszym przypadku jest to Form Group i User oba Parent Group User.
Na jedno wyjdzie czy będzie to Farm Group.
Jak się do tego odniesiesz?
Czy odniesiesz się do Parent Group User to zmienimy oczywiście ten konkretny rekord.
I tym razem mógłbym tutaj właśnie dodać first name.
Jest równe First input i oczywiście jego wartość last name.
Analogicznie tak jak robiliśmy to wcześniej i oczywiście jak
najbardziej nam to zadziała.
Natomiast czasami będziesz chciał pozwolić użytkownikowi
na to, aby edytował jakiś rekord w bazie danych bez konieczności klikania w button
i tworzenia takiego workflow.
W tym celu musimy właśnie wykorzystać auto binding.
Jak to zrobić? Pozbywamy się tutaj tego workflow.
Wracam do designu i pozbywam się w ogóle tego betonu.
To co muszę teraz zrobić, to powiązać to pole first input z konkretnym polem, a w
zasadzie z konkretną kolumną właśnie w naszym data type User.
W tym celu klikamy tutaj Enable auto binding on the parent element Swing,
czyli odnosimy się do tego właśnie data type User.
Jak widzisz od razu wskoczyło nam do first name.
Oczywiście mamy tutaj listę wszystkich pól jakie wpisaliśmy właśnie
do naszego Data Type.
My chcemy tutaj to powiązać właśnie z First, natomiast pojawia
nam się tutaj taki.
dość długi komunikat, że musimy ustawić odpowiednie privacy
rules, aby to zadziałało.
A więc mogę kliknąć tutaj lub kliknąć Data i przejść do Privacy.
Tutaj jest prościej.
Od razu zostaniemy przeniesieni do zakładki Data Type.
Wybieramy Privacy.
Jak widzisz tutaj mamy właśnie taką zakładkę, a w zasadzie checkbox
Allow auto binding.
Ja chciałbym, aby taki rekord poprzez auto binding mógł oczywiście edytować
tylko i wyłącznie jego właściciel.
Czyli odnosimy się tutaj do ownera.
Zanim jednak przejdziemy do Allow Auto Binding chciałbym jeszcze na chwilę
porozmawiać o tym checkbox ie, czyli Find this insert.
Właśnie jeżeli odznaczyć takie pole, czyli nie damy tego checkbox to data type
user nie będziemy w stanie wyszukać poprzez search.
Po prostu bubble nam nic nie zwróci.
Dlatego jak pamiętasz w poprzedniej lekcji musiałem tutaj zaznaczyć Find this series,
ponieważ parent user to tak naprawdę wyszukiwanie rekordów w bazie danych, a
ponieważ tego nie mieliśmy zaznaczonego, dlatego nic nam się tam nie wyświetlało.
A więc jak najbardziej chcemy przeszukiwać właśnie taki rekord, a nie data type
poprzez Search for.
I teraz dopiero możemy przejść do Allow Auto Binding.
Klikam tutaj i teraz muszę zaznaczyć, które pola użytkownik może właśnie
poprzez taki auto binding edytować.
W naszym przypadku będzie to pole Field Name.
Jak się domyślasz Last name.
Wracamy do designu.
Jak widzisz, ten komunikat nam już tutaj zniknął.
Możemy pokazywać jakiś alert albo sukces.
Jest to całkiem fajne rozwiązanie, jeżeli chcesz.
Możemy je nawet zaznaczyć i zobaczyć jak to będzie działało.
Mamy tutaj dodania jakiegoś typu alertu, wiadomości, jego rodzaju.
Ja raczej z tego nie korzystam.
Jeżeli już to tam sam dopracowuje jakieś workflow, które np.
pokazuje jakiś checkbox albo dodaje obramowanie w kolorze zielonym.
Wszystko już zależy od Ciebie, bo nie będziemy się tym bawić.
Odznaczamy tą opcję.
I teraz przechodzimy do drugiego pola Input.
Znów zaznaczamy Auto binding i tym razem będzie to Last name.
No i teraz tak wróćmy do podglądu.
Odświeżamy rekord co na weekend.
I teraz jak widzisz nie mam przycisku save.
A jeżeli chciałbym zmienić te wartości i zacznę coś wpisywać
a kliknę się gdzieś poza to pole.
To okazuje się, że nie mam uprawnień, żeby to zrobić.
Dlaczego?
No jak się domyślasz nie jestem zalogowany jako John Wick, tylko chyba nawet w ogóle
nie jesteśmy zalogowani do aplikacji.
A więc zadziałała ta reguła else privacy i rules, czyli oczywiście ta.
A tutaj nie włączyliśmy auto buildingu.
Jak więc możemy to zrobić w prosty sposób?
W Babel możesz przejść do AppData i wybrać sobie tutaj opcję Run
as jako konkretny użytkownik.
Czyli możesz się wcielić użytkownika w swojej bazie danych.
Czyli mogę wybrać raz.
Właśnie tutaj John Wick.
W ten sposób zostanę niejako zalogowany do naszej aplikacji.
Tu nam się oczywiście wyświetlił debugger, ale nic się nie stało.
I teraz mogę tutaj wpisać stronę od kliknąć się.
No i wygląda na to, że wszystko jest w porządku.
Jeżeli odświeżę stronę, czyli na nowo pobiorę te wartości z bazy danych,
to jak widzisz zadziałało. Mamy tutaj Johny.
Ten rekord się zmienił. Mogę Ci to udowodnić.
Wracam do bazy danych.
Klikam Edit i first name już zostało zmienione.
Jest to jak widzisz bardzo prosty sposób na to, aby właśnie można było edytować
różne rekordy w naszej bazie danych i na szybko wprowadzać tam
odpowiednie wartości.
Aby sobie to wykorzystamy w przypadku listingu potem porozmawiamy dlaczego.
Natomiast teraz chciałbym, żebyś zapamiętał jak działa auto building.
Do czego się przydaje?
W jaki sposób wyszukiwać rekordy w naszej bazie danych oraz oczywiście jak
ograniczyć dostęp do takiego wyszukiwania i auto buildingu poprzez privacy rules.
Natomiast zanim przejdziemy do kolejnej lekcji, mam jeszcze dla Ciebie pracę
domową i chciałbym, abyś wygenerował klucze dla Map Google, ponieważ będziemy z
nich korzystać już teraz, tak konkretnie w przypadku naszego listingu i dodał je
oczywiście do ustawień swojej aplikacji.
Natomiast musisz to zrobić tylko i wyłącznie wtedy, jeżeli nie zrobiłeś
tego podczas Pierwszego Sprintu.
Mówiłem, że to nie jest obowiązkowe, że możesz przejść przez tę instrukcję
i dodać te klucze, jeżeli chcesz.
Natomiast w tym przypadku już musimy to zrobić.
A więc w pierwszej kolejności przechodzimy pod stronę, którą teraz widzisz na
ekranie, czyli tutaj na stronę Google Cloud.
Musisz tutaj wybrać Start for free albo zalogować się, jeżeli już
tutaj masz jakieś konto Google.
Ja mam tutaj konto z którego korzystam czyli Office, Małpa i te inne info.
Mogę przejść teraz do konsoli.
I dodać tutaj przede wszystkim nowy projekt.
Ja już go sobie utworzyłem.
Jest to projekt o nazwie Stajnia.
Jest dokładnie tak jak nazwa naszej aplikacji.
Jeżeli nie masz tutaj żadnych projektów, to po prostu utwórz jakiś nowy, a kolejno
przejdź tutaj do poprzez to menu do zakładki Płatności
i w tym miejscu będziesz musiał utworzyć swoje pierwsze konto rozliczeniowe.
A polega to po prostu tylko na tym, że podajesz swoje dane oraz
dane karty kredytowej.
Niestety wszystkie te Apis, z których będziemy korzystać są płatne.
Natomiast nie martw się wcale nie oznacza to tego, że Google zaraz będzie
nam zabierał jakieś pieniądze.
Ponieważ każde z tych API, które będziesz musiał uruchomić, posiada
odpowiedni taki darmowy tier.
Jest on z reguły dosyć bogaty i pozwala w całkowitym spokoju i bez
dodatkowych kosztów właśnie pracować z takimi API.
Podczas tworzenia aplikacji informacje o tym jak to wszystko
poustawiać, jakie API po włączać, połączyć, jak wygenerować te klucze i
gdzie je powstawać znajdziesz oczywiście na stronie, którą widzisz teraz
na ekranie monitora.
Link na samym dole.
Możesz sobie z niego korzystać.
Ja oczywiście wszystkie te linki jak pamiętasz dodaję również
do bazy danych portable.
A więc odpal video przygotowane przez Babel, Przejdź przez nie krok po kroku,
wygeneruj klucze, wstaw w odpowiednie miejsca.
A my widzimy się już w kolejnej lekcji.