MVP aplikacji w rekordowym czasie z Bubble: Pobieranie i wyświetlanie danych
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 przyszedł czas, abyśmy nauczyli się pobierać i wyświetlać
dynamiczne dane użytkownika z naszej bazy.
A więc w pierwszej kolejności musimy się zastanowić, gdzie takie
dane chcemy wyświetlać.
Naszym pierwszym punktem jest strona Dashboard.
Przejdźmy teraz do niej.
Jak pamiętasz, wyświetlamy tutaj zarówno avatar użytkownika, jak
i jego imię i nazwisko.
Natomiast sama strona Dashboard jest uniwersalna, ponieważ wyświetlamy tutaj
różne elementy, więc tak naprawdę jedyne miejsce gdzie chcemy przekazywać
te dane pobrane z bazy danych.
Jeżeli chodzi o użytkownika to tylko ta sekcja.
A więc jak to zrobić?
Ponieważ w dashboard gdzie pracuje Current User, czyli bieżący zalogowany
użytkownik, jak się domyślasz możemy się odnieść dokładnie do tego właśnie elementu
w naszej bazie danych, czyli tutaj zamiast tej wartości na sztywno
wybieram Insert Dynamic Data.
Odnoszę się do Current User i wybieram po prostu avatar.
Zostawiam tutaj skalę i tylko zmieniam zaokrąglenie na 500,
ponieważ wszędzie mamy takie okrągłe obrazki, więc chcę sobie to dostosować.
To samo możemy zrobić teraz w tym miejscu.
Ponieważ imię i nazwisko to dwie osobne wartości, to musimy to
zrobić w ten sposób.
Current user first name Klikam sobie tutaj spacja.
Parent user last name.
OK, jeżeli chodzi o dashboard to tu mamy tę sekcję już gotową.
Natomiast jak pamiętasz, jeżeli przejdziemy do podglądu
naszej aplikacji, odświeżamy.
Zaloguj się np.
jako Demo Guest.
Obrazek się zmienił.
Mamy tutaj Jessica Simpson.
Te dane są pobrane bezpośrednio z rekordu użytkownika.
Mogę Ci to zresztą udowodnić przechodząc do bazy.
Otwierając ten rekord mamy taki awatar i Jessica Simpson tutaj
jako imię i nazwisko.
Natomiast tak wróćmy do Dashboard i klikając w to rozwijane menu
możemy sobie zobaczyć swój profil.
Natomiast jak to w zasadzie działa?
Trochę podobnie tak jak strona listingu.
Czyli mamy stronę, na której chcemy wyświetlić określony typ danych.
Na chwilę obecną jeszcze tego nie robimy.
Natomiast to jaki typ danych chcemy tam wyświetlić, a w zasadzie jaki typ danych
chcemy tam przekazać zależy od tego, w którym miejscu klikniemy.
Jeżeli kliknę sobie tutaj, to chcę wyświetlić swój własny profil,
czyli profil bieżącego użytkownika.
Natomiast w niektórych miejscach będziemy mieć właśnie listing i
będziemy mieć informacje o gościach, o wsadzie, o postach, którzy taki listing
dodali i jeżeli klikniemy tam w ikonkę takiego hosta to będziemy
chcieli wyświetlić jego profil.
Jak to teraz zrobić?
No skoro powiedziałem, że coś podobnego robiliśmy przy listingu,
to sprawdźmy jak to tam działało.
A więc wracam do edytora.
Zacznijmy może od właśnie listy kart, ponieważ po kliknięciu właśnie w taką
kartę listingu kierowaliśmy użytkownika na odpowiednią stronę.
A więc przechodzę do workflow i to co robiliśmy tutaj to właśnie
kodu page listing, czyli nasza strona dynamiczna z listingu.
Natomiast ponieważ pracowaliśmy zawsze setem, powiedziałem Ci, że
to zadanie troszkę było utrudnione.
Chcieliśmy tutaj wstawić parametr L do niego, przekazać bieżący listing i
dopiero na stronie listingu te dane z parametru pobrać.
Jak to robiliśmy? A więc wracamy na stronę listingu.
W tym przypadku odnosiliśmy się tutaj do grupy Page
Wrapper i tu pobraliśmy sobie dane właśnie z takiego parametru
i potem te wszystkie dynamiczne informacje przekazywaliśmy dalej tutaj na
naszą stronę, wyświetlając np.
nazwę takiego listingu miasto i tak dalej, i tak dalej.
Natomiast w przypadku pracy z bazą danych ten proces jest dla nas
nieco bardziej uproszczony.
Już Ci pokazuję jak to działa.
Przechodzę na stronę profile i tym razem nie odnoszę się do page
wrapper, tylko do całej strony, czyli do strony profilowego.
I tutaj dla niej ustawiam type of content.
Proszę zerknij tutaj na to miejsce.
Na razie mamy tylko jeden błąd ten, który odnosi się do tego, że
nie podaliśmy kluczy do mapki Google.
Zajmiemy się tym później.
Natomiast zobacz co się stanie, jeżeli teraz wezmę tutaj typeof content user.
Teoretycznie nic się nie zmieniło, ale wskoczył nam tu jeden błąd.
Dlaczego? Zaraz Ci wytłumaczę.
Natomiast co my tutaj zrobiliśmy?
Powiedzieliśmy, że cała strona ma tutaj mieć określony typ danych.
W tym przypadku będzie to user.
Na chwilę obecną nie mam innego kandydata typów.
A więc teraz będziemy musieli te dane tutaj jakoś przekazywać.
I znów chyba będzie to klient user albo określony inny user, czyli inny
rekord z naszej bazy danych.
Kliknijcie tutaj. I co się dzieje?
Mamy tutaj link View profile i mamy informację Data to sent,
że czegoś nie wypełniliśmy.
Przejdźmy sobie tutaj.
Jak widzisz jest to mega przydatne narzędzie, ponieważ Babel od razu
przekierował nas tam, gdzie powinniśmy naprawić nasz błąd.
A więc jesteśmy Dashboard Dashboard here.
Jesteśmy tutaj. W tym menu mogę Ci je pokazać.
Gdzie był View Profil i gdzie kierowaliśmy użytkownika na stronę profilowe?
A ponieważ ustawiliśmy teraz tam Data type dla całej strony, to Babel wymaga.
przesłali jakieś dane.
W tym przypadku, jak Ci mówiłem, wyświetlamy profil swój własny,
czyli bieżącego użytkownika.
A więc wstawiam tu tylko parent user.
I to tak naprawdę wszystko, co musieliśmy zrobić.
Nie odnosimy się do parametrów, tylko do tego pola data, tu send.
Skoro to zrobiliśmy, przekazaliśmy tam odpowiedni rekord,
to zobaczmy jak to zadziała.
Odświeżamy.
Klikam tutaj w profil i cóż, teoretycznie nic się nie zmieniło.
Natomiast zobacz, co się stanie, jeżeli wyświetlimy sobie pasek adresu URL.
Na samym końcu pojawił mi się tutaj napis Jessica Simpson.
Skąd się to wzięło? Skąd się wzięła?
Właśnie tak jest Simpson tutaj.
Otóż z tego prostego powodu, że Babel wyświetla określony rekord z bazy danych,
w tym przypadku właśnie rekord Jessiki.
I działa to w ten sposób.
Przejdźmy tutaj do bazy danych.
Do tego rekordu, jeżeli nie ustawisz pola Slack, jeżeli bym to usunął,
skopiował i usunął tabel na końcu ID takiego rekordu, mogła Ci to udowodnić.
Klikam Save.
Jak widzisz zniknęła nam tutaj Jessica Simpson.
W naszym pasku adresu URL a pojawił się właśnie unikalny ID takiego rekordu.
Dlatego też właśnie stosowanie slasha jest bardzo przydatne.
W ten sposób właśnie mamy taki bardzo ładny i przyjazny SEO pasek.
Gdyby ktoś właśnie chciał sobie zapisać taki rekord, to mamy tutaj właśnie
wyświetlamy Dżesika Simpson, a nie taki bezsensowny ID, które nic nikomu nie mówi.
Natomiast jak taki Slack w ogóle ustawić?
Znów jest to super proste, ponieważ Babel przygotował dla nas właściwą akcję.
Klikam save, przywróciłem sobie ten Slack, który miałem.
Natomiast teraz muszę przejść do naszej strony on boarding i tam, gdzie
aktualizujemy ten rekord do naszego workflow.
Może zmieńmy jego kolor na blue, żeby było wiadomo, że on coś wykonuje.
A więc tutaj użytkownik przekazał nam imię i nazwisko.
My sobie właśnie zaktualizowaliśmy taki rekord i teraz mogę
wybrać tutaj akcją Account, a w zasadzie wpisać nawet set Asics Slack.
Jaką rzecz chcę zmienić?
Chcę zmienić rekord Current User.
Co to ma być? Slack?
Slack? Tutaj musisz przekazać jakąś wartość.
Ja mogę wybrać tutaj current user, bo na tym momencie już
mamy jego imię i nazwisko, a może nawet on, jeśli się nie odniesie się do pola.
Czyli first name Input pot value.
Spacja.
Oczywiście nie tutaj, tylko muszę sobie kliknąć tutaj.
Mogę nawet wstawić od razu tutaj myślnik, a nie spację i będzie to
last name input value.
W ten sposób będziesz w stanie utworzyć slack.
W naszym przypadku będzie to po prostu imię i nazwisko.
Tutaj zamiast spacji będzie myślnik.
Żeby ten URL odpowiednio zadziałał, Babel zadba właśnie o to,
aby to zamienić na odpowiednią wartość i w ten sposób utworzyć dla nas ten slack.
Jest to, jak widzisz znów super proste, natomiast ma jedną zasadniczą wadę
w ten sposób zadziała się tylko i wyłącznie wtedy, kiedy posługujesz
się angielskimi nazwami.
Jeżeli radziłbym tutaj jakieś nazwisko polskie z polskimi znakami diakrytycznych,
to niestety już tak łatwo nie będzie.
Natomiast chciałbym to zostawić na później.
Albo po prostu porozmawiamy sobie o tym np.
na konsultacjach, ponieważ jest to bardzo ciekawy temat, a ja Tobie pozostawiam
to na chwilę obecną do rozważenia.
Zastanów się, w jaki sposób mógłbyś właśnie tutaj pozbyć
się tych znaków diakrytycznych?
A my do tego jeszcze wrócimy, jak tylko będzie na to czas.
Zostawiamy to na razie w ten sposób utworzyliśmy slang, żeby
nie pojawiał się ten hit.
A więc wracamy na stronę profilowe.
Przechodzimy do designu i teraz musimy pobrać odpowiednie, dynamiczne wartości.
Zastanówmy się, w którym miejscu i co musimy zmienić.
Mamy tutaj awatar, mamy imię i nazwisko. Mamy ten tekst.
Mamy na razie Professional host.
Ja będę chciał go zmienić, Jeżeli.
Typ konta, który będziemy tutaj wyświetlać, czyli ten rekord użytkownika,
który przekazaliśmy będzie miał user ticket ustawione na guest.
Zmienimy sobie tą wartość to na razie pomijamy.
Tu mamy języki, które musimy przekazać.
To mamy rok utworzenia takiego użytkownika, czyli go
dołączenia do naszego serwisu.
I tutaj mamy jeszcze sekcja About me, a więc przystąpimy do pracy.
Skoro ustawiliśmy typ danych dla całej strony, to możemy teraz w prosty sposób
się do tego odnieść poprzez Current Page.
I w tym przypadku jest to user, ponieważ właśnie user ustawiliśmy tutaj jako ten
typowy content.
Teraz wyciągam sobie tutaj avatar.
Zmieniam na i skile i teraz mogę sobie to skopiować i to samo zrobić tutaj.
Czyli będzie to jak się domyślasz First name spacja.
Last name.
Tu dodajemy odpowiedni warunek Professional Host.
My natomiast przechodzimy tutaj.
I mówimy, że current page user user type
i guest to chce wtedy zmienić ten tekst na
very fit user.
Teraz przechodzimy tutaj.
Musimy wyciągnąć sobie te języki, które wybrał nasz użytkownik,
czyli Karen Page User Kolumna.
I to nam da.
Jeżeli sobie tutaj kliknę Lista języków, czyli taką tabelę z tymi wartościami,
które użytkownik to wybrał.
Natomiast ja nie chcę tabeli, ja chcę tutaj zwykły tekst, po prostu język,
przecinek, język, przecinek, język itd.
Mogę to osiągnąć poprzez tutaj tą opcję Format txt czyli sformatuj to jako zwykły
tekst i oddziel te poszczególne wartości w tej tabeli po prostu przecinkiem.
Możesz tu wstawić myślnik czy cokolwiek innego co uzna za stosowne.
U nas był przecinek, więc tej wersji się trzymajmy.
Teraz zmieniamy tutaj jeszcze rok, czyli odnosimy się do parent page user.
Creation Date.
I teraz muszę sobie to odpowiednio sformatować.
Klikam właśnie format AS i w moim przypadku wybieram sobie custom,
ponieważ jedyne co chcę wyświetlić to rok.
Mogę to osiągnąć wpisując tutaj cztery razy Y.
Jak widzisz Mabon od razu pokazał mi jak to będzie sformatowane
to mamy gotowe to mamy gotowe.
Została nam jeszcze tutaj do akademika sekcja.
A więc creed page, user about me.
I to w zasadzie wszystko.
Wróćmy. Odświeżamy.
Mamy czas.
Mike Simpson zmienił ten tekst na very fit user.
Mamy rok dołączenia, natomiast tutaj mamy problem.
Aha, już wiem dlaczego, ponieważ nie powiedziałem, jakie wartości
chcę tam wyświetlać.
Więc wróćmy sobie tutaj.
Co chcemy tutaj wyświetlić?
List od Languages Display.
Po prostu chcę wartości display i tam wyświetlać przedzielone przecinkiem.
Teraz powinno nam to zadziałać.
Mamy języki, które wybrała sobie Jessica.
Mamy datę dołączenia.
Mamy tutaj tę sekcję About. mi.
Do reszty wrócimy później.
Natomiast mamy tutaj też ikonkę, która będzie pozwalała Jessice edytować
swój profil oraz tutaj ten button, który pozwoli jej usunąć, a w
zasadzie zarchiwizować konto.
Natomiast zastanówmy się, czy te elementy powinny wyświetlać się tutaj zawsze.
Oczywiście odpowiedź brzmi nie.
Chciałbym, aby one się wyświetlały tylko wtedy, kiedy
profil, który tutaj wyświetlamy, czyli ten rekord z bazy danych user
jest równy naszemu bieżącemu użytkownikowi, ponieważ tylko bieżący
użytkownik może edytować lub usunąć swój profil.
Nie chciałbym, żeby Dżesika kliknęła np.
w ikonkę jakiegoś hosta np.
tutaj w Sary i była w stanie zedytować jej profil czy jej usunąć konta.
A więc musimy jeszcze o to zadbać.
To co robimy, to ukrywamy taką ikonkę.
Po załadowaniu się strony collapse on hidden.
I tylko wtedy, kiedy current page user jest równa current user,
czyli użytkownik wyświetla swój własny profil.
Ten element jest widoczny i to samo możemy zrobić dla całej tej grupy.
Zmień jej nazwę Edit Reality Group.
To Labs człon hidden.
Ukrywamy element i pokazujemy go właśnie tylko pod tym warunkiem.
Odświeżamy.
Powinno mi się tutaj to nic nie zmienić.
To jest profil Jessiki, więc może edytować i może usunąć swój profil.
Ale tymi akcjami zajmiemy się już za moment.
A ja dziękuję Ci za uwagę.