|
|
|
<table>
|
|
|
|
<tr>
|
|
|
|
<th> [Home](home) </th>
|
|
|
|
<th> [Escopo e Cronograma](Escopo e Cronograma) </th>
|
|
|
|
<th> [Processo](Processo) </th>
|
|
|
|
<th> [Design/Mockups](Design & Mockups) </th>
|
|
|
|
<th> [Configuração](Configuracao) </th>
|
|
|
|
<th> [Arquitetura](Arquitetura) </th>
|
|
|
|
<th> [Infra](Infraestrutura) </th>
|
|
|
|
<th> [Código](Codigo) </th>
|
|
|
|
<th> [BD](Banco de dados) </th>
|
|
|
|
<th> [Backend](Backend) </th>
|
|
|
|
<th> [Frontend](Frontend) </th>
|
|
|
|
<th> [Qualidade](Qualidade) </th>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
|
|
|
|
# Frontend
|
|
|
|
|
|
|
|
## Definições de Tecnologias
|
|
|
|
- Linguagem: Typescript
|
|
|
|
- Framework: React Native
|
|
|
|
|
|
|
|
### 1. Estrutura Raiz do Projeto:
|
|
|
|
- App.tsx: O componente raiz da aplicação
|
|
|
|
- index.js: Ponto de entrada da aplicação
|
|
|
|
- package.json: Gerenciamento de dependências e scripts
|
|
|
|
- tsconfig.json: Configurações do TypeScript
|
|
|
|
- metro.config.js: Configuração do bundler do React Native
|
|
|
|
- babel.config.js: Configuração do Babel para transpilação
|
|
|
|
- .eslintrc.js e .prettierrc.js: Configurações de linting e formatação de código
|
|
|
|
|
|
|
|
### 2. Módulos do sistema estão presentes no diretório src/, com a organização seguinte:
|
|
|
|
- components/: Componentes reutilizáveis da interface
|
|
|
|
- pages/: Telas da aplicação
|
|
|
|
- routes/: Configurações de navegação
|
|
|
|
- services/: Serviços e integrações com APIs
|
|
|
|
- assets/: Recursos estáticos (imagens, fontes, etc.)
|
|
|
|
- styles/: Estilos globais e temas
|
|
|
|
- mocks/: Dados simulados para desenvolvimento/testes
|
|
|
|
|
|
|
|
### 3. Plataformas Nativas:
|
|
|
|
- android/: Configurações específicas para Android
|
|
|
|
- ios/: Configurações específicas para iOS
|
|
|
|
|
|
|
|
### 4. Ferramentas de Desenvolvimento:
|
|
|
|
- Jest para testes
|
|
|
|
- ESLint para linting
|
|
|
|
- Prettier para formatação de código
|
|
|
|
- Babel para transpilação
|
|
|
|
- TypeScript para tipagem estática
|
|
|
|
- Metro para bundling
|
|
|
|
|
|
|
|
### Estruturação:
|
|
|
|
 |
