Aplikacje no-code z Bubble: Wprowadzenie do Bubble

0:00Cześć! Mam nadzieję, że po zakładałeś konta we

0:02wszystkich serwisach, z których będziemy korzystać.

0:05Czyli wykonałeś wszystkie kroki, które pokazałem Ci w poprzedniej lekcji.

0:08A jeśli tak, to możemy przystąpić do dalszego działania.

0:11W tej lekcji natomiast skupimy się na tym, czym tak naprawdę jest Babel.

0:15Otóż Babel w bardzo dużym skrócie to

0:18aplikacja, za pomocą której możesz budować inne aplikacje i to bez znajomości

0:23programowania i bez ani jednej linijki kodu.

0:26To, co pozwala nam zbudować Babel to responsywne, czyli dobrze wyglądające na

0:31każdej rozdzielczości aplikacje desktopowe, a także aplikacje mobilne.

0:36Natomiast tu mam jedno zastrzeżenie.

0:38Jeżeli chciałbyś zbudować aplikację

0:39mobilną, którą będzie można zainstalować w sklepie Google Play albo w AppStore, to

0:44przynajmniej na ten moment będziesz musiał Babel korzystać z zewnętrznych rozwiązań.

0:48Natomiast informacji, które Pablo przekazywał wynika, że w tym roku, czyli w

0:52roku 2024 prowadzą oni tutaj odpowiednie poprawki i już bezpośrednio w edytorze

0:58będzie można budować takie aplikacje bez zewnętrznych narzędzi.

1:02A skoro wiemy już, co można Babel

1:04zbudować, to teraz porozmawiajmy o tym, czego nie można zbudować.

1:08Ta lista jest na szczęście bardzo krótka i obejmuje tylko i wyłącznie aplikacje,

1:12które będą wykonywały skomplikowane operacje matematyczne.

1:16Jeżeli chciałbyś zbudować taką aplikację, to nie ma problemu.

1:19Będziesz natomiast musiał wykorzystać zewnętrzne narzędzie, które wykona to

1:22takie właśnie obliczenia, a następnie wynik zwróci się właśnie do Babel, a Ty

1:26taki wynik zaprezentujesz użytkownikowi na ekranie.

1:31Skoro jesteśmy już uzbrojeni w taką wiedzę, to teraz porozmawiajmy sobie o

1:34tym, ile to wszystko tak naprawdę kosztuje.

1:37Jak wiesz z poprzedniej lekcji, sama

1:38rejestracja, czyli założenie konta w Babel była darmowe.

1:42W ramach takiego konta będziesz mógł tworzyć dowolną ilość aplikacji,

1:46natomiast rozliczenie będzie następowało per aplikacja.

1:49To znaczy, że będziesz płacił osobno za każdą z nich.

1:52Tabel nie ma, przynajmniej na chwilę obecną, żadnych ograniczeń, więc tych

1:55aplikacji możesz mieć na swoim koncie dowolną ilość.

1:58A jeżeli chcesz wiedzieć, jakie koszty

2:00będziesz ponosił, to wystarczy, że wejdziesz na stronę Prison.

2:04Ja mam już taką stronę.

2:05Otworzono drugi zakład, więc mogę się na nią przełączyć.

2:09Jak widzisz mamy tutaj całą listę z planów, z których możemy korzystać.

2:12Rozliczenie następuje w trybie miesięcznym

2:14lub trybie rocznym i w zależności od tego jakie tryby wybierzesz,

2:18te ceny abonamentów nieznacznie się między sobą różnią.

2:22Na potrzeby naszego kursu będziemy

2:24korzystać tylko i wyłącznie z planu darmowego, a więc nie będziesz musiał

2:27ponosić żadnych dodatkowych kosztów tutaj za pracę z edytorem Babel.

2:32Natomiast chciałbym, żebyś pamiętał, że ten plan darmowy jest jednocześnie

2:35najbardziej ograniczonym ze wszystkich tych planów.

2:38Aby to sprawdzić, wystarczy, że klikniemy

2:40w ten przycisk See Full Comparison i otworzy nam się popup.

2:44Gdzie dokładnie będziemy mogli sprawdzić jakie funkcjonalności

