React: Lokalna konfiguracja backendu

16.8.x

0:00Cześć, w poprzedniej lekcji wytłumaczyłem ci jak działa nasz backend, jak będziemy z

0:04niego korzystać, a teraz postaramy się go skonfigurować. Znajdziesz

0:08go w folderze backend w folderze notes w naszej paczce z

0:12aplikacją. Ż eby

0:22go zainstalować musisz po prostu wejść do folderu notes, a następnie

0:28wpisać npm install. Oczywiście potrzebujesz node'a tak samo jak do naszej

0:32apki React'owej, więc zakładam, że to wszystko już masz i kiedy

0:37już nasze paczki zostaną zainstalowane to potrzebujesz jeszcze jednej rzeczy. Musisz

0:42skorzystać z serwisu mlab, który udostępnia nam mongoose DB

0:46za darmo. Aby to zrobić, musisz się zalogować w serwisie

0:50mlab. Jeśli nie masz konta to oczywiście musisz je założyć. Zakładanie

0:55konta jest bardzo proste, więc na pewno dasz sobie z tym radę i po

1:00wejściu do mlab znajdziesz tutaj taką tabelkę. Na razie pustą u ciebie, bo nie ma

1:04żadnych baz danych dostępnych. Stworzysz sobie nową tabelkę, wybierzesz

1:08sandbox, który jest za darmo. Możesz wybrać Europę, o

1:12ile znajdujesz się teraz w Polsce i możesz ją nazwać jak chcesz. My nazwiemy favnote-eduweb

1:19i po stworzeniu bazy favnote-eduweb możesz

1:24do niej wejść, następnie dodać użytkownika, możemy

1:29go nazwać admin. Trzeba

1:35teraz stworzyć jakieś hasło. U mnie to będzie eduweb raz

1:40dwa trzy i teraz to co jest bardzo ważne i czego potrzebujesz do skonfigurowania

1:44naszego backendu to ten link w tym miejscu. Musisz

1:50go sobie skopiować, a następnie otworzyć folder backend notes,

1:55wejść do folderu kropka env, który znajduje

1:59się poza plikiem, poza folderem src. Tutaj mamy kropka

2:03m i tutaj musisz podać ten link, który został

2:08przyklejony, a następnie w tych miejscach podać tego usera i hasło,

2:12czyli dla nas to jest admin i eduweb raz

2:17dwa trzy i w tej chwili jeśli wszystko dobrze poszło,

2:21jeśli zainstalowaliśmy paczki, jeśli zmieniliśmy sobie ten link w

2:25tym miejscu, to powinniśmy móc

2:29odpalić nasz serwer. Poznamy to po tym, że jeśli wpiszemy będąc oczywiście

2:33w folderze projektowym npm start dostaniemy

2:39tutaj komunikat, okej, tego komunikatu nie

2:43powinniśmy dostać. Jestem już po prostu na poczcie 9000 podpięty

2:47na drugim tabie, więc teraz jak ten wyłączę, wracamy, to się nie wydarzyło,

2:52npm start i dostaliśmy

2:58tutaj komunikat Connected To mlab database. Ponadto dostaliśmy

3:02właśnie komunikat też, że port to 9000 i teraz

3:08jak otworzymy sobie naszego postman'a, nasza baza jest pusta, więc musimy

3:14sobie stworzyć nowego użytkownika. Nazwijmy go my user password raz dwa trzy i

3:18oczywiście dostaliśmy 403, bo jestem gapa i chciałem

3:23się zalogować, a nie zarejestrować, więc teraz rejestrujemy się na endpoint'cie

3:27register i oczywiście nasz użytkownik

3:31został utworzony. Teraz możemy się zalogować, dostajemy id

3:37naszego user'a, możemy je przekleić do naszej notatki,

3:41ale zanim to zrobimy to pokażę ci że ten, że żadne notatki

3:45na razie nie istnieją. Czyli jeszcze nic nie stworzyłem. Teraz chcę po prostu pobrać notatki,

3:49które ma ten użytkownik i oczywiście mamy pustą tablicę, więc

3:53teraz dodajemy notatkę, sprawdzamy i notatka

3:58zostało utworzona, także jeśli te kroki zostały

4:02wykonane prawidłowo to na pewno twój backend będzie działał.