Aplikacje no-code z Bubble: Komponent Map

0:00W tej lekcji nadal kontynuujemy naszą pracę ze stroną search i tym razem naszym

0:04zadaniem będzie dodanie tutaj komponentu map.

0:07Jak widzisz mamy tutaj normalną mapkę Googla, którą mogę sobie skopiować.

0:11Dodatkowo mogę zmienić tryb widoku np.

0:13na satelitę albo na zwykły typ.

0:16A więc jak taką mapkę dodać i czy rzeczywiście jest to takie trudne?

0:20Na szczęście nie.

0:21Przejdźmy do edytora i zaraz to sobie ustawimy.

0:25To co musimy zrobić, to wybrać tylko komponent map i wstawić go w to miejsce,

0:30czyli do naszego elementu Content Right Group.

0:34To co chcę zrobić, to oczywiście pozbyć

0:36się tutaj minimalnej szerokości i pozbyć się minimalnej wysokości.

0:41Niech ta mapka rozciągnie nam się na całą dostępną przestrzeń.

0:44Dodatkowo, jeżeli przejdziemy do

0:46Appearance, nazwijmy to po prostu Results Map.

0:52I teraz zakładka Bilans.

0:54Możemy sobie tutaj poustawiać całkiem interesujące opcje np.

0:58zmienić typ mapy np.

1:00od razu na Hybrid.

1:02Jak widzisz działa to dynamicznie.

1:04Natychmiast nam się zmienia satelitę.

1:07Wrócić do mapy.

1:08Wybrać Map styl.

1:10Jest to bardzo wiele różnych fajnych

1:12opcji, na przykład retro, które da nam właśnie taki dziwny widok.

1:15Ale jednak wróćmy do tego normalnego ustawienia.

1:19Proszę sobie przetestować te wszystkie opcje.

1:22Natomiast jedna bardzo ważna rzecz.

1:24Tak dodany komponent map działa już z Google Maps.

1:28Natomiast jeżeli go tylko dodamy, to mamy tutaj pewne ograniczenia.

1:32Otóż przy każdym odświeżeniu się strony naszej strony, serwis nasz taki komponent

1:38Babel będzie wysyłał zapytania do Google Map.

1:40Tu naprawdę tylko wyświetlamy mapkę, żadnych innych elementów.

1:43Jednak takie zapytanie i tak pójdzie, żeby taką mapkę odczytać.

1:47I możesz otrzymać informację o tym, że tam wykorzystałeś limit dostępnych zapytań.

1:52Nie przejmuj się tym.

1:54Ja obiecałem Ci, że w tym sprincie

1:55będziemy działać tylko na wersjach darmowych wszystkich komponentów.

1:59Natomiast włączenie takiej mapki w pełnym

2:01trybie będzie wymagało przejścia do Google, tam wprowadzenia odpowiednich

2:06ustawień i podania numeru karty kredytowej.

2:08Ja nie chcę, żebyś tego teraz robił.

2:10Natomiast chcę, żebyś zostawił to mapkę w takim trybie, jakim jest.

2:13Nie przejmował się. Jeżeli tutaj wyskoczą Ci informacje o

2:15błędach, o tym, że nie podałeś kluczy do takiej mapy.

2:18Po prostu ignorujemy ten fakt i działamy tak jak jest.

2:22Natomiast chciałbym przy okazji mapy

2:24omówić tutaj jeszcze pewne ustawienia w panelu właściwości, do których nie

2:28przechodziliśmy, a mianowicie tutaj ten górny panel.

2:32Tu mamy nowy composer, który pozwala nam

2:34nieco inaczej generować tutaj condition, ale ja na razie go nie włączam.

2:39Nie chcę Ci utrudniać życia.

2:40Dużo łatwiej się będzie pracowało z tym, co jest tutaj.

2:43Ten nowy composer jeszcze czasami trochę jest zabudowany i czasami trudno się

2:47rozczytać w tych warunkach, więc tego nie przełączamy.

2:51Natomiast ta opcja pozwoli Ci wyświetlić

2:53takie kontekstu video dotyczące danego elementu, czyli np.

2:56możesz sobie tutaj sprawdzić informacje na temat elementu map.

