1
00:00:02,200 --> 00:00:08,380
Teraz, gdy mamy już podstawowy przepływ informacji, możemy nawigować między naszymi produktami, dodawać je do koszyka, a

2
00:00:08,410 --> 00:00:13,900
następnie także używać koszyka do złożenia zamówienia, a także wyświetlić to zamówienie i oczywiście również

3
00:00:13,930 --> 00:00:15,040
edytować koszyk,

4
00:00:15,070 --> 00:00:20,530
jeśli chcemy, teraz, gdy to wszystko zostało zrobione, czas przejść do ostatniej części tej aplikacji,

5
00:00:20,530 --> 00:00:24,430
która jest oczywiście częścią, w której możesz dodawać nowe produkty.

6
00:00:24,430 --> 00:00:29,960
Teraz jest to także część, którą dopracujemy później, ponieważ później oczywiście głębiej zajmiemy się obsługą danych wejściowych użytkowników, a

7
00:00:29,980 --> 00:00:36,770
nawet przechowamy te dane na serwerze, ale już możemy zacząć tutaj. Na początek ekran produktu użytkownika i

8
00:00:36,770 --> 00:00:37,910
ekran edycji

9
00:00:37,910 --> 00:00:42,560
produktu staną się teraz ważne, ponieważ są to ekrany, na

10
00:00:42,560 --> 00:00:47,450
których widzimy wszystkie nasze produkty i gdzie możemy również edytować produkty.

11
00:00:47,480 --> 00:00:49,720
Zacznijmy od ekranu produktów użytkownika

12
00:00:49,750 --> 00:00:53,420
i zmieńmy go w komponent React, importując React z

13
00:00:53,600 --> 00:01:01,970
React i, co nie jest zaskoczeniem, importując rzeczy z React Native. To, co chcę tutaj zaimportować, to znowu płaska

14
00:01:01,970 --> 00:01:06,250
lista, ponieważ na końcu wypiszę listę produktów na

15
00:01:06,320 --> 00:01:08,260
ekranie produktów użytkownika.

16
00:01:08,630 --> 00:01:15,650
Dlatego tutaj mamy komponent ekranowy produktów użytkownika, który otrzymuje rekwizyty i gdzie

17
00:01:15,650 --> 00:01:22,960
muszę zwrócić trochę jsx, a na dole pliku wyeksportuję ten komponent jako domyślny.

18
00:01:23,090 --> 00:01:29,670
To jest mój domyślny zestaw komponentów, którego używałem w kółko. Teraz chcę wydrukować moje

19
00:01:30,000 --> 00:01:38,070
komponenty, moje produkty z płaską listą i ponownie użyję tego komponentu produktu,

20
00:01:38,070 --> 00:01:40,560
który zbudowaliśmy wcześniej.

21
00:01:40,560 --> 00:01:44,130
Wracając do produktów użytkownika, możemy zaimportować produkt

22
00:01:47,030 --> 00:01:51,020
z folderu komponentów, więc chodźmy tam i tam,

23
00:01:51,020 --> 00:01:57,090
aby robić zakupy, a następnie zamawiać, a nie zamawiać, ale produkt i tutaj,

24
00:01:57,230 --> 00:02:03,320
oczywiście, również przekazywać niektóre dane. Teraz dane, które chcę tutaj przekazać, powinny być

25
00:02:03,320 --> 00:02:06,140
produktami należącymi do mojego zalogowanego użytkownika.

26
00:02:06,140 --> 00:02:11,450
W tej chwili nie mamy zalogowanego użytkownika, ale jeśli pamiętasz reduktor produktów, to oszukujemy,

27
00:02:11,450 --> 00:02:17,300
że mamy, ponieważ mamy tablicę produktów użytkownika, która przechowuje wszystkie produkty, które w tym przypadku

28
00:02:17,300 --> 00:02:25,130
mają identyfikator użytkownika, identyfikator właściciela z U1 i zakładam na chwilę, że mamy pewne fikcyjne dane, że są to nasze aktualnie

29
00:02:25,130 --> 00:02:31,930
zalogowane dane użytkownika, później będzie to oczywiście dynamiczne. Tak więc potrzebujemy produktu użytkownika, z

30
00:02:31,930 --> 00:02:37,930
powrotem na ekranie produktów użytkownika, dlatego musimy uzyskać te dane z

31
00:02:37,930 --> 00:02:44,540
Redux za pomocą selektora użycia z React Redux, w ten sposób i

32
00:02:44,560 --> 00:02:55,680
tutaj otrzymujemy nasze produkty użytkownika, dzwoniąc do selektora użycia, w którym przechodzimy w tej funkcji uzyskuje stan, a następnie dociera do

33
00:02:55,680 --> 00:03:02,520
części produktowej naszych produktów sklepowych, ponieważ to jest identyfikator, którego tam używam, a

34
00:03:02,520 --> 00:03:10,590
następnie, jak właśnie powiedziałem, uzyskaj dostęp do tego pola produktów użytkownika tutaj, więc na ekranie