|
|
\ No newline at end of file |
|
|
|
Esta página centraliza informações sobre o [repositório Frontend do projeto Lucky Draw](https://tools.ages.pucrs.br/lucky-draw/front-end).
|
|
|
|
|
|
|
|
## Sumário
|
|
|
|
|
|
|
|
* [Escolha de tecnologias](#escolha-de-tecnologias)
|
|
|
|
* [Organização do projeto](#organizacao-do-projeto)
|
|
|
|
* [Padrões de código](#padroes-de-codigo)
|
|
|
|
* [Nomenclatura de componentes](#nomenclatura-de-componentes)
|
|
|
|
* [Nomenclatura de variáveis e funções](#nomenclatura-de-variaveis-e-funcoes)
|
|
|
|
* [Estilo e tema (fontes e cores)](#estilo-e-tema-fontes-e-cores)
|
|
|
|
* [Tratamento de autenticação](#tratamento-de-autenticacao)
|
|
|
|
* [Boas práticas de organização de serviços e rotas](#boas-praticas-de-organizacao-de-servicos-e-rotas)
|
|
|
|
* [Integração com backend via Axios](#integracao-com-backend-via-axios)
|
|
|
|
|
|
|
|
## Escolha de tecnologias
|
|
|
|
|
|
|
|
O frontend do projeto foi desenvolvido utilizando **React Native**, permitindo criar aplicativos nativos com JavaScript. As principais bibliotecas e ferramentas utilizadas incluem:
|
|
|
|
|
|
|
|
- React Navigation: para gerenciamento de navegação entre as telas.
|
|
|
|
- React Native Paper: biblioteca de componentes visuais baseada no Material Design.
|
|
|
|
- Axios: para requisições HTTP à API backend.
|
|
|
|
- react-native-encrypted-storage: para armazenamento seguro de dados.
|
|
|
|
- TypeScript: para desenvolvimento.
|
|
|
|
|
|
|
|
## Organização do projeto
|
|
|
|
|
|
|
|
O projeto está estruturado em pastas principais para separar responsabilidades:
|
|
|
|
|
|
|
|
- `components/`: Componentes reutilizáveis como botões, inputs, app bars, etc.
|
|
|
|
- `screens/`: Telas completas como Login, Home, RevealCards, etc.
|
|
|
|
- `services/`: Funções que lidam com chamadas HTTP para o backend.
|
|
|
|
- `routes/`: Configuração de navegação e contexto de autenticação.
|
|
|
|
- `assets/`: Imagens e outros arquivos estáticos.
|
|
|
|
- `styles/`: Arquivos de estilo compartilhado.
|
|
|
|
|
|
|
|
## Padrões de código
|
|
|
|
|
|
|
|
### Nomenclatura de componentes
|
|
|
|
|
|
|
|
Componentes devem ser nomeados em **PascalCase**:
|
|
|
|
|
|
|
|
- `CustomButton.tsx`
|
|
|
|
- `CustomAppBar.tsx`
|
|
|
|
|
|
|
|
### Nomenclatura de variáveis e funções
|
|
|
|
|
|
|
|
Utiliza-se o padrão **camelCase** para variáveis e funções:
|
|
|
|
|
|
|
|
- `isAdmin`, `handleLogout`, `getDailyChallengeStatus`
|
|
|
|
|
|
|
|
Evite abreviações excessivas. Nomeie com clareza.
|
|
|
|
|
|
|
|
## Estilo e tema (fontes e cores)
|
|
|
|
|
|
|
|
As fontes e cores padrão do projeto estão definidas no repositório dentro da pasta `styles`. Recomenda-se que todo componente reutilizável utilize os estilos definidos nessa pasta, para manter padronização visual entre telas.
|
|
|
|
|
|
|
|
Exemplo de uso de cor padrão:
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
import { colors } from '../../styles/colors';
|
|
|
|
<Text style={{ color: colors.primary }}>Texto</Text>
|
|
|
|
```
|
|
|
|
|
|
|
|
Exemplo de uso de fonte padrão:
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
import { fonts } from '../../styles/fonts';
|
|
|
|
<Text style={{ fontFamily: fonts.medium }}>Título</Text>
|
|
|
|
```
|
|
|
|
|
|
|
|
**Não é recomendado** definir fontes ou cores diretamente em `style={{ }}` nos componentes sem reutilizar os arquivos da pasta `styles`.
|
|
|
|
|
|
|
|
## Tratamento de autenticação
|
|
|
|
|
|
|
|
A autenticação JWT é gerenciada via `AuthContext` com tokens armazenados de forma segura em `EncryptedStorage`. A função `signIn` salva o token e `signOut` limpa os dados. O token é lido automaticamente e injetado nos headers via interceptor do Axios.
|
|
|
|
|
|
|
|
## Boas práticas de organização de serviços e rotas
|
|
|
|
|
|
|
|
Os serviços devem estar organizados em arquivos separados dentro da pasta `services`, agrupados por domínio (ex: `userService.ts`, `gameService.ts`). Cada serviço deve conter apenas a lógica de requisição (sem lógicas de estado ou interface).
|
|
|
|
|
|
|
|
As rotas devem ser tipadas utilizando `@react-navigation/native-stack` com o arquivo `types.ts`.
|
|
|
|
|
|
|
|
## Integração com backend via Axios
|
|
|
|
|
|
|
|
A integração é feita com a instância configurada do Axios no arquivo `api.ts`:
|
|
|
|
|
|
|
|
```ts
|
|
|
|
const api = axios.create({
|
|
|
|
baseURL: 'http://<ip>:8080/api',
|
|
|
|
headers: {
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
api.interceptors.request.use(async (config) => {
|
|
|
|
const token = await getItem('authToken');
|
|
|
|
if (token) {
|
|
|
|
config.headers.Authorization = `Bearer ${token}`;
|
|
|
|
}
|
|
|
|
return config;
|
|
|
|
});
|
|
|
|
```
|
|
|
|
Todas as funções que comunicam com o backend usam essa instância.
|
|
|
|
|
|
|
|
Exemplo de serviço com `axios`:
|
|
|
|
|
|
|
|
```ts
|
|
|
|
export async function getDailyChallengeStatus() {
|
|
|
|
const response = await api.get('/users/game-status', {
|
|
|
|
params: { gameType: 'DAILY_CHALLENGE' },
|
|
|
|
});
|
|
|
|
return response.data;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
O `AuthContext` é responsável por salvar o token JWT e garantir que o usuário está logado. As requisições protegidas devem aguardar que o token esteja disponível antes de executar chamadas:
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
useEffect(() => {
|
|
|
|
if (!token) return;
|
|
|
|
fetchStatus();
|
|
|
|
}, [token]);
|
|
|
|
```
|
|
|
|
|
|
|
|
|
