HTTP i API: Działanie API

0:02Cześć! Wiesz już naprawdę dużo o tym, jak

0:04działają API i jak działa komunikacja klient serwer.

0:07Można więc powiedzieć, że Twoją wcześniejszą wiedzę powinieneś teraz

0:10zastąpić tym, że w momencie kiedy wysyłasz jakieś zapytanie z przeglądarki np.

0:13paska adresu, to tak naprawdę najpierw ona

0:15komunikuje się z API po to, żeby z serwera zwrócić Ci odpowiednie dane dopasowane np.

0:21do Twojego statusu po zalogowaniu, po to,

0:23żeby wyświetlić przykładowo ostatnio oglądane filmy na Netflixie i dopiero wtedy te dane w

0:28ramach strony internetowej są serwowane dla Ciebie w przeglądarce.

0:32Netflix to całkiem niezły przykład, bo ma aplikacje mobilne chyba na wszystkie

0:37platformy i urządzenia, włącznie z PlayStation, Xboxami itd.

0:41i to wszystko korzysta z jednego API i musi Ci

0:43wyświetlić te filmy, które ostatnio oglądałeś

0:46a nawet Netflix potrafi zapamiętać progres, czyli Twój postęp,

0:50to gdzie skończyłeś oglądać. To wszystko dzieje się przez API i te informacje do

0:54dowolnej aplikacji przez API są dostarczane.

0:57Teraz skoncentrujmy się na tym, jak

0:59technicznie działa i wygląda wymiana tych informacji.

1:02Weź np. Ubera.

1:03W momencie kiedy zamawiasz taksówkę, dostajesz od razu informację o tym, w

1:07którym miejscu jest określony kierowca, który do Ciebie jedzie.

1:11No i teraz z punktu widzenia klienta w

1:13schemacie, w którym omówiliśmy wygląda to tak, że co jakiś czas Twój telefon musi

1:18wysyłać zapytanie do Ubera, gdzie jest aktualnie taksówka, na jakich koordynatach

1:24Latitude i Longitude i wtedy na mapę jest noszona jego aktualna pozycja.

1:29Wygląda to tak jakby do Ciebie jechał, ale

1:31trzeba co chwilę odpytywać serwer o pozycję kierowcy.

1:34Czyli ten czas jest ustawiony np.

1:36nie wiem co 10 czy co 5 sekund i wtedy ta

1:38pozycja na mapie jest aktualizowana, bo wysyłasz request, dostajesz odpowiedź o

1:43nowych koordynatach, jest to nanoszone na aplikację.

1:46Jednak jak możesz sobie wyobrażać taki przebieg,

1:50taka sytuacja nie jest zbyt korzystna, bo np.

1:53jeżeli taksówkarz zatrzyma się na

1:55skrzyżowaniu na minutę, to tak naprawdę odpytuje mamy o to samo położenie,

1:59tymczasem generujemy ruch serwerowy. Czyli zapytaliśmy co 5 sekund np.

2:04kilkadziesiąt razy i ciągle dostajemy od serwera tą samą odpowiedź.

2:08Oczywiście w przypadku małych aplikacji

2:10nie ma to jakiegoś wielkiego znaczenia. Ale jeśli mówimy o Uberze ma ogromne

2:14znaczenie i przekłada się znacząco na koszt pracy tego serwera, na koszt

2:19wykonywania tej aplikacji po stronie serwera.

2:21Dlatego poza tym standardowym schematem

2:24klient wysyła zapytanie i dostaje odpowiedź, który nazywamy tzw.

2:28Poolingiem to jest od Pool.

2:30Jeżeli miałbym Ci to wytłumaczyć na

2:31jeszcze jednym przykładzie, to w standardowym schemacie Poolingu mamy coś

2:35takiego, gdzie klient wysyła do serwera informację np.

2:39jeśli zamawiamy pizzę to powiedzmy podaj

2:41mi informację z pomocą GET o zamówieniu numer 5 i serwer odpowiada mi statusem np.

2:48zamówiono.

2:49Za chwilę go pytam znowu z aplikacji i klikam sobie guzik np.

