O aplicativo foi desenvolvido durante o Desafio VisitApp, com o objetivo de guiar e oferecer a mesma experiência aos visitantes presenciais e virtuais do Congresso Nacional.
- Instale o React Native e suas depencências: Siga o tutorial "Building Projects with Native Code"
- Instale o cli do Ignite
- Faça o download do repositório:
git clone https://github.com/danielfsousa/visite-o-congresso - Instale as dependências:
npm iouyarn - Inicie a Build do SO desejado
- iOS
npm run ios
- Android
npm run android
Utilizamos o Ignite para fazer o bootstrap do projeto. Com o Ignite é possível criar componentes, telas, listas, reducers e sagas utilizando o comando ignite generate e adicionar plugins como internacionalização, redux-persist, entre outros utilizando o comando ignite add. Tudo o que o ignite pode fazer por você está bem explicado na sua documentação.
Seguem as documentações de algumas bibliotecas importantes que utilizamos no projeto:
- Lodash
- Ramda
- React Navigation
- Redux
- Redux Saga
- Redux Persist
- Redux Sauce
- Apisauce
- React Native Elements
- React Native Vector Icons
- React Native i18n
- React Native Animatable
Utilize o comando npm run storybook para visualizar os componentes do projeto individualmente
Executar o linter antes dos commits
O linter é executado antes de cada commit, sem precisar configurar nada. Utilizamos o husky para isso.
Ignorar o linter
Se você precisar fazer um commit rápido em uma branch separada (que você irá voltar e limpar o código em uma outra hora) então você poderá ignorar o linter adicionando a flag --no-verify ao comando git commit.
Entendendo os erros do linter
As regras do linter são do JS Standard e React-Standard. Erros comuns do javascript podem ser encontrados aqui, enquanto erros relacionados ao React podem ser encontrados aqui.
Esse projeto utiliza o react-native-config para expor as variáveis de ambiente de confinguração do projeto. Você pode guardar chaves de API e outras informações sensíveis em um arquivo .env:
API_URL=https://myapi.com
GOOGLE_MAPS_API_KEY=abcdefgh
E acessá-las diretamente no seu código:
import Secrets from 'react-native-config'
Secrets.API_URL // 'https://myapi.com'
Secrets.GOOGLE_MAPS_API_KEY // 'abcdefgh'O arquivo .env é ignorado pelo git para manter as informações sensíveis fora do seu repositório.
- Copie o .env.example para .env
- Adicione as suas variáveis
- Siga as instruções: https://github.com/luggit/react-native-config#setup
- Pronto!
Código do React Native:
- Para debugar com o Chrome Developer Tools siga as instruções no site oficial
- Se você usa o Visual Stuio Code, instale o plugin React Native Tools
Código Nativo:
- Se for necessário debugar módulos nativos, você pode abrir o aplicativo pelo Android Studio ou Xcode e obter todas as vantagens para depuração (breakpoints, etc.) como se estivesse desenvolvendo um aplicativo nativo.
Utilizamos também o React Developer Tools para debugar a hierarquia dos componentes do React e o Reactotron para inspecionar o estado da aplicação e as requisições e respostas das APIs
- Documentação oficial do React Native
- React Native Express
- React Native Training
- React Native Katas
- Building the F8 App
- Flexbox Froggy
- Construindo layouts no React Native
- Building a React Native App in Under 15 Minutes with Ignite
- UI: Flexbox, Animações e Clones de Apps Famosos
- Ben Awad: Fullstack React and React Native Videos
- React Native Training
- Tyler Mcginnis: React Native Course
- Egghead.io
- Minicurso React Native
- codedamn: React Native Calculator