Aplikacje no-code z Bubble: Co będziemy budować?

0:00Skoro wstęp mamy już za sobą, to teraz

0:02porozmawiajmy o tym, co będziemy budować w ramach naszego kursu.

0:05Ja to szkolenie podzieliłem na trzy główne moduły.

0:07W pierwszym module skupimy się na tym, aby zaprojektować i wdrożyć dobrze wyglądającą

0:12stronę startową, czyli stronę, którą widzisz teraz na ekranie swojego monitora.

0:16Postarałem się o to, aby składała się z

0:18jak największej ilości elementów, z których normalnie składają się takie

0:21strony, dzięki czemu w przyszłości będziesz mógł budować landing page'a

0:24dostosowane do swoich indywidualnych potrzeb.

0:28Naszą przygodę rozpoczniemy od na w bara, czyli tego paska na górze ekranu.

0:32W tym miejscu poznasz najbardziej podstawowe komponenty budulca wieży Babel.

0:36Porozmawiamy o tym, jakie nazewnictwo warto stosować oraz jak uzyskać efekt

0:41hover, czyli efekt zmiany kolory tekstu po najechaniu na niego myszką.

0:46Kolejno przejdziemy do sekcji Hero.

0:48Tutaj dodamy nasz pierwszy duży obrazek.

0:51Porozmawiamy o tym, jak tworzyć i wykorzystywać style dla

0:55tekstu oraz poznasz różne rodzaje pól input, za pomocą których użytkownik będzie

1:00mógł przekazać dane do naszego serwisu, a także dodamy pierwszy plugin, dzięki

1:05któremu uzyskamy te fajnie wyglądające ikonki.

1:08Kolejna sekcja to sekcja Fighters, czyli

1:10ta sekcja tutaj składająca się z czterech kolumn.

1:13Rozmawiamy o tym czym są Sets, jak je wykorzystać w praktyce, a także w jaki

1:18sposób Babel przekazywać dynamicznie dane do elementów na naszej stronie.

1:22Kolejno przejdziemy do sekcji popularnych kierunków.

1:25Tutaj pokażę Ci, w jaki sposób tworzyć dobrze wyglądające listy Babel, czyli czym

1:30są i jak działają w praktyce Reporting Groups.

1:33Następnie do naszej strony dodamy standardowy układ dwu kolumnowy, czyli

1:37taki, w którym już na pewno spotkałeś się nie raz na różnych stronach internetowych.

1:41A więc tekst po lewej oraz obrazek po prawej stronie.

1:45Natomiast żeby nie było nudno, ja w tym

1:47miejscu wytłumaczę Ci jak działa layout typu Align to parent, dzięki któremu

1:51możemy uzyskać taki efekt nachodzących na siebie różnych elementów.

1:55Następnie do naszego serwisu dodamy tutaj sekcję z listingu, czyli listę

2:00lokalizacji, które będzie mógł zablokować nasz użytkownik.

2:03Wytłumaczę Ci czym są Redux, Abel, Elements, Babel, jakie jest ich

2:07zastosowanie, jakie oczywiście wykorzystać w praktyce.

2:11Kolejne dwie sekcje to już wdrożenie naszej zdobytej wiedzy w

2:15praktyce, czyli dodamy tutaj sekcję Testy modeli oraz sekcję newslettera.

2:20W tym miejscu znów postaramy się jak

2:22najdokładniej odwzorować statyczny layout i wdrożyć go do naszej aplikacji.

2:27W naszym serwisie nie może oczywiście również zabraknąć video.

2:30Pokażę Ci jak wykorzystać ten komponent w

2:32Babel, jak go odpowiednio ustawić i zastosować w praktyce.

2:36Następnym elementem na naszej stronie będzie sekcja z blogiem, na której

2:40będziemy wyświetlać posty z naszego serwisu.

2:43Pokażę Ci w jaki sposób zaprojektować taką listę oraz dodać tutaj customowe

2:48scrollowania, które dużo lepiej wygląda niż taki default owy.

2:53I oczywiście ostatni element to funkcjonalny footer.

2:56Tutaj dodamy linki prowadzące do różnych podstron naszego serwisu, a także ikonki,

3:01za pomocą których użytkownik będzie mógł się przenieść na nasze sociale.

3:06Drugim module skupimy się na modelowaniu dynamicznych podstron naszego serwisu.

3:11Pierwszą z nich będzie strona

3:12wyszukiwania, która już teraz na ekranie swojego monitora

3:16rozpoczniemy naszą pracę od edycji awatara i dodania takiej bardzo interesującej

