MVP aplikacji w rekordowym czasie z Bubble: Import listings z Airtable
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 poprzedniej lekcji wdrożyliśmy już logikę do tworzenia nowego
listingu w naszej aplikacji.
Dlatego też teraz naszym zadaniem będzie oczywiście uzupełnienie naszej bazy
danych o jakieś przykładowe rekordy.
I tu standardowo masz dwa wyjścia.
Możesz to zrobić ręcznie albo właśnie poprzez ten formularz,
który wdrożyliśmy w poprzedniej lekcji.
Albo bezpośrednio na bazie danych, dodając nowe rekordy i wzorując się na bazie,
którą przygotowałem dla Ciebie w R Table.
Natomiast jeżeli korzystasz z planu płatnego Babel, to zadanie będzie dużo
prostsze, ponieważ będziesz mógł wykorzystać plik CSV,
który sobie eksportujemy.
Natomiast w tym przypadku mamy tutaj pewien problem.
Polega on na tym, że nasza baza listingu jest połączona z konkretnym userem.
Jak pamiętasz, jeżeli przejdziemy do listingu Data type Listing
to mamy połączenie z konkretnym userem poprzez tutaj tą kolumnę host.
W jaki sposób to uwzględnić tak aby to odpowiednio zadziałało.
Już Ci pokazuję. Wracamy do R Table.
Jesteśmy w tabeli Users, gdzie ja dodałem nową kolumnę o nazwie Babel Unique ID.
Jak się domyślasz są to po prostu ID tych rekordów, które wcześniej
graliśmy sobie do naszego blabla.
Więc to co teraz będziesz musiał zrobić, to wrócić do Babel,
przejść tutaj do AppData All Users i przejść przez te wszystkie
rekordy, która zainstalowałeś.
Jeżeli to robiłeś wcześniej z mojego pliku CSV, zamierzasz Unique ID, kopiujesz tą
wartość, wracasz do AR table namierza właściwe rekord i
wklejasz to wartość tutaj.
Ja już tutaj to zrobiłem.
W moim przypadku oczywiście.
Natomiast baza którą oczywiście Ty dostaniesz będzie miała tą kolumnę pustą,
ponieważ musisz tu uzupełnić własne ID ze swojej bazy danych.
Dodatkowo będę chciał tę listing, która tutaj dla Ciebie przygotowałem.
Zaraz do nich przejdziemy połączyć tylko z tymi użytkownikami, którzy mają
właśnie user type ustawiony na host.
Jak widzisz, mamy wszystkich tych użytkowników.
Mamy tu zarówno hostów, jak i gestów.
Jak więc sobie ułatwić zadanie?
Otóż R Table możesz dodać kolejny widok.
Robisz to tutaj za pomocą tych opcji.
Jak widzisz, mamy tu kilka całkiem różnych i całkiem przydatnych możliwości widoku.
Jeżeli jesteś ciekawy jak one działają, to oczywiście zapraszam Cię do materiałów
na web lub z jakiś tutoriali w sieci.
Natomiast jeżeli potrzebujesz takiego widoku tabelarycznej
to klikasz tutaj w grid i teraz możesz operować na tych wszystkich danych,
ale dla takiego widoku możesz nie dość, że zastosować filtry, to jeszcze przestawiać
sobie te kolumny, ukrywać te, których nie potrzebujesz itd.
Czyli każdy taki widok możesz dopasować do swoich potrzeb.
Ja tutaj jedyne co zrobiłem to dodałem jeden prosty filtr
mówiący, że user type jest równy host i po prostu tak nazwałem sobie
ten widok poprzez host.
Wystarczy, że klikniesz w to miejsce dwa razy i możesz właśnie
zmienić nazwę takiego widoku.
Natomiast co w sytuacji, gdybyś potrzebował takiego
widoku również w Babel?
A więc wróćmy do edytora i pokażę Ci, jak to zrobić.
Babel.
Niestety nie mamy tych różnych opcji w widoku.
Mamy dostęp tylko do tabelarycznej.
Ale aby dodać sobie taki kolejny widok, czyli np.
wyświetlić albo ukryć jakieś kolumny, albo właśnie zastosować takie filtrowanie,
czyli w przypadku Babel są to po prostu zwykłe konstrukcje, z którymi już mieliśmy
do czynienia, kiedy pokazywałem Ci właśnie jak wyszukiwać rekordy.
Robimy to w ten sposób. Klikamy tutaj.
I teraz jeżeli odznaczał bym sobie tutaj jakieś kolumny to Babel na tej zasadzie
utworzy mi nowy widok jeżeli kliknę save.
Jeżeli natomiast chcę dodać tutaj jakiś konstrukt to robię to w ten sposób.
Tutaj wybieram sobie User type.
Ma być równe host. Klikam Save.
Jak widzisz zgadza się.
Ze wszystkich rekordów, które mieliśmy w bazie danych tutaj w tabeli All users
teraz Babel wyświetla tylko te, które posiadają User type ustawione na host.
Są to właśnie te cztery, które sobie zainwestowałem i ten jeden, który
utworzyliśmy już w pierwszym sprincie.
Jeżeli chcesz usunąć taki widok, to robisz tutaj to klikając na ikonkę.
Takich widoków możesz tworzyć dowolnie wiele i mnie one tylko ułatwiają pracę
i tak naprawdę tylko do tego służą.
Ale wróćmy do portable.
I zastanówmy się teraz, jak połączyć ten listing z naszym userem.
To co musisz zrobić, jeżeli już tutaj dodasz tę Babel Unit do wszystkich
rekordów, a przynajmniej do tych, które mają tutaj właśnie user type ustawione
na host, przechodzisz do listingu.
Jak widzisz, ja już tutaj przygotowałem komplet gotowych listingu, castingów,
które będziesz mógł wykorzystać.
Gracie właśnie do swojej aplikacji, aby wzorować się na nich, jeżeli
będziesz dawał te rekordy ręcznie.
Natomiast to co musimy teraz zrobić, to dodać tutaj nową kolumnę.
Ja ją nazwałem po prostu hosting i typ to linkowanie do tabeli users.
No już o linkowaniu mówiliśmy sobie wcześniej, więc myślę, że
rozumiesz jak to działa.
Natomiast to co możesz zrobić, to ograniczyć tutaj wybór tych rekordów z
tej tabeli, do której linkujesz, tylko do konkretnego widoku,
ponieważ nie chciałbym się musieć zastanawiać, który z tych rekordów
to jest host, a który to jest guest.
Więc w filtrach miałem ustawiłem właśnie to ograniczenie.
I teraz jeżeli będę tutaj linkował to pojawią mi się tylko te rekordy, gdzie
właśnie user type jest ustawione na host.
Jest to super przydatne i bardzo wygodne, więc polecam Ci z tego korzystać.
Skoro dodałeś taką kolumnę to na razie mamy tylko linkowanie jak widzisz.
Natomiast my potrzebujemy do połączenia jakiegoś pola, które właśnie powie szablon
przy imporcie, który to user ma być ustawiony jako host.
Dlatego dodałem sobie tutaj nową kolumnę.
Nazwałem ją host dokładnie tak jak mamy to nazwane właśnie w Babel
i tym razem wykorzystuje pole typu IP.
Jak działa to pole?
Otóż to pole odnosi się do właśnie takiego linku danego pola.
Tutaj to host link.
I w ten sposób właśnie z takiego rekordu możesz wyciągnąć wszystkie te kolumny
jakie masz zdefiniowane w tabeli users, a przynajmniej większość z nich.
Czasami nie działają formuły inne typy pól, natomiast te podstawowe.
Jak widzisz tutaj niemal wszystkie są dostępne, a nas interesuje oczywiście pole
o nazwie Babel unikaty, tak żeby właśnie tutaj nam wyskoczył ten hit.
Ja już to zrobiłem.
Jak widzisz tutaj wyskoczyły mi te hity z tych rekordów hostów
to dałem tutaj te pozostałe kolumny, które będą wymagane przy imporcie.
Tak więc jedyne co nam tutaj pozostaje to wyeksportować sobie taki plik
z tabelą listing właśnie do CSV. Robisz to jak pamiętasz.
Tutaj klikasz download csv i taki plik zostanie wyeksportowane.
Ja już tutaj to zrobiłem wcześniej.
Mogę więc wrócić do Pabla.
Przejść do Only Settings i wybrać Upload.
Wcześniej już sobie wgrywałem taki plik, ale zróbmy to jeszcze raz.
New upload Będzie to oczywiście listing.
Tutaj zostawiasz przecinek. Wybierasz plik.
Jest to list CSV.
Oczywiście ten, który wyeksportować.
U mnie on się tak nazywał jak tak zmieniłem nazwę.
I teraz pakujemy te wszystkie pola wszędzie tam gdzie mamy listę.
Wybieramy przecinek jako separator.
Tutaj Babel nas pyta dla pola host, po czym ma to smakować.
Ma to oczywiście być to Unique id, ponieważ właśnie to pole
tutaj wyciągaliśmy sobie.
Tu mamy listę, tu mamy listę, Tu też mamy listę.
Kolumna Czarnej ma zostać zignorowana i to się zgadza.
Kolumna hosting też ma zostać zignorowana.
Jak widzisz, to też się zgadza.
Możemy więc sprawdzić, czy te dane się zgadzają.
Wszystko jest ok, a więc klikamy upload.
Musimy chwilę poczekać na załadowanie.
Na szczęście tutaj znów nie ma tych rekordów zbyt wiele,
więc zaraz powinno być to gotowe. Zgadza się?
Już jak widzisz te listing zostały dodane.
Mamy uzupełnione te wszystkie pola.
Jeżeli kliknę na jakiś.
Tak, widzisz, mam tutaj powiązanie z właściwym hostem.
Z jednej strony byłoby to naprawdę wszystko, co musiałbyś zrobić w tej
lekcji, natomiast jak się domyślasz zawsze jest jakieś ale,
Ale polega na tym, że teraz rzeczywiście wybraliśmy listing i połączyliśmy
je z właściwym hostem.
Natomiast jeżeli przejdziemy sobie tutaj do data type do user,
to okaże się, że tworzymy takie linkowanie też i w drugą stronę.
Czyli konkretny user ma połączenie z listingu, które tak naprawdę
wystawił w naszej aplikacji.
No i niestety taki import nie pozwoli Ci tego tak połączyć w prosty sposób,
ponieważ musiałbyś tutaj przekazywać właśnie ID tych listingu, natomiast ich
nie posiadasz dopóki ich nie wgrasz.
Więc teraz tak.
Możesz to oczywiście zrobić ręcznie, czyli najeżdżając właściwych hostów, kopiując
sobie ID wybranych listingu, które do nich pisałeś i oczywiście uzupełniając
takie rekordy ręcznie.
Natomiast pytanie brzmi po co, skoro można to zrobić oczywiście dużo prościej.
Jak już Ci pokazuję, to wykorzystamy do tego mega proste workflow,
które zrobi za nas całą robotę.
W tym celu przechodzę sobie na stronę Scratch PAD, czyli na stronę, na
której właśnie dodaję wszystkie klasy.
I teraz wstawiamy tutaj button, który odpali nam nasze workflow.
Niech to będzie tutaj. Nie bawimy się w żadne sterowanie.
To jest po prostu taki utility, tylko wewnętrznie dla nas nazwijmy to listing.
I tutaj dajmy jeszcze nazwę lifting.
BTN.
I teraz dodajmy workflow.
I co to workflow musi zrobić?
Otóż musi zmienić nie jeden rekord, jak to robiliśmy w poprzedniej lekcji, ale wiele
rekordów w naszej bazie danych, a mianowicie kilka tych rekordów hostów,
które powinny zostać połączone właśnie odpowiednimi instynktami.
A więc zamiast data I make changes to find tym razem wybieramy Make changes.
2 Lista things czyli zmieniamy listę, a więc więcej niż jeden element.
Jaki typ zmieniamy?
Oczywiście user.
Jako listę użytkowników chcemy zmienić oczywiście tych.
Musimy ich wyszukać User, którzy mają user type ustawione na host,
ponieważ tylko do tych wybraliśmy odpowiedni listing.
OK, teraz powiedzieliśmy super, co chcemy zmienić?
Chcemy zmienić kilka rekordów użytkowników.
A jakie pole chcemy tutaj zmienić?
Bo oczywiście pole Listing.
To ma być równe, czyli set list.
No właśnie, jak sobie teraz namierzyć tą listę,
skoro tutaj poszukiwaliśmy użytkowników?
Jak się domyślasz, tutaj musimy wyszukać po prostu listingu,
A więc znów była search for listing.
Jak to teraz ograniczyć?
Super.
Prosto, ponieważ w tym przypadku host musi być równy temu użytkownikowi,
który został tutaj namierzony.
Ale to super łatwe, bo zobacz, mamy tutaj opcję this user, czyli właśnie
ten konkretny użytkownik.
I teraz panel sobie namierzy listing, gdzie host to właśnie ten użytkownik i te
listing przypisze do niego właśnie tutaj.
Natomiast zanim to odpalimy, to jeszcze jedna bardzo ważna uwaga.
Jeżeli będziesz tworzył takie wpisy tak jak Ci pokazywałem i radziłem,
od razu tworzysz sobie privacy rules.
No to może się okazać, że odpalisz to z poziomu niewłaściwego użytkownika.
Te private się gdzieś tam zaskoczą, no i nie do końca zadziała to tak jak powinno.
Dlatego też, skoro korzystamy tutaj zawsze właśnie z tego konta admina, który może
robić wszystko, jest takim po prostu Bogiem w naszej aplikacji,
to to co ja zawsze robię, to tworzę sobie właśnie taki record admina,
czyli przychodzę do użytkowników i entry user type admin email.
Jakiś przykładowy?
Nie musimy się martwić o uzupełnianie całej reszty pól.
On ma nam służyć tylko do uruchamiania workflow na nasze wewnętrzne potrzeby.
Klikam Create.
I teraz musimy uruchomić aplikację będąc takim adminem.
Czyli klikam AS admin.
Otworzy mi się strona Scratch Padu.
Musimy chwilkę poczekać.
OK, strona się odpaliła, klikam w nasz button workflow się wykonuje
i zerknijmy czy to rzeczywiście zadziałało.
Wróćmy sobie właśnie tutaj do tych userów, a w zasadzie tutaj nawet
jesteśmy i klikniemy np. na tym pierwszy.
Jak widzisz mamy tutaj połączenie w drugą stronę, czyli do użytkownika.
Napisaliśmy przynależące do niego listing.
Jak widzisz, było z tym trochę zabawy, natomiast nie jest to
jakoś mega skomplikowane.
Jeżeli opanujesz właśnie takie proste workflow, to zaoszczędzisz sobie masę
czasu zamiast właśnie robić to ręcznie.
Zrobi to za Ciebie Radek.
Kliknięcie w jeden button i workflow, które wdrożyliśmy tak naprawdę
w ciągu mniej niż minuty.
Tak więc ja dziękuję Ci za uwagę.
Opcje tego, w jaki sposób dodasz te rekordy pozostawiam już Tobie, a my
widzimy się już w kolejnej lekcji.