Narzędzia JavaScript Full-Stack Web Developera: Narzędzia no-code

0:00Wątkiem, który chciałbym poruszyć w

0:01kontekście narzędzi wspomagających jest wykorzystanie różnego rodzaju platform

0:05no-code, low-code i tych do tworzenia automatyzacji.

0:09Jedną z najbardziej zaawansowanych i tych, które wykorzystuję każdego dnia jest Make.com.

0:14Jest to platforma, z pomocą której

0:16jesteśmy w stanie w sposób bardzo prosty łączyć się z

0:20różnego rodzaju usługami i przesyłać pomiędzy nimi różne informacje.

0:25I tutaj w przypadku Make całe tworzenie scenariusza to tak naprawdę jak widzisz

0:29wyklikiwanie różnego rodzaju usług, ich akcji oraz określanie tego, w jaki sposób

0:34informacje będą przepływać pomiędzy tymi różnymi usługami.

0:38Ze względu na to, że nie jest to program poświęcony właśnie takim narzędziom, a

0:42jednocześnie obsługa samego Make jest niesamowicie prosta, szczególnie jeżeli

0:47potrafisz programować, to tak naprawdę chciałbym tu zwrócić tylko Twoją uwagę na

0:51dwie rzeczy, które z pewnością będą Ci się tutaj przydawać.

0:55Otóż bezapelacyjnie jedną z

0:57najważniejszych akcji, którą możesz tutaj wybrać są Webhooki.

1:01Chodzi o to, że za każdym razem, gdy będziesz rozwijać aplikację, możesz

1:05utworzyć sobie tutaj taki Webhook podając jego nazwę, a następnie zaraz po chwili zostaje

1:10wygenerowany jego adres, który możesz po prostu skopiować do schowka, a następnie

1:14wykorzystać w swojej aplikacji bądź jakiejś zewnętrznej usłudze.

1:18Zatem przykładowo, jeżeli włączymy sobie

1:20ten scenariusz w tryb nasłuchiwania i prześlemy sobie tutaj jakieś informacje np.

1:24z pomocą Query String,

1:26no to jeżeli teraz prześlemy sobie na ten Webhook jakieś informacje np.

1:29za pomocą Query String,

1:31no to otrzymamy potwierdzenie, że dane zostały zaakceptowane, a jednocześnie

1:35tutaj do naszego scenariusza zostały one w tym miejscu przekazane i dzięki temu mogę

1:40teraz połączyć się praktycznie z dowolną inną usługą i np.

1:44zapisać nowy rekord w Airtable, bądź też

1:46chociażby zapisać nowy kontakt na liście Active Campaign.

1:50Oczywiście, jak się pewnie domyślasz,

1:52równie dobrze mógłbym połączyć się bezpośrednio z API konkretnej usługi z

1:55poziomu mojej aplikacji i w ogóle nie wykorzystywać tutaj Make.

1:59Ale jeżeli nagle okaże się, że musisz

2:01połączyć wiele różnych usług i przesyłać pomiędzy nimi informacje do tego, aby np.

2:05przekazać dane z jakiegoś formularza do różnego rodzaju systemów, no to nagle

2:10okazuje się, że sięgnięcie po Make rzeczywiście nabiera tutaj sensu.

2:14Oczywiście w momencie, gdy mamy jakąś

2:16bardzo rozwiniętą aplikację z dużą liczbą użytkowników, to możliwe, że sięgnięcie po

2:21Make nie będzie tutaj uzasadnione ze względu na to, że rozliczamy się tutaj za

2:25wykonane operacje i tym samym może okazać się to po prostu mało efektywne.

2:29Ale jednocześnie tak jak pokazywałem sam projektuję np.

2:32swój dashboard, w przypadku którego po

2:34pierwsze zależy mi na tempie realizacji takiego projektu, po drugie nie ma tutaj

2:39mowy o jakimś dużym ruchu i dużej liczbie operacji koniecznych do wykonania

2:44i na koniec też nie ma praktycznie żadnych innych przeciwwskazań, które mówiłby o

