pennaor/zaratan_v1

Website de gestão de loteamentos que oferece serviços de criação, leitura, atualização e remoção de lotes.

Zaratan

A aplicação se trata de um website que provê um sistema de gestão de loteamentos ao usuário, disponibilizando serviços como criação, leitura, atualização e remoção de lotes. Os lotes são agrupados por quadras, as quais podem ser buscadas por meio de um dos serviços da aplicação.

O projeto se iniciou pela demanda de minha família por um sistema otimizado capaz de tornar nossas operações internas mais eficientes, com possibilidade de serem feitas remotamente de forma segura e zelando pela consistência e organização das informações.

Ferramentas utilizadas

• Front-end:
  • ReactJS
  • React Router
  • Axios
  • Material-UI
  • Eslint
  • Stylelint
• Back-end:
  • Golang
  • Go Fiber
  • JSON Web Tokens
  • MySQL
• Testes E2E:
  • Jest
  • Puppeteer
• Geral:
  • Docker

Pré-visualização

Tela de login

Tela de lotes - Informações de um lote

Tela de lotes - Paginação e sistema de rolagem

Tela de lotes - Busca

Tela de registro de lote

Tela de edição de lote

Iniciando aplicação

⚠️ A aplicação usa localStorage do browser para autenticação de usuário. ⚠️

Docker

• ⚠️ Docker-compose precisa estar na versão 3.9.

1. Abra um terminal e clone o repositório. Mude para a pasta raíz do repositório:

git clone git@github.com:pennaor/zaratan.git
cd ./zaratan

2. Crie um arquivo chamado .env na raíz do repositório a partir do template .env.example. Edite conforme necessidade.

3. Execute o comando para build e inicialização dos containers referentes aos serviços da aplicação:

docker-compose -f docker-compose-dev.yml up -d

Notas

• Front-end e back-end utilizam bibliotecas que detectam alterações no código-fonte e reexecutam a aplicação.
• São criados volumes para o código-fonte do front-end e back-end, de forma a refletir alterações no código-fonte em tempo real.

Sem docker

• ⚠️ MySQL deve estar instalado para o funcionamento da API.

1. Abra um terminal e clone o repositório. Mude para a pasta back-end e instale as dependências:

git clone git@github.com:pennaor/zaratan.git
cd ./zaratan/back-end
go install

2. Crie um arquivo .env com as variáveis da ambiente exemplificadas no arquivo .env.example presente na raíz do diretório /back-end.

3. Utilize o arquivo dev-db.sql para criar e popular o banco de dados. O arquivo pode ser encontrado na pasta sql:

./zaratan/sql/dev-db.sql

4. Inicie a API com go run main.go.

5. Abra outro terminal. Entre na raíz do repositório. Mude para o diretório do front-end e instale as dependências:

cd ./front-end
npm install

6. Crie um arquivo .env com as variáveis da ambiente exemplificadas no arquivo .env.example presente na raíz do diretório /front-end.

7. Inicie o front-end com npm start.

8. Acesse o website pela URL predefinida anteriormente. Utilize as credenciais para fazer o login na aplicação:

Usuário: aluisioordones1@gmail.com
Senha: 123456789

Testes E2E

⚠️ Front-end, API e MySQL devem estar rodando previamente aos testes. ⚠️

Docker

1. Na raíz do repositório, edite as variáveis de ambiente presentes no arquivo docker-compose-tests.yml de acordo com as usadas para os serviços da aplicação. Os testes rodam utilizando a máquina local como referência, e portanto as variáveis definidas em .env e no arquivo docker-compose-tests.yml podem ser diferentes.

2. Execute os testes com o comando:

docker-compose -f docker-compose-tests.yml up

Visualizando testes no browser

A variável de ambiente HEADLESS presente no arquivo docker-compose-tests.yml controla a execução dos testes utilizando a interface de um browser. Caso queira acompanhar visualmente os testes, HEADLESS deve ser false.

Os testes por rodarem em um container necessitam da ferramenta VcXsrc. A instalação é simples, e assim que executar o programa, selecione a opção Multiple Windows, depois na segunda tela Start no client, e finalmente na terceira tela marque a opção Disabling access control.

Assim que VcXsrc estiver rodando, execute o comando de testes. Uma instância do browser será automaticamente aberta e será possível visualizar cada passo feito pelos testes.

Notas

• Os testes a serem rodados podem ser determinados preenchendo o campo command presente docker-compose-tests.yml com os nomes referentes aos testes.
• É criado volume para o código-fonte dos testes, de forma que alterações nos arquivos sejam refletidas sem necessidade de refazer a imagem.

Sem docker

1. Em um novo terminal, acesse a raíz do repositório, mude para o diretório ./__tests__ e instale as depedências:

cd ./__tests__
npm install

2. Crie um arquivo .env com as variáveis da ambiente exemplificadas no arquivo .env.example presente na raíz do diretório ./__tests__. A função de cada variável está explicada no arquivo.

3. Execute os testes com npm test.

Experiência

Há muito o que ser feito para melhorar a aplicação. Boas e más escolhas foram feitas durante o projeto. Foi desafiador implementar uma API em Golang, linguagem que tenho pouco domínio, e integrá-la ao front-end desenvolvido com React.js e TypeScript. Era uma possibilidade usar Node e Express para a API, o que teria sido mais fácil por causa de minha experiência e pela quantidade de artigos disponíveis sobre a utilização integrada dessas tecnologias. Optei por Golang para aprender mais sobre a linguagem e buscando a performance que ela promete.