# Acesso ao projeto em produção Despesas Pessoais

Obs.: Para testar a aplicação existe um o usuário já criado "login=root senha=toor" ou pode criar um novo usuário.

Descrição

Para o desenvolvimento desse trabalho foi realizada uma pesquisa direcionada à implementação que propõe a construção uma aplicação responsiva e iterativa aperfeiçoada de sistemas. Essa aplicação foi baseada nas tecnologias Pyhton, Flask, Jinja, Javascript, Jquery, bootstrap5 e Sqlite3 como banco de dados. A aplicação se encontra dockerizada e publicada no Azure. Para o desenvolvimento teórico desse trabalho foi realizada uma pesquisa direcionada à implementação que propõe a construção iterativa aperfeiçoada de sistemas. A aplicação proposta permitirá que o usuário crie uma conta e cadastre e controle suas despesas de entrada e saída "Despesas e Receitas",

Tecnologias Utilizadas

• Python3 é uma linguagem de programação de alto nível e interpretada, conhecida por sua simplicidade, legibilidade e facilidade de uso. Foi criada por Guido van Rossum e lançada pela primeira vez em 1991. Python suporta vários paradigmas de programação, incluindo programação procedural, orientada a objetos e funcional. Possui uma grande biblioteca padrão e um vasto ecossistema de bibliotecas e ferramentas de terceiros, tornando-a uma escolha popular para uma ampla variedade de aplicações, incluindo desenvolvimento web, computação científica, análise de dados, aprendizado de máquina e inteligência artificial. Python é um software livre e de código aberto, e é executado em muitas plataformas, incluindo Windows, macOS, Linux e UNIX.

• Flask é um microframework para desenvolvimento de aplicações web em Python. Ele foi criado por Armin Ronacher em 2010 e é conhecido por ser leve, flexível e fácil de usar. Flask suporta extensões para adicionar funcionalidades à aplicação, como autenticação, banco de dados, cache, entre outras. Ele também utiliza a Jinja2 como template engine, permitindo a criação de templates dinâmicos para as páginas web. Flask é uma ótima escolha para projetos pequenos e médios que não necessitam de um framework completo, como o Django. Ele é usado por empresas como Netflix, Airbnb e Lyft. Além disso, a comunidade Flask é ativa e há muitos recursos disponíveis para aprender e utilizar o framework.

• Jinja é uma engine de templates em Python utilizada principalmente em frameworks web, como o Flask e o Django. Ela permite a criação de templates dinâmicos, onde o conteúdo pode ser preenchido com dados vindos de variáveis e objetos Python. Jinja utiliza uma sintaxe simples e intuitiva para definir os templates, e possui recursos avançados como herança de templates e macros, permitindo a criação de templates complexos e reutilizáveis. Além disso, Jinja é altamente customizável e suporta extensões para adicionar funcionalidades específicas ao template engine. Jinja é amplamente utilizado na comunidade Python para desenvolvimento web e também para geração de documentos e relatórios dinâmicos.

• JavaScript é uma linguagem de programação que permite a criação de aplicações web modernas e interativas. Com ele, é possível adicionar recursos dinâmicos às páginas web, como animações, validação de formulários, interação com usuários e muito mais. Além disso, JavaScript é utilizado tanto no lado do cliente, executado pelo navegador, quanto no lado do servidor, por meio do Node.js. Com isso, é possível criar aplicações web completas utilizando apenas uma linguagem de programação. A sintaxe de JavaScript é simples e fácil de aprender, o que a torna uma das linguagens mais populares e utilizadas no desenvolvimento web atualmente.

• jQuery é uma biblioteca de JavaScript que simplifica o desenvolvimento web ao oferecer uma série de funcionalidades prontas para uso, como manipulação de elementos HTML, eventos, animações, AJAX e muito mais. Com jQuery, é possível escrever códigos mais simples e concisos, reduzindo o tempo de desenvolvimento e melhorando a experiência do usuário. Além disso, jQuery é suportado por todos os navegadores modernos e possui uma grande comunidade, o que significa que há muitos recursos e plugins disponíveis para estender suas funcionalidades. Por isso, jQuery é amplamente utilizado em projetos web de todos os tamanhos e complexidades.

• CSS é a sigla para "Cascading Style Sheets" (Folhas de Estilo em Cascata), uma linguagem utilizada para definir a aparência e o layout de páginas web. CSS trabalha em conjunto com HTML e JavaScript, permitindo que os desenvolvedores criem estilos visuais, como cores, fontes, tamanhos, espaçamentos, bordas, efeitos de transição e muito mais. Ele separa a apresentação visual do conteúdo HTML, permitindo que o mesmo conteúdo seja exibido de várias maneiras em diferentes dispositivos, sem precisar duplicar o código. CSS é uma das tecnologias fundamentais para o desenvolvimento de sites modernos e responsivos, permitindo que os designers criem páginas web atraentes e acessíveis.

