| ... | ... | @@ -101,12 +101,72 @@ Esta seção descreve as configurações a serem feitas para o ambiente de desen |
|
|
|
|
|
|
|
### Tecnologias do Frontend
|
|
|
|
|
|
|
|
TODO
|
|
|
|
Para o desenvolvimento do frontend foi utilizado [React Native](https://reactnative.dev/) com JavaScript podendo variar o estilo de visualização se optar por usar um celular ou um emulador. Para facilitar a montagem de componentes se fez uso do [React Native Papers](https://callstack.github.io/react-native-paper/) que é uma biblioteca que busca fornecer maior facilidade na criação dos componentes de tela. (TBD - Adicionar como será feita comunicação com o backend em termos de tecnologia [Prob -> Axios])
|
|
|
|
|
|
|
|
### Configurando a Máquina para ambiente Frontend
|
|
|
|
|
|
|
|
TODO
|
|
|
|
#### 1 - Instalação do Node
|
|
|
|
|
|
|
|
Para configurar a máquina para rodar o ambiente frontend, primeiro é necessário instalar o [Node.js](https://nodejs.org/en/download/) (faça download da versão mais recente que tenha LTS - Long Term Support) para poder instalar as dependências do projeto.
|
|
|
|
|
|
|
|
Para garantir que a instalação foi bem sucedida rode o seguinte comando em um terminal (pode ser o cmd ou um bash):
|
|
|
|
|
|
|
|
```
|
|
|
|
C:\user> node -v
|
|
|
|
v20.11.1
|
|
|
|
```
|
|
|
|
|
|
|
|
(Obs: a versão que retornará não precisa ser exatamente a mesma, desde que suporte as dependências do projeto.)
|
|
|
|
|
|
|
|
#### 2 - Instalação de dependências
|
|
|
|
|
|
|
|
Após ter clonado o frontend, abra o projeto em sua IDE ou em seu ambiente de preferência. Para o frontend é recomendado utilizar o [VSCode](https://code.visualstudio.com/), dado que o projeto tem extensões disponibilizadas por ele como o [Prettier](https://prettier.io/) e o [ESLint](https://eslint.org/) para formatação do código.
|
|
|
|
|
|
|
|
Com o ambiente aberto, abra um terminal e rode o seguinte comando:
|
|
|
|
|
|
|
|
```
|
|
|
|
npm install
|
|
|
|
```
|
|
|
|
|
|
|
|
Ele instalará as dependências do projeto em suas respectivas versões definidas nos arquivos `package-lock.json` e `package.json`.
|
|
|
|
|
|
|
|
#### 3 - Rodar o projeto
|
|
|
|
|
|
|
|
Se tudo deu certo até aqui, basta executar o comando:
|
|
|
|
|
|
|
|
```
|
|
|
|
npm start
|
|
|
|
```
|
|
|
|
|
|
|
|
Com isso, o projeto estará rodando e você poderá abri-lo e visualiza-lo da forma que preferir. A configuração das formas de visualização é tratada na próxima seção.
|
|
|
|
|
|
|
|
#### Configurar conexão com o backend
|
|
|
|
|
|
|
|
TBD
|
|
|
|
|
|
|
|
### Configuração de emulador / celular
|
|
|
|
|
|
|
|
Levando em consideração que o sistema desenvolvido é um aplicativo mobile, será necessário utilizar um emulador de celular ou um celular para visualização de telas no desenvolvimento do frontend. |
|
|
\ No newline at end of file |
|
|
|
Levando em consideração que o sistema desenvolvido é um aplicativo mobile, será necessário utilizar um emulador de celular ou um celular para visualização de telas no desenvolvimento do frontend.
|
|
|
|
|
|
|
|
#### Visualização no celular
|
|
|
|
|
|
|
|
Essa é a forma mais simples de visualizar o projeto, você só vai precisar de um smartphone e instalar o aplicativo [Expo Go](https://expo.dev/go). Com o aplicativo instalado ao rodar o projeto com `npm start` no terminal será disponibilizado um QR Code, o qual se você o escanear ele abrirá o Expo e começará a carregar a visualização do frontend. Permitindo que interaja com as telas e caso seja feita alguma modificação no código durante a execução há a opção de _hot reload_ pressionando "R" no terminal de execução.
|
|
|
|
|
|
|
|
#### Visualização no emulador
|
|
|
|
|
|
|
|
Caso prefira o você também pode fazer a visualização por um emulador. Apesar de consumir mais recursos da sua máquina essa também é uma opção caso você os tenha de sobra. Caso contrário é mais recomendável seguir pela opção anterior de visualização pelo celular. Dito isso, uma sugestão de emulador de smartphone é o [Android Studio](https://developer.android.com/studio), sendo que para instalação pode seguir o modelo padrão de instalação sem a necessidade de modificar nenhum parâmetro.
|
|
|
|
|
|
|
|
Ao abrir o Android Studio você cairá na seguinte tela:
|
|
|
|
|
|
|
|
<img src="./resources/images/configuracao-frontend-emulador.png" width="700">
|
|
|
|
|
|
|
|
Nela selecione a opção `More Actions` e em seguida `Virtual Device Manager` que abrirá a tela de configuração de dispositivos. Assim, no canto superior esquerdo tem um botão de `+` para adicionar um novo dispositivo com isso você pode fazer a seleção de hardware que preferir para seu dispositivo virtual. Recomendado é usar com as seguintes configurações:
|
|
|
|
|
|
|
|
- Categoria: Phone, Pixel 6a
|
|
|
|
- Imagem de sistema: R
|
|
|
|
|
|
|
|
Abaixo pode ser vista essa interface de criação do dispositivo:
|
|
|
|
|
|
|
|
<img src="./resources/images/configuracao-frontend-emulador-adicionar-dispositivo.png" width="700">
|
|
|
|
|
|
|
|
Com o dispositivo criado basta inicia-lo junto do projeto. Assim que o dispositivo estiver rodando no terminal do projeto selecione a opção para rodar no emulador Android e ele baixará o Expo Go e inicializará o projeto nele. |
|
|
\ No newline at end of file |
