Next.js 13 w Praktyce: Przycisk zarządzania kontem

0:02Zaczniemy sobie teraz budowanie tutaj tego

0:04elementu, który widzimy na samym dole naszej sekcji.

0:09Jeżeli chodzi o usera, mianowicie

0:11tego guzika tutaj z avatarem, który będzie pobierany z konta naszego użytkownika, z

0:17konta z Claire, a tu będzie username, który też możemy sobie pobierać z konta.

0:22I tutaj mamy mur beton.

0:24Póki co zrobimy sobie taką funkcjonalność,

0:26że po kliknięciu tego guzika będziemy mieli popa, który wyskakuje i

0:30zrobimy opcję po prostu wylogowania się danemu użytkownikowi.

0:33Dlatego teraz przejdziemy do naszego kodu.

0:36Jeszcze jedna ważna uwaga.

0:38Tak naprawdę to tutaj możemy traktować

0:40jako jedną wielką całość, bo to zawsze musi być odsunięte jakby na sam dół.

0:46Dlatego możemy sobie teraz to zapakować w jednego diva.

0:49Przejdźmy do naszego naszego edytora kodu.

0:52Tutaj jest nasza aplikacja.

0:53Tutaj mamy status poprzedniej części tej lekcji.

0:57Jeżeli chodzi o to, to

0:58ten diff sobie zostawimy, natomiast to tutaj pójdziemy w jednego diva to będzie

1:03nasz wrapper na button do nowej subskrypcji.

1:07Zapiszemy to sobie teraz i tutaj zrobimy sobie drugi wrapper na to co teraz

1:11będziemy potrzebować i na pewno co tutaj będzie potrzebne.

1:14Otóż potrzebujemy.

1:16Z tego co widać na designie to to jest oddzielone jakimś divide rem i jest to

1:20jakiś padding pomiędzy tymi dwoma elementami.

1:23Zróbmy sobie teraz ten divide divide.

1:25Możemy sobie nałożyć tutaj na ten główny

1:28wrapper i możemy sobie powiedzieć tak, że chcemy mieć gap równy 4.

1:33I w tym momencie Divide y niech będzie na póki co na 2.

1:40Zróbmy sobie jeden pixel, żeby ten divide miał bardzo małą szerokość,

1:45wysokość i kolor divide ying i ustawmy sobie kolor na 300.

1:51Zapiszemy to sobie.

1:52Przejdźmy do naszej przeglądarki.

1:54Póki co nic nie widzimy, bo nie mamy następnego elementu.

1:57Natomiast jeżeli teraz sobie tutaj

1:58wstawimy pierwszy z elementów, które potrzebujemy.

2:01Zobaczmy co potrzebujemy.

2:03Potrzebujemy jakiś obrazek, potrzebujemy tekst, no i potrzebujemy ten mur button.

2:09Przejdźmy do naszego edytora kodu.

2:11I tutaj w tym momencie użyjemy sobie

2:13komponentu Image, który jest dostarczony z Next Jamesem.

2:19Importujemy nasz image, mamy import z Next Image.

2:23Jeżeli chodzi o następną rzecz, to

2:25potrzebujemy tutaj jakiś paragraf i tutaj będziemy potrzebowali jakiś

2:30username i tego usera będziemy skądś potrzebowali sobie zaciągnąć.

2:34Na chwilę obecną ja sobie wpiszę na sztywno, tutaj stanie nową rata.

2:40No i ostatnia rzecz, która tutaj będzie jakiś button

2:45jeżeli chodzi o ikonkę w tym button będzie jedna z ikon

2:50z naszej paczki remix icons Class name i nazwa tej ikonki to jest R i minus No

2:592 fill zapiszemy to już nam się pojawiły ikony, już się pojawił Divided.

3:04No na razie obrazka tutaj nie mamy, bo nie mamy jakby tego obrazka.

3:09Czyli pojawiają się tutaj dwa problemy.

3:12Potrzebujemy tak naprawdę nazwy

3:13użytkownika i potrzebujemy tak naprawdę adres do obrazka użytkownika do avatara.

3:19Z tego co widzieliśmy, jak byliśmy tutaj

3:21po stronie głównej, no to tak naprawdę awatar mamy tutaj ustawiony przez naszego

3:25użytkownika w ustawieniach jego konta, dlatego możemy skorzystać z tej opcji.

