DataFlow

Trabalho de Conclusão de Curso

O Projeto DataFlow ideializado por mim, e executado junto com meus colegas Henrique Curtis e Rodrigo Lopes foi meu TCC do curso Técnico de Informática. Por conveniência deixarei aqui nossa monografia para leitura:

Fundação Vale paraibana de Ensino 
Colégio Técnico “Antônio Teixeira Fernandes” 
Curso Técnico de Informática

Miguel Brito Barbosa

Rodrigo Lopes Marques

Henrique Curtis Correa Marques

DATAFLOW APLICAÇÃO WEB GERADORA DE CLASSES E CÓDIGOS SQL A PARTIR DE UM DIAGRAMA DE BANCO DE DADOS RELACIONAL

São José dos Campos, 
SP 2023

Relatório Final apresentado ao Colégio Univap –

Unidade Centro, como parte das exigências

do curso Técnico em Informática, para obtenção do

Título de Técnico em Informática.

Orientador: Prof. Me. Hélio Lourenço Esperidião Ferreira

Relatório Final aprovado para obtenção do título de Técnico em Informática, do Curso Técnico em Informática do Colégio Técnico “Antônio Teixeira Fernandes”, da Fundação Valeparaibana de Ensino, São José dos Campos, SP.

À minha família, e aos meus amigos,

parceiros leais em todas as etapas.

Esta conquista é fruto do apoio constante

que recebi de cada um de vocês.

Muito obrigado.

AGRADECIMENTOS

Agradeço a Deus por minha vida, família e amigos. Aos meus pais, pelo amor, incentivo e apoio incondicional. À Universidade do Vale do Paraíba (Univap) Centro, pela oportunidade de fazer o curso. Um agradecimento especial ao professor Hélio, meu orientador, pela orientação, apoio e confiança ao longo deste percurso.

RESUMO

A produtividade e qualidade durante o processo de produção de software é um tópico altamente discutido na área de desenvolvimento, a redução de custos e o resultado a curto prazo é algo altamente procurado pelas empresas de tecnologia. Genericamente, o desenvolvimento de software apresenta algumas fases, uma das principais é a modelagem de banco de dados, o qual toda regra de negócio será baseada. Logo após a construção do banco, linguagens de programação são utilizadas para construir classes que se conectarão ao banco de dados, fazendo o intermédio entre o software e o banco. Diante desse cenário, foi desenvolvido uma aplicação web geradora de classes e códigos SQL a partir de um diagrama de banco de dados relacional. Onde o usuário, ao se cadastrar no sistema, terá a possibilidade de criar projetos, construir diagramas relacionais em uma interface moderna, e a partir desse diagrama construído gerar códigos SQL baseados na sua construção e classes de conexão em diversas linguagens de programação. Podendo Automatizar a criação das classes de entidades e conexão com o banco de dados do projeto.

Palavras-Chave: Geração de Código. Diagrama Relacional. Banco de Dados. SQL. Scaffolding.

1. INTRODUÇÃO

As maiores preocupações existentes hoje sobre qualidade de software são pertinentes a redução de tempo de desenvolvimento, redução de custos e resultado a curto prazo. Assim, se fazendo necessário o uso de ferramentas de geração de código automático durante o desenvolvimento. Dessa forma, evita-se a perda de tempo ao implementar atividades rotineiras e reduz-se a possibilidade de erros (MALCOLM, 2001).

A produtividade na codificação de sistemas na área de Desenvolvimento de Software, seja no Front-end ou no Back-end, é um tópico altamente discutido pelas empresas de desenvolvimento. A competitividade na indústria vem se tornando cada vez mais forte, pois, cada vez mais, é preciso encontrar recursos que garantam incremento na produtividade, aliado a eficiência e a qualidade. Na indústria de software não é diferente. A produção de software envolve um complexo processo que consume recursos de tempo, dinheiro e pessoal, a medida em que os sistemas se tornam mais complexos a cada dia. Frente a esse cenário, há uma tendência crescente de desenvolvedores de software usarem técnicas, padrões e ferramentas que possam tornar este processo mais rápido e consequentemente mais barato (MALCOLM, 2001).

A criação de ferramentas para otimização da produção de software torna-se uma necessidade. Algumas das maneiras de se obter estes resultados e eliminar os riscos inerentes do desenvolvimento rápido é com a utilização de padrões de projetos, uso de IDE (Integrated Development Environment), framworks e geração automatizada de código, podendo, muitas vezes, estes conceitos serem utilizados em conjunto e integrados (MARTINS FILHO, 2017).

O desenvolvimento de um software, genericamente, apresenta três fases: definição, desenvolvimento e manutenção. A Engenharia de Requisitos localiza-se na fase de definição, sendo responsável por entender o funcionamento do software, como será a experiência do usuário final e como o sistema irá influenciar nos negócios do cliente. O entendimento correto dos requisitos consiste na etapa mais crítica do desenvolvimento de um software, possuindo influência direta na qualidade final do produto (Thiry et al., 2010; Vargas et al., 2011; Unkelos-Shpigel e Hadar, 2015; Petri e Chiavegatti, 2015). O início do processo de desenvolvimento de software sempre se dá pela parte mais básica de uma aplicação, a modelagem do banco de Dados. De acordo com o livro Introdução a Sistemas de Bancos de Dados (CJ Date, 2004).

Um sistema de banco de dados é basicamente um sistema computadorizado de manutenção de registros. O banco de dados, por si só, pode ser considerado como o equivalente eletrônico de um armário de arquivamento; ou seja, ele é um repositório ou recipiente para uma coleção de arquivos de dados computadorizados. Os usuários de um sistema podem realizar (ou melhor, solicitar que o sistema realize) operações de SELECIONAR, INSERIR, DELETAR e ATUALIZAR envolvendo tais arquivos.

Um sistema computacional que realiza o armazenamento de suas informações em SGBDs (Sistemas Gerenciadores de Banco de Dados), possui seus arquivos de instalação organizados em DDLs (Data Definition Language) e DMLs (Data Manipulation Language).

