Find.it

Aplicação desenvolvida com fins didáticos durante a disciplina de Web I, ofertada no IMD (Metrópole Digital) na UFRN. Nela é possível registrar usuários e, a partir deles, itens perdidos, encontrados ou doados. É uma aplicação de utilização relativamente simples, mas repleta de recursos, com responsividade e focada na experiência do usuário.

Sumário

• Autores
• Tomada de decisões
  • Pasta de recursos
• Recursos, implementações e dados
• Instruções (Gerais)
• Instruções (Front-end)
• Instruções (Back-end)
• Instruções (Produção)
  • Compilar o modo produção
  • Por que usar o modo produção?

Autores

• Lucas Marcel
• Henrique Barbosa
• Fellipe Souza

Tomada de decisões

Todas as decisões tomadas para o desenvolvimento dessa aplicação foram feitas levando em conta os interesses e conhecimentos dos membros do grupo. E como o foco é o Front-end nessa disciplina, também deixamos de lado algumas coisas no Back-end. Por exemplo: não estamos criptografando as senhas no banco de dados (então nada de usar senhas reais, viu?).

Imagens

Apenas para que não estranhe, a pasta images existe para armazenar algumas imagens que poderemos usar na apresentação do projeto. Para que não seja necessário procurar na internet durante a apresentação.

As imagens importadas/gerenciadas pelo backend ficam guardadas em data/items e data/users.

Recursos, implementações e dados

Usamos:

• Busca avançada de texto utilizando Full Text Search;
• Virtualização;
• Paginação;
• Cache;
• Mensagens rápidas (toasts);
• Caixas de diálogo;
• Validação (no backend e no frontend);
• Importação e recorte de imagens;
• Autenticação com JSON Web Token;
• Middleware;
• Grade fluída (masonry);
• Página de erros;
• Login redirecionável (para quando o token expirar);
• Entre outras coisas.

Além da nossa própria API, consumimos dados do IBGE para obter a lista das cidades.

Instruções (Gerais)

Certifique-se de estar realizando suas alterações na branch apropriada e quando clonar o repositório, execute o script scripts/install_extensions para instalar as extensões recomendadas para o VSCode. O script está dispoível em .bat para o Windows e .sh para o Linux. Para tal é importante que o comando code está disponível no terminal para que o script funcione. Selecionei as extensões a dedo e algumas delas estão configuradas para formatar o código ao salvar os arquivos.

Para facilitar, se você já tiver o Pnpm instalado, basta executar um dos seguintes comandos (variando entre Windows e Linux):

pnpm windows:extensions

pnpm linux:extensions

Se alguma das extensões já estiverem instaladas, infelizmente esse comando vai falhar. Porém, as extensões também estão como recomendadas nas configurações do projeto.

Instruções (Front-end)

Certfique-se de ter instalado o Node e o Pnpm, de preferência as versões mais recentes.

Para iniciar o servidor frontend, acesse a pasta do frontend no terminal usando o comando cd, execute pnpm install para instalar as dependências e depois execute pnpm dev. Estão disponíveis também os comandos pnpm format (formata o código e aponta falhas) e o pnpm fix (corrige as falhas apontadas). Porém, se as extensões estiverem instaladas e fizemos tudo corretamente, então tanto a formatação como a correção serão realizadas automaticamente ao salvar o arquivo que está sendo editado.

Instruções (Back-end)

Tenha o Java (JDK 21 ou 23) instalado na sua máquina, como também o Maeven.

Para executar, basta clicar com o botão direito mo arquivo backend/src/main/java/com/find/it/backend/Application.java e selecionar Run Java. Isso requer que as extensões recomendadas estejam instaladas.

Atenção: É muito importante que a aplicação Java esteja sendo executada no diretório raíz do projeto, que é onde se encontra pasta data. Caso contrário, ele criará uma nova pasta e um novo banco de dados e você precisará adicionar nela as pasta data/users e data/items.

Instruções (Produção)

Para facilitar lidar com o modo produção, há uma série de scripts desenvolvidos tanto para o Windows como para o Linux. Todos executáveis por comandos do Pnpm na raíz do projeto (tem que está fora da pasta frontend e backend para executar).

Compilar o modo produção

Não é tão trivial a sequência de passos que seguiremos, portanto, é importante atenção. Antes de mais nada, certifique-se de ter aberto o terminal (ou o VSCode) como administrador e que a variável de ambiente JAVA_HOME está bem definida. O primeiro comando a executar é o de build do backend:

pnpm windows:backend:build

pnpm linux:backend:build

Feito isso, é importante colocar o backend para rodar no modo produção antes de compilar o frontend:

pnpm windows:backend

pnpm linux:backend

Atenção: o backend costuma demorar bastante para iniciar completamente. E geralmente termina com um aviso como esse: "Mass indexing complete."

Em seguinda, em outro terminal, mas também na raíz do projeto e mantendo o backend rodando, devemos executar o build do frontend:

pnpm windows:frontend:build

pnpm linux:frontend:build

Ao contrário do backend, o modo produção do frontend sempre será recompilado ao chamar o build. Portanto, ele sempre demora.

Por fim, podemos iniciar o frontend no modo produção:

pnpm windows:frontend

pnpm linux:frontend

Uma vez que temos o backend e o frontend compilados, podemos ignorar os comandos de build, mas é bom manter a ordem de execução por questão de cache do frontend.

Por que usar o modo produção?

Embora não temos como objetivo realizar o deploy dessa aplicação (não vai ser necessário), esse modo é extremamente mais rápido, já que é compilado com antecedência.