Next.js 13 w Praktyce: Przegląd serwisów i narzędzi

0:00Teraz trochę wstępu.

0:02Chciałem omówić narzędzia, z których

0:03będziemy korzystać podczas budowania naszej takowej aplikacji.

0:08Pierwszym z takich serwisów, który sobie

0:09skorzystamy i który jest serwisem darmowym.

0:12Tak naprawdę do takiej ilości użytkowników

0:14w zupełności wystarczający dla nas będzie Clark.

0:17To jest User Management system dla Nexta.

0:20Bardzo łatwo jest to integrować z aplikacją Nexto.

0:24Dzięki temu nie będziemy musieli się

0:25przejmować autentykacji motoryzacją użytkowników.

0:29Wszystko to będzie tak naprawdę dane nam tutaj z góry.

0:32To świetna dokumentacja, Bardzo łatwo się po tym poruszać.

0:35Przejdziemy sobie przez konfigurację

0:36czegoś takiego w naszym projekcie tutaj razem.

0:39Dlatego nie martw się, jeżeli teraz nic nie wiesz na temat Clarka.

0:43Jak najbardziej wprowadzę Cię w świat tej aplikacji.

0:46Kolejną rzeczą, którą będziemy sobie używać to jako nasz ORM.

0:49Będzie to Prisma. Prisma będzie.

0:51Będziemy wykorzystywać ją do do budowania modelu naszej bazy danych.

0:56Dodatkowo do nawiązania połączenia z naszą bazą danych.

1:00Prisma jest o tyle fajna, że ma bardzo duże wsparcie TypeScript, dzięki

1:04czemu będziemy mieli auto completed przy rzeczach typu user priority.

1:08Jak widzisz na takim filmiku sprzedażowym

1:10od razu mamy podpowiedzi z naszego IntelliJ Sens bardzo łatwej migrację.

1:16Pokażę Ci w jaki sposób możesz sobie scedować swoją bazę danych.

1:19Danymi wstępnymi, na których będziemy mogli już pracować, czyli będziemy mogli

1:24sobie dodać pierwszego użytkownika do naszej aplikacji.

1:27Będziemy mogli mu przypisać jakieś subskrypcje, jakieś

1:30płatności, dzięki czemu będzie to jakaś rzecz, na której będziemy mogli

1:34sobie dalej sterować, dalej budować nasz I way.

1:37Nie będzie to pusta baza danych.

1:39Stworzymy sobie skrypt, który realnie

1:41będzie nam dawał naszą bazę danych konkretnymi danymi, takimi, których na

1:46końcu będziemy oczekiwać od naszego backendu.

1:49Także to jest kolejna rzecz, której

1:50będziemy korzystać, której nauczysz się korzystać w tym kursie razem ze mną.

1:55Dodatkowa rzecz time CSS jeżeli nie

1:57widziałeś mojego pierwszego kursu z Next jest w którym i wprowadzenia do talii, to

2:02serdecznie zachęcam Cię do obejrzenia sobie tych materiałów.

2:04Tam budowałem projekt tylko sam tak będzie.

2:06Generalnie pozwoli to złapać też taki feeling tego frameworka.

2:12To jest framework CSS do budowania styli

2:15na stronie internetowej, tak jak Ty widzisz w tej prezentacji.

2:18Generalnie mamy predefiniowane klasy,

2:21które później możemy sobie używać do budowania naszego.

2:25A ja w tym kursie jeszcze będę wspierał się taką rzeczą jak Build Guide.

2:33Tak będzie tutaj. Tak to jest.

2:36Tak więc generalnie to jest rzecz płatna w tym kursie.

2:41Jakby jako baza do naszych naszych komponentów.

2:45Generalnie rzecz biorąc polecam jeżeli będziesz budował swoje projekty, wykupić

2:49sobie jakiś taki framework, takie komponenty.

2:52Jest dużo też darmowych, które są też fajne.

2:55Ja generalnie bazuję moje projekty na tym,

2:57na na tych wszystkich komponentach Talent Suite.

3:00Kolejnym narzędziem

3:02natomiast jeżeli chodzi o talent suite obędzie się w tym kursie bez tego, bo to

3:06jest tylko i wyłącznie mówię jako jakaś inspiracja dla design, dla nas, żeby

3:10wszystko w miarę wyglądało w tej naszej aplikacji.

3:14Kolejna rzecz, z której będziemy korzystać to przeglądarka, w której będę debatował.

3:18To jest ARC, To jest ta przeglądarka, którą widzisz teraz na swoim ekranie.

3:21To jest moja główna przeglądarka, z której na co dzień korzystam w swojej pracy.

3:25Jest oparta na silniku Google Chrome, także wszystkie narzędzia developerskie,

