Zaplanujmy
więc aplikację, którą zbudujemy, i zbudujemy podstawową aplikację zakupową, podstawowy
sklep internetowy w aplikacji, którą można powiedzieć. Dlatego w tej aplikacji na pewno będziemy potrzebować wielu
produktów, które można wymienić, więc będziemy mieć ekran przeglądu produktów, w którym zobaczymy te karty z naszymi
produktami, ze zdjęciem, tytułem i ceną może coś takiego, a także przycisk koszyka
lub przycisku Dodaj do koszyka i przycisk szczegółów, więc w zasadzie przycisk, który pozwala nam przejść
do strony szczegółów i przycisk, który pozwala nam dodać to
do koszyka.
Ponieważ jeśli klikniesz przycisk tego koszyka tutaj,
więc jeśli wybierzesz ten przycisk koszyka, zostanie on dodany do koszyka i możesz dotrzeć do tego
koszyka za pomocą przycisku akcji tutaj
na pasku akcji, więc w górnym nagłówku, tam I chcę mieć
taką ikonę koszyka, prawdopodobnie nieco ładniejszą niż to, co tutaj narysowałem, ale ta ikona tutaj
na końcu pozwala nam przejść do osobnej strony, osobnego ekranu tej aplikacji, gdzie oczywiście możemy
również wrócić tam, gdzie zobaczymy tutaj całkowitą sumę w dolarach, do której sumują się nasze produkty w koszyku, a następnie listę
naszych produktów, takich jak książka i ile to
kosztuje i coś
takiego.
Zasadniczo widzimy tutaj nasz koszyk, widzimy sumę tego, a
następnie widzimy poszczególne przedmioty i oczywiście
chcę też mieć przycisk, który pozwoli mi zamówić to, co jest w koszyku, a faktycznie ten przycisk
nie powinien być poniżej tego , więc tutaj będziemy
mieli przycisk zamówienia.
Właściwie to powinno być
tutaj, więc tutaj chcę mieć jeden wiersz, w którym mamy całkowitą sumę, a następnie obok niego przycisk zamówienia.
Więc to jest
w zasadzie cel, ale możesz
umieścić to gdziekolwiek chcesz, w końcu chcemy mieć przycisk, który pozwala nam zamówić wszystko,
co
mamy w koszyku, a na każdym elemencie koszyka tutaj też chcę mieć ikonę kosza tutaj, co pozwala mi usunąć przedmiot z koszyka.
Więc jeśli to złoży zamówienie, ta ikona tutaj po prostu usunie przedmiot z
koszyka.
To jest
pomysł, oczywiście, jeśli dodasz ten sam produkt wiele razy do koszyka, nie powinieneś dodawać do tego wielu
wierszy, ale zamiast tego tutaj chcę również pokazać jak ilość przedmiotu, który po prostu zwiększa się, jeśli dodamy go więcej często
do koszyka i który zmniejsza się, jeśli go usuniemy, dopóki wszystkie elementy nie zostaną usunięte, w takim
przypadku cały wiersz zostanie usunięty tutaj.
Tak właśnie działa ta
strona koszyka, tutaj jest strona poglądowa, dlatego oczywiście możemy również stuknąć przycisk szczegółów lub ogólnie rzecz biorąc, więc gdziekolwiek na
obrazie lub coś w tym stylu, a
następnie powinniśmy zostać zabrani do strona ze szczegółami.
To kolejny ekran w tej aplikacji, do którego oczywiście możemy wrócić.
To szczegółowa strona ikony, na
której powinniśmy zobaczyć obraz, prawdopodobnie powinniśmy zobaczyć podobnie
jak tytuł tutaj w nagłówku, więc byłby to tytuł elementu. Następnie poniżej widzimy cenę, widzimy opis i prawdopodobnie chcemy
tutaj również mieć przycisk do koszyka, w którym możemy również dodawać przedmioty
do koszyka tutaj. Tak wygląda przepływ naszych produktów, które mamy
tutaj. Teraz
ważną rzeczą w tej aplikacji będzie to, że nie tylko będziemy mogli zobaczyć produkty i
robić zakupy oraz dodawać je do koszyka itd., Ale oczywiście możemy także przeglądać nasze zamówienia i,
co najważniejsze, dodawać nowe produkty.
Dlatego potrzebujemy szuflady i ta szuflada przedstawi nam kilka opcji. Teraz pierwszą opcją jest oczywiście to, że
idziemy do naszego sklepu, że tak powiem, tutaj jest ta część, w której jesteśmy, gdy
aplikacja się uruchamia.
Drugą opcją powinny być
nasze zamówienia, a trzecia opcja powinna być jak opcja zarządzania produktami, w której możemy zarządzać naszymi własnymi
produktami, które chcesz oferować innym użytkownikom.
Tak jak powiedziałem, sklep jest w zasadzie tym, co już widzimy.
Teraz, jeśli klikniemy na zamówienia, to chcę przejść do ekranu, na którym oczywiście możemy również otworzyć tę szufladę, ponieważ to
pozwoli nam wrócić, ale na tym
ekranie powinniśmy zobaczyć zamówienia, w których zasadniczo mamy przedmioty, w których widzimy coś w
rodzaju sumy tego zamówienia, daty, a następnie przycisku, w którym możemy dotknąć miejsca, w którym widzimy więcej szczegółów, a jeśli klikniemy
ten przycisk, mamy opcjonalny obszar, który otwiera się lub zamyka, i tam, ja w zasadzie chcę
zobaczyć elementy zamówienia, które jest w zasadzie tym, co mieliśmy w koszyku.
Mieliśmy więc tutaj dwie książki, na przykład w cenie 19, cóż, pojawiłoby się to tutaj w obszarze szczegółów,
kiedy to otworzymy.
To jest pomysł
tutaj
w zamówieniu, możemy rozwinąć zamówienie, abyśmy nie tylko widzieli sumę i datę, ale także widzieli przedmioty
w koszyku, które tam
umieściliśmy, więc w zasadzie to, co mieliśmy tutaj w koszyku, to pokazuje się w zamówieniach.
To jest
ekran zamówień, zarządzaliśmy również produktami i narysujmy to tutaj. Zarządzane produkty to kolejny obszar tej aplikacji, w którym
mamy również ten przycisk menu, aby ponownie otworzyć tę szufladę, abyśmy mogli przejść do innych części aplikacji,
ale tutaj na ekranie zarządzanych produktów, gdzie mamy własne produkty, więc produkty użytkowników i w
tej aplikacji nie dodamy jeszcze uwierzytelnienia, ale dodamy to później, ale tutaj mamy
własne produkty. Tutaj znowu
chodzi o to, że zasadniczo widzimy listę produktów, która jest bardzo zbliżona do tego, co
widzimy tutaj na ekranie sklepu, dzięki czemu mamy tutaj nasze karty ze zdjęciem, tytułem i ceną, więc możemy może
ponownie wykorzystać tę listę tutaj, ale oczywiście opcje,
które mamy dla każdego produktu, są różne. Zamiast dodawać go do koszyka
i przeglądać szczegóły, możemy go usunąć, to jeden
przycisk, a także możemy go edytować. Oczywiście możemy edytować tylko nasze własne produkty, ale ponownie nie
będziemy tutaj mieli mapowania użytkowników, możemy to zrobić za pomocą jakiegoś fałszywego identyfikatora użytkownika, który dołączamy do każdego produktu, ale
to na razie tyle.
Mamy więc przycisk edycji i
usuwania, teraz dodatkowo tutaj w nagłówku, więc
potrzebujemy więcej miejsca tutaj, w nagłówku będziemy również mieć przycisk akcji, który pozwala nam dodać nowy
produkt.
Zasadniczo więc powinno to być nieco szersze, zwróciłem to zbyt wąsko.
Mamy więc ten przycisk akcji tutaj i ten przycisk akcji tutaj, ten przycisk plus, to
powinno zabrać nas na nową
stronę, na której możemy dodać nowy produkt, więc przeniesiemy nas na stronę dodanego produktu tutaj, gdzie możemy oczywiście przejść tam i teraz możemy dodać
nowy produkt, który pozwala nam dodać tutaj tytuł z wprowadzaniem tekstu, a wprowadzanie tekstu może być
również poniżej etykiety tytułu, możesz to zbudować, jak chcesz.
Powinniśmy być w stanie
dodać cenę, powinniśmy mieć możliwość dodania opisu tutaj, może być tutaj wejściem wielowierszowym,
oczywiście musimy być w stanie dodać również imageUrl.
Tak więc możemy dodać tutaj, a następnie potrzebujemy tutaj przycisku na pasku akcji, przycisku znacznika wyboru
lub czegoś podobnego, co pozwala nam to potwierdzić. Na tym etapie nie będziemy zbytnio dbać o całą
obsługę
danych wprowadzanych przez użytkowników, ponieważ będę miał osobny moduł, w którym zagłębię się we wszystkie szczegóły, jak
możesz to zrobić w elegancki sposób, jak dodać weryfikację, więc tutaj, w tej aplikacji, utrzymamy to
bardzo proste, nie sprawdzimy, czy użytkownik wprowadził coś poprawnego, czy coś w
tym stylu, zrobimy to później.
Tutaj właśnie zebraliśmy podstawowe dane wejściowe po naciśnięciu tego przycisku, przycisk zaznaczenia tutaj,
wróciliśmy do tej strony i oczywiście używamy Redux w naszym systemie zarządzania stanem, aby dodać
nowy produkt do listy produktów, które następnie pojawia się tutaj w naszym sklepie i który pojawia się
tutaj na naszej liście produktów, którymi możemy administrować.
Właśnie to mamy tutaj.
Teraz, jeśli klikniemy tutaj edytuj, jeśli tutaj wybierzemy ten przycisk edycji, przejdziemy również do tej samej strony edycji
produktu, ale oczywiście mamy tutaj wstępnie wypełnione wartości, wstępnie wypełnione załadowanym produktem i istnieją pewne pola, które nie możemy
edytować, na przykład cena nie
powinna być edytowalna, ponieważ jeśli cena byłaby edytowalna, to gdybyśmy mieli ją już w
koszyku, byłby to problem,
więc nie pozwolimy na edycję ceny tutaj,
my pozwoli jednak na edycję tytułu, opisu i
imageUrl, więc jest to możliwe.
To jest jedna
różnica, mamy wstępnie wypełnione pola, a ceny nie można edytować.
Jeśli naciśniemy znacznik wyboru w trybie edycji i będziemy mogli dowiedzieć się, czy edytujemy, czy
na przykład poprzez fakt, że otrzymaliśmy identyfikator produktu jako parametr, więc po
zakończeniu edycji możemy nacisnąć ikonę znacznika wyboru a następnie zostajemy cofnięci i po prostu zapisujemy wszystko,
co tutaj edytowaliśmy, z powrotem do naszego produktu.
To jest tutaj aplikacja.
Jak już wspomniałem, będzie to również podstawa dla kolejnych modułów, tam
również dodamy żądanie HTTP, uwierzytelnianie, zrobimy tutaj całą weryfikację formularza w bardziej elegancki sposób i tak dalej,
ale ten moduł tutaj
jest teraz świetna praktyka, jak zbudować taką aplikację, jak pracować z komponentami, stylizować je,
dodawać nawigację, ponieważ oczywiście mamy dużo nawigacji w tej aplikacji i jak
zarządzać naszym stanem w tej aplikacji na zakupy.
Jak wspomniałem w ostatnim wykładzie, możesz pominąć ten moduł, ale zdecydowanie powinieneś zanurzyć się
w gotowym kodzie, abyś mógł śledzić kolejne moduły, ale oczywiście zalecam, abyś: a) albo wypróbować
to wszystko na własną rękę i oczywiście twój wynik nie będzie taki sam, jak ja, więc zdecydowanie
powinieneś również obejrzeć moje filmy później, aby zobaczyć, jak to zrobiłem i abyś miał tę samą
podstawę kodu, ale będzie to świetna
praktyka nawet jeśli twój wynik jest pierwszy, ponieważ niekoniecznie istnieje niewłaściwe lub właściwe podejście lub
b) twoją inną opcją jest oczywiście to, że nie próbujesz tego sam i po prostu postępujesz zgodnie
z nim,
również ważna opcja, ale wierzę, że będziesz skorzystaj trochę więcej z kursu, jeśli spróbujesz
najpierw
sam, ale w końcu zrób co chcesz. W następnym wykładzie zajmiemy się tym i zaczniemy budować tę
aplikację.