3:29Jeżeli chodzi o Clark, to Clark dostarcza

3:33profil Image URL, natomiast najpierw musimy sobie jakoś pobrać użytkownika.

3:38I teraz, żeby pobrać tego użytkownika musimy skorzystać z jednego z gotowych

3:43hubów, które dostarczone są przez paczkę właśnie Clark.

3:46To będzie Connect User równa się + User

3:54i to jest hub, który jest dostarczony właśnie przez Clarka.

3:57Natomiast będziemy mieli jeszcze jeden problem.

3:59Jeżeli przejdziemy teraz zapiszemy tą akcję.

4:03Ja sobie może za komentuje tutaj to wszystko.

4:06Na chwilę obecną przejdziemy sobie do Dashboard.

4:08Sprawdźmy co tutaj się dzieje.

4:10A empty to user from the server user is on the client.

4:16Czyli musielibyśmy.

4:17Żeby skorzystać z tego hooka musielibyśmy

4:19tutaj cały nasz layout przerobić na komponent klienckie, czego generalnie nie

4:25chcemy, bo nasza nawigacja tak naprawdę może być komponentem po stronie serwera.

4:30Tylko te linki tutaj wymagamy, żeby były po stronie klienta, bo

4:34to są rzeczy, które wchodzą w interakcję z naszym użytkownikiem.

4:38Tak samo jeżeli chodzi o tą część.

4:40Tą część możemy sobie wyodrębnić

4:42i tak naprawdę możemy wyodrębnić również wraz z tą częścią ten new

4:48description, dlatego, że w późniejszej części tego kursu pokażę Ci

4:52jak zbudować funkcjonalność dodawania nowych subskrypcji.

4:55Dlatego ten guzik też będzie musiał być tak naprawdę po stronie klienta.

4:59Będziemy tutaj wchodzić w interakcje.

5:01Będziemy sobie otwierać pokład, który

5:02będzie musiał będzie przyjmował input użytkownika.

5:05Dlatego teraz myślę warto jest odpowiedni

5:08moment, żeby sobie wyodrębnić tutaj tą część jako osobny komponent.

5:12Komponent po stronie klienta, czyli standardowy komponent, z którym mieliśmy

5:16okazję pracować tak naprawdę do tej pory w reakcje.

5:19No to przejdźmy do wyodrębnienia tego komponentu.

5:22W naszym folderze komponent zrobimy sobie app i User button jest X.

5:30Niech to będzie nasz nowy komponent po stronie klienta i tutaj

5:34będziemy potrzebowali tak naprawdę zrobić Export Default App USA Button.

5:43No i jako read możemy sobie spokojnie tutaj tak naprawdę

5:47wkleić zawartość tego, co mamy tutaj w tym drzewie.

5:51To będzie nasza część, którą będziemy tutaj chcieli zwracać.

5:57Zapiszemy sobie ten plik.

5:58No i musimy teraz użyć tego komponentu już

6:01w miejscu, w którym chcielibyśmy wykorzystać nasz nasz komponent, prawda?

6:08Czyli teraz Up User Patton.

6:12Zapisujemy to sobie i w tym momencie już powinien zostać wygenerowany ten button.

6:16Jeszcze nie rozwiązaliśmy problemu tutaj

6:18komponentu po stronie klienta, bo cały czas odwołujemy się do tego hooka tutaj po

6:23stronie serwera, co jest oczywiście błędem.

6:25Dlatego przeniesiemy ten hokus user

6:27do naszego komponentu komponentu po stronie klienta.

6:31Użyjemy sobie tego hooka.

6:32Oczywiście musimy go sobie teraz zaimportować.

6:35Zapiszemy sobie to tu.

6:36Ten hook tutaj możemy sobie usunąć.

6:39Możemy sobie optimizer import zrobić,

6:43żeby usunąć importy, które nie są nam potrzebne.

6:45No i w tym momencie już zobaczmy co tutaj się dzieje.

6:49Następne to call.

6:50Jest już zresztą Reserved User, jest on the client.

6:52Oczywiście musimy oznaczyć sobie ten nowo

6:54powstałe komponent jako komponent po stronie klienta, czyli Just Client.

7:00Zapisujemy to sobie.

7:01No i już w tym momencie mamy pierwszą logikę.

7:05Teraz możemy sobie już prawdopodobnie użyć

7:08tutaj z tego usera pewne wartości, które się nam przydadzą.

