|
| [Home](home) | [**Escopo**](escopo) | [Processo](processo) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Gerência](gerencia) | [BD](Banco de Dados) | [Qualidade](qualidade) | [Frontend](frontend) | [Backend](backend)
|
|
| [Home](home) | [**Escopo**](escopo) | [Processo](processo) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Gerência](gerencia) | [BD](Banco de Dados) | [Qualidade](qualidade) | [Frontend](frontend) | [Backend](backend) |
|
|
| :----------: | :-------------------------------: | :------------------: | :--------------: | :--------------------------: | :--------------------: | :------------------------: | :--------------: | :--------------------: | :---------------: | :--------------------: |
|
|
| :----------: | :------------------: | :------------------: | :------------------------------: | :--------------------------: | :------------------------: | :------------------: | :------------------: | :--------------------: | :------------------: | :----------------: |
|
|
|
|
|
|
# Frontend
|
|
# Frontend
|
|
|
|
|
... | @@ -7,6 +7,7 @@ Esta página centraliza informações sobre o [repositório Frontend do projeto |
... | @@ -7,6 +7,7 @@ Esta página centraliza informações sobre o [repositório Frontend do projeto |
|
|
|
|
|
## Sumário
|
|
## Sumário
|
|
|
|
|
|
|
|
- [Escolha de tecnologias](#escolha-de-tecnologias)
|
|
- [Organização do repositório](#organização-do-repositório)
|
|
- [Organização do repositório](#organização-do-repositório)
|
|
- [Padrões de código](#padrões-de-código)
|
|
- [Padrões de código](#padrões-de-código)
|
|
- [Nomenclatura de funções](#nomenclatura-de-classes)
|
|
- [Nomenclatura de funções](#nomenclatura-de-classes)
|
... | @@ -15,6 +16,14 @@ Esta página centraliza informações sobre o [repositório Frontend do projeto |
... | @@ -15,6 +16,14 @@ Esta página centraliza informações sobre o [repositório Frontend do projeto |
|
- [Nomenclatura de telas](#nomenclatura-de-telas)
|
|
- [Nomenclatura de telas](#nomenclatura-de-telas)
|
|
- [Documentação de componentes e telas](#documentação-de-componentes-e-telas)
|
|
- [Documentação de componentes e telas](#documentação-de-componentes-e-telas)
|
|
|
|
|
|
|
|
## Escolha de tecnologias
|
|
|
|
|
|
|
|
Para a escolha das tecnologias o time se organizou para determinar que conhecimentos o time possuía. Com isso, as tecnologias para Frontend que surgiram foram: React Native com JavaScript, React Native com TypeScript e Flutter. Logo nas votações iniciais o time se encontrou mais voltado a desenvolver a aplicação em React Native. A questão de JavaScript possuir mais materiais do que TypeScript também foi um aspecto que foi levado em consideração por parte do time durante a votação de tecnologias. Assim, criou-se uma enquete para ver qual era a preferência do time e os resultados foram os seguintes:
|
|
|
|
|
|
|
|
<img src="./resources/images/resultados-enquete-tecnologias-frontend.png" width="450">
|
|
|
|
|
|
|
|
Conforme mencionado na página de configuração de ambiente da Wiki e como se pode observar no gráfico acima, as tecnologias de Frontend que foram selecionadas como tecnologias foram o framework React Native, junto ao JavaScript, para o desenvolvimento das telas de interface. Além disso, se utilizou o Expo para acessar de forma fácil APIs nativas sem a instalação de outras dependências. Através de um aplicativo disponível tanto para iOS quanto para Android ele disponibiliza as mudanças feitas no código em tempo real. Assim, garantindo uma configuração rápida ultrapassando barreiras devido a configuração de sistemas operacionais diferentes de mobile e computadores e permitindo também acessar recursos disponíveis em aparelhos mobile tal como seleção de fotos, _voice over_ para acessibilidade e outras funcionalidades.
|
|
|
|
|
|
## Organização do repositório
|
|
## Organização do repositório
|
|
|
|
|
|
O projeto React Native do repositório de Frontend está organizado seguindo um padrão de componentização. Essa abordagem envolve a divisão da interface do usuário em componentes modulares e reutilizáveis, que são então compostos para formar as diversas telas ou páginas do aplicativo. Dessa forma, tendo um componente podemos passar parametros com o que quisermos ter e trabalhar na tela. As telas tem um comportamento semelhante, dado que elas são chamadas a partir de um arquivo que irá realizar o controle de roteamento do usuário passando as informações necessárias para que se possa executar as funcionalidades da aplicação.
|
|
O projeto React Native do repositório de Frontend está organizado seguindo um padrão de componentização. Essa abordagem envolve a divisão da interface do usuário em componentes modulares e reutilizáveis, que são então compostos para formar as diversas telas ou páginas do aplicativo. Dessa forma, tendo um componente podemos passar parametros com o que quisermos ter e trabalhar na tela. As telas tem um comportamento semelhante, dado que elas são chamadas a partir de um arquivo que irá realizar o controle de roteamento do usuário passando as informações necessárias para que se possa executar as funcionalidades da aplicação.
|
... | @@ -45,27 +54,27 @@ Com intuito de manter legibilidade e consistência no código a seguir estão al |
... | @@ -45,27 +54,27 @@ Com intuito de manter legibilidade e consistência no código a seguir estão al |
|
|
|
|
|
Funções do projeto devem ser nomeadas em inglês e seguir o padrão **camelCase**, ou seja, devem iniciar com letra maiúscula e cada palavra ou abreviatura no meio da frase também deve iniciar com letra maiúscula. Por exemplo:
|
|
Funções do projeto devem ser nomeadas em inglês e seguir o padrão **camelCase**, ou seja, devem iniciar com letra maiúscula e cada palavra ou abreviatura no meio da frase também deve iniciar com letra maiúscula. Por exemplo:
|
|
|
|
|
|
- variableExample :heavy_check_mark:
|
|
- variableExample :heavy_check_mark:
|
|
- Variable_Example :x:
|
|
- Variable_Example :x:
|
|
- Variableexample :x:
|
|
- Variableexample :x:
|
|
- VariableExample :x:
|
|
- VariableExample :x:
|
|
|
|
|
|
### Nomenclatura de componentes
|
|
### Nomenclatura de componentes
|
|
|
|
|
|
Componentes do projeto devem ser nomeadas em inglês e seguir o padrão **PascalCase**, ou seja, devem iniciar com letra maiúscula e cada palavra ou abreviatura no meio da frase também deve iniciar com letra maiúscula. Além disso, o nome do arquivo e da função de retorno do componente deve seguir o padrão `{O que é X componente?}Component.js`. Por exemplo:
|
|
Componentes do projeto devem ser nomeadas em inglês e seguir o padrão **PascalCase**, ou seja, devem iniciar com letra maiúscula e cada palavra ou abreviatura no meio da frase também deve iniciar com letra maiúscula. Além disso, o nome do arquivo e da função de retorno do componente deve seguir o padrão `{O que é X componente?}Component.js`. Por exemplo:
|
|
|
|
|
|
- InputTextComponent.js :heavy_check_mark:
|
|
- InputTextComponent.js :heavy_check_mark:
|
|
- Input_Text_Component.js :x:
|
|
- Input_Text_Component.js :x:
|
|
- Inputtextcomponent.js :x:
|
|
- Inputtextcomponent.js :x:
|
|
- inputTextComponent.js :x:
|
|
- inputTextComponent.js :x:
|
|
|
|
|
|
### Nomenclatura de telas
|
|
### Nomenclatura de telas
|
|
|
|
|
|
Telas do projeto devem ser nomeadas em inglês e seguir o padrão **PascalCase**, ou seja, devem iniciar com letra maiúscula e cada palavra ou abreviatura no meio da frase também deve iniciar com letra maiúscula. Além disso, o nome do arquivo e da função de retorno da tela deve seguir o padrão `{O que é X tela?}Screen.js`. Por exemplo:
|
|
Telas do projeto devem ser nomeadas em inglês e seguir o padrão **PascalCase**, ou seja, devem iniciar com letra maiúscula e cada palavra ou abreviatura no meio da frase também deve iniciar com letra maiúscula. Além disso, o nome do arquivo e da função de retorno da tela deve seguir o padrão `{O que é X tela?}Screen.js`. Por exemplo:
|
|
|
|
|
|
- CreateAccountScreen.js :heavy_check_mark:
|
|
- CreateAccountScreen.js :heavy_check_mark:
|
|
- Create_Account_Screen :x:
|
|
- Create_Account_Screen :x:
|
|
- Createaccountscreen :x:
|
|
- Createaccountscreen :x:
|
|
- createAccountScreen :x:
|
|
- createAccountScreen :x:
|
|
|
|
|
|
### Documentação de componentes e telas
|
|
### Documentação de componentes e telas
|
... | @@ -94,4 +103,4 @@ Abaixo é demonstrado um exemplo com o ComponentExample: |
... | @@ -94,4 +103,4 @@ Abaixo é demonstrado um exemplo com o ComponentExample: |
|
* text={"teste"}
|
|
* text={"teste"}
|
|
* />
|
|
* />
|
|
*/
|
|
*/
|
|
``` |
|
``` |
|
\ No newline at end of file |
|
|