1
00:00:02,060 --> 00:00:03,200
Então, vamos

2
00:00:03,200 --> 00:00:08,920
planejar o aplicativo que criaremos e criaremos um aplicativo básico de compras, uma loja

3
00:00:08,930 --> 00:00:17,120
online básica em um aplicativo que você poderia dizer. Portanto, nesta aplicação aqui, precisaremos definitivamente de um monte de produtos

4
00:00:17,120 --> 00:00:17,680
que

5
00:00:17,710 --> 00:00:24,590
podem ser listados, por isso teremos uma tela de visão geral do produto em que vemos esses cartões com

6
00:00:24,680 --> 00:00:30,770
nossos produtos, com uma imagem, com o título e o preço talvez algo assim e também

7
00:00:30,770 --> 00:00:37,930
um botão de carrinho ou adicionar ao carrinho e um botão de detalhes, basicamente um botão que nos permite acessar

8
00:00:37,970 --> 00:00:42,440
uma página de detalhes e um botão que nos permite adicionar isso

9
00:00:42,440 --> 00:00:43,730
a um carrinho.

10
00:00:43,760 --> 00:00:47,060
Como se você tocar neste botão de carrinho aqui,

11
00:00:47,060 --> 00:00:53,900
então se você selecionar esse botão de carrinho, ele será adicionado a um carrinho e você poderá alcançá-lo com

12
00:00:53,900 --> 00:00:56,360
um botão de ação aqui na barra

13
00:00:56,390 --> 00:01:01,300
de ação, portanto, no cabeçalho superior, lá eu quer ter um ícone desse

14
00:01:01,570 --> 00:01:08,060
carrinho, provavelmente um pouco melhor do que o que eu desenhei aqui, mas esse ícone aqui no final

15
00:01:08,060 --> 00:01:14,480
nos permite ir para uma página separada posteriormente, uma tela separada desse aplicativo, onde é claro que

16
00:01:14,480 --> 00:01:23,240
também podemos voltar para onde veremos aqui uma soma total em dólares que nossos itens totais do carrinho somam e, em seguida, uma lista

17
00:01:23,510 --> 00:01:26,910
de nossos itens como um livro e quanto custa

18
00:01:26,930 --> 00:01:28,360
esse custo e

19
00:01:28,520 --> 00:01:29,510
algo assim.

20
00:01:29,540 --> 00:01:33,140
Então, basicamente, vemos nosso carrinho aqui, vemos uma soma disso e,

21
00:01:33,140 --> 00:01:35,580
em seguida, vemos os itens individuais e,

22
00:01:35,630 --> 00:01:42,470
claro, também quero ter um botão que permita que eu encomende o que está no carrinho e, na verdade, esse

23
00:01:42,530 --> 00:01:46,070
botão não deve estar abaixo deste , então aqui teremos

24
00:01:46,070 --> 00:01:47,530
um botão de pedido.

25
00:01:47,600 --> 00:01:48,890
Na verdade, isso deve estar

26
00:01:48,890 --> 00:01:53,450
aqui, então aqui eu quero ter uma linha em que tenhamos a soma total e, ao lado, o botão de pedidos.

27
00:01:54,110 --> 00:01:55,310
Portanto, esse é

28
00:01:55,310 --> 00:01:57,250
basicamente o objetivo, mas você

29
00:01:57,250 --> 00:02:02,930
pode colocá-lo onde quiser, no final, queremos um botão que nos permita solicitar o que temos

30
00:02:02,930 --> 00:02:03,470
no

31
00:02:03,470 --> 00:02:12,150
carrinho e em cada item do carrinho aqui, também quero ter um ícone de lixeira aqui, o que me permite excluir um item do carrinho.

32
00:02:12,200 --> 00:02:22,300
Então, onde isso faz um pedido, esse ícone aqui basicamente exclui um item do

33
00:02:22,300 --> 00:02:23,410
carrinho.

34
00:02:23,410 --> 00:02:24,220
Então essa

35
00:02:24,220 --> 00:02:29,760
é a ideia, é claro, se você adicionar o mesmo item várias vezes ao carrinho, não deverá adicionar

36
00:02:29,830 --> 00:02:36,520
várias linhas para isso, mas aqui também quero mostrar como uma quantidade do item que simplesmente aumenta se o adicionarmos mais frequentemente

37
00:02:36,520 --> 00:02:41,920
ao carrinho e que diminui se o excluirmos até que todos os itens sejam excluídos. Nesse caso,

38
00:02:41,920 --> 00:02:44,080
a linha inteira será excluída aqui.