DDL e um arquivo de metadados, que define a estrutura das tabelas de um banco de dados, composto por comandos SQL como, por exemplo, CREATE, ALTER e DROP. Os arquivos do tipo DDL são os primeiros a serem executados durante a instalação de um sistema computacional, visto que criam o arcabouço do sistema no SGBD.

DML e um arquivo de dados, cuja estrutura respeita fielmente a estrutura definida ´ em seu respectivo arquivo DDL. Durante o desenvolvimento de um sistema pode, se necessário, inicializar o banco de dados; essa inicialização e colocada em arquivos do tipo ´ DML. Os arquivos DML possuem comandos de INSERT, UPDATE, DELETE e SELECT, tambem utilizados de forma embutida dentro do código-fonte do sistema.

Existem algumas características básicas para seguir o processo de modelagem de dados. Soluções de software empresariais, seja web ou nativo, possuem algum mecanismo de manipulação e persistência de dados. Esse mecanismo deve possuir as 4 funções básicas de armazenamento persistente: criação, leitura, edição e remoção (HELLER, 2007). Essas 4 operações são o núcleo de qualquer estrutura de armazenamento de dados e ficaram popularmente conhecidas pelo acrônimo CRUD (CREATE, READ, UPDATE, DELETE). Ademais, sistemas CRUD são sistemas que seguem um padrão estrutural bem definido: possuem uma base de dados para armazenamento persistente, uma camada de abstração com as 4 operações para a manipulação dos dados, sendo conhecido como camada de acesso a dados ou DAO (Data Access Object), e o sistema que utiliza esta camada para implementar suas funcionalidades e usar os dados armazenados.

Diante desse cenário, programadores sempre procuram metodologias ou métodos mais rápidos de concluírem uma tarefa. Dentre técnicas e métodos de desenvolvimento ágeis, vale destacar um conceito importante: RAD (Rapid Application Development). RAD refere-se a um ciclo de vida de desenvolvimento projetado para dar um desenvolvimento muito mais rápido e maior qualidade de resultados do que o ciclo de vida tradicional (Agarwal, 2000). Tendo como características essenciais das ferramentas RAD incluem a capacidade para planejamento, modelagem de dados e processos, geração de código e teste e depuração. Desse modo, a abordagem de uma ferramenta RAD tende a proporcionar uma maior produtividade no desenvolvimento de software, como também um produto de qualidade (Agarwal, 2000).

O uso das ferramentas de RAD (Rapid Application Development), vem sendo cada vez mais comum no mercado de trabalho. Nesse viés, algumas das ferramentas RAD que são encontradas atualmente são Enterprise Edition (J2EE) e Microsoft .NET, e-Gen Developer, que auxiliam no desenvolvimento de software. A ferramenta e-Gen Developer é um ambiente RAD que proporciona o desenvolvimento extremamente rápido de aplicações para WEB. Foi criado para aumentar a produtividade, reduzir os custos de manutenção, e reduzir o tempo de treinamento e adaptação dos colaboradores (Wander, 2007). Dessa forma, é evidente que as ferramentas RAD contribuem para um rápido desenvolvimento.

A geração de código vem sendo cada vez mais notório nos últimos anos, pois minimiza o problema do retrabalho e adicionar qualidade ao desenvolvimento do software através de uma arquitetura de software pré-definida, algumas das ferramentas que encontramos são JAVA 2 Enterprise Edition (J2EE) e Microsoft .NET, que auxilia no desenvolvimento de um software. A geração de código automático é basicamente um software que gera outros programas (HERRIGTON, 2003).

Gerar código não apenas elimina o trabalho pesado, mas, fornece benefícios para o ciclo de vida da engenharia de software nestas quatro grandes categorias: Produtividade, Qualidade, Consistência, Abstração (HERRIGTON, 2003). Nessas perspectivas, uma das técnicas existente é a scaffolding, por criar automaticamente as estruturas mais significativas de um sistema de dados persistentes: o mapeamento entre objetos, banco de dados e interfaces CRUD. O scaffolder é basicamente uma ferramenta para automatizar a programação de tarefas repetitivas, que do contrário seriam codificadas a mão (COHEN-ZARDI, 2013).

A utilização de ferramentas e técnicas de geração automática de códigos é o escopo do trabalho a ser desenvolvido, construir uma ferramenta web que automatiza todo o processo, desde a modelagem do Bando de Dados através de uma interface gráfica com implementação do modelo de Drag and Drop, até a geração automática das classes que representam as entidades e métodos que permite acessar o banco de dados para realização das operações CRUD. A geração de código será disponibilizada as principais linguagens de programação mais utilizadas no mercado, afim de colaborar para a resolução do problema de velocidade e produtividade na construção de aplicações que utilizem de banco de dados relacionais.

2. METODOLOGIA E DESENVOLVIMENTO

2.1 Linguagens de Programação

2.1.1 TypeScript

Para confecção do presente trabalho foram utilizadas duas linguagens de programação. Foi escolhido para o desenvolvimento Front-end a linguagem TypeScript. A despeito do seu sucesso, JavaScript tornou-se uma linguagem fraca para o desenvolvimento e manutenção de grandes aplicações. TypeScript é uma extensão do JavaScript com intensão de suprir sua deficiência em tipagem estática e orientação a objeto. Sintaticamente, TypeScript é um superset do Ecma-script5, então todo programa JavaScript é um programa TypeScript. TypeScript agrega ao JavaScript um sitema de módulos, classes, interfaces e um sistema de tipagem estática. Como TypeScript visa prover uma leve assistência aos programadores, o sistema de módulos e sistema de tipos é fácil de usar. Em particular, ele suporta muitas práticas comuns ao JavaScript, Ele também possibilita o uso de código assistido por parte das IDEs3, o que sempre foi muito comum em linguagens como o C# e o Java (Bierman; Abadi; Torgersen, 2014).

2.1.2 Python

