| ... | ... | @@ -12,6 +12,7 @@ _Acesso rápido_ |
|
|
|
- [Diagrama do sistema](#diagrama-do-sistema)
|
|
|
|
- [Diagrama de sequência](#diagrama-de-sequência)
|
|
|
|
- [Frontend](#frontend)
|
|
|
|
- [Definições de Tecnologias](#definições-de-tecnologias)
|
|
|
|
- [Módulos do sistema](#módulos-do-sistema-1)
|
|
|
|
- [Arquitetura básica do frontend](#arquitetura-básica-do-frontend)
|
|
|
|
- [Diagrama do sistema](#diagrama-do-sistema)
|
| ... | ... | @@ -73,12 +74,29 @@ Seguindo um fluxo que percorre a estrutura: **Route > Controller > Service > Rep |
|
|
|
|
|
|
|
## Frontend
|
|
|
|
|
|
|
|
### Definições de Tecnologias
|
|
|
|
|
|
|
|
Os pontos chaves levados em consideração na escolha das tecnologias de Frontend são os mesmos descritos na seção de Backend.
|
|
|
|
|
|
|
|
Escolhas:
|
|
|
|
* Linguagem: JavaScript;
|
|
|
|
* Framework: React Native.
|
|
|
|
* Ferramentas: Prettier, ESLint e Expo.
|
|
|
|
|
|
|
|
Depois de conversas com a Stakeholder e discussões com o time em relação a tecnologias do projeto, foi concluído que JavaScript com a utilização de ReactNative seria ideal para a criação de aplicações Android e iOS nativas.
|
|
|
|
|
|
|
|
[React Native](https://reactnative.dev/) é um framework aborda a interface como uma função, que representa o estado atual da aplicação, apresentando componentes visuais escritos em JavaScript que podem ser reutilizados em diferentes telas. Para mais informações em relação ao modo que o React Native cria aplicações nativas tanto para Android quanto para iOS, verifique a seção [Arquitetura básica do frontend](#arquitetura-básica-do-frontend).
|
|
|
|
|
|
|
|
[Expo ](https://expo.io/)é uma ferramenta utilizada para garantir uma maneira fácil de acessar API's nativas sem precisar instalar dependências. Por meio de uma aplicação disponível para Android e iOS ele estabelece uma conexão com o dispositivo móvel sendo utilizado para desenvolvimento e apresenta em tempo real as mudanças realizadas no código. Expo também oferece diversos recursos disponíveis em aparelhos mobile, como seleção de fotos da galeria, acesso ao storage assíncrono, notificações e outras funcionalidades utilizadas no desenvolvimento nativo. O mesmo garantiu uma configuração de ambiente rápida, e fácil, eliminando barreiras de configuração dos diferentes sistemas operacionais de dispositivos mobile e computadores.
|
|
|
|
|
|
|
|
[Prettier](https://prettier.io/) e [ESLint ](https://eslint.org/)são ferramentas voltadas para a padronização de código, a primeira sendo utilizada para formatação do mesmo e a segunda para identificar padrões e garantir o uso de boas práticas. Quando configuradas em uma IDE, elas garantem que ao salvar trechos do código, padrões de indentação, aplicação de boas práticas e formatação sejam seguidas.
|
|
|
|
|
|
|
|
### Módulos do Sistema
|
|
|
|
|
|
|
|
- **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)
|
|
|
|
- **Utils**: Classes que podem ser reaproveitadas na aplicação, com funcionalidades de formatação de texto, modelos de entrada, acesso a constantes, etc...
|
|
|
|
- **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.
|
|
|
|
|
|
|
|
### Arquitetura Básica do Frontend
|
| ... | ... | @@ -87,7 +105,7 @@ A utilização de React Native permite a o desenvolvimento da aplicação inteir |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Os formato *.ipa* é utilizado para o sistema operacional iOS e o `.apk` para o Android. Para mais informações de como gerar a aplicação e realizar o build, é possível verificar a seção
|
|
|
|
Os formato `.ipa` é utilizado para o sistema operacional iOS e o `.apk` para o Android. Para mais informações de como gerar a aplicação e realizar o build, é possível verificar a seção
|
|
|
|
[Compilação e Instalação](https://tools.ages.pucrs.br/appoio/appoio-wiki/wikis/instalacao).
|
|
|
|
|
|
|
|
### Diagrama do Sistema
|
| ... | ... | |
