Configurações do Projeto

Esta página descreve todas as configurações a serem feitas na sua máquina para execução do projeto.

Sumário

• Configurações Gerais
  • Instalando o Git
  • Instalando o Docker
  • Realizando o clone do projeto do GitLab
• Backend
  • Tecnologias
  • Configurando a IDE
  • Instalando a ferramenta de gerenciamento de banco de dados
  • Configurando o Postman (opcional)
• Frontend
  • Tecnologias
  • Configurando a Máquina
  • Configurando emulador ou celular
  • Gerando a apk para Android

Configurações Gerais

Esta seção descreve as configurações a serem feitas em ambos ambientes de desenvolvimento, tanto no de Frontend quanto no de Backend.

Instalando o Git

Para versionamento dos arquivos do projeto, utilizamos o sistema de controle de versão Git. Com o Git, todas as alterações realizadas no projeto, sejam estas novas funcionalidades ou correções, são registradas no histórico dos repositórios do projeto.

Para instalar o Git, selecione o seu sistema operacional nesta página de Downloads e siga as instruções do site.

Instalando o Docker

Para executarmos as aplicações local e na AWS, elas executarão dentro do ambiente isolado de containers. Para isso, será utilizada durante o projeto a ferramenta Docker, que pode ser instalada a partir das documentações abaixo:

• Para usuários de Linux: https://docs.docker.com/desktop/install/linux-install/
• Para usuários de Mac: https://docs.docker.com/desktop/install/mac-install/
• Para usuários de Windows: https://docs.docker.com/desktop/install/windows-install/

Nos sistemas operacionais Windows e Mac, é preciso instalar o Docker Desktop, que cria uma máquina virtual para execução dos containes, enquanto no Linux basta a instalação do Docker Engine e não é obrigatória a instalação do Docker Desktop. No entanto, recomenda-se a instalação do Docker Desktop em todos os ambientes, pois é instalado junto uma interface gráfica e outras funcionalidades que serão utilizadas no projeto, a exemplo do Docker Compose.

Realizando o clone do projeto do GitLab

Os repositórios do projeto Lucky Draw estão hospedados de forma remota no GitLab, de modo que, para realizar e salvar alterações nestes repositórios na sua máquina local, é preciso clonar estes repositórios na sua máquina. Ao clonar um repositório, você está criando uma cópia local dele na sua máquina, na qual você pode trabalhar de forma independente e, ao concluir as suas alterações, enviar elas para o repositório remoto.

Para fazer o clone dos projetos vá até a página do GitLab do grupo Lucky Draw, onde você pode selecionar qual repositório deseja clonar:

• Backend
• Frontend

Em seguida, clique no botão "Clone" da página do repositório selecionado, e selecione uma das duas opções de clone: via SSH ou via HTTPS.

• Se for selecionada a opção clonar com SSH, você precisa criar chaves SSH e adicionar elas em seu perfil do GitLab para se autenticar com elas no GitLab. Para mais informações, ler esta documentação
• Se for selecionada a opção clonar com HTTPS, você precisa se autenticar no GitLab usando seu usuário e senha. Sugere-se esta opção, por ser mais fácil de configurar.

Por fim, copie o link da alternativa selecionada e digite o comando abaixo, no terminal de linha de comando da sua máquina no diretório em que você deseja criar a cópia:

git clone "link copiado aqui"

Backend

Esta seção descreve as configurações a serem feitas para o ambiente de desenvolvimento Backend.

Tecnologias do Backend

• Java 17
• Spring Boot 3.4.3
• Maven 4.0.0
• Docker
• Docker Compose
• PostgreSQL 15.6

Para instalar o Java 17 na sua máquina, realize o download de um dos instaladores presentes neste site da Oracle.

Caso você já possua o Java instalado em sua máquina, mas não tem certeza se é a versão correta, execute o comando abaixo via terminal.

java -version

Se ao lado de "java version" for exibido uma versão que inicia com "17.", então não é necessário instalar uma nova versão em sua máquina.

Configurando a IDE para ambiente Backend

Para desenvolvimento no repositório de Backend do projeto, sugere-se o uso da ferramenta IntelliJ IDEA, seja a edição Community ou seja a edição Ultimate. A edição Ultimate, no entanto, é mais completa e possui mais funcionalidades para se trabalhar com projetos Spring, por isso se sugere baixar esta versão. Além disso, ainda que a versão Ultimate seja paga, é possível conseguir uma licença para estudantes ao se cadastrar com o e-mail da PUCRS seguindo os passos descritos aqui.

Após clonar o repositório do GitLab do Backend, abra a pasta onde o repositório foi clonado no IntelliJ, conforme imagem abaixo: Mais detalhes sobre como executar o projeto em sua máquina podem ser lidos no README do repositório Backend do projeto.

Instalando a ferramenta de gerenciamento de banco de dados

Como será utilizado o PostgreSQL como banco de dados relacional do projeto, recomenda-se a instalação da ferramenta DBeaver, que permite que você se conecte a diferentes bancos de dados relacionais, incluindo o PostgreSQL, e que você manipule os dados persistidos no banco.

