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

0:00Kolejna strona, którą się skupimy to będzie strona subskrypcji.

0:03Będzie to już ostatnia strona w tym kursie, którą zbudujemy razem.

0:06Dodatkowo jeszcze dodatkowe moduły powiemy

0:08sobie o dodawaniu nowej subskrypcji i o edytowanie ich.

0:12Pokażę Ci w jaki sposób można ograć taką

0:14funkcjonalność i przejdziemy do podsumowania.

0:17Natomiast na chwilę obecną skupmy się

0:19tutaj na na stronie związaną z subskrypcja.

0:22Najpierw musimy zająć się zdecydowanie funkcjami, które pozwolą nam dostać się

0:28tutaj do tych statystyk, które chcemy i tak naprawdę

0:32będziemy potrzebowali statystykę związaną ile mamy aktywnych subskrypcji,

0:37jaka jest najdroższa, jaka jest najtańsza, jaki jest średni koszt subskrypcji naszego

0:42użytkownika, jaki jest totalny miesięczny koszt i totalny roczny koszt?

0:47Chcielibyśmy pokazać takie statystyki.

0:49Przejdźmy teraz do kodu i jeżeli przejdziemy sobie tutaj do naszej

0:54APP to aplikacji do naszych dwóch stron, to mamy stronę z naszymi skryptami.

1:01Jeżeli chodzi o content na razie sobie to zostawimy, natomiast my

1:05zajmiemy się funkcją, która dostarczy nam statystyk, które chcielibyśmy wyświetlić

1:11w naszym komponencie, czyli function get stats.

1:15Możemy nazwać.

1:16Tak naprawdę w tym momencie nie ma to większego znaczenia dla nas.

1:20Możemy sobie to zawsze zrekonstruować, jeżeli chodzi o dane, które przekażemy

1:25do tego, do tego do tej funkcji, to to będzie data,

1:30podobnie jak to miało miejsce w komponencie z danymi dla Dashboard.

1:36Jeżeli chodzi o logikę, to będzie tutaj już troszeczkę to inaczej wyglądało.

1:41Na pewno będziemy potrzebowali aktyw subskrypcji równa się zero.

1:48Na chwilę obecną to jest informacja ile użytkownik ma aktywnych subskrypcji.

1:52Jeżeli chodzi o

1:54COST koszt najbardziej najdroższej, czyli

1:56jest most Expanded i 5.0 oczywiście Let.

2:07I tutaj most.

2:09Most ekspansywny.

2:11Dodatkowe zmienne, jakie będziemy potrzebowali to tak naprawdę.

2:18Czyli.

2:21Czyli najtańszą Total Monthly Cost i

2:25jelly cost, czyli ile miesięcznie użytkownik płaci, za co i ile rocznie.

2:30Teraz przejdźmy do logiki.

2:32Tutaj możemy sobie zrobić data, chwalić.

2:37No i mamy naszą subskrypcję i dla każdej subskrypcji.

2:41Zaczniemy od jednej rzeczy.

2:43Na pewno.

2:45Jeżeli filtrujemy sobie przez subskrypcje,

2:47to chcemy sobie zwiększać aktywne subskrypcje, czyli aktywne subskrypcje.

2:51Możemy sobie zrobić + +.

2:54Dodatkowa rzecz, która będzie potrzebna to

2:56na pewno koszt w złotówkach, czyli cost const.

3:01Post.

3:03N.

3:04N.

3:06I tutaj możemy skorzystać tak naprawdę z tego samego obiektu, który

3:11mieliśmy tutaj przygotowany w naszym komponencie ze statystykami.

3:14Przejdźmy teraz do niego.

3:16Dashboard Main Stats i tutaj w kategorii Projekt to mieliśmy

3:23gdzieś przygotowany obiekt, w którym korzystaliśmy z naszych Exchange rates.

3:28Możemy sobie wyciągnąć to na zewnątrz, czyli wyciągniemy Exchange i eksport.

3:36Const exchange changes.

3:38Możemy sobie dodać komentarz dla przyszłych developerów, że to jest,

3:43że to są Exchange, które nasza aplikacja wspiera, która ma support.

3:48Oczywiście, że w wersji produkcyjnej musielibyśmy to tak naprawdę.

3:51Wspominałem już o tym.

