1 00:00:02,160 --> 00:00:05,140 Para este módulo e para este aplicativo que 2 00:00:05,160 --> 00:00:11,310 estamos construindo, novamente você encontrará um projeto inicial anexado a esta palestra, que pode ser usado para começar 3 00:00:11,310 --> 00:00:15,480 ou criar um novo aplicativo de exposição por conta própria, é claro. 4 00:00:15,480 --> 00:00:21,300 Agora, esse é o aplicativo que eu anexei, um aplicativo muito básico. Eu sou o seu aplicativo, que mal podemos ver, o que não 5 00:00:21,330 --> 00:00:23,980 importa, porque não manteremos esse texto de qualquer maneira e 6 00:00:24,160 --> 00:00:26,370 só temos esse aplicativo. arquivo js. 7 00:00:26,430 --> 00:00:32,130 Agora, muitas das coisas que faço neste módulo serão as que você viu nos módulos anteriores, porque obviamente essa 8 00:00:32,130 --> 00:00:33,660 é a ideia principal aqui. 9 00:00:33,660 --> 00:00:39,480 Praticaremos o que aprendemos até agora e haverá algumas coisas novas ou alguns padrões que também 10 00:00:39,480 --> 00:00:41,710 podem ser interessantes para você. 11 00:00:41,730 --> 00:00:47,160 Agora, é claro, neste aplicativo que eu esboçamos na última palestra, teremos duas telas, portanto, definitivamente precisaremos de navegação 12 00:00:47,160 --> 00:00:52,230 e, portanto, adicionarei uma pasta de navegação para que eu possa armazenar minha configuração de navegação lá 13 00:00:52,230 --> 00:00:54,380 e é claro que é apenas 14 00:00:54,420 --> 00:00:57,480 uma configuração possível, como mencionei antes, você pode trabalhar com 15 00:00:57,480 --> 00:01:03,690 qualquer estrutura de pastas que desejar e que funcione para você. Além da pasta de navegação, eu também 16 00:01:03,690 --> 00:01:04,740 quero ter 17 00:01:04,740 --> 00:01:09,690 uma pasta de telas aqui, nessa pasta de telas também quero armazenar 18 00:01:09,690 --> 00:01:15,660 as telas pelas quais podemos navegar e adicionarei uma pasta de componentes para todos os 19 00:01:15,660 --> 00:01:18,460 meus componentes regulares, é claro que 20 00:01:18,520 --> 00:01:24,450 as telas também são React componentes, mas os componentes normais, quero dizer, aqui estão 21 00:01:24,450 --> 00:01:30,720 os componentes que não carregamos diretamente como telas, mas que incorporamos nas telas ou em 22 00:01:30,720 --> 00:01:37,500 outros componentes, então é isso que teremos aqui. Também adicionarei uma pasta de constantes porque, novamente, 23 00:01:37,500 --> 00:01:43,860 trabalharei com minhas constantes de cores aqui para poder usar minhas cores pré-selecionadas em todo o aplicativo. 24 00:01:43,880 --> 00:01:49,280 Agora, existem várias maneiras diferentes de começar. O que eu gosto de fazer primeiro em meus aplicativos é 25 00:01:49,280 --> 00:01:51,020 que eu começo com as 26 00:01:51,020 --> 00:01:56,870 telas, mesmo que eu ainda não adicione o conteúdo a todas elas, eu gosto de adicionar essa descrição geral. estrutura 27 00:01:56,870 --> 00:02:01,570 para que eu possa sempre ver no que ainda preciso trabalhar, quais recursos ainda estão faltando. 28 00:02:01,880 --> 00:02:04,980 Portanto, adicionarei as telas que terei neste aplicativo e 29 00:02:05,180 --> 00:02:09,890 aqui farei algo que nunca fiz antes e que é totalmente opcional, mas organizarei 30 00:02:09,890 --> 00:02:12,120 minhas telas em subpastas separadas. 31 00:02:12,170 --> 00:02:15,770 Vou ter uma pasta com as telas relacionadas à minha loja 32 00:02:15,770 --> 00:02:20,930 e, é claro, já que criaremos um aplicativo de compras, todas as telas são do tipo relacionadas 33 00:02:20,930 --> 00:02:26,540 à loja, mas aqui eu quero ter as telas que nos ajudam diretamente a visualizar nossos produtos e 34 00:02:26,540 --> 00:02:27,120 adicioná-los 35 00:02:27,530 --> 00:02:34,430 ao carrinho e assim por diante, e depois quero ter uma pasta separada e essa é a minha pasta de usuário, você poderia 36 00:02:34,430 --> 00:02:36,400 dizer, lá quero ter as telas 37 00:02:36,470 --> 00:02:40,370 relacionadas ao usuário, para que sejam meus produtos de usuário e produtos administrativos. 38 00:02:40,440 --> 00:02:42,590 É assim que vou dividir isso, 39 00:02:42,590 --> 00:02:45,950 mas é claro que você pode organizar o que quiser. 40 00:02:45,950 --> 00:02:52,670 Portanto, na pasta da loja aqui, por exemplo, quero ter a tela de visão geral dos meus produtos e essa será a 41 00:02:52,760 --> 00:02:58,340 tela que vemos quando o aplicativo é carregado, onde temos todos os produtos para trabalhar e onde podemos 42 00:02:58,340 --> 00:03:04,880 selecionar um produto ou adicioná-lo diretamente para o carrinho. Portanto, também precisaremos de uma tela de detalhes do produto, que é 43 00:03:04,880 --> 00:03:10,520 a tela que vemos quando selecionamos um produto e queremos aprender mais sobre ele. Em seguida, podemos clicar nele ou 44 00:03:10,520 --> 00:03:16,940 tocar nele e ser direcionados para a tela de detalhes. Também precisaremos de uma tela de carrinho, que é surpreendente a tela 45 00:03:16,940 --> 00:03:22,430 que vemos quando adicionamos um item ao carrinho ou não, o que vemos, mas que podemos visitar para ver o 46 00:03:22,430 --> 00:03:23,000 item 47 00:03:23,000 --> 00:03:24,440 lá, então é algo que 48 00:03:25,470 --> 00:03:30,600 podemos fazer lá e eu ' Também adicionamos uma tela de pedidos, na qual podemos ver nossos pedidos. 49 00:03:30,600 --> 00:03:35,730 Agora, a propósito, você poderia argumentar que a tela do carrinho e a tela do pedido pertencem à 50 00:03:35,730 --> 00:03:39,450 pasta do usuário porque são exclusivas do usuário, todo usuário tem seus 51 00:03:39,450 --> 00:03:44,340 próprios pedidos e seu próprio carrinho e, portanto, você pode ir para qualquer um dos dois, Acredito 52 00:03:44,340 --> 00:03:47,970 que eles estejam um pouco mais relacionados ao produto da loja, mas, 53 00:03:47,970 --> 00:03:51,960 novamente, isso depende totalmente de você. Na pasta do usuário, 54 00:03:51,960 --> 00:03:58,980 quero ter a tela dos meus produtos para o usuário, para que seja a tela em que vejo uma lista 55 00:03:59,040 --> 00:04:06,570 de todos os produtos que pertencem a esse usuário e a tela de edição do produto, que será a tela que usaremos 56 00:04:06,690 --> 00:04:08,710 para adicionar novos produtos ou para 57 00:04:08,730 --> 00:04:10,940 editar produtos existentes, poderemos reutilizar isso. 58 00:04:11,160 --> 00:04:13,490 Essas são as telas nas quais 59 00:04:13,500 --> 00:04:20,280 trabalharemos ao longo deste módulo e não as preencheremos com vida imediatamente, agora trabalharemos passo a 60 00:04:20,280 --> 00:04:20,990 passo, 61 00:04:21,000 --> 00:04:23,090 mas é disso que precisamos. 62 00:04:23,220 --> 00:04:27,450 Agora, é claro, também existe uma outra pasta que podemos adicionar e essa é a 63 00:04:27,450 --> 00:04:32,820 pasta da loja onde gerenciaremos nossa loja Redux e nosso estado Redux, portanto, qual é o nosso sistema de 64 00:04:32,820 --> 00:04:38,070 gerenciamento de estado. Quero trabalhar com o qual, é claro, precisamos, porque temos muitos telas em que todos 65 00:04:38,070 --> 00:04:44,280 precisam trabalhar com o tipo de dados relacionados e, portanto, precisamos gerenciar esses dados, nossos produtos e o que está no carrinho 66 00:04:44,280 --> 00:04:45,090 e assim 67 00:04:45,090 --> 00:04:48,200 por diante, em algum nível global, e o Redux é 68 00:04:48,240 --> 00:04:53,520 realmente ótimo para isso, então definitivamente precisaremos disso . Na mesma nota, também precisamos instalar alguns pacotes, portanto, 69 00:04:53,550 --> 00:05:00,900 executarei o npm install --save e instale o Redux e também o React Redux. Também precisaremos da navegação React, porque, 70 00:05:00,900 --> 00:05:07,480 é claro, adicionaremos a navegação novamente, para que possamos lançar isso lá. 71 00:05:07,500 --> 00:05:14,540 Também já adicionarei botões de cabeçalho de navegação React, porque adicionarei botões de cabeçalho aqui e quero ter esses botões 72 00:05:14,550 --> 00:05:19,380 bem posicionados e com estilo, sem ter que fazer todo esse posicionamento de estilo 73 00:05:19,380 --> 00:05:22,650 por conta própria e que deve ser por enquanto. 74 00:05:22,950 --> 00:05:28,770 Portanto, já instalarei todos esses pacotes, precisaremos deles ao longo deste módulo 75 00:05:28,770 --> 00:05:36,570 e, com esses pacotes instalados e esses arquivos básicos criados, temos uma configuração básica sólida para começar. 76 00:05:36,580 --> 00:05:41,820 Agora, além desses pacotes, também precisamos instalar outros dois pacotes 77 00:05:41,820 --> 00:05:49,050 com a ajuda do comando expo install e isso é react-native-gesto-manipulador, portanto, expo install React-native-gesto-manipulador 78 00:05:49,050 --> 00:05:55,800 e também o pacote react-native-reanimated . Ambos os pacotes também precisam ser instalados 79 00:05:55,980 --> 00:05:58,800 com o comando expo install. 80 00:05:58,860 --> 00:06:02,100 Agora, é claro, trata-se de preencher isso com vida e, aí, eu 81 00:06:02,190 --> 00:06:06,720 quero começar com a primeira tela que veremos qual é a tela de visão geral dos produtos.