1
00:00:02,200 --> 00:00:08,380
Agora que temos o fluxo básico para baixo, podemos navegar entre nossos produtos, adicioná-los ao carrinho e também

2
00:00:08,410 --> 00:00:13,900
usá-lo para fazer um pedido, além de visualizar esse pedido e, é claro, editar o carrinho,

3
00:00:13,930 --> 00:00:15,040
se quisermos, agora

4
00:00:15,070 --> 00:00:20,530
que tudo isso foi feito, é hora de avançar para a última parte deste aplicativo, que

5
00:00:20,530 --> 00:00:24,430
é obviamente a parte em que você pode adicionar novos produtos.

6
00:00:24,430 --> 00:00:29,960
Agora, essa também é a parte que refinaremos mais tarde, porque mais tarde, é claro, aprofundaremos no tratamento das entradas do usuário

7
00:00:29,980 --> 00:00:36,770
e até armazenaremos esses dados em um servidor, mas já podemos começar aqui. Para começar, a tela do produto do usuário e

8
00:00:36,770 --> 00:00:37,910
a tela

9
00:00:37,910 --> 00:00:42,560
de edição do produto se tornarão importantes agora, porque essas são as telas

10
00:00:42,560 --> 00:00:47,450
em que vemos todos os nossos produtos e onde também podemos editar os produtos.

11
00:00:47,480 --> 00:00:49,720
Então, vamos começar com a tela

12
00:00:49,750 --> 00:00:53,420
de produtos do usuário e transformá-la em um componente React

13
00:00:53,600 --> 00:01:01,970
importando React do React e, sem surpresa, importando coisas do React Native. O que eu quero importar aqui é a lista simples

14
00:01:01,970 --> 00:01:06,250
novamente, porque no final mostrarei uma lista de produtos nessa tela

15
00:01:06,320 --> 00:01:08,260
de produtos do usuário.

16
00:01:08,630 --> 00:01:15,650
Portanto, aqui, temos o componente de tela de produtos do usuário que recebe adereços e

17
00:01:15,650 --> 00:01:22,960
onde preciso retornar alguns jsx e, na parte inferior do arquivo, exportarei esse componente como padrão.

18
00:01:23,090 --> 00:01:29,670
Esse é o meu componente padrão configurado que eu usei repetidamente. Agora, aqui, quero exibir meus componentes,

19
00:01:30,000 --> 00:01:38,070
meus produtos com uma lista simples e reutilizaremos o componente de item de produto

20
00:01:38,070 --> 00:01:40,560
que criamos anteriormente.

21
00:01:40,560 --> 00:01:44,130
Então, voltando aos produtos do usuário, podemos importar o

22
00:01:47,030 --> 00:01:51,020
item do produto da pasta de componentes, então vamos lá e

23
00:01:51,020 --> 00:01:57,090
ali, para comprar e depois fazer o pedido, não o pedido, mas o item do produto e

24
00:01:57,230 --> 00:02:03,320
aqui, é claro, também passamos alguns dados. Agora, os dados que desejo passar aqui devem ser

25
00:02:03,320 --> 00:02:06,140
os produtos que pertenceram ao meu usuário conectado.

26
00:02:06,140 --> 00:02:11,450
No momento, não temos usuário logado, mas se você se lembra do redutor de produtos, estamos fingindo

27
00:02:11,450 --> 00:02:17,300
que temos, porque temos essa matriz de produtos de usuário que contém todos os produtos que, neste caso, aqui

28
00:02:17,300 --> 00:02:25,130
têm um ID de usuário, um ID de proprietário do U1 e presumo que, no momento, tenhamos alguns dados fictícios de que esses são nossos dados

29
00:02:25,130 --> 00:02:31,930
de usuário atualmente conectados, mais tarde, é claro, serão dinâmicos. Portanto, produto de usuário é o que precisamos.

30
00:02:31,930 --> 00:02:37,930
De volta à tela de produtos de usuário, precisamos obter esses dados do

31
00:02:37,930 --> 00:02:44,540
Redux com a ajuda do seletor de uso do React Redux, assim e aqui obtemos

32
00:02:44,560 --> 00:02:55,680
nossos produtos de usuário chamando o seletor de uso por onde passamos nessa função, ele obtém o estado e, em seguida, alcança os produtos que

33
00:02:55,680 --> 00:03:02,520
fazem parte dos produtos da nossa loja, porque esse é o identificador que eu uso lá

34
00:03:02,520 --> 00:03:10,590
e, como acabei de dizer, acesse o campo de produtos para usuários aqui, na tela do produto para

