Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • appoio-wiki appoio-wiki
  • Project information
    • Project information
    • Activity
    • Labels
    • Planning hierarchy
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 0
    • Issues 0
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • APPOIO
  • appoio-wikiappoio-wiki
  • Wiki
  • configuracao

configuracao · Changes

Page history
Update configuracao frontend authored Sep 02, 2020 by João Flores de Leão's avatar João Flores de Leão
Show whitespace changes
Inline Side-by-side
configuracao.md
View page @ 432b6bea
......@@ -7,3 +7,106 @@ Aqui deve ser explicado como configurar o Ambiente para que os Desenvolvedores d
* 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](https://nodejs.org/en/).
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 ](https://github.com/Rocketseat/expo-common-issues) 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](https://play.google.com/store/apps/details?id=host.exp.exponent&hl=pt_BR) ou para [iOS](https://apps.apple.com/br/app/expo-client/id982107779).
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](https://developer.android.com/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 simulator acesse as ferramentas de desenvolvimento no endereço http://localhost:19002 e selecione a opção **Run on Android device/emulator**.
\ No newline at end of file
Clone repository
  • Rotas
  • arquitetura
  • banco_dados
  • configuracao
  • deploy
  • escopo
  • git_workflow
  • gp
  • Home
  • instalacao
  • mockups
  • padronizacao
  • processo
  • qualidade