• Bootstrap 5 é a versão mais recente do popular framework front-end para desenvolvimento web. Ele oferece um conjunto de recursos pré-estabelecidos para facilitar a criação de sites responsivos e móveis, como tipografia, formulários, botões, navegação, grades, componentes e muito mais. Algumas das principais diferenças entre o Bootstrap 5 e as versões anteriores incluem:

  • Maior foco em CSS puro: o Bootstrap 5 reduziu a dependência de JavaScript e aumentou a ênfase no CSS, tornando-o mais rápido e fácil de personalizar;
  • Redução no tamanho do arquivo: o Bootstrap 5 reduziu o tamanho do arquivo em comparação com as versões anteriores, tornando-o mais rápido para carregar;
  • Remoção do suporte ao Internet Explorer: o Bootstrap 5 abandonou o suporte ao Internet Explorer, o que significa que é possível utilizar recursos mais modernos e melhorar o desempenho;
  • Simplificação da documentação: a documentação do Bootstrap 5 foi simplificada e melhorada para facilitar a navegação e a compreensão dos recursos disponíveis. Essas são apenas algumas das principais diferenças entre o Bootstrap 5 e as versões anteriores. No geral, o Bootstrap 5 oferece uma série de melhorias e recursos para facilitar o desenvolvimento web moderno e responsivo.

• SQLite3 é um sistema de gerenciamento de banco de dados relacional (RDBMS) que é incorporado em muitas aplicações de software para armazenar e gerenciar dados. Ele é uma biblioteca escrita em linguagem C que fornece uma solução completa de banco de dados em um único arquivo, sem necessidade de um servidor ou configurações complexas. SQLite3 é uma das formas mais populares de banco de dados devido à sua eficiência, confiabilidade, portabilidade e facilidade de uso. É amplamente utilizado em aplicações móveis, navegadores, sistemas embarcados e outras aplicações que exigem armazenamento de dados leves e flexíveis. A sintaxe do SQL do SQLite3 é bastante semelhante à sintaxe de outros sistemas de gerenciamento de banco de dados, como MySQL e PostgreSQL.

Estrutura e Descrição da aplicação

• app.py

  Nesse arquivo contém código Python usado definir e executar toda a lógica de negócios da aplicação. É o arquivo principal do projeto Flask, que é um framework web em Python.

• DespesasPessoaisDB.db

  Arquivo que representa a base de dados da aplicação.

• db

  • dataset

    Contém arquivos para popular as tabelas para realização de testes.

  • migrations

    Contém arquivos para criação de todas as tabelas do banco de dados.

• static

  • img

    Essa pasta contém arquivos de imagens para serem utilizados na aplicação.

  • js

    Essa pasta contém arquivos de script usado para adicionar interatividade e dinamismo as página web. Ele contém código que é executado pelo navegador do usuário e pode ser usado para manipular elementos HTML, criar animações, validar formulários, entre outras funcionalidades. obs.: Todos os arquivos contém código para controle do design do saldo ficar verde quando positivo ou vermelho quando negativo.

    • Categoria.js

      Esse arquivo contém coódigo javascript e Jquery para controlar tanto a página categoias.html como a categoriasList.html :

      • Inicialização do mascaramento dos campos tipo dinheiro formatados em pt-br;
      • Incialização das tabelas de listagem usando DataTables uma biblioteca que usa Jquery e Bootstrap para adcionar funcionalidade como paginação e pesquisa;
      • Funções que realizam requisições por submit ou ajax para cada botão;
      • Funções para controle e exbição de mensagens informantivas tais com erro ou se alguma procedimento foi executado corretamente como Incluão, alteração e exclusão;

    • despesas.js

      Esse arquivo contém coódigo javascript e Jquery para controlar tanto a página despesas.html como a despesasList.html :

      • Inicialização do mascaramento dos campos tipo dinheiro formatados em pt-br;
      • Incialização das tabelas de listagem usando DataTables uma biblioteca que usa Jquery e Bootstrap para adcionar funcionalidade como paginação e pesquisa;
      • Funções que realizam requisições por submit ou ajax para cada botão;
      • Funções para controle e exbição de mensagens informantivas tais com erro ou se alguma procedimento foi executado corretamente como Incluão, alteração e exclusão;

    • lancamentos.js

      Esse arquivo contém coódigo javascript e Jquery para controlar tanto a página lancamentos.html :

      • Incialização das tabelas de listagem usando DataTables uma biblioteca que usa Jquery e Bootstrap para adcionar funcionalidade como paginação e pesquisa;
      • Funções que realizam requisições por submit ou ajax para os botões editar e deletar;
      • Funções para controle e exbição de mensagens informantivas tais com erro ou se alguma procedimento foi executado corretamente como Incluão, alteração e

    • receitas.js

      Esse arquivo contém coódigo javascript e Jquery para controlar tanto a página receitas.html como a receitasist.html :

      • Inicialização do mascaramento dos campos tipo dinheiro formatados em pt-br;
      • Incialização das tabelas de listagem usando DataTables uma biblioteca que usa Jquery e Bootstrap para adcionar funcionalidade como paginação e pesquisa;
      • Funções que realizam requisições por submit ou ajax para cada botão;
      • Funções para controle e exbição de mensagens informantivas tais com erro ou se alguma procedimento foi executado corretamente como Incluão, alteração e exclusão;

  • favicon.ico

    É um pequeno ícone usado para identificar a página da web no navegador. Ele aparece na aba do navegador.

  • styles.css

    Neste arquivo contém a folha de estilos utilizado usada para definir a aparência e o layout dos elementos HTML da aplicação. Ele é usado para definir as propriedades visuais dos elementos, como cores, fontes, tamanhos e posicionamentos, além de fornecer estilos para animações e efeitos visuais.

• templates

  • layout.html

    Contém um modelo de layout comum para todas as páginas da aplicação

  • login.html

  

  • register.html

  

  • categorias.html

  

  • categoriasList.html

  

  • despesas.html

  

  • despesasList.html

  

  • lancamentos.html

  

  • receitas.html

  

  • receitasList.htmll

  

Referências e Agradecimentos