Next.js 13 w Praktyce: Podstawowa struktura formularza do dodawania subskrypcji

0:00Póki co, jak przyznasz, nasz dialog nie wygląda zbytnio zachęcająco.

0:03Dlatego teraz zajmiemy się podstawową

0:05strukturą tego formularza, który jest tutaj w środku.

0:09Mianowicie na początku skorzystamy ze

0:11standardowego HTML, a nie będziemy tego jeszcze stylizować i potem przechodząc do

0:15sterowania zastanowimy się, czy można tutaj jakoś wyeksportować pojedyncze

0:19komponenty pojedynczy import, czy moglibyśmy np.

0:22skorzystać z jakiejś zewnętrznej biblioteki do walidacji?

0:24To sobie zrobimy za chwilkę.

0:25Natomiast na początku zajmijmy się tym,

0:27żebyśmy w ogóle stworzyli sobie tutaj nasz formularz, żeby był tutaj widoczny.

0:31Póki co mamy tylko guzik zamykania.

0:34Także rozpoczniemy sobie pisanie naszej

0:36logiki tutaj w tym miejscu i na pewno będziemy potrzebowali.

0:39Jeżeli chodzi o zobaczymy nasz design, to mamy tutaj dwa pola.

0:44Na początku mamy jakiś tytuł tego popa, mamy jakiś sam tytuł, czyli

0:48zróbmy sobie tutaj dialog title i możemy sobie zapisać przednią subskrypcję.

0:55Tak zapiszemy sobie te zmiany.

0:58Wróćmy do naszej strony i czy tu już nam się coś pojawiło?

1:02Sprawdźmy.

1:05Mamy Adidasa Już mamy.

1:07Nasz tytuł się pojawił.

1:09Zobaczmy, czy ten komponent też dostarcza nam substytutu.

1:12Ale z tego co widać to tutaj nie mamy takiej opcji.

1:16Mamy description, możemy sobie z tego skorzystać i w naszym przypadku.

1:19Jeżeli chodzi o description, to w filmie mamy najpierw General Information.

1:25Możemy sobie tego jak najbardziej użyć General Information.

1:30Zapisujemy to sobie.

1:31Już mamy subskrypcję General Information.

1:34I teraz pod spodem tutaj patrząc na nasz

1:37design, no to musimy tak naprawdę zacząć budować sobie nasz formularz.

1:41Pierwszym polem będzie zwyczajny input typu text z label.

1:45Czyli przejdźmy do naszego kodu

1:48i tutaj pod spodem otworzymy sobie nasz form początek naszego formularza.

1:53I tutaj zaczniemy od label i HTML for niech to będzie name.

2:01Tutaj napiszemy name.

2:02Na razie nie będziemy sobie robić

2:03gwiazdki, że jest required i input type text.

2:07Niech będzie.

2:09I IT sobie zrobimy.

2:11Name i name też name.

2:16I myślę, że to wszystko. Sprawdźmy.

2:19Mamy tutaj jakieś jest jakieś pole, jakiś impuls się nam pojawił, także możemy sobie

2:22teraz to skopiować tak naprawdę, bo kolejnym polem, które będziemy potrzebować

2:27tutaj, to będzie kategoria, czyli kategoria.

2:31Potem nie będzie Olimpu, tylko oczywiście musimy tutaj zrobić selekcję.

2:34Tu nie potrzebujemy już tego typu.

2:37Jeżeli chodzi o selektor, musimy też podać tutaj opcję tak, czyli option.

2:45No i niech będzie pierwszy.

2:46Na razie sobie spiszemy, wpiszemy z ręki

2:49entertainment i drugi option sobie zrobimy insurance.

2:57Tylko jakie przykłady?

2:58Po prostu entertainment.

3:03I bardzo dobrze.

3:06Mamy dwie opcje do wyboru.

3:07Póki co mamy jeszcze Entertainment Insurance.

3:10Na razie nie patrzymy się na style.

3:12Powoli sobie budujemy całą naszą strukturę.

3:15Dobrze, to mamy dwa pola tutaj w formie.

3:18Sprawdźmy teraz design.

3:20Kategoria i name muszą być koło siebie.

3:22Później mamy coś takiego jak website.

3:25Jest to też to, że to będzie też pole typu po prostu zwyczajny text input.

3:31Tylko odpowiednio pewnie będziemy musieli sobie oscylować.

3:34Ten przedrostek albo skorzystamy z jakiejś

3:37gotowej biblioteki, która pomoże nam budować tego typu formularze.

3:40Przejdźmy teraz do naszego edytora kodu.

3:42Kolejnym polem, które będziemy mieli.

3:45Zaczynamy od Label i Website.

