|
|
|
|[Home](home)|[Sprints](sprints)|[Requisitos](Requisitos)|[Arquitetura](Arquitetura)|[Configuração](Configuração)|[Endpoints](endpoints)|[Mockups](mockups)|[Problemas](problemas)
|
|
|
|
|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|
|
|
|
|
|
|
|
## Configuração
|
|
|
|
Para o correto funcionamento do projeto, é necessário configurar os ambientes
|
|
|
|
do backend e frontend.
|
|
|
|
|
|
|
|
Para configurar o ambiente é necessário ter os seguintes requisitos instalados:
|
|
|
|
## Backend
|
|
|
|
Para a configuração do projeto do backend, é necessário ter instalados o
|
|
|
|
[TomCat 8](https://tomcat.apache.org/download-80.cgi) (como servidor) e
|
|
|
|
[MySQL 5.7](https://dev.mysql.com/downloads/mysql/5.7.html#downloads) (como
|
|
|
|
sistema de gerenciamento de banco de dados).
|
|
|
|
|
|
|
|
* TomCat 8 ou superior;
|
|
|
|
Se você é um ás na configuração/setup de ambientes de desenvolvimento, apenas os
|
|
|
|
dois softwares acima já serão suficientes. Entretanto, recomendamos baixar o
|
|
|
|
MySQL Workbench e usá-lo para acesso ao banco de dados
|
|
|
|
([download](https://dev.mysql.com/downloads/workbench/)).
|
|
|
|
|
|
|
|
* IntelliJ IDEA Enterprise (request license @acad.pucrs.br);
|
|
|
|
Após baixar e abrir o MySQL Workbench:
|
|
|
|
1. selecione a conexão padrão `Local instance 3306`
|
|
|
|
2. digite a senha do usuário `root` (você deve ter definido uma senha durante a
|
|
|
|
instalação do MySQL) e confirme
|
|
|
|
|
|
|
|
* VisualStudio Code;
|
|
|
|
|
|
|
|
|
|
|
|
* MySQL 5.7 ;
|
|
|
|
Na tela que abrir:
|
|
|
|
|
|
|
|
* MySQL Workbench (Criar a DataBase dietoterapia (command: create database dietoterapia));
|
|
|
|
1. digite o seguinte comando para criar o *schema* usado para reunir as tabelas:
|
|
|
|
|
|
|
|
* baixar os repositórios do projeto: front e back;
|
|
|
|
|
|
|
|
* PostMan para o chrome.
|
|
|
|
|
|
|
|
## Guia de Tutoriais
|
|
|
|
|
|
|
|
* [Git](configuracoes/Git);
|
|
|
|
|
|
|
|
* [Angular](configuracoes/Angular);
|
|
|
|
|
|
|
|
* [IntelliJ para MAC](configuracoes/IntelliJ);
|
|
|
|
|
|
|
|
* [Gerar Diagrama ER com MySql Workbench](configuracoes/Diagrama-ER).
|
|
|
|
|
|
|
|
## Dicas
|
|
|
|
|
|
|
|
* [Wiki](configuracoes/Wiki). |
|
|
|
```sql
|
|
|
|
create database dietoterapia;
|
|
|
|
```
|
|
|
|
|
|
|
|
**Observação:** você pode mudar este nome se quiser, mas o mesmo será necessário
|
|
|
|
novamente nos próximos passos.
|
|
|
|
|
|
|
|
2. execute o comando com `Ctrl + Enter`. Uma mensagem deve aparecer na parte
|
|
|
|
inferior da tela, informando que o comando foi executado com sucesso
|
|
|
|
|
|
|
|
3. feche a aba com a conexão atual
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
De volta na tela inicial, crie uma nova conexão, onde o valor do campo *Default
|
|
|
|
schema* deve ser o mesmo usado na criação do *schema* (selecionado acima):
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Com o banco de dados criado, é hora de configurar a IDE: recomendamos usar o
|
|
|
|
IntelliJ IDEA Ultimate ([download](https://www.jetbrains.com/idea/download)).
|
|
|
|
Para usá-lo, você deve ter uma licença válida, que pode ser obtida usando o
|
|
|
|
e-mail *acad* fornecido pela PUCRS
|
|
|
|
([peça aqui sua licença](https://www.jetbrains.com/shop/eform/students)).
|
|
|
|
|
|
|
|
Após instalar o IntelliJ, clone o projeto do backend
|
|
|
|
([instruções sobre Git](http://www.tools.ages.pucrs.br/dietoterapia/wiki/wikis/configuracoes/Git))
|
|
|
|
e importe o projeto no IntelliJ ([tutorial](configuracoes/IntelliJ)).
|
|
|
|
|
|
|
|
**Atenção:** não se esqueça de criar o arquivo de configurações
|
|
|
|
`config.properties` dentro da pasta `resources` no projeto para se conectar com
|
|
|
|
o banco de dados, com o seguinte conteúdo:
|
|
|
|
```ini
|
|
|
|
conexao.url=jdbc:mysql://localhost/<schema>
|
|
|
|
conexao.user=<usuario>
|
|
|
|
conexao.password=<senha>
|
|
|
|
```
|
|
|
|
* `<schema>`: nome do *schema* criado anteriormente
|
|
|
|
* `<usuario>`: um usuário com direitos de leitura e escrita sobre o *schema*
|
|
|
|
criado; se você está seguindo este tutorial à risca, use o usuário `root`
|
|
|
|
* `<senha>`: a senha que você informou ao instalar o MySQL, e usada no MySQL
|
|
|
|
Workbench para criar o *schema*
|
|
|
|
|
|
|
|
Se tudo tiver dado certo, então o backend está pronto e funcionando! :D
|
|
|
|
|
|
|
|
## Frontend
|
|
|
|
Configurar o frontend é mais simples:
|
|
|
|
|
|
|
|
1. instale o NodeJS 8 (ou posterior) e NPM 5 (ou posterior)
|
|
|
|
([download](https://nodejs.org/en/download/))
|
|
|
|
|
|
|
|
2. instale as ferramentas de linha de comando do Angular
|
|
|
|
([tutorial com introdução ao Angular](https://angular.io/guide/quickstart))
|
|
|
|
|
|
|
|
```bash
|
|
|
|
# em um terminal
|
|
|
|
npm install -g @angular/cli
|
|
|
|
```
|
|
|
|
|
|
|
|
3. clone o projeto do frontend
|
|
|
|
([instruções sobre Git](http://www.tools.ages.pucrs.br/dietoterapia/wiki/wikis/configuracoes/Git))
|
|
|
|
|
|
|
|
4. instale as dependências do projeto:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
# em um terminal, na pasta do projeto clonado
|
|
|
|
npm install
|
|
|
|
```
|
|
|
|
|
|
|
|
Pronto! O frontend já está configurado.
|
|
|
|
|
|
|
|
Para editar o código do frontend, recomendamos usar o Visual Studio Code
|
|
|
|
([download](https://code.visualstudio.com/)), que já possui suporte a todas as
|
|
|
|
linguagens usadas no frontend, inclusive
|
|
|
|
[TypeScript](https://www.typescriptlang.org/).
|
|
|
|
|
|
|
|
**Observações:**
|
|
|
|
- para rodar o frontend:
|
|
|
|
1. abra o IntelliJ e execute o backend
|
|
|
|
2. abra um terminal na pasta do projeto do frontend e execute `ng serve`
|
|
|
|
3. abra um navegador e vá para o endereço `localhost:4200`
|
|
|
|
- sempre que alguma nova dependência for adicionada ao projeto, você deverá
|
|
|
|
instalá-las executando `npm install` novamente a partir da pasta do projeto do
|
|
|
|
frontend
|
|
|
|
|
|
|
|
## Extras
|
|
|
|
### Backend - Postman
|
|
|
|
Se você está trabalhando no backend, você pode usar o Postman
|
|
|
|
([download](https://www.getpostman.com/apps)) para testar os *endpoints* criados.
|
|
|
|
|
|
|
|
### Git - GitKraken ou SourceTree
|
|
|
|
Se você tem dificuldades em usar o Git ou a linha de comando, você pode usar uma
|
|
|
|
ferramenta gráfica como o GitKraken ([download](https://www.gitkraken.com/)) ou
|
|
|
|
SourceTree ([download](https://www.sourcetreeapp.com/)).
|
|
|
|
|
|
|
|
Caso não queira baixar mais uma aplicação, você pode usar os plugins das IDEs
|
|
|
|
para Git. Tanto no IntelliJ quanto no Visual Studio Code, ele já vem instalado
|
|
|
|
por padrão.
|
|
|
|
|
|
|
|
## Resumo
|
|
|
|
**Softwares necessários:**
|
|
|
|
* TomCat 8
|
|
|
|
* MySQL 5.7
|
|
|
|
* NodeJS 5 ou posterior
|
|
|
|
* NPM 8 ou posterior
|
|
|
|
* Angular
|
|
|
|
|
|
|
|
**IDEs**
|
|
|
|
* IntelliJ IDEA Ultimate
|
|
|
|
* Visual Studio Code
|
|
|
|
|
|
|
|
**Extras (recomendados)**
|
|
|
|
* MySQL Workbench
|
|
|
|
* Postman
|
|
|
|
|
|
|
|
## Outros
|
|
|
|
- tutorial de Git [disponível na wiki](configuracoes/Git)
|
|
|
|
- tutorial de configuração do backend no IntelliJ [disponível na wiki](configuracoes/IntelliJ)
|
|
|
|
- cheatsheet do Angular [disponível na wiki](configuracoes/Angular)
|
|
|
|
- como as tabelas do backend são geradas automaticamente pelo Hibernate, é
|
|
|
|
possível gerar o diagrama entidade-relacionamento do banco de dados usando o
|
|
|
|
MySQL Workbench; a wiki tem um [tutorial](configuracoes/Dagrama-ER) passo a
|
|
|
|
passo de como exportar o diagrama ER
|
|
|
|
- a wiki também possui um [pequeno tutorial](configuracoes/wiki) com links para
|
|
|
|
referências sobre Markdown (a linguagem utilizada para construir as páginas da
|
|
|
|
wiki) |
Rafael Victor Ruwer Araujo
