Next.js 13 w Praktyce: Omówienie struktury danych i konfiguracja Prismy

0:01Jeszcze zanim zaczniemy budować nasz model

0:04danych, zastanówmy się, jaką w ogóle aplikacje budujemy.

0:08W naszym przypadku będzie to aplikacja do zarządzania swoimi substancjami.

0:12Każdy z użytkowników będzie mógł

0:14trzymać w jednym miejscu wszystkie swoje subskrypcje.

0:17Każde zużycie będą miały jakieś płatności.

0:19Czyli mamy tutaj next payment.

0:21Czy będzie jakaś następna płatność w kolejności?

0:24Będą jeszcze jakieś inne płatności, które będą płatnościami historycznymi?

0:29Prawdopodobnie mamy tutaj last payment.

0:30Jest eksperyment, jest jakiś status tej płatności?

0:34Musimy zwrócić uwagę na to, że jeżeli chodzi o koszt

0:37subskrypcji, którą tutaj mamy, to mogą one być w różnych wyrażone, w różnych

0:42walutach, także też będziemy musieli sobie to jakoś ograć w naszym systemie.

0:46Dodatkowo rzecz biorąc jest jakaś główna

0:48waluta do wyświetlenia wszystkich statystyk, którą prawdopodobnie

0:51użytkownik naszej aplikacji będzie mógł sobie gdzieś ustawić w opcjach.

0:55Dodatkowo mamy jeszcze tutaj jeżeli chodzi o samo wyświetlanie naszych subskrypcji.

1:01Jak widzisz subskrypcja może mieć nazwę

1:03kategorię Billing period, czyli jak często jest blokowane ostatnia płatność, następna

1:09płatność, status następnej płatności, którą mamy.

1:13Tutaj mamy koszt.

1:15Jeżeli chodzi o to to jeszcze mamy jakiś

1:17log URL będzie potrzebne jeżeli chodzi o model naszej subskrypcji.

1:20No bo tutaj musimy sobie zaszyte jakieś obrazki dla danych subskrypcji.

1:24Jeżeli chodzi o pierwszy ekran to widać, że mamy tej kategorii break down.

1:30To będą dwa ekrany, na których się

1:31skupimy, które postaramy sobie zbudować całą logikę tutaj aplikacji.

1:35Mamy infrastrukturę, tu mamy entertainment.

1:39Są różne kategorie, które nasz użytkownik będzie mógł sobie samemu przypisywać.

1:43I tutaj mamy rozbicie statystyk poszczególnie na kategorie.

1:46Tutaj mamy co jakieś wyświetlane statystyki, czyli ile zapłaty w tym

1:50miesiącu, ile już zapłacone, ile w zeszłym miesiącu do zapłacenia, ile

1:55w tym miesiącu do zapłacenia za nasze serwisy, subskrypcje.

1:58Tutaj mamy bardziej rozbite statystyki jeżeli chodzi o poszczególne subskrypcje.

2:02Czyli mamy najdroższą, najtańszą.

2:05Średni koszt to opcji sumę miesięczną.

2:08Ile się płaci za wszystkie subskrypcje użytkownik, sumę roczną, ile użytkownik

2:12płaci rocznie za wszystkie subskrypcje, no i ilość aktywnych subskrypcji aktualnie.

2:18Przejdźmy teraz do przedstawienia modelu danych.

2:23Ja przygotowałem już tutaj taki mały

2:25wykres, żebyśmy mogli sobie teraz porozmawiać na temat danych, które

2:28będziemy sobie modelować w naszej bazie danych.

2:30Jak one będą wyglądały?

2:32Kilka założeń tutaj u góry.

2:34Każdy użytkownik może mieć wiele subskrypcji.

2:37Każda subskrypcja może należeć tylko do jednego użytkownika.

2:41Każda subskrypcja może mieć wiele płatności.

2:43Tak jak mówiliśmy, to jest płatność

2:45następna, czyli ta główna, ale też są płatności, które już były

2:50w przeszłości zapłacone albo będą w przyszłości jeszcze nie są zapłacone.

2:55To będzie potrzebne do tego, żebyś mógł

2:57mogła sobie dalej rozwijać tą aplikację, np.

3:00tworząc lepsze statystyki, pokazując historię, jakieś wykresy.

3:04I każda płatność może należeć tylko do jednej subskrypcji jednego użytkownika.

3:09Czyli tzw.

3:10payment.

3:12Bill Payment jak to nazwiemy,

3:14będzie należał do jednej subskrypcji i będzie miał też jednego użytkownika.

3:20Może to być payment, nie może należeć do dwóch

3:23użytkowników, to może tylko do jednej subskrypcji i do jednego użytkownika.

3:28Sam payment nie może istnieć.

3:30Musi istnieć subskrypcja połączona z

3:32opłatą subskrypcji, żebyśmy mogli to w miarę dobrze śledzić.

