configuracao.md

@@ -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.
+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
+
+#### 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