Para o desenvolvimento do Back-end foi escolhido a linguagem Python. O Python vem crescendo em várias áreas da computação, como inteligência artificial, banco de dados, biotecnologia, animação 3D, aplicativos móveis (celulares), jogos e plataformas web. Isso é explicado por que o Python é famoso por ter “batteries included”, ou seja, baterias inclusas, fazendo referência a um produto completo que pode ser usado prontamente. Hoje é difícil encontrar uma biblioteca que não tenha bindings (versão) em Python. Esse fato torna o aprendizado da linguagem muito mais interessante, uma vez que aprender a programar em Python é poder continuar a utilizar os conhecimentos adquiridos mesmo depois de aprender a programar para resolver problemas reais (Menezes, 2010).

2.2 Frameworks

Além das linguagens de programação, foram utilizadas algumas ferramentas para construção do projeto, algumas delas Frameworks (uma arquitetura de programação que reúne uma variedade de códigos genéricos com o objetivo de simplificar, estruturar e facilitar o processo de desenvolvimento web).

2.2.1 Next.js

Iniciando com Next.js, um framework React (React é uma biblioteca JavaScript para construir interfaces de usuário interativas) que busca melhorar a experiência dos desenvolvedores através de blocos de funcionalidades essenciais para a criação de aplicações web (Souza, 2022). O framework é uma estrutura React flexível que fornece blocos de construção para criar aplicativos da Web rápidos. O Next.js lida com as ferramentas e a configuração necessárias para o React e fornece estrutura, recursos e otimizações adicionais para seu aplicativo.

(Figura 1 – Diagrama do funcionamento do framework Next.js)

(Fonte: Documentação Oficial do Next.js Vercel.)

Pode-se usar o React para criar a interface do usuário e adotar gradualmente os recursos do Next.js para resolver os requisitos comuns do aplicativo, como roteamento, busca de dados, integrações - tudo isso enquanto melhora a experiência do desenvolvedor e do usuário final. Com os recursos de SSR (Server-side Rendering) e SSG (Static Site Generation) Next.js cria um ambiente de desenvolvimento altamente dinâmicos e de alto desempenho (Vercel. 2016).

2.2.2 Django REST Framework

Para o desenvolvimento do Back-end, o framework escolhido foi o Django REST Framework, o Django, framework Back-end [...], é escrito em Python e vem com o conceito de “baterias incluídas”, ou seja, ele dá suporte para a maior parte das necessidades de um desenvolvimento server-side, sendo altamente personalizável, escalável, possuindo uma extensa documentação e uma grande comunidade de desenvolvedores (Santiago, 2020).

(Figura 2 – Diagrama do funcionamento do framework Django)

(Fonte: post publicado no site Medium por Bennet Garner, 17 de maio de 2019.)

A estrutura Django REST é um kit de ferramentas poderoso e flexível para construir APIs da Web. O framework apresenta vantagens como a API navegável na Web que é uma grande vantagem de usabilidade para seus desenvolvedores, políticas de autenticação incluindo pacotes para OAuth1a e OAuth2, serialização que suporta origens de dados ORM e não ORM, totalmente personalizável – basta usar exibição regulares baseadas em função caso não precise dos recursos mais poderosos, extensa documentação e grande suporte da comunidade e é usado e confiável por empresas reconhecidas internacionalmente, incluindo Mozilla, Red Hat, Heroku e EventBrite. (Documentação Oficial do Django REST framework; Django Software Foundation. 2005).

(Figura 3 – Ilustração metafórica do funcionamento do Django REST framework)

(Fonte: Real Python.)

2.2.3 Bootstrap e Tailwind CSS

Para a estilização do projeto foram utilizados dois frameworks, o Bootstrap 5 juntamente com Bootstrap Icons e o Tailwind CSS. O Bootstrap é um framework front-end, que disponibiliza código fonte para a criação de interfaces Web. É considerado um “kit de ferramentas”, contendo componentes HTML, CSS e JavaScript cujo uso proporciona rapidez e praticidade ao desenvolvimento. Este framework tem como principal objetivo auxiliar na criação de sites amigáveis e responsivos. Além disso, oferece uma grande variedade de plug-ins, possui temas compatíveis com vários outros frameworks e possui suporte para todos os navegadores (Santiago, 2020).

O Tailwind é um framework CSS que fornece um catálogo profundo de classes e ferramentas CSS que permitem que você comece a estilizar facilmente seu site ou aplicativo (ANDRADE, 2020). Ao invés de criar uma classe com vários atributos do CSS, o Tailwind permite criar várias classes a uma classe já existente de forma rápida e pouco custosa. Além disso, de acordo com sua documentação, que é robusta e intuitiva, Tailwind oferece um design inteiramente responsivo (Ferreira, 2021).

2.3 Bibliotecas

Outras ferramentas que foram utilizadas para o desenvolvimento do projeto foram as Bibliotecas (Na ciência da computação, bibliotec a ou library é uma coleção de subprogramas utilizados no desenvolvimento de software). A biblioteca principal utilizada para o desenvolvimento foi o ReactFlow.

2.3.1 ReactFlow

React Flow é uma biblioteca de código aberto licenciada pelo MIT, sua principal funcionalidade é construir aplicações baseadas em Nodes (Um Node no React Flow é um componente React. Isso significa que ele pode renderizar o que o desenvolvedor quiser. Cada Node tem uma coordenada x e y, que informa onde ele é colocado na viewport). Todo o React Flow existe dentro da viewport (A viewport tem valores de x, y e zoom. Ao arrastar o painel, você altera as coordenadas x e y e ao aumentar ou diminuir o zoom, altera o nível de zoom).

Cada Node sendo personalizável e podendo ter diversas funcionalidades como renderizar elementos de formulário, visualizar dados, suportar múltiplos handles (Um handle é o local onde uma Edge se conecta a um Node). Podem ser qualquer coisa, desde diagramas estáticos simples até visualizações de dados e editores visuais complexos.