3:38Dobrze, przejdźmy teraz do 3 etapu

3:41w naszym projekcie i napiszemy sobie pierwszą wersję.

3:45To jest Hime tutaj, żebyśmy mogli sobie

3:47pracować z jakimiś danymi w naszej aplikacji.

3:49Jeżeli chodzi o Prisma główna strona to jest Prisma.

3:53Dodając możesz sobie przeskoczyć teraz na

3:55tą stronę i mamy tutaj guzik Quick Start w którym wystartujemy.

3:59My mamy Setup from Scratch.

4:01Mamy relacyjną bazę danych, czyli możemy od razu przeskoczyć tutaj w to miejsce.

4:07Jeżeli chodzi o set up jest on bardzo prosty.

4:09Najpierw musimy sobie zainstalować odpowiednie zależności.

4:12Natomiast zobaczmy sobie jak to u nas wygląda w projekcie, bo z tego co wiemy to

4:16mamy już jakieś zależności pewnie zainstalowane.

4:19Jeżeli chodzi o Prisma to Prisma tutaj wymaga także filtra.

4:22My mamy już zainstalowany z projektem tekstowym.

4:25TS z tego nie ma.

4:26Możemy sobie zainstalować Types.

4:28Mamy już.

4:30I saw df.

4:31Czyli tak naprawdę TS i Prime musimy sobie doinstalować do naszego projektu.

4:36Przejdźmy teraz do naszego terminala

4:40i npm install Prisma i potrzebujemy jeszcze test node minus minus.

4:50Gdy zainstalujemy sobie zależności, które

4:53potrzebujemy do tego, żeby móc pracować z Prisma w naszym projekcie.

4:57Po chwili jak mamy zainstalowane zależności, te projektu nie musimy

5:01realizować, bo już go mamy za GO w naszym projekcie.

5:04Natomiast my potrzebujemy MPX Prisma init i to polecenie robi dwie rzeczy stworzy

5:10nam folder w naszym projekcie o nazwie Prisma, w którym będziemy mieli schemat

5:14naszej bazy danych i stworzy plik doc, w którym będziemy mogli sobie wpisać

5:20Environment Variable do połączenia z naszą bazą danych.

5:22My już ten plik mamy stworzony, dlatego

5:24Prisma prawdopodobnie poinformuje nas o tym, że już ten plik jest stworzony i że

5:29prawdopodobna wartość tej zmiennej jest już w naszym pliku.

5:34Zobaczmy sobie jeszcze strukturę folderów w naszym katalogu nasze katalogu i zobacz,

5:37że tutaj jeszcze nie mamy żadnego folderu o nazwie Prisma.

5:41Mamy nasz plik doc, w którym już mamy wklejone naszą BB Connection String,

5:46natomiast nie mamy żadnego katalogu o nazwie Prisma.

5:49I teraz w tym momencie jak ja sobie zrobię tutaj MPX Prisma i nikt.

5:55No to stworzy się katalog o nazwie Prisma.

5:59Mamy tutaj informacje Prisma Schema, bo scripts

6:03Prisma dodała by data wyjść URL, ale już masz ten data bez URL w twoim pliku.

6:10Doc Zauważ, że jest to tak fajnie ograłem tutaj, że nawet dają nam tutaj informację

6:16ok, nie musimy tworzyć dla Ciebie pliku inf.

6:19I teraz pamiętaj, że masz git minor file i nie zapomnij dodać Twojego pliku n.p.

6:26Do Twojego git ignore file, żeby nie

6:28wysyłać wrażliwych danych na swoje repozytorium.

6:32Następne kroki są też bardzo fajnie przedstawione.

6:35Ustaw Database URL do.

6:37Ten file to już mamy za sobą set provider, czyli Data Source.

6:42Potrzebujemy Prisma, żeby Prisma mogła

6:45określić w jaki sposób dodać nam typy danych encji w bazie danych.

6:50My w naszym przypadku mamy post, gdyż

6:52build to jest domyślny domyślny data Souls w każdej domyślnie stworzonej.

6:59Z kim jest, z kim jest Prime i później robimy Prisma DB to chcemy.

7:05Jeżeli mamy już

7:07jakby bazę danych z tabelami to możemy sobie stworzyć typy w naszej aplikacji na

7:13bazie tej bazy danych tych tabele, które już są w bazie danych.

7:17Natomiast my zrobimy sobie Generate, czyli

7:20chcemy wygenerować klienta Primy i też musimy sobie zrobić migracje, żeby nasze.

7:28Nasza struktura danych, którą sobie za

7:29chwilkę określimy w pliku schema prisma była tą strukturą tabel,

7:35które będą w naszej bazie danych w naszej bazie danych.

7:38Teraz przejdziemy do

7:40budowania naszego schematu danych, który jest tutaj w pliku schema.

7:44Z kim ma?