3:48Zróbmy sobie avatar URL.

3:52W naszym przypadku niech to będzie avatar.

3:56URL i input.

4:00Niech to będzie typ text name, avatar, url i id to sobie zrobimy avatara.

4:12Zapiszemy to sobie już w tym momencie

4:14powinniśmy mieć tutaj kolejny input na avatar URL.

4:18Kolejna rzecz w naszym

4:20formularzy to musimy sobie oddzielić to, czyli znowu musimy.

4:23Możemy wykorzystać ten sam komponent, który mamy tutaj.

4:27Prawdopodobnie dajemy dajemy sobie to,

4:30to tutaj to też będzie wyglądało tak samo, czyli będziemy mogli wykorzystać te same

4:34trzy komponenty tutaj, w tych miejscach, do tego.

4:37W naszym przypadku korzystaliśmy dialog

4:39description, czyli możemy sobie teraz to wszystko oddzielić za pomocą dialog

4:45on i tutaj jako description będzie expand information, czyli Expand information.

4:52Zapisujemy to sobie, już mamy nasz information.

4:55No i kolejne pola.

4:57Sprawdźmy teraz jakie mamy kolejne pole.

5:00Tutaj mamy koszt.

5:02W naszym designie

5:04jest koszt i to też będzie pole typu input tak naprawdę i też możemy poniżej zrobić

5:11też jakby nie widać tego dokładnie na tym ekranie.

5:16Natomiast jako że my mamy trzy waluty,

5:19to tutaj warto byłoby zrobić jakiś pewnie select, dzięki któremu użytkownik może

5:23sobie wybrać waluty wspierane przez nasz system.

5:26Tutaj input typu number, gdzie może sobie wpisać po prostu swoją wartość.

5:32Tak?

5:32Czyli przejdźmy do naszego edytora kodu i znowu label.

5:37Tutaj html for zrobimy sobie kostkę kostką i tutaj input będą dwa.

5:43Tutaj tak naprawdę pierwszy będzie typu

5:45number, gdzie jako wartości będziemy mogli.

5:49Tak naprawdę musimy podać minimalną

5:51wartość, żeby pozwolić użytkownikowi tutaj wpisywać wartości po przecinku.

5:55Musimy podać coś takiego.

5:58I generalnie rzecz biorąc name robimy na kostce i ID też na kostce.

6:06To jest pierwszy input. Drugi typ tutaj pod spodem to będzie typu

6:09select czyli robimy select i tutaj będzie currency.

6:15PIT też możemy sobie zrobić na karencji.

6:17Jeżeli chodzi o label to nie potrzebujemy

6:19label, a na to zrobimy opcje Option i tutaj value niech

6:24będzie EUR i zrobimy sobie 3 opcje, które są wspierane przez nasz system.

6:30Oczywiście jak będziemy to refaktoryzacji to prawdopodobnie powinniśmy tutaj użyć

6:36tak na prawdę tego typu karencji i zmapować to na poszczególne

6:40opcje w miarę czasu jak ta aplikacja będzie się rozrasta.

6:44Tutaj usd, pln i w miarę jak się będzie to

6:47aplikacja rozrastać to może przyjść coś takiego, że będziesz wspierać.

6:51Więcej tutaj value dla Twojego klienta, dla Twojego użytkownika.

6:54Dlatego też myślę, że warto, żeby

6:55skorzystać tutaj od razu z tego typu, który podchodzi nam z bazy

6:59danych, a który mówi nam o tym, ile walut wspieramy dla naszego użytkownika.

7:03Kolejne opcje, które tutaj potrzebujemy sprawdźmy sobie na nasz mock.

7:07Mamy Billing information i myślę, że na

7:09pewno będziemy tutaj musieli coś zrobić z tym billing period.

7:12Pewno będziemy musieli sobie coś zrobić.

7:15Next payment, payment, last payment zostawimy to sobie.

7:19Na razie nie wspieramy tej opcji w ogóle w naszej bazy danych.

7:22Nasz model na razie tego nie ma, dlatego

7:24zostawimy sobie tylko po prostu billing period i experiment, żeby zaznaczyć to,

7:29żeby to odpowiednio pokazać w naszej tabelce.

7:32Czyli wróćmy do edytora kodu.

7:34I kolejna rzecz, którą potrzebujemy to dialog Description.

7:38To jest jakby inna sekcja już tak billing information.

7:41Czyli musimy oddzielić tą poprzednią sekcję i tutaj będzie billing information.

7:49My potrzebujemy tutaj dwóch importów.

7:53Myślę, że tutaj ten design nie oddaje

7:55tego, co tak naprawdę mamy w logice naszej bazy danych.

