React: Czym jest API

16.8.x

0:00Cześć, przed nami kolejny ekscytujący dział w tym kursie,

0:04ponieważ właśnie teraz zaczniemy wdrażać API do naszego

0:08frontend'u, ale zanim zaczniemy to robić, to wyjaśnię ci może trochę

0:12czym jest API i w ogóle jak działa backend. Nie jestem co prawda backend'owcem, ale

0:17napisałem dlatego kursu właśnie specjalny backend, który pozwoli nam na zapisywanie

0:21notatek i może zaczniemy od tego, że backend jest napisany

0:25w node js, czyli jest to JavaScript i opiera się o MongoDB

0:30Express i Mongoose. Mongoose to jest taki interfejs do

0:34mongoDB, który pozwala nam na łatwiejsze po prostu zapisywanie danych przetwarzanie

0:39ich i tak dalej. I generalnie to na czym my chcemy się skupić i co

0:43nas najbardziej interesuje jako frontend'downców to endpoint'y, pod które możemy

0:47uderzać nasze zapytania i z których możemy czerpać nasze

0:51dane i tutaj mamy kilka endpoint'ów. Jak widzisz one mają różne metody i

0:55może od tych metod zacznę. Generalnie metod https naprawdę bardzo,

0:59ale te, które nas najbardziej będą interesować to get, którą stosujemy

1:04wtedy kiedy chcemy coś pobrać chcemy coś otrzymać od naszego backend'u. Post,

1:08kiedy chcemy coś wysłać do backend'u, jakieś dane. Put stosujemy

1:12w momencie kiedy chcemy coś zupdate'ować, podobnie zresztą jak patch i delete, to

1:17oczywiście usuwanie jakichś elementów i to tak naprawdę w bardzo dużym

1:22telegraficznym skrócie, jakie mamy metody http i jakie możemy

1:26stosować na backend'ie i pewnie podobnie

1:30jak na frontend'zie zauważasz tutaj, że mamy tutaj ścieżki, które

1:35prowadzą do różnych funkcji i te funkcje powiązane są z jednej strony

1:39z user'em, którego będziemy tworzyć, a z drugiej strony z notatkami, które

1:43również będziemy tworzyć, pobierać, usuwać i tak dalej i z racji,

1:47że nie jest to kurs o backend'ie, to nie będziemy teraz wchodzić tutaj w szczegóły tego

1:51jak działa kontroler, jakie rzeczy tutaj możemy robić, jakich możemy

1:55nie robić i tak dalej. To wszystko możesz znaleźć sobie w folderze backend,

1:59który znajduje się w materiałach do tego kursu. Mamy folder frontend

2:04gdzie znajduje się nasza React'owa aplikacja i mamy też folder backend,

2:08w którym znajdziemy folder nodes i tutaj mamy właśnie ten projekt backend'owy,

2:12który zaraz będziemy konfigurować. Zanim

2:17jednak przejdziemy do konfiguracji, chciałbym ci na szybko przedstawić postmana. Jest

2:21to program, który możesz sobie zainstalować na swoim komputerze i dzięki

2:25postman'owi możesz korzystać właśnie z naszego API w taki sposób, że

2:30stworzony tutaj zostały przeze mnie wcześniej wszystkie ścieżki, do których

2:34będziemy się odwoływać i podając do nich odpowiednie dane możesz

2:38właśnie sprawdzać jak działa nasz backend. Jakie dane nam zwraca, co

2:43możemy się spodziewać po nim i to jest bardzo fajne narzędzie, które właśnie pozwala

2:47nam lepiej zrozumieć jak działa backend, bez konieczności integracji go od razu z

2:51frontend'em, więc teraz przejdźmy sobie przez każdą ze ścieżek po

2:55kolei i zobaczymy co się dzieje kiedy wysyłamy albo odbieramy jakieś

2:59z naszego backend'u. Pierwszą ścieżką jest register user i tutaj możemy sobie stworzyć

3:04nowy, nowego użytkownika, na przykład my user password

3:08niech będzie password raz dwa trzy. Po

3:15tym jak stworzyliśmy naszego użytkownika, dostajemy kod, który informuje

3:20nas o tym co się stało jeśli 201, to znaczy, że coś zostało

3:24utworzone. Jeśli 200 to znaczy, że operacja została wykonana pomyślnie

3:29jeśli 404 to pewnie jak się domyślasz coś nie zostało znalezione. Jeśli

3:33500 na przykład to jest jakiś błąd serwera. To są takie cztery

3:37podstawowe kody, które na pewno warto znać. Mamy jeszcze 403, który mówi

3:42nam forbidden, czyli jakiś dostęp do czegoś jest zabroniony i nie jesteśmy autoryzowani