39
00:02:44,080 --> 00:02:46,000
É assim que esta página

40
00:02:46,000 --> 00:02:54,070
de carrinho funcionará, esta é a página de visão geral aqui, é claro que também podemos tocar no botão de detalhes ou talvez no item

41
00:02:54,070 --> 00:02:56,950
em geral, portanto, em qualquer lugar da imagem ou

42
00:02:56,980 --> 00:03:00,250
qualquer coisa assim, devemos ser levados a um página de detalhes.

43
00:03:00,250 --> 00:03:04,810
Portanto, essa é outra tela nesta aplicação, onde é claro que também podemos voltar.

44
00:03:04,810 --> 00:03:08,190
Essa é a página de detalhes do

45
00:03:08,260 --> 00:03:12,490
ícone onde devemos ver a imagem, provavelmente devemos ver como

46
00:03:12,490 --> 00:03:23,710
o título aqui no cabeçalho, para que esse seja o título do item. Abaixo disso, vemos o preço, a descrição e provavelmente

47
00:03:24,190 --> 00:03:32,300
também queremos ter um botão de carrinho de compras, onde também podemos adicionar

48
00:03:32,310 --> 00:03:37,460
itens ao carrinho aqui. Esse é o fluxo referente aos nossos produtos que

49
00:03:37,470 --> 00:03:38,630
temos aqui. Agora,

50
00:03:38,640 --> 00:03:44,060
o importante neste aplicativo será que não podemos apenas ver os produtos, comprá-los e adicioná-los

51
00:03:44,060 --> 00:03:50,010
ao carrinho e assim por diante, mas é claro que também podemos ver nossos pedidos e, mais importante,

52
00:03:50,130 --> 00:03:52,110
que também podemos adicionar novos produtos.

53
00:03:52,110 --> 00:03:59,100
Portanto, aqui, precisamos de uma gaveta e esta nos apresentará algumas opções. Agora, a primeira opção, é claro, é

54
00:03:59,120 --> 00:04:05,940
irmos à nossa loja, por assim dizer, é nessa parte que estamos aqui quando o

55
00:04:05,940 --> 00:04:07,770
aplicativo é iniciado.

56
00:04:07,830 --> 00:04:10,110
A segunda opção deve ser

57
00:04:10,110 --> 00:04:17,340
nossos pedidos e a terceira deve ser como uma opção de gerenciamento de produtos, onde podemos gerenciar nossos próprios produtos

58
00:04:17,370 --> 00:04:19,920
que você deseja oferecer a outros usuários.

59
00:04:19,950 --> 00:04:22,810
Então, como eu disse, a loja é basicamente o que já vemos.

60
00:04:22,830 --> 00:04:31,500
Agora, se tocarmos em pedidos, bem, eu quero ser levado para uma tela onde, é claro, também podemos abrir a gaveta,

61
00:04:31,500 --> 00:04:34,540
porque isso nos permitirá voltar, mas

62
00:04:34,590 --> 00:04:40,530
nessa tela, devemos ver os pedidos em que basicamente temos itens onde nós meio

63
00:04:40,960 --> 00:04:49,800
que vemos como a soma dessa ordem, a data e também um botão onde podemos tocar onde vemos mais detalhes e,

64
00:04:49,800 --> 00:04:56,850
se tocarmos nesse botão, temos essa área opcional que abre ou fecha e lá dentro, eu basicamente,

65
00:04:56,860 --> 00:05:02,040
queremos ver os itens do pedido, basicamente o que tínhamos no carrinho.

66
00:05:02,040 --> 00:05:09,810
Então, tínhamos dois livros aqui com um preço de 19, por exemplo, bem, isso apareceria aqui na área de

67
00:05:09,810 --> 00:05:11,590
detalhes quando abrirmos isso.

68
00:05:11,610 --> 00:05:12,490
Portanto, essa é

69
00:05:12,540 --> 00:05:13,230
a ideia

70
00:05:13,230 --> 00:05:18,030
aqui no pedido, podemos expandir um pedido para não apenas ver a soma e a data, mas também

71
00:05:18,030 --> 00:05:19,200
os itens do carrinho

72
00:05:19,230 --> 00:05:23,720
que colocamos lá basicamente, então basicamente o que tínhamos aqui no carrinho, que está aparecendo nas ordens.

73
00:05:23,960 --> 00:05:25,380
Então essa é a

74
00:05:25,380 --> 00:05:33,480
tela de pedidos, também gerenciamos produtos e vamos desenhar isso aqui, talvez. Produtos gerenciados é outra área deste aplicativo, na qual também temos