2:47występują w danym planie, a jakich nie ma lub jakie są ograniczenia.

2:51Nas najbardziej interesuje tutaj ta sekcja infrastruktur, gdzie mamy informacje np.

2:58o tym, ile tzw.

3:00workflow units przysługuje Ci w danym planie, przynajmniej na chwilę obecną.

3:04W Babel następuje właśnie rozliczanie

3:06według takich jednostek Workflow Units Każda operacja w Twojej aplikacji, czyli

3:11jakieś wyświetlenie danych, pobranie ich i przekazanie dalej będzie pobierało właśnie

3:16sobie taki workflow units i zmniejszało ten pakiet, który otrzymujesz.

3:20W przypadku planu darmowego nie możemy takich jednostek dokupić.

3:24Natomiast w przypadku pozostałych planów

3:25jak najbardziej mamy tutaj cenę za 1/1000 takich jednostek.

3:31Kolejną bardzo ważną rzeczą jest file

3:34storage, czyli miejsca na pliki w Twojej aplikacji.

3:36Znów najmniej dostajesz w planie darmowym, ale w planie już tym kolejnym jest to

3:4050GB, a w każdej chwili za kolejne 3 dolary możemy dokupić następne 100GB.

3:46To co nas jeszcze interesuje to wielkość bazy danych.

3:49Musisz pamiętać o tym, że Babel posiada wbudowaną bazę danych, a więc nie będziesz

3:52musiał korzystać z żadnych zewnętrznych rozwiązań.

3:55Natomiast tylko w planie darmowym jest ona ograniczona do dwustu rzeczy.

3:59Jak widzisz tutaj, w przypadku pozostałych

4:01planów jest ona oczywiście całkowicie nielimitowana i możesz posiadać tyle

4:05itemów w swojej bazie danych, ile tylko zapragniesz.

4:08A skoro wiemy już ile to nas będzie

4:10kosztowało, to możemy wrócić do poprzedniej strony i zalogować się do

4:14edytora po to, aby utworzyć naszą pierwszą aplikację.

4:18Klikamy więc login.

4:21Wybieram swoje konto Google do zalogowania się.

4:25Jeżeli dopiero co utworzyłeś swoje konto, to właśnie ten ekran będziesz widział.

4:29Na dzień dobry klikamy Get started.

4:34Wybieramy tutaj opcję utworzenia właśnie nowej aplikacji.

4:38Wybieramy tą opcję Start with Basic Features, pomijamy tutaj te triala itd.

4:45OK, jesteśmy teraz na etapie tworzenia nowej aplikacji.

4:48Mamy tutaj taki samouczek, który nam pomaga z uruchomieniem pierwszej

4:53aplikacji i pozwala również wykorzystać tutaj jakiś taki startowy szablon.

4:58Natomiast nas to interesuje.

4:59Będziemy wszystko budować od podstaw.

5:01A więc klikamy przycisk Script Application Assistant.

5:07I już jesteśmy w gotowym edytorze.

5:09Możemy zamknąć tą opcję tutaj komponent Library.

5:13Porozmawiamy o niej później.

5:16Klikam tutaj, aby mi się to zamknęło.

5:19Klikam tutaj, aby mi się to zamknęło i to co musimy teraz zrobić w pierwszej

5:24kolejności to usunąć wszystkie zbędne rzeczy, które Babel

5:28ładuje do naszej aplikacji po to, aby łatwiej nam było rozpocząć pracę.

5:33Jeżeli budujemy aplikację od podstaw, tak

5:35jak my to będziemy robić, to niestety te wszystkie rzeczy tylko nam utrudniają,

5:39a dodatkowo niepotrzebnie zaśmiecają całą naszą aplikację.

5:43W tym celu przechodzimy do zakładki Settings.

5:47Kolejna. Wybieramy General.

5:50Zjeżdżamy na sam dół.

5:54Mamy przycisk Optimizer Application.

5:57Takiej optymalizacji aplikacji możesz dokonać w każdym momencie.

6:00Natomiast pamiętaj, że im bardziej Twoja

6:02aplikacja będzie rozbudowana, tym dłużej będzie trwał cały ten proces.