35
00:03:10,590 --> 00:03:18,990
usuários, aqui nós Acesso . produtos de usuário. Produtos para usuários agora é a matriz

36
00:03:18,990 --> 00:03:26,870
que alimentamos com os dados. Como sempre, adicionarei um extrator de chaves que me fornece o ID, porque meu produto armazenado aqui em produtos

37
00:03:26,880 --> 00:03:31,860
para usuários usa, é claro, meu modelo de produto no final e, portanto, possui um

38
00:03:31,860 --> 00:03:38,400
ID que é um identificador único que eu possa usar, então eu o usarei e, é claro, como sempre, também

39
00:03:38,400 --> 00:03:46,830
precisamos adicionar um item de renderização, você obviamente já conhece esse padrão. O item de renderização obtém os dados do item aqui e desejo retornar

40
00:03:46,830 --> 00:03:53,130
um novo item de produto para cada entrada aqui e o item do produto, se dermos uma olhada, leva algumas informações.

41
00:03:53,670 --> 00:04:05,790
É necessário um suporte de detalhes aqui, um suporte de título, um suporte de preço, um suporte de imagem e também um suporte para adicionar

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

43
00:04:07,400 --> 00:04:12,840
Agora você já deve ter percebido que nem todos esses objetos realmente se encaixam em nosso objetivo se

44
00:04:12,840 --> 00:04:18,840
o usarmos na tela do produto do usuário, porque não será uma tela na qual podemos comprar produtos, não é

45
00:04:18,840 --> 00:04:26,310
uma tela na qual desejo poder adicionar produtos para um carrinho. Quero exibi-los como faço aqui com a imagem, o preço e assim por

46
00:04:26,310 --> 00:04:34,920
diante, mas não me importo muito com o fato de podermos clicar neles ou nesses botões. Então, começarei a adicionar o

47
00:04:34,920 --> 00:04:39,310
item do produto assim, mas precisaremos ajustá-lo.

48
00:04:39,510 --> 00:04:46,170
Então, o que precisamos é de título, preço, imagem e detalhes de exibição e no carrinho de compras.

49
00:04:46,170 --> 00:04:53,430
Então, precisamos da imagem aqui e, claro, é itemData. item. imageUrl porque você

50
00:04:53,430 --> 00:04:59,400
não deve esquecer esse itemData. item nos pontos finais de um

51
00:04:59,400 --> 00:05:08,540
produto, conforme definido aqui no modelo, portanto, teremos essa propriedade imageUrl e também precisamos do título acessível através

52
00:05:08,570 --> 00:05:17,840
do itemData. item. título. Precisamos do preço acessível com itemData. item. preço e se dermos uma

53
00:05:17,840 --> 00:05:23,570
olhada no componente do item do produto, ele atende a tudo o que precisamos aqui, mas

54
00:05:23,570 --> 00:05:30,380
agora precisamos exibir detalhes sobre e adicionar ao carrinho e os adicionarei temporariamente, mas teremos que encontrar uma solução diferente

55
00:05:30,380 --> 00:05:31,100
aqui.

56
00:05:31,100 --> 00:05:34,290
Portanto, na visualização de detalhes, há uma função

57
00:05:34,290 --> 00:05:41,760
vazia no momento e, em adicionar ao carrinho, também uma função vazia e a implementaremos de maneira diferente posteriormente.

58
00:05:42,270 --> 00:05:47,370
No momento, porém, estou produzindo um item de produto aqui e, portanto, agora

59
00:05:47,370 --> 00:05:54,600
podemos navegar para a tela de produtos do usuário. Para chegar lá, é hora de voltar ao navegador da loja e, no

60
00:05:54,600 --> 00:06:00,420
final, quero adicioná-los ao navegador da gaveta, mas como uma pilha separada, assim como produtos e pedidos são uma pilha separada,

61
00:06:00,420 --> 00:06:03,120
isso também deve ser uma pilha separada .

62
00:06:03,120 --> 00:06:11,160
Podemos apenas copiar a pilha do navegador de pedidos aqui, replicar isso e importar a tela do produto do usuário aqui,

63
00:06:11,160 --> 00:06:19,440
para que a tela do produto do usuário seja exibida na pasta screens, na pasta do usuário e na tela do produto

64
00:06:19,440 --> 00:06:27,180
do usuário e mapeie-a na pilha recém-copiada Não vou nomear o navegador de pedidos porque já tenho esse nome aqui,

65
00:06:28,000 --> 00:06:35,140
mas o nome será digamos admin navigator talvez e aqui, eu tenho o meu identificador de produtos do

66
00:06:35,570 --> 00:06:43,900
usuário que aponta para a tela de produtos do usuário. Agora, aqui como um ícone, na gaveta, quero