2:52sprawdź status i pytam znowu daj mi informację o tym zamówieniu 5,

2:55serwer powie mi w tym momencie OK,

2:58teraz status to jest w trakcie pieczenia.

3:00Później zapytam go jeszcze raz i

3:02powiedzmy, że serwer odpowie mi w dostawie.

3:05Tyle, że po drodze mogę wykonać 1000

3:07zapytań, na które serwer odpowie mi tak samo.

3:09Więc mamy drugi schemat, który nazywany

3:11jest Long Pooling i polega on na tym, że ja jako klient wciskam ten guzik

3:15zaktualizuj informacje o moim zamówieniu i

3:18po prostu wysyłam GET do serwera np. informację pod tam endpoint Order 5, który

3:23złożyłem i teraz serwer czeka sobie na zmianę.

3:27Czeka, czeka, czeka.

3:28W momencie kiedy pizza się upiecze to

3:30dopiero wtedy wysyła mi status z informacją, że jest ona w dostawie,

3:34czy zmieniła właśnie status.

3:37Oprócz tego Pooling i Long Pooling

3:39jest jeszcze jeden bardzo ciekawy schemat, który często się wykorzystuje.

3:42Są to tzw. Webhooks.

3:44Webhooks to bardzo ciekawa konstrukcja, która można powiedzieć w pewnym

3:47uproszczeniu, że sprawia, że sam klient staje się też serwerem.

3:51No bo problem serwera polega na tym, że on tak naprawdę nie za bardzo wie kto jest

3:56klientem i musi dostawać te pytania po to, żeby mógł na nie odpowiadać.

4:01Zauważ, że w każdym tym pytaniu musi

4:03być ta autoryzacja, ten nagłówek autoryzacyjny, razem z kodem sekretnym itd.

4:08I jakby tu każde zapytanie z uwagi na to co Ci powiedziałem o protokole HTTP, że on zapomina,

4:14jest unikalne i serwer musi na nie odpowiadać.

4:17I teraz w związku z takim schematem mamy

4:20sytuację, w której serwer tak naprawdę nie bardzo wie kogo poinformować, jeżeli np.

4:25zmieni się u niego status.

4:27W takim schemacie klient musiałby też stać

4:29się serwerem, czyli mieć jakiś konkretny endpoint.

4:32Ja jako Grzegorz, moja przeglądarka albo moja aplikacja Uber musiałaby legitymować

4:38się jakimś adresem do protokołu HTTP, czyli jakimś moim prywatnym adresem, który

4:44serwer mógłby od razu zaatakować takim powiadomieniem.

4:48I w przypadku Webhooks

4:49tak właśnie wygląda ten schemat.

4:50To my jako klient mówimy, że słuchaj serwerze albo wszystkie serwery świata,

4:55ja jestem dostępny pod adresem Grzegorz.Róg/Powiadom mnie

4:59i serwery, które subskrybują

5:02ten nasz adres przyjmują to do informacji i wtedy, kiedy dzieje się jakaś akcja,

5:07która wymaga powiadomienia nas, wysyłają nam automatycznie wiadomość.

5:11Tak właśnie działają np. powiadomienia SMS owe.

5:15Jeżeli jesteś zapisany na subskrypcję powiadomienia SMS owego np.

5:19o jakimś webinarze, który ma się odbyć, to

5:21w momencie, kiedy na serwerowym zegarze zmienia się godzina np.

5:26na za 10 webinar wtedy jest odpalana akcja

5:30wysyłamy do wszystkich subskrybentów pod konkretny numer danego SMS a.

5:36No tylko właśnie tutaj mamy ich numer, czyli numer telefonu czy np.

5:39numer Whatsapp, na który możemy automatycznie wysłać tą informację

5:43a w przypadku przeglądarki takiego zwykłego klienta nie mamy tego numeru.

5:46Nawet adres IP nie jest dla nas taką

5:48informacją, bo on przecież może być zmienny.

5:51W związku z tym klient w przypadku Webhooks

5:53wystawia dla serwera taki adres, na który może być notyfikowany.