Para instalar o DBeaver, siga as instruções presentes no site da ferramenta.

Uma vez instalado o DBeaver, para se conectar com o banco de dados utilizado pela aplicação, siga os passos abaixo:

1. Clique no botão para criar uma nova conexão com um banco de dados

2. Selecione a opção PostgreSQL e clique em "Next"

3. Configure a conexão com o banco de dados, preenchendo o host, o nome do banco de dados, o usuário e a senha conforme configurações presentes abaixo:

senha: luckydraw

4. Teste a conexão clicando no botão "Test Connection"
5. Se no teste a conexão for realizada com sucesso, clique em "Finish" para se conectar ao banco de dados. Ao finalizar, você deve conseguir visualizar os dados da sua conexão na lateral esquerda da interface, onde você pode: visualizar as tabelas presentes no banco de dados e as suas colunas; criar e executar scripts SQL; entre outros.

Configurando o Postman

Realizada a configuração do ambiente Backend do projeto, é possível utilizar a plataforma Postman como cliente HTTP para realizar as requisições para a API a partir de uma interface gráfica. Para isso e para documentar a API, no entanto, também pode-se utilizar o Swagger, que está configurado para o projeto de Backend, então só é preciso instalar o Postman caso você prefira trabalhar com esta ferramenta.

O Postman pode ser instalado neste link.

Após a instalação da ferramenta, as requisições a serem realizadas pelo Postman para a API deverão ser organizadas em uma collection. Uma collection é basicamente um agrupamento de requisições que permite que as requisições de sua API sejam organizadas em diretórios, exportadas e compartilhadas com os colegas de equipe. Na collection da API do projeto Sem Barreiras, as requisições devem ser agrupadas em diretórios de acordo com a entidade a qual estão relacionadas, e em cada pasta devem existir as requisições possíveis que podem ser feitas em cada caso. Para exemplificar, segue a imagem abaixo de uma API fictícia:

Assim, vai existir na documentação da API uma requisição para cada endpoint que foi implementado, e, a partir dos dados de exemplo já preenchidos, será possível fazer alterações para construir a requisição desejada e executar as chamadas HTTP. Na imagem abaixo existe um exemplo de requisição desta mesma API fictícia, para criar um livro no banco de dados, e as setas destacam algumas das informações que podem ser alteradas para personalizar a requisição (e.g.: path parameters na URL ou corpo da requisição).

Uma vez que a requisição é enviada, os dados da resposta (status, corpo, headers, tempo de resposta, etc) são apresentados na tela, como ilustrado na figura. Durante a criação de novas rotas, busque também clicar na opção "Save as example" para salvar a resposta retornada como exemplo. Ao salvar exemplos de resposta de sucesso e de erro na collection, a documentação da API ficará mais completa e será possível entender o formato de resposta da API em cada situação.

Além disso, toda vez que for feita uma alteração na collection, ela deve ser exportada como um arquivo JSON e em seguida commitada no repositório do Backend do projeto, para que todos os integrantes da equipe tenham acesso à documentação atualizada.

Frontend

Tecnologias do Frontend

O frontend do projeto foi desenvolvido com React Native CLI, utilizando TypeScript como linguagem principal. As principais bibliotecas e ferramentas utilizadas incluem:

• React Navigation: para gerenciamento de rotas e navegação entre telas;
• React Native Paper: biblioteca de componentes visuais baseada em Material Design;
• Axios: para consumo da API backend via requisições HTTP;
• react-native-encrypted-storage: para armazenamento seguro de dados sensíveis no dispositivo;
• TypeScript: para garantir tipagem estática e facilitar manutenção.

Além disso, o projeto utiliza fontes e cores customizadas definidas no repositório em conformidade com a identidade visual estabelecida nos mockups da aplicação.

Pré-requisitos

• Node.js versão 18.18.2 ou superior
• Java JDK 17 (para compilação Android)
• Android Studio (ou dispositivo físico com modo desenvolvedor habilitado)
• yarn ou npm instalado globalmente
• Emulador Android configurado (AVD) ou celular via USB

Instruções para executar o projeto

1. Clone o repositório:

git clone https://tools.ages.pucrs.br/lucky-draw/front-end.git
cd front-end

2. Instale as dependências:

npm install
# ou
yarn install

3. Execute a aplicação:

npm start

Se tudo der certo, deverá aparecer no terminal a seguinte tela:

Abrir outro terminal rodar o seguite comando:

npm run-android

O processo acima pode demorar alguns minutos, pricipalmente na primeira vez que rodar. Após carregar aparecerá essa mensagem e o app será iniciado no celular.

4. Em caso de erro de cache ou build, utilize:

npx react-native start --reset-cache
cd android && ./gradlew clean

Configurando o Emulador ou Celular

• Para usar emulador, abra o Android Studio > Device Manager > crie e inicie um AVD (Android Virtual Device).
• Para usar celular, ative o modo desenvolvedor, depuração USB e conecte o dispositivo via cabo.