3:53Najlepiej byłoby zrobić opcje użytkownika,

3:55jakiś plik konfiguracyjny, kontekst, odczytywać nasze aplikacje.

3:58My tutaj na potrzeby tego kursu pokazuję tylko i wyłącznie, że

4:03nasza aplikacja może obsługiwać ile chcemy tak naprawdę tych walut.

4:08My skupiamy się tylko na tych najbardziej popularnych u nas.

4:12No i tutaj jeżeli chodzi o koszt internetu, czyli musimy to jest price.

4:22I to razy. Exchange Rate.

4:27Za Importujemy ten obiekt z komponentu Dash Pool Category Projekt Dom.

4:31Prawdopodobnie powinniśmy sobie

4:33dodać jakiś utilities albo model i wrzucić Exchange w ten folder.

4:39Natomiast zostawimy sobie z tego względu,

4:41że tylko mamy dwa widoki w naszej aplikacji.

4:43Możemy to sobie zostawić w taki sposób.

4:46I tutaj jeżeli chodzi o kod,

4:49którym się będziemy posługiwać, to potrzebujemy currency

4:55notes, bierzemy się do odpowiedniego exchange rate.

4:58No i teraz if cost in PLN czyli cost per ta wartość.

5:09Będzie większa niż mostek z pensji.

5:13No to musimy sobie przypisać most ekspansji.

5:17Jest równy koszt PLN. Tak?

5:21Kolejny IF to jest post.

5:25Jeżeli ta wartość w złotówkach będzie

5:26mniejsza niż najtańsza aktualna, to też warto sobie chipset ustawić na PLN.

5:36Mamy już informację na temat ile kosztuje najdroższa i ile kosztuje najtańsza.

5:40Nie potrzebujemy tutaj w statystykach de facto wyświetlenia jaka to jest

5:46subskrypcja, dlatego też nie uwzględniamy tego w naszej logice na chwilę obecną.

5:50Kolejna rzecz, którą potrzebujemy to musimy kalkulować

5:54miesięczny i roczny koszt bazując na billing period subskrypcje, bo subsydia

6:02możemy mieć billing period roczny, miesięczny i bazując na tym musimy musimy

6:08sobie tutaj kalkulować miesięczny i roczny koszt.

6:12Czyli możemy sobie skorzystać z instrukcji switch.

6:16I w tym momencie jeżeli chodzi o nasz KI to będzie subskrypcją billing period.

6:22Jeżeli chodzi o nasze value jeżeli chodzi

6:25o pierwszą wartość, czyli subskrypcję Billing Period zróbmy na monthly.

6:30Jeżeli to będzie monthly no to

6:33total monthly cost musimy dodać nasz koszt pln pln.

6:40Jeżeli chodzi o Total Jelly Cost.

6:45To też musimy dodać.

6:48Tą wartość oczywiście pomnożone razy 12 czyli costam PLN razy 12, bo to jest

6:56dodajemy do rocznego kosztu jeżeli mamy subskrypcję.

6:59Tak naprawdę.

7:02O koszcie miesięcznym.

7:04No to musimy pomnożyć razy 12.

7:06Tyle ona będzie nas kosztowała w jednym roku.

7:09Przechodzimy teraz do następnego case.

7:12Możemy sobie skopiować tutaj ten KS, który mamy poniżej.

7:16Oczywiście tutaj.

7:17W tej logice nie uwzględniamy tego, że zaczyna się w czerwcu.

7:21Czerwiec jest miesiącem numer 6 w danym roku.

7:24Dlatego pewnie, żeby to zrobić poprawnie

7:26totalnie musielibyśmy tutaj uwzględnić start danej subskrypcji.

7:31W którym miesiącu ona wystartowała i wtedy na rok 2000 np.

7:3423 moglibyśmy policzyć dokładny koszt roczny.

7:38Ja tutaj upraszczam,

7:40po prostu liczę razy 12 miesięcy, jeżeli zakładam, że użytkownik po prostu będzie

7:44korzystał z danej rzeczy przez następne 12 miesięcy.

7:48Tutaj jeżeli chodzi o drugą wartość, to quarterly i my wykorzystujemy tutaj.

7:53Jeżeli chodzi o monthly cost to musimy sobie to podzielić przez 12.