5:58Tak w skrócie to działa, ale pokażę Ci

5:59konkretnie co możemy z tym zrobić i dlaczego to jest bardzo fajne.

6:03Na stronie Pipedream możesz stworzyć sobie swój własny endpoint.

6:07Wybieram polecenie Create endpoint.

6:09Jeśli już kojarzysz tą naszą nomenklaturę,

6:11no to właśnie endpoint będzie tą końcówką API, do której ktoś może się dostać.

6:15I teraz ja mam swój unikalny endpoint pod

6:17adresem jakimś takim dziwnym na domenie pipedream.net.

6:21Mogę go skopiować,

6:22on jest tylko mój i wszystkie rzeczy,

6:25które na niego przyjdą będę mógł otrzymywać tutaj.

6:28Te wszystkie request czyli ja działam jako serwer.

6:30Mam tutaj informacje Waiting for first request

6:32czyli on cały czas nasłuchuje czy jakiś request zostaje do mnie wysłany.

6:36Przy okazji mam tutaj różne kody JAVASCRIPT, CURL, NODE itd.

6:41które mogą zostać użyte po to, żeby mnie notyfikować.

6:46Weźmy CURL i po prostu to skopiuję do terminala.

6:50Tak będzie nim najprościej i zobacz.

6:51Jest to komenda, która pozwoli wysłać parametr,

6:55czy w zasadzie to jest taki widzisz JSON gdzie mamy klucz wartość name Yoda

6:59na naszą aplikację. Wysłamy z pomocą return, mam informację zwróconą od

7:05serwera czyli mnie w tym momencie, że się udało success true

7:08i mogę zobaczyć, że tutaj już dostałem coś postem, klikam i patrzę,

7:15rzeczywiście mam tutaj informacje Yoda.

7:18Gdybym chciał w ten sposób złożyć do siebie zamówienie o pizzę, mógłbym to

7:22zrobić, ale prawdopodobnie wtedy skorzystałbym już z Postmana,

7:26no i tutaj jest coś takiego jak możliwość zaimportowania np.

7:31Paste Raw Text i wklejam sobie ten curl,

7:35wybieram polecenie import,

7:36ładnie mi się to zaim,portowało

7:38tutaj mam metodę POST

7:41mamy odpowiedni adres

7:43i jako parametry tego nie mam co chciałem przekazać, ale w samej treści mam tego

7:49prostego JSON Name Yoda, mogę przełożyć to na imię Grzegorz

7:55jak również wygenerować sobie jakiś nawet bardziej złożony schemat JSON

7:58tak jak Ci pokazałem i wybieram polecenie send i wysyłam kolejną

8:03informację od serwera z powrotem dostaję w treści informację o sukcesie.

8:08W nagłówku będzie to kod 200

8:09prawdopodobnie.

8:11A to co mogę sobie tutaj zobaczyć to jest

8:12kolejna rzecz, którą otrzymałem postem, czyli imię Grzegorz.

8:16Czyli teraz potrafię zrobić

8:19tak, że możesz sobie testować takie zapytania uruchamiając swój własny

8:23endpoint na pipedream i po prostu z pomocą Postman sobie testować różne formaty

8:27danych, wysyłać tutaj, sprawdzać te odpowiedzi.

8:30No i właśnie tak działają Webhooks. Będąc subskrybentem na takim webhook

8:35można wyobrazić sobie sytuację, kiedy

8:37integrujemy różne aplikacje, z których korzystamy i weźmy np.

8:42Slacka.

8:43Slack oferuje możliwość integracji Webhook, dzięki czemu jeżeli np.

8:47coś wydarzy się w naszej aplikacji, nie wiem, klient dokona zakupu, to możemy wtedy z

8:53pomocą Webhook wysłać z tego serwera na Slacka powiadomienie.

8:57Jak to zrobić?

8:58Żeby to zrobić korzystam z API Slack, więc wchodzę na API Slack

9:01jestem tutaj zalogowany jako jeden z administratorów jakiejś grupy na Slack,

9:05w związku z tym mogę na niej utworzyć sobie testową aplikację.

