Next.js 13 w Praktyce: SignUp route i zapis użytkownika w bazie

0:01Teraz zajmiemy się całą logiką związaną z

0:04tworzeniem konta użytkownika, czyli stworzymy nasz własny sign up page.

0:09I żeby to zrobić generalnie musimy wrócić

0:11się do naszego routingu, który już sobie ustawiliśmy i mamy AP, mamy nasz atut i

0:17tutaj pod tym będziemy potrzebowali nasz sign up page czyli sign up.

0:24Niech to będzie pierwszy folder i pod

0:27folder musimy wykorzystać z informacji w jaki sposób korzysta się z upload.

0:32W next czaję się i potrzebujemy catch spread operator z dwoma nawiasami,

0:39czyli dwa nawiasy, trzy kropeczki i sign up.

0:45W naszym przypadku zrobimy sobie po prostu sign up.

0:49No i w środku potrzebujemy nasz page, czyli Page kropka x.

0:54I tutaj możemy sobie zaimportować to co

0:56mamy z naszej biblioteki i jeszcze zmienią sign up page.

1:03Zapisujemy to sobie już w tym momencie.

1:05Jak wystartujemy sobie naszą aplikację

1:07to powinniśmy móc stworzyć nowych użytkowników.

1:11Natomiast jeszcze zanim to, to wklejamy

1:14sobie odpowiednią konfigurację do naszego pliku n.p.

1:17Tutaj w tym momencie powinniśmy w pliku

1:19Database next Publisher Sekret ki i te cztery zmienne, które mamy tutaj podane.

1:28Zapisujemy sobie ten plik.

1:30Przejdźmy teraz do naszej aplikacji MPM Runde 2.

1:34Startujemy naszą aplikację i teraz

1:36otwórzmy naszą aplikację na localhost 3000.

1:39Mamy naszą aplikację już otwartą.

1:42I teraz przejdźmy sobie na stronę Sign up.

1:46Już dostajemy tutaj nasz formularz do rejestracji użytkowników.

1:50Przejdźmy sobie jeszcze na dashboard.

1:52Zobaczmy czy w ogóle mamy jakikolwiek

1:54użytkowników w tym momencie w naszej aplikacji.

1:56Jeszcze nie mamy żadnych userów, czyli

1:58przejdźmy sobie na naszą localhost aplikację.

2:01Spróbujemy zarejestrować pierwszego użytkownika.

2:04Wszystko jest w porządku.

2:05Mamy od razu walidację przez kler zbudowaną dla nas w tym komponencie Snap.

2:10I dajemy continue.

2:12Dostajemy na email kod do walidacji, a

2:15teraz każdy sobie swój email na którym zakładam to konto email.

2:19Tutaj dostałem email z notyfikacje na kont dev z Pocket Sapa.

2:26Teraz ten kod po prostu przykleję.

2:29Konto zostanie zweryfikowane.

2:30Noi jesteśmy dostaliśmy redirect na tak jak to było.

2:35Generalnie skontaktowaliśmy to w naszym

2:38pliku doc, natomiast redirect URL też możemy sobie tutaj ustawiać.

2:42Tu możemy sobie ustawić redirect URL na obojętnie jaki chcemy.

2:45Po sukcesie po logo, po logowaniu danego użytkownika,

2:50po założeniu poprzedniego konta możemy go od razu zalogowanego przekierować np.

2:55na dashboard aplikacji. Dobrze, to mamy.

2:58Zakładanie użytkowników z głowy.

3:00Mamy jak widać tego nowego użytkownika.

3:02Natomiast jest jeden problem, bo nasza Prisma Studio nie ma nic.

3:07Te dane i dobre sobie usunąłem już

3:11z tego sito, natomiast teraz jest pusta baza danych.

3:14No i generalnie nie mamy tutaj nikogo w naszej bazie danych

3:17użytkownik został założony, ale jest tylko po stronie Clarka.

3:20Jeżeli sobie to odświeżę to użytkownik tutaj powstaje.

3:23Tutaj wchodzę, wchodzi generalnie

3:26koncepcja web poków, które są nam potrzebne do tego, żebyśmy mogli reagować

3:31na pewne akcje na Killer Clark udostępnia nam Web Kuki, które są świetne jeżeli

3:36chodzi o to w jaki sposób działają i na jakie akcje możemy reagować.

3:39Jest to bardzo fajnie wszystko opisane w naszym dokumentacji.

3:44Natomiast nas interesują dwa eventy User created i User updated.

3:49W tym przypadku będziemy potrzebowali

3:51troszeczkę tutaj pokombinować, żeby móc to przetestować na serwerze developerskim.