7:58Też jest uproszczona logika tutaj pokazać.

8:02Jeżeli chodzi o cost to razy 4, bo mamy 4 kwartały.

8:08No i ostatni case możemy sobie zrobić Jolly.

8:13I tutaj sytuacja będzie podobna.

8:16Tutaj po prostu PLN dodajemy.

8:18Ja to po prostu podzielimy to przez 12

8:23forteli tutaj oczywiście nie przez 12 dzielimy tylko przez 3.

8:28Myślę, że tak jak to jest teraz, możemy to zostawić.

8:32To jest podstawowa logika, która pozwoli nam tutaj dostać Total Monthly.

8:37Oczywiście, że tak.

8:38Jak mówię, żeby zrobić to w stu procentach poprawnie, musielibyśmy

8:42prawdopodobnie odczytywać wartości każdej subskrypcji start date.

8:46Porównywać to z miesiącem, który to miesiąc jest danym roku i wtedy tyle

8:49miesięcy, ile zostało odpowiednio to sobie pomnożyć.

8:53Natomiast przyjmijmy, że tak naprawdę kondycja będzie po prostu zawsze.

8:58Jeżeli chodzi o roczny koszt, to będzie po prostu trwała 12 miesięcy.

9:03Jeżeli chodzi o average, czyli

9:09cost per se możemy sobie to policzyć jako total monthly cost.

9:15Przez aktywne subskrypcje SMS.

9:17Czy to będzie nasza średnia?

9:23Ile kosztuje średnio nasza jedna subskrypcja?

9:25I tutaj musimy zwrócić obiekt z naszymi,

9:29z naszymi danymi na lepiej odpowiednio sformatowany.

9:32Już sobie przygotowałem z boku i zwracamy

9:34obiekt w takiej postaci, że mamy 5 ki walk.

9:39PS. Mamy wszystkie aktywne subskrypcje.

9:41Mamy najdroższą, najtańszą.

9:44Średni koszt, miesięczny koszt i roczny koszt nasze subskrypcji.

9:49Co teraz możemy sobie zrobić?

9:50To tak naprawdę musimy zacząć tutaj

9:53pracować nad częścią naszego contentu w naszej aplikacji.

9:57Czyli zaczniemy od ogólnego ułożenia i komponenty ze statystykami.

10:02Przejdźmy teraz do implementacji

10:05naszego u naszego ogólnego ułożenia naszej strony naszego Playa.

10:10Czyli zrobimy sobie main i własny i tutaj mix.

10:16Chcemy wyśrodkować sobie ten cały wrapper.

10:19Wyświetlimy to jako grid, podobnie jak to było przepraszam w poprzednim przypadku.

10:25FA ustawimy na full jeżeli chodzi o max.

10:29Ustawimy to też na 7 XL tak jak w przypadku tutaj Grid.

10:34Potrzebujemy tak naprawdę jedną kolumnę.

10:36Grid rows ustawimy też na customowe wartości.

10:40W naszym przypadku będzie to podobnie jak poprzednio mieliśmy 80 pikseli u góry

10:45i tutaj będzie reszta, którą zajmuje nasza strona.

10:49Ustawimy sobie też na 6, podobnie jak to miało miejsce w naszym Wordzie.

10:53Jeżeli chodzi o padding y też ustawimy sobie na 6.

10:57Zapiszemy tą wartość.

10:58Przejdźmy do naszej przeglądarki, żebyśmy

11:00już tutaj widzieli czy cokolwiek zaczyna się dziać.

11:03Teraz musimy sobie wrzucić tutaj 2 wrapper.

11:06Otóż 1 wrapper będzie potrzebny do naszych

11:09statystyk, a drugi wrapper będzie potrzebny na naszą tabelkę.

11:13Czyli zaczniemy od tego pierwszego na statystyki.

11:16Potem będziemy mogli sobie ten kod

11:18rysować, wydzielić osobny komponent na statystyki, osobny komponent na tabelkę,

11:22tak jak to robiliśmy w dashboard wlasnej i tutaj Round.

11:28XL.

11:31Bedzie leasing 50 i padding na 6.

11:36Zapiszemy sobie tą wartość.

11:38Już w tym momencie pojawia się pierwszy wrapper na komponent ze statystykami.

