lucasjcs/rn-marvel-app

Sobre

Olá! Nesta aplicação você terá acesso a um catalogo de personagens da Marvel, sendo possível exibir detalhes de cada um deles e também de favoritá-los.

Principais tecnologias utilizadas

• React Native 0.63.2

• TypeScript 3.8.3 para adicionar tipos ao javascript.

• Redux 4.0.5 para gerenciamento do estado da aplicação.

• Reduxsauce 1.2.0" para simplificar a lógica de actions, types e creators.

• seamless-immutable 7.1.4 para garantir um estado imutável.

• styled-components 5.1.1 para criação de componentes estilizados.

• Jest26.4.0 para criação dos testes automatizados.

• React Native Testing Library 7.0.2 Biblioteca utilizada para auxiliar na criação dos testes dos componentes.

Metodologia de Desenvolvimento

A arquitetura do projeto foi pensada para ser simples, a fim de trazer maior legibilidade e simplicidade ao projeto. A idéia é extrair a maior parte da regra de negócio para os hooks, deixando a camada de apresentação responsável apenas pela renderização das informações, um exemplo desta arquitetura, de forma simplificada, pode ser vista na imagem abaixo:

Neste projeto decidi por não entrar tão a fundo na arquitetura, evitando incluir complexidade desnecessária em um projeto desse tipo, porém em projetos maiores é extremamente recomendado que a divisão da arquitetura seja seguida rigorosamente.

Organização do projeto

A estrutura de pastas do projeto foi organizada de maneira simples, segue a explicação de cada uma delas:

├── src
│   ├── assets
│   │   ├── images
│   │   ├── styles
│   │   |   ├── **.ts
│   │   ├── **.ts
│   ├── hooks
│   │   ├── __test__
│   │   |   ├── **.test.ts
│   │   ├── **.ts
│   ├── models
|   |   ├── **.ts
│   ├── navigation
|   |   ├── **.tsx
│   ├── screens
|   |   ├── __test__
|   |   |   ├── **.test.tsx
|   |   ├── models
|   |   |   ├── **.ts
│   │   ├── **/*.tsx
│   ├── services/**.ts
|   ├── store
|   |   ├── ducks
|   |   |   ├── **.ts
│   |   ├── models
|   |   |   ├── **.ts
|   |   ├── **.ts
│   ├── widgets
|   |   ├── __test__
|   |   |   ├── **.test.tsx
│   │   ├── **/*.tsx
└──────────────────────

• assets: diretório responsável por armazenar arquivos de estilos, imagens, fontes, etc.
• hooks: local onde colocamos a lógica da aplicação, toda integração com redux e apis ficam nos hooks que estão armazenados nesta pasta.
• models: existem algumas pastas com este nome, são as pastas responsáveis por armazenar as interfaces, enums, constants, types que usamos.
• navigation: local onde ficam as rotas da aplicação.
• screens: aqui é onde ficam armazenadas as telas da aplicação.
• services: diretório responsável por armazenar os arquivos de API's.
• store: diretório onde configuramos o reduces, types e actions do Redux.
• widgets: local onde ficam os componentes compartilhados da aplicação (botões, headers, modais, etc.).

Marvel API

É recomendável que você gere as chaves para acesso à API clicando aqui. Após gerar suas chaves é só alterá-las no arquivo env.js que se encontra na raiz do projeto. Ex:

PUBLIC_KEY: 'PUBLIC_KEY_VALUE',

PRIVATE_KEY: 'PRIVATE_KEY_VALUE',

Observação: o arquivo não foi adicionado no .gitignore pra facilitar a execução do projeto, porém em um projeto real um arquivo desse tipo estaria ignorado.

Como executar

1 - Clone do repositório:

$ git clone https://github.com/lucasjcs/rn-marvel-app.git

2 - Instale as dependências:

$ cd rn-marvel-app

$ npm install ou yarn

Se optar por executar no emulador do iPhone execute também:

$ cd ios && pod install && cd ..�

3 - Execute o projeto:

Com o ambiente de desenvolvimento configurado (emuladores, SDKs) execute:

$ yarn ios ou yarn android

Se preferir executar diretamente pelas IDE's, siga este passo-a-passo.

Testes

Para executar os testes:

$ yarn test ou npm run test

Para gerar a cobertura de código:

$ yarn test:coverage ou npm run test:coverage

Estrutura do Git

O padrão de commit adotado foi o Conventional Commits.

Para garantir o cumprimento da padronização foi utilizado a biblioteca git-commit-msg-linter.

Este projeto foi desenvolvido com ❤️ por @lucasjcs.