| ... | ... | @@ -58,11 +58,29 @@ TBD |
|
|
|
|
|
|
|
<h3 id="front-end-def-tec">Definições de Tecnologias</h3>
|
|
|
|
|
|
|
|
TBD
|
|
|
|
Escolhas:
|
|
|
|
|
|
|
|
* Linguagem: JavaScript;
|
|
|
|
* Frameworks: [React][1] e [React Native][2];
|
|
|
|
* Ferramentas: [Prettier][3], [ESLint][4], [Expo][5] e [NGIX][6].
|
|
|
|
|
|
|
|
Justificativa:
|
|
|
|
|
|
|
|
**React** e **React Native** possuem sintaxe similiar, logo a curva de aprendizado não será grande. Deixar em repositórios separados faz com que cada responsabilidade esteja em um lugar específico sem causar impacto em ambos.
|
|
|
|
|
|
|
|
**Expo** é uma ferramenta utilizada no desenvolvimento, garantindo uma maneira simples de acessar API's nativas sem precisar instalar dependências. Muito utilizado no desenvolvimento mobile, apresentando mudanças em tempo real relizadas no código.
|
|
|
|
|
|
|
|
**Prettier** e **ESLint** são ferramentas voltadas para a padronização de código. A primeira aplica formatação e a segunda identifica padrões e garante o uso de boas práticas.
|
|
|
|
|
|
|
|
**NGIX** é um servidor leve de HTTP que será usado para disponibilizar nosso site estático.
|
|
|
|
|
|
|
|
<h3 id="front-end-mods-sis">Módulos do Sistema</h3>
|
|
|
|
|
|
|
|
TBD
|
|
|
|
* **Components**: Onde estarão localizados os componentes visuais encontrados em diferentes páginas da aplicação. Os componentes em sua maioria são genéricos e podem ser utilizado em mais de uma parte do sistema.
|
|
|
|
* **Screen**: Onde estarão localizadas as telas da aplicação. Cada tela é composta de diversos componentes que quando juntos apresentam funcionalidades da aplicação
|
|
|
|
* **Routes**: A camada de rotas da aplicação, utilizando o padrão de arquitetura *Coordinator*, irá realizar a navegação entre as telas da aplicação, tendo conhecimento do fluxo e como devem se comportar. Possui a `StackNavigator` (navegação em telas empilhadas que seguem um determinado fluxo) e a `TabNavigator` (navegação por blocos com funcionalidades que diferem umas das outras, possui uma barra com suas opções na parte inferior da aplicação)
|
|
|
|
* **Constants**: Classes que podem ser reaproveitadas na aplicação, com funcionalidades de formatação de texto, modelos de entrada, acesso a constantes, etc...
|
|
|
|
* **Assets**: Pasta com as imagens que são utilizadas na aplicação uma ou mais vezes.
|
|
|
|
|
|
|
|
### Diagramas de Componentes
|
|
|
|
|
| ... | ... | @@ -71,3 +89,10 @@ TBD |
|
|
|
### Diagrama do Sistema
|
|
|
|
|
|
|
|
TBD
|
|
|
|
|
|
|
|
[1]: https://pt-br.reactjs.org/
|
|
|
|
[2]: https://reactnative.dev/
|
|
|
|
[3]: https://expo.dev/
|
|
|
|
[4]: https://prettier.io/
|
|
|
|
[5]: https://eslint.org/
|
|
|
|
[6]: https://www.nginx.com/ |
|
|
\ No newline at end of file |