3:56Pierwsza rzecz, która będzie potrzebna to na pewno będziemy potrzebowali jakiś

4:00endpoint w naszej aplikacji, który pozwoli nam na to, żeby ten web wywołać później.

4:06Czyli stwórzmy sobie teraz endpoint naszej aplikacji.

4:08Jako, że jesteśmy w folderze app możemy sobie stworzyć pod folder API.

4:14Później web UX.

4:17I niech to będzie coś takiego.

4:21I teraz potwierdzę, że API Web User możemy zrobić tutaj.

4:28NUTS standardowo i potrzebujemy stworzyć teraz tutaj jakiś handler, który będzie

4:35pozwalał nam na pracę z tym co przychodzi do naszego serwera z zewnątrz.

4:41Teraz jeżeli chodzi o tym handler, to ja

4:43go przygotowałem na boku i już przejdziemy sobie przez logikę tutaj występującą.

4:49Będziemy potrzebować w.

4:50Sekret w naszych 2 element variable, które

4:53są potrzebne do tego, żeby stworzyć jakiegoś web hooka za pomocą paczki SFX.

4:58Zainstaluj sobie teraz tą paczkę.

4:59Prawdopodobnie u Ciebie będzie błąd, że

5:02tej tej biblioteki ta biblioteka nie istnieje.

5:05Po prostu możesz sobie zrobić npm install

5:07SFX i to co tą funkcję którą tutaj mamy to jest standardowy handler

5:11jaki budujemy sobie tutaj tylko przypisujemy to get post i

5:15put, żeby ten handler po prostu sobie tutaj działał.

5:18Jeżeli ktokolwiek wyśle na ten endpoint

5:20jakieś zapytanie pilot, który

5:24przyjmujemy z tego zapytania, od razu sobie tworzymy z tego obiekt Jameson.

5:28Sprawdzamy sobie head.

5:30To tu jest związane z logiką w jaki sposób

5:32obsługujemy wierzchołki za pomocą biblioteki SFX.

5:36Generalnie polecam Ci poczytać sobie troszeczkę dokumentację.

5:39To jest bijatyka do pracy z łukami

5:42czy to na serwerze lokalnym, czy też na produkcji.

5:44Już tworzymy sobie tutaj wiele funkcji, które możemy wykorzystywać.

5:49I tutaj weryfikujemy sobie ten pilot za pomocą właśnie tej biblioteki SFX.

5:54Używając jej typów.

5:56No i tutaj jeżeli już mamy to wszystko zweryfikowane, nasz web hub jest poprawnie

6:00wywołany, to łapiemy sobie event i sprawdzamy typ eventu.

6:04To jest typ eventu, który pochodzi nam tutaj właśnie z biblioteki Clark DX.

6:08I tutaj w przypadku User created user

6:11updated wyciągamy sobie id email, adres url name i w przypadku kiedy ten

6:17użytkownik nie istnieje robimy normalną akcję Prisma User create.

6:22Natomiast jeżeli istnieje to update danego

6:24jęzora, możemy sobie id też tutaj zostawić.

6:28Tak naprawdę mamy tutaj wszystko.

6:31W momencie, w którym przechwytuje jakiś

6:33Pan Łukasz Klepka wywołujemy normalną akcję.

6:37Zapisujemy tego użytkownika w naszej bazie danych.

6:40ID emaili i name zostaje zapisane.

6:43No i tutaj jest tylko typ, który pozwala

6:45nam mieć silnie typowany pilot, bo nie jest to określone.

6:49Musimy to sami tutaj ten event o typować.

6:52Do tego też mamy to

6:53w taki sposób Clark wysyła email address jako tablica takich obiektów.

6:58Każdy email adres email ma swoje ID i ma swój stream czyli tą wartość.

7:03W naszym przypadku będzie to pierwszy

7:05email adres zawsze na który dany użytkownik będzie zakładał swoje konto.

7:10I teraz to jest tutaj wszystko fajnie.

7:13Natomiast jest jeden problem musimy sobie to jakoś udostępnić do świata globalnego.

7:18Nawet naszą aplikację na localhost 3000

7:21udostępnić ją tak, żeby Clark mógł wywołać ten endpoint

7:25tak, żeby Clark mógł tutaj nam przesłać jakiś pilot, prawda?

7:29I tutaj generalnie z pomocą przychodzi paczka NG rok.

7:33To jest paczka do hostowania swojego lokalnego środowiska na zewnątrz.

7:37Możemy sobie bardzo szybko naszą aplikację hostować na zewnątrz.

7:41Polecam Ci przejść tutaj przez tą dokumentację.

7:43To jest bardzo fajne opisane.

7:46Opisana instalacja na Twoim systemie.