Você pode implementar tipos de Nodes e Edges (Uma Edge conecta dois Nodes. Cada Edge precisa de um Node de destino e um Node de origem. Uma Edge é um caminho SVG que pode ser estilizado com CSS e é totalmente personalizável. Caso o desenvolvedor estiver usando vários handles, poderá referenciá-los individualmente para criar várias conexões para um Node) personalizados e vem com componentes como um minimapa e controles de viewport prontos para uso. (Webkid, 2021).

Essa biblioteca foi utilizada para desenvolver a interface de criação dos Diagramas Relacionais, através dos Nodes, Edges e Handles foi possível criar uma interação com o usuário onde é possível “arrastar” uma tabela para a viewport, adicionar campos nessa tabela, e personalizá-los para que o código SQL seja gerado.

2.3.2 React CodeMirror

O CodeMirror é publicado como um conjunto de pacotes NPM sob o escopo @codemirror. A biblioteca é de código aberto sob uma licença permissiva (MIT). Ele está sendo desenvolvido no GitHub. O CodeMirror é configurado como uma coleção de módulos separados que, juntos, fornecem um editor de texto e código completo. Isso significa que o desenvolvedor pode escolher quais recursos irá precisar e até mesmo substituir a funcionalidade principal por uma implementação personalizada, se necessário (CodeMirror, 2018).

Foi utilizado para o desenvolvimento do editor de códigos SQL e o editor de código de linguagens de programação, adicionando várias funcionalidades para as caixas de texto, dando ao usuário uma melhor usabilidade.

2.3.3 Radix UI

O Radix UI é uma biblioteca de componentes de interface do usuário de código aberto para criar sistemas de design acessíveis e de alta qualidade e aplicativos da web. A biblioteca tem como foco componentes de interface do usuário de baixo nível com foco em acessibilidade, personalização e experiência do desenvolvedor. Você pode usar esses componentes como a camada base do seu sistema de design ou adotá-los de forma incremental (WorkOS, 2020).

Dessa forma, é possível adicionar ao projeto vários componentes com design moderno e de fácil entendimento, proporcionando a aplicação uma interface com visual atrativo.

2.3.4 Autorização com OAuth2.0

OAuth 2.0 é um protocolo de autorização amplamente utilizado no desenvolvimento de aplicações web e sistemas distribuídos. Sua principal finalidade é fornecer um método seguro e padronizado para que usuários concedam acesso controlado a recursos ou informações armazenadas em um serviço por meio de aplicativos de terceiros, sem compartilhar constantemente suas credenciais sensíveis (IEFT, 2012). Dessa forma, esse protocolo permite um site ou aplicativo acesse recursos hospedados por outros aplicativos na web em nome de um usuário de forma segura.

No contexto do projeto, compreender e aplicar o OAuth 2.0 é fundamental para abordar questões de segurança e controle de acesso em sistemas modernos. Este protocolo é especialmente relevante em ambientes onde a autenticação e a autorização precisam ser gerenciadas de maneira eficiente, mas sem comprometer a segurança dos dados dos usuários.

O protocolo OAuth 2.0 opera em torno de conceitos-chave, como "Authorization Grant" (concessão de autorização), "Access Token" (token de acesso) e "Refresh Token" (token de atualização). A fase inicial envolve a concessão de autorização, onde o usuário concede permissões específicas a um cliente para acessar seus recursos protegidos. Em seguida, a concessão é trocada por um token de acesso, utilizado em solicitações subsequentes para autorização de acesso de recursos. O token de atualização é opcional, mas valioso, devido a proporcionar uma abordagem segura para renovar o token de acesso sem exigir nova intervenção do usuário, contribuindo assim para a fluidez e segurança contínua nas interações entre aplicativos e usuários em ambientes distribuídos.

2.3.5 JSON Web Token

No contexto da estrutura de segurança implementada no projeto, destaca-se o uso do JSON Web Token (JWT) como formato de token. O JSON Web Token (JWT) é um padrão aberto (RFC 7519), que tem por objetivo definir um modo compacto e independente, que pode ser enviado dentro de um cabeçalho HTTP e conter as informações do usuário, para a transmissão segura de informações entre cliente e servidor, através de um objeto JSON (Montanheiro, 2017). No cenário de autorização, o JWT é frequentemente empregado como o formato padrão para os tokens de acesso gerados durante o processo de autenticação do OAuth 2.0.

O JWT consiste em três partes principais: um cabeçalho (header), um payload (carga útil) e uma assinatura. O cabeçalho identifica o tipo do token e o algoritmo de assinatura utilizado, o payload contém as reivindicações (claims) que transportam informações sobre o usuário e as permissões associadas, e a assinatura é gerada com base no cabeçalho, payload e uma chave secreta, proporcionando integridade aos dados.

A escolha do JWT como formato de token oferece vantagens significativas, como a facilidade de transporte entre diferentes partes do sistema, a autocontenção das informações, reduzindo a necessidade de consultas ao servidor para verificar a validade do token, e a possibilidade de verificar a integridade dos dados sem a necessidade de consultas adicionais.

2.4 Banco de Dados

2.4.1 Diagrama Relacional

Para a persistência dos dados relacionados aos usuários da aplicação e seus respectivos projetos, foi desenvolvido um banco de dados relacional, conforme ilustrado na Figura 7 - Diagrama Relacional. Este diagrama inclui a tabela de Usuário, estabelecendo uma relação de 1 para N com a tabela de Projeto. Além disso, a tabela de Projeto possui uma relação de 1 para N com a tabela de Arquivos de Classe, sendo esta última uma relação opcional. Em outras palavras, cada usuário pode estar associado a mais de um projeto, e cada projeto, de forma opcional, pode possuir vários arquivos de classes. Dessa forma, é possível estruturar os dados mantidos de forma organizada para o consumo posterior de forma fácil.

(Figura 7 – Diagrama Relacional)

(Fonte: Autores)

2.4.2 PostgreSQL