2:48tym, że mógłbym nie sięgać po narzędzia takie jak Make czy chociażby Zapier.

2:53I tutaj jeżeli już jesteśmy przy Zapierze, no to jego prawdopodobnie kojarzysz, ale

2:57jednocześnie ja osobiście nie za bardzo już polecam korzystanie z tej platformy ze

3:01względu na to, że chociażby Webhooki są zdecydowanie bardziej ograniczone.

3:05Mianowicie zwróć uwagę, że jeżeli teraz

3:08tworzę sobie kolejny krok, to tutaj w przypadku Webhooka mam dostępną akcję Webhook

3:13Response, a to oznacza, że przesyłając dane na ten Webhook od

3:16razu mogę zdecydować o strukturze odpowiedzi.

3:19Naturalnie mogę tutaj też dodać jakieś customowe nagłówki lub też w ogóle

3:23przekierować użytkownika na konkretny adres.

3:26W rezultacie, jeżeli teraz

3:27zapiszę sobie zmiany tego scenariusza, a następnie przełączę go już nie w tryb

3:31nasłuchiwania, tylko po prostu w pełni aktywuje, no to będę mógł przejść na ten Webhook

3:36i zwróć uwagę, że zamiast Accepted otrzymałem tutaj informację, którą

3:40precyzyjnie określiłem w tej akcji Webhook response.

3:43Analogicznie też mógłbym dodać tutaj Content-Type ustawiony na Application/json

3:48i dodatkowo określić tutaj strukturę odpowiedzi.

3:51W rezultacie ponownie po zapisaniu zmian i aktywowaniu tego scenariusza mogę przejść

3:56na ten webhook i tym razem otrzymuję tutaj odpowiedź w formacie JSON.

4:00Jak się pewnie domyślasz, uzyskanie takiej odpowiedzi po stronie aplikacji daje już

4:04niesamowite możliwości w kontekście rozwijania takich integracji.

4:08No i teraz drugim wątkiem, który chciałbym tutaj poruszyć jest moduł HTTP.

4:13Jest on szczególnie istotny ze względu na

4:15to, że jest to interfejs umożliwiający nawiązanie połączenia z dowolnym API.

4:20Jak widzisz, możemy ustawić tutaj nagłówki

4:22Query String, ustawić ciało zapytania, jego typ oraz oczywiście zawartość.

4:26Mamy też możliwość ustawienia jakiś

4:28dodatkowych informacji lub też nawet nawiązywania połączenia OAuth 2.0.

4:33Zatem z całą pewnością obok modułu Webhooków moduł HTTP zasługuje na Twoją szczególną

4:38uwagę, ponieważ jako full stack będziesz w stanie wykorzystać pełnię ich możliwości.

4:43Oczywiście tutaj sytuacja się nieco

4:44komplikuje w porównaniu do wykorzystywania natywnych modułów, ponieważ tutaj musimy

4:49określać strukturę danych samodzielnie, ale jednocześnie zyskujemy tą

4:52elastyczność, której nie mamy w przypadku natywnych modułów.

4:56Jednocześnie chciałbym zwrócić uwagę jeszcze na jedną rzecz, ponieważ

5:00większość modułów oferuje tzw.

5:01Make an API Call.

5:03Jest to niesamowicie przydatna funkcja ze względu na to, że jesteśmy w stanie

5:07wykorzystać połączenie, które utworzyliśmy sobie w Maku, a jednocześnie możemy tutaj

5:11kontaktować się bezpośrednio z API. Oczywiście z pominięciem tej kwestii

5:15autoryzacji, ponieważ jest ona zaadresowana już w tym miejscu.

5:19No i tutaj jeszcze w kontekście Make, ostatnią rzeczą, o której chciałbym Ci

5:22jeszcze powiedzieć jest możliwość tworzenia własnych aplikacji.

5:26Tutaj warto zajrzeć sobie do ich dokumentacji, która bardzo szczegółowo

5:30opisuje to, w jaki sposób możemy projektować własne moduły i oczywiście w