3:21wyszukiwarki, którą otrzymuje po kliknięciu w ten element.

3:25Nie zabraknie tu również wzorowanej na RB listy z kategoriami,

3:30a my dodatkowo wzbogacimy ją jeszcze o nasz pierwszy popup, za pomocą którego

3:34użytkownik będzie mógł dodać dodatkowe filtry do swojego wyszukiwania.

3:40Kolejno zadbamy również o zaprojektowanie lewej strony, czyli strony z listingu.

3:46Inaczej mówiąc listą wyników takiego wyszukiwania.

3:49Oczywiście jest to na razie tylko i wyłącznie za modelowane.

3:53Nie będziemy wysyłać żadnego zapytania do bazy danych.

3:56Następnie przejdziemy do prawej sekcji, gdzie zastosujemy taką dynamiczną mapkę.

4:00Jak widzisz, mogę tutaj skalować i przybliżać.

4:03Pokażę Ci w jaki sposób odpowiednio

4:05ustawić taki element w Babel, jak go dodać, aby działał właściwie.

4:09Kolejną stroną w naszym serwisie będzie strona pojedynczego listingu.

4:13Zadbamy o to, aby dodać tutaj taką customowe przeglądarkę do zdjęć.

4:18Po kliknięciu w przycisk będzie to po

4:20prostu zwykły popup, do którego dodamy trochę funkcjonalności.

4:24Następnie zadbamy o zaprojektowanie lewej sekcji.

4:28Jak widzisz, znajdują się podstawowe informacje o takim listingu lista

4:32features, krótki opis, informacja o hoście, a także podstawowe info.

4:39Wykorzystamy również w praktyce element HTML, aby utworzyć prawą sekcję, która jak

4:43widzisz w miarę scrollowania tego ekranu jest przyklejona.

4:47Tutaj w tym stałym miejscu pokażę Ci w jaki sposób możesz utworzyć taką sekcję na

4:51stronie i udowodnię, że jest to niesamowicie proste.

4:54Zadbamy również tutaj o sekcję Review,

4:57czyli sekcję z komentarzami do naszego listingu.

5:02Tu również dodamy odpowiedni popup, który

5:04będzie wyświetlał wszystkie komentarze dla takiej lokalizacji.

5:08Możemy go sobie teraz zamknąć i oczywiście

5:11przejść do kolejnego elementu naszej pracy, czyli do stron autentykacji.

5:16Naszą przygodę rozpoczniemy od strony rejestracji, czyli strony, na której

5:20użytkownik będzie mógł utworzyć konto w naszym serwisie.

5:24Dodamy tutaj odpowiednie workflow, które to obsłuży.

5:27Nie zapomnimy również o stronie, za pomocą której użytkownik będzie mógł

5:31się zalogować lub przypomnieć sobie swoje hasło, czyli strony Reset your password.

5:38Kolejno dodamy tutaj odpowiednie przyciski, za pomocą których użytkownik

5:43będzie mógł się zalogować na konto demo gościa albo hosta.

5:48Moduł trzeci to już budowa serca naszej aplikacji, czyli funkcjonalnego Dashboard.

5:53W tym miejscu wykorzystamy podejście SPA

5:55do utworzenia strony, która będzie nam dynamicznie przełączać odpowiednie widoki

5:59bez konieczności tworzenia osobnych podstron i przełączania się między nimi.

6:03Zadbamy o to, aby zaprojektować stany empty state dla każdego z tych widoków.

6:07Jak widzisz, przełączam się tutaj i mam odpowiedni komunikat na środku ekranu.

6:12Porozmawiamy również o tym, dlaczego warto dodać prawą kolumnę, która w naszym

6:16przypadku wyświetla odpowiednie statystyki.

6:19W naszym Dashboard nie zabraknie również strony profilowego, na której użytkownik

6:23będzie mógł wyświetlić swój profil albo go edytować.

6:27Wróćmy jednak do Dashboard u.

6:30A ponieważ z naszego dashboard będą

6:32korzystać zarówno goście, jak i wynajmujący.

6:34Porozmawiamy sobie również o tym, jak rozdzielić te dwie role w naszym serwisie.

6:39Na koniec zajmiemy się stanem Full stat dla każdego z widoków.

6:43Na przykład tutaj dla sekcji z booking em

6:46i zadbamy również o to, aby dodać potrzebne podstrony, jeśli będą wymagane.

6:50Na przykład stronę pojedynczego bookingu.

6:54Mam nadzieję, że to co Ci pokazałem tylko

6:56zaostrzyło Twój apetyt i widzimy się już w następnej lekcji.