Szeroka Perspektywa Full-Stack Web Developmentu: Payload po stronie clienta

0:00W tym momencie pokażę Ci, w jaki sposób pracować z Falloutem zarówno po stronie

0:04frontendu, więc w pewnym sensie może to być dla Ciebie powtórzenia, a jednocześnie

0:09będziemy korzystać z backendu, który przygotowałem na potrzeby tej lekcji i

0:13będziemy do niego również zaglądać w kolejnej.

0:16Zacznijmy od tego, że przeniesiemy się do

0:18naszego projektu, który jest niczym innym jak starterem WiP.

0:22Mamy tutaj jeden plik, który wykorzystamy do tego, aby za pomocą Fetch API

0:26skontaktować się z naszym backend w celu przesyłania informacji.

0:30Pierwszym endpoint będzie tutaj localhost 3000 slash tekst.

0:35Backend przygotowany jest w taki sposób, aby akceptować dane, które.

0:39Tak jak powiedziałem, w tym przypadku mogą być przesłane wyłącznie za pomocą np.

0:43metody POST, czyli takiej, która umożliwia przesłanie ciała zapytania.

0:47I teraz musimy ustawić odpowiednie nagłówki, aby zarówno serwer jak i nasz

0:51klient wiedzieli czego mają się spodziewać.

0:54Ustawiłem to tak, że nasz content type,

0:56czyli to co przesyłamy razem z zapytaniem będzie ustawione na tekst plain, a z

1:02serwera będziemy spodziewać się odpowiedzi zapisanej w formacie JSON.

1:06Jeżeli chodzi o ciało samego zapytania

1:08to nie ma tutaj zaskoczenia, ponieważ w związku z tym, że przesyłamy zwykły tekst

1:12również ciało zapytania ustawiamy na taki sam format.

1:16No i teraz jeżeli wykonamy to zapytanie, a

1:18następnie podajemy za pomocą konsoli loga tylko aktywuje tutaj powłokę,

1:23to rezultat będzie taki, że naturalnie znajdujemy się tutaj w środowisko.

1:27Mądrze jest, więc brakuje nam tutaj importu, który musimy zainstalować.

1:32Po chwili wszystko zaczyna tutaj działać i w odpowiedzi otrzymujemy obiekt Bison,

1:37który przesyła nam dokładnie taką samą informację, jaką przesyłamy do niego.

1:41Zatem jeżeli tutaj modyfikuje to nasze

1:43zapytanie, to odpowiedź również będzie zmodyfikowana.

1:47Oznacza to, że dochodzi do komunikacji i odpowiedniej interpretacji formatu danych.

1:52No to teraz skontaktujemy się z takim

1:54endpoint em, który obsługuje x www form url encoder.

1:59Ponownie wykonujemy tutaj zapytanie typu

2:01fetch z tą różnicą, że na inny endpoint i ponownie ustawiamy tutaj metodę na POST, a

2:07nagłówki w taki sposób, aby opisywały to co chcemy przesłać.

2:10W odpowiedzi ponownie spodziewamy się

2:12obiektu, który będzie zawierać informacje, które przesyłamy na serwer.

2:17W tym przypadku w związku z Falloutem, z

2:19którym mamy do czynienia, przesyłamy te informacje w formie kluczy oraz wartości,

2:24czyli dokładnie tak jak w przypadku Query String, ale możemy tutaj wykorzystać

2:28metodę, która umożliwia nam przesłanie ciała zapytania.

2:31I teraz jeżeli X interpretujemy tą odpowiedź, to jak widzisz mamy dokładnie

2:36obiekt odpowiadający strukturze zapisanej w ciele zapytania.

2:40Ponownie myślę, że nie ma tutaj większego

2:42zaskoczenia, aczkolwiek jest kilka rzeczy, na które warto zwrócić uwagę.

2:47Mianowicie niewykluczone, że dość trudne

2:49będzie przesyłanie informacji w taki sposób, aby łączyć tutaj klucze oraz

2:53wartości oraz pamiętać o odpowiednim umieszczeniu znaku SAMP.

2:57W związku z tym zdecydowanie lepszym

2:59pomysłem jest tutaj wykorzystanie klasy i URL.

3:02Parametr tutaj możemy przekazać po prostu

3:05obiekt zawierający poszczególne właściwości.

3:08Jak widzisz, do tego konstruktora możemy przekazać dowolny obiekt Johnson i

3:12wszystko zostanie poprawnie zinterpretowane.

3:15Tutaj jeszcze dodam, aby było to dla

3:17Ciebie jasne, że z tego formatu przeglądu korzystasz zawsze wtedy, gdy potrzebujesz

3:22przesłać większą liczbę informacji, ale nie potrzebujesz przesyłać plików.

3:26Wtedy nie ma potrzeby sięgania po multiple

3:29data, tylko możemy wykorzystać właśnie taki format.

3:32No to zobaczmy teraz jak radzić sobie z

3:34tym kolejnym, jeżeli chodzi o Multi Platform Data.

3:38Musimy zaimportować sobie dodatkową zewnętrzną bibliotekę Form Data, ale

3:42oczywiście w przeglądarce nie ma takiej potrzeby.

3:45Po prostu w przypadku zastrzeżenia

3:46Kłodzka, że znajdujemy się w środowisku, no i wtedy konieczna jest ta zależność.

3:51Jeżeli chodzi o przygotowanie danych,

3:53które możemy przesłać w taki sposób, możemy wykorzystać właśnie albo formularz,