3:00Jeżeli wybierzesz jakiś inny element, to

3:02video będzie oczywiście odpowiednio dostosowane do niego.

3:06Za pomocą tej ikonki możemy tutaj dodawać custom staty.

3:10Tym zajmiemy się już w lekcji kolejnej.

3:11Wytłumaczę Ci co to jest.

3:13Dodatkowo jeżeli taki element będzie powiązany z jakimiś akcjami workflow,

3:16jakimiś eventami albo innymi elementami, to Babel wyświetli odpowiednią informację.

3:21Jest to niesamowicie przydatne, ponieważ

3:23bardzo często jeden element będzie powiązany z szeregiem innych i w ten

3:27sposób będziesz mógł łatwo namierzyć właśnie te wszystkie powiązania.

3:31Kolejna ikonka ta ikonka.

3:34Pozwala nam tutaj na dodanie notatek do takiego elementu.

3:37Natomiast ja z tego nigdy nie korzystam z jednego prostego względu.

3:40Notatki mega kiepsko działają w Babel.

3:43Jeżeli dodałbym tu jakąś notatkę i np.

3:45kopiował taki element, to przy tym skopiowany elemencie notatka już zniknie.

3:49Lecz to bardzo często może się zdarzyć, że

3:51przez przypadek usuniesz jakiś element i potem będziesz go chciał na nowo dodać.

3:54I znowu te notatki gdzieś tam znikną.

3:56Jeżeli chcesz dodawać jakieś notatki,

3:59to po prostu rób to za pomocą nosa lub jakiegoś innego edytora i tam

4:03prowadźcie sobie na bieżąco dokumentację dotyczącą Twojego projektu.

4:07Te notatki pozostaw jako ciekawostkę i raczej z nich nie korzystaj.

4:12I to by było chyba na tyle z tych najważniejszych rzeczy.

4:14Dodatkowo jeszcze jedna ważna rzecz

4:16zobacz, jeżeli nawet na ikonkę pojawia mi się taki napis Serie Friends i

4:21on zawsze będzie Cię odsyłał do dokumentacji blabla, która moim zdaniem

4:24jest naprawdę bardzo dobrze przygotowana i radzę Ci z niej jak najczęściej korzystać.

4:29Jeżeli to, co ja Ci tutaj tłumaczę wydaje

4:31Ci się za mało i chciałbyś dowiedzieć czegoś więcej, zawsze możesz sobie wybrać

4:35wersję Reference i doczytać o jakiś elementach.

4:39Sprawdzić jakieś dodatkowe opcje, np.

4:41właśnie to jak zaimplementować w pełni taki komponent map.

4:44Zamknijmy sobie te notatki i przejdźmy właśnie do strony z dokumentacją.

4:49Ja mam tutaj stworzoną link.

4:50Widzisz na dole.

4:51I tu masz właśnie całe video jak

4:53zaimplementować właśnie klucze, które będzie Cię Babel, żeby ta mapka działała.

4:58Jak już pewnie na Twoim koncie te opcje dość często się zmieniają.

5:02Google bardzo często potrafi zmieniać te swoje API, dlatego ja też nie chcę

5:05nagrywać, przynajmniej na ten moment video jak to robić?

5:08Myślę, że wrócimy do tego w Sprint nr 2.

5:11Natomiast jeżeli byłbyś zainteresowany jak

5:13to sobie poustawiać to odpalę właśnie to video przygotowane przez Sama Babel.

5:17Ona Cię przeprowadzi krok po kroku jak

5:18wygenerować takie klucze i jak je odpowiednio przepisać.

5:23Z mojej strony to by było na tyle w tej lekcji.

5:25Nasza mapka została dodana.

5:27Otworzymy.

5:29W naszą stronę.

5:30Jak widzisz już tutaj działa.

5:32Jedyne co chcę tylko zrobić, to zaokrąglić jej narożniki.

5:37Na 8 pikseli.

5:41I usunąć ten konfesjonał.

5:42Nie mamy tutaj chwilowo żadnych warunków.

5:45To wszystko.

5:46Nasza mapka działa.

5:48My możemy przejść do następnych działań i widzimy się już.