6:07Nasza aplikacja jest całkowicie świeża,

6:08nie mamy tam jeszcze nic, a więc klikam ten przycisk.

6:13Musimy chwilę poczekać aż Pablo przeanalizuje naszą aplikację.

6:16Jak widzisz mamy tutaj całą masę

6:17nieużywanych stylów, które zostały dodane przez edytor.

6:21Klikamy więc Clean App. I to wszystko.

6:26Te wszystkie style niepotrzebne zostały

6:27już usunięte, a my możemy przystąpić do działania.

6:31Kolejnym krokiem, który będziemy musieli wykonać to dodanie do naszej aplikacji

6:36wszystkich kolorów, z jakich będziemy korzystać podczas budowy.

6:39Jak widzisz mamy tutaj taką podstawową

6:41paletę kolorów, natomiast jest ona bardzo mocno ograniczona.

6:45Nie możemy tutaj zmieniać nazwy tych

6:47kolorów i ogólnie dodawać zbyt wielu nowych.

6:51Natomiast żeby to zrobić musimy przejść przede wszystkim do zakładki Styles,

6:56następnie Stella Variable i to co robimy W pierwszej kolejności to

7:01ustalamy z jakiego fontu będziemy korzystać, czyli z jakiej czcionki.

7:05Ja tutaj zmieniamy Open source na.

7:09Font o nazwie Plus.

7:12Jakarta Sands.

7:15Kolejno.

7:15Jak widzisz mamy tutaj tą samą paletę, którą widziałeś wcześniej.

7:18Natomiast to co możemy teraz zrobić to

7:20dodać nowe kolory klikając właśnie tutaj New color Variable.

7:26Zanim jednak dodamy pierwsze kolory, porozmawiajmy sobie o tym, skąd w ogóle

7:29wziąć takie kolory podczas budowy aplikacji.

7:32Jeśli pracujesz z profesjonalnym designerem, który przygotowuje dla Ciebie

7:35layout całej aplikacji, to powinieneś otrzymać od niego Stay

7:38Guide, gdzie będziesz miał listę wszystkich stylów tekstu, z jakich

7:42korzystał oraz wszystkich kolorów, jakie powinieneś zastosować w swojej aplikacji.

7:47Bardzo często również klienci przekażą Ci

7:48swoje kolory branżowe, które będą chcieli wykorzystać właśnie podczas budowy apki.

7:54Natomiast w moim przypadku ja wykorzystałem w tym celu

7:58znane Ci już title Divi, gdzie mam już cały szereg kolorów, które

8:03mogę wykorzystać i pokażę Ci w jaki sposób się to najczęściej robi.

8:06W przypadku fontów.

8:08Mamy tutaj taki kolor szary.

8:11I tak te kolory.

8:12Tutaj wartości 25 50 najczęściej

8:15wykorzystuje się właśnie do oddawania takiego tła innego niż kolor biały.

8:21Wartości od 100 do

8:23300 mogą nam posłużyć właśnie jako kolor obramowania wartości 500 600.

8:29Ja najczęściej wykorzystuję jako kolor zwykłego tekstu na stronie.

8:33Natomiast te wartości tutaj 700 900 jako kolor nagłówków.

8:38Ponieważ nie są to kolory idealnie czarne,

8:40to tym lepiej będą się prezentować na naszej stronie.

8:44Podobnie sytuacja ma również miejsce

8:46w przypadku kolorów innych branżowych, które będziesz chciał wykorzystać.

8:50Np. Powiedzmy, że to będzie nasz główny kolor.

8:54Znów.

8:55To byłby kolor tła.

8:57Wartość 500 lub 600 byłaby takim standardowym kolorem.

9:01Z czego bym chciał skorzystać?

9:03Pasma 700 bądź 800 to kolory, które będziemy wykorzystywać dla efektu hover.

9:09Czyli jeżeli użytkownik np.

9:10najedzie na button z takiego koloru, przejdziemy w taki

9:13kolor, aby właśnie zobrazować to, że najechał kursorem na dany przycisk.

9:18Natomiast tych kolorów tutaj 900 bądź 950