7:48W jaki sposób to zainstalować?

7:50W jaki sposób to skonfigurować?

7:51Nie jest to trudne.

7:53Tak naprawdę mamy takie biblio blue install ng rok i tak naprawdę to tyle.

7:59Nie ma tutaj nic, nie trzeba

8:01nic skonfigurować jeszcze trzeba stworzyć sobie konto i dodać out token

8:05I dzięki temu później możemy sobie skorzystać z czegoś takiego, co

8:08udostępnia nam naszą aplikację z danego portu do świata zewnętrznego.

8:12I to samo teraz robimy u nas.

8:15Generalnie rzecz biorąc

8:16mamy naszą aplikację wychowaną na porcie 3000, dlatego teraz postaramy się

8:21udostępnić tą aplikację do świata zewnętrznego.

8:23Ja tutaj w nowym prawie zrobię wszystko jak changelog HTTP 3000,

8:28czyli chcemy naszą aplikację udostępnić do świata zewnętrznego.

8:32Po co jest nam to potrzebne?

8:33Otóż ten adres, który tutaj uzyskujemy będzie adresem potrzebnym do tego, żeby

8:39w konfiguracji Web na Clark App dodać endpoint.

8:44Tak, potrzebujemy tutaj jakiegoś adresu URL, na który będziemy mogli sobie wysyłać

8:48te lody w zależności od tego, kiedy będziemy tworzyć nowego użytkownika.

8:53I tutaj właśnie ja sobie wpisuję ten adres i leszczu potrzebujemy podać nasz

8:57endpoint, który sobie stworzyliśmy w naszej aplikacji.

9:00Czyli to w naszym przypadku będzie API.

9:02Mamy user czyli user.

9:03Jeszcze sobie to sprawdzę.

9:06API user, czyli to jest endpoint, który

9:10wykorzystuje Clark, a to tutaj to jest adres aplikacji, pod której tak naprawdę

9:14możemy teraz otworzyć naszą aplikację, bo Angular kosztuje ją globalnie.

9:18Także pod portem HTTPS mamy naszą

9:20aplikację wykorzystywaną w tym momencie, jeżeli tylko chodzi na naszym systemie.

9:25Czyli to jest adres, pod który chcemy wysyłać nasz pilot i wysyłamy nasz pilot.

9:31W przypadku stworzenia nowego użytkownika i w

9:35przypadku update użytkownika zróbmy sobie teraz Create.

9:39Powinniśmy dostać tutaj Secret Web Hooka,

9:41który też musimy sobie dodać do konfiguracji naszej aplikacji.

9:44Przejdźmy teraz do naszego pliku dot Elf, w którym dodamy kolejną

9:50tutaj wartość i kolejna wartość to będzie Web Hux Secret.

9:54Tak i tutaj będzie wartość tego sekretu.

9:57Stworzy się jeszcze jeden problem, bo w

9:58momencie kiedy zmieniamy plik DOC musimy zrestartować naszą aplikację, prawda?

10:03Jeżeli jest restartujemy naszą aplikację,

10:05to tutaj ten adres już może nie mieć znaczenia.

10:08Sprawdzimy czy Angular łapie też zmiany.

10:11Jeżeli my restartujemy nasze aplikacje mamy localhost 3000.

10:15Sprawdźmy czy ta aplikacja dalej istnieje pod tym adresem.

10:18No tak, jest, jest ok, także powinno wszystko działać.

10:22Teraz przejdźmy do konfiguracji.

10:24Mamy web, Ten sam secret już

10:27wykorzystaliśmy i w tym momencie powinniśmy móc

10:31za pomocą normalnego sign up page wywoływać te web kropki, dostawać pewne

10:37dane w naszej aplikacji, które później powinny tworzyć użytkownika w backend.

10:41Sprawdźmy sobie teraz poprzez to, że ja sobie usunę tego użytkownika co wiem

10:45delete user sprawdzimy sobie tutaj Prisma Studio.

10:48Generalnie nie mamy żadnego użytkownika na razie w naszym studio.

10:52Przejdźmy teraz do naszej aplikacji.

10:55Co wiemy o Refresh?

10:57I teraz przejdźmy sobie na stronę Sign Up

11:00strona tworzenia nowego użytkownika I teraz username.

11:03To samo co poprzednio i mail.

11:05Adres ten sam, jakiekolwiek hasło.

11:08I teraz w momencie kiedy ja kliknę continue.

11:10Jeżeli wszystko pójdzie dobrze to powinniśmy dostać tutaj

11:13request na NG rok na nasz web hook i jeżeli wszystko pójdzie w porządku to też

11:18powinien stworzyć się użytkownik po stronie naszego backendu.