11:43No i kolejna rzecz to też div tutaj class name.

11:48Ustawiłem sobie flex flex

11:51round też na XL i leasing 50 i na padding ustawimy sobie na 6.

12:00Zapiszemy to sobie.

12:01No i już mamy kolejny komponent na naszą tabelkę.

12:05Teraz możemy sobie przejść tutaj do

12:06implementacji naszego komponentu ze statystykami.

12:10Otóż co będziemy do tego potrzebować?

12:12To na pewno kolejny wrapper, który nam

12:14wyszukuje te wszystkie elementy, czyli div class.

12:19I tutaj sobie wpiszemy Flex Fusion i Items Center.

12:27Proszę ustawcie sobie GAP pomiędzy tymi tematami na 6.

12:31Mamy i tutaj możemy tak naprawdę wykorzystać nasze

12:35komponenty do Single Stack Component czyli Single Stack Component.

12:42No i czego ten nasz component tutaj oczekuje?

12:44Od nas oczekuje sumy, czyli pierwszy.

12:48Pierwsza statystyka, którą będziemy chcieli pokazać.

12:51Będzie to statystyka związana z najdroższą subskrypcją.

12:58Tak. Czyli wróćmy do naszego edytora kodu.

13:01Jeżeli chodzi o naszą najdroższą subskrypcję, mamy tutaj mostek z pensji.

13:05Możemy sobie to wrzucić i.

13:09Oczywiście jeszcze zanim dostaniemy pensję, musimy to wszystko użyć

13:15i przekazać nasze dane do funkcji Get stats.

13:19Czyli const równa się get.

13:21Wstac i potrzebujemy Date date.

13:26Data przychodzi nam z zewnątrz jako

13:29property do tego komponentu i możemy sobie analogicznie do strony Dashboard Page.

13:36Tutaj albo możemy wywołać funkcję Data Full port, czyli tutaj mieliśmy

13:42funkcję, która wysłała nam po prostu te dane.

13:45Natomiast myślę, że możemy sobie to ograć w inny sposób.

13:50To jest. Kopiujemy na razie po prostu tą funkcję,

13:53zaraz sobie sprawdzimy, jak można ten kod bardziej zresztą autoryzować.

13:56Czyli tutaj jeżeli chodzi o

13:59dane, to po prostu kopiujemy tą samą wersję z odczytywania danych,

14:04którą mieliśmy poprzednio w naszym Wordzie i tutaj jako data czyli const data

14:13możemy sobie po prostu odwołać się też tutaj do tej funkcji.

14:17Jeżeli chodzi o logikę związaną z tą

14:19funkcją to możemy sobie ustawić na desce link tutaj.

14:25To będzie w porządku.

14:26Tutaj zrobimy sobie to, jeżeli nie będziemy mieli danych.

14:31Na chwilę obecną i tutaj jeżeli chodzi o

14:33Get Stats, no to musimy przekazać odpowiednie dane.

14:38Prom jest, Oczywiście trzeba poczekać.

14:41Komponent po stronie serwera.

14:42Cały czas możemy wykorzystać te dane.

14:45Teraz już mamy nasze statystyki, czyli

14:46możemy wykorzystać sobie stat kropka mostek z pensji.

14:51Zobaczmy czy zwracamy nasze dane.

14:54No i tutaj mieliśmy błąd, bo wskoczyliśmy

14:56w ciało funkcji, co jest generalnie błędem.

14:59Musieliśmy sobie wyskoczyć z tego average cost person.

15:04Musimy sobie też to tutaj wyciągnąć.

15:06Poza tym instrukcja data for, lecz.

15:08No i teraz już mamy tak naprawdę nasze dane w odpowiedniej formie.

15:13Możemy to wykorzystać.

15:15No i tutaj jeżeli chodzi o pierwsze, to mostek z pensji potrzebujemy.

15:19No i dodatkową rzeczą, którą potrzebujemy to jest nasz sam title i nasz title.

15:24To będzie po prostu mostek z pensji.

15:27Tak, zapiszemy nasz komponent.

15:29Sprawdźmy.

15:30No i już mamy odpowiedź na informację, ile

15:33kosztuje najdroższa subskrypcja naszego użytkownika.

15:37Żeby sobie sprawdzić poprawność danych możemy sobie odwiedzić localhost 5 1555,