35
00:03:10,590 --> 00:03:18,990
produktu użytkownika, tutaj dostęp. produkty użytkownika. Produkty użytkownika są teraz tablicą,

36
00:03:18,990 --> 00:03:26,870
którą wprowadzamy do danych, jak zawsze tutaj dodam ekstraktor kluczy, który daje mi identyfikator, ponieważ mój produkt przechowywany tutaj

37
00:03:26,880 --> 00:03:31,860
w produktach użytkownika używa oczywiście mojego modelu produktu, a zatem ma identyfikator,

38
00:03:31,860 --> 00:03:38,400
który jest unikalny identyfikator, którego mogę użyć, więc go użyję, a potem oczywiście, jak zawsze,

39
00:03:38,400 --> 00:03:46,830
również musimy dodać element renderujący, oczywiście znasz już ten wzór. Renderuj przedmiot pobiera tutaj dane produktu i chcę zwrócić nowy

40
00:03:46,830 --> 00:03:53,130
produkt dla każdego wpisu tutaj, a przedmiot produktu, jeśli przyjrzymy się temu, wymaga kilku informacji.

41
00:03:53,670 --> 00:04:05,790
Pobiera tutaj szczegółową propozycję widoku, bierze prop, tytułową, propozycję cenową, propozycję graficzną, a następnie prop dodaną do

42
00:04:05,790 --> 00:04:07,300
koszyka.

43
00:04:07,400 --> 00:04:12,840
Teraz możesz już zauważyć, że nie wszystkie te rekwizyty naprawdę pasują do naszego celu, jeśli

44
00:04:12,840 --> 00:04:18,840
użyjemy tego na ekranie produktu użytkownika, ponieważ nie będzie to ekran, na którym można kupować produkty, to nie

45
00:04:18,840 --> 00:04:26,310
jest ekran, na którym chcę móc dodać produkty do koszyka. Chcę je wydrukować tak jak tutaj z obrazem, ceną itd., Ale

46
00:04:26,310 --> 00:04:34,920
nie dbam tak bardzo o to, czy możemy je kliknąć, czy o te przyciski. Zacznę więc dodawać produkt w

47
00:04:34,920 --> 00:04:39,310
ten sposób, ale będziemy musieli go dostroić.

48
00:04:39,510 --> 00:04:46,170
Potrzebujemy więc tytułu, ceny, obrazu i szczegółów widoku oraz koszyka.

49
00:04:46,170 --> 00:04:53,430
Potrzebujemy więc obrazu tutaj i oczywiście jest to itemData. pozycja. imageUrl, ponieważ nie

50
00:04:53,430 --> 00:04:59,400
możesz zapomnieć o tym itemData. item w punktach końcowych produktu zdefiniowanego

51
00:04:59,400 --> 00:05:08,540
tutaj w modelu, stąd będziemy mieli tę właściwość imageUrl, a następnie tutaj potrzebujemy również tytułu, który jest dostępny

52
00:05:08,570 --> 00:05:17,840
poprzez itemData. pozycja. tytuł. Potrzebujemy ceny, która jest dostępna w itemData. pozycja. cena i jeśli spojrzymy

53
00:05:17,840 --> 00:05:23,570
na element produktu, który spełnia wszystko, czego potrzebujemy tutaj, ale teraz musimy zobaczyć

54
00:05:23,570 --> 00:05:30,380
szczegóły na temat i dodać do koszyka, a ja dodam je tymczasowo, ale tutaj musimy znaleźć inne

55
00:05:30,380 --> 00:05:31,100
rozwiązanie.

56
00:05:31,100 --> 00:05:34,290
Tak więc w widoku szczegółów jest

57
00:05:34,290 --> 00:05:41,760
obecnie pusta funkcja, a przy dodawaniu do koszyka również funkcja pusta, a my zaimplementujemy to później.

58
00:05:42,270 --> 00:05:47,370
Na razie jednak wysyłam tutaj element produktu i dlatego możemy

59
00:05:47,370 --> 00:05:54,600
teraz przejść do ekranu produktów użytkownika. Aby się tam dostać, czas wrócić do nawigatora sklepu, a na

60
00:05:54,600 --> 00:06:00,420
koniec chcę dodać je do nawigatora szuflad, ale jako osobny stos, podobnie jak produkty i zamówienia to osobny

61
00:06:00,420 --> 00:06:03,120
stos, powinien to być również osobny stos .

62
00:06:03,120 --> 00:06:11,160
Możemy po prostu skopiować tutaj stos nawigatora zamówień, replikować go i zaimportować tutaj ekran produktu użytkownika, więc

63
00:06:11,160 --> 00:06:19,440
ekran produktów użytkownika z folderu ekranów, tam z folderu użytkownika, a następnie ekran produktu użytkownika i zmapuj to

64
00:06:19,440 --> 00:06:27,180
w nowo skopiowanym stosie, który tam Nie będę nazywał nawigatora zamówień, ponieważ mam już tę nazwę,

65
00:06:28,000 --> 00:06:35,140
ale nadam jej nazwę, powiedzmy, że może to administrator nawigatora, a tutaj mam identyfikator

