Sobre • MyShop • Instalação • Tecnologias • Autor

Projeto desenvolvido durante o bootcamp Ignite da Rocketseat na trilha de React Native. O app foi proposto durante o módulo de fundamentos do Firebase no React Native.

O MyShop é um app de lista de compras e gerenciamento de comprovantes de pagamento criado com React Native, Firebase e Typescript.

O app possui funcionalidades para suprir necessidades de gerenciar dois tipos de dados:

• Lista de produtos a serem comprados.
• Comprovantes de pagamentos.

Para isso o app conta com algumas funcionalidades interessantes as quais serão apresentadas a seguir.

Ao acessar o app o usuário será direcionado para a tela de login, onde poderá:

• Realizar login com seu e-mail e senha.
• Alterar sua senha:
  • Para isso basta ele digitar o e-mail no input de e-mail e clicar em Recuperar senha.
• Cadastrar-se na aplicação:
  • Para isso basta informar e-mail e senha nos respectivos campos e clicar no botão Criar minha conta.

Sabendo disso, deixo um screenshot das telas que pertencem ao fluxo de autenticação explicado acima e alguns alertas dados ao usuário dentro desse fluxo:

Tela de Login	Alerta e-mail duplicado	Alerta recuperação de senha	Alerta cadastro realizado

Após realizar login com sucesso, o usuário é direcionado para a home do aplicativo aonde poderá visualizar os itens cadastrados na sua lista de compras, cadastrar novos ou navegar para outras funcionalidades do app clicando nas opções presentes no menu inferior.

Para cadastrar um item basta informar o nome do produto e a quantidade à ser comprada e clicar no botão verde. Com isso o item já estará na lista e o usuário já poderá gerencia-lo ou adicionar novos itens. Na lista de itens, cada um deles possui dois botões no canto direito, onde:

• Botão verde dá o item como comprando.
  • Com isso o item receberá um risco indicando que a quantidade previamente cadastrada já foi comprada.
  • Após o clique o ícone do botão irá mudar para indicar que a ação é reversível e o usuário pode reverter a sinalização de compra a qualquer momento.
• Botão vermelho remove o item da lista.

Lista de itens	Lista de itens com itens comprados

Agora que conhecemos a aba Produtos, vamos conhecer a aba seguinte: Comprovantes. Seu objetivo é centralizar e tornar acessíveis os comprovantes de compras cadastrados pelo usuário para eventuais consultas. Nessa tela teremos as funcionalidades:

• Listagem de comprovantes cadastrados.
• Visualização de um comprovante.
  • Disponível através do clique no botão verde na parte direita do card dos comprovantes.
• Exclusão de um comprovante.
  • Disponível através do clique no botão vermelho na parte direita do card dos comprovantes.

Para ilustrar cada uma dessas atividades deixo abaixo screenshots dessa parte da aplicação:

Tela de comprovantes (vazia)	Tela de comprovantes	Visualização do comprovante	Exclusão de um comprovante

Agora que conhecemos a aba de comprovantes vamos a ultima aba da aplicação: Upload. Como o próprio nome sugere, é nessa página que o cadastro dos comprovantes ocorre. Aqui o fluxo é tão simples quanto:

1. Clicar no quadro pontilhado.
2. Selecionar a imagem do comprovante desejado.
3. Clicar no botão verde para fazer upload do comprovante.

Tela de upload	Comprovante selecionado	Mensagem upload concluído	Upload Finalizado

Afim de ilustrar tudo que foi explicado até aqui, deixo o GIF abaixo onde navego por toda a aplicação com o intuito de mostrar a aplicação em funcionamento:

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git e Node.js. Além disso é bom ter um editor para trabalhar com o código como VSCode.

# Clone este repositório
$ git clone [email protected]:MrRioja/myShop-ignite.git

# Acesse a pasta do projeto no terminal/cmd
$ cd myShop-ignite

# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn

# Execute o bundle
$ npm run start
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn start

# Abra o app no emulador android ou iOS
$ npm run [android | ios]
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn [android | ios]

Luiz Rioja

Backend Developer