Configuração do Projeto

Tópicos

• Links
• Instalação do Node
• Instalação do Docker
• Instalação do MySql
• Configuração do Ambiente de Desenvolvimento
• Execução dos Projetos
  • Backend
  • Frontend

Links

• Back-end repo: https://tools.ages.pucrs.br/cine-clube/backend
• Front-end repo: https://tools.ages.pucrs.br/cine-clube/frontend
• Homologação: http://hml.ages.pucrs.br

Backend

• Documentação do TypeORM: Link
• Tutorial de TypeORM: Link

Frontend

• Tutorial ReactJS: Link
• Documentação do Material UI: Link
• Tutorial do Material UI: Link

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

Para verificar se o node foi instalado corretamente, execute o comando node -v e verifique se o retorno é semelhante ao apresentado abaixo (caso a versão seja diferente não se preocupe).

node -v
v14.16.0

Instalação do Docker

Tutorial de instalação: Windows / MacOS / Ubuntu / Debian

Instalação do MySql

Para realizar a instalação de uma instância do MySql através do docker, utilize o comando abaixo.
Caso esteja no Windows, utilize o PowerShell.
Caso esteja usando Linux, deve-se adicionar sudo antes de cada comando do docker.

docker run --name <nome-do-container> -e MYSQL_ROOT_PASSWORD=<senha-root> -e MYSQL_USER=<nome-usuario> -e MYSQL_PASSWORD=<senha-usuario> -e MYSQL_DATABASE=cine_clube -p 3306:3306 -d mysql:latest

Onde:

• <nome-do-container> é o nome do container a ser criado. Ex: cine-clube-mysql.
• <senha-root> é a senha que será utilizada para acessar o banco de dados como usuário root.
• <nome-usuario> é o nome de usuário que será utilizado para acesso ao banco de dados e <senha-usuario> é a senha do mesmo.

O comando final será algo como o exemplo abaixo.

docker run --name cine-clube-mysql -e MYSQL_ROOT_PASSWORD=rootpass123 -e MYSQL_USER=myuser -e MYSQL_PASSWORD=mypassword -e MYSQL_DATABASE=cine_clube -p 3306:3306 -d mysql:latest

Configuração do Ambiente de Desenvolvimento

Aplicações necessárias

• Visual Studio Code: link para download do VisualStudio Code
• Postman: link para download do Postman

OBS: Não é necessário criar uma conta para utilizar o Postman. Ao iniciar o app, simplesmente clique em "Skip signing in and take me straigt to the app"

VisualStudio Code

Utilizaremos o VisualStudio Code para o desenvolvimento da aplicação. Para facilitar no desenvolvimento, instale os seguintes pacotes:

• ESLint
• Prettier
• Docker

Após a instalação das extensões, vá nas configurações do VisualStudio Code (File > Preferences > Settings), procure format on save e marque a opção Editor: Format On Save.

Postman

O Postman é utilizado para testar as rotas/endpoints do backend.

TODO: Adicionar exemplo/descrição.

Execução dos Projetos

Backend

Pré-requesitos

• Node.js
• npm

Iniciando

• Clonar este repositório
  git clone http://tools.ages.pucrs.br/cine-clube/backend.git

• Entrar no diretório do projeto
  cd backend

• Instalar as dependências
  npm install

Execute o seguinte comando: cp .env.example .env
A seguir, altere os valores de DB_USERNAME e DB_USERNAME do arquivo .env, substituindo-os pelo usuário e senha do banco de dados.

OBS: Se ainda não instalou o banco de dados, veja como aqui.

• Iniciar a aplicação
  npm run dev

• Acesse pelo navegador
  http://localhost:5000

Frontend

Pré-requesitos

• Node.js
• Yarn ou npm

Iniciando

• Clonar este repositório
  git clone http://tools.ages.pucrs.br/cine-clube/frontend.git
• Entrar no diretório do projeto
  cd frontend
• Instalar as dependências
  npm install ou yarn install

Execute o seguinte comando: cp .env.example .env
Altere os valores dentro do arquivo .env, substituindo-os pelos dados da conta do Firebase. Como encontrar os dados.

• Iniciar a aplicação
  npm start ou yarn start
• Acesse pelo navegador
  http://localhost:3000

Obtendo os dados do Firebase

Acesse o console do Firebase.
Faça o login utilizando a conta do time. (Os dados de login estão no Discord do time. Se não encontrá-los, pergunte para algum AGES 3/4).
Entre no projeto do Cine Clube e acesse as configurações do projeto. No final da página estarão os valores necessários.
Insira-os no arquivo .env de maneira que o resultado final seja semelhante ao abaixo:

REACT_APP_API_KEY = AIzaSyCvNn-3-DBBO5TysLO67f0nsOEhOqpwi4E
REACT_APP_AUTH_DOMAIN = cineclube-ab123.firebaseapp.com
REACT_APP_PROJECT_ID = cineclube-ab123
REACT_APP_STORAGE_BUCKET = cineclube-ab123.appspot.com
REACT_APP_MESSAGING_SENDER_ID = 123456789012
REACT_APP_APP_ID = 1:123456789012:web:95b53dd4e787b16e2979fa