66
00:06:35,570 --> 00:06:43,900
produktów użytkownika, który wskazuje na ekranie produktów użytkownika. Teraz tutaj jako ikona, w szufladzie

67
00:06:43,920 --> 00:06:51,670
chcę mieć md create i ios create icon i poza tym, powinno być dobrze.

68
00:06:51,680 --> 00:06:55,460
Teraz musimy tylko dodać ten nawigator do naszego nawigatora szufladowego.

69
00:06:55,460 --> 00:07:02,830
Tam dodam klucz administratora i wskażę na nawigatorze administratora, więc teraz powinniśmy

70
00:07:02,830 --> 00:07:08,980
być w stanie go osiągnąć. Jeśli wrócimy do aplikacji, mamy wpis

71
00:07:08,980 --> 00:07:14,080
administratora i jeśli go kliknę, otrzymamy problem dotyczący moich produktów użytkownika,

72
00:07:14,090 --> 00:07:19,880
stan niezdefiniowany nie jest obiektem, rzućmy okiem na ekran produktu użytkownika, tak, to

73
00:07:19,910 --> 00:07:25,880
powinno bądź produktami, ponieważ nasz plasterek jest tutaj nazywany produktami w kombinacji reduktorów.

74
00:07:25,880 --> 00:07:27,990
Więc tutaj powinny też

75
00:07:28,080 --> 00:07:34,590
być produkty, mała literówka z mojej strony. Teraz wygląda to lepiej i teraz może wyglądać, jakby nic się

76
00:07:34,590 --> 00:07:40,830
nie zmieniło, ale w rzeczywistości widać, że moje elementy nawigacji zniknęły, ponieważ teraz jestem na nowym ekranie, ale mam tutaj moją starą

77
00:07:40,830 --> 00:07:42,910
listę, ale z mniejszą liczbą produktów.

78
00:07:43,020 --> 00:07:47,190
Jeśli porównasz Androida, gdzie jestem na ekranie startowym, mamy tam więcej produktów, teraz

79
00:07:47,190 --> 00:07:50,340
mam tylko te, w których U1 jest identyfikatorem właściciela.

80
00:07:50,730 --> 00:07:51,550
To

81
00:07:51,960 --> 00:07:54,850
dobrze, ale oczywiście nie lubię tych przycisków tutaj

82
00:07:54,930 --> 00:07:58,960
i chcę też mieć tutaj pozycję menu i oczywiście nagłówek.

83
00:07:58,980 --> 00:08:03,930
Jest kilka rzeczy, które musimy naprawić, te przyciski są oczywiście najważniejsze lub

84
00:08:03,930 --> 00:08:08,270
najbardziej uderzające, co jest złe. Zacznę od nagłówka,

85
00:08:08,270 --> 00:08:11,420
tutaj na ekranie produktów użytkownika

86
00:08:11,450 --> 00:08:19,910
możemy dodać opcje nawigacji, ekran produktów użytkownika. opcje nawigacji i tam, na przykład, ustaw tytuł

87
00:08:19,910 --> 00:08:30,130
nagłówka swoich produktów, a my potrzebujemy również przycisku menu, abyśmy mogli faktycznie przejść do ekranu przeglądu produktu, a stamtąd

88
00:08:30,160 --> 00:08:35,930
skopiować ten nagłówek po lewej stronie, wrócić do ekranu produktu

89
00:08:36,020 --> 00:08:39,620
użytkownika i dodaj to tutaj.

90
00:08:39,620 --> 00:08:44,900
Teraz jednak potrzebujemy tej formy funkcji opcji nawigacji, w której następnie zwracamy obiekt

91
00:08:44,900 --> 00:08:50,210
ze wszystkimi dostępnymi opcjami, więc musimy to zmienić w ten sposób, a także

92
00:08:50,660 --> 00:08:55,880
musimy upewnić się, że importujemy element przycisków nagłówka i przycisk nagłówka.

93
00:08:55,880 --> 00:09:00,300
Wracając do ekranu przeglądu produktu, mam tutaj te importy, skopiuj

94
00:09:00,440 --> 00:09:03,310
je z ekranu przeglądu produktu, przejdź do

95
00:09:03,440 --> 00:09:05,990
ekranu produktu użytkownika i dodaj je

96
00:09:06,010 --> 00:09:09,050
w ten sposób, na przykład, aby zaimportować

97
00:09:09,050 --> 00:09:10,940
wszystko, czego potrzebujesz.

98
00:09:10,940 --> 00:09:16,400
Musimy również zaimportować interfejs API platformy, ponieważ używamy go również podczas konfigurowania przycisków nagłówka.

99
00:09:18,210 --> 00:09:25,800
Przynajmniej teraz, gdy wchodzimy do obszaru administracyjnego, mamy tutaj tytuł, znów mamy szufladę, przycisk menu,

100
00:09:25,800 --> 00:09:26,860
ale

101
00:09:26,940 --> 00:09:29,250
co z tymi przyciskami tutaj?

102
00:09:29,310 --> 00:09:33,840
Będziemy musieli zmienić wygląd naszego produktu.