|[Home](home)|[Escopo](escopo)|[Arquitetura](arquitetura)|[**Configuração**](configuracao)|[Mockups](mockups)|[BD](banco_dados)|[Instalação](instalacao)|[Gerência](gp)|[Qualidade](qualidade)|[Processo](processo)| |---|---|---|---|---|---|---|---|---|---| # Configuração do projeto _Acesso rápido_ - [Compilado sobre os serviços AWS utilizados no projeto](#compilado-sobre-os-serviços-aws-utilizados-no-projeto) - [Instalação do Node](#instalação-do-node) - [Clone do projeto](#fazendo-clone-do-projeto) - [Backend](#configuração-do-ambiente-de-desenvolvimento-backend) - [Instalando aplicações](#instalando-aplicações) - [Rodando o projeto](#rodando-o-projeto) - [Populando banco](#populando-um-banco-de-teste) - [Frontend](#configuração-do-ambiente-de-desenvolvimento-frontend) - [Instalando o Expo](#instalando-o-expo) - [Configurando IDE para o frontend](#configurando-sua-ide) - [Rodando o frontend](#executando-o-projeto) - [Configuração do smartphone](#smartphone) - [Configuração do emulador](#emulador) ## Compilado sobre os serviços AWS utilizados no projeto [🔗 Arquivo PDF](resources/doc-final-publico.pdf) ## Instalação do 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 ``` ## Fazendo clone do projeto Para fazer o clone do projeto deve-se ir à tela inicial do projeto do nosso time [Link do time APPOIO](https://tools.ages.pucrs.br/appoio) Na página no time basta selecionar qual o repositório que deseja clonar: 1. [Backend](https://tools.ages.pucrs.br/appoio/backend) 2. [Frontend](https://tools.ages.pucrs.br/appoio/frontend) 3. [Wiki](https://tools.ages.pucrs.br/appoio/appoio-wiki) > Não baixe a wiki, utilize a plataforma do gitlab para isso é mais simples. Após selecionar o repositório que deseja clonar irá aparecer um botão escrito "clone" no canto direito da tela, ao clicá-lo irão aparecer duas opções, a primeira que utiliza SSH e outra HTTP, copie o link no campo do HTTP. Com o link copiado nós iremos para um terminal (Command prompt no Windows) na nossa máquina, e digitar os seguintes comandos: * git clone "link copiado aqui" > Não coloque as aspas, somente o link Pronto, você agora possui uma instância local do repositório! --- ## Configuração do Ambiente de Desenvolvimento Backend Caso se sinta mais confortável com vídeos pode acessar [estes aqui](https://drive.google.com/drive/u/1/folders/1E8Jvz3b9zKBpBjWnCmphDAoCwD8HvcZh), ou seguir o texto. O backend possui um arquivo de configuração que pode ser utilizar de forma mais profunda caso se queira simular o ambiente de deploy, além de alguns programas auxiliares. Esses programas vão nos ajudar a garantir que estamos desenvolvendo corretamente e tentar identificar os problemas que possam ocorrer no desenvolvimento. ### Instalando aplicações * Visual Studio Code: [link para download do VisualStudio Code](https://code.visualstudio.com/download) * Postman: [link para download do Postman](https://www.postman.com/downloads) * DB Broswer for SQLite: [link para download do DB Browser](https://sqlitebrowser.org/dl/) **VisualStudio Code** O VisualStudio Code é um editor de código simples e que pode ser extendido através de plugins que podemos adicionar posteriormente, vamos utilizar ele para programar. Para abrir o repositório do backend já clonado para sua máquina no VisualStudio Code siga os seguintes passos: 1. Abra o VisualStudio Code 2. Clique em Arquivo/File no canto superior direito, isso irá abrir um menu 3. Selecione Abrir pasta/Open folder no menu que abriu 4. Navegue até o local onde fez clone do repositório 5. Selecione a pasta do repositório, por exemplo: ``` C:\users\usuario1\backend ``` 6. Clique em Selecionar pasta/Select folder Pronto, o repositório do projeto está aberto no VisualStudio Code! **Postman** O Postman vai nos ajudar a testar o nosso código quando estiver "no ar", ou seja, quando executarmos o nosso servidor vamos utilizar o Postman para enviar requisições para as rotas que criamos, seja criar um usuário ou recuperar todos os tutoriais cadastrados, esse cara vai nos ajudar. Ao abrir o Postman nos deparamos com uma tela com algumas opções, para começar a utilizar vamos aos seguintes passos: 1. Clicar no boão (+ New) 2. Selecionar a opção Request 3. Colocar o nome do Request que iremos fazer, por exemplo GET TUTORIAIS 4. Criar uma coleção caso não exista nenhuma, através do botão (+ Create Collection) 5. Inserir o nome da coleção, por exemplo APPOIO 6. Clica no botão Save to APPOIO. Pronto, temos um Request criado, agora o Postman nos mostra uma tela com um botão dropdown escrito GET, se clicarmos nele podemos ver todos os métodos HTTP que o Postman suporta e que podemos utilizar para testar nosso servidor. > Para saber mais sobre métodos HTTP [clique aqui](https://www.tutorialspoint.com/http/http_methods.htm) Caso o nosso servidor esteja executando podemos testá-lo (caso não saiba como executá-lo navegue mais abaixo onde possui um tutorial explicativo ou veja os vídeos disponibilizados) inserindo no campo onde está escrito "Enter request URL" o endereço do nosso servidor, resumidamente: 1. Selecione o método GET, caso não esteja selecionado 2. Insira no campo o endereço "http://localhost:8080/api/check" 3. Clique no botão Send Pronto, acaba de fazer a primeira requisição para o servidor, se tudo deu certo, você deve ter aparecido uma tela abaixo com a reposta do nosso servidor que, para o endereço informado, foi: ``` { "status": "Ok" } ``` Uma mensagem que foi programada manualmente para verificar se o nosso servidor está rodando. **DB Browser for SQLite** O DB Browser irá abrir o nosso banco de desenvolvimento para vermos o que já inserimos para garantir que não fizemos besteira na hora de criação dos nossos registros. Ao abrir o DB Browser, nenhum banco foi aberto ainda, nós precisamos dizer para ele qual banco queremos ver, para isso basta clicar no botão "Abrir banco de dados" na parte superior do aplicativo mais a esquerda, ao clicar irá abrir uma janela do sistema para procurar o arquivo do banco, caso você já tenha executado o projeto ao menos uma vez anteriormente, na raiz do projeto deve ter um arquivo chamado database.sqlite3, basta dar dois cliques ou clicar em Abrir para abrir o banco no seu DB Browser. Prontinho, você já tem o banco aberto. Para visualizar os registros seleciona a aba "Navegar dados" Caso queria ver a estrutura do seu banco (colunas, fk, pk...) basta utilizar a aba "Estrutura do banco de dados" e abrir a árvore de tabelas (clicar na setinha do lado de "Tabelas") Para executar comandos SQL diretamente no banco deve navegar para a aba "Executar SQL" e digitar o comando no primeiro campo de texto, depois de inserir o SQL só precisa clicar no botão > para executar, o resultado do seu comando será exibido logo abaixo. Para alterações mais rápidas e práticas é possível utilizar a aba "Navegar dados" para alterar diretamente os registros e as tabelas selecionando o campo e alterando seu valor na janela ao lado. ### Rodando o projeto Para executar o projeto nós precisamos de duas coisas essenciais: 1. Ter feito o clone do projeto 2. Ter o node instalado e configurado no sistema Antes de executar o projeto precisamos configurar algumas variáveis de ambiente (usuários de Windows não se preocupem, é tranquilo) Três variáveis são necessárias para desenvolvimento: ```CLOUDINARY_URL``` ```ADMIN_EMAIL``` ```ADMIN_PASSWORD``` Para configurá-las basta utilizar o comando "SET" (Prompt de Comando - CMD) ou "EXPORT" (Linux e Power Shell) da seguinte forma: ``` C:\users\backend>SET CLOUDINARY_URL=cloudinary://789796856845785966:yatkusgylhuqj38127@documentacao C:\users\backend>SET ADMIN_EMAIL=admin@admin.com C:\users\backend>SET ADMIN_PASSWORD=senha ``` > Note que para Linux ou Power Shell basta substituir o comando "SET" por "EXPORT" **```Nota para os desenvolvedores: O endereço do cloudinary, e-mail e senha corretos podem ser encontrados no grupo Geral do Discord```** Com os dois prontos nós já podemos rodar o projeto: Na raiz do projeto execute o comando: ```npm install``` ``` C:\users\backend>npm install audited 283 packages in 2.451s found 0 vulnerabilities ``` > A saída pode ser diferente, o importante é não ter aparecido nenhum erro Agora basta digitar o comando na raiz do projeto: ```node index.js dev``` ``` C:\users\backend>node index.js dev PI Server started and listening on port 8080 (development) Executing (default): CREATE TABLE IF NOT EXISTS `user` (`id` INTEGER PRIMARY KEY AUTOINCREMENT, `name` VARCHAR(50) NOT NULL, `email` VARCHAR(100) NOT NULL UNIQUE, `password` VARCHAR(255) NOT NULL, `birthday` DATETIME NOT NULL, `city` VARCHAR(50) NOT NULL, `uf` VARCHAR(2) NOT NULL); ... ``` > A saída pode ser diferente, o importante é não ter aparecido nenhum erro Pronto, o servidor está executando localmente na sua máquina no endereço: http://localhost:8080/api ## Populando um banco de teste Para popular o banco é necessário configurar as mesmas variáveis de ambiente do item anterior para então pode executar os seguintes comandos: No terminal/prompt de comando em que configurou as variáveis de ambiente, acesse a pasta do backend e digite o comando na raiz do projeto: ```node cria_e_popula.js dev``` ``` C:\users\backend>node cria_e_popula.js dev ``` Agora você tem um banco criado e populado na raiz do seu projeto. **Para que não ocorra nenhum erro** é recomendado **apagar** qualquer **banco** que possua anteriormente para isso basta fechar qualquer programa que esteja acessando o arquivo localizado na raiz do projeto de nome database.sqlite3, excluir o arquivo database.sqlite3 e executar o passo acima. --- ## 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 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 ``` ### Configurando sua IDE Para o desenvolvimento do código e fácil controle de versionamento (GitLab) sugerimos a instalação do [Visual Studio Code](https://code.visualstudio.com/). O mesmo além de ser uma ótima ferramenta para desenvolvimento conta com extensões que serão essenciais para padronização do código. Depois de instalar o Visual Studio Code, acesse sua aba de extensões e instale as seguintes: * ESLint: Para que a IDE identifique padrões React Native que estão sendo desrespeitados. * Prettier: Para que a IDE realize a indentação do código da maneira correta. Depois de adicionar as extensões necessárias, falta apenas uma configuração para podermos começar o desenvolvimento. No seu teclado pressione as teclas `ctrl` `shift` `p` para acessar a aba de pesquisa do Visual Studio Code. Pesquise por `settings` e abra o arquivo com nome `Prefernces: Open Settings (JSON)`. Nesse arquivo adicione as seguintes linhas ``` "editor.formatOnSave": true, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } ``` ### Configurando o Endereço do Backend Para facilitar o desenvolvimento, evitar conflitos de IPs diferentes e exposição do endereço do Backend, é necessário criar um arquivo de configuração para executar a aplicação com exito. Primeiramente é necessário criar um arquivo com o nome `connection.js` na pasta `src/constants`. Nesse arquivo o seguinte trecho de código deverá ser escrito: ``` export default address = { ip: 'endereço_do_backend', }; ``` O trecho `endereço_do_backend` deverá ser substituído por pelo endereço de IP local (caso o Backend esteja sendo executado localmente) ou pelo endereço de IP da instancia no AWS que hospeda o mesmo. ### Executando o Projeto Depois de clonar o repositório do GitLab para a sua máquina, acesse o projeto pelo terminal e execute `npm install`. Esse comando irá fazer o download e todas dependências do projeto (esse comando pode demorar bastante para ser executado). 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 simulador acesse as ferramentas de desenvolvimento no endereço http://localhost:19002 e selecione a opção **Run on Android device/emulator**.