67
00:06:43,920 --> 00:06:51,670
que um md create e o ios create icon e, além disso, esteja tudo bem.

68
00:06:51,680 --> 00:06:55,460
Agora só precisamos adicionar esse navegador ao navegador da gaveta.

69
00:06:55,460 --> 00:07:02,830
Lá, adicionarei a chave de administrador e apontei para o navegador de administração, para

70
00:07:02,830 --> 00:07:08,980
que agora possamos realmente alcançá-lo. Se voltarmos ao aplicativo, tivermos a entrada de

71
00:07:08,980 --> 00:07:14,080
administrador e, se eu clicar nele, teremos um problema com relação aos meus produtos

72
00:07:14,090 --> 00:07:19,880
de usuário, o estado indefinido não é um objeto, vamos dar uma rápida olhada na tela do

73
00:07:19,910 --> 00:07:25,880
produto do usuário, sim, isso deve ser produtos porque nossa fatia é denominada produtos aqui no redutor combinado.

74
00:07:25,880 --> 00:07:27,990
Então aqui também deve haver

75
00:07:28,080 --> 00:07:34,590
produtos, pequenos erros de digitação do meu lado. Agora isso parece melhor e agora, pode parecer que nada mudou,

76
00:07:34,590 --> 00:07:40,830
mas, na verdade, você pode ver que meus itens de navegação sumiram porque agora estou em uma nova tela, mas tenho minha

77
00:07:40,830 --> 00:07:42,910
lista antiga aqui, mas com menos produtos.

78
00:07:43,020 --> 00:07:47,190
Se você comparar o Android onde estou na tela inicial, temos mais produtos lá, agora

79
00:07:47,190 --> 00:07:50,340
só tenho aqueles em que U1 é o ID do proprietário.

80
00:07:50,730 --> 00:07:51,550
Então isso é

81
00:07:51,960 --> 00:07:54,850
bom, mas é claro que eu não gosto desses botões aqui

82
00:07:54,930 --> 00:07:58,960
e também quero ter um item de menu aqui e um título de cabeçalho, é claro.

83
00:07:58,980 --> 00:08:03,930
Há algumas coisas que precisamos consertar, é claro que esses botões são a coisa mais importante

84
00:08:03,930 --> 00:08:08,270
ou a mais impressionante que está errada. Ainda assim, vou começar com

85
00:08:08,270 --> 00:08:11,420
o cabeçalho, na tela de produtos do usuário

86
00:08:11,450 --> 00:08:19,910
aqui, podemos adicionar as opções de navegação, tela de produtos do usuário. opções de navegação e, em seguida, defina um título de

87
00:08:19,910 --> 00:08:30,130
cabeçalho de seus produtos, por exemplo, e também precisamos do botão de menu, para que também possamos ir para a tela de visão geral do produto

88
00:08:30,160 --> 00:08:35,930
e, a partir daí, copie esse cabeçalho da parte esquerda aqui, volte para a tela

89
00:08:36,020 --> 00:08:39,620
de produto do usuário e adicione isso aqui.

90
00:08:39,620 --> 00:08:44,900
Agora, no entanto, precisamos dessa forma de função das opções de navegação onde, no final, retornamos

91
00:08:44,900 --> 00:08:50,210
um objeto com todas as opções existentes, então é algo que precisamos mudar assim e também

92
00:08:50,660 --> 00:08:55,880
precisamos nos certificar de importar os itens dos botões de cabeçalho e botão de cabeçalho.

93
00:08:55,880 --> 00:09:00,300
Então, de volta à tela de visão geral do produto, tenho essas importações

94
00:09:00,440 --> 00:09:03,310
aqui, copie-as da tela de visão geral do

95
00:09:03,440 --> 00:09:05,990
produto, vá para a tela do produto

96
00:09:06,010 --> 00:09:09,050
do usuário e adicione-as assim, por exemplo, para importar

97
00:09:09,050 --> 00:09:10,940
tudo o que você precisa.

98
00:09:10,940 --> 00:09:16,400
Também precisamos importar uma API da plataforma, porque também a usamos ao configurar os botões do cabeçalho.

99
00:09:18,210 --> 00:09:25,800
Agora, pelo menos, quando vamos para a área de administração, temos nosso título aqui, temos a gaveta, o botão de

100
00:09:25,800 --> 00:09:26,860
menu novamente,

101
00:09:26,940 --> 00:09:29,250
mas agora e esses botões aqui?

102
00:09:29,310 --> 00:09:33,840
Precisamos alterar a aparência do item do produto.