Webhooki to potężne narzędzie automatyzujące wymianę danych między systemami, ale ich testowanie w środowisku lokalnym bywa wyzwaniem. W najnowszym odcinku podcastu omawiam, jak wykorzystać Ngrok, aby debugować requesty, symulować dane i przyspieszyć integracje z WordPressem. Poznaj krok po kroku, jak wykorzystać to narzędzie, aby zyskać pełną kontrolę nad requestami i efektywnie debugować swoje projekty. Gotowy na usprawnienie swojej pracy? Sprawdź szczegóły!
🎥 Partner odcinka: cyber_Folks – 20% rabatu na hosting WordPress z kodem podcast!
🔗 Link do Ngrok: ngrok.com
Podcast dostępny m.in w: Spotify, Apple Podcasts, Google Podcasts
TRANSKRYPCJA AUTOMATYCZNA:
Cześć, witam się z wami po dosyć długiej przerwie, bo prawie rok, gdzie nie było mnie w tym podcastowym świecie. Jakiś czas temu wyszedł odcinek z organizatorami WordCampa we Wrocławiu i to był taki, można powiedzieć, pierwszy odcinek po przerwie. Natomiast dzisiaj jest taki odcinek, gdzie mogę troszkę więcej powiedzieć na temat tego, czego się możesz spodziewać i jak to wszystko teraz będzie wyglądało.
Właśnie te spotkania z wami gdzieś tam na konferencjach, na WordUpach, WordCampach uświadomiły mi to, że mimo że nie nagrywam od dłuższego czasu, bo ostatni odcinek wyszedł w Sylwestra 2023, czyli na ten moment jest to prawie rok, cały czas pytaliście, czy wracam, kiedy kolejny odcinek, czemu już nie nagrywam, bo słuchaliście. Stwierdziłem, że trzeba to tak zorganizować, żeby z powrotem gdzieś tam być w kontakcie z wami i móc publikować te odcinki. Plan jest taki, żeby teraz po tej przerwie publikować tak 2-3 odcinki w miesiącu.
Partnerem podcastu oczywiście nadal jest marka Cyberfolks, od której możesz kupić domenę bądź hosting. Z kodem podcast pisanym przez C możesz otrzymać 20% rabatu na hosting WordPress, więc jeśli szukasz hostingu, to być może jest to właśnie propozycja dla Ciebie.
Do produkcji tego podcastu będę miał również wsparcie. To jest właśnie pierwszy odcinek, który będzie montowała Kamila. Kamila, pozdrawiam Cię tutaj, jeśli pracujesz właśnie w tym momencie nad tym. To też myślę pomoże w tym, że ten podcast po prostu będzie wychodził, bo Kamila odciąży mnie w tych wszystkich czynnościach i w tej pracy, która pojawia się po wyłączeniu mikrofonu, a przed tym jak ten podcast finalnie trafia do waszych aplikacji podcastowych. No a tam pomiędzy tym wszystkim jest jeszcze sporo takich rzeczy, o które trzeba zadbać. Więc teraz z nowym wsparciem będę miał większe szanse powodzenia na to, aby dostarczać wam ten podcast.
U mnie też można powiedzieć zaszły drobne zmiany, jeśli chodzi o to WordPressowe zawodowe życie. Oczywiście nadal współpracuję z White Label Coders. Tam się zmieniła troszkę moja rola. Przeszedłem na stanowisko lidera i leaduję na tzw. linii supportowej, gdzie obsługujemy i rozwijamy projekty naszych klientów. I ta linia supportowa to jest naprawdę ogromna kopalnia tematów na odcinki. Także to wszystko fajnie gdzieś tam się łączy. Miałem do czynienia z bardzo różnymi przypadkami, bardzo różnymi projektami. Właśnie dzisiejszy temat odcinka wziął się z jakiegoś tam zadania, które realizowałem właśnie w White Label Coders.
A w dzisiejszym odcinku zajmiemy się webhookami i takim narzędziem jakim jest Ngrok. I tutaj będę mówił o tych webhookach z punktu widzenia dewelopera, który musi obsłużyć taki webhook gdzieś tam w swojej wtyczce. U mnie akurat scenariusz wyglądał tak, że musiałem obsłużyć webhook przychodzący z MailerLite. Chodziło o to, że po zapisaniu się na przykład na jakiś tam newsletter, czy pobraniu jakiegoś lead magnetu z landinga takiego w WordPressie, WordPress musiał dostać informacje o tym i ewentualnie przekazać jakieś tam dane z powrotem do MailerLite’a. Tu nie wchodzę w szczegóły, bo one są zupełnie nieistotne z punktu widzenia tego odcinka.
Nad wtyczką, która miała obsługiwać cały ten mechanizm, pracowałem na środowisku lokalnym opartym o Dockera. W tym przypadku nie ma to większego znaczenia, ale środowisko lokalne działało na moim komputerze i oczywiście nie było widoczne z internetu. No bo było uruchomione właśnie na moim lokalnym komputerze. Co za tym idzie, testowanie tych webhooków w takich warunkach jest niemożliwe, bo MailerLite nie jest w stanie mi wysłać tego requestu do WordPressa, który jest na moim lokalnym komputerze i nie jest widoczny ze świata.
Zacząłem tutaj się zastanawiać, jak podejść do tego tematu – czy może robić to gdzieś na jakimś serwerze, który jest widoczny ze świata i tam to dewelopować. No ale stwierdziłem, że muszą być jakieś inne rozwiązania i kiedyś słyszałem o czymś takim jak Ngrok. Ngrok sprawdził się tu idealnie. Zapewnił mi to, że moje środowisko lokalne jest widoczne właśnie ze świata, internetu, i MailerLite mógł wysłać ten request do mnie, do mojego WordPressa, który był hostowany na Dockerze na moim komputerze.
Tutaj jeszcze takie małe wprowadzenie dla osób, które nie bardzo wiedzą, co to są webhooki i na czym polega zasada ich działania. Najprościej mówiąc, webhook to jest taki mechanizm, który wysyła informacje na jakiś adres URL po wykonaniu jakiejś tam akcji. I te webhooki są używane choćby w WooCommerce, gdzie np. po złożeniu zamówienia albo opłaceniu zamówienia taki webhook może się wykonać i wysłać informacje na jakiś zdefiniowany adres. Ten URL to jest cel tej naszej wysyłki, punkt do którego wysyłamy te dane. Sama treść requestu, czyli tzw. payload, zawiera wszystkie informacje dotyczące danego zdarzenia. I podobnie to działa w innych systemach, np. w systemach związanych z płatnościami, które informują o tym, że dana płatność została zaksięgowana. Ta informacja musi dotrzeć do naszego WordPressa – wtedy to system płatności wysyła request do naszego WordPressa, a WordPress go obsługuje.
Bardzo podobnie było w przypadku tej wtyczki, którą pisałem, tylko że tutaj źródłem tego requestu był MailerLite i wysyłał go do WordPressa. Żeby to wszystko połączyć, użyłem właśnie narzędzia, jakim jest Ngrok. Ngrok jest dosyć potężnym narzędziem, a to, w jakim kontekście ja go omawiam w tym odcinku, to tak naprawdę wierzchołek góry lodowej. On ma dużo, dużo większe możliwości.
Natomiast to, co też jest bardzo istotne, to fakt, że ja w zasadzie po wejściu na stronę Ngroka i szybkim zainstalowaniu programu, minutę później miałem rozwiązany problem tego, że moje środowisko lokalne jest niewidoczne z internetu. Wystarczyło pobrać malutki program Ngrok. Ja akurat pracuję na Macu, więc to była dosłownie jedna linijka w terminalu i już mogłem uruchomić sobie taki tunel. Tu jeszcze jest taka zależność, że jeśli zarejestrujecie się na stronie Ngroka, to darmowy plan jest w zupełności wystarczający, a ten adres, który jest stworzony, jest stały. Jeśli pracujecie kilka dni z rzędu, to nie ma problemu, że dostajecie randomowy adres i musicie wysyłać nowe linki. Wracając do samego Ngroka, po pobraniu programu i zainstalowaniu go, możemy otworzyć terminal i wpisać jedną prostą komendę, która uruchomi tunel do naszego środowiska lokalnego. Na przykład, jeżeli nasz lokalny serwer działa na porcie 80, wpisujemy ngrok http 80. To, co się wtedy dzieje, to Ngrok generuje unikalny adres URL, który jest publicznie dostępny w internecie, i kieruje ruch z tego adresu bezpośrednio na nasz lokalny serwer. Dzięki temu np. MailerLite może wysłać request na ten adres, a my możemy odbierać webhooki tak, jakby nasz serwer był fizycznie widoczny w sieci.
To rozwiązanie jest o tyle świetne, że działa nie tylko z WordPressem, ale właściwie z każdą aplikacją webową, jaką mamy na swoim komputerze. Możemy je również wykorzystać w wielu innych scenariuszach. Ngrok umożliwia na przykład tunelowanie do serwisów, które wymagają HTTPS. Dla mnie to było bardzo pomocne, bo MailerLite wymagał takiego właśnie bezpiecznego połączenia. Ngrok obsługuje HTTPS, więc nic nie musiałem konfigurować dodatkowo, wszystko po prostu działało.
W trakcie testowania tego rozwiązania można też podejrzeć, jakie requesty przychodzą na nasz lokalny serwer. Ngrok ma swój interfejs, który pozwala na analizę requestów – widzimy, co dokładnie zostało wysłane, jakie dane przyszły, jaki był nagłówek, status odpowiedzi, i to wszystko w bardzo czytelnej formie. Dzięki temu można szybko debugować problemy i sprawdzić, czy webhook działa poprawnie.
To rozwiązanie przydało mi się też później, w innych projektach, bo tak naprawdę Ngrok nie ogranicza się tylko do jednego zastosowania. Jest to uniwersalne narzędzie, które pozwala na bardzo szybkie i wygodne testowanie aplikacji webowych w warunkach zbliżonych do tych, jakie mamy na produkcji.
Podsumowując, jeśli kiedykolwiek będziesz musiał(a) pracować z webhookami na środowisku lokalnym, to Ngrok jest zdecydowanie rozwiązaniem, które warto znać. Nawet jeśli na co dzień nie pracujesz z tego rodzaju mechanizmami, to po prostu warto mieć to narzędzie w swojej deweloperskiej skrzynce z narzędziami. Z perspektywy mojej pracy nad WordPressem – naprawdę ułatwia życie i oszczędza mnóstwo czasu.
To tyle, jeśli chodzi o dzisiejszy temat. Mam nadzieję, że ten odcinek był dla Ciebie przydatny i może zainspiruje Cię do korzystania z Ngroka w Twoich projektach. A jeśli masz pytania lub sugestie na kolejne tematy, które powinienem poruszyć, to śmiało pisz do mnie – czy to na maila, czy przez media społecznościowe.
Dzięki, że byłeś/byłaś tutaj ze mną, i do usłyszenia w kolejnym odcinku!
