Next.js 13 w Praktyce: Komponent ze statystykami grup subskrypcji

0:00Komponent statystyk możemy uznać za skończony.

0:03Na chwilę obecną myślę, że to jest dobra

0:05baza do tego, żebyś mógł mogła dalej rozwijać swoją aplikację.

0:08I widzisz teraz sposób, w jaki można sobie

0:11podchodzić do kolorowania, do budowania pewnych funkcjonalności.

0:14Oczywiście, że jest tutaj jeszcze mnóstwo rzeczy, które można było torować.

0:18Natomiast na chwilę obecną myślę, że sobie to zostawimy.

0:21Przejdziemy teraz do kolejnego elementu

0:23naszej aplikacji, mianowicie tutaj tej strony, którą widzimy po prawej stronie.

0:29Zajmiemy się teraz dokładnie tym

0:31elementem, który widzisz po prawej stronie tutaj.

0:33I jeżeli chodzi o design,

0:35to przejdźmy do naszej firmy i zobaczmy w jaki sposób to wygląda.

0:40Tutaj mamy jakiś header, który mam tutaj u góry.

0:44Mamy jakoś.

0:45Można powiedzieć to jest tabelka z kategorią i z kosztem.

0:52No i mamy na dole wyszczególnienie na najbardziej drogą kategorię naszej

0:56subskrypcji i najtańszą kategorię naszych subskrypcji.

0:59Także możemy teraz przejść do implementacji tego komponentu.

1:03Ja sobie troszeczkę tutaj to zostawię na

1:06pełny ekran, natomiast przejdziemy do naszego edytora kodu.

1:09Będziemy widzieć zmiany, które będą tutaj

1:11po prawej stronie się pojawiały w miarę pisania naszego komponentu.

1:16Myślę, że ma sens jak najbardziej.

1:17Znowu wyodrębnienie sobie czegoś takiego, do czego przekazujemy te

1:21dane, które już i tak zostały czytane na tej stronie.

1:24Dlatego przejdźmy teraz tutaj do naszych komponentów i wyodrębnienie w dashboard

1:29kategorii Project Down Component, czyli Dashboard Can't Break Down tez X.

1:35No i analogicznie jeżeli chodzi o komponent ze statystykami, tutaj możemy

1:39sobie tak naprawdę skopiować początek, zmienimy nazwę.

1:45No i tu potrzebujemy zamknąć nasz build kategorii breakdown tu jako read.

1:53Nie zapominajmy o tym.

1:55Możemy sobie wrzucić już nasz wrapper,

1:57który jest odpowiednio przygotowany do tego, żeby pokazać naszą treść.

2:02No i teraz tutaj w to miejsce możemy sobie wrzucić nasz dashboard Category Breakdown.

2:09Zapiszemy to sobie wyświetlania naszej strony.

2:12To się nie zmieniło, bo nie zmieniliśmy

2:13jeszcze nic, ale teraz już możemy przejść do naszego komponentu.

2:16Ja sobie zamykam tutaj te wszystkie okna i

2:19możemy przejść do implementacji tego co jest w środku.

2:23Mianowicie rozpoczniemy sobie od jakiegoś tytułu, bo z tego co widać na naszym

2:28designie to mamy jakiś tytuł kategorii breakdown tutaj tego komponentu.

2:32Dlatego możemy przejść do edytora kodu i zacząć implementować nasz tytuł.

2:37Niech to będzie dwójka w tym przypadku.

2:40I w tym momencie kategorii

2:43break down zapiszemy i już nam się coś pojawia jeżeli chodzi o style.

2:48Sprawdźmy czy tutaj mamy wszystko rozpisane I1 Run the beginning, xn Flex.

2:55Jeszcze przydałby się jakiś padding, żeby to wszystko od siebie odsunąć, czyli P6.

2:59Myślę, że jest jak najbardziej ok.

3:01No i tutaj rysujemy sobie teraz ten napis

3:03to będzie tekst i oczywiście class najpierw

