Cześć, z tej strony Kamil Tarczyński. Witam was bardzo serdecznie w naszym kolejnym odcinku podcastu Just No Code. Dzisiaj porozmawiamy sobie o platformach, o których mówimy tak wiele. Zrobimy sobie małą krótką serię, w których wprowadzimy was właśnie w to jak wyglądają platformy, o których mówimy, jak można z nich korzystać, jakie funkcje oferują. Będą to takie pigułki, wiedzy na temat każdej z poszczególnych platform. Seria będzie zawierała odcinki o platformach takich jak Bubble, Webflow, Xano oraz Flutterflow. Dzięki temu dowiemy się, jak de facto działają, jakie funkcje oferują i co możemy w nich zbudować oraz jak po prostu wygląda praca bezpośrednio z nimi. Nie przedłużając dzisiejszy odcinek będzie o platformie Bubble.io, więc zapraszam Was bardzo serdecznie. Jak widzicie jesteśmy już w naszym edytorze.
Poznaj Platformę Bubble.io
nie pokażę wam samego dashboardu Bubbla, ponieważ tam nie ma za wiele do pokazywania, to po pierwsze, a po drugie oczywiście mamy tam projekty klientów, którymi nie do końca możemy się publicznie chwalić i je wszystkim pokazywać. Stąd po prostu pokazuję już wam bezpośrednio jak wygląda platforma w środku jak wygląda sam edyktor bo to też jest tak de facto serce tej aplikacji. To tutaj dzieje się cała magia, to tutaj de facto tworzymy wszystkie aplikacje, i tak dalej i tak dalej, więc zapraszam was tutaj. Jak widzicie strona, na której jesteśmy to jest taka biała kartka papieru, na którą możemy sobie zacząć nanosić nasze różne elementy. I tu jest nasz edytor.
Ogólny Opis Edytora
w którym właśnie budujemy interfejs aplikacji. Jak widzicie po lewej stronie tutaj mamy różne zakładki. Obecnie jesteśmy właśnie w zakładce design, gdzie właśnie tworzymy cały design naszej aplikacji. Mamy również zakładkę workflow, w której tworzymy workflowy. Mamy zakładkę data, w której odpowiadamy właśnie, zarządzamy całą naszą bazą danych. Mamy zakładkę style, z której definiujemy sobie style wszystkich elementów, które znajdują się właśnie w designie. Mamy zakładkę plugins za pomocą których tych pluginów możemy sobie dodawać różne kolejne funkcjonalności, rozszerzać tą podstawową funkcjonalność Bubble. Mamy zakładkę settings, z której możemy zmieniać ustawienia dotyczące naszej platformy. Jak również mamy zakładkę logs, gdzie przeglądamy sobie to jak nasz serwer jest używany, logi tego serwera, czy możemy sobie podejrzeć Scheduler, czyli to miejsce, w którym cała praca, jakieś zadania, które są zaschedulowane na kiedyś później, zaplanowane na kiedyś później, to jakie to są zadania, ile ich jest itd. itd. Zacznijmy sobie od tego edytora.
Nie będę tutaj oczywiście wchodził dokładnie we wszystkie funkcjonalności Bubbla, bo od tego mamy nasze darmowe szkolenie, z którym możecie się zapoznać na naszej stronie, na stronie naszej akademii AppToYou.pl Tam jest takie trzygodzinne darmowe szkolenie z Bubbla, które właśnie robi takie wprowadzenie stworzenia pierwszej aplikacji do zarządzania zadaniami, więc tam wchodzimy to głębiej. Dzisiaj chcę wam pokazać po prostu jak ta platforma funkcjonuje. Więc jak widzicie tutaj mamy tą właśnie naszą białą kartkę papieru, gdzie możemy sobie podwójnie klikając zmienić parę ustawień dotyczących naszej strony, tak jak page title, czy to jest jakiś ma przyjmują na type of content, do tego sobie zaraz dojdziemy. Możemy nadać jej jakiś styl czy jakieś atrybuty, no i jakieś różne ustawienia na SEO.
Projektowanie i Workflow
Możemy też zarządzać jej layoutem, czyli jaki ten kontener ma być layout, czy to będzie kolumna, czy to będzie rząd. Dla tych, którzy projektują aplikacje, znają się na CSS, wiedzą co to jest, że to po prostu odpowiada za to, jak elementy się układają, czy one się układają w rzędzie czy w kolumnie. Jest to wzięte z CSS, ponieważ cały bubble jest oparty na CSS Grid. Po prostu tutaj nakładając kolejne elementy tworzymy kod HTML.css pod spodem.
Tutaj nie będę też dokładnie w to wchodził. No i mamy tutaj różne kondycjonale czyli warunkowe zachowania, warunkowe formatowanie czy warunkowe wyświetlanie czy tego typu rzeczy dotyczące poszczególnych elementów. No i jak widzicie tutaj również po lewej mamy całe menu gdzie możemy właśnie te różne elementy wizualne które odpowiadają właśnie za wizualizację tych elementów możemy sobie tutaj do naszej platformy nanosić. Chcę tutaj dodać sobie jakiś header, no to biorę sobie grupę, bo to jest grupa to jest po prostu jakiś div. Znowu to jest wiedza dla tych, którzy korzystają sobie na co dzień programuje jakieś front-endy i tak dalej. No i jak widzicie mamy pierwszy div. Mogę powiedzieć, żeby on, pierwszy element na naszej stronie, chcę powiedzieć, żeby on miał jakiś kolor inny.
Więc po prostu sobie zmieniam. Wyklikuję tutaj ten interfejs. I to na co chciałbym tutaj głównie zwrócić uwagę, to to zobaczcie jak to łatwo, jak łatwo ten ten cały interfejs możemy sobie zbudować. Bo jak widzicie, tworzę sobie kolejne elementy, przeciągam po prostu na stronę, dostosowuję je sobie tutaj w edytorze, od razu też wszystko widzę, jak to wszystko wygląda, dzięki temu mam dużo lepszą kontrolę nad tym, jak będzie wyglądała de facto moja aplikacja, co się będzie w niej działo, gdzie jaki element będzie widoczny, jak one będą ułożone na całej stronie. W tradycyjnym podejściu wygląda to zupełnie inaczej, musimy najpierw napisać kod, później ten kod odpalić, żeby zobaczyć jak to dokładnie będzie wyglądało.
Natomiast tak jak widzicie tutaj ja sobie powoli wszystko klikam, nanoszę kolejne elementy na stronę no i widzę po prostu od razu jak one wyglądają, jak one się tutaj prezentują. Jak widzicie tworzę sobie teraz małą jakąś welcome page. powiedzmy żeby to było bardzo dużą czcionką tutaj naniesione. Chciałbym oczywiście żeby było dostosowane szerokość do tego co ten element zawiera. Welcome page. No i tutaj sobie dodajmy jakiś button, który nam pozwoli odpalić jakiś pierwszy workflow. Nazwijmy go start. Tak.
Zarządzanie Środowiskiem Deweloperskim i Produkcyjnym
Bubble, jak każde prawdziwe narzędzie, posiada środowisko deweloperskie oraz produkcyjne, które są od siebie odseparowane. To środowisko deweloperskie może mieć różne swoje wersje, tzw. branche. Dzięki nim możemy rozwijać kilka funkcjonalności naraz, później je łączyć (merge'ować) do jednego środowiska na testy, a później z tego środowiska dopiero wpuszczać je do środowiska produkcyjnego. Ta struktura pozwala nam zarządzać całym procesem produkcyjnym aplikacji, jej całym cyklem życia, tak aby robić to w sposób bezpieczny i efektywny. Zarządzanie wersjami i branchemi odbywa się na poziomie Bubble, gdzie podzielone są one na różne części. Dostępna jest również cała historia zmian i mergów.
Zarządzanie Stylami i Pluginami
Następną dostępną zakładką jest "Styles". Każdy z elementów, takich jak przyciski, grupy, pola wejściowe itd., może przyjmować różne style, które powtarzają się w całej aplikacji. Dzięki temu, zamiast za każdym razem definiować wygląd każdego elementu, Bubble pozwala na tworzenie styli elementów, podobnie jak w CSS, które potem są przypinane bezpośrednio do elementów. Pozwala to zarządzać wyglądem aplikacji z jednego centralnego miejsca, zamiast na każdym pojedynczym elemencie, co oszczędza mnóstwo czasu.
Mamy również zakładkę "Plugins", gdzie możemy dodawać i rozszerzać funkcjonalności Bubble o kolejne możliwości. Na przykład w tej aplikacji mam dodany "API Connector", który pozwala na integrację środowiska Bubble z różnymi dostawcami usług trzecich poprzez ich API. Możemy również dodawać funkcjonalności, które zostały już opracowane przez innych deweloperów, jak na przykład plugin Stripe'a, stworzony przez sam Bubble. Dzięki temu można bezpośrednio w aplikacji korzystać ze Stripe'a, bez konieczności jego indywidualnej implementacji. Po zintegrowaniu takiego pluginu, w zakładce "Workflows" dostępne są wszystkie akcje związane ze Stripe'em, które można bezpośrednio wykorzystać w aplikacji, na przykład do tworzenia faktur dla użytkowników.
Zarządzanie Ustawieniami Aplikacji
Następnie mamy settingsy, gdzie zarządzamy tym na jakim planie jest nasza aplikacja. Mamy tutaj informacje na temat nazwy naszej aplikacji, tego czy jest ona na przykład schowana za jakimś hasłem. Różne ustawienia dotyczące na przykład favikonów, różnych tego ustawień, apki dla Google mapy, Google geocode, różne tam
Wielojęzyczność i SEO Bubble
Multilanguage, gdzie możemy w Bubble bezpośrednio zaimplementować sobie również multilanguage, to tutaj będziemy definiowali, jak on ma być tłumaczony, jak on ma funkcjonować dokładnie, jak chcemy dane frazy w danym języku przetłumaczyć. Mamy różne ustawienia dotyczące SEO, całości aplikacji, jak również poszczególnych stron. Ustawienia dotyczące API.
Tworzenie Backendu i Endpointów
Bubble jako platforma pozwala nam tworzyć frontend, ale również pozwala nam tworzyć backend, pozwala nam tworzyć upendpointy, które będą wystawione na przykład jako publiczne endpointy, które będą wymagały autoryzacji już lub nie. To będzie oczywiście zależało od nas. Możemy sobie je włączyć tutaj. Wtedy mamy link z naszą domeną. Oczywiście tej domeny nie mamy podpiętej, więc ten link jest generyczny.
Zarządzanie Data API
Dzięki temu z tego poziomu będziemy mogli tworzyć backend workflowy, które będą dostępne bezpośrednio właśnie pod tym linkiem. Możemy mówić czy to jest post, czy to jest get, co ma się tam dokładnie zadziać. Ale mamy również data API, czyli tutaj już mamy wszystkie metody, gdzie jeżeli mamy stworzony jakiś datatype, to możemy również poprzez ten data API nim zarządzać. Gety, posty, patchy, update'y, delay'y, tego typu wszystkie metody będziemy wtedy mogli na tych naszych zaznaczonych, jak widzicie, możemy sobie je zaznaczyć. Enable data API, mamy oczywiście te informacje o privacy warningu.
Kolaboracja i Integracja z Zewnętrznymi Bazami Danych
Na przykład możemy za pomocą data API zarządzać obiektami z data type pod tytułem kontakt. Więc jak widzicie tych ustawień jest sporo. Tutaj możemy dodawać innych kolaboratorów, naszych współpracowników, którzy również będą mieli możliwość modyfikacji tej aplikacji. Możemy łączyć ze sobą w jedno środowisko kilka aplikacji. Mamy również możliwość podłączania bezpośrednio się do MS SQL, czy do jakichś po prostu SQL-i różnych, nie tylko MS SQL. No i tutaj możemy również zarządzać featureami, czy nowymi wersjami Bubble. Bo jak wiecie oczywiście, Bubble cały czas jest update'owany,
Zarządzanie Wersjami i Aktualizacjami
nowe właściwości nowe wersje tej platformy więc tutaj możemy sobie tym zarządzać bo oczywiście dużym zagrożeniem byłoby to że bubble wprowadza jakieś nowe funkcje które mogą być niekompatybilne z naszą aplikacją a my tego nie przetestowaliśmy zostało to automatycznie wdrożone popsuło to naszą aplikację tak nie jest my tutaj mamy nad tym pełną kontrolę bubble mówi ok tu jest nowa wersja sprawdź ją sobie możesz się zagrajdować przetestować czy to wszystko działa co byś chciał żeby działało i wtedy dopiero możesz to
Zarządzanie Zasobami i Logami
na produkcję. Więc jak widzicie możliwość zarządzania tymi aplikacjami jest naprawdę bardzo szeroka, kompleksowa i pozwala na bardzo, bardzo wiele. No i ostatnia zakładka, last but not least na pewno. To są logi, gdzie widzimy zużycie zasobów naszej aplikacji, co de facto te zasoby zużywa, dzięki czemu jesteśmy w stanie optymalizować z biegiem czasu naszą aplikację, bo widzimy jakie rzeczy zabierają najwięcej zasobów naszemu serwerowi, co dokładnie się tam dzieje, kiedy, jak, więc będziemy mogli sobie to optymalizować, to oczywiście w tej aplikacji za wiele nie zadziała jak widzicie, więc nie ma tutaj czego analizować, ale taką możliwość mamy.
Analiza i Optymalizacja Aplikacji
Mamy również serwer logi, czyli możemy sobie podejrzeć, co się w naszych środowiskach działo, czy w tym deweloperskim, czy tym liveowym Weźmy sobie np. 10 minutes ago co się działo w tym zakresie czasu nic się nie działo, tutaj możemy sobie zaznaczyć, co byśmy chcieli widzieć, jakiego typu rzeczy widzicie, tego jest naprawdę sporo te logi są bardzo dokładne i pokazują nam naprawdę chyba wszystko, jak sobie wszystko
Nie było żadnej serwerowej akcji coś tam sobie kliknąłem, ale nie miało to za bardzo wpływu. No i oczywiście mamy scheduler, w którym również niczego nie będzie, bo żadnych workflowów nie schedulowaliśmy, żeby się wykonało w jakimś późniejszym czasie, tylko to wszystko działo się na bieżąco. Więc w ten sposób de facto możemy zarządzać naszą aplikacją, możemy tutaj tworzyć sobie kolejne strony, bo oczywiście startowo mamy index, strony do resetu hasła, które są zawsze w naszej aplikacji. Możemy sobie dodawać oczywiście kolejne, jeżeli mamy taką potrzebę. No i de facto, jak jesteśmy gotowi, to to co robimy, to klikamy sobie tutaj, klikamy Deploy to Live. Klikamy Continue. Aha, mamy jakiś Issues, więc z Issues nie możemy puszczać naszej aplikacji Live. Bubble na to nie pozwala. Widzicie, pozbyłem się już Issues. Więc klikam sobie Deploy to Live. Test Deploy. No i w tym momencie klikam confirm i mamy opublikowaną pierwszą aplikację pod takim a nie innym linkiem.
Podsumowanie użytkowania Bubble.io
Więc jak widzicie korzystanie z Bubbla jest bardzo ciekawe, bardzo kompleksowe. Ta platforma pozwala nam naprawdę robić bardzo, bardzo wiele rzeczy. Więc mam nadzieję, że dzięki temu filmowi macie jakiś ogląd, da wam to jakiś po prostu ogląd na to jak ta platforma funkcjonuje, jak z niej korzystać, co można w niej zrobić. I tutaj właśnie a propos co można w niej zrobić. Jak widzicie jest to na tyle kompleksowa platforma, na tyle elastyczna, czy na tyle zgeneralizowana, że możemy w niej budować naprawdę wszelkiego rodzaju web aplikacje od CRM-ów poprzez job boardy, poprzez listingi, poprzez aplikacje fintechowe, poprzez aplikacje medtechowe naprawdę tutaj trzyma nas tylko wyobraźnione i jakieś regulacje prawne co chcemy zbudować.
Case studies w praktyce
Zresztą jeżeli wejdziecie sobie na naszą stronę haveknowcode.io ukośnik case studies to zobaczycie jakiego różnego rodzaju aplikacje budowaliśmy, że naprawdę nieograniczony bo bardzo ciekawą rzeczą jest to że nawet jeśli bubble nie oferuje nam jakiejś konkretnej funkcjonalności jakiejś konkretnej możliwości to mamy możliwość dodania własnego kodu czyli de facto wtedy możemy budować to co nam się że w nie podoba i rozszerzać po prostu te funkcjonalności Bubble więc to tyle ode mnie w dzisiejszym odcinku. Dziękuję wam bardzo za uczestnictwo. Mam nadzieję, że był on dla was pomocny. To tyle ode mnie. Cześć.