11:22No bo tak naprawdę w naszym tutaj ruchu mamy całą akcję, która jest

11:27odpowiedzialna za to, żeby stworzyć nam tego użytkownika.

11:31W zależności od tego co tutaj przychodzi jako przylot z Clarka, czyli.

11:35Przejdźmy teraz jeszcze raz do naszej przeglądarki.

11:37Spróbujemy stworzyć użytkownika.

11:40Dostajemy kod na email, który musimy potwierdzić.

11:44Ja dostałem kod na email.

11:46To jest kod, który sobie potwierdzamy.

11:48Zostaliśmy przekierowani na stronę route

11:50ową, tak jak to jest generalnie w naszej aplikacji.

11:53Natomiast co ważniejsze interesuje nas to czy ten web został wywołany.

11:57Sprawdźmy sobie wywołania echo, jest jakieś wywołanie i mamy te empty?

12:02Są dane, które zostały przekazane.

12:05Mamy failed fail.

12:06Sprawdźcie sobie o co tutaj poszło.

12:08Zobaczymy czy użytkownik został stworzony.

12:10Nie, użytkownik nie został stworzony.

12:12Sprawdźmy sobie tutaj logi.

12:14Jest na Auto Rise.

12:15Prawdopodobnie nie udostępniliśmy tego

12:18endpoint tu publicznie, czyli endpoint jest domyślnie wszystkie endpoint.

12:23Jeżeli używamy Clarka są zamknięte, czyli

12:24musimy sobie teraz przejść do middleware i tutaj w tych public root

12:29musimy zaznaczyć, że ten root do rejestracji, czyli API Web Bugs.

12:35User.

12:37Jest ruchem publicznym.

12:39Jeszcze raz spróbujemy wywołać tego Chucka.

12:42Spróbujemy sobie usunąć tego użytkownika,

12:44którego mamy teraz w bazie danych Digit User.

12:48Przejdziemy znowu do naszej aplikacji.

12:51Przejdziemy na stronę Design Map.

12:53Mamy naszą stronę, spróbujemy od nowa stworzyć użytkownika i dajemy Continue.

12:59Zobaczymy. Znowu musimy potwierdzić nasz kod.

13:02Wklejamy kod maila, który dostaliśmy jest użytkownik potwierdzony.

13:06Natomiast teraz ważniejsze to to, co się dzieje tutaj.

13:09Sprawdźmy, czy użytkownik został stworzony, użytkownik został stworzony.

13:12Sprawdźmy teraz web kroki, czy dalej mamy ten sam problem.

13:16Mamy camping.

13:18Zobaczmy naszą bazę danych.

13:19Tak został stworzony nowy użytkownik.

13:21Zobacz, że mamy tutaj nowego użytkownika

13:24właśnie z ID tego usera, którego mamy tutaj.

13:27Czyli to jest to samo ID co jest Clark.

13:29Mamy username, mamy email, czyli wszystko co potrzebujemy w naszej aplikacji.

13:35Połączyliśmy teraz logikę tworzenia

13:38użytkowników z Claire, z logiką tworzenia użytkowników w naszej bazie danych.

13:43Czyli teraz za każdym razem, jeżeli ktoś sobie stworzy użytkownika,

13:47my będziemy mogli sobie tego użytkownika od razu mieć w naszej bazie danych.

13:52Czyli ten minus, który na początku mówiłem, który jest związany z tym, że tak

13:57naprawdę bardzo wielu ludzi mówi, że jeżeli

14:00korzystamy z gotowych rozwiązań, no to jednak poświęcamy to, ż i nasi użytkownicy

14:05lądują gdzieś w zewnętrznych serwerach, serwisach.

14:07Przepraszam.

14:08Nie jest takim minusem, no bo generalnie możemy sobie to ograć za pomocą właśnie

14:11wierzchołków, żeby te dane zapisywać odpowiednio w naszej bazie danych.

14:15Już w tym momencie mamy jednego użytkownika, który tutaj

14:18mam aktywną sesję, także jak przejdę teraz na dashboard to prawdopodobnie

14:22mogę sobie normalnie przejść na dashboard to bo jestem zalogowany.

14:26Jest jakiś Kukiz?

14:27Tutaj jest sesja, która generalnie rzecz biorąc jest sesją aktywną w naszej w

14:32naszej przeglądarce, w naszej aplikacji, dzięki czemu też mogę sobie

14:37tutaj chodzić po tej aplikacji i bez problemu.

14:40Teraz przejdziemy sobie do ekranu logowania i po chwilę zaczniemy sobie

14:44budować całą jakby cały Boży całą nawigację po naszej aplikacji.