Configuração do Projeto

Aqui deve ser explicado como configurar o Ambiente para que os Desenvolvedores do Projeto possam configurar o projeto para rodar em seus computadores, deve ser sempre atualizado a cada mudança de instalação feita.

• Deve ser explicado a configuração de TODAS as partes do projeto, tanto BACK,BANCO,FRONT,etc...
• Além de explicar aqui, deve ter em cada Repositório o RESUMO de como instalar para quando os Desenvolvedores baixarem o projeto possam configurar por lá também

Configuração do Ambiente de Desenvolvimento Frontend

A configuração do ambiente é muito semelhante no Windows e no MacOs.

Execução do projeto pode variar dependendo do estilo de visualização que você escolher.

Instalando o Node

Instalação

O download do instalador do Node pode ser realizado pelo seguinte link.

Faça o download e siga os passos de instalação da versão mais recente que possua LTS (Long Term Support).

Verificação

Depois de instalar o Node, abra um novo terminal para verificar se a mesma foi realizada com sucesso.

Execute o seguinte comando node -v e verifique se o retorno é semelhante ao apresentado abaixo (caso a versão seja diferente não se preocupe).

C:\user\node -v
v12.18.3

Depois execute o seguinte comando npm -v e novamente verifique se o retorno é semelhante (lembre-se: a versão não precisa ser a mesma).

C:\user\npm-v
v6.14.6

Instalando o Expo

Instalação

O download do Expo é feito utilizando o npm (Node Package Manager) que é instalado junto com o Node.

Caso já tenha feito a instalação do Node, abra o terminal e execute o comando npm install -g expo-cli, para instalar globalmente o Expo. Esse procedimento pode demorar um pouco para finalizar.

Caso encontre problemas na instalação do Expo, acesse o seguinte link para verificar soluções dos erros mais comuns.

Verificação

Para verificar se o Expo foi instalado, abra um novo terminal e execute o comando expo --version e verifique se o retorno é semelhante ao apresentado abaixo (caso a versão seja diferente não se preocupe).

C:\user\expo --version
3.25.1

Executando o Projeto

Para executar o projeto execute o seguinte comando no terminal npm start.

C:\users\frontend>npm start

> @ start C:\users\frontend
> expo start

Starting project at C:\users\frontend
Expo DevTools is running at http://localhost:19002

Para visualizar as telas é possível escolher uma das maneiras abaixo:

Smartphone

A maneira mais simples é utilizando um Smartphone (seja iOS ou Android).

Primeiro é necessário fazer o download do aplicativo do Expo para Android ou para iOS.

Depois de instalar o aplicativo acesse as ferramentas de desenvolvimento no endereço http://localhost:19002 e escaneie o QR code. Caso o celular esteja conectado em uma rede diferente do computador selecione a opção Tunnel nas ferramentas de desenvolvimento.

Emulador

Caso você não tenha um Smartphones disponível para o desenvolvimento e opte por usar o emulador existirão diferenças entre Windows/Linux e MacOS.

MacOS

Para o emular um dispositivo no MacOS acesse o local do programa Xcode, clique com o botão direito e siga os seguintes passos:

Show Package Contents -> Contents -> Developer -> Applications -> Simulator

Recomendo arrastar o Simulator para o seu Dock para fácil acesso.

Depois de iniciar o Simulator acesse as ferramentas de desenvolvimento no endereço http://localhost:19002 e selecione a opção Run on iOS Simualtor

Windows

Para o emular um dispositivo no Windows faça o download e instale o Android Studio.

Depois de instalar, na tela inicial, siga os seguintes passos:

Configure -> AVD Manager -> Create Virtual Device -> Phone -> Pixel 2 (recomendado) -> Next

Fazer download do release que deseja utilizar (recomendo o "R") e clique em "Next".

Clique em "Finish".

Para executar o simulador clique no simbolo de "Play" ao lado esquerdo dele.

Depois de iniciar o simulador acesse as ferramentas de desenvolvimento no endereço http://localhost:19002 e selecione a opção Run on Android device/emulator.