HTTP i API: Ciasteczka

0:02Cześć, witaj w kolejnej lekcji.

0:03Wiesz już naprawdę sporo o protokole HTTP, czyli o tym, jak rozmawia ze sobą

0:08serwer i klient, czyli nasza przeglądarka.

0:11Wiesz jak jest skonstruowane zapytanie, które idzie od klienta i jak jest

0:16skonstruowana odpowiedź, która wraca od serwera.

0:19Mówiliśmy też o tym, jak tworzyć parametry, jakie są różne metody,

0:23no i w końcu mówiliśmy też o tych najważniejszych

0:25formatach, w postaci których możemy przekazywać dane w jedną i w drugą stronę.

0:30Chciałbym, żebyś zapamiętał, że HTTP jest protokołem, który możemy nazwać bezstanowym.

0:34Co to ogólnie oznacza?

0:35To znaczy, że tak jak wysyłaliśmy w terminalu zapytanie

0:40jedno po drugim, tak naprawdę te zapytania w żaden sposób nie nawiązują do siebie.

0:44Czyli my nie możemy w kolejnym zapytaniu

0:47nawiązać do tego wyniku, który otrzymaliśmy wcześniej.

0:49Po prostu wysyłamy zapytanie, dostajemy odpowiedź i HTTP

0:54można powiedzieć, że ma dosyć krótką

0:55pamięć, po prostu zapomina te poprzednie rzeczy, które robiliśmy.

0:59Rozwiązaniem takiego problemu jest

1:01oczywiście to, że takie zapytanie, które idzie do serwera

1:04może zostać przez serwer zinterpretowane tak, że bierze sobie treść i np. wstawia je i

1:09zapamiętuje w bazie danych, czyli w takim można powiedzieć Excelu na sterydach,

1:13który działa na serwerze, więc te dane są tam magazynowane i takie np.

1:18wrażliwe dane polegające na tym, że jeśli użytkownik się zarejestruje w naszym serwisie

1:21i podaje jakiś login i hasło czy imię i nazwisko na pewno będą zapisane w tej

1:25bazie danych na serwerze, żeby na pewno nie zginęły i były bezpieczne.

1:29Ale drugim rozwiązaniem tej sytuacji jest również zapisywanie danych po stronie

1:34klienta, czyli na moim dysku twardym i przeglądarka potrafi to zrobić.

1:38Natomiast oczywiście są to dane niewrażliwe,

1:40ponieważ one za każdym razem mogą zostać wyczyszczone z mojego dysku.

1:45Już na pewno wiesz o czym mówię.

1:46Są to w dużej mierze pliki cookies.

1:48Takim nowym odpowiednikiem cookies, czyli

1:50ciasteczek jest Local Storage w specyfikacji HTML5, który

1:55po prostu potrafi zapisać więcej danych, jest trochę bardziej nowoczesną formą, ale

1:59generalnie stary dobry cookies również się do tego nadają,

2:02potrafią zapisać te 5 kilobajtów danych, więc teoretycznie niedużo,

2:05ale jeśli przełożyć to na tekst, no to jeden bajt to jedna litera.

2:09A więc jeśli masz 5 kilobajtów, czyli 5

2:11razy 1024 bajty, to możesz naprawdę sporo tekstu tam zapisać w jednym ciasteczku.

2:16Dzięki temu możemy zapisywać użytkownika,

2:18jakieś proste rzeczy, pamiętać jego dane np.

2:21na potrzeby analityki i różnych innych

2:23rzeczy, które wykonujemy na stronie. I takie ciasteczka

2:26zobacz, że mamy tutaj sekcje cookies mogą również zostać zapisane.

2:30Jak widzisz mamy po prostu możliwość w tym przypadku z pomocą samego GET.

2:35Nawet właśnie skasowanie, ustawienie ciasteczka, czyli w tym przypadku np.

2:40GETem będziemy ustawiać ciasteczko, a nie POSTem.

2:42Możemy wywołać to sobie z pomocą tryout i robimy sobie description, czyli

2:47opis takiego ciasteczka możemy zrobić Grzegorz,

2:50wybieramy polecenie Execute i powinniśmy dostać odpowiedź

2:55od serwera, że ciasteczko o nazwie freeform zostało zapisane.

3:00Teraz jak sprawdzić czy takie ciasteczko mam?

3:02Ogólnie mógłbym na przykład zamknąć tą kartę, czyli już nie pamiętać,

3:06mógłbym w ogóle zamknąć przeglądarkę i wejść sobie po raz kolejny na stronę httpbin,

3:11przejść do sekcji inspekcji,

3:12a następnie zobaczyć te ciasteczka, które mamy w aplikacji.

3:18Tutaj w Application znajduje się cała zawartość ta zapamiętana przez aplikację.

3:24Oprócz tych ciasteczek, które możemy

3:25zapisać, to mogą być też obrazki, które się cache-ują, czyli właśnie zapamiętują

3:29u nas właśnie to jest ten Local Storage, o którym mówiłem,

3:33ale ok, przejdźmy do ciasteczek.

3:35Jak rozwinę sobie ciasteczka z httpbin, a

3:38zobacz, że mam to ciasteczko zapisane, czyli freeform.

3:41Grzegorz i przejdźmy jeszcze raz do tych ciasteczek.