7:12Natomiast jedna rzecz,

7:13która jest potrzebna to Myślę, że jeżeli usera nie ma to to chcemy zrobić

7:20i Clark też tutaj daje komponent, który możemy użyć.

7:24Mianowicie Clark Loading, czyli zróbmy sobie if teraz not user.

7:29Zrobimy sobie i tutaj Clark Loading to jest gotowy komponent Sklejka.

7:38Musimy go oczywiście teraz też zaimportować.

7:41Zapisujemy to sobie. Teraz już jesteśmy pewni, że usera mamy w

7:44tym miejscu, w naszym komponencie, w naszej funkcji.

7:46Dlatego możemy komentować tutaj to wszystko.

7:50No i tak pierwsza rzecz, którą sobie tu użyjemy to na pewno user

7:53i tutaj możemy sobie użyć naszego username, które jest dostarczane.

7:58Zobacz, mamy wszystko statystycznie jakoś

7:59średnio typowane i już nam podpowiada co tutaj jest dostarczane.

8:03No i username jest jak najbardziej jedną z

8:05właściwości, która jest string w naszym przypadku.

8:08Jeżeli chodzi o nas image no to musimy sobie zrobić kilka rzeczy.

8:12Na pewno serce musimy sobie ustawić i w

8:14tym momencie user co zobaczy mamy profil i mieć niech to będzie profil linii.

8:20Jeżeli chodzi o style tego obrazka to jak najbardziej musimy sobie to ustawić.

8:24Natomiast ciągle będziemy dostawać tutaj

8:26error, że musimy mieć alt property ustalone.

8:30Dlatego teraz robimy sobie alt równa się i tutaj możemy skorzystać z.

8:36I otworzymy wartość.

8:37Tutaj użyjemy User username i możemy dodać avatar jako opis tego obrazka.

8:44Dodatkowo co my tu mamy to sprawdźmy jakie mamy znowu error class,

8:52czyli sprawdźmy image czy oczywiście nie zainteresowaliśmy sobie email.

8:57Do tego kopiujemy tą linie i importujemy.

9:01Tutaj mamy już wszystko jest w porządku.

9:03Natomiast zobacz mamy kolejny error i

9:05miecz w serce jest missing required w w property.

9:09No to zaczniemy sobie dodawać w zależności tego co nasz tutaj kompilator mówi.

9:13Dlatego robimy sobie wf i zróbmy sobie wf tego obrazka na 40.

9:17Ustalmy sobie od razu height, na 40 też

9:21i class name musimy sobie ustawić, żeby ten obrazek był kółkiem, czyli skorzystamy

9:26z gotowej klasy w naszym tagu CSS i tutaj w tym przypadku będzie from the fool.

9:31Zapiszemy sobie to wszystko.

9:33No i teraz dostajemy kolejny error tutaj od naszego frameworka.

9:36Next Zobacz Invalid serce prop host images

9:41is not configure Android next config Teraz.

9:45Otóż jeżeli chodzi o obrazki, które chcesz używać w tutaj w tym

9:51komponencie, no to musimy sobie skonfigurować naszą aplikację tak, żeby

9:56była gotowa do tego, żeby tak naprawdę wywołać te obrazki z innych hostów.

10:03W naszym przypadku chodzi o image dev.

10:06Czyli tutaj musimy rozszerzyć naszą konfigurację o tak images, czyli images.

10:12I tutaj otwieramy sobie tak naprawdę tablicę

10:16i jeżeli chodzi o to, to przyjmuje to taką formę i tutaj możemy sobie ustalić

10:20protokół, protokół i niech to będzie https.

10:26Jeżeli chodzi o host name to musimy sobie skopiować images cleaner

10:32i jeżeli chodzi o port to możemy to sobie zostawić tutaj jako puste.

10:38Warto zapiszemy sobie tą konfigurację.

10:40Zobaczmy czy nasza aplikacja została. Przebudowana.

10:43Czy będziemy musieli sami to zrobić?

10:45Oczywiście pod nimi.

10:48To powinien być obiekt.

10:49Tak naprawdę i my potrzebujemy remont patrząc klucz.

10:55To są nasze ramy.

10:56Teraz i w tym momencie zapiszemy naszą konfigurację i odświeżamy naszą stronę.

11:01Zobaczmy, czy się wczyta, czy też będziemy musieli przebudować naszą aplikację.