3:07tutaj text, czyli zwiększymy sobie rozmiar i font też sobie zmniejszymy, zwiększymy.

3:15No sami bold no mamy już ładniejszy napis, kategorie biegną.

3:18Kolejną częścią tutaj będzie nasza tabelka z danymi.

3:23To sobie tutaj zostawimy.

3:24Na chwilę obecną wrzucimy komentarz

3:27data table i tutaj kolejną częścią będzie tak naprawdę wyświetlenie statystyk.

3:34Tak.

3:35Czyli możemy zająć się może tą częścią na początku.

3:38Jeżeli chodzi o to zajmiemy się, zrobimy sobie jakieś nagłówki.

3:43Na początku będzie Most ekspansji w kategorii I tutaj poniżej

3:47musimy sobie dać miejsce na wyświetlenie informacji na temat tych kategorii.

3:52Na razie wpiszemy to na sztywno.

3:53Te informacje w naszym przypadku to będzie jakaś cena prawdopodobnie.

3:59Czyli zrobimy sobie 36 77.

4:02Na chwilę obecną pakujemy to w paragraf.

4:05Napisz sobie budujemy to rozwiązanie,

4:07później zobaczymy w jaki sposób to będzie tutaj wyglądało.

4:10Jeżeli chodzi o name tutaj to możemy sobie zrobić czwórkę i na razie napiszemy enter,

4:17dopóki nie zajmiemy się logiką tego wszystkiego.

4:20Widzimy, że tutaj wyświetlanie tych

4:21elementów w naszym głównym kontenerze nie jest za bardzo poprawne.

4:27Myślę, że musimy dodać tutaj flex column, żeby to wszystko ustawiało się pod sobą.

4:32Jest jak najbardziej ok.

4:34I teraz to możemy sobie zostawić.

4:36Jeżeli chodzi o ten komponent to chcemy, żeby tabelka zajmowała

4:40praktycznie całą wysokość tutaj i to chcemy przenieść na sam koniec.

4:44Czyli w tym momencie możemy sobie tutaj

4:47ustawić już tak naprawdę margin na top, na dwójkę, na full i grą,

4:55no i w przesunie nam to całe category na dół.

4:57Tu tak jak mówię, jest miejsce właśnie.

5:00Teraz rysowaliśmy na naszą tabelkę z poszczególnymi statystykami kategorii,

5:04natomiast zajmiemy się teraz wyświetlaniem tutaj tego pojedynczego elementu.

5:09Czyli przeskoczymy tutaj ten div i postaramy się to postulować.

5:15Class name i w naszym przypadku niech to będzie flex.

5:21Niech to będzie Items Center.

5:24Żeby wyśrodkować te elementy i niech to będzie czas HiFi Between.

5:29Z tego względu, że chcemy od by odsunąć od siebie cenę i nazwę danej kategorii.

5:36Jeżeli chodzi o nazwę kategorii to też tutaj będziemy musieli

5:39prawdopodobnie sobie jakieś style zastosować.

5:43To jest na chwilę obecną to zostawimy, przejdziemy sobie to

5:48oscylowały tutaj tej ceny, czyli klasy name i w naszym przypadku font semi bold.

5:56Dodatkowo będziemy potrzebować text z.

6:00Zrobimy sobie 950 i to wszystko na chwilę obecną.

6:06Tu mamy już cyferka nam się wyszczególnia.

6:08Jeżeli chodzi o tą czwórkę to zostawimy sobie tak jak ma być.

6:15Tak naprawdę jeżeli chodzi tutaj o Most

6:17ekspansji w kategorii to też możemy to wystylizować, czyli fast text.

6:23Zróbmy sobie LG znowu i font semi bold.

6:29No już mamy mostek z pensji w kategorii też się fajnie.

6:36To wystylizować, to teraz jeszcze żeby przesunąć te elementy

6:41od siebie, to możemy sobie tutaj popracować nad tym w raperem Flex.

6:46Niech to będzie flex column,

