MyGroceryApp | Nickolas Bazar | Bazar do Nickolas | Teste de React Native - Aplicativo de Compras Online
Bem-vindo ao MyGroceryApp, um aplicativo de compras online desenvolvido com React Native. Este aplicativo permite que os usuários naveguem por uma variedade de produtos, adicionem itens ao carrinho, escolham métodos de pagamento e muito mais. Este guia o ajudará a configurar, executar e contribuir para o aplicativo. Certifique-se de seguir os passos com atenção para evitar problemas de configuração.
Antes de começar, verifique se você possui as seguintes ferramentas instaladas em sua máquina:
-
Node.js: Certifique-se de ter o Node.js instalado na versão 14 ou superior. Você pode baixá-lo em nodejs.org.
-
npm: O npm geralmente é instalado junto com o Node.js. Verifique se ele está instalado executando
npm -v
no terminal. -
React Native CLI: Instale a CLI do React Native globalmente com o seguinte comando:
bash npm install -g react-native-cli
-
Android Studio: Se você planeja desenvolver para Android, instale o Android Studio. Certifique-se de configurar um emulador Android ou conectar um dispositivo físico. Você pode baixar o Android Studio em developer.android.com/studio.
-
Xcode: Se você planeja desenvolver para iOS, instale o Xcode e configure um simulador iOS ou conecte um dispositivo físico. O Xcode está disponível na App Store.
-
Clone o Repositório: Clone este repositório para a sua máquina local e navegue para o diretório do projeto:
bash git clone https://github.com/seu-usuario/mygroceryapp.git cd mygroceryapp
-
Instale as Dependências: Instale as dependências do projeto usando o npm:
bash npm install
-
Configuração de Plataforma:
-
Para Android: Abra o Android Studio, configure um emulador ou conecte um dispositivo físico via USB. Certifique-se de que o dispositivo esteja configurado corretamente e seja reconhecido pelo Android Studio.
-
Para iOS: Abra o projeto no Xcode e escolha um simulador iOS ou conecte um dispositivo iOS físico via USB. Verifique se o Xcode concluiu o processo de configuração inicial para a plataforma iOS.
-
-
Inicie o Aplicativo:
-
Para Android: Execute o comando abaixo para iniciar o aplicativo no emulador ou dispositivo Android conectado:
bash npm run android
Se você enfrentar problemas com o Gradle ou com as dependências do Android, tente executar:
bash cd android ./gradlew clean cd .. npm run android
-
Para iOS: Execute o comando abaixo para iniciar o aplicativo no simulador ou dispositivo iOS conectado:
bash npm run ios
Se você enfrentar problemas relacionados ao Xcode, tente executar:
bash rm -rf ios/build npm run ios
-
-
Teste o Aplicativo: Verifique se o aplicativo é exibido corretamente no emulador ou dispositivo. Navegue pelas telas, adicione produtos ao carrinho e teste as funcionalidades.
-
Problemas de Build do Android: Se você enfrentar problemas relacionados ao Gradle ou às dependências do Android, tente limpar o cache e reconstruir:
bash cd android ./gradlew clean cd .. npm run android
-
Problemas de Build do iOS: Se ocorrerem problemas relacionados ao Xcode, limpe a pasta de build e reconstrua:
bash rm -rf ios/build npm run ios
-
Problemas de Dependências: Se ocorrerem problemas relacionados a dependências, exclua a pasta
node_modules
e o arquivopackage-lock.json
, em seguida, executenpm install
novamente.
Certifique-se de verificar a documentação oficial do React Native, Android Studio e Xcode se encontrar problemas mais complexos.
Nota: Verifique sempre a integridade do arquivo metro.config.js qualquer problema nesse arquivo pode impedir o processo de testes do sistema.
-
Lista de Produtos: Navegue por uma lista de produtos disponíveis para compra. Cada produto inclui uma imagem, nome, preço e descrição.
-
Carrinho de Compras: Adicione produtos ao carrinho de compras e veja automaticamente o valor total atualizado.
-
Método de Pagamento: Escolha entre diferentes métodos de pagamento para concluir sua compra.
-
Lista de Favoritos: Marque produtos como favoritos para acesso rápido posteriormente.
-
Pesquisa por Produto: Procure produtos específicos usando palavras-chave.
-
Notificações: Receba notificações sobre ofertas especiais e atualizações do aplicativo.
-
Cadastro e Edição de Endereços: Cadastre e gerencie endereços de entrega.
- React Native: Framework para desenvolvimento de aplicativos móveis multiplataforma.
- Redux Toolkit: Gerenciamento de estado global do aplicativo.
- React Navigation: Navegação entre telas.
- Async Storage: Armazenamento local para informações como favoritos e endereços.
- React Native Firebase: Integração com o Firebase para autenticação e armazenamento em nuvem.
- Razorpay: Integração para processamento de pagamentos.
- Eslint e Prettier: Ferramentas para manter a consistência do código.
Se desejar contribuir com o MyGroceryApp, siga as instruções detalhadas no README do repositório. Certifique-se de que suas alterações são testadas localmente antes de enviar uma solicitação de pull.