HTTP i API: Aplikacja notyfikująca API

0:02Cześć!

0:02Witaj w kolejnej lekcji, w której wiedzę, którą masz zastosujemy trochę bardziej może w

0:06praktyce, bo pokażę Ci jak można zacząć przynajmniej pracować nad taką

0:10aplikacją, która będzie notyfikować nasze Webhooki.

0:13Generalnie to jest tak, jeżeli będziesz chciał stworzyć swoją jakąś aplikację, która

0:17korzysta z różnych danych i z różnych API np.

0:19po to, żeby zlokalizować użytkownika i

0:21wyświetlić go ładnie na mapce, albo wyświetlić jakieś posty czy zdjęcia z

0:25Instagrama, możesz łatwo to zrobić korzystając z API, ale rzeczywiście musisz

0:29teraz przystąpić do pisania własnej aplikacji.

0:32Możesz ją napisać w technologii takiej jak JavaScript.

0:35Pamiętaj jednak o tym, że w przypadku

0:38tej wymiany danych z API, w momencie, kiedy w każdym request

0:42potrzebujemy podać nasze te sekretne dane, czyli jakieś API Key itd.

0:47robienie tego z pomocą JavaScript może się okazać dość ryzykowne, bo ktoś może te

0:51dane przechwycić i autoryzować się Twoimi danymi do tego API.

0:54W związku z tym najczęściej robi się to w troszeczkę inny sposób.

0:58Nawet tym takim serwerowy JavaScript, czyli z pomocą Node.js.

1:02I teraz proponuję, żebyśmy najpierw stworzyli sobie nasz własny endpoint,

1:07czyli przejdziemy na pipedream i wybierzemy jeszcze raz create endpoint.

1:11No i mam taki endpoint.

1:12Możemy sobie zrobić prostą JavaScript aplikację, więc skopiuje kawałek kodu

1:16JavaScript potrzebnego do tego, żeby wysłać coś pod ten endpoint, a następnie

1:20przejdę do aplikacji i do strony, która nazywa się glitch.

1:24I na glitch możesz wyewoluować sobie takie środowisko, nawet serwerowe,

1:29nie musisz instalować u siebie Node.js a innych różnych rzeczy

1:32możesz bardzo łatwo w tym edytorze glitch tworzyć sobie takie proste aplikacje.

1:36Oprócz tego Glitch jest świetną

1:37społecznością, gdzie masa ludzi tworzy podobne aplikacje.

1:40Możesz pomyśleć o Glitch jako takim

1:42AppStore, miejscu gdzie jest masa jakichś różnych aplikacji,

1:46tyle, że te wszystkie aplikacje są darmowe i są otwarte.

1:49To znaczy, że możesz podejrzeć ich kod,

1:51możesz nawet ten kod skopiować, sklonować,

1:54a następnie dostosować te aplikacje do swoich potrzeb.

1:57Więc glitch jest świetny, polecam Ci z niego skorzystać.

2:00Stworzę teraz sobie tutaj nowy projekt. Mogę tworzyć jakiś stateczny projekt,

2:03albo mogę stworzyć sobie prostą aplikację w Node.js postawioną na właśnie Glitch.

2:11I teraz ta aplikacja się dla mnie tworzy.

2:13Zobacz, że zostały wygenerowane różne

2:15pliki, nawet taki plik zawierający jakieś sekretne różne nasze klucze.

2:20Gdyby ten glitch był publiczny one nie będą wtedy widoczne dla innych osób.

2:23Gdybyśmy chcieli przekazać tutaj np.

2:25właśnie te nasze klucze do API

2:26to jest dobre miejsce.

2:28My tego na razie nie potrzebujemy robić.

2:29Zobaczmy w ogóle, jak wygląda ta nasza

2:31aplikacja, kliknę show live i coś tutaj jest.

2:34Ona pozwala nam coś tutaj wpisać i dopisuje różne sny do jakiejś naszej listy.

2:40Czyli powiedzmy to jest taka prosta

2:41aplikacja todo listy, ale my chcielibyśmy ją oczywiście sobie

2:45trochę zmodyfikować. I jeśli chodzi o sam widok

2:47w zasadzie może zostawię nawet tą część, czyli usunę

2:51może tutaj sobie nasza nowa aplikacja wpiszemy,

2:57ale zostawię sam formularz i z pomocą tego formularza

3:05będziemy mogli, tutaj tylko domknę sekcję main,

3:08będziemy mogli wysłać jakieś dane.

3:10Na razie nie będziemy z niego korzystali

3:12przejdziemy do tej sekcji client.js,

3:14wyrzucę cały ten kod JavaScript, który tutaj jest i wstawię ten nasz, który

3:19wysyła name Darth Vader do endpointa, do naszego endpoint, który tutaj mamy

3:25czyli na tego naszego webhooka.

3:28I w zasadzie glitch się zapisuje

3:29automatycznie. W momencie gdy przejdziemy do naszego endpointa

3:32zobacz, że coś tutaj już jest.

3:33Czyli dostaliśmy już Darth Vadera dlatego, że po prostu ten skrypt nam się uruchomił,

3:38wykonał i działa, czyli voilà, z naszej prostej aplikacji

3:41umiemy już notyfikować API, wysyłać do niego poszczególne zapytania.

3:45Super!

3:46Możemy teraz trochę zmodyfikować to zapytanie.

3:49Na przykład zrobić to w ten sposób, że

3:51stworzymy sobie tutaj dodatkową funkcję, którą nazwiemy sendit, a następnie

3:58zapakujemy to wszystko w tą funkcję