7:57Na razie sobie zrobimy tutaj prosty select, bo wspieramy tylko miesięczny,

8:02kwartalny i roczne rozliczenia za subskrypcje.

8:04Dlatego możemy sobie zrobić tutaj prosty

8:06select, który będzie miał trzy opcje do wyboru.

8:08Przejdźmy do naszego komponentu i zrobiłem

8:11sobie label HTML for i tutaj możemy zaznaczyć tak

8:16naprawdę billing period i zaznaczymy Billing period.

8:20Jeżeli chodzi o import no to będzie typu

8:22select i tutaj też musimy skopiować tą nazwę billing period.

8:26Możemy sobie zrobić kopiuj wklej.

8:28Jeżeli chodzi o opcje to mamy ich tak naprawdę kilka.

8:33Mamy tylko trzy monety.

8:37Kopiujemy to sobie.

8:38Znajdziemy tutaj i wklejamy tutaj będziemy quarterly I.

8:44Czyli rocznie, miesięcznie i kwartalnie.

8:48Na razie sobie to mocujemy, za chwilkę przechodzimy do refaktoryzacji.

8:52Użyjemy tutaj konkretnej logiki.

8:54Wykorzystamy znowu tutaj nasz typ SMA.

8:57Smakujemy możliwe wartości, no po prostu

9:00użyjemy tych wartości jako waluty w naszych opcjach do wyboru.

9:05Jeżeli chodzi o next payment no to będzie prosty input typu date.

9:10Czyli przejdźmy tutaj do naszego edytora kodu i poniżej.

9:14Label next Payment jako input typu date.

9:24Zapiszemy to sobie wróćmy do naszej strony.

9:26Sprawdźmy jak to wygląda.

9:27Mamy tutaj input typu na razie standardowy input, który mamy w przeglądarce.

9:32Za chwilkę zajmiemy się stylem sianiem tego wszystkiego.

9:34Myślę, że to jest chyba na tyle Tak

9:37naprawdę co potrzebujemy potrzebujemy jeszcze jeżeli chodzi o nasz design.

9:40Potrzebujemy dwa guziki.

9:41Tym tutaj tą informacją na razie się nie przejmujemy.

9:44Nie będziemy tego tutaj implementować.

9:46Tu jest informacja o jakimś przypominajka użytkownika.

9:50Natomiast to na pewno sobie implementujemy.

9:52Czyli możemy przejść poniżej

9:54input avatar url i wpisać sobie ten tekst Help avatar for your serwis.

10:01Czyli możemy sobie przejść tutaj do naszego do naszego edytora kodu.

10:04Przejdziemy sobie poniżej avatar url input i tutaj w tym miejscu zrobimy sobie

10:09zwyczajne PE, które będzie po prostu z tym tekstem wskazującym, że jeżeli użytkownik

10:14poda nam informacje na temat strony, będzie nam łatwiej wygenerować odpowiedni

10:18avatar dla serwisu, którego korzysta dobrze.

10:22Czyli taką podstawową strukturę mam za sobą.

10:23Jeszcze dodamy tutaj dwa guziki jeżeli

10:25chodzi o cancel i submit, tak jak to mamy tutaj w naszym w naszym designie.

10:31Przejdźmy teraz do naszego komponentu i oba te guziki będą tak naprawdę cancel.

10:37Guzik będzie zamykał nasz nasz komponent,

10:39natomiast save czyli Add subskrypcję będziemy zamykać od razu komponentu.

10:44Czyli tak naprawdę jeżeli chodzi o nasz guzik Cancel możemy sobie wykorzystać

10:49dialog close i tutaj w formularzu możemy to zrobić.

10:54Tak naprawdę dialog close.

10:55Tutaj możemy sobie zrobić button i tutaj Cancel.

11:02Zapiszemy to i drugi to po prostu będzie normalny baton.

11:07I tutaj nie.

11:11Zapiszę to sobie.

11:13No i mamy już cancel subskrypcję.

11:15Jeżeli nacinamy Cancel, to dialog nam się zamyka.

11:18Odkrywcze.

11:18Jeszcze nie robi tak naprawdę nic, tylko forum.

11:23Wrócimy na poprzednią stronę.

11:25Tutaj możemy sobie na razie na on pliku

11:28po prostu zrobić privacy default, żeby nam się ten film po prostu nie emitował.

11:35Zobaczymy czy teraz zadziała.

11:37Restartujemy naszą stronę.

11:39Nasz komponent ten guzik póki co nie robi nic.

11:43O to nam chodzi. Teraz przejdziemy do stylu działania tych

11:46komponentów, żeby to wyglądało tak jak naszym na naszym okapie tutaj.