O sistema de gerenciamento de banco de dados PostgreSQL foi utilizado no projeto para armazenar as informações e projetos dos usuários cadastrados, garantindo que as informações geradas na aplicação não se percam e possam ser acessadas posteriormente. Isso proporciona maior segurança e confiabilidade aos dados, além de facilitar a recuperação de informações importantes quando necessário, sendo uma escolha sólida devido à sua robustez, eficiência e flexibilidade.

O PostgreSQL é um poderoso sistema gerenciador de banco de dados objeto-relacional de código aberto. Por muito tempo, foi descriminado no mundo dos bancos de dados, e o seu recente aumento de popularidade veio de usuários de outros bancos de dados em busca de um sistema com melhores garantias de confiabilidade, melhores recursos de consulta, mais operação previsível, ou simplesmente querendo algo mais fácil de aprender, entender e usar. [...] com mais de 15 anos de desenvolvimento ativo e uma arquitetura que comprovadamente ganhou forte reputação de confiabilidade, integridade de dados e conformidade a padrões, o PostgreSQL tem como características:

É fácil de usar comandos SQL do PostgreSQL são consistentes entre si e, por padrão, as ferramentas de linha de comando aceitam os mesmos argumentos. Os tipos de dados não têm truncamento silencioso ou outro comportamento estranho. Surpresas são raras, e essa facilidade de utilização se generaliza para outros aspectos do sistema.

O PostgreSQL é totalmente transacional, incluindo mudanças estruturais destrutivas. Isso significa que você pode tentar qualquer coisa com segurança dentro de uma transação, mesmo a exclusão de dados ou alterar estruturas de tabela, com a certeza de que, se você reverter a transação, cada mudança que você fez será revertida. Fácil backup e restauração tornam trivial clonar um banco de dados.

Suporta muitos tipos de dados sofisticados, incluindo JSON, XML, objetos geométricos, hierarquias, tags e matrizes. Novos tipos de dados e funções podem ser escritos em SQL, C, ou linguagens procedurais muito incorporadas, incluindo Python, Perl, TCL e outras. Extensões adicionam diversas capacidades rápida e facilmente, incluindo full-text search, acompanhamento de slow query, criptografia de senha e muito mais. Durante o livro, veremos exemplos acompanhados de uma explicação teórica para ficar fácil o entendimento.

O PostgreSQL é muito amigável tanto para o desenvolvimento de software quanto para a administração de banco de dados. Todas as conexões são processos simples e podem ser gerenciadas por utilitários do sistema operacional. Ele também fornece ao sistema operacional o que o banco e cada conexão estão fazendo. O layout de pasta padrão torna mais fácil de controlar onde os dados são armazenados para que você possa fazer o uso máximo do seu particionamento. Ele usa as facilidades de inicialização do sistema operacional em todas as plataformas.

O SGBD faz uso estratégico de indexação e consulta de otimização para trabalhar com o menor esforço possível. Ele tem um dos planejadores de consulta mais avançados de qualquer banco de dados relacional, e ainda expõe seu raciocínio interno através da funcionalidade Explain. Logo, você pode encontrar e corrigir problemas de desempenho se eles surgirem. PostgreSQL é referência com ótima performance em operações de leitura-escrita, conjuntos de dados massivos e consultas complexas (Carvalho, 2017).

2.4.3 Docker

O Docker foi utilizado no projeto para facilitar o processo de desenvolvimento, implantação e execução de aplicações. Com o Docker, é possível criar e gerenciar contêineres, que são ambientes isolados e autossuficientes nos quais as aplicações podem ser executadas de forma consistente, independentemente do ambiente de hospedagem. Além disso, o Docker tornou o projeto altamente portátil, permitindo que a aplicação em desenvolvimento seja facilmente movida para outras máquinas sem necessidade de grandes ajustes.

Docker tem sido um assunto bem comentado ultimamente, muitos artigos foram escritos, geralmente tratando sobre como usá-lo, ferramentas auxiliares, integrações e afins, mas muitas pessoas ainda fazem a pergunta mais básica quando se trata da possibilidade de utilizar qualquer nova tecnologia: “Por que devo usar isso?” uma vez que sua aplicação seja transformada em uma imagem Docker, ela pode ser instanciada como container em qualquer ambiente que desejar. Isso significa que poderá utilizar sua aplicação no notebook do desenvolvedor da mesma forma que seria executada no servidor de produção.

Utilizando as imagens Docker é possível empacotar toda sua aplicação e dependências, facilitando a distribuição, pois não será mais necessário enviar uma extensa documentação explicando como configurar a infraestrutura necessária para permitir a execução, basta disponibilizar a imagem em repositório e liberar o acesso para o usuário e, ele mesmo pode baixar o pacote, que será executado sem problemas.

Como as imagens Docker são construídas através de arquivos de definição¹⁶, é possível garantir que determinado padrão seja seguido, aumentando a confiança na replicação. Basta que as imagens sigam as melhores práticas¹⁷ de construção para que seja viável escalarmos¹⁸ a estrutura rapidamente.

A sintaxe usada para parametrizar as imagens e ambientes Docker pode ser considerada um idioma comum entre áreas que costumeiramente não dialogavam bem. Agora é possível ambos os setores apresentarem propostas e contrapropostas com base em um documento comum (Gomes, 2019).

2.5 Ferramentas

2.5.1 JSON

JavaScript Object Notation, este é um formato padrão de representação de dados que surgiu no ano de 2001 e é largamente utilizado para representar dados semiestruturados. De acordo com (INTERNATIONAL, 2013), JSON é um formato baseado em texto que possibilita a troca de dados independentemente da linguagem.

A importância dessa tecnologia é evidente na troca de informações entre sistemas, pois se tornou padrão de formato para diversas aplicações e também é largamente empregado na comunicação de respostas Ajax, como em demais sistemas (Machado, Fhabiana Thieli dos Santos. 2017).

2.5.2 GitHub