5:34momencie ich publikacji musimy przejść złożony proces weryfikacji,

5:37ale jednocześnie tego procesu nie musimy przechodzić na własne potrzeby lub też na

5:42potrzeby osób, którym bezpośrednio udostępnimy tą aplikację.

5:46Mianowicie chodzi o to, że przykładowo tutaj mamy jakąś totalnie testową

5:50aplikację i tutaj po jej opublikowaniu będzie taki przycisk Publish

5:54jesteś w stanie udostępnić link

5:56zapraszając innych użytkowników aplikacji Make do skorzystania z Twojego modułu.

6:00Zatem podsumowując, jeżeli chodzi o Make,

6:03jest to platforma, którą możesz wykorzystywać albo na swoje potrzeby do

6:06tego, aby tworzyć bardzo szybko różnego rodzaju integracje, w tym np.

6:10Makra Keyboard Maestro czy np.

6:12rozszerzenia Raycast,

6:13króre w moim przypadku również korzystają z Make.

6:16No i naturalnie też raczej nic nie stoi na przeszkodzie, o ile otrzymasz zgodę ze

6:20strony biznesu na to, aby wykorzystywać Make bądź podobne platformy w

6:24produkcyjnych aplikacjach i adresować z jej pomocą np.

6:28jakieś pojedyncze integracje z różnymi zewnętrznymi usługami.

6:32W moim przypadku nierzadko są to maile

6:34transakcyjne lub też właśnie obsługa formularzy.

6:36Jeżeli jednak z jakiegoś powodu Make nie

6:39przypadnie Ci do gustu lub też nie będziesz z różnych powodów mieć możliwości

6:42skorzystania akurat z tej platformy, to polecam Ci również zajrzeć na stronę n8n.io

6:47gdzie mamy do dyspozycji dość podobne narzędzie do samego Maka, ale

6:52jednocześnie jest to projekt, który możesz uruchomić również na własnej maszynie.

6:56Domyślam się, że dla części projektów może okazać się to szczególnie istotne,

7:01aczkolwiek w moim przypadku raczej nie było takiej potrzeby.

7:04No i ostatnim narzędziem, na które również

7:06warto zwrócić szczególną uwagę jest narzędzie Retool, w przypadku którego

7:10jesteśmy w stanie podłączyć dowolne źródło danych, łącznie z arkuszem google sheets

7:15do tego, aby wyklikać sobie różnego rodzaju internal toole.

7:18Czasem jest to panel administracyjny, czasem jakiś panel raportowy, bądź też

7:23jakiś bardziej rozbudowany formularz, z pomocą którego osoby zaangażowane w rozwój

7:27produktu mogą po prostu wchodzić z nim w interakcję.

7:30Jeżeli chodzi również o to narzędzie, nie

7:32będę go teraz pokazywał od środka, ponieważ nie chciałbym skupiać się na

7:36takich rozwiązaniach w programie o JavaScripcie.

7:38Jednocześnie po raz kolejny zaznaczam

7:40tylko, że właśnie znajomość JavaScriptu okazuje się bardzo przydatna zarówno w

7:44przypadku wykorzystania narzędzi takich jak Retool, n8n czy wspomniany Make.

7:49Mam nadzieję, że po tej lekcji przynajmniej spróbujesz utworzyć swój

7:52własny scenariusz i zobaczyć jak działają Webhooki czym moduł HTTP.

7:57Zakładam, że w momencie, gdy to zrobisz, w Twojej głowie pojawią się różnego rodzaju

8:01pomysły, w jaki sposób możesz wykorzystać Make w swoich projektach.

8:05Jednocześnie naturalnie polecam Ci

8:07zapoznać się chociażby z takimi funkcjami jak router, iterator, agregator czy też

8:12dostępne tutaj narzędzia do tworzenia zmiennych, parsowania tekstu, czy nawet

8:16jest tutaj moduł do pracy z obiektami JSON.

8:19No i w ten oto sposób doszliśmy już do końca tej lekcji.

8:22Dziękuję Ci za uwagę i zapraszam do kolejnych materiałów.