11:05Aplikacja już została przebudowana.

11:06Zobacz mamy tutaj obrazek naszego użytkownika, który jest zacytowany

11:11bezpośrednio z obiektu User, który dostajemy z naszego kółka.

11:17Jeżeli chodzi o ten obiekt to ma on bardzo

11:19dużo przydatnych rzeczy, które można sobie tutaj używać.

11:22Jeżeli chodzi o email address mamy zestaw wszystkich maili.

11:26Mamy. Mamy.

11:27W zależności od tego jeżeli chodzi o sesję możemy sobie sprawdzić sesję, także jeżeli

11:31będziesz chciał sobie budować tej aplikacji dodatkowo jakiś panel

11:35zarządzania użytkownikami to bardzo w tym może Ci pomóc tak naprawdę.

11:40Natomiast wróćmy tutaj do sterowania tego, bo jeszcze nie wygląda to tak, jak byśmy

11:45chcieli do końca i czego nam brakuje, to tak naprawdę

11:48brakuje nam tego, żeby te wszystkie rzeczy wyświetlały się tutaj w jednej linii.

11:54Czyli class name zrobimy sobie Flex Items Center.

12:00Zobaczmy tu już jak wygląda.

12:01No już wygląda dużo lepiej.

12:02Na pewno jeszcze przydałoby się jakieś pass y.

12:05Czyli p x ustawimy sobie na cyferkę 4 i Y ustawimy na też 4 zapiszemy to.

12:12No już to wygląda dużo lepiej, prawda?

12:15Jeżeli chodzi o

12:16nazwę użytkownika też przydałoby się to jakoś tutaj wystylizować, czyli własny.

12:23No i tu będziemy potrzebowali odsunąć troszkę tą nazwę, czyli ML 2.

12:26Odsuniemy ją od tego obrazka.

12:28Zrobiła się nam fajna przerwa, zrobimy sobie tekst s m i font semi bold.

12:39Wszystko już wygląda tak jak powinno.

12:41Jeszcze jak tutaj jesteśmy to wróćmy do naszego layoutu i w naszym layoucie

12:46ustawimy sobie inny font dla naszej aplikacji, żeby pokazać Ci, że możesz

12:49sobie wykorzystywać tak naprawdę teraz te layouty.

12:52Bo tak naprawdę marketing pages mogą mieć

12:55swój font, a nasza aplikacja może mieć też swój font.

12:59Także jeżeli przejdziemy tutaj do naszego

13:00layoutu, to możemy sobie zmienić czcionkę dla całej naszej aplikacji.

13:06I to sobie właśnie teraz zrobimy

13:08i skorzystamy sobie z gotowych fontów, które dostarczają nam next.

13:13Mianowicie możemy sobie zrobić const.

13:15Wykorzystamy font inter.

13:16Jest to bardzo popularny font Winter równa się interfejs.

13:20Skorzystamy właśnie z gotowej paczki.

13:22Next Font Google jest to dostarczany właśnie z frameworkiem Next.

13:25No i tutaj możemy sobie ustawić opcję.

13:27Jeżeli chodzi o sam set to ustawimy sobie

13:31latin jeżeli chodzi o display, ustawimy sobie opcję swap.

13:36No i teraz wykorzystamy sobie ten font

13:39i tutaj jeżeli chodzi o klasę to mamy Flex i H.

13:43No oczywiście musimy tutaj skorzystać

13:46teraz prawdopodobnie z albo z interpolacji.

13:50No czyli coś takiego skorzystamy z wartości.

13:55I w środku.

13:56Tutaj możemy sobie wykorzystać Winter Classic.

14:01Zapiszemy sobie już font w całej naszej aplikacji się zmienią.

14:06Także już mamy inny font.

14:07Powinien to być Inter.

14:08Teraz sprawdźmy w naszej aplikacji jakiego używamy konta.

14:12No i mamy Inter, także to jest główny font całej naszej aplikacji.

14:16Dobrze, myślę, że tutaj mamy wszystko.

14:18Jeżeli chodzi o styl owanie naszego

14:20layoutu w aplikacji, to sobie możemy zamknąć.

14:22Natomiast pozostaje nam tutaj jeszcze jedna rzecz.

14:24Otóż zbudowanie funkcjonalności do

14:25wylogowania się użytkownikowi i teraz tym zajmiemy się w następnym module.