O GitHub é um serviço WEB para armazenamento e colaboração de código que utiliza o GIT para controle de versão. Sendo o maior host único para repositórios Git, é o ponto central de colaboração de milhões de desenvolvedores e projetos. Muitos projetos de código aberto o usam para hospedagem do Git, rastreamento de problemas, revisão de código e outras coisas (CHACON E STRAUB, 2014). A plataforma também funciona como uma rede social para programadores permitindo interação e comunicação (Barbosa, Gabriel Silva; Evaldo de Oliveira da Silva. 2018).

2.6 Geração de Código

No contexto deste projeto, a implementação de geração de código automatizada, também conhecida como scaffolding, emerge como uma prática essencial para aprimorar a eficiência e uniformidade no processo de desenvolvimento. O scaffolding consiste na criação automática de estruturas básicas de um projeto, essa abordagem permite que o desenvolvedor inicie novos módulos ou componentes com uma base sólida, economizando tempo e mitigando possíveis erros humanos associados à configuração inicial.

A plataforma concebida neste projeto incorpora a geração de código para criar de forma automática o SQL correspondente a um diagrama relacional. Além disso, a plataforma gera classes representativas das entidades do banco de dados. Essas classes são complementadas por métodos de conexão, simplificando significativamente o acesso aos dados e sustentando a uniformidade na interação com o banco de dados. Essa abordagem não apenas impulsiona a produtividade inicial, mas também promove a manutenção consistente ao longo do ciclo de vida do projeto, garantindo uma base sólida para o desenvolvimento contínuo.

2.6.1 Geração de Código SQL

Para efetuar a geração de código SQL, é essencial que o usuário construa o diagrama correspondente. Com esse propósito, desenvolvemos um ambiente de design e modelagem de banco de dados relacionais. Utilizamos a biblioteca ReactFlow, que proporciona suporte para a criação de um sistema intuitivo de arrastar e soltar, permitindo que o usuário estabeleça relações entre entidades sem a necessidade de escrever código.

Após a estruturação do diagrama pelo usuário, os arrays de Nodes e Edges presentes na viewport são capturados. Esses dados são mapeados e transformados em um JSON que representa todas as entidades do diagrama, incluindo o nome do banco de dados a ser gerado, os nomes das tabelas e os atributos de cada tabela com suas respectivas características, como os tipos de dados de cada atributo e as conexões com chaves estrangeiras. Este JSON é então enviado como uma string para a API REST por meio de uma requisição HTTP e tratado no Back-end.

O algoritmo responsável pelo tratamento do JSON e sua conversão para o padrão SQL é de baixa complexidade. Seu funcionamento consiste em percorrer dinamicamente todo o conteúdo do JSON por meio de laços de repetição, extraindo os valores e inserindo-os em strings modelos de SQL. Posteriormente, essas strings são concatenadas, permitindo a transformação eficaz dos dados contidos no JSON em um padrão de código específico. Dessa forma, a resposta da requisição HTTP contém o código SQL gerado.

Após receber a resposta, uma nova página é carregada, apresentando o código SQL dentro de um editor de código do CodeMirror. Este código pode ser modificado pelo usuário, mantendo a persistência dos dados gerados ou alterados no banco de dados. Isso possibilita a visualização do SQL a qualquer momento, mesmo se o download do arquivo não for realizado.

2.6.2 Geração do Código das Classes

Para a geração das classes, parte como base um código SQL contendo as instruções de declarações de criação de tabelas, podendo essa ser obtida por meio do código SQL gerado na plataforma ou upload direto por parte do usuário. A geração é efetuada por meio de uma requisição HTTP, onde em conjunto é enviado pelo corpo da requisição o JSON contendo o SQL e a linguagem de programação a ser transformado, ademais as especificações dos métodos complementares que também devem ser geradas em conjunto.

O algoritmo de conversão das tabelas SQL para as classes, pode ser dividido em duas principais etapas para que seja alcançado com sucesso o resultado, uma delas é o processo de obtenção dos dados relevantes no SQL e após isso a etapa de reestruturação desses dados em uma nova estrutura de dados ou esqueleto, que seriam as classes.

A primeira etapa consiste fundamentalmente de manipulações de string e o uso de regex, para que entre a estrutura do código SQL seja fragmentado e obtido os dados necessários, que incluem principalmente os nomes das tabelas, atributos, e qual é o tipo de cada atributo. Nessa perspectiva, a linguagem Python contribui de forma muito significativa, pelo fácil uso do regex para fazer pesquisas complexas em strings, por meio de suas funções e bibliotecas nativas. Dessa forma, essa etapa é responsável por buscar e armazenar esses dados na estrutura de dados de listas de forma organizada.

A segunda etapa abrange em pegar esses dados separados e inserir em uma completa nova estrutura. Primeiramente, é distinguido qual a linguagem foi solicitada para gerar o código, então por meio de modelos de strings contendo placeholders, é inserido os dados para obtenção dos métodos e atributos que irão pertencer a classe. Para as linguagens que exigem a declaração dos tipos das variáveis, é convertido para o tipo respectivo da linguagem, para isso foi usado estruturas de chave e valor pré-definidas, na qual submetendo uma chave, que seria o tipo do SQL, é obtido o tipo referente a determinada linguagem. Após a geração dos códigos dos métodos e atributos a parte, são unidos em um único modelo principal, na qual é posteriormente retornado na requisição inicial.

Dessa forma, a aplicação Front-end no lado do cliente obtém e apresenta o código convertido das classes para o usuário, onde a visualização e a edição são possíveis. Para a visualização do fluxo de processos de forma ilustrativa pode ser feita pela Figura 4 – Diagrama de Geração de Código.

(Figura 4 – Diagrama de Geração de Código)

(Fonte: Autores)

2.6 Interatividade do Usuário

Através das diversas ferramentas e bibliotecas utilizadas para construção do projeto, foi alcançado um resultado de interatividade com o usuário onde, a partir do cadastro ou login na plataforma do DataFlow, o usuário terá a possibilidade de criar seus próprios projetos com diagramas de Banco de Dados, ou enviando diretamente um código SQL, a partir desses diagramas gerar códigos SQL baseados na sua construção e ao fim gerar Classes para conexão com o Banco de Dados desenvolvido, em diversas linguagens de programação.

