Então, vamos
planejar o aplicativo que criaremos e criaremos um aplicativo básico de compras, uma loja
online básica em um aplicativo que você poderia dizer. Portanto, nesta aplicação aqui, precisaremos definitivamente de um monte de produtos
que
podem ser listados, por isso teremos uma tela de visão geral do produto em que vemos esses cartões com
nossos produtos, com uma imagem, com o título e o preço talvez algo assim e também
um botão de carrinho ou adicionar ao carrinho e um botão de detalhes, basicamente um botão que nos permite acessar
uma página de detalhes e um botão que nos permite adicionar isso
a um carrinho.
Como se você tocar neste botão de carrinho aqui,
então se você selecionar esse botão de carrinho, ele será adicionado a um carrinho e você poderá alcançá-lo com
um botão de ação aqui na barra
de ação, portanto, no cabeçalho superior, lá eu quer ter um ícone desse
carrinho, provavelmente um pouco melhor do que o que eu desenhei aqui, mas esse ícone aqui no final
nos permite ir para uma página separada posteriormente, uma tela separada desse aplicativo, onde é claro que
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
de nossos itens como um livro e quanto custa
esse custo e
algo assim.
Então, basicamente, vemos nosso carrinho aqui, vemos uma soma disso e,
em seguida, vemos os itens individuais e,
claro, também quero ter um botão que permita que eu encomende o que está no carrinho e, na verdade, esse
botão não deve estar abaixo deste , então aqui teremos
um botão de pedido.
Na verdade, isso deve estar
aqui, então aqui eu quero ter uma linha em que tenhamos a soma total e, ao lado, o botão de pedidos.
Portanto, esse é
basicamente o objetivo, mas você
pode colocá-lo onde quiser, no final, queremos um botão que nos permita solicitar o que temos
no
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.
Então, onde isso faz um pedido, esse ícone aqui basicamente exclui um item do
carrinho.
Então essa
é a ideia, é claro, se você adicionar o mesmo item várias vezes ao carrinho, não deverá adicionar
várias linhas para isso, mas aqui também quero mostrar como uma quantidade do item que simplesmente aumenta se o adicionarmos mais frequentemente
ao carrinho e que diminui se o excluirmos até que todos os itens sejam excluídos. Nesse caso,
a linha inteira será excluída aqui.
É assim que esta página
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
em geral, portanto, em qualquer lugar da imagem ou
qualquer coisa assim, devemos ser levados a um página de detalhes.
Portanto, essa é outra tela nesta aplicação, onde é claro que também podemos voltar.
Essa é a página de detalhes do
ícone onde devemos ver a imagem, provavelmente devemos ver como
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
também queremos ter um botão de carrinho de compras, onde também podemos adicionar
itens ao carrinho aqui. Esse é o fluxo referente aos nossos produtos que
temos aqui. Agora,
o importante neste aplicativo será que não podemos apenas ver os produtos, comprá-los e adicioná-los
ao carrinho e assim por diante, mas é claro que também podemos ver nossos pedidos e, mais importante,
que também podemos adicionar novos produtos.
Portanto, aqui, precisamos de uma gaveta e esta nos apresentará algumas opções. Agora, a primeira opção, é claro, é
irmos à nossa loja, por assim dizer, é nessa parte que estamos aqui quando o
aplicativo é iniciado.
A segunda opção deve ser
nossos pedidos e a terceira deve ser como uma opção de gerenciamento de produtos, onde podemos gerenciar nossos próprios produtos
que você deseja oferecer a outros usuários.
Então, como eu disse, a loja é basicamente o que já vemos.
Agora, se tocarmos em pedidos, bem, eu quero ser levado para uma tela onde, é claro, também podemos abrir a gaveta,
porque isso nos permitirá voltar, mas
nessa tela, devemos ver os pedidos em que basicamente temos itens onde nós meio
que vemos como a soma dessa ordem, a data e também um botão onde podemos tocar onde vemos mais detalhes e,
se tocarmos nesse botão, temos essa área opcional que abre ou fecha e lá dentro, eu basicamente,
queremos ver os itens do pedido, basicamente o que tínhamos no carrinho.
Então, tínhamos dois livros aqui com um preço de 19, por exemplo, bem, isso apareceria aqui na área de
detalhes quando abrirmos isso.
Portanto, essa é
a ideia
aqui no pedido, podemos expandir um pedido para não apenas ver a soma e a data, mas também
os itens do carrinho
que colocamos lá basicamente, então basicamente o que tínhamos aqui no carrinho, que está aparecendo nas ordens.
Então essa é a
tela de pedidos, também gerenciamos produtos e vamos desenhar isso aqui, talvez. Produtos gerenciados é outra área deste aplicativo, na qual também temos
esse botão de menu para abrir a gaveta novamente, para que possamos alcançar as outras partes do aplicativo, mas
aqui na tela de produtos gerenciados, onde temos nossos próprios produtos, para que os produtos dos usuários
e neste aplicativo, não adicionaremos autenticação ainda, mas adicionaremos mais tarde, mas aqui, temos nossos
próprios produtos. Aqui, novamente,
a ideia é que basicamente vemos uma lista de produtos muito próxima do que vemos aqui na
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
reutilizar esta lista aqui provavelmente, mas é claro que
as opções que temos em cada produto são diferentes. Em vez de adicioná-lo a um
carrinho e visualizar os detalhes, podemos excluí-lo, esse
é um botão e também podemos editá-lo. É claro que só podemos editar nossos próprios produtos, mas novamente,
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,
mas é isso por enquanto.
Portanto, temos o botão editar
e excluir, agora, além disso aqui no cabeçalho, por
isso precisamos de mais espaço aqui, no cabeçalho também teremos um botão de ação que nos permite adicionar um
novo produto.
Então, basicamente, isso deveria ser um pouco mais amplo aqui, eu desenhei isso muito estreito.
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
levar a uma nova página onde podemos
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
isso nos permite adicionar um título aqui com uma entrada de texto e essa entrada de texto também pode estar abaixo
do rótulo do título, você pode criar isso da maneira que quiser.
Deveríamos poder adicionar o
preço, podermos adicionar descrição aqui, pode haver uma entrada de várias linhas aqui,
é claro que também precisamos adicionar um imageUrl.
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
de seleção ou qualquer coisa assim que nos permita confirmar isso. Não vamos nos importar muito com toda essa manipulação
de
entrada de usuário aqui neste estágio, porque eu terei um módulo separado, onde eu vou detalhar todos os detalhes,
como você pode fazer isso de uma maneira elegante, como adicionar validação, portanto, neste aplicativo, manteremos isso
muito básico, não verificaremos se o usuário digitou algo correto ou algo parecido,
faremos isso posteriormente no curso.
Aqui, reunimos essa entrada básica quando este botão aqui, este botão de marca de seleção aqui
é pressionado, voltamos a esta página e, é claro, usamos o Redux em nosso sistema de gerenciamento de estado
para adicionar um novo produto à lista de produtos que então também aparece aqui em nossa loja e que aparece aqui em
nossa lista de produtos, é claro, que podemos administrar.
Então é isso que temos aqui.
Agora, se tocarmos em editar aqui, se selecionarmos este botão de edição aqui, também seremos levados para a mesma página
de edição de produto, mas é claro que agora temos alguns valores pré-preenchidos aqui, pré-preenchidos com o produto que carregamos e há
certos campos que não podemos editar,
por exemplo, o preço não deve ser editável, porque se o preço fosse editável, se já
o tivéssemos no carrinho, isso
seria um problema; portanto, não permitiremos editar o
preço aqui, permitirá editar o título, a descrição e
o imageUrl, então isso é possível.
Portanto, essa é
a única diferença: temos campos pré-preenchidos e o preço não é editável.
Se pressionarmos a marca de seleção no modo de edição e podemos descobrir se estamos editando ou não
pelo fato de termos recebido um ID do produto como parâmetro, por exemplo, assim
que terminarmos de editar, podemos pressionar o ícone da marca de seleção e depois também somos recuperados e simplesmente
salvamos o que editamos aqui de volta ao nosso produto.
Este é o aplicativo aqui.
Como mencionei, isso também servirá de base para os módulos subseqüentes; também
adicionaremos solicitação HTTP e autenticação; faremos toda a validação desse formulário aqui de uma maneira mais elegante e assim
por diante, mas esse
módulo aqui agora é uma ótima prática de como criar um aplicativo, como trabalhar com
componentes, estilizá-los, como adicionar navegação, porque obviamente temos muita navegação nesse aplicativo e
como gerenciar nosso estado nesse aplicativo de compras.
Como mencionei na última palestra, você pode pular este módulo, mas definitivamente deve mergulhar no código
final para poder acompanhar os próximos módulos, mas minha recomendação é que você a) tente tudo isso por
conta própria e, é claro, seu resultado não será o mesmo que eu recebo, então você definitivamente também deve assistir
meus vídeos depois para ver como eu fiz isso e para que você tenha a mesma base de
código a seguir, mas essa será uma
ótima prática mesmo que seu resultado chegue primeiro porque não existe uma abordagem correta ou errada
necessariamente ou b) sua outra opção, é claro, é que você não tente por conta própria e apenas siga
adiante, também uma
opção válida, mas acredito que você aproveite um pouco mais o curso se tentar por conta
própria
primeiro, mas no final, faça o que quiser. Na próxima palestra, abordaremos isso e começaremos a criar este
aplicativo.