6:49bo elementy były pod sobą i jeżeli chodzi o garb ustawimy go na wartość 4.

6:56Odsunąć od siebie te dane?

6:58Myślę, że na chwilę obecną możemy to sobie zostawić.

7:01Ja tutaj widzę potencjał do

7:03tego, żeby wyodrębnić sobie znowu taki komponent tutaj.

7:07Natomiast na razie po prostu sobie to

7:09tutaj kopiujemy, myślę i będziemy mogli sobie wykorzystać tak

7:14naprawdę ten sam, ten sam komponent tutaj poniżej.

7:18Żeby go wykorzystać, to musimy sobie głowy

7:21skopiować z jakiegoś diva kolejnego i przesuniemy to w taki sposób i to już w

7:27tym momencie możemy sobie zrobić kopiuj wklej.

7:31I tutaj niech będzie chips, czyli najtańsza kategoria.

7:36Niech to będzie Siemens.

7:40Cyferki możemy sobie tu zostawić.

7:42Myślę, że wygląda to już jak najbardziej poprawnie.

7:46Tutaj jeszcze ten napis mógłby być chyba troszeczkę mniejszy.

7:49Sprawdźcie sobie na naszym dizajnie na

7:51naszej stronie internetowej jest on troszkę za duży.

7:53Przejdźmy do nazwy tych Entertainment Instruments Class Name Text.

8:00No i już wygląda to troszeczkę lepiej.

8:02Mamy mostek w kategorii Entertainment Instruments.

8:05Teraz musimy zająć się tak naprawdę logiką.

8:09Póki co tabelki sobie na sztywno nie będziemy budować z tego względu, że

8:13najpierw zbudujemy sobie teraz funkcję, która będzie odpowiadała za

8:17logikę, która policzy nam koszt poszczególnych kategorii.

8:22Przejdźmy teraz wyżej i najpierw zaczniemy od funkcji, która będzie nam zaliczała

8:27sumy poszczególne dla poszczególnych kategorii sumy.

8:31Koszty dla poszczególnych kategorii, czyli zsumowane subskrypcje należące do

8:35poszczególnej kategorii wynoszą na rzecz użytkownika, czyli function.

8:40I tutaj w tym momencie sam Price z

8:45kategorii No i tutaj jako dane podamy sobie data subskrypcji.

8:52I jeżeli chodzi o to, to musimy jak

8:55najbardziej zaimportować tutaj ten typ z Primy.

8:58I w tym momencie musimy zrobić edytor.

9:01I tutaj i tutaj za pomocą funkcji Radius musimy skorzystać coś z logiki.

9:07Jeżeli chodzi o nasz Accelerator to

9:10niech to będzie record typu record String number.

9:15I jeżeli chodzi o item to zostawimy to tak jak jest.

9:23Dobrze i teraz zrobimy LED Prize.

9:28To się równa tolerancji i stworzymy sobie nasz obiekt westchnień.

9:35To troszkę inne podejście do tworzenia swoich statystyk.

9:40Poprzednio robiliśmy to za pomocą po prostu stałych sztywno za.

9:47Natomiast tutaj zrobimy sobie cały obiekt.

9:51Tak naprawdę jeżeli chodzi o euro zrobimy sobie cenę 4,7 tak jak poprzednio.

9:57Jeżeli chodzi o oczywiście dwukropek.

9:59Tutaj jeżeli chodzi o dolary zrobimy sobie 4 5 jeżeli chodzi o PLN oczywiście 1.

10:09Jest to główna waluta naszej naszej aplikacji i jeżeli chodzi o.

10:16O nasz protest.

10:17No to tutaj musimy sprawdzić, czy kadencji Leppera jest karencji exchange rate.

10:26Jeżeli tak to item price

10:30razy exchange rates i tu możemy sobie wykorzystać item currency.

10:37Jeżeli nie ma to item.

10:41Zrzucimy w tym przypadku.

10:44Tu mamy już funkcję jeżeli chodzi o nasz projekt.