O acesso ao site se deu pela seguinte forma: através da Landing Page, o usuário terá acesso as páginas de Login e Cadastro, onde poderá gerenciar suas credenciais de registro ou autenticação. Tendo realizado o cadastro e acessado através do Login, o site o redirecionará para a página Home. Dentro da página home será liberado o acesso para as páginas: Acessar Perfil, Visualizar Projetos Próprios, Criar Projeto, Visualizar Documentação de Uso, sobre os Desenvolvedores, onda cada uma terá uma função diferente. Na página de Projetos, o usuário terá a possibilidade de acessar o criador de diagramas, salvar ou baixar uma imagem do diagrama gerado e gerar um código SQL baseado na construção do diagrama. Após a geração, a página será redirecionada à Área de Código, onde será possível criar classes, salva-las ou os códigos SQL, edita-los e baixar todos os arquivos disponíveis. Também ficará disponível uma página de Perfil onde o usuário poderá alterar seus dados ou excluir sua conta. Tudo isso está descrito na Figura 5 – Diagrama Hierárquico.

(Figura 5 – Diagrama Hierárquico)

(Fonte: Autores)

Como demonstrado na Figura 6 – Diagrama de Caso – o usuário, ao acessar o sistema, pode realizar o cadastrar pessoal e cadastrar seus projetos, mantendo assim seus dados. No processo de criar um projeto, é obrigatório o usuário ter que criar um banco de dados, podendo ser por meio do diagrama relacional montado ou enviando um código SQL diretamente para o sistema. A partir do Banco de Dados criado, o usuário tem capacidade de gerar classes em diversas linguagens de programação, escolhendo apenas uma para realmente efetuar a geração, e obter as classes que representem as entidades do seu banco de dados. Após a criação de projetos, como forma de interação o usuário poderá compartilhar ou importar projetos para outros usuários.

(Figura 6 – Diagrama de caso de uso do Usuário do Dataflow)

(Fonte: Autores)

Essa interatividade foi planejada para trazer uma experiência rápida e fluida, com tarefas divididas entre o Front-end e o Back-end da aplicação. Essa integração foi feita por requisições HTTP presentes no Next.js para o Django REST Framework, onde o Next.js envia as requisições e aguarda a resposta do Django REST Framework, demonstrado na Figura 8 – Diagrama de Interatividade do Front-end com Back-end.

(Figura 8 – Diagrama de Interatividade do Front-end com Back-end)

(Fonte: Autores)

A aplicação foi construída baseada em duas grandes camadas, o frontend e o backend. O frontend, a camada mais externa a qual o usuário tem acesso, é dividido em 4 subcamadas que dividem os serviços atribuídos ao frontend. A subcamada mais exposta são as URLs onde o cliente terá acesso pelo navegador, após as URLs, a camada Pages é requisitada para a construção da interface da aplicação, essa camada ainda é dividida em mais duas camadas subsequentes, a Container, onde ficará armazenada toda a estrutura de uma página da web e a Components que são os componentes que preencheram os Containers de acordo com a necessidade de cada Page. No backend, é constituído por 4 camadas principais, sendo a primeira de URLs sendo a mais externa, onde recebe as requisições HTTP e redireciona para as Views, onde é tratado toda a regra de negócio e a lógica das operações, comunicando com o Model que é representado as entidades do banco de dados, e o Serializer que faz a serialização de dados entre objetos do Model em registros da base de dados, até validações de dados. Isso pode ser visto na Figura 9 – Diagrama de Arquitetura da Aplicação.

(Figura 9 – Diagrama de Arquitetura da Aplicação)

(Fonte: Autores)

2.7 Custo do Sistema

Para determinar o custo do sistema, realizamos uma análise da média salarial de desenvolvedores nas principais tecnologias e funções essenciais ao longo de todo o processo de desenvolvimento do projeto, que pode ser visualizado em Tabela 1 – Tabela de média salarial.

(Tabela 1 – Tabela de média salarial)

(Fonte: Glassdoor e BrTalent)

Ao contabilizar todas as horas dedicadas ao desenvolvimento e calcular o valor médio salarial por hora para cada função, como demonstrado na Tabela 2 – Tabela de custo, concluímos que o sistema possui um custo médio de R$ 9.968,70.

(Tabela 2 – Tabela de custo)

(Fonte: Autores)

3. RESULTADOS E DISCUSSÕES

Para criar ou gerenciar projetos, o usuário após efetuar o login terá acesso a home do sistema, onde seus projetos já criados serão exibidos e a possiblidade de criar outros estará disponível.

(Figura 7 – Tela de Projetos)

(Fonte: Autores)

Utilizando o conjunto de tecnologias apresentadas, a interface de criação de Diagramas foi desenvolvida. Através do sistema de Drag and Drop é possível criar tabelas, personalizá-las, adicionar campos, atribuir modificadores e conectá-los. Ao final da diagramação, o usuário poderá enviar seu diagrama e transformá-lo em código SQL.

(Figura 8 – Tela de criação de Diagrama Relacional)

(Fonte: Autores)

Após a criação do Diagrama Relacional do projeto, o usuário poderá gerar códigos SQL e Classes em diversas linguagens de programação. Acessando a tela de geração de código, o SQL proveniente do diagrama criado anteriormente estará disponível para visualização e edição. Nessa mesma interface, também estará presente o botão de criação de classes, onde basta escolher a linguagem que será utilizada e código será gerado.

(Figura 9 – Tela de Geração de códigos SQL e de Classes)

(Fonte: Autores)

