Para este módulo e para este aplicativo que
estamos construindo, novamente você encontrará um projeto inicial anexado a esta palestra, que pode ser usado para começar
ou criar um novo aplicativo de exposição por conta própria, é claro.
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
importa, porque não manteremos esse texto de qualquer maneira e
só temos esse aplicativo. arquivo js.
Agora, muitas das coisas que faço neste módulo serão as que você viu nos módulos anteriores, porque obviamente essa
é a ideia principal aqui.
Praticaremos o que aprendemos até agora e haverá algumas coisas novas ou alguns padrões que também
podem ser interessantes para você.
Agora, é claro, neste aplicativo que eu esboçamos na última palestra, teremos duas telas, portanto, definitivamente precisaremos de navegação
e, portanto, adicionarei uma pasta de navegação para que eu possa armazenar minha configuração de navegação lá
e é claro que é apenas
uma configuração possível, como mencionei antes, você pode trabalhar com
qualquer estrutura de pastas que desejar e que funcione para você. Além da pasta de navegação, eu também
quero ter
uma pasta de telas aqui, nessa pasta de telas também quero armazenar
as telas pelas quais podemos navegar e adicionarei uma pasta de componentes para todos os
meus componentes regulares, é claro que
as telas também são React componentes, mas os componentes normais, quero dizer, aqui estão
os componentes que não carregamos diretamente como telas, mas que incorporamos nas telas ou em
outros componentes, então é isso que teremos aqui. Também adicionarei uma pasta de constantes porque, novamente,
trabalharei com minhas constantes de cores aqui para poder usar minhas cores pré-selecionadas em todo o aplicativo.
Agora, existem várias maneiras diferentes de começar. O que eu gosto de fazer primeiro em meus aplicativos é
que eu começo com as
telas, mesmo que eu ainda não adicione o conteúdo a todas elas, eu gosto de adicionar essa descrição geral. estrutura
para que eu possa sempre ver no que ainda preciso trabalhar, quais recursos ainda estão faltando.
Portanto, adicionarei as telas que terei neste aplicativo e
aqui farei algo que nunca fiz antes e que é totalmente opcional, mas organizarei
minhas telas em subpastas separadas.
Vou ter uma pasta com as telas relacionadas à minha loja
e, é claro, já que criaremos um aplicativo de compras, todas as telas são do tipo relacionadas
à loja, mas aqui eu quero ter as telas que nos ajudam diretamente a visualizar nossos produtos e
adicioná-los
ao carrinho e assim por diante, e depois quero ter uma pasta separada e essa é a minha pasta de usuário, você poderia
dizer, lá quero ter as telas
relacionadas ao usuário, para que sejam meus produtos de usuário e produtos administrativos.
É assim que vou dividir isso,
mas é claro que você pode organizar o que quiser.
Portanto, na pasta da loja aqui, por exemplo, quero ter a tela de visão geral dos meus produtos e essa será a
tela que vemos quando o aplicativo é carregado, onde temos todos os produtos para trabalhar e onde podemos
selecionar um produto ou adicioná-lo diretamente para o carrinho. Portanto, também precisaremos de uma tela de detalhes do produto, que é
a tela que vemos quando selecionamos um produto e queremos aprender mais sobre ele. Em seguida, podemos clicar nele ou
tocar nele e ser direcionados para a tela de detalhes. Também precisaremos de uma tela de carrinho, que é surpreendente a tela
que vemos quando adicionamos um item ao carrinho ou não, o que vemos, mas que podemos visitar para ver o
item
lá, então é algo que
podemos fazer lá e eu ' Também adicionamos uma tela de pedidos, na qual podemos ver nossos pedidos.
Agora, a propósito, você poderia argumentar que a tela do carrinho e a tela do pedido pertencem à
pasta do usuário porque são exclusivas do usuário, todo usuário tem seus
próprios pedidos e seu próprio carrinho e, portanto, você pode ir para qualquer um dos dois, Acredito
que eles estejam um pouco mais relacionados ao produto da loja, mas,
novamente, isso depende totalmente de você. Na pasta do usuário,
quero ter a tela dos meus produtos para o usuário, para que seja a tela em que vejo uma lista
de todos os produtos que pertencem a esse usuário e a tela de edição do produto, que será a tela que usaremos
para adicionar novos produtos ou para
editar produtos existentes, poderemos reutilizar isso.
Essas são as telas nas quais
trabalharemos ao longo deste módulo e não as preencheremos com vida imediatamente, agora trabalharemos passo a
passo,
mas é disso que precisamos.
Agora, é claro, também existe uma outra pasta que podemos adicionar e essa é a
pasta da loja onde gerenciaremos nossa loja Redux e nosso estado Redux, portanto, qual é o nosso sistema de
gerenciamento de estado. Quero trabalhar com o qual, é claro, precisamos, porque temos muitos telas em que todos
precisam trabalhar com o tipo de dados relacionados e, portanto, precisamos gerenciar esses dados, nossos produtos e o que está no carrinho
e assim
por diante, em algum nível global, e o Redux é
realmente ótimo para isso, então definitivamente precisaremos disso . Na mesma nota, também precisamos instalar alguns pacotes, portanto,
executarei o npm install --save e instale o Redux e também o React Redux. Também precisaremos da navegação React, porque,
é claro, adicionaremos a navegação novamente, para que possamos lançar isso lá.
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
bem posicionados e com estilo, sem ter que fazer todo esse posicionamento de estilo
por conta própria e que deve ser por enquanto.
Portanto, já instalarei todos esses pacotes, precisaremos deles ao longo deste módulo
e, com esses pacotes instalados e esses arquivos básicos criados, temos uma configuração básica sólida para começar.
Agora, além desses pacotes, também precisamos instalar outros dois pacotes
com a ajuda do comando expo install e isso é react-native-gesto-manipulador, portanto, expo install React-native-gesto-manipulador
e também o pacote react-native-reanimated . Ambos os pacotes também precisam ser instalados
com o comando expo install.
Agora, é claro, trata-se de preencher isso com vida e, aí, eu
quero começar com a primeira tela que veremos qual é a tela de visão geral dos produtos.