O painel da participação foi desenvolvido para mostrar o histórico de utilização de dois dos canais de participação da Câmara dos Deputados, que estão disponíveis na plataforma eDemocracia.
- Seleção dos dados por períodos:
- Todo o período -> Os dados são apresentadas de forma compilada anualmente;
- Anual -> Ao selecionar um ano específico os dados são apresentados de forma compilada mensalmente;
- Mensal -> Ao selecionar um mês específico de um ano os dados são apresentados de forma compilada diariamente ao longo do mês;
- Visualização dos dados em tabelas e gráficos;
- Ranking dos dados
- Ordenação das colunas de dados de forma crescente e decrescente;
- Pesquisa dos termos dentro de todos os dados;
- Paginação;
- Download dos dados em formato .csv;
- Lista de API's e códigos fonte das aplicações do portal e-Democracia;
As telas da aplicação foram protipadas na plataforma Figma, e podem ser visualizadas em: https://www.figma.com/file/gQaMtt8wXbXyWUhRfrb2VW/Participa?node-id=1727%3A3552
O painel da participação foi desenvolvido em javascript. Utilizando o NextJS(framework ReactJS) e a biblioteca de componentes Material-UI. Versões utilizadas durante o desenvolvimento da aplicação:
- NextJS: 10.0.6;
- ReactJS: 17.0.1;
- Material-UI: 4.9.14;
- Node: 12.20.2;
- NPM: 6.14.11;
Outras bibliotecas e componentes open-source foram utilizados durante o desenvolvimento da aplicação, estes podem ser visualizados no arquivo package.json;
Antes de começar, você vai precisar ter instalado em sua máquina o NodeJS na versão 12.20.2 ou superior. Caso não tenha esta dependência instalada em sua máquina acesse Node.js para instalar de acordo com a seu sistema operacional.
- Realize o download da aplicação, com por exemplo o git clone:
git clone https://github.com/labhackercd/cpp-participacao-frontend.git - Acesse a pasta da aplicação que foi baixada;
- Na raiz do projeto, onde esta presente o arquivo package.json, execute o seguinte comando para instalar as dependências de produção da aplicação:
npm install --only=prod - Após a instalação das dependências realize o build da aplicação:
npm run build - Execute a versão de produção da aplicação:
npm run start - A aplicação estará sendo executada na porta 3000 do servidor local.
- Realize o download da aplicação, com por exemplo o git clone:
git clone https://github.com/labhackercd/cpp-participacao-frontend.git - Acesse a pasta da aplicação que foi baixada;
- Na raiz do projeto, onde esta presente o arquivo package.json, execute o seguinte comando para instalar todas as dependências da aplicação:
npm install - Após a instalação das dependências execute o servidor de desenvolvimento por meio do comando:
npm run dev - A aplicação estará sendo executada na porta 3000 do servidor local.
- Caso deseje executar os testes durante o desenvolvimento, execute o comando:
npm run test
A aplicação foi desenvolvida com parâmetros iniciais personalizados para o portal e-Democracia da Câmara dos Deputados, tendo estes dados sendo obtidos da mesma. O portal e-Democracia da Câmara dos Deputados teve uma nova versão lançada (versão X.X.X) onde as novas API's estão presentes.
Caso deseje alterar a fonte dos dados que serão obtidos na plataforma é necessário configurar as variáveis de ambiente da aplicação. Os arquivos editados de acordo com o ambiente de execução da aplicação devem ser:
- Para uma aplicação executada em ambiente de produção: .env.production ;
- Para uma aplicação executada em ambiente de desenvolvimento: .env.development ;
- Para a execução da suite de testes: .env.test;
Outros parâmetros da aplicação podem ser personalizados, como textos, títulos de seções, padrões inicias para obtenção dos dados e etc...
Essas personalizações podem ser feitas atualizando as constantes presentes na pasta settings, localizada dentro da pasta /src da aplicação.
- Como trocar o logo da aplicação?
- Para alterar o logo da aplicação substitua a imagem importada no componente ApplicationLogo pela imagem desejada, onde recomendamos que a mesma seja posicionada em src/assets/images/logos
- Como alterar o nome da aplicação?
- Para alterar o nome da aplicação altere a variável APPLICATION_NAME localizada no arquivo src/settings/applicationOptions/index.js .
- Como adicionar ou remover um item do carrossel da página inicial?
- Altere o objeto da variável 'carouselItens' localizada em src/settings/texts/InitialPage/index.js.