1 00:00:02,060 --> 00:00:03,200 Zaplanujmy 2 00:00:03,200 --> 00:00:08,920 więc aplikację, którą zbudujemy, i zbudujemy podstawową aplikację zakupową, podstawowy 3 00:00:08,930 --> 00:00:17,120 sklep internetowy w aplikacji, którą można powiedzieć. Dlatego w tej aplikacji na pewno będziemy potrzebować wielu 4 00:00:17,120 --> 00:00:24,590 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 5 00:00:24,680 --> 00:00:30,770 produktami, ze zdjęciem, tytułem i ceną może coś takiego, a także przycisk koszyka 6 00:00:30,770 --> 00:00:37,930 lub przycisku Dodaj do koszyka i przycisk szczegółów, więc w zasadzie przycisk, który pozwala nam przejść 7 00:00:37,970 --> 00:00:42,440 do strony szczegółów i przycisk, który pozwala nam dodać to 8 00:00:42,440 --> 00:00:43,730 do koszyka. 9 00:00:43,760 --> 00:00:47,060 Ponieważ jeśli klikniesz przycisk tego koszyka tutaj, 10 00:00:47,060 --> 00:00:53,900 więc jeśli wybierzesz ten przycisk koszyka, zostanie on dodany do koszyka i możesz dotrzeć do tego 11 00:00:53,900 --> 00:00:56,360 koszyka za pomocą przycisku akcji tutaj 12 00:00:56,390 --> 00:01:01,300 na pasku akcji, więc w górnym nagłówku, tam I chcę mieć 13 00:01:01,570 --> 00:01:08,060 taką ikonę koszyka, prawdopodobnie nieco ładniejszą niż to, co tutaj narysowałem, ale ta ikona tutaj 14 00:01:08,060 --> 00:01:14,480 na końcu pozwala nam przejść do osobnej strony, osobnego ekranu tej aplikacji, gdzie oczywiście możemy 15 00:01:14,480 --> 00:01:23,240 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ę 16 00:01:23,510 --> 00:01:26,910 naszych produktów, takich jak książka i ile to 17 00:01:26,930 --> 00:01:28,360 kosztuje i coś 18 00:01:28,520 --> 00:01:29,510 takiego. 19 00:01:29,540 --> 00:01:33,140 Zasadniczo widzimy tutaj nasz koszyk, widzimy sumę tego, a 20 00:01:33,140 --> 00:01:35,580 następnie widzimy poszczególne przedmioty i oczywiście 21 00:01:35,630 --> 00:01:42,470 chcę też mieć przycisk, który pozwoli mi zamówić to, co jest w koszyku, a faktycznie ten przycisk 22 00:01:42,530 --> 00:01:46,070 nie powinien być poniżej tego , więc tutaj będziemy 23 00:01:46,070 --> 00:01:47,530 mieli przycisk zamówienia. 24 00:01:47,600 --> 00:01:48,890 Właściwie to powinno być 25 00:01:48,890 --> 00:01:53,450 tutaj, więc tutaj chcę mieć jeden wiersz, w którym mamy całkowitą sumę, a następnie obok niego przycisk zamówienia. 26 00:01:54,110 --> 00:01:55,310 Więc to jest 27 00:01:55,310 --> 00:01:57,250 w zasadzie cel, ale możesz 28 00:01:57,250 --> 00:02:02,930 umieścić to gdziekolwiek chcesz, w końcu chcemy mieć przycisk, który pozwala nam zamówić wszystko, 29 00:02:02,930 --> 00:02:03,470 co 30 00:02:03,470 --> 00:02:12,150 mamy w koszyku, a na każdym elemencie koszyka tutaj też chcę mieć ikonę kosza tutaj, co pozwala mi usunąć przedmiot z koszyka. 31 00:02:12,200 --> 00:02:22,300 Więc jeśli to złoży zamówienie, ta ikona tutaj po prostu usunie przedmiot z 32 00:02:22,300 --> 00:02:23,410 koszyka. 33 00:02:23,410 --> 00:02:24,220 To jest 34 00:02:24,220 --> 00:02:29,760 pomysł, oczywiście, jeśli dodasz ten sam produkt wiele razy do koszyka, nie powinieneś dodawać do tego wielu 35 00:02:29,830 --> 00:02:36,520 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 36 00:02:36,520 --> 00:02:41,920 do koszyka i który zmniejsza się, jeśli go usuniemy, dopóki wszystkie elementy nie zostaną usunięte, w takim 37 00:02:41,920 --> 00:02:44,080 przypadku cały wiersz zostanie usunięty tutaj. 38 00:02:44,080 --> 00:02:46,000 Tak właśnie działa ta 39 00:02:46,000 --> 00:02:54,070 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 40 00:02:54,070 --> 00:02:56,950 obrazie lub coś w tym stylu, a 41 00:02:56,980 --> 00:03:00,250 następnie powinniśmy zostać zabrani do strona ze szczegółami. 42 00:03:00,250 --> 00:03:04,810 To kolejny ekran w tej aplikacji, do którego oczywiście możemy wrócić. 43 00:03:04,810 --> 00:03:08,190 To szczegółowa strona ikony, na 44 00:03:08,260 --> 00:03:12,490 której powinniśmy zobaczyć obraz, prawdopodobnie powinniśmy zobaczyć podobnie 45 00:03:12,490 --> 00:03:23,710 jak tytuł tutaj w nagłówku, więc byłby to tytuł elementu. Następnie poniżej widzimy cenę, widzimy opis i prawdopodobnie chcemy 46 00:03:24,190 --> 00:03:32,300 tutaj również mieć przycisk do koszyka, w którym możemy również dodawać przedmioty 47 00:03:32,310 --> 00:03:37,460 do koszyka tutaj. Tak wygląda przepływ naszych produktów, które mamy 48 00:03:37,470 --> 00:03:38,630 tutaj. Teraz 49 00:03:38,640 --> 00:03:44,060 ważną rzeczą w tej aplikacji będzie to, że nie tylko będziemy mogli zobaczyć produkty i 50 00:03:44,060 --> 00:03:50,010 robić zakupy oraz dodawać je do koszyka itd., Ale oczywiście możemy także przeglądać nasze zamówienia i, 51 00:03:50,130 --> 00:03:52,110 co najważniejsze, dodawać nowe produkty. 52 00:03:52,110 --> 00:03:59,100 Dlatego potrzebujemy szuflady i ta szuflada przedstawi nam kilka opcji. Teraz pierwszą opcją jest oczywiście to, że 53 00:03:59,120 --> 00:04:05,940 idziemy do naszego sklepu, że tak powiem, tutaj jest ta część, w której jesteśmy, gdy 54 00:04:05,940 --> 00:04:07,770 aplikacja się uruchamia. 55 00:04:07,830 --> 00:04:10,110 Drugą opcją powinny być 56 00:04:10,110 --> 00:04:17,340 nasze zamówienia, a trzecia opcja powinna być jak opcja zarządzania produktami, w której możemy zarządzać naszymi własnymi 57 00:04:17,370 --> 00:04:19,920 produktami, które chcesz oferować innym użytkownikom. 58 00:04:19,950 --> 00:04:22,810 Tak jak powiedziałem, sklep jest w zasadzie tym, co już widzimy. 59 00:04:22,830 --> 00:04:31,500 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 60 00:04:31,500 --> 00:04:34,540 pozwoli nam wrócić, ale na tym 61 00:04:34,590 --> 00:04:40,530 ekranie powinniśmy zobaczyć zamówienia, w których zasadniczo mamy przedmioty, w których widzimy coś w 62 00:04:40,960 --> 00:04:49,800 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 63 00:04:49,800 --> 00:04:56,850 ten przycisk, mamy opcjonalny obszar, który otwiera się lub zamyka, i tam, ja w zasadzie chcę 64 00:04:56,860 --> 00:05:02,040 zobaczyć elementy zamówienia, które jest w zasadzie tym, co mieliśmy w koszyku. 65 00:05:02,040 --> 00:05:09,810 Mieliśmy więc tutaj dwie książki, na przykład w cenie 19, cóż, pojawiłoby się to tutaj w obszarze szczegółów, 66 00:05:09,810 --> 00:05:11,590 kiedy to otworzymy. 67 00:05:11,610 --> 00:05:12,490 To jest pomysł 68 00:05:12,540 --> 00:05:13,230 tutaj 69 00:05:13,230 --> 00:05:18,030 w zamówieniu, możemy rozwinąć zamówienie, abyśmy nie tylko widzieli sumę i datę, ale także widzieli przedmioty 70 00:05:18,030 --> 00:05:19,200 w koszyku, które tam 71 00:05:19,230 --> 00:05:23,720 umieściliśmy, więc w zasadzie to, co mieliśmy tutaj w koszyku, to pokazuje się w zamówieniach. 72 00:05:23,960 --> 00:05:25,380 To jest 73 00:05:25,380 --> 00:05:33,480 ekran zamówień, zarządzaliśmy również produktami i narysujmy to tutaj. Zarządzane produkty to kolejny obszar tej aplikacji, w którym 74 00:05:33,480 --> 00:05:40,620 mamy również ten przycisk menu, aby ponownie otworzyć tę szufladę, abyśmy mogli przejść do innych części aplikacji, 75 00:05:40,620 --> 00:05:47,130 ale tutaj na ekranie zarządzanych produktów, gdzie mamy własne produkty, więc produkty użytkowników i w 76 00:05:47,280 --> 00:05:52,980 tej aplikacji nie dodamy jeszcze uwierzytelnienia, ale dodamy to później, ale tutaj mamy 77 00:05:53,340 --> 00:05:55,380 własne produkty. Tutaj znowu 78 00:05:55,380 --> 00:06:01,290 chodzi o to, że zasadniczo widzimy listę produktów, która jest bardzo zbliżona do tego, co 79 00:06:01,350 --> 00:06:08,790 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 80 00:06:08,790 --> 00:06:11,980 ponownie wykorzystać tę listę tutaj, ale oczywiście opcje, 81 00:06:12,510 --> 00:06:18,720 które mamy dla każdego produktu, są różne. Zamiast dodawać go do koszyka 82 00:06:18,720 --> 00:06:22,400 i przeglądać szczegóły, możemy go usunąć, to jeden 83 00:06:22,440 --> 00:06:28,710 przycisk, a także możemy go edytować. Oczywiście możemy edytować tylko nasze własne produkty, ale ponownie nie 84 00:06:28,710 --> 00:06:35,400 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 85 00:06:35,730 --> 00:06:37,470 to na razie tyle. 86 00:06:37,530 --> 00:06:39,330 Mamy więc przycisk edycji i 87 00:06:39,330 --> 00:06:41,920 usuwania, teraz dodatkowo tutaj w nagłówku, więc 88 00:06:41,940 --> 00:06:47,640 potrzebujemy więcej miejsca tutaj, w nagłówku będziemy również mieć przycisk akcji, który pozwala nam dodać nowy 89 00:06:47,640 --> 00:06:48,390 produkt. 90 00:06:48,390 --> 00:06:53,310 Zasadniczo więc powinno to być nieco szersze, zwróciłem to zbyt wąsko. 91 00:06:53,340 --> 00:07:00,030 Mamy więc ten przycisk akcji tutaj i ten przycisk akcji tutaj, ten przycisk plus, to 92 00:07:00,030 --> 00:07:02,480 powinno zabrać nas na nową 93 00:07:02,490 --> 00:07:12,630 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ć 94 00:07:12,720 --> 00:07:19,720 nowy produkt, który pozwala nam dodać tutaj tytuł z wprowadzaniem tekstu, a wprowadzanie tekstu może być 95 00:07:19,720 --> 00:07:23,650 również poniżej etykiety tytułu, możesz to zbudować, jak chcesz. 96 00:07:23,670 --> 00:07:25,770 Powinniśmy być w stanie 97 00:07:25,890 --> 00:07:32,390 dodać cenę, powinniśmy mieć możliwość dodania opisu tutaj, może być tutaj wejściem wielowierszowym, 98 00:07:32,400 --> 00:07:36,530 oczywiście musimy być w stanie dodać również imageUrl. 99 00:07:36,570 --> 00:07:41,460 Tak więc możemy dodać tutaj, a następnie potrzebujemy tutaj przycisku na pasku akcji, przycisku znacznika wyboru 100 00:07:41,460 --> 00:07:46,440 lub czegoś podobnego, co pozwala nam to potwierdzić. Na tym etapie nie będziemy zbytnio dbać o całą 101 00:07:46,440 --> 00:07:47,120 obsługę 102 00:07:47,130 --> 00:07:52,230 danych wprowadzanych przez użytkowników, ponieważ będę miał osobny moduł, w którym zagłębię się we wszystkie szczegóły, jak 103 00:07:52,530 --> 00:07:57,330 możesz to zrobić w elegancki sposób, jak dodać weryfikację, więc tutaj, w tej aplikacji, utrzymamy to 104 00:07:57,330 --> 00:08:00,870 bardzo proste, nie sprawdzimy, czy użytkownik wprowadził coś poprawnego, czy coś w 105 00:08:00,870 --> 00:08:02,350 tym stylu, zrobimy to później. 106 00:08:02,430 --> 00:08:07,470 Tutaj właśnie zebraliśmy podstawowe dane wejściowe po naciśnięciu tego przycisku, przycisk zaznaczenia tutaj, 107 00:08:07,830 --> 00:08:13,560 wróciliśmy do tej strony i oczywiście używamy Redux w naszym systemie zarządzania stanem, aby dodać 108 00:08:13,560 --> 00:08:20,100 nowy produkt do listy produktów, które następnie pojawia się tutaj w naszym sklepie i który pojawia się 109 00:08:20,100 --> 00:08:23,280 tutaj na naszej liście produktów, którymi możemy administrować. 110 00:08:23,340 --> 00:08:24,420 Właśnie to mamy tutaj. 111 00:08:24,480 --> 00:08:32,100 Teraz, jeśli klikniemy tutaj edytuj, jeśli tutaj wybierzemy ten przycisk edycji, przejdziemy również do tej samej strony edycji 112 00:08:32,100 --> 00:08:40,410 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 113 00:08:40,770 --> 00:08:43,110 edytować, na przykład cena nie 114 00:08:43,110 --> 00:08:49,080 powinna być edytowalna, ponieważ jeśli cena byłaby edytowalna, to gdybyśmy mieli ją już w 115 00:08:49,080 --> 00:08:51,230 koszyku, byłby to problem, 116 00:08:51,480 --> 00:08:54,390 więc nie pozwolimy na edycję ceny tutaj, 117 00:08:54,390 --> 00:08:57,840 my pozwoli jednak na edycję tytułu, opisu i 118 00:08:57,930 --> 00:09:00,210 imageUrl, więc jest to możliwe. 119 00:09:00,210 --> 00:09:01,210 To jest jedna 120 00:09:01,260 --> 00:09:04,180 różnica, mamy wstępnie wypełnione pola, a ceny nie można edytować. 121 00:09:04,260 --> 00:09:09,840 Jeśli naciśniemy znacznik wyboru w trybie edycji i będziemy mogli dowiedzieć się, czy edytujemy, czy 122 00:09:09,840 --> 00:09:14,220 na przykład poprzez fakt, że otrzymaliśmy identyfikator produktu jako parametr, więc po 123 00:09:14,220 --> 00:09:20,100 zakończeniu edycji możemy nacisnąć ikonę znacznika wyboru a następnie zostajemy cofnięci i po prostu zapisujemy wszystko, 124 00:09:20,100 --> 00:09:23,660 co tutaj edytowaliśmy, z powrotem do naszego produktu. 125 00:09:23,670 --> 00:09:25,780 To jest tutaj aplikacja. 126 00:09:25,890 --> 00:09:30,700 Jak już wspomniałem, będzie to również podstawa dla kolejnych modułów, tam 127 00:09:30,700 --> 00:09:38,100 również dodamy żądanie HTTP, uwierzytelnianie, zrobimy tutaj całą weryfikację formularza w bardziej elegancki sposób i tak dalej, 128 00:09:38,100 --> 00:09:40,020 ale ten moduł tutaj 129 00:09:40,050 --> 00:09:46,110 jest teraz świetna praktyka, jak zbudować taką aplikację, jak pracować z komponentami, stylizować je, 130 00:09:46,200 --> 00:09:51,240 dodawać nawigację, ponieważ oczywiście mamy dużo nawigacji w tej aplikacji i jak 131 00:09:51,240 --> 00:09:54,940 zarządzać naszym stanem w tej aplikacji na zakupy. 132 00:09:55,020 --> 00:09:59,850 Jak wspomniałem w ostatnim wykładzie, możesz pominąć ten moduł, ale zdecydowanie powinieneś zanurzyć się 133 00:09:59,850 --> 00:10:05,100 w gotowym kodzie, abyś mógł śledzić kolejne moduły, ale oczywiście zalecam, abyś: a) albo wypróbować 134 00:10:05,100 --> 00:10:10,840 to wszystko na własną rękę i oczywiście twój wynik nie będzie taki sam, jak ja, więc zdecydowanie 135 00:10:10,860 --> 00:10:16,230 powinieneś również obejrzeć moje filmy później, aby zobaczyć, jak to zrobiłem i abyś miał tę samą 136 00:10:16,230 --> 00:10:18,360 podstawę kodu, ale będzie to świetna 137 00:10:18,360 --> 00:10:23,280 praktyka nawet jeśli twój wynik jest pierwszy, ponieważ niekoniecznie istnieje niewłaściwe lub właściwe podejście lub 138 00:10:23,280 --> 00:10:28,890 b) twoją inną opcją jest oczywiście to, że nie próbujesz tego sam i po prostu postępujesz zgodnie 139 00:10:28,890 --> 00:10:29,870 z nim, 140 00:10:29,970 --> 00:10:34,830 również ważna opcja, ale wierzę, że będziesz skorzystaj trochę więcej z kursu, jeśli spróbujesz 141 00:10:34,830 --> 00:10:35,490 najpierw 142 00:10:35,490 --> 00:10:40,080 sam, ale w końcu zrób co chcesz. W następnym wykładzie zajmiemy się tym i zaczniemy budować tę 143 00:10:40,080 --> 00:10:40,500 aplikację.