10:47Teraz musimy sobie dodawać tą cenę do

10:53obecnej kategorii, czyli IV kategorii In Accelerator.

11:05Możemy sobie zrobić akcelerator.

11:08Item category i robimy plus równa się nasz price Tak?

11:16Natomiast jeżeli nie.

11:18Przy przeciwnym przypadku musimy

11:20zainicjować tak czyli else i Accelerator też Item Category.

11:33Jest równy pracom.

11:37Zwrócimy.

11:40Rytualny akcelerator tutaj.

11:46Teraz jeżeli chodzi o problem, nasz problem tutaj z typami.

11:48Musimy to przenieść do naszego komponentu, tutaj do środka.

11:53Niech to będzie funkcja i tutaj.

11:55Jeżeli chodzi o dane to data i musimy stworzyć typ.

12:00Będzie to typ analogiczny do tego co mieliśmy w main.

12:05Tutaj nie będzie interfejs Dash, bo od break down props.

12:14Są to subskrypcje.

12:16Tutaj musimy sobie zaimportować znowu Payments.

12:19Jeżeli chodzi o ten typ to wrzucimy.

12:24Coś takiego.

12:25Natomiast w naszym przypadku to będzie tata, ok.

12:30I tutaj w tym momencie, w którym

12:31przekazujemy to do naszego komponentu, możemy zrobić i widoczną datę wieczór.

12:38W naszym przypadku zapiszemy sobie to wszystko.

12:42Teraz, już po zapisaniu tego komponentu jest wszystko w porządku z naszymi typami.

12:48Tutaj jeżeli chodzi o te data retro null

12:50możemy sobie to darować tak naprawdę, bo dane są nam zawsze przekazywane.

12:56Nie, my nie mamy undefined.

12:59Tylko tutaj jeżeli chodzi o nasz dashboard musimy sobie przekazać teraz nasze dane.

13:04Oczywiście będzie problem tutaj z typami.

13:08Zróbmy na razie tutaj.

13:10I znowu data.

13:12Zrobimy sobie return. Będzie to tam.

13:15To, że tutaj jesteśmy pewni, że dane istnieją.

13:18Mamy naszą kategorię teraz musimy sobie wykorzystać tutaj.

13:23Z tych danych, które zostają dla nas

13:26obliczone, czyli mamy sam Prices by category i tak naprawdę z powrotem

13:31dostaniemy obiekt, w którym będziemy mieli kategorię i cenę.

13:37Jeżeli teraz wykorzystamy to

13:41w praktyce, czyli teraz sprawdźmy w jakiej formie dostaniemy nasz kod.

13:47Resort równa się sam procesor kategorii data.

13:53Zobaczymy konsolowy resort.

13:58Zapiszemy to sobie.

13:59Sprawdźmy.

14:00Jako, że jest to komponent po stronie

14:02serwera, to musimy wejść nasz w nasz terminali.

14:06Zobaczymy po odświeżeniu jakiego typu dane dostajemy.

14:11Póki co mamy tylko i wyłącznie mamy Entertainment Info Tours, TBL Tours

14:18Tours i mamy wszystkie dane sumowane razem z kosztami.

14:23No przydałoby się coś zrobić z tymi

14:26z tymi danymi, żeby to troszeczkę jednak lepiej było wyświetlane.

14:30Dlatego możemy sobie tutaj skorzystać z Object Countries.

14:35Ja troszkę przerobię te funkcje i te same kategorie zrobimy Object Entry.

14:41I już w tym momencie dostaniemy tablicę.

14:46Tutaj wykorzystujemy Object Entry, żeby

14:49zmapować to w tablicę, gdzie wartością w tej tablicy będzie obiekt,

14:54który będzie zawierał imię, kategorii i cenę.

14:57Myślę, że będzie dużo łatwiej nam pracować z czymś takim w tabelce.

15:01No i tutaj dostajemy już właśnie nazwę kategorii i cenę danej kategorii.

15:06Przejdźmy teraz z powrotem.

