Nesta seção será apresentada a implementação do sistema. O desenvolvimento é divido em front-end, página de apresentação ao usuário, e back-end, desenvolvimento das funções de servidor, que neste caso, como foi utilizado o NodeJs, ainda visa as aplicações JavaScript serem trazidas para o servidor. Então, a estruturação do back-end é dividida em, conforme apresentado na Figura 12: “dao”, os arquivos com funções de relações com o banco de dados, “db”, arquivo com funções de conexão e desligamento do banco de dados, “model”, arquivos que estruturam objetos, e “ws”, arquivos que fornecem os services para um caminho Uniform Resource Locator (URL) sugerido.
Figura 12 - Estrutura de pastas do servidor
Fonte: Autoria própria
São criadas subpastas para armazenar os aquivos JavaScript “.js” de acordo com suas funções. A pasta “dao” armazena os arquivos que fazem as funções de conexão com o banco, como salvar, excluir, listar e atualizar. Nessa pasta também estão os arquivos com as estruturas de busca, conforme pode ser observado na Listagem 1.
Listagem 1 - Exemplo de arquivo DAO
Fonte: Autoria própria
Imagem que faz parte do arquivo DAO para as transações, exemplificando a busca de todas as transações em uma função JavaScript, ou da busca de apenas débitos. Outro exemplo está na Listagem 2, que mostra a função de busca por modalidade, que aceita tanto um objeto do tipo modalidade, ou apenas uma string da modalidade requerida, por fim faz a busca no banco e retorna a lista de transações desejadas.
Listagem 2 - Exemplo 2 de arquivo DAO
Fonte: Autoria própria
A segunda pasta é a “db”, que possui os arquivos de configuração para a conexão com o banco de dados, exportando as funções de conectar e desconectar, apresentadas na Listagem 3.
Listagem 3 - Arquivo para conexão com o Banco de Dados
Fonte: Autoria própria
Ressalta-se o uso da biblioteca mongoose, que possui todas as funções necessárias para esse sistema em sua estrutura.
A terceira pasta é a “model”, que armazena os arquivos de definição de objetos e suas propriedades. Como o arquivo “transacao.model.js” que estrutura uma transação para se relacionar de forma mais adequada com o banco de dados e o front-end, apresentado na Listagem 4.
Listagem 4 - Exemplo de arquivo Model no servidor
Assim, depois de definidas suas propriedades, é exportado como um “model” da estrutura mongoose. Agregando ao objeto as funções disponíveis de comunicação com o banco, dando ao objetoDAO a possibilidade de se formar nos moldes dessa estrutura.
A próxima pasta “node_modules”, armazena os arquivos do próprio NodeJs e suas bibliotecas, como a Mongoose ou JWS. Os arquivos não foram desenvolvidos neste trabalho, mas foram importados a partir de bibliotecas criadas por outros desenvolvedores.
A última pasta, a “ws”, define as rotas de comunicação com o front-end da aplicação, dando a cada arquivo uma organização de buscas e retornos, apresentado na Listagem 5.
Listagem 5 - Exemplo arquivo WebService no servidor
Na pasta raiz do projeto está o arquivo “app.js, que é responsável pela integração entre os módulos do sistema e pela execução do sistema, o código pode ser observado na Listagem 6.
Listagem 6 - Arquivo de execução do servidor
Fonte: Autoria própria
Por fim, este arquivo correlaciona os Wss e coloca o servidor em execução, disponibilizando caminhos de conversa que serão acessados pelo fron-tend e com o banco de dados. O próprio NodeJS constrói a aplicação através do comando “node /nome do arquivo/”.
A segunda etapa é o desenvolvimento do front-end, feito com a biblioteca “Angular” e a biblioteca “Angular Material”, desenvolvida na seguinte estrutura, pasta “components”, arquivos de componentes genéricos para uso futuro, pasta “main-nav”, possui o código HyperText Markup Language (HTML), Sassy CSS (SCSS) e TypeScript da barra de menu
presente em todas as páginas do sistema, “models”, como no servidor, possuí a estruturação de objetos, “modules”, possuí arquivos de importação de modulos, “pages”, todos os códigos
HTML, CSS e TypeScriptdas páginas do sistema, “service”, os arquivos com funções para se comunicar com o servidor por meio de rotas pré-estabelecidas. Esta estrutura é apresentada na Figura 13.
Figura 13 - Estrutura de pastas do cliente
Fonte: Autoria própria
É importante ressaltar, primeiramente, a pasta “models”, que contém, da mesma maneira que no servidor, a estruturação de um objeto com seus atributos. Assim, no momento de comunicação, a estruturação do objeto se dá de maneira muito simples, lembrando que o MongoDB é baseado em documentos, logo, sua manuseabilidade é menos rígida. Assim, a estruturação de um objeto no aplicativo de front-end, se dá como na Listagem 7.
Listagem 7 - Exemplo de arquivo Model no cliente
Fonte: Autoria própria
O framework Angular é desenvolvido na linguagem TypeScript, usando, assim, além de sua estruturação padrão, as bibliotecas fornecidas por ela, como “Date”.
Na pasta raiz do projeto se encontra o arquivo “app-routing.module.ts”, que estrutura os caminhos feitos pelas páginas acessadas pelo usuário, apresentada na Listagem 8.
Listagem 8 - Arquivo de rotas no cliente
Nota-se a estruturação das páginas do sistema, disponibilizando está a biblioteca a possibilidade de subcaminhos, tornando mais rápido o acesso de páginas que pertencem a um determinado grupo. Como no path “cadastro”, que se subdivide em “modalidade-transacao”, conta e “usuário”.
Também são criados previamente os arquivos “services” que fazem a comunicação com o servidor, alimentando os modelos, ou transferindo-os. Neste arquivo, são enviados pacotes às rotas definidas nos arquivos “ws” do back-end, como pode ser visualizado na Listagem 9.
Listagem 9 - Exemplo de arquivo Service no cliente
Portanto, utilizando-se da biblioteca “HttpClient”, são realizados os posts e gets, do cliente para o servidor. Caso seja necessário, pode-se tratar algum dado antes de enviá-lo, mas isto foi feito nas páginas typescript dos componentes de apresentação.
O primeiro componente criado no desenvolvimento foi o “main-nav”, que é o menu superior presente em todas as páginas. Em seu HTML, usa as tags disponibilizadas pelo Angular Material, visualizadas na Listagem 10.
Listagem 10 - Exemplo de arquivo HTML
Fonte: Autoria própria
Dá-se notoriedade as opções disponibilizadas pela biblioteca, como [ngClass], que permite executar uma estrutura “if” para definir qual classe será atribuída ao objeto, ainda acessando variáveis ao código TypeScript ligado a esta página, como “isHandset$”, que é uma variável booleana para definir se o tamanho da tela é maior ou menor que X.
Ainda abaixo do toolbar é definido uma tag da estrutura angular, para apresentar o disposto nas rotas definidas anteriormente. Está é a tag “<router-outlet>”.
Também foram criados componentes de uso geral, como o “date-picker” personalizado nos padrões pt-BR e dialogs para alertar ou confirmar funções executadas no sistema, que podem ser vistos, respectivamente nas Listagens 11, 12 e 13.
Listagem 11 - Exemplo de arquivo TS para componente de uso futuro
Fonte: Autoria própria
A classe que adapta o componente “DatePicker” estende da própria classe do Angular Material, assim, se mudam apenas propriedades específicas, como apresentação da data atual e usa o tema disponibilizado pela Google.
Listagem 12 - Exemplo de arquivo HTML para componente de uso futuro
Fonte: Autoria própria
Listagem 13 - Exemplo 2 de arquivo HTML para componente de uso futuro
Fonte: Autoria própria
Esses componentes de uso genérico, que são construídos durante a criação da página, devem ser especificados no arquivo de configurações de módulo, na pasta raiz “app.module.ts” como componentes de entrada, da forma apresentada na Listagem 14.
Listagem 14 - Declaração dos componentes de entrada
Fonte: Autoria própria
Então, foram desenvolvidos os componentes principais, que são os de apresentação das funcionalidades. O primeiro exemplo é o componente para lançamento das transações, chamado de fechamento de caixa. Ele possui um desenvolvimento de arquivos HTML, TypeScript e SCSS que ultrapassa quinhentas linhas de código, portanto, será resumido seu funcionamento.
Depois de especificadas as tags html e suas opções. O arquivoTypeScript entra em ação, sendo implementada a interface “OnInit” que permite chamar funções durante o carregamento inicial da página, portanto, dentro da sua implementação foram chamadas as funções de população de arrays relativos aos objetos cadastrados no banco utilizando através o arquivo
Listagem 15 - Exemplo 2 de arquivo TypeScript de tela do cliente
Fonte: Autoria própria
Logo, nas primeiras linhas mostra-se a aplicação dos services, colocados no momento da construção do arquivo TypeScript, depois, a criação de uma função que utiliza o service para recorrer ao servidor e alimentar as transações que serão exibidas, por fim, a chamada do
ngOnInit que executa essas funções no momento da construção da página HTML.
Outro exemplo é a construção de gráficos feita nos relatórios. Lá, foi usada a biblioteca “chart.js”, que fornece gráficos prontos, é necessário apenas fornecer os dados de maneira correta. Então, na página que exibe as últimas vendas em gráfico, foi preciso desenvolver uma função para criar o intervalo de datas. O código de um dos gráficos pode ser observado na Listagem 16.
Listagem 16 - Função para gerar intervalo de datas
Fonte: Autoria própria
Depois, na Listagem 17, a função que por meio dos services busca os dados no banco.
Listagem 17 - Função para buscar dados referentes ao relatório
E por fim, a função que constrói o gráfico, nos parâmetros do Chart.Js, apresentados na Listagem 18.
Listagem 18 - Função para gerar gráfico
Fonte: Autoria própria
Também utilizado nas páginas de relatório, foi implementado ao arquivo scss global uma classe para definir o que será impresso ou não, apresentado na Listagem 19.
Listagem 19 - Classe para definir impressão