Aplikacje no-code z Bubble: Narzędzia i materiały pomocnicze

0:00Witam Cię w kolejnej lekcji, której tym razem skupimy się na serwisach z jakich

0:04będziemy korzystać podczas budowy naszej aplikacji.

0:07Porozmawiamy sobie również o zasobach, z których ja skorzystałem, aby zaprojektować

0:11serwis, który będziemy budować, a także pokażę Ci w jaki sposób

0:14wykorzystać pliki źródłowe dołączone do tego kursu.

0:19Pierwszym z narzędzi, z jakich będziemy korzystać jest tablet.

0:22Jeżeli do tej pory z niego nie

0:23korzystałeś, to jest to tak naprawdę taki Excel na sterydach.

0:26Bardzo przyjazny dla użytkownika i bardzo łatwy w obsłudze.

0:30Rejestracja jest w pełni darmowa.

0:32Możesz to zrobić klikając w przycisk Sign up for free.

0:35Ja już takie konto wcześniej utworzyłem, a więc mogę się zalogować klikając Sign in.

0:40Wybieram swoje konto Google.

0:46Jeśli tak jak ja dopiero utworzyłeś nowe

0:48konto, to po przejściu przez tą ankietę wstęp na Bar Table Twoim oczom powinien

0:51ukazać się właśnie taki widok startowy Skala.

0:54Więc mamy już założone konto na retail.

0:57To przejdźmy do kolejnego narzędzia jakim oczywiście jest Babel,

1:01czyli edytor, w którym będziemy pracować i którym zbudujemy całą naszą aplikację.

1:06Tutaj znów założenie konta jest w pełni darmowe.

1:08Aby to zrobić klikasz przycisk Get started.

1:11Ja już to wcześniej zrobiłem, a więc klikam login.

1:15Klikam login w google.

1:19Wybieram swoje konto.

1:23I znów po przejściu przez ankietę

1:26taką wstępną blabla będzie to ekran, który zobaczysz na samym początku.

1:30A więc już pierwsze dwa serwisy mamy z głowy.

1:33Przejdźmy do następnego,

1:34jakim jest firma Dot com, czyli narzędzie do tworzenia dizajnu.

1:40Nie przejmuj się, jeżeli do tej pory nigdy nie pracowałeś z żadnym narzędziem do

1:44designu takim jak Sigma, Sketch bądź Adobe xD.

1:48Pokażę Ci absolutne podstawy, które w zupełności wystarczą do tego, aby taki

1:52gotowy layout przenieść i wdrożyć do naszego edytora Babel.

1:56Tutaj znów wystarczy założyć konto klikając guzik.

2:01Znów będziesz musiał przejść przez ankietę wstępną firmy.

2:04A na koniec wybierz Proszę tylko ja chcę

2:06skorzystać z planu darmowego, aby nie ponosić żadnych kosztów.

2:09Ja się tutaj zaloguję.

2:13Znowu wybieram swoje konta Google.

2:18Muszę chwilę poczekać, a jak widzisz

2:20jestem tutaj w firmie, gdzie mam zasoby, z której korzystałem.

2:26Natomiast skąd wziąć takie zasoby?

2:28Zaraz do tego przejdziemy.

2:30Kolejnymi serwisami, z których możesz opcjonalnie skorzystać.

2:33Jest serwis czat GPT, gdzie wystarczy utworzyć darmowe konto,

2:37ponieważ w zupełności wystarczy Ci wersja 3.

2:395, która jest darmowa.

2:41Natomiast jest to serwis całkowicie opcjonalny.

2:44Będzie z niego korzystał tylko i wyłącznie wtedy, jeżeli będziesz chciał wygenerować

2:47inne treści na swoją stronę internetową, czyli do aplikacji, którą będziemy budować

2:52z pominięciem tych, które ja tam zaproponowałem.

2:54Ewentualnie jeżeli będziesz chciał wygenerować jakieś własne produkty do

2:57grafik, żeby takie produkty wdrożyć w życie, czyli po prostu wygenerować te

3:01grafiki, będziesz musiał założyć niestety już płatne konto w serwisie medialnej.

3:06Natomiast pamiętaj to wymagana jest tylko i wyłącznie wtedy, jeżeli nie będziesz

3:10chciał wykorzystać zdjęć i grafik, które ja udostępniam w plikach źródłowych.

3:15A więc skoro tą część mamy już za sobą, to porozmawiajmy o tym, skąd ja wziąłem te

3:20zasoby, za pomocą których zbudowałem cały nasz serwis.

3:23Otóż w tym celu wykorzystałem przede wszystkim ten serwis YT.

3:28Link znowu widzisz na dole ekranu.

3:31Znajdziesz tu całą masę gotowych stron

3:33internetowych, całych aplikacji, czyli tzw.

3:36juice hitów, z których możesz sobie poskładać dowolną aplikację.

3:40Ja wykorzystałem tutaj dwie.

3:42Klikam w tym przycisk wyszukiwania i wpisuję nazwę.

3:46Pierwszy to Rumsfeld.

3:51Czyli ten serwis. Jak widzisz kosztuje on 37 dolarów.

