Configuração do projeto

Acesso rápido

• Instalação do Node
• Clone do projeto
• Backend
  • Instalando aplicações
  • Rodando o projeto
  • Populando banco
• Frontend
  • Instalando o Expo
  • Configurando IDE para o frontend
  • Rodando o frontend
    • Configuração do smartphone
    • Configuração do emulador

Instalação do 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

Fazendo clone do projeto

Para fazer o clone do projeto deve-se ir à tela inicial do projeto do nosso time Link do time APPOIO

Na página no time basta selecionar qual o repositório que deseja clonar:

1. Backend
2. Frontend
3. 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, 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
• Postman: link para download do Postman
• DB Broswer for SQLite: link para download do DB Browser

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

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 [email protected]
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 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. 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"
  }

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 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.