3:29które masz wtyczki, rozszerzenia tak naprawdę są na pewno Ci znajome.

3:34Jeżeli pracujesz na front endzie, budujesz aplikacje, to tak naprawdę wszystko co

3:38tutaj widzisz, to jest to samo, co znasz ze swojego dnia codziennego.

3:43Jeżeli chodzi o jeszcze jedno narzędzie, to jest Siri Siri.

3:47Jest to też przeglądarka.

3:49Natomiast świetna rzecz polega na tym, że mamy podgląd na poszczególne narzędzia.

3:54Pokażę Ci w czasie tego kursu, w jaki sposób korzystam z takiej przeglądarki,

3:58żeby podglądać sobie jak moja strona wygląda na poszczególnych urządzeniach.

4:03Pokażę Ci presety, które mam porobione w tej przeglądarce.

4:06Generalnie bardzo fajna rzecz.

4:07Autorstwa Kici Kici

4:10Mieszka w Polsce, w Trójmieście jest on chyba z Mołdawii,

4:16ale mieszka w Polsce na co dzień, także polecam generalnie spróbować sobie.

4:21Świetny produkt jeżeli dużo robisz projektów, gdzie responsywność to jest

4:25jedna z głównych rzeczy, na które musisz zwracać uwagę, to tak naprawdę jest to

4:29świetna rzecz do tego, żeby dopasować sobie style, dywagować sobie to, w jaki

4:32sposób Twoja aplikacja wygląda podczas developmentu.

4:36Kolejna rzecz to jest terminal, z którego korzystam.

4:39Już miałeś okazję go zobaczyć na początku tego kursu.

4:42To jest warp, To jest terminal, z którego korzystam.

4:45Tutaj to co widzisz tak naprawdę fajne ma

4:47wsparcie ja i generalnie czasami wykorzystuję.

4:50Natomiast podoba mi się to jak szybko to działa i nie zawiesza się w ogóle nawet

4:55przy kilku tabletach otwartych tak, że będziemy korzystać z większej ilości.

5:00Tabulacji.

5:01Jeżeli chodzi o command pole mami zobacz command.

5:05Czyli wpisując jakieś polecenie możemy znaleźć komendę, która do tego odpowiada.

5:09Także bardzo przydatna rzecz.

5:11Czasami jeżeli się tam zawieszę i nie mogę

5:12znaleźć czegoś w dokumentacji jak obsłużyć jakąś komendę w linii komend,

5:16to tutaj jak najbardziej korzystam z tego narzędzia.

5:19Kolejna rzecz, z której będziemy sobie

5:20korzystać w tym kursie to na pewno GitHub Desktop.

5:24Ja będę się przełączał, będę skakał pomiędzy ketchup w terminalu

5:29za pomocą wiersza poleceń na git hub, który mamy w aplikacji Git.

5:34Czasami wolę aplikację desktopową z tego

5:36więc żeby podejrzeć sobie zmiany, które wchodzą, które nie wchodzą na stage jest

5:40to tutaj dużo lepiej rozwiązane, bo tutaj możemy sobie przeklikać zmiany, które tak

5:44naprawdę chcemy w naszym komiksie zastosować, a których nie chcemy.

5:47Także polecam Ci darmowe narzędzie GitHub Desktop.

5:51Możesz sobie ściągnąć skorzystać do kontroli wersji.

5:53Kolejnym narzędziem, które na pewno będzie nam towarzyszyć w tym kursie to

5:57jest edytor, którego ja na co dzień korzystam w swojej pracy.

6:01Jest to darmowy, także też możesz to ściągnąć, jeżeli nie masz

6:05na swoim komputerze jeszcze dodatkowo wtyczki przydatne.

6:09Takie dwie, które na chwilę obecną przychodzą mi na myśl to na pewno talent

6:13CSS, IntelliJ i Price, który sobie zainstalujemy w naszym edytorze kodu.

6:18No i na koniec jeżeli chodzi o plugin, do

6:22którego będziemy korzystać to na pewno automatyczne sortowanie klas

6:29w WTW idzie to sobie też skonfigurujemy w naszym projekcie.

6:33Tak, to jest bardziej czytelne.

6:34Poszczególne rzeczy są na odpowiednich

6:36miejscach, także łatwo później sobie odszukać.

6:38Czy to chodzi o takie selektory związane ze stanem danego

6:44elementu, czy też o główne klasy, które decydują o tym jak dany element wygląda.

6:49Fajny, fajny plugin, który też warto sobie zainstalować.

6:53To naprawdę z narzędzi wszystko.

6:55I myślę, że teraz sobie możemy już przejść

6:57do konkretów, czyli skonfigurujemy nasze środowisko, w którym będziemy pracować.