3:54Natomiast nie musisz go oczywiście kupować.

3:57Ja pokażę Ci, jak z niego korzystać na swoim przykładzie.

4:01Natomiast ta wiedza, którą będę Ci

4:03przekazywał jest na tyle uniwersalna, że będziesz mógł znaleźć jakiś darmowy juice

4:07kit i potem wykorzystać ją właśnie pracując z nim.

4:11Drugim takim unikatem, z którego korzystałem jest 104.

4:17Czyli ten serwis tutaj Real Estate.

4:21Natomiast jeszcze trzeci serwis, który moim zdaniem znów jest absolutnym must

4:25have, jeżeli będzie chciał w przyszłości tworzyć więcej aplikacji.

4:29Babel jest wiki o nazwie Wikipedii.

4:34Jest to taki ogromny kombajn, który zawiera całą masę gotowych stron

4:37internetowych, komponentów, kolorów, czcionek itd.

4:42Za pomocą których będziesz mógł tworzyć naprawdę bardzo zaawansowane serwisy.

4:46I niestety z nich wszystkich jest on oczywiście najdroższy.

4:49Możesz to oczywiście sobie sprawdzić klikając w przycisk Banał.

4:53Natomiast jeżeli jesteś ciekaw jak tej wiki te wyglądają w rzeczywistości po

4:57zakupie i po pobraniu, to przejdźmy do Sigmy.

5:01Ja mam tutaj otwarty właśnie jeden z tych weekendów, czyli rób swoje.

5:06Jak widzisz mam tutaj jakąś gotową stronę

5:08startową, którą mogę sobie odwzorować i przenieść bezpośrednio do edytora.

5:12Tu jest jakaś inna wersja.

5:14Mamy tutaj np.

5:15również strony logowania rejestracji, za pomocą których możemy się wzorować,

5:19albo bezpośrednio przenieść je do naszej aplikacji.

5:24To co mnie zainteresowało to np.

5:26tutaj właśnie dashboard

5:28dla właściciela, który będzie wynajmował swoje lokale w naszym serwisie, albo na

5:33przykład tutaj Dashboard dla gościa, w którym.

5:38Ja się po części wzorowałem projektując naszą aplikację.

5:43Bardzo podobnie wygląda również ten weekend S4.

5:47Tu jest tych elementów znacznie więcej.

5:49Znacznie więcej stron tutaj znajdziesz np. tutaj.

5:53Widzisz jakąś listę lokalizacji?

5:55Listę pojedynczego listingu?

5:57Znów, jak widzisz, bardzo wiele elementów wykorzystałem w naszej aplikacji.

6:01Na przykład właśnie tą sekcję tutaj ze zdjęciami i opcją kliknięcia w button,

6:06który będzie wyświetlał taką naszą custom ową przeglądarkę.

6:10Natomiast najbardziej rozbudowanym z nich, tak jak mówiłem, jest Yun Tai Chi.

6:16Tu mam całą listę kolorów, które właśnie

6:18wykorzystałem w naszej aplikacji, po prostu kopiując sobie

6:22te wartości i potem wykorzystując podczas budowy naszego serwisu.

6:27A skoro tą część mamy już za sobą, to proszę Cię teraz o to, abyś pobrał pliki

6:31źródłowe dołączone do tego kursu i wpakował je na swoim komputerze.

6:36Po rozpakowaniu powinieneś otrzymać taki oto folder o nazwie Nest,

6:41gdzie umieściłem wszystkie obrazki z jakich będziemy korzystać podczas budowy

6:45naszej aplikacji oraz plik tekstowy, który przede wszystkim

6:48zawiera link do bazy vortalu, który należy skopiować, co zresztą zaraz zrobimy,

6:53a także wszystkie kolory jakie będziemy wykorzystywać do budowy naszych aplikacji.

6:58Do tej części wrócimy nieco później,

7:00natomiast teraz proszę Cię, abyś zaznaczył sobie ten cały link i go skopiował.

7:08Ja to właśnie zaraz zrobię.

7:10Kolejno wracamy do przeglądarki.

7:16Otwieramy taki link w nowej zakładce.

7:21Jak widzisz jest ta baza przygotowana

7:22właśnie do tego kursu, zawierająca wszystkie

7:26obszerne sety oraz wszystkie linki, które będziesz będziesz potrzebował.

7:30Tu również są wszystkie obrazki załączone.

7:33Jeżeli na razie nic z tego nie rozumiesz, to się nie przejmuj.

7:36Nic się nie stało.

7:37Wystarczy tylko, żebyś otworzył tą bazę, kliknął przycisk Copy base.

7:45Teraz jeżeli masz w drugiej zakładce otworzone swoje konto w retail to

7:50zostaniesz poproszony do wskazanie do jakiego workspace chcesz dodać tą bazę.

7:55Wybieramy tą pierwszą opcję First Workspace.

7:58Klikamy Add Base.

8:01Teraz ta baza znajduje się już na Twoim

8:03koncie War Table, więc będziesz mógł z niej w każdej chwili skorzystać.

8:06A ja dziękuję Ci za uwagę w tej lekcji i widzimy się już za moment.