4:02i będziemy ją wywoływać po kliknięciu w nasz przycisk.

4:05Tutaj mamy button i możemy dodać do niego atrybut onclick,

4:10a następnie wpisać sobie, że chcemy teraz wywołać tą funkcję sendit,

4:16a następnie samo się zapisuje, więc wystarczy, że wejdziemy tutaj

4:20w Show live, otworzymy sobie tą naszą aplikację i teraz możemy po prostu kliknąć Submit.

4:26Zobacz, że na razie ok, dostaliśmy jakiegoś posta, jeszcze się jeden raz

4:30zdarzyło to wykonać, ale teraz już nic nie dostajemy, mamy tylko dwa.

4:35Natomiast teraz jak klikniemy submit

4:37to jest wykonywana nasza funkcja i proszę bardzo, dostaliśmy kolejnego Darth Vadera.

4:42Gdybyśmy chcieli

4:44zamiast Darth Vadera wysyłać tutaj coś bardziej interesującego, możemy spróbować

4:48to pobrać z pola input, które mamy w HTML.

4:52Czyli w HTML jest input name dream i z tego pola możemy wyciągnąć dane.

4:58Możemy to zmienić na

5:01przykład na identyfikator, zaznaczyć sobie, a następnie w kodzie

5:05JavaScript wyciągnąć te dane, zrobić sobie tutaj jakąś

5:11stałą, może jakąś zmienną,

5:14nazwiemy ją np.

5:16imię,

5:17teraz pobierzemy sobie do tego imienia, weźmiemy document, następnie getElementById,

5:25czyli pobierzemy sobie po

5:28identyfikatorze, ten nasz identyfikator to jest dream.

5:32I teraz wyciągniemy z tego value czyli wartość a następnie to imię przekażemy

5:37sobie zapytaniu zamiast name będziemy mieli imię.

5:40I tutaj już nie w cudzysłowie,

5:42po prostu przekażemy imię.

5:45Okej, teraz możemy sobie to przetestować.

5:47Czyli przechodzę do show live, otwieram naszą

5:50apkę dobra, a następnie wpisuję moje imię Grzegorz i wybieram polecenie submit.

5:58Następnie wracam i w poście dostaję tutaj

6:01imię Grzegorz, więc jak widzisz udało nam się już coś tutaj fajnego wysłać.

6:06I teraz zakładając, że np.

6:07chciałbyś, żeby nasz formularz wysyłał

6:10wiadomości pisane w input na Slacka, to w ten sam sposób możesz

6:13wrócić sobie do Postman, następnie mam to zapytanie do Slacka tutaj.

6:17Postman ma jedną fajną rzecz.

6:19Jeżeli wejdziesz w polecenie code, ten Curl, który skopiowałem ze Slacka możesz

6:24zamienić na dowolny inny język programowania np.

6:26na JavaScript,

6:27tutaj akurat z Jquery, ale chyba na Glitch to też jest,

6:32mógłbyś to skopiować, wkleić do naszego przykładu i wtedy zamienić odpowiednie

6:36rzeczy tak aby to co wpisujemy było wysyłane wiadomością na slacku.

6:40Więc już widzisz jak można stworzyć prostą

6:42aplikację, która komunikuje się z webhook np.

6:45wysyła coś do serwisów do Slacka.

6:47Może rzeczywiście na tej samej zasadzie w naszej aplikacji z pomocą GET odbierać dane

6:51z różnych serwisów takich jak Twitter, Instagram.

6:54Masz myślę, że wszystkie informacje, które są do tego potrzebne,

6:57więc to wszystko na teraz.

6:58Nie będę chciał dodatkowo już tego rozszerzać, bo może zacząć się robić dużo

7:01trudniej, ale uwierz mi, że powinieneś mieć teraz dużo lepsze rozumienie tego,

7:06jak funkcjonuje HTTP i jak funkcjonują API.

7:13Ja już na to nie będę teraz tracił Twojego cennego czasu.

7:15Byłoby to tylko powtarzanie i zamiana danych,

7:17natomiast najważniejsze jest dla mnie to, że powinieneś teraz już dużo lepiej

7:21orientować się na temat tego, jak działa sam protokół HTTP, ale jak w ogóle działa

7:26cały internet, jak wymieniane są dane między aplikacjami tymi nowoczesnymi,

7:30gdzie nie mamy takiego starego schematu typu klient serwer, ale po drodze mamy tą

7:34architekturę API, która właśnie może być obsługiwana przez wiele różnych aplikacji.

7:39Ale też wiesz jak będziemy mogli

7:42komunikować się nawet z klientem z pomocą webhooks.

7:44Ta cała wiedza pozwoliła nam stworzyć

7:46prostą aplikację, która może notyfikować np.

7:49Slacka, czyli

7:51takie pole, w które coś wpiszesz i pojawia się jako wiadomość na Slacku,

7:54ale możesz oczywiście to rozszerzać.

7:55Polecam Ci poeksperymentować z kilkoma

7:58popularnymi API, takimi jak API, Facebooka, Instagrama, YouTuba, zobaczyć

8:02jakie dane możesz stamtąd wyciągnąć i zacząć tworzyć

8:05nawet w Glitch jakieś swoje proste aplikacje.

8:07Gwarantuję Ci, że to jest bardzo ciekawa i przyjemna rzecz.

8:10Ja już w kolejnej lekcji tylko podsumowując chciałbym przypomnieć kilka

8:15najważniejszych pojęć, których nauczyliśmy się tutaj

8:17a więc do usłyszenia już za chwilę.