9:08Utworzyłem taką aplikację TestApp i teraz w sekcji Incoming Webhooks będę musiał sobie

9:13aktywować nasłuchiwanie tych Webhook przez Slacka.

9:17Jeżeli to zrobię to będę w tym momencie miał wygenerowany taki specjalny URL.

9:24Na razie muszę jeszcze dodać webhooka do

9:27jakiegoś workspace, czyli klikam sobie Add to Workspace.

9:30Muszę autoryzować się w jakimś kanale albo np.

9:35dla konkretnej osoby, do której będę mógł

9:37wysyłać wiadomości, więc będę chciał wysłać do siebie.

9:40Wybieram polecenie Authorize i autoryzuje się

9:43teraz już od Slacka mam konkretny adres

9:46Webhook URL i pod tym serwisem Slack będzie nasłuchiwał wszystkiego co

9:52tam przyjdzie i publikował to do mnie jako wiadomości.

9:55Oczywiście można doczytać sobie

9:57szczegółowe dokumentację jak powinien wyglądać taki format i tak dalej, ale

10:01zamiast tego można po prostu skopiować sobie ten sample curl request, czyli

10:07wybierzmy tutaj copy i możemy na razie spróbować to wywołać po prostu z konsoli.

10:12Czyli jeśli masz zainstalowanego curl wybierasz sobie właśnie to.

10:17Jak widzisz jest metoda POST.

10:19Ma to jakieś nagłówki headers czyli Content-type,

10:21application/json czyli wysyłamy JSON data, informacje,

10:26będzie to tekst Hello, World na konkretny adres danego hooka.

10:30Rzecz jasna mógłbym sobie treść tej wiadomości zmienić, ja już teraz

10:33nie będę tego robił, tylko po prostu wciskamy enter.

10:36Dostałem ze Slacka odpowiedź OK, a to znaczy, że jeśli teraz przejdę do Slacka

10:40akurat mam wyłączone celowo powiadomienia, ale jeśli wejdę do Slacka, zobacz, że mam

10:45od aplikacji TestApp powiadomienie Hello World.

10:49Mógłbym to samo zrobić sobie przykładowo z Postmana.

10:52Przejdźmy na moment do Postman.

10:54Zapytanie, które stworzę,

10:57nie będę robił już nowego, chociaż może zrobię nowe control n nowy request, damy mu

11:02nazwę test i możemy go wrzucić nawet do Twittera API.

11:07Wszystko jedno, ale nie chcę mieć tych wszystkich nagłówków.

11:10Jeżeli mam curl, to mogę wybrać polecenie

11:13Import Paste Raw Text i ten curl zamienić sobie na zapytanie.

11:18Mamy dobrą metodę wybraną i jeśli chodzi o nagłówki też są dobrze przekazane.

11:24W parametrach nic tutaj nie ma, ale w

11:25treści body mamy tekst Hello World i mogę tutaj sobie wpisać np.

11:30Hello Again,

11:34a następnie to wysłać.

11:35I w tym momencie znów dostaję zwrotną

11:37informację od Slacka OK, wszystko się udało.

11:40A na Slacku mam kolejną wiadomość Hello Again.

11:43W ten sposób mogą różne serwisy komunikować się ze sobą.

11:47My ze szlakiem, a nasz serwis też np.

11:49z aplikacją księgową, która wystawia np.

11:52faktury automatycznie po zakupie w momencie, gdy zakup jest wykonany.

11:56Możemy wysyłać różnego rodzaju

11:57notyfikacje, maile i jeszcze masę, masę innych rzeczy.

12:01A to wszystko w bardzo prosty sposób z pomocą Webhook, czyli z pomocą tego, że

12:06dany serwis będzie pod jakimś adresem nasłuchiwał tego, co do niego wysyłamy.

12:10I to już wszystko w tej lekcji,

12:12ale zostań ze mną, ponieważ w kolejnej

12:14napiszemy sobie fajną, prostą aplikację i pokażę Ci też jak działa Glitch i jak z jego

12:18pomocą będziemy mogli wysyłać podobne Webhooki.

12:21Do usłyszenia.