3:44Zobaczmy jak się tutaj je zapisuje.

3:47Jeszcze raz to zrobię i freeform tym razem wpiszę jako Adam.

3:53Biorę polecenie Execute.

3:55I zobacz, że to ciasteczko automatycznie nam się tutaj zmieniło

3:58na Adam.

3:59Mamy też polecenie Curl, czyli polecenie, które pozwoli nam takie

4:04ciastko zapisać, ale też zobacz, że po prostu wykonuje ono GET

4:10do takiego adresu z jakimś nagłówkiem z nagłówkiem accept text plain, ale akurat

4:15ten nagłówek moglibyśmy sobie nawet w sumie pominąć

4:18i moglibyśmy po prostu wkleić do przeglądarki taki adres

4:21i powiedzieć, że chcemy cookies set, ale zamiast tego imię równa się Grzegorz,

4:28end, przypominam, bo wcześniej mieliśmy

4:30znak zapytania, więc tutaj już będziemy mieli end nazwisko

4:34Róg I teraz jeśli to prześlę, zobacz, że mam

4:38już te rzeczy zapisane w ciasteczku. I zwróciło mi to tutaj ładnie

4:43taki JSON z informacją o tym jakie w ogóle

4:44ciasteczka są zapisane na tej stronie httpbin.org

4:47dopóki ktoś nie wyczyści pamięci

4:49podręcznej, te ciasteczka będą tu siedzieć.

4:51Oczywiście

4:52jeśli chodzi o takie zapytanie, które

4:54tworzy ciasteczka, możemy przekazać tam jeszcze kilka różnych danych, czyli np.

4:58jak Expiry Date, czyli kiedy to ciasteczko wygasa np.

5:01że za trzy tygodnie ma się samo usunąć, no i jeszcze inne metadane.

5:05Ale w ten sposób możemy bardzo łatwo zapisywać na dysku użytkownika przez jego

5:10przeglądarkę jakieś dodatkowe dane, które nie muszą być na serwerze.

5:14Tak właśnie działają cookies

5:15a kolejna rzecz, którą chciałbym, żebyś

5:17zapamiętał z tej lekcji, o której wspominałem

5:19to jest właśnie ta bezstanowość nowość protokołu HTTP.

5:22To jest bardzo ważne.

5:24No i to są właśnie rozwiązania tej bezstanowości

5:26czy baza danych, czy cookies, czy Local Storage.

5:29Jeśli chodzi o podstawę HTTP, to wszystko.

5:32Oczywiście teraz głównie korzystamy z https, ale generalnie jest to to samo.

5:36Jest to po prostu bezpieczna wersja

5:38protokołu HTTP, która powoduje, że te zapytania i odpowiedzi, które są wysyłane

5:43do i od serwera są szyfrowane i trudno jest je podkraść można powiedzieć.

5:49W związku z tym jest to ten bezpieczny protokół.

5:51No i jeszcze mogłeś spotkać się ze

5:54specyfikacją i z rozróżnieniem na HTTP 1 i HTTP 2.

5:59Rzeczywiście jest nowa wersja protokołu HTTP, czyli HTTP 2.

6:03Nie będę wchodził w szczegóły.

6:04Ogólnie jest w 100% kompatybilna wstecznie

6:07z HTTP 1, który jeszcze pewnie przez wiele lat będzie wspierany

6:11w związku z tym można powiedzieć, że możesz spokojnie z niego korzystać.

6:15HTTP 2 wprowadza trochę nowych, ciekawych

6:18rzeczy, które mają ogólnie przyspieszyć działanie Internetu.

6:22Widziałeś przykładowo, że jak wchodzimy na

6:23Stack Overflow w zakładce Network ładuje nam się bardzo dużo zasobów.

6:28Jest to ułożone w ten tzw.

6:30waterfall, czyli wodospad i ten wodospad pokazuje nam jak szybko się te zasoby w

6:36milisekundach ładują i po tym wodospadzie możesz zobaczyć, że

6:39są to zasoby ładowane, które są jako pierwsze, później kolejne, kolejne itd.

6:44I tak naprawdę protokół HTTP 2

6:46np. jedną z jego fajnych cech jest to, że może

6:48w pewnym sensie łączyć te zapytania, czyli nie musi ich wykonywać jedno po drugim,

6:53czyli w pewien sposób może szybciej pobierać zasoby wykonując je jednocześnie.

6:58Dodatkowo oferuje szereg różnych funkcji, takich jak

7:01można powiedzieć takie trochę zipowanie w locie, czyli pakowanie jeszcze tych

7:04zasobów, żeby były to mniejsze paczki, żeby działał szybciej.

7:07Czyli można powiedzieć, że mówię to teraz w dużym uproszczeniu, ale

7:11są to takie dość techniczne rzeczy, które po prostu powodują, że ten protokół

7:14powinien działać lepiej i szybciej zwracać nam Internet.

7:18Ale generalnie teraz już wiesz naprawdę dużo o tym, jak działa protokół HTTP, jak

7:24funkcjonuje sieć w kontekście wyświetlania stron w przeglądarce,

7:28w kolejnych lekcjach będziemy w związku z tym mogli już przejść do zagadnienia

7:32tak zwanego API, czyli Application Programming Interface.

7:36Do usłyszenia.