3:58albo klasę Form Data, która udostępnia nam proste metody, takie jak np.

4:02append, z których pomocą możemy ustawić

4:05nasze informacje, w tym również referencje do plików.

4:08No i teraz jeżeli przygotujemy sobie

4:10zapytanie kierujące na odpowiedni endpoint oraz ustawimy jego odpowiednią metodę oraz

4:16nagłówki, to będziemy mogli wykonać to zapytanie.

4:19I tylko tutaj zaznaczę, że w przypadku fetch nie ma potrzeby ustawiania Multiple

4:24form data, ponieważ przeglądarka w tym przypadku środowiska duże jest

4:29w stanie samodzielnie za nas określić ten nagłówek i dodać tzw.

4:33daty, czyli ograniczenie, którego w tym momencie nie musimy definiować sami.

4:37Zasadniczo tak jak widzisz mamy tutaj poprawną odpowiedź, która jak zwykle jest

4:41uzależniona od tego, co zostanie przesłane na serwer.

4:45W rezultacie, jeżeli chodzi o Multiple Data, jedyne co musisz zapamiętać to to,

4:50że informację przesyłasz właśnie za pomocą klasy Form Data.

4:54Z pomocą tutaj metod ustawiasz

4:56poszczególne właściwości, które trafiają na serwer.

4:59I teraz. Ostatniej formy przesyłania informacji,

5:03czyli konkretnie do Application Flash Jameson.

5:06Tutaj myślę, że sytuacja jest Ci już

5:08doskonale znana ze względu na to, że ponownie ustawiamy metodę zapytania i jej

5:12nagłówek oraz oczywiście body, które w tym przypadku nie może zostać przekazane

5:17bezpośrednio jako obiekt Jameson, tylko jako tzw.

5:20Jameson String.

5:21I teraz, aby przekształcić obiekt Jameson

5:23na ciąg znaków, wykorzystujemy metodę obiektu Jameson.

5:28No i teraz chyba nie ulega wątpliwości, że jeżeli wykonamy to zapytanie, to w

5:32odpowiedzi również uzyskamy adekwatną informację.

5:35Pamiętaj proszę o tym, że odwrotnością

5:37Jameson String jest metoda Jameson, do której przekazujemy właśnie

5:42swing i jeżeli jest on zapisany w odpowiedniej formie, zostanie

5:46przekształcony do obiektu, do którego właściwości będziemy mogli odwoływać się

5:50już w klasyczny dla obiektów Jameson sposób.

5:53Jedyną rzeczą, na którą trzeba zwrócić

5:55uwagę przy formowaniu obiektów Jameson, są wszelkiego rodzaju znaki specjalne.

6:00Jeżeli przykładowo wewnątrz naszego

6:02obiektu pojawi się cudzysłów, to aby go umieścić musimy wykorzystać.

6:07Do tego, aby skopiować specjalny znak.

6:10Warto o tym pamiętać, tym bardziej, że jest to rzecz, którą bardzo łatwo pominąć.

6:14A tymczasem, jak widzisz, jeżeli chodzi o pallad i różne jego rodzaje, po stronie

6:18frontendu sytuacja ma się stosunkowo prosta.

6:21Jeżeli chodzi o plain text, to w zasadzie myślę, że wystarczy, że będziesz wiedzieć,

6:25że da się przesyłać informacje w takiej formie.

6:28Jeżeli chodzi o x www form url encoder to

6:31sięgaj po ten format zawsze wtedy, gdy nie przesyłasz obiektu Jameson, ale musisz

6:36przesłać informacje, które nie zawierają plików.

6:39Z kolei jeżeli takie pliki istnieją, wykorzystaj Multiple Form Data.

6:43Jest to najbardziej pod tym względem

6:45elastyczna metoda, która umożliwi Ci przesyłanie nawet większych plików.

6:49Ale tutaj dodam od siebie, że w przypadku bardzo dużych plików uwzględniających np.

6:53kilkaset lub kilkanaście GB danych warto

6:56poczytać o tym, w jaki sposób można obsługiwać np.

6:59progress bar bądź nawet metody

7:01umożliwiające wznowienie wgrywania takiego pliku.

7:04No i jeżeli chodzi o application Jameson jedyną rzeczą, którą musisz zapamiętać

7:09jest kodowanie obiektów Jameson do ciągów znaków.

7:12W takiej sytuacji trzeba pamiętać o

7:13metodach Swing i Fiore oraz oczywiście o tym, aby w kodowanych w

7:18ten sposób wartościach nie znalazły się jakieś znaki specjalne, które mogą z

7:22różnych powodów doprowadzić do sytuacji, w której te metody zawiodą.

7:26Takim klasycznym przykładem, z którym spotykam się najczęściej jest

7:29przekazywanie do metody Jameson Parts informacji zwróconej z jakiegoś API.

7:34W niektórych sytuacjach zamiast obiektu

7:36Jameson otrzymujemy właśnie plain text i w rezultacie taka metoda nie wykonuje się

7:40poprawnie i tym samym też wysypuje całą naszą aplikację.

7:44Myślę, że warto o tym wszystkim pamiętać i

7:46mam nadzieję, że wyjaśniłem Ci różnicę pomiędzy tymi różnymi rodzajami bailoutu i

7:52też stało się to dla Ciebie bardziej oczywiste.

7:54Tymczasem dzięki za uwagę i do usłyszenia za chwilę.