9:21będziemy korzystać dla stanu preset, czyli stanu, w którym użytkownik najedzie

9:25kursorem na dany przycisk i kliknie i przytrzymaj przycisk na myszce.

9:29To jest właśnie ten stan preset.

9:30Natomiast co w sytuacji, jeżeli Twój

9:32klient przekaże Ci kolory branżowe właśnie bez całej tej palety odcieni?

9:37To miało miejsce np.

9:38właśnie w tym Juice Real Estate,

9:41gdzie znalazłem dwa kolory, z których chciałem skorzystać.

9:45To jest mój kolor główny, a to jest mój kolor drugorzędne.

9:49Natomiast jak widzisz, o ile jeszcze tutaj mamy jakieś odcienie tego fioletu,

9:53powiedzmy, które moglibyśmy wykorzystać, to niestety tutaj mamy tylko jeden odcień,

9:58a ja chciałbym mieć całą paletę od najjaśniejszego do najciemniejszej.

10:02Co więc możemy zrobić?

10:03Otóż możemy sobie skopiować wartość takiego koloru.

10:06To jest wartość szesnastkowym, czyli właśnie tutaj ten tekst.

10:11Trzeba tylko kliknąć, a jeżeli nie tutaj,

10:13to zawsze mogę to zrobić w tym miejscu klikając tutaj na element.

10:18I tu mam film. Czyli jaki jest to kolor?

10:21Kopiuję sobie tą wartość.

10:23Wracam do przeglądarki i przechodzę do strony o nazwie Kolor.

10:27Słuchaj. Jak widzisz tutaj są już gotowe palety

10:30kolorów, które możesz wykorzystać w swojej aplikacji.

10:32Jeżeli nie otrzymasz ich od klienta lub

10:34nie chcesz sam wymyślać kolorystyki do swojej aplikacji.

10:38Mnie natomiast interesuje ten link Tint 3D Generator.

10:46Teraz wystarczy, że przekaże sobie ten skopiowany kolor.

10:51I kliknę submit.

10:52Jak widzisz mam tutaj te wszystkie odcienie i teraz mogę np.

10:55wybrać sobie takie najjaśniejsze

10:57albo najciemniejsze do utworzenia stylów dla hover na preset lub właśnie tutaj

11:02jakiegoś koloru tła, przycisków czy czegokolwiek.

11:07Skoro już wiemy jak pracować z kolorami, czyli skąd je pobrać, gdzie je znaleźć

11:12i w jaki sposób uzyskać takie różne odcienie, to wróćmy do edytora.

11:19I dodajmy taką nową pierwszą zmienną.

11:21Klikamy tutaj.

11:23Ja stosuję takie nazewnictwo.

11:28Neutral 25, czyli kolor tła.

11:31Tu dodaję sobie opis co będzie to base background.

11:41Klikam Create.

11:42I teraz będę musiał tutaj przekazać kodu,

11:44ponieważ na chwilę obecną jest to kolor czarny.

11:47Ja sobie skopiuję taką wartość.

11:54W moim przypadku będzie to właśnie taki kolor.

11:57Na tej samej zasadzie będziemy tutaj dodawać kolejne zmienne kolorystyczne.

12:03Możesz ich dodać 24 i my oczywiście

12:05wykorzystamy w naszej aplikacji ten limit do maksimum.

12:09Natomiast aby nie marnować Twojego czasu, ja to zrobię między lekcjami.

12:12Ty, jeżeli będziesz chciał dodać właśnie te kolory, a bardzo Cię proszę, abyś to

12:16zrobił, żebyśmy zaczęli przyszłej lekcji od tego samego etapu.

12:20Przejdź do plików źródłowych.

12:22Czyli jak pamiętasz mieliśmy to muszę się przełączyć tutaj.

12:27Tu mamy pliki źródłowe.

12:31Katalog Nest plik Start here.

12:34I tu jak widzisz znajdują się wszystkie

12:36kolory, które będziesz musiał dodać w ten sposób, który Ci przed chwilą pokazałem.

12:41Tak więc zapraszam Cię do działania.

12:43Ja też zresztą do niego przystępuję i widzimy się już w następnej lekcji.