MVP aplikacji w rekordowym czasie z Bubble: Jak zaimportować dane 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 tej lekcji chciałbym Ci pokazać w jaki sposób możesz wykorzystać dane, które dla
Ciebie przygotowałem w bazie portable.
Porozmawiamy sobie również o tym, na co musisz zwrócić uwagę, gdy sam będziesz
przygotowywał oraz w jaki sposób je później
wyeksportować z tabel i wczytać do tabel.
Zanim jednak zaczniemy jeden bardzo ważny komunikat.
Jest to lekcja czysto poglądowa z tego prostego faktu, że możliwość
zaimportowania danych do bazy w Babel jest dostępna niestety wyłącznie dla planów
płatnych, co oznacza, że jeśli będziesz chciał odwzorować swoje wszystkie
działania, to czeka Cię zmiana planu i w tym celu możesz albo wykorzystać okres
próbny, który zapewnia nam Babel lub skorzystać już z normalnego trybu i
zwyczajnie wykupić interesujący Cię plan.
Ja w takim przypadku zawsze polecam zacząć od najtańszego.
Moim zdaniem jest on idealny do budowy aplikacji i posiada wszystko to, czego
na początek będziesz potrzebował.
Ale zanim zaczniesz szykować swoją kartę kredytową, zastanów się, czy warto.
Sposób, który Cię pokazuję z pewnością przyda Ci się w przyszłości.
Zwłaszcza w sytuacji, gdy będziesz musiał dodać do bazy setki lub tysiące rekordów.
Z reguły bowiem podczas pracy nad aplikacją ilość rekordów
w bazie była znikoma.
Zresztą tak teraz wygląda tabela users, którą dla Ciebie przygotowałem,
więc równie dobrze możesz po prostu przejść ręcznie przez proces rejestracji
briefingu tych użytkowników i skorzystaj z tych rekordów jako wzorca.
W ten sposób nadal będziesz mógł pozostać na planie darmowym i nie będziesz musiał
oczywiście ponosić żadnych dodatkowych kosztów, przynajmniej na ten moment.
Tak więc decyzję pozostawiam już Tobie, ale polecam Ci zostać ze mną, aby wiedzieć
na co warto zwrócić uwagę podczas tworzenia importu danych.
Zaczynamy więc od bazy stable i tu pierwszym ważnym krokiem jest odwzorowanie
kolumn, które dodaliśmy w Babel.
Możemy pominąć na początek te wbudowane, czyli datę utworzenia i
modyfikacji rekordu ID.
Zostanie dla nas oczywiście dodane przez Babel.
Pole Slug, które tutaj widzisz.
Dodałem tylko i wyłącznie dla tego, żebyś mógł skopiować sobie tą wartość, ponieważ
podczas importu i tak nie można go nadpisać.
Zresztą zobaczysz to sam później.
Niemniej jednak chciałbym, aby twoje życie było dużo łatwiejsze.
Wystarczy późniejsza tylko skopiujesz i wkleisz odpowiednie wartości.
Pamiętaj też o tym, aby dokładnie tak samo nazwać kolumny w obu bazach.
Zarówno w Babel jak i War Tables.
To zdecydowanie ułatwi Ci potem cały proces.
Kolejno musimy nieco zmodyfikować typy niektórych kolumn, by całość dało
się odpowiednio zaimportować.
Wróćmy więc tutaj do początku.
I tak po pierwsze nie stosujemy pola Touch ID do wgrywania obrazków.
Niestety przy eksporcie tego pola do pliku CSV, z którego będziemy później korzystać,
arta wrzuca tam nazwę oraz link do obrazka, a dodatkowo taki link
aktywny jest przez około godzinę.
Tak więc potem importowanie takiego obrazka może stanowić bardzo duży problem.
Dlatego też stosujemy tu pole typu URL, gdzie przekazujemy
adres do naszych grafik.
W tym celu możesz oczywiście skorzystać z jakiegoś własnego FTP
dowolnego serwisu hostingowego, a jeśli oczywiście go posiadasz lub co
jest dużo prostsze wykorzystać samo Babel.
W jaki sposób możesz to zrobić?
Otóż w każdym planie Babel daję Ci określoną ilość miejsca
na dane w Twojej aplikacji, czyli właśnie na takie obrazki, filmiki i całą resztę.
Możemy właśnie z tego skorzystać.
Przejdźmy więc do edytora.
Przejdźmy tutaj może na naszą stronę Scratch PAD taką stronę testową.
Na chwilę obecną nic tutaj nie mam.
Mamy tutaj ustawiony layout na RAW. OK.
Dorzućmy sobie tutaj.
Prosty picture loader.
Wrzućmy go tutaj.
Ustawmy na środku.
Nic nie musimy skalować, nic nie musimy robić.
Ponieważ chcecie pokazać w jaki sposób właśnie sobie to ogarnąć w Babel.
Teraz przechodzę do preview.
Oczywiście ja jestem na planie agencyjnych i dlatego musiałem
podać tutaj username password.
OK, pojawiła się strona mamy Picture App Loader.
Klikam tutaj i wgrywam jakiś dowolny obrazek.
Przejdźmy.
Może właśnie tutaj Dostępna Co mamy tutaj za obrazek?
Dajmy jakiś mały, powiedzmy ten może ok.
To jest obrazek, który i tak jest u nas na serwerze.
Ale to nic, wybieram po prostu ten, wgrywam.
Plik został wgrany i teraz możesz po prostu tutaj zamknąć tą stronę albo ją
odświeżyć żeby wgrać kolejny obrazek.
A co się dzieje z takim wgranym obrazkiem?
Otóż ląduje on w zakładce Data tutaj w zakładce File Manager.
Jak widzisz ten obrazek został tutaj wgrany i to co możemy zrobić teraz
to kliknąć tutaj właśnie na tą nazwę.
Label otworzy dla nas taki obrazek.
Ja teraz klikam ponieważ jestem w Arku Command all żeby wyświetlić
sobie URL takiego obrazka.
Ty możesz po prostu skorzystać z URL a, który widzisz w pasku w przeglądarce.
To jest link do Twojego obrazka.
Możesz go sobie teraz skopiować i po prostu wstawić właśnie
tutaj, czyli właśnie pod pole Avatar. Ja tak właśnie zrobiłem.
Jak widzisz mam tutaj powyrywane wszystkie obrazki do blabla i tylko przekazałem te
linki tak żebyś potem mógł sobie to prosty sposób zaimportować.
Kolejnym typem pola, które przy imporcie sprawia problemy jest pole typu checkbox,
więc tu najprościej jest je dodać w pierwszej kolejności w standardowej
wersji, czyli tak jak ja zrobiłem to tutaj.
Mamy tu dwa pola, mamy finisher tzn.
Boarding, mamy is Archive i zwykłe pole CheckBox.
Jeżeli tutaj kliknę to jak widzisz typ ustawiony jest na checkbox.
Oczywiście ja tutaj zaznaczałem te wartości.
Natomiast gdybym to tak zostawił to niestety Babel nie rozpozna tych wartości,
a zwłaszcza ma problem właśnie z tymi pustymi, czyli tymi nie zaznaczonymi.
Więc to co możemy zrobić to kliknąć tutaj prawym przyciskiem myszy,
wybrać Duplicate field.
Tak, chcemy również zduplikowane komórki.
To nam wstawi tutaj kopię tego pola. jak widzisz.
I teraz tak sobie zmieniam tutaj nazwę na add,
żeby mi się nie pokrywała z tym co mamy w Babel,
a tutaj zmieniam na finish to on Boarding to po pierwsze i po drugie typ pola
zmieniam sobie tutaj na single line text.
Wiem, że to jest mało intuicyjne, ale niestety tak musimy to zrobić.
Klikam Save.
Jak widzisz Art table wszędzie zamienił te zaznaczone wartości na text height.
Niestety to też nie do końca zadziała.
Dlatego też trzeba tu zrobić kolejny myk, a mianowicie zmienić tą wartość na jest.
I teraz mogę sobie to tutaj przeciągnąć i wszędzie mam wartości.
Jest.
Ponieważ Archives zawsze będziemy mieli mieć ustawione na
puste, czyli zawsze na nowo, to mogę sobie to zrobić w ten sposób.
100 aplikować.
Tutaj.
Dodać do nazwy datę tak, żeby ta kolumna została tylko i wyłącznie w tabl.
Jako wzorzec tu zmieniamy nazwę na IS Archive
Single Line text i tam gdzie mieliśmy puste wartości, czyli nie zaznaczone
musimy po prostu wpisać ręcznie.
Jest w tym niestety trochę roboty, ale w ten sposób będziemy w stanie zaimportować
odpowiednie wartości w obu tych kolumnach.
Natomiast kolejnym typem kolumn, a w zasadzie typem wartości, które możemy
wykorzystać w Babel są oczywiście Option Set.
Aby odwzorować to działanie portable możemy wykorzystać
pola Select oraz Multi Select.
Ja właśnie tutaj to zrobiłem.
Dla pola User type brałem sobie pole typu Single select.
Jedyne o czym musisz pamiętać to żeby tutaj jako option dodać dokładnie takie
same wartości jakie masz ustawione właśnie dla tego Options w Babel.
Uważaj, żeby nie popełnić tutaj żadnych literówek.
Te nazwy po prostu muszą się zgadzać.
Żeby Babel przy imporcie odpowiednio je odczytał.
To samo robimy tutaj dla pola Multi Select.
W przypadku Babel jest to po prostu Option set, gdzie mamy zaznaczoną listę, czyli
możemy wybrać jak się domyślasz więcej niż jedną wartość.
Tutaj odpowiednikiem jest właśnie to Multi Select.
Tutaj zasada jest ta sama.
Dodajemy właśnie te wszystkie wartości.
Interesuje Cię tylko display, ponieważ właśnie na podstawie tego pola
będzie tam odpowiednio dobrane.
Tak więc nie musimy tutaj dodawać np.
ikonki jaką stosujemy w języku itd.
Nas interesuje dodanie tutaj tylko i wyłącznie poprawnej nazwy.
Ja tutaj to właśnie już zrobiłem, a więc w zasadzie cała ta nasza tabela
users jest już gotowa do wyeksploatowania, a potem do zaimportowania do Babel.
Jak to teraz zrobić?
War Table Przechodzę sobie tutaj do nazwy tego widoku.
klikam tą strzałkę i wybieram download CSV.
Taki plik został dla nas pobrany, a ja go teraz muszę po prostu
zaimportować do Babel.
A więc w tym celu wracamy do edytora.
Przechodzimy sobie tutaj do AppData.
Jesteśmy w tabeli All Users.
Jeżeli przeszedłeś na plan płatny to ta ikonka tutaj Uploaded, a w zasadzie
ten button uploadu będzie teraz aktywny i będziesz mógł właśnie z niego skorzystać.
Ja to mogę teraz zrobić.
Klikam tutaj upload.
Wybieram sobie jaki typ danych chcę zaimportować.
Będzie to user.
Jak rozdzielane są dane?
W przypadku pliku CSV jest to najczęściej przecinek, więc tutaj
nie musimy nic zmieniać.
Teraz muszę wybrać plik, z którego będę chciał zaaplikować takie dane.
Powinienem go mieć tutaj w pobranych rzeczach, a dokładnie jest
to Users Grid View CSV.
Jak widzisz teraz Babel odpowiednio sobie tutaj zmapować te pola.
Dlatego mówiłem, że bardzo ważną zasadą jest, aby nazywać je dokładnie tak samo.
Mamy tutaj właśnie zbawienne pole email first itd.
Nie mamy pola Finisher on Boarding Add.
Dlatego Bubble z automatu wstawił tutaj wartość Ignore dis kolumn i po prostu
ta kolumna zostanie zignorowana.
Niestety jak widzisz to samo zrobił dla Sluga, mimo że pole Slug
mamy w naszej bazie danych.
Ale tym się nie przejmujemy.
Natomiast to co jeszcze musimy zrobić tutaj, ponieważ języki to jest lista, to
musimy wybrać jakie wartości one są rozdzielane.
Jest to po prostu przecinek. I to wszystko.
Jeżeli korzysta z pola Multi Select, to przy imporcie tabel zawsze
zaznaczaj sobie przecinek.
Teraz klikamy Valid Date Data.
Mamy tutaj teraz informację, że nie ma żadnych błędów, a nasze
dane są gotowe do uploadu.
Klikam więc Upload data.
Musimy chwilę poczekać.
I ok. Nasze dane zostały odpowiednio wgrane.
Nie było ich wiele, więc nie zajęło to zbyt wiele czasu.
Klikam Close.
Jak widzisz pojawiła mi się cała lista nowych użytkowników.
Jedyne co będę teraz musiał zrobić to przejść dla każdego z nich do edycji
rekordu i wstawić tutaj odpowiedni slug.
A więc mogę zacząć.
Dla pierwszego dla Sary Mitchell Klikam sobie w retail expand, przechodzę tutaj.
I kopiuję tą wartość i wklejam do pola Slug.
Ja całą resztę uzupełnię między lekcjami.
I Ciebie też do tego zachęcam.
Mogę więc kliknąć save.
I jeszcze jeden bardzo ważny komunikat.
Oczywiście takich przykładowych danych nie musisz przygotowywać w tabel.
Dla mnie jest to po prostu naturalne środowisko pracy i dlatego chciałem Ci
ułatwić zadanie i pokazać właśnie w jaki sposób może to zrobić War Table.
Jak potem wyeksportować te dane?
Jak je potem zaimportować do Babel?
Natomiast w sieci znajdziesz całą masę narzędzi, które pozwolą Ci przygotować w
prosty sposób takie właśnie zestawy danych do importu.
Moim ulubionym jest narzędzie o nazwie Makro.
Zaraz do niego przejdziemy.
A już jest.
Na ekranie Na dole będziesz miał link, z którego będziesz mógł skorzystać,
aby przejść na tą stronę.
A w sieci, a zwłaszcza na YouTube znajdziesz całą masę tutoriali, które
pokażą Ci jak z tego narzędzia skorzystać.
Dzięki niemu będziesz mógł właśnie w taki prosty sposób wygenerować
sobie jak wejdziesz tutaj.
Testowe dane w formacie pliku CSV Johnsona bądź SQL a czy też Excela, a potem właśnie
odpowiednio zaimportować to do Bubel.
A ja dziękuję Ci za uwagę i widzimy się już za chwilę.