A interface desenvolvida é intuitiva e eficiente, assim como a interface de criação de formulários do sistema .NET da Microsoft, onde é possível arrastar componentes para a tela para gerar códigos em C#, o projeto atende as necessidades de facilitar o desenvolvimento de forma rápida e competente, dando, analogamente como no sistema da Microsoft, a possibilidade do usuário simplesmente ao arrastar um componente representativo de uma tabela, gerar códigos SQL e Classes em diversas linguagens de programação. Outra tecnologia que se assemelha ao projeto é a ferramenta e-Gen Developer, sendo um ambiente RAD que proporciona o desenvolvimento rápido de aplicações para WEB. Foi criado para aumentar a produtividade, reduzir os custos de manutenção e reduzir a curva de aprendizagem, tornando o desenvolvimento mais padronizado e limpo, característica também presente no projeto desenvolvido.

4. CONCLUSÃO

O sistema desenvolvido permitiu que os usuários criassem diagramas de banco de dados de forma interativa e, a partir desses diagramas, gerassem códigos SQL e Classes de conexão com o banco em diversas linguagens de programação. Os resultados obtidos com a implementação do projeto foram satisfatórios, demonstrando a eficiência das tecnologias utilizadas. O sistema atendeu às expectativas, permitindo o cadastro de usuários, onde eles a partir do login, poderão gerar código SQL com base em suas criações de diagramas de banco de dados.

A realização do projeto desenvolvido pode ser de extrema relevância no cenário de desenvolvimento de software, pois um tópico muito discutido por desenvolvedores é a produtividade nas etapas iniciais de produção de softwares. Os objetivos propostos foram cumpridos, garantindo a partir do processo de diagramação do banco de dados gerar o arquivo SQL e a estrutura básica das Classes de Entidades e Conexão, assim podendo agilizar demandas do desenvolvimento.

A integração entre as linguagens TypeScript e Python para o Front-end e Back-end, respectivamente, proporcionou uma aplicação coesa e funcional. Além disso, os frameworks escolhidos, como o Next.js e o Django REST, ofereceram uma experiência de desenvolvimento aprimorada e possibilitaram a criação de aplicações web rápidas, segura e responsivas.

As bibliotecas React Flow, React CodeMirror e Radix UI contribuíram para a criação de interfaces de usuário interativas e personalizadas, ampliando a usabilidade do sistema. O PostgreSQL, como sistema de gerenciamento de banco de dados, mostrou-se robusto e confiável, enquanto o Docker proporcionou facilidade na distribuição e replicação do ambiente de desenvolvimento, impendido conflito de versões.

O projeto ainda pode ser melhorado com alterações futuras como: a implementação de mais linguagens de programação como opção para construção de classes. A conversão de códigos SQL em diagramas de Banco de Dados através de uma engenharia reversa da conversão dos diagramas em código SQL. A adição de mais interatividade na interface de construção dos diagramas. A opção de compartilhamento dos projetos desenvolvidos, e uma forma de permitir acesso aos projetos publicados por outros usuários, assim fomentando a comunidade e aumentando as formas de interação do sistema.

5. REFERÊNCIA BIBLIOGRÁFICA

AGARWAL, R. et al. Risks of Rapid Application Development. [S. l.: s. n.], 2000.

BIERMAN, G., Abadi, M., Torgersen, M. (2014). Understanding TypeScript. In: Jones, R. (eds) ECOOP 2014 – Object-Oriented Programming. ECOOP 2014. Lecture Notes in Computer Science, vol 8586. Springer, Berlin, Heidelberg. https://doi.org/10.1007/978-3-662-44202-9_11

CARVALHO, Vinícius. PostgreSQL: Banco de dados para aplicações web modernas. 1.ed. São Paulo: Editora Casa do Código, Alura, 2017.

LOPES, Jean. PHP ou TypeScript: uma comparação de duas linguagens para web pelas suas características. 2016. Dissertação (Trabalho de Conclusão do Curso Superior de Tecnologia em Sistemas Para Internet) – Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Sul, Porto Alegre, 2016.

FERREIRA, Brenda Sotero. Framework Laravel: um estudo de caso full stack development. 2021. 99 f. Monografia (Graduação em Ciência da Computação) - Instituto de Ciências Exatas e Biológicas, Universidade Federal de Ouro Preto, Ouro Preto, 2021.

GOMES, Rafael. Docker para desenvolvedores. 1.ed. Salvador: Leanpub, 2019.

HELLER, M. REST and CRUD: the impedance mismatch web application framework. Framingham, MA, EUA, 2007.

HERRINGTON, Jack. Code generation in action. [S.l.]: Manning Publications Co., 2003. 400 p. ISBN 1930110979.

INTERNET ENGINEERING TASK FORCE. OAuth 2.0 Authorization Framework. RFC 6749, 2012. 

MALCOLM Eva. Requirements acquisition for rapid applications development, Information & Management, Volume 39, Issue 2. 2001. Pages 101-107, ISSN 0378-7206.

MARTINS FILHO, Dinarte Alves. FASTSF: uma ferramenta de geração de código para o incremento da produtividade no desenvolvimento de sistemas de informação web. 2017. 102f. Dissertação (Mestrado Profissional em Engenharia de Software) - Instituto Metrópole Digital, Universidade Federal do Rio Grande do Norte, Natal, 2017.

MENEZES C. NEY, Nilo. Introdução à programação com Python. 1.ed. São Paulo: Novatec Editora Ltda, 2010.

Montanheiro, Lucas Souza; Carvalho, Ana Maria Martins; Rodrigues, Jackson Alves. Utilização de JSON Web Token na Autenticação de Usuários em APIs REST. In: XIII Encontro Anual de Computação - EnAComp 2017, UFG.

SANTIAGO, C. P.; VERAS, N. L.; de ARAGÃO, A. P.; CARVALHO, D. A.; AMARAL, L. A. Desenvolvimento de sistemas Web orientado a reuso com Python, Django e Bootstrap. 2020.

SOUZA, F. M. C.; LIMA, E. C. S.; CARIDADE, E. R. de S. Criando sistema escalável de agendamentos utilizando Typescript com Nest.js no backend e Next.js no frontend. 2022.

WEBKID. ReactFlow. Documentação oficial. 2021.

WORKOS. Radix UI. Documentação oficial. 2020.