75
00:05:33,480 --> 00:05:40,620
esse botão de menu para abrir a gaveta novamente, para que possamos alcançar as outras partes do aplicativo, mas

76
00:05:40,620 --> 00:05:47,130
aqui na tela de produtos gerenciados, onde temos nossos próprios produtos, para que os produtos dos usuários

77
00:05:47,280 --> 00:05:52,980
e neste aplicativo, não adicionaremos autenticação ainda, mas adicionaremos mais tarde, mas aqui, temos nossos

78
00:05:53,340 --> 00:05:55,380
próprios produtos. Aqui, novamente,

79
00:05:55,380 --> 00:06:01,290
a ideia é que basicamente vemos uma lista de produtos muito próxima do que vemos aqui na

80
00:06:01,350 --> 00:06:08,790
tela da loja, para que gostemos de nossos cartões aqui com uma imagem, com o título e o preço, talvez, então pode

81
00:06:08,790 --> 00:06:11,980
reutilizar esta lista aqui provavelmente, mas é claro que

82
00:06:12,510 --> 00:06:18,720
as opções que temos em cada produto são diferentes. Em vez de adicioná-lo a um

83
00:06:18,720 --> 00:06:22,400
carrinho e visualizar os detalhes, podemos excluí-lo, esse

84
00:06:22,440 --> 00:06:28,710
é um botão e também podemos editá-lo. É claro que só podemos editar nossos próprios produtos, mas novamente,

85
00:06:28,710 --> 00:06:35,400
não teremos nenhum mapeamento de usuário real aqui, podemos fazer isso com algum ID de usuário fictício que anexamos a cada produto,

86
00:06:35,730 --> 00:06:37,470
mas é isso por enquanto.

87
00:06:37,530 --> 00:06:39,330
Portanto, temos o botão editar

88
00:06:39,330 --> 00:06:41,920
e excluir, agora, além disso aqui no cabeçalho, por

89
00:06:41,940 --> 00:06:47,640
isso precisamos de mais espaço aqui, no cabeçalho também teremos um botão de ação que nos permite adicionar um

90
00:06:47,640 --> 00:06:48,390
novo produto.

91
00:06:48,390 --> 00:06:53,310
Então, basicamente, isso deveria ser um pouco mais amplo aqui, eu desenhei isso muito estreito.

92
00:06:53,340 --> 00:07:00,030
Portanto, temos este botão de ação aqui e este botão de ação aqui, este botão de adição, que deve nos

93
00:07:00,030 --> 00:07:02,480
levar a uma nova página onde podemos

94
00:07:02,490 --> 00:07:12,630
adicionar um novo produto; portanto, isso nos levará à página de produtos adicionados aqui, onde é claro que podemos ir para trás e para lá, podemos adicionar um novo produto e

95
00:07:12,720 --> 00:07:19,720
isso nos permite adicionar um título aqui com uma entrada de texto e essa entrada de texto também pode estar abaixo

96
00:07:19,720 --> 00:07:23,650
do rótulo do título, você pode criar isso da maneira que quiser.

97
00:07:23,670 --> 00:07:25,770
Deveríamos poder adicionar o

98
00:07:25,890 --> 00:07:32,390
preço, podermos adicionar descrição aqui, pode haver uma entrada de várias linhas aqui,

99
00:07:32,400 --> 00:07:36,530
é claro que também precisamos adicionar um imageUrl.

100
00:07:36,570 --> 00:07:41,460
Então é isso que podemos adicionar aqui e, em seguida, precisamos de um botão aqui na barra de ação, um botão de marca

101
00:07:41,460 --> 00:07:46,440
de seleção ou qualquer coisa assim que nos permita confirmar isso. Não vamos nos importar muito com toda essa manipulação

102
00:07:46,440 --> 00:07:47,120
de

103
00:07:47,130 --> 00:07:52,230
entrada de usuário aqui neste estágio, porque eu terei um módulo separado, onde eu vou detalhar todos os detalhes,

104
00:07:52,530 --> 00:07:57,330
como você pode fazer isso de uma maneira elegante, como adicionar validação, portanto, neste aplicativo, manteremos isso

105
00:07:57,330 --> 00:08:00,870
muito básico, não verificaremos se o usuário digitou algo correto ou algo parecido,

106
00:08:00,870 --> 00:08:02,350
faremos isso posteriormente no curso.

107
00:08:02,430 --> 00:08:07,470
Aqui, reunimos essa entrada básica quando este botão aqui, este botão de marca de seleção aqui

