Documentação do front end da ferramenta HidroFix
Esta documentação tem o intuito de registrar adequadamente o uso e desenvolvimento de ferramentas e possíveis soluções de front end para a aplicação de visualização e adequação semiautomatizada de gráficos de nível de água para o Censipam, intitulada HidroFix.
Tecnologias principais envolvidas
Next.js
O Next.js é um framework flexível para o desenvolvimento em React, o que permite uma melhor adequação de ferramentas a uma identidade visual e desenvolvimento simplificado de features com a necessidade de roteamento.
Bokeh
O Bokeh é uma biblioteca Python para a plotagem de gráficos de maneira simples com o intuito de serem visualizados em aplicações Web.
Inicialização da aplicação
Docker Compose
Para a execução do projeto com Docker Compose, é necessário que o Docker e o Docker Compose estejam adequadamente instalados no computador.
Após a instalação e a configuração adequada das variáveis de ambiente e de uma network que englobe os contêineres da API e do backend, é possível criar os contêineres da aplicação a partir do uso do comando abaixo:
docker compose up --build
A flag -d pode ser adicionada para liberar o terminal em que o comando é executado.
Inicialização manual
Na eventualidade do contêiner não funcionar adequadamente, é possível executar o projeto a partir do terminal com comandos manuais. O projeto utiliza-se do instalador e gerenciador pip para isso.
Com o pip instalado, navegue até a pasta bokeh_server e execute este comando.
pip install -r requirements.txt
Com isso, todos os pacotes necessários serão instalados automaticamente. Para inicializar a aplicação deve-se executar, na pasta do projeto:
python3 bkapp.py
Após a execução destes comandos, deve-se abrir outro terminal para a execução da aplicação Next.js. Para tanto, deve-se navegar até a pasta estacoes.
cd estacoes
O projeto está configurado para fazer uso do gerenciador de pacotes npm. Na primeira inicialização do projeto, o uso do comando abaixo para a instalação de todas as dependências é necessário.
npm install
Com a instalação das dependências, o projeto pode ser inicializado utilizando-se do comando abaixo.
npm run dev
Ainda, os outros repositórios dos quais esta aplicação depende (A API, o banco de dados e o Keycloak) devem ser instalados e inicializados de acordo com o documentado a fim de que a aplicação seja executada como desejado. Para tanto, deve-se seguir o que está delineado no repositório banco_censipam, no repositório API e no repositório instancia-keycloak.
Histórico de versão
| Versão | Data | Descrição | Autor | Revisor |
|---|---|---|---|---|
1.0 | 11/01/2024 | Criação do documento | Felipe M. | - |
1.1 | 19/01/2024 | Adição da seção 'BokehJS' | Felipe M. | - |
1.3 | 24/01/2024 | Remoção da seção de utilização do projeto | Felipe M. | - |
1.4 | 02/02/2024 | Atualizações do novo projeto | Felipe M. | - |
1.5 | 21/02/2024 | Atualizações de integração | Felipe M. | Cássio Reis |
1.6 | 19/03/2024 | Atualizações para corresponder à refatoração | Felipe M. | Cássio Reis |
1.7 | 21/03/2024 | Reescrita dos parágrafos iniciais | Felipe M. | Cássio Reis |
1.8 | 15/07/2024 | Atualização dos comandos e repos | Felipe M. | Cássio Reis |
1.9 | 09/12/2024 | Atualização dos comandos | Felipe M. | Cássio Reis |