3:47żeby gdzieś pójść i teraz a propos autoryzacji. Przejdźmy sobie do login

3:51user i tutaj jeśli podamy my user, czyli tego nowego użytkownika, którego

3:55stworzyliśmy to dostaniemy zwrot w

4:00postaci id tego usera i username. Resztą

4:05na razie się nie przejmujemy. Zauważ, że jeśli na przykład wpisał

4:09bym tutaj raz dwa trzy cztery, to dostanę

4:13właśnie forbidden, czyli coś poszło nie tak. Nie zostałem autoryzowany. Teraz

4:18przejdźmy do logout i logout to jest po prostu post, który wysyłamy i

4:22mówimy słuchaj chcemy się wylogować i wtedy backend nam mówi okej, zostaliśmy

4:27wylogowani, więc na przykład jeśli teraz chcielibyśmy dodać jakąś notatkę. Nawet

4:34jeśli skopiujemy sobie to user id, wyślemy

4:40to, to dostaniemy 403, ponieważ nie jesteśmy zalogowani, więc musimy

4:44wrócić do naszego login user, zalogować się ponownie. Wracamy

4:51do naszej notatki, to id jest akurat jest takie samo, ono się nie zmienia, bo to jest id user'a

4:55i wysyłamy teraz naszą notatkę i notatka

4:59zostało utworzona i to co jest ważne i co się przyda nam późniejszym development'ie. Jeśli

5:05wysyłamy naszą notatkę to w zwrotce dostajemy całą

5:09notatkę z powrotem. Informuje nas o tym serwer, że wszystko poszło w porządku,

5:13ale to co jest doklejone do tej notatki to id

5:17notatki i to będzie dla nas bardzo ważne. Teraz wejdźmy sobie do endpoint'a get,

5:22który pobiera nam wszystkie notatki danego usera i jedyne co potrzebuje żeby to

5:26zrobić to id tego usera i faktycznie mamy

5:31dwie notatki, które przed chwilą utworzyliśmy. Jeśli stworzylibyśmy

5:35sobie notatki, które mają jakiś inny typ. Załóżmy, że teraz to zrobimy, tutaj

5:42sobie wpiszemy notes, pojawia się nowa notatka

5:47notes, teraz jak wejdziemy sobie do Get All Notes to mamy ją nową tutaj, ale

5:53mamy taki endpoint, który bardzo nam się też przyda w development'ie, który

5:57pobiera nam notatki wyłącznie z jednego typu i użyjemy go właśnie w tych

6:01poszczególnych widokach twitters, notes i articles. I tutaj, jeśli teraz podamy

6:05twitters to dostaniemy w zwrotce tylko dwie notatki, a nie tam trzecią

6:09notes, którą utworzyliśmy i faktycznie one mają typ

6:14twitters. Jeśli natomiast skopiujemy

6:18sobie id jakiejś notatki i wejdziemy do Get Single Note, podamy

6:22tym razem nie, podamy tym

6:26razem nie w body, nie w json'ie, nasze dane, ale tutaj jako parametr, w naszym

6:31linku, to

6:36po id notatki backend nam znajduje tą notatkę i pokazuje jak

6:40ona wygląda. Podobnie zresztą możemy ją usunąć. Jeśli teraz wejdziemy sobie tutaj

6:44i powiemy delete, podając parametr w

6:48url'u, to dostaniemy zwrotkę, że okej,

6:53notatka została usunięta i teraz mając tę samą notatkę na Get Single Note, jeśli

6:57jeszcze raz ją pobierzemy to dostaniemy 404, ponieważ ona już nie istnieje. Podobnie

7:03zresztą tutaj. Tak więc tak wygląda nasze API,

7:07jest bardzo proste i na pewno jest pełne dziur. No niestety nie

7:12specjalizuje się w backend'zie. Natomiast udało mi się napisać taki backend, który w zupełności

7:16nam wystarczy do naszego kursu, on nie będzie może mistrzostwem, jeśli chodzi o zabezpieczenia. Jest

7:21tutaj kilka takich obejść, które po prostu mają działać, ale spokojnie.

7:26Damy sobie z tym radę. Jedyną różnicą którą warto

7:30tutaj zaobserwować jest to, że czasami wysyłamy nasz request

7:35w postaci json'a, a czasami

7:39wysyłamy go w postaci zwykłego linku, gdzie jako parametr podajemy tutaj

7:43jakąś wartość, więc to warto zapamiętać bo w zależności od tego jaki

7:47to będzie endpoint, to różnie będziemy wysyłać nasze dane. W następnej

7:53lekcji skonfigurujemy backend na twojej maszynie.