15:07Już mamy tak naprawdę wszystko to, co potrzebujemy do wyświetlenia tabelki.

15:12Natomiast jeszcze potrzebujemy jedną funkcję.

15:16Jeżeli chodzi o funkcję, która wyszukuje

15:18nam najdroższe i najtańsze jest już to skrypcie, jeszcze przygotowałem na boku.

15:22Logika polega na tym, że przekazujemy

15:24tutaj rezultat z tego gdzie mamy nazwę kategorii i cenę.

15:28Mamy taką tablicę.

15:29I tutaj redukujemy tą tablicę i

15:31sprawdzamy, że jeżeli current price jest większy niż mostek z pensji w który

15:36powstaje nam w torze, to przypisujemy ten current.

15:40Natomiast jeżeli current price jest

15:41mniejszy to przypisujemy do paska rent i zwracamy tak naprawdę w akcelerator.

15:50No i tutaj podajemy obiekt jakiego

15:52spodziewamy się na końcu dostać tutaj z tego rezultatu.

15:57No i w tym momencie możemy

15:59zrobić już Connect Most ekspansji I, czyli po prostu

16:06i wykorzystać już naszą funkcję tutaj, która jako parametr przyjmie sobie

16:11rezultat tutaj, który mieliśmy wcześniej i już mamy najdroższą i najtańszą

16:18kategorię, możemy sobie zrobić console log.

16:22Czyli podkategorii.

16:23Przejdźmy teraz do naszego terminala. No i mamy.

16:26Najbardziej droga kategoria jest Entertainment naszego użytkownika.

16:31Najtańsza jest ubezpieczenia, czyli 22 784.

16:35Mamy już dane potrzebne do wykorzystywania ich tutaj.

16:40Przejdźmy teraz do wykorzystania tych danych.

16:42Mamy mostek z pensji w kategorii, czyli mamy nami pracę.

16:47Czyli tak naprawdę możemy sobie tutaj.

16:48Jeżeli chodzi o mostek z powyższych kategorii.

16:51Możemy sobie to tutaj wykorzystać i mostek z pensji i wykorzystać nasz name.

16:57Tutaj możemy sobie zrobić mostek z pensji, wykorzystać nasz price.

17:04Most Ekspansji.

17:07Proste i.

17:09Natomiast będziemy musieli zrobić dwa miejsca po przecinku.

17:14Chcemy dostać i już mamy uaktualniony ten komponent.

17:18Jeżeli chodzi o najtańszą kategorię, to zróbmy test

17:25name i w tym przypadku też musimy tak naprawdę zrobić podobną logikę.

17:31W tym miejscu jeżeli chodzi o najtańszą

17:33kategorię tylko zmienimy, zapisujemy to mamy już poprawną cenę.

17:40Natomiast zróbmy jeszcze. Sprawdźmy jeszcze design, bo

17:43mamy tutaj jeszcze walutę, która powinna być dodana na końcu.

17:47W naszym przypadku ma być to główna waluta

17:49ze statystyk wyświetlanych dla naszego użytkownika.

17:52Czyli tak naprawdę musimy teraz tutaj wykorzystać SPAN, a np.

18:00w tym przypadku span.

18:02I tutaj zapiszemy sobie PLN i użyjemy to klasy name i tam

18:10jeden margin po lewej stronie tekst zrobimy na 8 pikseli.

18:15Nie mamy takiej wartości.

18:16Musimy to troszkę pomniejszyć i

18:20możemy skopiować to poniżej tutaj i już mamy złotówki.

18:27Ile to kosztuje? Ile kosztuje najdroższa kategoria?

18:29Ile kosztuje najtańsza kategoria?

18:31Teraz zajmijmy się zbudowaniem tabelki, którą będziemy mieli powyżej

18:36właśnie z danymi związanymi z tymi wszystkimi kategoriami.

18:40Może usuniemy ten console log?

18:41Dobrze, no to teraz przejdźmy do budowy tej tabelki.