108
00:08:07,830 --> 00:08:13,560
é pressionado, voltamos a esta página e, é claro, usamos o Redux em nosso sistema de gerenciamento de estado

109
00:08:13,560 --> 00:08:20,100
para adicionar um novo produto à lista de produtos que então também aparece aqui em nossa loja e que aparece aqui em

110
00:08:20,100 --> 00:08:23,280
nossa lista de produtos, é claro, que podemos administrar.

111
00:08:23,340 --> 00:08:24,420
Então é isso que temos aqui.

112
00:08:24,480 --> 00:08:32,100
Agora, se tocarmos em editar aqui, se selecionarmos este botão de edição aqui, também seremos levados para a mesma página

113
00:08:32,100 --> 00:08:40,410
de edição de produto, mas é claro que agora temos alguns valores pré-preenchidos aqui, pré-preenchidos com o produto que carregamos e há

114
00:08:40,770 --> 00:08:43,110
certos campos que não podemos editar,

115
00:08:43,110 --> 00:08:49,080
por exemplo, o preço não deve ser editável, porque se o preço fosse editável, se já

116
00:08:49,080 --> 00:08:51,230
o tivéssemos no carrinho, isso

117
00:08:51,480 --> 00:08:54,390
seria um problema; portanto, não permitiremos editar o

118
00:08:54,390 --> 00:08:57,840
preço aqui, permitirá editar o título, a descrição e

119
00:08:57,930 --> 00:09:00,210
o imageUrl, então isso é possível.

120
00:09:00,210 --> 00:09:01,210
Portanto, essa é

121
00:09:01,260 --> 00:09:04,180
a única diferença: temos campos pré-preenchidos e o preço não é editável.

122
00:09:04,260 --> 00:09:09,840
Se pressionarmos a marca de seleção no modo de edição e podemos descobrir se estamos editando ou não

123
00:09:09,840 --> 00:09:14,220
pelo fato de termos recebido um ID do produto como parâmetro, por exemplo, assim

124
00:09:14,220 --> 00:09:20,100
que terminarmos de editar, podemos pressionar o ícone da marca de seleção e depois também somos recuperados e simplesmente

125
00:09:20,100 --> 00:09:23,660
salvamos o que editamos aqui de volta ao nosso produto.

126
00:09:23,670 --> 00:09:25,780
Este é o aplicativo aqui.

127
00:09:25,890 --> 00:09:30,700
Como mencionei, isso também servirá de base para os módulos subseqüentes; também

128
00:09:30,700 --> 00:09:38,100
adicionaremos solicitação HTTP e autenticação; faremos toda a validação desse formulário aqui de uma maneira mais elegante e assim

129
00:09:38,100 --> 00:09:40,020
por diante, mas esse

130
00:09:40,050 --> 00:09:46,110
módulo aqui agora é uma ótima prática de como criar um aplicativo, como trabalhar com

131
00:09:46,200 --> 00:09:51,240
componentes, estilizá-los, como adicionar navegação, porque obviamente temos muita navegação nesse aplicativo e

132
00:09:51,240 --> 00:09:54,940
como gerenciar nosso estado nesse aplicativo de compras.

133
00:09:55,020 --> 00:09:59,850
Como mencionei na última palestra, você pode pular este módulo, mas definitivamente deve mergulhar no código

134
00:09:59,850 --> 00:10:05,100
final para poder acompanhar os próximos módulos, mas minha recomendação é que você a) tente tudo isso por

135
00:10:05,100 --> 00:10:10,840
conta própria e, é claro, seu resultado não será o mesmo que eu recebo, então você definitivamente também deve assistir

136
00:10:10,860 --> 00:10:16,230
meus vídeos depois para ver como eu fiz isso e para que você tenha a mesma base de

137
00:10:16,230 --> 00:10:18,360
código a seguir, mas essa será uma

138
00:10:18,360 --> 00:10:23,280
ótima prática mesmo que seu resultado chegue primeiro porque não existe uma abordagem correta ou errada

139
00:10:23,280 --> 00:10:28,890
necessariamente ou b) sua outra opção, é claro, é que você não tente por conta própria e apenas siga

140
00:10:28,890 --> 00:10:29,870
adiante, também uma

141
00:10:29,970 --> 00:10:34,830
opção válida, mas acredito que você aproveite um pouco mais o curso se tentar por conta

142
00:10:34,830 --> 00:10:35,490
própria

143
00:10:35,490 --> 00:10:40,080
primeiro, mas no final, faça o que quiser. Na próxima palestra, abordaremos isso e começaremos a criar este

144
00:10:40,080 --> 00:10:40,500
aplicativo.