15:41sprawdzić sobie nasze subskrypcje i zobaczmy co tu jest najdroższe.

15:4530 dolarów.

15:47Odpalamy kalkulator tak na szybko.

15:49Jeżeli chodzi o walidację 30 razy 4,5 to jest około 135 dolarów.

15:55To jest najdroższa subskrypcja, którą mamy w naszej bazie danych.

15:59No i generalnie to jest wartość podobna, bardzo zbliżona do tej, którą mamy tutaj.

16:04Także to jest pierwsza statystyka.

16:07Teraz analogicznie do tego możemy sobie przejść do statystyki numer dwa.

16:10To będzie najtańsza subskrypcja, czyli Chips i tutaj, czyli po subskrypcji.

16:18Mamy statystykę numer 2.

16:20Wyszło nam 0 PLNów.

16:22Sprawdźmy.

16:23Dlaczego?

16:25Prawdopodobnie dlatego, że sprawdzamy, czy jest mniejsze.

16:30Tej najtańszej.

16:32Możemy to zamienić na Infinity.

16:34I w tym momencie już nie mamy wartości

16:37domyślnej jako 0, tylko tu mamy wartość domyślna, po prostu jako numer.

16:40I w tym momencie nasza statystyka powinna mieć już naszą ostatnią

16:45najtańszą wartość, czyli nie dopuszczamy domyślnej wartości w żaden sposób.

16:51Jeżeli chodzi o kolejną statystykę, którą potrzebujemy tutaj w tym komponencie,

16:57to będzie statystyka związana z Average Cost.

17:02Czyli post.

17:05I my możemy powiedzieć mamy nasz nowy, lecz troszeczkę powiększone.

17:12Mamy już kolejną statystykę.

17:14Kolejna rzecz musimy Total Monthly to chcieliśmy

17:18wyświetla użytkownikowi Total Monthly Closed.

17:22Mamy 473.

17:25I kolejna, prawdopodobnie już ostatnia

17:28Total record, czyli ile rocznie użytkownik płaci.

17:33I tutaj host wrzucamy sobie tą wartość.

17:37Mamy te wartości już pokazane tak jak powinny być.

17:40Natomiast jest jedna rzecz, której nam brakuje.

17:43Wróćmy do firmy.

17:45I tutaj mamy active subskrypcje.

17:48Czyli to są subskrypcje, które są aktywne.

17:51To też sobie musimy tutaj pokazać.

17:53Wróćmy do naszego komponentu i Items Center Full.

18:00Zróbmy sobie znowu trik z oddzieleniem tych dwóch części.

18:04Czyli załóżmy, że normalne statystyki po prostu będą po prawej stronie.

18:08Wrzucimy je tutaj, w tego diva.

18:10I kolejna rzecz, którą będziemy potrzebować to tutaj kolejny wrapper

18:14i tutaj sobie wrzucimy tą pojedynczą statystykę.

18:17Jeżeli chodzi o aktywne subskrypcje, czyli aktywne subskrypcje.

18:26I tutaj Total Act w subskrypcji.

18:30Teraz oczywiście musimy sobie tu te style troszeczkę zmienić.

18:36Jeżeli chodzi o nasz pojedynczy wrapper to przyklejamy

18:41na tym, ale żeby dane się wyświetlały dobrze.

18:43Natomiast tutaj ten.

18:45Jeżeli chodzi o.

18:46Nie potrzebujemy GAP, tylko potrzebujemy czas swipe between tak

18:51aby przesunąć od siebie te dwie rzeczy, które nie mają nic wspólnego.

18:55Oczywiście mamy problem teraz jeżeli

18:57chodzi o wyświetlanie tego na ekranach mobilnych i mniejszych ekranach.

19:04To zostawiam Ci jako zadanie domowe.

19:05Myślę, że łatwo tutaj odnieść się do tych

19:07pojedynczych elementów, po prostu rachować i w miarę tego jak się jaki mamy, jaką

19:13mamy wielkość ekranu w odpowiedni sposób to wyświetla nas masz.

19:16Jeżeli zobaczysz widzimy na dużych ekranach jak najbardziej.

19:20Te elementy tutaj ze statystykami możemy uznać już tak naprawdę za zakończone.